caoxiaozhu/JARVIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rename data metrics to runtime status with more charts

Browse Source
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-21 11:44:38 +08:00
parent b284f395fd
commit 9606d4d9e1
2 changed files with 135 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/SidebarNav.vue
View File

@@ -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 },
]

202
frontend/src/views/StatsView.vue
View File

@@ -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);