Add files via upload

web/static/css/style.css

@@ -8150,6 +8150,265 @@ header {
     color: var(--text-primary);
 }
 
+/* 运行概览优化样式 */
+.dashboard-overview-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.dashboard-overview-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2px;
+}
+
+.dashboard-overview-total {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    background: rgba(0, 102, 255, 0.08);
+    padding: 2px 8px;
+    border-radius: 12px;
+}
+
+.dashboard-overview-success-rate {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #10b981;
+    background: rgba(16, 185, 129, 0.1);
+    padding: 2px 8px;
+    border-radius: 12px;
+}
+
+.dashboard-overview-status {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    background: rgba(0, 0, 0, 0.05);
+    padding: 2px 8px;
+    border-radius: 12px;
+}
+
+.dashboard-overview-stats {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.dashboard-overview-stat {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.8125rem;
+}
+
+.dashboard-overview-stat-badge {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.dashboard-overview-stat-badge.badge-pending {
+    background: #f59e0b;
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
+}
+
+.dashboard-overview-stat-badge.badge-running {
+    background: #3b82f6;
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+    animation: pulse-running 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.dashboard-overview-stat-badge.badge-done {
+    background: #10b981;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes pulse-running {
+    0%, 100% {
+        opacity: 1;
+        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+    }
+    50% {
+        opacity: 0.8;
+        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0);
+    }
+}
+
+.dashboard-overview-stat-value {
+    font-weight: 700;
+    font-size: 0.9375rem;
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+}
+
+.dashboard-overview-stat-label {
+    color: var(--text-secondary);
+    font-size: 0.8125rem;
+}
+
+.dashboard-overview-progress {
+    margin-top: 4px;
+}
+
+.dashboard-overview-progress-bar {
+    height: 6px;
+    background: #f1f5f9;
+    border-radius: 3px;
+    overflow: hidden;
+    display: flex;
+    position: relative;
+}
+
+.dashboard-overview-progress-segment {
+    height: 100%;
+    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+.dashboard-overview-progress-pending {
+    background: linear-gradient(90deg, #fbbf24, #f59e0b);
+}
+
+.dashboard-overview-progress-running {
+    background: linear-gradient(90deg, #60a5fa, #3b82f6);
+    animation: shimmer 2s infinite;
+}
+
+.dashboard-overview-progress-done {
+    background: linear-gradient(90deg, #34d399, #10b981);
+}
+
+@keyframes shimmer {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.8;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.dashboard-overview-value-group {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    flex-wrap: wrap;
+}
+
+.dashboard-overview-value-large {
+    font-size: 1.25rem;
+    font-weight: 800;
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+}
+
+.dashboard-overview-value-normal {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+}
+
+.dashboard-overview-value-unit {
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.dashboard-overview-value-separator {
+    color: var(--text-secondary);
+    opacity: 0.4;
+    margin: 0 2px;
+}
+
+/* 不同模块的图标颜色 */
+.dashboard-overview-icon-batch {
+    background: rgba(245, 158, 11, 0.1);
+    color: #d97706;
+}
+
+.dashboard-overview-icon-tools {
+    background: rgba(59, 130, 246, 0.1);
+    color: #2563eb;
+}
+
+.dashboard-overview-icon-knowledge {
+    background: rgba(139, 92, 246, 0.1);
+    color: #7c3aed;
+}
+
+.dashboard-overview-icon-skills {
+    background: rgba(236, 72, 153, 0.1);
+    color: #db2777;
+}
+
+/* 悬停效果增强 */
+.dashboard-overview-item:hover .dashboard-overview-icon {
+    transform: scale(1.1);
+    transition: transform 0.2s ease;
+}
+
+.dashboard-overview-item:hover .dashboard-overview-value-large {
+    color: #0066ff;
+    transition: color 0.2s ease;
+}
+
+.dashboard-overview-item-batch:hover {
+    border-color: rgba(245, 158, 11, 0.3);
+    background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(245,158,11,0.08) 100%);
+}
+
+.dashboard-overview-item-tools:hover {
+    border-color: rgba(59, 130, 246, 0.3);
+    background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.08) 100%);
+}
+
+.dashboard-overview-item-knowledge:hover {
+    border-color: rgba(139, 92, 246, 0.3);
+    background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(139,92,246,0.08) 100%);
+}
+
+.dashboard-overview-item-skills:hover {
+    border-color: rgba(236, 72, 153, 0.3);
+    background: linear-gradient(135deg, rgba(236,72,153,0.06) 0%, rgba(236,72,153,0.08) 100%);
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+    .dashboard-overview-stats {
+        gap: 12px;
+    }
+    
+    .dashboard-overview-value-group {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 2px;
+    }
+    
+    .dashboard-overview-value-separator {
+        display: none;
+    }
+}
+
 .dashboard-chart-wrap {
     display: flex;
     flex-direction: column;

web/static/js/dashboard.js

@@ -63,7 +63,7 @@ async function refreshDashboard() {
             });
         }
 
-        // 批量任务队列：按状态统计
+        // 批量任务队列：按状态统计（优化版）
         if (batchRes && Array.isArray(batchRes.queues)) {
             const queues = batchRes.queues;
             let pending = 0, running = 0, done = 0;
@@ -73,16 +73,36 @@ async function refreshDashboard() {
                 else if (s === 'running') running++;
                 else if (s === 'completed' || s === 'cancelled') done++;
             });
+            const total = pending + running + done;
             setEl('dashboard-batch-pending', String(pending));
             setEl('dashboard-batch-running', String(running));
             setEl('dashboard-batch-done', String(done));
+            setEl('dashboard-batch-total', total > 0 ? `共 ${total} 个` : '暂无任务');
+            
+            // 更新进度条
+            if (total > 0) {
+                const pendingPct = (pending / total * 100).toFixed(1);
+                const runningPct = (running / total * 100).toFixed(1);
+                const donePct = (done / total * 100).toFixed(1);
+                updateProgressBar('dashboard-batch-progress-pending', pendingPct);
+                updateProgressBar('dashboard-batch-progress-running', runningPct);
+                updateProgressBar('dashboard-batch-progress-done', donePct);
+            } else {
+                updateProgressBar('dashboard-batch-progress-pending', '0');
+                updateProgressBar('dashboard-batch-progress-running', '0');
+                updateProgressBar('dashboard-batch-progress-done', '0');
+            }
         } else {
             setEl('dashboard-batch-pending', '-');
             setEl('dashboard-batch-running', '-');
             setEl('dashboard-batch-done', '-');
+            setEl('dashboard-batch-total', '-');
+            updateProgressBar('dashboard-batch-progress-pending', '0');
+            updateProgressBar('dashboard-batch-progress-running', '0');
+            updateProgressBar('dashboard-batch-progress-done', '0');
         }
 
-        // 工具调用：monitor/stats 为 { toolName: { totalCalls, successCalls, failedCalls, ... } }
+        // 工具调用：monitor/stats 为 { toolName: { totalCalls, successCalls, failedCalls, ... } }（优化版）
         if (monitorRes && typeof monitorRes === 'object') {
             const names = Object.keys(monitorRes);
             let totalCalls = 0, totalSuccess = 0, totalFailed = 0;
@@ -96,40 +116,68 @@ async function refreshDashboard() {
                 if (typeof f === 'number') totalFailed += f;
             });
             setEl('dashboard-tools-count', String(names.length));
-            setEl('dashboard-tools-calls', String(totalCalls));
+            setEl('dashboard-tools-calls', formatNumber(totalCalls));
             setEl('dashboard-kpi-tools-calls', String(totalCalls));
             var rateStr = totalCalls > 0 ? ((totalSuccess / totalCalls) * 100).toFixed(1) + '%' : '-';
             setEl('dashboard-kpi-success-rate', rateStr);
+            setEl('dashboard-tools-success-rate', rateStr !== '-' ? `成功率 ${rateStr}` : '-');
             renderDashboardToolsBar(monitorRes);
         } else {
             setEl('dashboard-tools-count', '-');
             setEl('dashboard-tools-calls', '-');
             setEl('dashboard-kpi-tools-calls', '-');
             setEl('dashboard-kpi-success-rate', '-');
+            setEl('dashboard-tools-success-rate', '-');
             renderDashboardToolsBar(null);
         }
 
-        // 知识：{ enabled, total_categories, total_items, ... }
+        // 知识：{ enabled, total_categories, total_items, ... }（优化版）
-        const knowledgeValueEl = document.getElementById('dashboard-knowledge-value');
+        const knowledgeItemsEl = document.getElementById('dashboard-knowledge-items');
+        const knowledgeCategoriesEl = document.getElementById('dashboard-knowledge-categories');
         if (knowledgeRes && typeof knowledgeRes === 'object') {
             if (knowledgeRes.enabled === false) {
-                if (knowledgeValueEl) knowledgeValueEl.textContent = '知识功能暂未启用';
+                if (knowledgeItemsEl) knowledgeItemsEl.textContent = '未启用';
+                if (knowledgeCategoriesEl) knowledgeCategoriesEl.textContent = '-';
             } else {
                 const categories = knowledgeRes.total_categories ?? 0;
                 const items = knowledgeRes.total_items ?? 0;
-                if (knowledgeValueEl) knowledgeValueEl.textContent = `${categories} 个分类，共 ${items} 项`;
+                if (knowledgeItemsEl) knowledgeItemsEl.textContent = formatNumber(items);
+                if (knowledgeCategoriesEl) knowledgeCategoriesEl.textContent = formatNumber(categories);
             }
         } else {
-            if (knowledgeValueEl) knowledgeValueEl.textContent = '-';
+            if (knowledgeItemsEl) knowledgeItemsEl.textContent = '-';
+            if (knowledgeCategoriesEl) knowledgeCategoriesEl.textContent = '-';
         }
 
-        // Skills：{ total_skills, total_calls, ... }
+        // Skills：{ total_skills, total_calls, ... }（优化版）
         if (skillsRes && typeof skillsRes === 'object') {
-            setEl('dashboard-skills-count', String(skillsRes.total_skills ?? '-'));
+            const totalSkills = skillsRes.total_skills ?? 0;
-            setEl('dashboard-skills-calls', String(skillsRes.total_calls ?? '-'));
+            const totalCalls = skillsRes.total_calls ?? 0;
+            setEl('dashboard-skills-count', formatNumber(totalSkills));
+            setEl('dashboard-skills-calls', formatNumber(totalCalls));
+            
+            // 设置状态标签
+            const statusEl = document.getElementById('dashboard-skills-status');
+            if (statusEl) {
+                if (totalCalls === 0) {
+                    statusEl.textContent = '待使用';
+                    statusEl.style.background = 'rgba(0, 0, 0, 0.05)';
+                    statusEl.style.color = 'var(--text-secondary)';
+                } else if (totalCalls < 10) {
+                    statusEl.textContent = '活跃';
+                    statusEl.style.background = 'rgba(16, 185, 129, 0.1)';
+                    statusEl.style.color = '#10b981';
+                } else {
+                    statusEl.textContent = '高频';
+                    statusEl.style.background = 'rgba(59, 130, 246, 0.1)';
+                    statusEl.style.color = '#3b82f6';
+                }
+            }
         } else {
             setEl('dashboard-skills-count', '-');
             setEl('dashboard-skills-calls', '-');
+            const statusEl = document.getElementById('dashboard-skills-status');
+            if (statusEl) statusEl.textContent = '-';
         }
     } catch (e) {
         console.warn('仪表盘拉取统计失败', e);
@@ -150,10 +198,29 @@ function setEl(id, text) {
 }
 
 function setDashboardOverviewPlaceholder(t) {
-    ['dashboard-batch-pending', 'dashboard-batch-running', 'dashboard-batch-done',
+    ['dashboard-batch-pending', 'dashboard-batch-running', 'dashboard-batch-done', 'dashboard-batch-total',
-     'dashboard-tools-count', 'dashboard-tools-calls', 'dashboard-skills-count', 'dashboard-skills-calls'].forEach(id => setEl(id, t));
+     'dashboard-tools-count', 'dashboard-tools-calls', 'dashboard-tools-success-rate',
-    const knowledgeValueEl = document.getElementById('dashboard-knowledge-value');
+     'dashboard-skills-count', 'dashboard-skills-calls', 'dashboard-skills-status',
-    if (knowledgeValueEl) knowledgeValueEl.textContent = t;
+     'dashboard-knowledge-items', 'dashboard-knowledge-categories'].forEach(id => setEl(id, t));
+    updateProgressBar('dashboard-batch-progress-pending', '0');
+    updateProgressBar('dashboard-batch-progress-running', '0');
+    updateProgressBar('dashboard-batch-progress-done', '0');
+}
+
+// 格式化数字，添加千位分隔符
+function formatNumber(num) {
+    if (typeof num !== 'number' || isNaN(num)) return '-';
+    if (num === 0) return '0';
+    return num.toLocaleString('zh-CN');
+}
+
+// 更新进度条宽度
+function updateProgressBar(id, percentage) {
+    const el = document.getElementById(id);
+    if (el) {
+        const pct = parseFloat(percentage) || 0;
+        el.style.width = Math.max(0, Math.min(100, pct)) + '%';
+    }
 }
 
 // Top 30 工具执行次数柱状图颜色（30 色不重复，柔和、易区分）

web/templates/index.html

@@ -245,21 +245,85 @@
                                     <section class="dashboard-section dashboard-section-overview">
                                         <h3 class="dashboard-section-title">运行概览</h3>
                                         <div class="dashboard-overview-list">
-                                            <div class="dashboard-overview-item" role="button" tabindex="0" onclick="switchPage('tasks')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('tasks'); }">
+                                            <div class="dashboard-overview-item dashboard-overview-item-batch" role="button" tabindex="0" onclick="switchPage('tasks')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('tasks'); }">
-                                                <span class="dashboard-overview-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></span>
+                                                <span class="dashboard-overview-icon dashboard-overview-icon-batch" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></span>
-                                                <div><span class="dashboard-overview-label">批量任务队列</span><span class="dashboard-overview-value"><span id="dashboard-batch-pending">-</span> 待执行 / <span id="dashboard-batch-running">-</span> 执行中 / <span id="dashboard-batch-done">-</span> 已完成</span></div>
+                                                <div class="dashboard-overview-content">
+                                                    <div class="dashboard-overview-header">
+                                                        <span class="dashboard-overview-label">批量任务队列</span>
+                                                        <span class="dashboard-overview-total" id="dashboard-batch-total">-</span>
+                                                    </div>
+                                                    <div class="dashboard-overview-stats">
+                                                        <span class="dashboard-overview-stat dashboard-overview-stat-pending">
+                                                            <span class="dashboard-overview-stat-badge badge-pending"></span>
+                                                            <span class="dashboard-overview-stat-value" id="dashboard-batch-pending">-</span>
+                                                            <span class="dashboard-overview-stat-label">待执行</span>
+                                                        </span>
+                                                        <span class="dashboard-overview-stat dashboard-overview-stat-running">
+                                                            <span class="dashboard-overview-stat-badge badge-running"></span>
+                                                            <span class="dashboard-overview-stat-value" id="dashboard-batch-running">-</span>
+                                                            <span class="dashboard-overview-stat-label">执行中</span>
+                                                        </span>
+                                                        <span class="dashboard-overview-stat dashboard-overview-stat-done">
+                                                            <span class="dashboard-overview-stat-badge badge-done"></span>
+                                                            <span class="dashboard-overview-stat-value" id="dashboard-batch-done">-</span>
+                                                            <span class="dashboard-overview-stat-label">已完成</span>
+                                                        </span>
+                                                    </div>
+                                                    <div class="dashboard-overview-progress">
+                                                        <div class="dashboard-overview-progress-bar">
+                                                            <div class="dashboard-overview-progress-segment dashboard-overview-progress-pending" id="dashboard-batch-progress-pending" style="width: 0%"></div>
+                                                            <div class="dashboard-overview-progress-segment dashboard-overview-progress-running" id="dashboard-batch-progress-running" style="width: 0%"></div>
+                                                            <div class="dashboard-overview-progress-segment dashboard-overview-progress-done" id="dashboard-batch-progress-done" style="width: 0%"></div>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="dashboard-overview-item" role="button" tabindex="0" onclick="switchPage('mcp-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('mcp-monitor'); }">
+                                            <div class="dashboard-overview-item dashboard-overview-item-tools" role="button" tabindex="0" onclick="switchPage('mcp-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('mcp-monitor'); }">
-                                                <span class="dashboard-overview-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span>
+                                                <span class="dashboard-overview-icon dashboard-overview-icon-tools" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span>
-                                                <div><span class="dashboard-overview-label">工具调用</span><span class="dashboard-overview-value"><span id="dashboard-tools-count">-</span> 个工具，共 <span id="dashboard-tools-calls">-</span> 次</span></div>
+                                                <div class="dashboard-overview-content">
+                                                    <div class="dashboard-overview-header">
+                                                        <span class="dashboard-overview-label">工具调用</span>
+                                                        <span class="dashboard-overview-success-rate" id="dashboard-tools-success-rate">-</span>
+                                                    </div>
+                                                    <div class="dashboard-overview-value-group">
+                                                        <span class="dashboard-overview-value-large" id="dashboard-tools-calls">-</span>
+                                                        <span class="dashboard-overview-value-unit">次调用</span>
+                                                        <span class="dashboard-overview-value-separator">·</span>
+                                                        <span class="dashboard-overview-value-normal" id="dashboard-tools-count">-</span>
+                                                        <span class="dashboard-overview-value-unit">个工具</span>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="dashboard-overview-item" role="button" tabindex="0" onclick="switchPage('knowledge-management')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('knowledge-management'); }">
+                                            <div class="dashboard-overview-item dashboard-overview-item-knowledge" role="button" tabindex="0" onclick="switchPage('knowledge-management')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('knowledge-management'); }">
-                                                <span class="dashboard-overview-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg></span>
+                                                <span class="dashboard-overview-icon dashboard-overview-icon-knowledge" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg></span>
-                                                <div><span class="dashboard-overview-label">知识</span><span class="dashboard-overview-value" id="dashboard-knowledge-value">-</span></div>
+                                                <div class="dashboard-overview-content">
+                                                    <div class="dashboard-overview-header">
+                                                        <span class="dashboard-overview-label">知识</span>
+                                                    </div>
+                                                    <div class="dashboard-overview-value-group">
+                                                        <span class="dashboard-overview-value-large" id="dashboard-knowledge-items">-</span>
+                                                        <span class="dashboard-overview-value-unit">项知识</span>
+                                                        <span class="dashboard-overview-value-separator">·</span>
+                                                        <span class="dashboard-overview-value-normal" id="dashboard-knowledge-categories">-</span>
+                                                        <span class="dashboard-overview-value-unit">个分类</span>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="dashboard-overview-item" role="button" tabindex="0" onclick="switchPage('skills-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('skills-monitor'); }">
+                                            <div class="dashboard-overview-item dashboard-overview-item-skills" role="button" tabindex="0" onclick="switchPage('skills-monitor')" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); switchPage('skills-monitor'); }">
-                                                <span class="dashboard-overview-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>
+                                                <span class="dashboard-overview-icon dashboard-overview-icon-skills" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>
-                                                <div><span class="dashboard-overview-label">Skills</span><span class="dashboard-overview-value"><span id="dashboard-skills-count">-</span> 个 Skill，共 <span id="dashboard-skills-calls">-</span> 次调用</span></div>
+                                                <div class="dashboard-overview-content">
+                                                    <div class="dashboard-overview-header">
+                                                        <span class="dashboard-overview-label">Skills</span>
+                                                        <span class="dashboard-overview-status" id="dashboard-skills-status">-</span>
+                                                    </div>
+                                                    <div class="dashboard-overview-value-group">
+                                                        <span class="dashboard-overview-value-large" id="dashboard-skills-calls">-</span>
+                                                        <span class="dashboard-overview-value-unit">次调用</span>
+                                                        <span class="dashboard-overview-value-separator">·</span>
+                                                        <span class="dashboard-overview-value-normal" id="dashboard-skills-count">-</span>
+                                                        <span class="dashboard-overview-value-unit">个 Skill</span>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
                                     </section>