From 9606d4d9e18a35e9eacf2393b4806ce40f625dfa Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Sat, 21 Mar 2026 11:44:38 +0800
Subject: [PATCH] feat: rename data metrics to runtime status with more charts

---
 frontend/src/components/SidebarNav.vue |   2 +-
 frontend/src/views/StatsView.vue       | 202 ++++++++++++++++---------
 2 files changed, 135 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/SidebarNav.vue b/frontend/src/components/SidebarNav.vue
index 87a5718..7f942d4 100644
--- a/frontend/src/components/SidebarNav.vue
+++ b/frontend/src/components/SidebarNav.vue
@@ -16,7 +16,7 @@ const navItems = [
   { name: '任务矩阵', path: '/kanban', icon: LayoutGrid },
   { name: '任务调度', path: '/todo', icon: CheckSquare },
   { name: '信息交易所', path: '/forum', icon: MessageSquare },
-  { name: '数据舱', path: '/stats', icon: Activity },
+  { name: '运行状态', path: '/stats', icon: Activity },
   { name: '系统设置', path: '/settings', icon: Settings },
 ]
 
diff --git a/frontend/src/views/StatsView.vue b/frontend/src/views/StatsView.vue
index 77552ff..e6685b3 100644
--- a/frontend/src/views/StatsView.vue
+++ b/frontend/src/views/StatsView.vue
@@ -89,7 +89,7 @@ const hourlyActivityData = computed(() =>
 <template>
   <div class="stats-view">
     <div class="stats-header">
-      <h1>// DATA METRICS</h1>
+      <h1>// 运行状态</h1>
     </div>
 
     <div v-if="isLoading" class="loading-state">
@@ -136,94 +136,126 @@ const hourlyActivityData = computed(() =>
 
       <!-- CONVERSATIONS -->
       <section class="stats-section">
-        <SectionHeader title="CONVERSATIONS" tag="cyan" />
-        <SummaryRow
-          v-if="conversationStats"
-          :items="[
-            { label: 'Total Conversations', value: formatNumber(conversationStats.totals?.conversations || 0) },
-            { label: 'Total Messages', value: formatNumber(conversationStats.totals?.messages || 0) },
-            { label: 'Input Tokens', value: formatNumber(conversationStats.totals?.input_tokens || 0) },
-            { label: 'Output Tokens', value: formatNumber(conversationStats.totals?.output_tokens || 0) },
-          ]"
-        />
-        <div class="chart-box" v-if="convChartData.length > 0">
-          <div class="chart-label">30-Day Trend</div>
-          <MiniLineChart :data="convChartData" color="var(--accent-cyan)" :height="80" />
-        </div>
-        <div v-else class="empty-state">
-          <span>No conversation data yet</span>
+        <SectionHeader title="沟通系统" tag="cyan" />
+        <div class="stats-metrics-row">
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">对话数</div>
+            <div class="stat-bar-value">{{ formatNumber(conversationStats?.totals?.conversations || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart v-if="convChartData.length > 0" :data="convChartData.map(d => d.value)" color="var(--accent-cyan)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">消息数</div>
+            <div class="stat-bar-value">{{ formatNumber(conversationStats?.totals?.messages || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart v-if="convChartData.length > 0" :data="convChartData.map(d => d.value)" color="var(--accent-purple)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">输入Token</div>
+            <div class="stat-bar-value">{{ formatNumber(conversationStats?.totals?.input_tokens || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniLineChart v-if="convChartData.length > 0" :data="convChartData" color="var(--accent-amber)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">输出Token</div>
+            <div class="stat-bar-value">{{ formatNumber(conversationStats?.totals?.output_tokens || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniLineChart v-if="convChartData.length > 0" :data="convChartData" color="var(--accent-green)" :height="30" />
+            </div>
+          </div>
         </div>
       </section>
 
       <!-- KNOWLEDGE -->
       <section class="stats-section">
-        <SectionHeader title="KNOWLEDGE BASE" tag="purple" />
-        <SummaryRow
-          v-if="knowledgeStats"
-          :items="[
-            { label: 'New Tags', value: formatNumber(knowledgeStats.totals?.new_tags || 0) },
-            { label: 'Documents', value: formatNumber(knowledgeStats.totals?.documents || 0) },
-            { label: 'Tag Relations', value: formatNumber(knowledgeStats.totals?.tag_relations || 0) },
-          ]"
-          :columns="3"
-        />
-        <div class="chart-box" v-if="knowChartData.length > 0">
-          <div class="chart-label">Tag Growth</div>
-          <MiniLineChart :data="knowChartData" color="var(--accent-purple)" :height="80" />
-        </div>
-        <div v-else class="empty-state">
-          <span>No knowledge data yet</span>
+        <SectionHeader title="知识库" tag="purple" />
+        <div class="stats-metrics-row">
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">新标签</div>
+            <div class="stat-bar-value">{{ formatNumber(knowledgeStats?.totals?.new_tags || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart v-if="knowChartData.length > 0" :data="knowChartData.map(d => d.value)" color="var(--accent-purple)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">文档数</div>
+            <div class="stat-bar-value">{{ formatNumber(knowledgeStats?.totals?.documents || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart v-if="knowChartData.length > 0" :data="knowChartData.map(d => d.value)" color="var(--accent-cyan)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">标签关联</div>
+            <div class="stat-bar-value">{{ formatNumber(knowledgeStats?.totals?.tag_relations || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniLineChart v-if="knowChartData.length > 0" :data="knowChartData" color="var(--accent-amber)" :height="30" />
+            </div>
+          </div>
         </div>
       </section>
 
       <!-- KANBAN -->
       <section class="stats-section">
-        <SectionHeader title="KANBAN" tag="cyan" />
-        <SummaryRow
-          v-if="kanbanStats"
-          :items="[
-            { label: 'Pending Tasks', value: kanbanStats.current_pending_tasks || 0 },
-            { label: 'New (30d)', value: formatNumber(kanbanStats.totals?.new_tasks || 0) },
-            { label: 'Done (30d)', value: formatNumber(kanbanStats.totals?.completed_tasks || 0) },
-          ]"
-          :columns="3"
-        />
-        <div class="chart-box" v-if="kanbanNewData.length > 0">
-          <div class="chart-label">Tasks: New vs Completed</div>
-          <div class="bar-chart-group">
-            <MiniBarChart :data="kanbanNewData" color="var(--accent-cyan)" :height="60" />
-            <MiniBarChart :data="kanbanDoneData" color="var(--accent-green)" :height="60" />
+        <SectionHeader title="任务矩阵" tag="cyan" />
+        <div class="stats-metrics-row">
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">待处理</div>
+            <div class="stat-bar-value">{{ kanbanStats?.current_pending_tasks || 0 }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart :data="kanbanNewData" color="var(--accent-amber)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">新建(30天)</div>
+            <div class="stat-bar-value">{{ formatNumber(kanbanStats?.totals?.new_tasks || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart :data="kanbanNewData" color="var(--accent-cyan)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">完成(30天)</div>
+            <div class="stat-bar-value">{{ formatNumber(kanbanStats?.totals?.completed_tasks || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart :data="kanbanDoneData" color="var(--accent-green)" :height="30" />
+            </div>
           </div>
-        </div>
-        <div v-else class="empty-state">
-          <span>No kanban data yet</span>
         </div>
       </section>
 
       <!-- COMMUNITY -->
       <section class="stats-section">
-        <SectionHeader title="COMMUNITY" tag="amber" />
-        <SummaryRow
-          v-if="communityStats"
-          :items="[
-            { label: 'Posts', value: formatNumber(communityStats.totals?.posts || 0) },
-            { label: 'Replies', value: formatNumber(communityStats.totals?.replies || 0) },
-            { label: 'AI Executions', value: formatNumber(communityStats.totals?.ai_executions || 0) },
-          ]"
-          :columns="3"
-        />
-        <div class="chart-box" v-if="communityChartData.length > 0">
-          <div class="chart-label">Activity Trend</div>
-          <MiniLineChart :data="communityChartData" color="var(--accent-amber)" :height="80" />
-        </div>
-        <div v-else class="empty-state">
-          <span>No community data yet</span>
+        <SectionHeader title="信息交易所" tag="amber" />
+        <div class="stats-metrics-row">
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">帖子数</div>
+            <div class="stat-bar-value">{{ formatNumber(communityStats?.totals?.posts || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart v-if="communityChartData.length > 0" :data="communityChartData.map(d => d.value)" color="var(--accent-amber)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">回复数</div>
+            <div class="stat-bar-value">{{ formatNumber(communityStats?.totals?.replies || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniBarChart v-if="communityChartData.length > 0" :data="communityChartData.map(d => d.value)" color="var(--accent-purple)" :height="30" />
+            </div>
+          </div>
+          <div class="stat-bar-item">
+            <div class="stat-bar-label">AI执行</div>
+            <div class="stat-bar-value">{{ formatNumber(communityStats?.totals?.ai_executions || 0) }}</div>
+            <div class="stat-bar-chart">
+              <MiniLineChart v-if="communityChartData.length > 0" :data="communityChartData" color="var(--accent-cyan)" :height="30" />
+            </div>
+          </div>
         </div>
       </section>
 
       <!-- INSIGHTS -->
       <section class="stats-section">
-        <SectionHeader title="PERSONAL INSIGHTS" tag="cyan" />
+        <SectionHeader title="个人洞察" tag="cyan" />
         <div class="insights-grid" v-if="personalInsights">
           <div class="insight-card">
             <h4>Hourly Activity</h4>
@@ -292,6 +324,40 @@ const hourlyActivityData = computed(() =>
   gap: 8px;
 }
 
+.stats-metrics-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.stat-bar-item {
+  background: var(--bg-card);
+  border: 1px solid var(--border-dim);
+  border-radius: var(--radius-md);
+  padding: 16px;
+}
+
+.stat-bar-label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+
+.stat-bar-value {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.stat-bar-chart {
+  margin-top: 8px;
+}
+
 .stats-section {
   background: rgba(10, 15, 26, 0.6);
   border: 1px solid var(--border-dim);