From e9f6a726dbeee63273384acb880effa861b993f2 Mon Sep 17 00:00:00 2001
From: "WIN-JHFT4D3SIVT\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Thu, 30 Apr 2026 17:09:56 +0800
Subject: [PATCH] feat: add reusable BarChart and GaugeChart components

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/charts/BarChart.vue   | 172 +++++++++++++++++++++++++++
 src/components/charts/GaugeChart.vue | 127 ++++++++++++++++++++
 2 files changed, 299 insertions(+)
 create mode 100644 src/components/charts/BarChart.vue
 create mode 100644 src/components/charts/GaugeChart.vue

diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
new file mode 100644
index 0000000..3cfbca0
--- /dev/null
+++ b/src/components/charts/BarChart.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="bar-chart">
+    <div class="rank-labels">
+      <div v-for="(item, idx) in items" :key="item.name" class="rank-label">
+        <span class="rank-badge" :class="medalClass(idx)">
+          <svg v-if="idx < 3" width="18" height="18" viewBox="0 0 18 18">
+            <circle cx="9" cy="9" r="8" :fill="medalFill(idx)" />
+            <text x="9" y="13" text-anchor="middle" fill="#fff" font-size="10" font-weight="700">{{ idx + 1 }}</text>
+          </svg>
+          <template v-else>{{ idx + 1 }}</template>
+        </span>
+        <span class="rank-name">{{ item.name || item.shortName }}</span>
+      </div>
+    </div>
+    <div class="chart-area">
+      <Bar :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Bar } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip
+} from 'chart.js'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
+
+const props = defineProps({
+  items: { type: Array, required: true }
+})
+
+const medalClass = (idx) => {
+  if (idx === 0) return 'gold'
+  if (idx === 1) return 'silver'
+  if (idx === 2) return 'bronze'
+  return ''
+}
+
+const medalFill = (idx) => {
+  if (idx === 0) return '#f59e0b'
+  if (idx === 1) return '#94a3b8'
+  if (idx === 2) return '#cd7f32'
+  return '#94a3b8'
+}
+
+const formatValue = (value) => {
+  if (value >= 1_000_000) return `¥${(value / 1_000_000).toFixed(1)}M`
+  if (value >= 1_000) return `¥${(value / 1_000).toFixed(1)}K`
+  return `¥${value}`
+}
+
+const chartData = computed(() => ({
+  labels: props.items.map((i) => i.name || i.shortName),
+  datasets: [{
+    data: props.items.map((i) => i.value || i.amount),
+    backgroundColor: props.items.map((i) => i.color),
+    borderRadius: 6,
+    borderSkipped: false,
+    barPercentage: 0.7,
+    categoryPercentage: 0.85
+  }]
+}))
+
+const chartOptions = {
+  indexAxis: 'y',
+  responsive: true,
+  maintainAspectRatio: false,
+  layout: {
+    padding: { left: 0, right: 12 }
+  },
+  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,
+      callbacks: {
+        title: () => '',
+        label: (ctx) => ` ${formatValue(ctx.parsed.x)}`
+      }
+    }
+  },
+  scales: {
+    x: {
+      beginAtZero: true,
+      grid: {
+        color: '#f1f5f9',
+        drawTicks: false
+      },
+      ticks: {
+        color: '#94a3b8',
+        font: { size: 11 },
+        padding: 4,
+        callback: (value) => formatValue(value)
+      },
+      border: { display: false }
+    },
+    y: {
+      grid: { display: false },
+      border: { display: false },
+      ticks: { display: false }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bar-chart {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+
+.rank-labels {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 6px 0;
+}
+
+.rank-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  white-space: nowrap;
+}
+
+.rank-badge {
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.rank-badge:not(.gold):not(.silver):not(.bronze) {
+  background: #cbd5e1;
+}
+
+.rank-badge svg {
+  display: block;
+}
+
+.rank-name {
+  color: #475569;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.chart-area {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  height: 240px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/charts/GaugeChart.vue b/src/components/charts/GaugeChart.vue
new file mode 100644
index 0000000..d9ad929
--- /dev/null
+++ b/src/components/charts/GaugeChart.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="gauge-chart">
+    <div class="gauge-body">
+      <Doughnut :data="chartData" :options="chartOptions" />
+      <div class="gauge-center">
+        <strong>{{ ratio }}%</strong>
+        <span>已执行</span>
+      </div>
+    </div>
+    <div class="gauge-summary">
+      <div>
+        <span>预算总额</span>
+        <strong>{{ total }}</strong>
+      </div>
+      <div>
+        <span>已执行</span>
+        <strong>{{ used }}</strong>
+      </div>
+      <div>
+        <span>剩余可用</span>
+        <strong>{{ left }}</strong>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Doughnut } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip
+} from 'chart.js'
+
+ChartJS.register(ArcElement, Tooltip)
+
+const props = defineProps({
+  ratio: { type: [Number, String], required: true },
+  total: { type: String, required: true },
+  used: { type: String, required: true },
+  left: { type: String, required: true }
+})
+
+const ratioValue = computed(() => Number(props.ratio))
+
+const chartData = computed(() => ({
+  labels: ['已执行', '剩余'],
+  datasets: [{
+    data: [ratioValue.value, 100 - ratioValue.value],
+    backgroundColor: ['#10b981', '#e2e8f0'],
+    borderWidth: 0
+  }]
+}))
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  rotation: -90,
+  circumference: 180,
+  cutout: '65%',
+  plugins: {
+    legend: { display: false },
+    tooltip: { enabled: false }
+  }
+}
+</script>
+
+<style scoped>
+.gauge-chart {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+}
+
+.gauge-body {
+  position: relative;
+  height: 100px;
+  width: 100%;
+}
+
+.gauge-center {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+.gauge-center strong {
+  color: #10b981;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.gauge-center span {
+  display: block;
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 11px;
+}
+
+.gauge-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  text-align: center;
+}
+
+.gauge-summary span {
+  display: block;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.gauge-summary strong {
+  display: block;
+  margin-top: 4px;
+  color: #1e293b;
+  font-size: 13px;
+  font-weight: 500;
+}
+</style>
\ No newline at end of file