-
发布主题
-
${process.published.map(t => `- ${t}
`).join('')}
+ // 创建消息详情弹窗
+ const modal = document.createElement('div');
+ modal.id = 'message-modal';
+ modal.className = 'modal';
+ modal.innerHTML = `
+
+
×
+
消息详情
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
+ 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 = `
+
${process.name}
+
订阅:${process.subscribed.length} 发布:${process.published.length}
+ `;
+
+ const body = document.createElement('div');
+ body.className = 'process-body';
+ body.innerHTML = `
+
+
订阅主题
+
${process.subscribed.map(t => `- ${t}
`).join('')}
+
+
+
发布主题
+
${process.published.map(t => `- ${t}
`).join('')}
+
+ `;
+
+ 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 = `
+
+
${message}
+ `;
+ 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);
+}
diff --git a/bin/static/style.css b/bin/static/style.css
index 45e0fc0..b883c38 100644
--- a/bin/static/style.css
+++ b/bin/static/style.css
@@ -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;
}
diff --git a/bin/templates/index.html b/bin/templates/index.html
index ed72bf3..11b024e 100644
--- a/bin/templates/index.html
+++ b/bin/templates/index.html
@@ -129,6 +129,37 @@
正在加载...