mirror of
https://github.com/Minidoracat/mcp-feedback-enhanced.git
synced 2025-07-27 10:42:25 +08:00
289 lines
9.3 KiB
HTML
289 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Tooltip 方向測試</title>
|
||
<style>
|
||
:root {
|
||
--bg-primary: #1e1e1e;
|
||
--bg-secondary: #2d2d30;
|
||
--text-primary: #cccccc;
|
||
--text-secondary: #969696;
|
||
--accent-color: #007acc;
|
||
--border-color: #464647;
|
||
--transition-fast: 0.2s;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
.test-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.test-section {
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
background: var(--bg-secondary);
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.test-header {
|
||
background: var(--bg-secondary);
|
||
padding: 12px 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 會話ID顯示樣式 */
|
||
.session-id-display {
|
||
font-family: 'Consolas', 'Monaco', monospace;
|
||
color: var(--accent-color);
|
||
cursor: pointer;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
background: rgba(0, 122, 204, 0.1);
|
||
border: 1px solid transparent;
|
||
transition: all var(--transition-fast) ease;
|
||
position: relative;
|
||
font-weight: 500;
|
||
display: inline-block;
|
||
}
|
||
|
||
.session-id-display:hover {
|
||
background: rgba(0, 122, 204, 0.2);
|
||
border-color: var(--accent-color);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.session-id-display:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* 會話ID tooltip - 向下顯示 */
|
||
.session-id-display::after {
|
||
content: attr(data-full-id);
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
padding: 6px 10px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
white-space: nowrap;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
border: 1px solid var(--border-color);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all var(--transition-fast) ease;
|
||
z-index: 1000;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.session-id-display:hover::after {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
/* 對比：向上顯示的tooltip */
|
||
.session-id-display-up {
|
||
font-family: 'Consolas', 'Monaco', monospace;
|
||
color: var(--accent-color);
|
||
cursor: pointer;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
background: rgba(0, 122, 204, 0.1);
|
||
border: 1px solid transparent;
|
||
transition: all var(--transition-fast) ease;
|
||
position: relative;
|
||
font-weight: 500;
|
||
display: inline-block;
|
||
}
|
||
|
||
.session-id-display-up:hover {
|
||
background: rgba(0, 122, 204, 0.2);
|
||
border-color: var(--accent-color);
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.session-id-display-up::after {
|
||
content: attr(data-full-id);
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
padding: 6px 10px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
white-space: nowrap;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
border: 1px solid var(--border-color);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all var(--transition-fast) ease;
|
||
z-index: 1000;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.session-id-display-up:hover::after {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.description {
|
||
margin-bottom: 15px;
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.test-item {
|
||
margin: 20px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.test-label {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-message {
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
background: rgba(76, 175, 80, 0.2);
|
||
color: #4caf50;
|
||
border: 1px solid #4caf50;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="test-container">
|
||
<h1>Tooltip 方向測試</h1>
|
||
|
||
<!-- 頂部測試 - 模擬實際使用場景 -->
|
||
<div class="test-header">
|
||
<span>📋 當前會話:
|
||
<span class="session-id-display"
|
||
data-full-id="6a674dda-1b98-4f86-824b-afdfd8c581f2"
|
||
title="點擊複製完整會話ID">6a674dda...</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>測試說明</h3>
|
||
<div class="description">
|
||
以下是不同位置的tooltip顯示測試。將滑鼠懸停在會話ID上查看tooltip的顯示方向。
|
||
</div>
|
||
|
||
<div class="test-item">
|
||
<span class="test-label">✅ 新版本 - 向下顯示 (推薦)</span>
|
||
<span class="session-id-display"
|
||
data-full-id="6a674dda-1b98-4f86-824b-afdfd8c581f2">6a674dda...</span>
|
||
</div>
|
||
|
||
<div class="test-item">
|
||
<span class="test-label">❌ 舊版本 - 向上顯示 (會超出畫面)</span>
|
||
<span class="session-id-display-up"
|
||
data-full-id="6a674dda-1b98-4f86-824b-afdfd8c581f2">6a674dda...</span>
|
||
</div>
|
||
|
||
<div class="status-message">
|
||
✅ 新版本的tooltip向下顯示，確保在頁面頂部也能完整看到完整的會話ID
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>實際應用場景</h3>
|
||
<div class="description">
|
||
在實際應用中，會話ID位於頁面頂部的連線狀態欄中。向下顯示tooltip可以確保用戶始終能看到完整的會話ID，而不會被瀏覽器視窗邊界截斷。
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 20px;">
|
||
<span style="color: var(--text-secondary);">
|
||
💡 提示：將滑鼠懸停在上方頂部區域的會話ID上測試實際效果
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 添加點擊複製功能
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const sessionIdElements = document.querySelectorAll('.session-id-display, .session-id-display-up');
|
||
|
||
sessionIdElements.forEach(function(element) {
|
||
element.addEventListener('click', function() {
|
||
const fullId = this.getAttribute('data-full-id');
|
||
|
||
if (navigator.clipboard) {
|
||
navigator.clipboard.writeText(fullId).then(function() {
|
||
showMessage('會話ID已複製到剪貼板: ' + fullId);
|
||
}).catch(function(err) {
|
||
console.error('複製失敗:', err);
|
||
fallbackCopy(fullId);
|
||
});
|
||
} else {
|
||
fallbackCopy(fullId);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
function fallbackCopy(text) {
|
||
const textArea = document.createElement('textarea');
|
||
textArea.value = text;
|
||
document.body.appendChild(textArea);
|
||
textArea.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(textArea);
|
||
showMessage('會話ID已複製到剪貼板: ' + text);
|
||
}
|
||
|
||
function showMessage(message) {
|
||
// 創建臨時消息提示
|
||
const messageEl = document.createElement('div');
|
||
messageEl.textContent = message;
|
||
messageEl.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: rgba(76, 175, 80, 0.9);
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
z-index: 10000;
|
||
font-size: 14px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||
`;
|
||
|
||
document.body.appendChild(messageEl);
|
||
|
||
setTimeout(function() {
|
||
messageEl.style.opacity = '0';
|
||
messageEl.style.transition = 'opacity 0.3s ease';
|
||
setTimeout(function() {
|
||
document.body.removeChild(messageEl);
|
||
}, 300);
|
||
}, 2000);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|