完善功能

2025-04-02 21:31:51 +08:00
parent 341630f547
commit 811fbf2924
7 changed files with 426 additions and 62 deletions
@@ -197,34 +197,109 @@ function updateProcesses(processes) {
    const totalCount = document.getElementById('process-count');
    totalCount.textContent = processes.count;

-    processes.list.forEach(process => {
-        const processElement = document.createElement('div');
-        processElement.className = 'process-card';
-        
-        const header = document.createElement('div');
-        header.className = 'process-header';
-        header.innerHTML = `
-            <span class="process-name">${process.name}</span>
-            <span class="topic-count">订阅:${process.subscribed.length} 发布:${process.published.length}</span>
-        `;
-        
-        const body = document.createElement('div');
-        body.className = 'process-body';
-        body.innerHTML = `
-            <div class="topic-group">
-                <h4>订阅主题</h4>
-                <ul class="subscribed-list">${process.subscribed.map(t => `<li>${t}</li>`).join('')}</ul>
-            </div>
-            <div class="topic-group">
-                <h4>发布主题</h4>
-                <ul class="published-list">${process.published.map(t => `<li>${t}</li>`).join('')}</ul>
+        // 创建消息详情弹窗
+        const modal = document.createElement('div');
+        modal.id = 'message-modal';
+        modal.className = 'modal';
+        modal.innerHTML = `
+            <div class="modal-content">
+                <span class="close-modal">&times;</span>
+                <h3>消息详情</h3>
+                <div class="message-details">
+                    <div class="detail-row">
+                        <label>消息名称:</label>
+                        <span id="message-name"></span>
+                    </div>
+                    <div class="detail-row">
+                        <label>消息类型:</label>
+                        <span id="message-type"></span>
+                    </div>
+                    <div class="detail-row">
+                        <label>最后更新时间:</label>
+                        <span id="message-timestamp"></span>
+                    </div>
+                    <div class="detail-row">
+                        <label>消息内容:</label>
+                        <pre id="message-content"></pre>
+                    </div>
+                </div>
            </div>
        `;
+        document.body.appendChild(modal);

-        processElement.appendChild(header);
-        processElement.appendChild(body);
-        processList.appendChild(processElement);
-    });
+        // 添加弹窗关闭事件
+        modal.querySelector('.close-modal').addEventListener('click', () => {
+            modal.style.display = 'none';
+        });
+
+        processes.list.forEach(process => {
+            const processElement = document.createElement('div');
+            processElement.className = 'process-card';
+            
+            const header = document.createElement('div');
+            header.className = 'process-header';
+            header.innerHTML = `
+                <span class="process-name">${process.name}</span>
+                <span class="topic-count">订阅:${process.subscribed.length} 发布:${process.published.length}</span>
+            `;
+            
+            const body = document.createElement('div');
+            body.className = 'process-body';
+            body.innerHTML = `
+                <div class="topic-group">
+                    <h4>订阅主题</h4>
+                    <ul class="subscribed-list">${process.subscribed.map(t => `<li class="message-item" data-type="subscribed">${t}</li>`).join('')}</ul>
+                </div>
+                <div class="topic-group">
+                    <h4>发布主题</h4>
+                    <ul class="published-list">${process.published.map(t => `<li class="message-item" data-type="published">${t}</li>`).join('')}</ul>
+                </div>
+            `;
+
+            body.querySelectorAll('.message-item').forEach(item => {
+                let timeoutId;
+            item.addEventListener('mouseenter', function(event) {
+                timeoutId = setTimeout(async () => {
+                    const spinner = createSpinner(event.clientX, event.clientY);
+                    
+                    try {
+                        const messageName = item.textContent; // 新增获取消息名称
+                        const messageType = item.dataset.type; // 新增获取消息类型
+                        const response = await fetch(`/api/message-details?name=${encodeURIComponent(messageName)}&type=${messageType}`);
+                        const data = await response.json();
+                        
+                        if (data.success) {
+                            // 根据C++的CVar结构映射字段
+                            document.getElementById('message-name').textContent = data.name || 'N/A';
+                            document.getElementById('message-type').textContent = data.type || '未知类型';
+                            document.getElementById('message-timestamp').textContent = new Date(data.time * 1000).toLocaleString(); // 时间戳转换
+                            document.getElementById('message-content').textContent = JSON.stringify({
+                                value: data.value,
+                                source: data.source
+                            }, null, 2);
+                            modal.style.display = 'block';
+                        } else {
+                            showErrorTooltip(event, `获取失败: ${data.message || '未知错误'}`);
+                        }
+                    } catch (error) {
+                        showErrorTooltip(event, '网络连接异常，请检查后重试');
+                        console.error('获取消息详情失败:', error);
+                    } finally {
+                        spinner.remove();
+                    }
+                }, 300);
+            });
+
+            item.addEventListener('mouseleave', () => {
+                clearTimeout(timeoutId);
+                modal.style.display = 'none';
+            });
+            });
+
+            processElement.appendChild(header);
+            processElement.appendChild(body);
+            processList.appendChild(processElement);
+        });
 }

 // 渲染单个进程信息
@@ -259,3 +334,46 @@ function clearProcessList() {
        processLog.removeChild(processLog.firstChild);
    }
 }
+
+// 新增工具函数
+function createSpinner(x, y) {
+    const spinner = document.createElement('div');
+    spinner.className = 'loading-spinner';
+    spinner.style = `
+        position: fixed;
+        left: ${x + 15}px;
+        top: ${y + 15}px;
+        width: 24px;
+        height: 24px;
+        border: 3px solid rgba(97, 218, 251, 0.3);
+        border-radius: 50%;
+        border-top-color: #61dafb;
+        animation: spin 1s ease-in-out infinite;
+        z-index: 1000;
+    `;
+    document.body.appendChild(spinner);
+    return spinner;
+}
+
+function showErrorTooltip(event, message) {
+    const tooltip = document.createElement('div');
+    tooltip.className = 'error-tooltip';
+    tooltip.innerHTML = `
+        <i class="fas fa-exclamation-triangle"></i>
+        <span>${message}</span>
+    `;
+    tooltip.style = `
+        position: fixed;
+        left: ${event.clientX + 20}px;
+        top: ${event.clientY + 20}px;
+        padding: 8px 12px;
+        background: rgba(255, 87, 87, 0.9);
+        color: white;
+        border-radius: 4px;
+        font-size: 14px;
+        z-index: 1000;
+        animation: fadeIn 0.3s ease;
+    `;
+    document.body.appendChild(tooltip);
+    setTimeout(() => tooltip.remove(), 3000);
+}
@@ -734,13 +734,7 @@ body {
    padding: 15px;
    border: 1px solid rgba(97, 218, 251, 0.3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    transition: all 0.3s ease;
-}
-
-.process-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    border-color: rgba(97, 218, 251, 0.6);
+    transition: box-shadow 0.3s ease; /* 简化为仅阴影过渡 */
 }

 .process-header {
@@ -851,11 +845,214 @@ body {
    background: rgba(97, 218, 251, 0.05);
    border-radius: 4px;
    border-left: 3px solid rgba(97, 218, 251, 0.3);
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease, border-color 0.2s ease; /* 修改过渡属性 */
 }

 .subscribed-list li:hover, .published-list li:hover {
    background: rgba(97, 218, 251, 0.1);
    border-left-color: #61dafb;
-    transform: translateX(4px);
+    /* 移除transform位移 */
+    transform: none; 
+}
+
+/* 消息详情弹窗样式 */
+.message-detail-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    max-width: 90%;
+    background: linear-gradient(145deg, #3a3f4b, #2e323a);
+    border-radius: 12px;
+    border: 2px solid rgba(97, 218, 251, 0.3);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    padding: 20px;
+    animation: modalFadeIn 0.3s ease;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -60%);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.message-detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid rgba(97, 218, 251, 0.2);
+}
+
+.message-detail-title {
+    color: #61dafb;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.message-detail-close {
+    cursor: pointer;
+    color: #61dafb;
+    font-size: 20px;
+    transition: all 0.2s ease;
+}
+
+.message-detail-close:hover {
+    transform: scale(1.1);
+    color: #4fa8c7;
+}
+
+.message-detail-content {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding-right: 10px;
+}
+
+.message-detail-item {
+    margin-bottom: 15px;
+    padding: 10px;
+    background: rgba(97, 218, 251, 0.05);
+    border-radius: 6px;
+    border-left: 3px solid rgba(97, 218, 251, 0.3);
+}
+
+.message-detail-label {
+    color: #ffeb3b;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.message-detail-value {
+    color: #ffffff;
+    word-break: break-all;
+    font-family: 'Courier New', monospace;
+}
+
+.message-detail-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 999;
+    animation: overlayFadeIn 0.3s ease;
+}
+
+@keyframes overlayFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* 新增消息提示框样式 */
+.message-tooltip {
+    position: fixed;
+    z-index: 1000;
+    background: rgba(40, 44, 52, 0.95);
+    border: 1px solid rgba(97, 218, 251, 0.3);
+    border-radius: 6px;
+    padding: 12px;
+    max-width: 300px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
+    backdrop-filter: blur(4px);
+    pointer-events: none;
+    transform: translate(10px, 10px);
+    transition: opacity 0.2s ease;
+}
+
+.message-tooltip-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    color: #61dafb;
+    font-weight: bold;
+}
+
+.tooltip-label {
+    color: #4fa8c7;
+    margin-right: 6px;
+}
+
+.message-tooltip-item {
+    margin: 4px 0;
+    font-size: 14px;
+}
+
+.message-tooltip::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent rgba(97, 218, 251, 0.3) transparent;
+}
+
+.message-tooltip-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(97, 218, 251, 0.2);
+}
+
+.message-tooltip-title {
+    color: #61dafb;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.message-tooltip-close {
+    cursor: pointer;
+    color: #61dafb;
+    font-size: 16px;
+    transition: all 0.2s ease;
+}
+
+.message-tooltip-close:hover {
+    color: #4fa8c7;
+    transform: scale(1.1);
+}
+
+.message-tooltip-content {
+    max-height: 200px;
+    overflow-y: auto;
+    padding-right: 8px;
+}
+
+.message-tooltip-item {
+    margin-bottom: 8px;
+    padding: 6px;
+    background: rgba(97, 218, 251, 0.05);
+    border-radius: 4px;
+    border-left: 2px solid rgba(97, 218, 251, 0.2);
+}
+
+.message-tooltip-label {
+    color: #ffeb3b;
+    font-size: 12px;
+    font-weight: bold;
+    margin-bottom: 4px;
+}
+
+.message-tooltip-value {
+    color: #ffffff;
+    font-size: 12px;
+    word-break: break-word;
+    font-family: 'Courier New', monospace;
 }
@@ -129,6 +129,37 @@
        <pre id="ccu-state">正在加载...</pre>
    </div>

+    <!-- 消息详情弹窗 -->
+    <div class="message-detail-overlay" id="message-detail-overlay" style="display: none;"></div>
+    <div class="message-detail-modal" id="message-detail-modal" style="display: none;">
+        <div class="message-detail-header">
+            <div class="message-detail-title">消息详情</div>
+            <div class="message-detail-close" id="message-detail-close">&times;</div>
+        </div>
+        <div class="message-detail-content">
+            <div class="message-detail-item">
+                <div class="message-detail-label">消息名称</div>
+                <div class="message-detail-value" id="message-name"></div>
+            </div>
+            <div class="message-detail-item">
+                <div class="message-detail-label">消息类型</div>
+                <div class="message-detail-value" id="message-type"></div>
+            </div>
+            <div class="message-detail-item">
+                <div class="message-detail-label">消息内容</div>
+                <div class="message-detail-value" id="message-content"></div>
+            </div>
+            <div class="message-detail-item">
+                <div class="message-detail-label">时间戳</div>
+                <div class="message-detail-value" id="message-timestamp"></div>
+            </div>
+            <div class="message-detail-item">
+                <div class="message-detail-label">来源</div>
+                <div class="message-detail-value" id="message-source"></div>
+            </div>
+        </div>
+    </div>
+
    <script src="/static/script.js"></script>
 </body>