feat: add Chart.js doughnut charts and refine KPI card layout

- Replace CSS conic-gradient donuts with Chart.js Doughnut component

- New DonutChart.vue with hover tooltips, centered label, two-column legend

- KPI cards: icon-left layout, compact K/M formatting, horizontal trend row

- Value font scaled down to 18-22px for better visual hierarchy

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/components/charts/DonutChart.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="donut-chart">
+    <div class="donut-body">
+      <Doughnut :data="chartData" :options="chartOptions" />
+      <div class="donut-center">
+        <strong>{{ centerValue }}</strong>
+        <span>{{ centerLabel }}</span>
+      </div>
+    </div>
+    <div class="donut-legend">
+      <div v-for="item in items" :key="item.name" class="legend-row">
+        <i :style="{ background: item.color }"></i>
+        <span class="legend-name">{{ item.name }}</span>
+        <span class="legend-val">{{ item.display }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Doughnut } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend
+} from 'chart.js'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const props = defineProps({
+  items: { type: Array, required: true },
+  centerValue: { type: String, required: true },
+  centerLabel: { type: String, required: true }
+})
+
+const chartData = computed(() => ({
+  labels: props.items.map((i) => i.name),
+  datasets: [{
+    data: props.items.map((i) => i.value),
+    backgroundColor: props.items.map((i) => i.color),
+    borderWidth: 0,
+    cutout: '68%',
+    spacing: 3,
+    borderRadius: 4
+  }]
+}))
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      backgroundColor: 'rgba(255,255,255,0.96)',
+      titleColor: '#1e293b',
+      bodyColor: '#64748b',
+      borderColor: '#e2e8f0',
+      borderWidth: 1,
+      padding: 10,
+      boxPadding: 4,
+      cornerRadius: 6,
+      usePointStyle: true,
+      callbacks: {
+        label: (ctx) => {
+          const total = ctx.dataset.data.reduce((a, b) => a + b, 0)
+          const pct = ((ctx.parsed / total) * 100).toFixed(1)
+          return ` ${ctx.label}: ${pct}%`
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.donut-chart {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 240px;
+}
+
+.donut-body {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  margin: 0 auto;
+  margin-top: 16px;
+}
+
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  place-content: center;
+  pointer-events: none;
+  text-align: center;
+}
+
+.donut-center strong {
+  color: #1e293b;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.donut-center span {
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 11px;
+}
+
+.donut-legend {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px 16px;
+}
+
+.legend-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-row i {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex: 0 0 auto;
+}
+
+.legend-name {
+  color: #475569;
+  font-size: 12px;
+}
+
+.legend-val {
+  margin-left: auto;
+  color: #94a3b8;
+  font-size: 11px;
+}
+</style>

src/views/OverviewView.vue

@@ -8,13 +8,13 @@
         :style="{ '--accent': metric.accent }"
       >
         <div class="kpi-top">
+          <div class="kpi-icon">
+            <i :class="metric.icon"></i>
+          </div>
           <div>
             <p>{{ metric.label }}</p>
             <strong>{{ metric.displayValue }}</strong>
           </div>
-          <div class="kpi-icon">
-            <i :class="metric.icon"></i>
-          </div>
         </div>
         <div class="kpi-bottom" :class="metric.trend">
           <span>
@@ -47,19 +47,7 @@
         <div class="card-head">
           <h3>费用结构 <i class="pi pi-info-circle"></i></h3>
         </div>
-        <div class="donut-wrap">
+        <DonutChart :items="spendLegend" center-value="¥361.6K" center-label="待处理金额" />
-          <div class="donut" :style="{ background: spendDonutBackground }">
-            <div class="donut-center">
-              <strong>{{ spendTotalLabel }}</strong>
-              <span>待处理金额</span>
-            </div>
-          </div>
-          <div class="donut-legend">
-            <div v-for="item in spendLegend" :key="item.name" class="legend-row">
-              <span><i :style="{ background: item.color }"></i>{{ item.name }}</span>
-            </div>
-          </div>
-        </div>
         <p class="panel-note">* 百分比为占待处理金额比例</p>
       </article>
 
@@ -67,19 +55,7 @@
         <div class="card-head">
           <h3>风险异常分布 <i class="pi pi-info-circle"></i></h3>
         </div>
-        <div class="donut-wrap">
+        <DonutChart :items="riskLegend" :center-value="`${riskTotal}`" center-label="异常预警单" />
-          <div class="donut" :style="{ background: riskDonutBackground }">
-            <div class="donut-center">
-              <strong>{{ riskTotal }}</strong>
-              <span>异常预警单</span>
-            </div>
-          </div>
-          <div class="donut-legend">
-            <div v-for="item in riskLegend" :key="item.name" class="legend-row">
-              <span><i :style="{ background: item.color }"></i>{{ item.name }}</span>
-            </div>
-          </div>
-        </div>
         <p class="panel-note">* 近30天数据</p>
       </article>
     </div>
@@ -176,6 +152,7 @@ import {
   budgetSummary
 } from '../data/metrics.js'
 import TrendChart from '../components/charts/TrendChart.vue'
+import DonutChart from '../components/charts/DonutChart.vue'
 
 defineProps({
   filteredRequests: { type: Array, required: true }
@@ -227,22 +204,7 @@ const kpiMetrics = computed(() => metricBlueprints.map((metric) => {
 const activeTrend = computed(() => trendSeries[activeTrendRange.value])
 
 const spendTotal = computed(() => spendByCategory.reduce((sum, item) => sum + item.value, 0))
-const spendTotalLabel = computed(() => formatCurrency(demoTotals.pendingAmount))
-
-const buildDonutBackground = (items, total) => {
-  let current = 0
-  const stops = items.map((item) => {
-    const start = current
-    current += (item.value / total) * 100
-    return `${item.color} ${start}% ${current}%`
-  }).join(',')
-
-  return `radial-gradient(circle, #fff 0 60%, transparent 61%), conic-gradient(${stops})`
-}
-
-const spendDonutBackground = computed(() => buildDonutBackground(spendByCategory, spendTotal.value))
 const riskTotal = computed(() => exceptionMix.reduce((sum, item) => sum + item.value, 0))
-const riskDonutBackground = computed(() => buildDonutBackground(exceptionMix, riskTotal.value))
 
 const spendLegend = computed(() => spendByCategory.map((item) => ({
   ...item,
@@ -314,7 +276,7 @@ const rankedDepartments = computed(() => {
 .kpi-top strong {
   display: block;
   color: #1e293b;
-  font-size: clamp(20px, 2vw, 26px);
+  font-size: clamp(18px, 1.6vw, 22px);
   line-height: 1.2;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
@@ -322,22 +284,23 @@ const rankedDepartments = computed(() => {
 }
 
 .kpi-icon {
-  width: 38px;
+  width: 44px;
-  height: 38px;
+  height: 44px;
   display: grid;
   place-items: center;
   border-radius: 10px;
   background: color-mix(in srgb, var(--accent) 10%, white);
   color: var(--accent);
-  font-size: 16px;
+  font-size: 20px;
   flex: 0 0 auto;
 }
 
 .kpi-bottom {
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  gap: 1px;
+  justify-content: space-between;
-  margin-top: 14px;
+  gap: 8px;
+  margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid #f1f5f9;
 }
@@ -345,9 +308,9 @@ const rankedDepartments = computed(() => {
 .kpi-bottom span {
   display: inline-flex;
   align-items: center;
-  gap: 3px;
+  gap: 4px;
   font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .kpi-bottom.up span {
@@ -361,6 +324,7 @@ const rankedDepartments = computed(() => {
 .kpi-bottom small {
   color: #94a3b8;
   font-size: 12px;
+  text-align: right;
 }
 
 .content-grid {
@@ -416,68 +380,6 @@ const rankedDepartments = computed(() => {
   font-size: 14px;
 }
 
-.donut-wrap {
-  min-height: 192px;
-  display: grid;
-  grid-template-columns: minmax(116px, 1fr) minmax(96px, .8fr);
-  align-items: center;
-  gap: 10px;
-}
-
-.donut {
-  width: min(148px, 100%);
-  aspect-ratio: 1;
-  display: grid;
-  place-items: center;
-  border-radius: 50%;
-  justify-self: center;
-}
-
-.donut-center {
-  width: 84px;
-  aspect-ratio: 1;
-  display: grid;
-  place-items: center;
-  align-content: center;
-  border-radius: 50%;
-  background: #fff;
-  text-align: center;
-}
-
-.donut-center strong {
-  color: #1e293b;
-  font-size: 16px;
-  line-height: 1;
-  font-weight: 700;
-}
-
-.donut-center span {
-  margin-top: 6px;
-  color: #64748b;
-  font-size: 11px;
-}
-
-.donut-legend {
-  display: grid;
-  gap: 14px;
-  align-content: center;
-}
-
-.legend-row span {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: #334155;
-  font-size: 12px;
-}
-
-.legend-row i {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  flex: 0 0 auto;
-}
-
 .panel-note {
   margin-top: 8px;
   color: #64748b;