From 61aa19b3d2d0658263e09753436fbc586f7bfa9b Mon Sep 17 00:00:00 2001
From: SunCheng <cheng2.sun@ly.com>
Date: Wed, 18 Feb 2026 20:44:58 +0800
Subject: [PATCH] style: unify card styles across calendar, statistics, and
 budget pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整 theme.css 中的 --radius-lg 为 12px 以符合设计标准
- 统一日历页面卡片样式（padding, border-radius, shadow）
- 统一统计页面所有卡片组件的样式
- 统一预算页面图表卡片样式，替换硬编码值为 CSS 变量
- 为关键样式添加 fallback 值以防止变量未定义
- 所有卡片现在使用统一的样式变量：
  - padding: var(--spacing-xl, 16px)
  - border-radius: var(--radius-lg, 12px)
  - box-shadow: var(--shadow-sm)
  - background: var(--bg-secondary)
---
 Web/src/assets/theme.css                      |   6 +-
 .../components/Budget/BudgetChartAnalysis.vue | 333 +++++++++++-------
 Web/src/views/calendarV2/modules/Stats.vue    |  11 +-
 .../modules/ExpenseCategoryCard.vue           | 192 +++++++++-
 .../modules/IncomeNoneCategoryCard.vue        |  12 +-
 .../modules/MonthlyExpenseCard.vue            | 123 +++++--
 6 files changed, 491 insertions(+), 186 deletions(-)

diff --git a/Web/src/assets/theme.css b/Web/src/assets/theme.css
index 6eb5e56..7b32385 100644
--- a/Web/src/assets/theme.css
+++ b/Web/src/assets/theme.css
@@ -46,9 +46,9 @@
   --spacing-3xl: 24px;
 
   /* 圆角 */
-  --radius-sm: 12px;
-  --radius-md: 16px;
-  --radius-lg: 20px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 12px;
   --radius-full: 22px;
 
   /* 字体大小 */
diff --git a/Web/src/components/Budget/BudgetChartAnalysis.vue b/Web/src/components/Budget/BudgetChartAnalysis.vue
index f5694c2..af4a194 100644
--- a/Web/src/components/Budget/BudgetChartAnalysis.vue
+++ b/Web/src/components/Budget/BudgetChartAnalysis.vue
@@ -26,44 +26,29 @@
             :style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
           />
           <div class="gauge-text-overlay">
-            <div
-              class="remaining-label"
-            >
-              {{
-                activeTab === BudgetCategory.Expense
-                  ? (
-                    overallStats.month.current > overallStats.month.limit
-                      ? '超支'
-                      : '余额'
-                  )
-                  : overallStats.month.current > overallStats.month.limit
-                    ? '超额'
-                    : '差额'
-              }}
+            <div class="balance-label">
+              余额
             </div>
             <div
-              class="remaining-value"
-              :style="{ color:
-                overallStats.month.current > overallStats.month.limit
-                  ? activeTab === BudgetCategory.Expense ? 'var(--van-danger-color)' : 'var(--van-success-color)'
-                  : ''
+              class="balance-value"
+              :style="{
+                color:
+                  overallStats.month.current > overallStats.month.limit
+                    ? 'var(--van-danger-color)'
+                    : ''
               }"
             >
               ¥{{ formatMoney(Math.abs(overallStats.month.limit - overallStats.month.current)) }}
             </div>
           </div>
         </div>
-        <div class="gauge-footer compact">
+        <div class="gauge-footer">
           <div class="gauge-item">
-            <span class="label">
-              {{ activeTab === BudgetCategory.Expense ? '已用' : '已收' }}
-            </span>
-            <span class="value expense">¥{{ formatMoney(overallStats.month.current) }}</span>
+            <span class="label">已用</span>
+            <span class="value">¥{{ formatMoney(overallStats.month.current) }}</span>
           </div>
           <div class="gauge-item">
-            <span class="label">
-              {{ activeTab === BudgetCategory.Expense ? '预算' : '目标' }}
-            </span>
+            <span class="label">预算</span>
             <span class="value">¥{{ formatMoney(overallStats.month.limit) }}</span>
           </div>
         </div>
@@ -92,30 +77,30 @@
             :style="{ transform: activeTab === BudgetCategory.Expense ? 'scaleX(-1)' : '' }"
           />
           <div class="gauge-text-overlay">
-            <div
-              class="remaining-label"
-            >
-              {{ activeTab === BudgetCategory.Expense ? (overallStats.year.current > overallStats.year.limit ? '超支' : '余额') : '差额' }}
+            <div class="balance-label">
+              余额
             </div>
             <div
-              class="remaining-value"
-              :style="{ color: activeTab === BudgetCategory.Expense && overallStats.year.current > overallStats.year.limit ? 'var(--van-danger-color)' : '' }"
+              class="balance-value"
+              :style="{
+                color:
+                  activeTab === BudgetCategory.Expense &&
+                  overallStats.year.current > overallStats.year.limit
+                    ? 'var(--van-danger-color)'
+                    : ''
+              }"
             >
               ¥{{ formatMoney(Math.abs(overallStats.year.limit - overallStats.year.current)) }}
             </div>
           </div>
         </div>
-        <div class="gauge-footer compact">
+        <div class="gauge-footer">
           <div class="gauge-item">
-            <span class="label">
-              {{ activeTab === BudgetCategory.Expense ? '已用' : '已收' }}
-            </span>
-            <span class="value expense">¥{{ formatMoney(overallStats.year.current) }}</span>
+            <span class="label">已用</span>
+            <span class="value">¥{{ formatMoney(overallStats.year.current) }}</span>
           </div>
           <div class="gauge-item">
-            <span class="label">
-              {{ activeTab === BudgetCategory.Expense ? '预算' : '目标' }}
-            </span>
+            <span class="label">预算</span>
             <span class="value">¥{{ formatMoney(overallStats.year.limit) }}</span>
           </div>
         </div>
@@ -146,8 +131,7 @@
     <!-- 年度预算进度 -->
     <div
       v-if="budgets.length > 0"
-      class="chart-card"
-      style="margin-top: 12px"
+      class="chart-card chart-card-spacing"
     >
       <div class="chart-header">
         <div class="chart-title">
@@ -168,8 +152,7 @@
     <!-- 偏差分析 -->
     <div
       v-if="budgets.length > 0"
-      class="chart-card"
-      style="margin-top: 12px"
+      class="chart-card chart-card-spacing"
     >
       <div class="chart-header">
         <div class="chart-title">
@@ -207,9 +190,14 @@
     height="70%"
   >
     <div
-      class="rich-html-content"
-      style="padding: 16px"
-      v-html="activeDescTab === 'month' ? (overallStats.month?.description || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>') : (overallStats.year?.description || '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>')"
+      class="rich-html-content popup-content-padding"
+      v-html="
+        activeDescTab === 'month'
+          ? overallStats.month?.description ||
+            '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>'
+          : overallStats.year?.description ||
+            '<p style=\'text-align:center;color:var(--van-text-color-3)\'>暂无数据</p>'
+      "
     />
   </PopupContainer>
 </template>
@@ -222,6 +210,10 @@ import PopupContainer from '@/components/PopupContainer.vue'
 import BaseChart from '@/components/Charts/BaseChart.vue'
 import { useChartTheme } from '@/composables/useChartTheme'
 import { chartjsGaugePlugin } from '@/plugins/chartjs-gauge-plugin'
+import { Chart as ChartJS } from 'chart.js'
+
+// 注册仪表盘插件
+ChartJS.register(chartjsGaugePlugin)
 
 const props = defineProps({
   overallStats: {
@@ -247,7 +239,7 @@ const showDescriptionPopup = ref(false)
 const activeDescTab = ref('month')
 
 // Chart.js 相关
-const { getChartOptions } = useChartTheme()
+const { getChartOptions, getChartOptionsByType } = useChartTheme()
 
 const formatMoney = (val) => {
   if (Math.abs(val) >= 10000) {
@@ -264,13 +256,15 @@ const monthGaugeData = computed(() => {
   // 防御性检查：如果数据未加载，返回默认结构
   if (!props.overallStats || !props.overallStats.month) {
     return {
-      datasets: [{
-        data: [0, 100],
-        backgroundColor: [getCssVar('--chart-axis'), getCssVar('--chart-axis')],
-        borderWidth: 0,
-        circumference: 180,
-        rotation: 270
-      }]
+      datasets: [
+        {
+          data: [0, 100],
+          backgroundColor: [getCssVar('--chart-axis'), getCssVar('--chart-axis')],
+          borderWidth: 0,
+          circumference: 180,
+          rotation: 270
+        }
+      ]
     }
   }
 
@@ -317,8 +311,8 @@ const monthGaugeData = computed(() => {
         data: [displayRate, remaining],
         backgroundColor: [color, getCssVar('--chart-axis')],
         borderWidth: 0,
-        circumference: 180,
-        rotation: 270
+        circumference: 220,
+        rotation: 250
       }
     ]
   }
@@ -328,14 +322,24 @@ const monthGaugeOptions = computed(() => {
   return {
     cutout: '75%',
     responsive: true,
-    maintainAspectRatio: true,
+    maintainAspectRatio: false,
     plugins: {
       legend: {
         display: false
       },
       tooltip: {
         enabled: false
+      },
+      datalabels: {
+        display: false
+      },
+      gaugePlugin: {
+        centerText: false
       }
+    },
+    scales: {
+      x: { display: false },
+      y: { display: false }
     }
   }
 })
@@ -345,13 +349,15 @@ const yearGaugeData = computed(() => {
   // 防御性检查：如果数据未加载，返回默认结构
   if (!props.overallStats || !props.overallStats.year) {
     return {
-      datasets: [{
-        data: [0, 100],
-        backgroundColor: [getCssVar('--chart-axis'), getCssVar('--chart-axis')],
-        borderWidth: 0,
-        circumference: 180,
-        rotation: 270
-      }]
+      datasets: [
+        {
+          data: [0, 100],
+          backgroundColor: [getCssVar('--chart-axis'), getCssVar('--chart-axis')],
+          borderWidth: 0,
+          circumference: 180,
+          rotation: 270
+        }
+      ]
     }
   }
 
@@ -397,8 +403,8 @@ const yearGaugeData = computed(() => {
         data: [displayRate, remaining],
         backgroundColor: [color, getCssVar('--chart-axis')],
         borderWidth: 0,
-        circumference: 180,
-        rotation: 270
+        circumference: 220,
+        rotation: 250
       }
     ]
   }
@@ -408,20 +414,32 @@ const yearGaugeOptions = computed(() => {
   return {
     cutout: '75%',
     responsive: true,
-    maintainAspectRatio: true,
+    maintainAspectRatio: false,
     plugins: {
       legend: {
         display: false
       },
       tooltip: {
         enabled: false
+      },
+      datalabels: {
+        display: false
+      },
+      gaugePlugin: {
+        centerText: false
       }
+    },
+    scales: {
+      x: { display: false },
+      y: { display: false }
     }
   }
 })
 
 const calculateChartHeight = (budgets) => {
-  if (!budgets) { return 100 }
+  if (!budgets) {
+    return 100
+  }
   const dataCount = budgets.length
   const minHeight = 100
   const heightPerItem = 30
@@ -435,7 +453,7 @@ const varianceChartData = computed(() => {
     return { labels: [], datasets: [] }
   }
 
-  const data = props.budgets.map(b => {
+  const data = props.budgets.map((b) => {
     const limit = b.limit || 0
     const current = b.current || 0
     const diff = current - limit
@@ -448,8 +466,8 @@ const varianceChartData = computed(() => {
     }
   })
 
-  const monthlyData = data.filter(item => item.type === BudgetPeriodType.Month)
-  const annualData = data.filter(item => item.type === BudgetPeriodType.Year)
+  const monthlyData = data.filter((item) => item.type === BudgetPeriodType.Month)
+  const annualData = data.filter((item) => item.type === BudgetPeriodType.Year)
 
   monthlyData.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
   annualData.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))
@@ -457,16 +475,20 @@ const varianceChartData = computed(() => {
   const sortedData = [...annualData, ...monthlyData]
 
   return {
-    labels: sortedData.map(item => item.name),
+    labels: sortedData.map((item) => item.name),
     datasets: [
       {
         label: '偏差',
-        data: sortedData.map(item => item.value),
-        backgroundColor: sortedData.map(item => {
+        data: sortedData.map((item) => item.value),
+        backgroundColor: sortedData.map((item) => {
           if (props.activeTab === BudgetCategory.Expense) {
-            return item.value > 0 ? getCssVar('--van-danger-color') : getCssVar('--van-success-color')
+            return item.value > 0
+              ? getCssVar('--van-danger-color')
+              : getCssVar('--van-success-color')
           } else {
-            return item.value > 0 ? getCssVar('--van-success-color') : getCssVar('--van-danger-color')
+            return item.value > 0
+              ? getCssVar('--van-success-color')
+              : getCssVar('--van-danger-color')
           }
         }),
         borderRadius: 4,
@@ -478,19 +500,23 @@ const varianceChartData = computed(() => {
 })
 
 const varianceChartOptions = computed(() => {
-  return getChartOptions({
+  return getChartOptionsByType('bar', {
     indexAxis: 'y',
     plugins: {
       legend: {
         display: false
       },
       tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        padding: 12,
+        cornerRadius: 8,
         callbacks: {
           label: (context) => {
             const item = context.dataset._meta[context.dataIndex]
-            const diffText = item.value > 0
-              ? `超支: ¥${formatMoney(item.value)}`
-              : `结余: ¥${formatMoney(Math.abs(item.value))}`
+            const diffText =
+              item.value > 0
+                ? `超支: ¥${formatMoney(item.value)}`
+                : `结余: ¥${formatMoney(Math.abs(item.value))}`
             return [
               `预算: ¥${formatMoney(item.limit)}`,
               `实际: ¥${formatMoney(item.current)}`,
@@ -505,8 +531,15 @@ const varianceChartOptions = computed(() => {
         display: false
       },
       y: {
+        grid: {
+          display: false
+        },
         ticks: {
           autoSkip: false,
+          font: {
+            family: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif',
+            size: 11
+          },
           callback: function (value, index) {
             const label = this.getLabelForValue(index)
             return label.length > 10 ? label.substring(0, 10) + '...' : label
@@ -564,7 +597,7 @@ const burndownChartData = computed(() => {
         }
       } else {
         if (i <= currentDay && totalBudget > 0) {
-          const actualRemaining = totalBudget - (currentExpense * i / currentDay)
+          const actualRemaining = totalBudget - (currentExpense * i) / currentDay
           actualBurndown.push(Math.round(actualRemaining))
         } else {
           actualBurndown.push(null)
@@ -583,7 +616,7 @@ const burndownChartData = computed(() => {
         }
       } else {
         if (i <= currentDay && totalBudget > 0) {
-          const actualAccumulated = Math.min(totalBudget, currentExpense * i / currentDay)
+          const actualAccumulated = Math.min(totalBudget, (currentExpense * i) / currentDay)
           actualBurndown.push(Math.round(actualAccumulated))
         } else {
           actualBurndown.push(null)
@@ -622,13 +655,21 @@ const burndownChartData = computed(() => {
 })
 
 const burndownChartOptions = computed(() => {
-  return getChartOptions({
+  return getChartOptionsByType('line', {
     plugins: {
       legend: {
         display: true,
-        position: 'top'
+        position: 'top',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'line',
+          boxWidth: 20
+        }
       },
       tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        padding: 12,
+        cornerRadius: 8,
         callbacks: {
           label: (context) => {
             const value = context.parsed.y
@@ -641,6 +682,18 @@ const burndownChartOptions = computed(() => {
       }
     },
     scales: {
+      x: {
+        grid: {
+          display: false
+        },
+        ticks: {
+          maxTicksLimit: 10,
+          font: {
+            family: '"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif',
+            size: 10
+          }
+        }
+      },
       y: {
         ticks: {
           callback: (value) => {
@@ -648,6 +701,9 @@ const burndownChartOptions = computed(() => {
               return (value / 10000).toFixed(0) + 'w'
             }
             return value
+          },
+          font: {
+            size: 10
           }
         }
       }
@@ -700,7 +756,7 @@ const yearBurndownChartData = computed(() => {
         const isFuture = year > currentYear || (year === currentYear && i > currentMonth)
         if (!isFuture && totalBudget > 0) {
           const progress = (i + 1) / 12
-          const actualRemaining = totalBudget - (currentExpense * progress)
+          const actualRemaining = totalBudget - currentExpense * progress
           actualBurndown.push(Math.round(actualRemaining))
         } else {
           actualBurndown.push(null)
@@ -760,13 +816,21 @@ const yearBurndownChartData = computed(() => {
 })
 
 const yearBurndownChartOptions = computed(() => {
-  return getChartOptions({
+  return getChartOptionsByType('line', {
     plugins: {
       legend: {
         display: true,
-        position: 'top'
+        position: 'top',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'line',
+          boxWidth: 20
+        }
       },
       tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        padding: 12,
+        cornerRadius: 8,
         callbacks: {
           label: (context) => {
             const value = context.parsed.y
@@ -779,6 +843,16 @@ const yearBurndownChartOptions = computed(() => {
       }
     },
     scales: {
+      x: {
+        grid: {
+          display: false
+        },
+        ticks: {
+          font: {
+            size: 10
+          }
+        }
+      },
       y: {
         ticks: {
           callback: (value) => {
@@ -786,6 +860,9 @@ const yearBurndownChartOptions = computed(() => {
               return (value / 10000).toFixed(0) + 'w'
             }
             return value
+          },
+          font: {
+            size: 10
           }
         }
       }
@@ -796,65 +873,77 @@ const yearBurndownChartOptions = computed(() => {
 
 <style scoped>
 .chart-analysis-container {
-  padding: 12px;
+  padding: var(--spacing-lg, 12px);
   padding-bottom: 80px;
 }
 
 .gauges-row {
   display: flex;
-  gap: 12px;
-  margin-bottom: 12px;
+  gap: var(--spacing-xl, 16px);
+  margin-bottom: var(--spacing-xl, 16px);
 }
 
 .chart-card {
   background: var(--van-background-2);
-  border-radius: 12px;
-  padding: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  border-radius: var(--radius-lg, 12px);
+  padding: var(--spacing-xl, 16px);
+  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04));
 }
 
 .gauge-card {
   flex: 1;
   min-width: 0;
   /* 防止 flex 子项溢出 */
-  padding: 12px;
+  padding: var(--spacing-lg, 12px);
   /* 减小内边距 */
 }
 
+.chart-card-spacing {
+  margin-top: var(--spacing-lg, 12px);
+}
+
+.popup-content-padding {
+  padding: var(--spacing-xl, 16px);
+}
+
 .gauge-wrapper {
   position: relative;
   width: 100%;
   height: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .gauge-text-overlay {
   position: absolute;
-  bottom: 20%;
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   z-index: 10;
+  margin-top: 8px;
 }
 
-.remaining-value {
-  font-size: 24px;
-  font-weight: bold;
-  font-family: DIN Alternate, system-ui;
-  color: var(--van-text-color);
-  line-height: 1;
-  transform-origin: center;
-}
-
-.remaining-label {
-  font-size: 10px;
+.balance-label {
+  font-size: 11px;
   color: var(--van-text-color-2);
-  margin-top: 4px;
-  font-family: system-ui;
-  transform-origin: center;
+  letter-spacing: 1px;
+}
+
+.balance-value {
+  margin-top: 6px;
+  font-size: 24px;
+  font-weight: 700;
+  font-family:
+    DIN Alternate,
+    system-ui;
+  color: var(--van-text-color);
+  line-height: 1.1;
 }
 
 .chart-header {
@@ -896,37 +985,33 @@ const yearBurndownChartOptions = computed(() => {
 
 .gauge-footer {
   display: flex;
-  justify-content: space-around;
-  /* 分散对齐 */
+  justify-content: space-between;
   align-items: center;
-  margin-top: -20px;
-  position: relative;
-  z-index: 10;
+  padding: 0 8px 6px;
+  margin-top: -6px;
 }
 
 .gauge-item {
   display: flex;
   flex-direction: column;
   align-items: center;
+  min-width: 0;
 }
 
 .gauge-item .label {
   font-size: 10px;
   color: var(--van-text-color-2);
-  transform: scale(0.9);
-  /* 视觉上更小 */
+  margin-bottom: 4px;
 }
 
 .gauge-item .value {
   font-size: 12px;
   font-weight: 600;
-  font-family: DIN Alternate, system-ui;
+  font-family:
+    DIN Alternate,
+    system-ui;
   color: var(--van-text-color);
 }
 
-.gauge-item .value.expense {
-  color: var(--van-primary-color);
-}
-
 /* expand styles removed as they are no longer used */
 </style>
diff --git a/Web/src/views/calendarV2/modules/Stats.vue b/Web/src/views/calendarV2/modules/Stats.vue
index bc560cf..09d99f3 100644
--- a/Web/src/views/calendarV2/modules/Stats.vue
+++ b/Web/src/views/calendarV2/modules/Stats.vue
@@ -114,9 +114,9 @@ const selectedDateFormatted = computed(() => {
 .daily-stats {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xl);
-  padding: var(--spacing-3xl);
-  padding-top: 8px;
+  gap: var(--spacing-xl, 16px);
+  padding: var(--spacing-xl, 16px);
+  padding-top: var(--spacing-md, 12px);
 }
 
 .stats-header {
@@ -137,9 +137,10 @@ const selectedDateFormatted = computed(() => {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
-  padding: var(--spacing-2xl);
+  padding: var(--spacing-xl, 16px);
   background-color: var(--bg-secondary);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-lg, 12px);
+  box-shadow: var(--shadow-sm);
 }
 
 .stats-dual-row {
diff --git a/Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue b/Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue
index 7b77056..549558f 100644
--- a/Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue
+++ b/Web/src/views/statisticsV2/modules/ExpenseCategoryCard.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- 支出分类统计 -->
   <div
-    class="common-card"
-    style="padding-bottom: 10px"
+    class="common-card expense-category-card"
+    style="padding: 12px;"
   >
     <div class="card-header">
       <h3 class="card-title">
@@ -25,6 +25,7 @@
           type="doughnut"
           :data="chartData"
           :options="chartOptions"
+          :plugins="[pieCenterTextPlugin, pieLabelLinePlugin]"
           :loading="false"
           @chart:render="onChartRender"
         />
@@ -87,6 +88,7 @@ import { getCssVar } from '@/utils/theme'
 import ModernEmpty from '@/components/ModernEmpty.vue'
 import BaseChart from '@/components/Charts/BaseChart.vue'
 import { useChartTheme } from '@/composables/useChartTheme'
+import { pieCenterTextPlugin } from '@/plugins/chartjs-pie-center-plugin'
 
 const props = defineProps({
   categories: {
@@ -108,9 +110,105 @@ defineEmits(['category-click'])
 const showAllExpense = ref(false)
 
 // Chart.js 相关
-const { getChartOptions } = useChartTheme()
+const { getChartOptionsByType } = useChartTheme()
 let _chartJSInstance = null
 
+// 饼图标签引导线
+const pieLabelLinePlugin = {
+  id: 'pieLabelLine',
+  afterDraw: (chart) => {
+    const ctx = chart.ctx
+    const meta = chart.getDatasetMeta(0)
+    if (!meta?.data?.length) {return}
+
+    const labels = chart.data.labels || []
+    const centerX = (chart.chartArea.left + chart.chartArea.right) / 2
+    const lineColor = getCssVar('--van-text-color-2') || '#8a8a8a'
+    const textColor = getCssVar('--van-text-color') || '#323233'
+    const strokeColor = getCssVar('--van-background-2') || '#ffffff'
+    const minSpacing = 12
+    const labelOffset = 18
+    const lineOffset = 8
+    const yPadding = 6
+
+    const items = meta.data
+      .map((arc, index) => {
+        const label = labels[index]
+        if (!label) {return null}
+        const props = arc.getProps(['startAngle', 'endAngle', 'outerRadius', 'x', 'y'], true)
+        const angle = (props.startAngle + props.endAngle) / 2
+        const rawX = props.x + Math.cos(angle) * props.outerRadius
+        const rawY = props.y + Math.sin(angle) * props.outerRadius
+        const isRight = rawX >= centerX
+        return {
+          arc: props,
+          label,
+          angle,
+          isRight,
+          y: rawY
+        }
+      })
+      .filter(Boolean)
+
+    const left = items.filter((item) => !item.isRight).sort((a, b) => a.y - b.y)
+    const right = items.filter((item) => item.isRight).sort((a, b) => a.y - b.y)
+
+    const spread = (list) => {
+      for (let i = 1; i < list.length; i++) {
+        if (list[i].y - list[i - 1].y < minSpacing) {
+          list[i].y = list[i - 1].y + minSpacing
+        }
+      }
+    }
+
+    const topLimit = chart.chartArea.top + yPadding
+    const bottomLimit = chart.chartArea.bottom - yPadding
+    const clampY = (value) => Math.min(bottomLimit, Math.max(topLimit, value))
+
+    spread(left)
+    spread(right)
+
+    left.forEach((item) => { item.y = clampY(item.y) })
+    right.forEach((item) => { item.y = clampY(item.y) })
+
+    ctx.save()
+    ctx.strokeStyle = lineColor
+    ctx.lineWidth = 1
+    ctx.fillStyle = textColor
+    ctx.textBaseline = 'middle'
+    ctx.font = 'bold 10px "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif'
+
+    const drawItem = (item) => {
+      const cos = Math.cos(item.angle)
+      const sin = Math.sin(item.angle)
+      const startX = item.arc.x + cos * (item.arc.outerRadius + 2)
+      const startY = item.arc.y + sin * (item.arc.outerRadius + 2)
+      const midX = item.arc.x + cos * (item.arc.outerRadius + lineOffset)
+      const midY = item.arc.y + sin * (item.arc.outerRadius + lineOffset)
+      const endX = item.arc.x + (item.isRight ? 1 : -1) * (item.arc.outerRadius + labelOffset)
+      const endY = item.y
+
+      ctx.strokeStyle = lineColor
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      ctx.moveTo(startX, startY)
+      ctx.lineTo(midX, midY)
+      ctx.lineTo(endX, endY)
+      ctx.stroke()
+
+      const textX = endX + (item.isRight ? 6 : -6)
+      ctx.textAlign = item.isRight ? 'left' : 'right'
+      ctx.fillStyle = textColor
+      ctx.fillText(item.label, textX, endY)
+    }
+
+    left.forEach(drawItem)
+    right.forEach(drawItem)
+
+    ctx.restore()
+  }
+}
+
 // 格式化金额
 const formatMoney = (value) => {
   if (!value && value !== 0) {
@@ -192,21 +290,45 @@ const chartData = computed(() => {
         backgroundColor: data.map((item) => item.color),
         borderWidth: 2,
         borderColor: getCssVar('--van-background-2') || '#fff',
-        hoverOffset: 4
+        hoverOffset: 8,
+        borderRadius: 4,
+        radius: '88%' // 拉大半径，减少上下留白
       }
     ]
   }
 })
 
+// 计算总金额
+const totalAmount = computed(() => {
+  return props.totalExpense || 0
+})
+
 // Chart.js 配置
 const chartOptions = computed(() => {
-  return getChartOptions({
-    cutout: '50%',
+  const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark'
+
+  return getChartOptionsByType('doughnut', {
+    cutout: '65%',
+    layout: {
+      padding: {
+        top: 0,
+        bottom: 0,
+        left: 2,
+        right: 2
+      }
+    },
     plugins: {
       legend: {
         display: false
       },
       tooltip: {
+        backgroundColor: getCssVar('--van-background-2'),
+        titleColor: getCssVar('--van-text-color'),
+        bodyColor: getCssVar('--van-text-color'),
+        borderColor: getCssVar('--van-border-color'),
+        borderWidth: 1,
+        padding: 12,
+        cornerRadius: 8,
         callbacks: {
           label: (context) => {
             const label = context.label || ''
@@ -216,12 +338,22 @@ const chartOptions = computed(() => {
             return `${label}: ¥${formatMoney(value)} (${percentage}%)`
           }
         }
+      },
+      pieCenterText: {
+        text: `¥${formatMoney(totalAmount.value)}`,
+        subtext: '总支出',
+        textColor: isDarkMode ? '#ffffff' : '#323233',
+        subtextColor: isDarkMode ? '#969799' : '#969799',
+        fontSize: 24,
+        subFontSize: 12
+      },
+      // 扇区外侧显示分类名称
+      datalabels: {
+        display: true
       }
     },
-    onClick: (_event, _elements) => {
-      // 点击饼图扇区时，触发跳转到分类详情
-      // 注意：这个功能在 BaseChart 中不会自动触发，需要后续完善
-    }
+    // 悬停效果增强
+    hoverOffset: 8
   })
 })
 
@@ -236,12 +368,20 @@ const onChartRender = (chart) => {
 
 .common-card {
   background: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-xl);
-  margin-bottom: var(--spacing-xl);
+  border-radius: var(--radius-lg, 12px);
+  padding: var(--spacing-xl, 16px);
+  margin-bottom: var(--spacing-xl, 16px);
   box-shadow: var(--shadow-sm);
 }
 
+.expense-category-card .card-header {
+  margin-bottom: 0;
+}
+
+.expense-category-card .chart-container {
+  padding-bottom: 0;
+}
+
 .card-header {
   display: flex;
   align-items: center;
@@ -263,8 +403,27 @@ const onChartRender = (chart) => {
 .ring-chart {
   position: relative;
   width: 100%;
-  height: 200px;
-  margin: 0 auto;
+  height: 170px;
+  margin: 0px auto 0;
+  overflow: visible;
+}
+
+.ring-chart :deep(.chartjs-size-monitor),
+.ring-chart :deep(.chartjs-size-monitor-expand),
+.ring-chart :deep(.chartjs-size-monitor-shrink) {
+  display: none !important;
+}
+
+.ring-chart :deep(.base-chart) {
+  height: 100%;
+  min-height: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.ring-chart :deep(canvas) {
+  height: 100% !important;
+  width: 100% !important;
 }
 
 .category-list {
@@ -340,7 +499,8 @@ const onChartRender = (chart) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 0;
+  padding-top: 10px;
+  padding-bottom: 0;
   color: var(--van-text-color-3);
   font-size: 20px;
   cursor: pointer;
diff --git a/Web/src/views/statisticsV2/modules/IncomeNoneCategoryCard.vue b/Web/src/views/statisticsV2/modules/IncomeNoneCategoryCard.vue
index 67ebe7f..19cf79e 100644
--- a/Web/src/views/statisticsV2/modules/IncomeNoneCategoryCard.vue
+++ b/Web/src/views/statisticsV2/modules/IncomeNoneCategoryCard.vue
@@ -156,9 +156,9 @@ const noneCategories = computed(() => {
 // 通用卡片样式
 .common-card {
   background: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-xl);
-  margin-bottom: var(--spacing-xl);
+  border-radius: var(--radius-lg, 12px);
+  padding: var(--spacing-xl, 16px);
+  margin-bottom: var(--spacing-xl, 16px);
   box-shadow: var(--shadow-sm);
 }
 
@@ -179,15 +179,15 @@ const noneCategories = computed(() => {
 /* 并列显示卡片 */
 .side-by-side-cards {
   display: flex;
-  gap: 12px;
-  margin: 0 12px 16px;
+  gap: var(--spacing-lg, 12px);
+  margin: 0 var(--spacing-lg, 12px) var(--spacing-xl, 16px);
 }
 
 .side-by-side-cards .common-card {
   margin: 0;
   flex: 1;
   min-width: 0; /* 允许内部元素缩小 */
-  padding: 12px;
+  padding: var(--spacing-lg, 12px);
 }
 
 .card-header {
diff --git a/Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue b/Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue
index 788f6ec..184cf63 100644
--- a/Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue
+++ b/Web/src/views/statisticsV2/modules/MonthlyExpenseCard.vue
@@ -80,7 +80,7 @@ const props = defineProps({
 })
 
 // Chart.js 相关
-const { getChartOptions } = useChartTheme()
+const { getChartOptionsByType, colors } = useChartTheme()
 
 // 计算结余样式类
 const balanceClass = computed(() => ({
@@ -99,7 +99,34 @@ const prepareChartData = () => {
   let xAxisLabels = []
 
   if (props.period === 'week') {
-    chartData = [...props.trendData].sort((a, b) => new Date(a.date) - new Date(b.date))
+    // 获取当前周的日期范围
+    const current = props.currentDate
+    const weekStart = new Date(current)
+    const day = weekStart.getDay()
+    const diff = weekStart.getDate() - day + (day === 0 ? -6 : 1) // 调整为周一开始
+    weekStart.setDate(diff)
+    weekStart.setHours(0, 0, 0, 0)
+
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    // 判断是否在当前周
+    const weekEnd = new Date(weekStart)
+    weekEnd.setDate(weekStart.getDate() + 6)
+    const isCurrentWeek = today >= weekStart && today <= weekEnd
+
+    // 过滤到当前日期（如果是当前周）
+    chartData = [...props.trendData]
+      .sort((a, b) => new Date(a.date) - new Date(b.date))
+      .filter((item) => {
+        const itemDate = new Date(item.date)
+        itemDate.setHours(0, 0, 0, 0)
+        if (isCurrentWeek) {
+          return itemDate <= today
+        }
+        return true // 历史周显示完整数据
+      })
+
     xAxisLabels = chartData.map((item) => {
       const date = new Date(item.date)
       const weekDays = ['日', '一', '二', '三', '四', '五', '六']
@@ -111,6 +138,11 @@ const prepareChartData = () => {
     const month = currentDate.getMonth() + 1
     const daysInMonth = getDaysInMonth(year, month)
 
+    // 获取今天的日期
+    const today = new Date()
+    const isCurrentMonth = today.getFullYear() === year && today.getMonth() + 1 === month
+    const currentDay = isCurrentMonth ? today.getDate() : daysInMonth
+
     const allDays = Array.from({ length: daysInMonth }, (_, i) => {
       const day = i + 1
       const paddedDay = day.toString().padStart(2, '0')
@@ -124,7 +156,11 @@ const prepareChartData = () => {
       }
     })
 
-    chartData = allDays.map((date) => {
+    // 只获取到当前日期的数据（历史月份则展示完整月份）
+    const daysToShow = isCurrentMonth ? currentDay : daysInMonth
+    const daysToDisplay = allDays.slice(0, daysToShow)
+
+    chartData = daysToDisplay.map((date) => {
       const dayData = dataMap.get(date)
       return {
         date,
@@ -136,9 +172,21 @@ const prepareChartData = () => {
 
     xAxisLabels = chartData.map((_, index) => (index + 1).toString())
   } else if (props.period === 'year') {
+    const currentYear = props.currentDate.getFullYear()
+    const today = new Date()
+    const isCurrentYear = today.getFullYear() === currentYear
+    const currentMonth = isCurrentYear ? today.getMonth() + 1 : 12
+
+    // 过滤到当前月份（如果是当前年）
     chartData = [...props.trendData]
       .filter((item) => item && item.date)
       .sort((a, b) => new Date(a.date) - new Date(b.date))
+      .filter((item) => {
+        const itemDate = new Date(item.date)
+        const itemMonth = itemDate.getMonth() + 1
+        return itemMonth <= currentMonth
+      })
+
     xAxisLabels = chartData.map((item) => {
       const date = new Date(item.date)
       return `${date.getMonth() + 1}月`
@@ -176,6 +224,10 @@ const prepareChartData = () => {
   return { chartData, xAxisLabels, expenseData, incomeData }
 }
 
+// 使用主题颜色
+const expenseColor = computed(() => colors.value.danger)
+const incomeColor = computed(() => colors.value.success)
+
 // Chart.js 数据
 const chartData = computed(() => {
   const { xAxisLabels, expenseData, incomeData } = prepareChartData()
@@ -186,33 +238,39 @@ const chartData = computed(() => {
       {
         label: '支出',
         data: expenseData,
-        borderColor: '#ff6b6b',
+        borderColor: expenseColor.value,
         backgroundColor: (context) => {
           const chart = context.chart
           const { ctx, chartArea } = chart
-          if (!chartArea) {return 'rgba(255, 107, 107, 0.1)'}
-          return createGradient(ctx, chartArea, '#ff6b6b')
+          if (!chartArea) {
+            return 'rgba(255, 107, 107, 0.1)'
+          }
+          return createGradient(ctx, chartArea, expenseColor.value)
         },
         fill: true,
         tension: 0.4,
         pointRadius: 0,
-        pointHoverRadius: 4,
+        pointHoverRadius: 6,
+        hitRadius: 20,
         borderWidth: 2
       },
       {
         label: '收入',
         data: incomeData,
-        borderColor: '#4ade80',
+        borderColor: incomeColor.value,
         backgroundColor: (context) => {
           const chart = context.chart
           const { ctx, chartArea } = chart
-          if (!chartArea) {return 'rgba(74, 222, 128, 0.1)'}
-          return createGradient(ctx, chartArea, '#4ade80')
+          if (!chartArea) {
+            return 'rgba(74, 222, 128, 0.1)'
+          }
+          return createGradient(ctx, chartArea, incomeColor.value)
         },
         fill: true,
         tension: 0.4,
         pointRadius: 0,
-        pointHoverRadius: 4,
+        pointHoverRadius: 6,
+        hitRadius: 20,
         borderWidth: 2
       }
     ]
@@ -223,24 +281,23 @@ const chartData = computed(() => {
 const chartOptions = computed(() => {
   const { chartData: rawData } = prepareChartData()
 
-  return getChartOptions({
+  return getChartOptionsByType('line', {
     scales: {
-      x: {
-        display: false
-      },
-      y: {
-        display: false
-      }
+      x: { display: false },
+      y: { display: false }
     },
     plugins: {
-      legend: {
-        display: false
-      },
+      legend: { display: false },
       tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        padding: 12,
+        cornerRadius: 8,
         callbacks: {
           title: (context) => {
             const index = context[0].dataIndex
-            if (!rawData[index]) {return ''}
+            if (!rawData[index]) {
+              return ''
+            }
 
             const date = rawData[index].date
             if (props.period === 'week') {
@@ -262,7 +319,9 @@ const chartOptions = computed(() => {
           label: (context) => {
             const index = context.dataIndex
             const item = rawData[index]
-            if (!item) {return ''}
+            if (!item) {
+              return ''
+            }
 
             let dailyExpense = 0
             let dailyIncome = 0
@@ -280,16 +339,14 @@ const chartOptions = computed(() => {
             }
 
             const value = context.dataset.label === '支出' ? dailyExpense : dailyIncome
-            if (value === 0) {return null}
+            if (value === 0) {
+              return null
+            }
 
             return `${context.dataset.label}: ¥${value.toFixed(2)}`
           }
         }
       }
-    },
-    interaction: {
-      mode: 'index',
-      intersect: false
     }
   })
 })
@@ -300,9 +357,9 @@ const chartOptions = computed(() => {
 
 .common-card {
   background: var(--bg-secondary);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-xl);
-  margin-bottom: var(--spacing-xl);
+  border-radius: var(--radius-lg, 12px);
+  padding: var(--spacing-xl, 16px);
+  margin-bottom: var(--spacing-xl, 16px);
   box-shadow: var(--shadow-sm);
 }
 
@@ -369,6 +426,8 @@ const chartOptions = computed(() => {
 
 .trend-chart {
   width: 100%;
-  height: 180px;
+  height: 140px;
+  overflow: hidden;
+  position: relative;
 }
 </style>