Align finance dashboard visual style

frontend/src/views/Finance.vue

@@ -572,31 +572,37 @@ function renderTrendChart() {
   trendChart ??= echarts.init(trendChartRef.value)
   const labels = summary.value.chart.labels.map(label => label.slice(5))
   trendChart.setOption({
-    color: ['#1f9d7a', '#d97706'],
+    color: ['#22a884', '#f08a05'],
-    grid: { left: 12, right: 18, top: 24, bottom: 12, containLabel: true },
+    grid: { left: 10, right: 18, top: 28, bottom: 10, containLabel: true },
     tooltip: {
       trigger: 'axis',
+      backgroundColor: '#ffffff',
+      borderColor: '#dbe4ef',
+      borderWidth: 1,
+      textStyle: { color: '#142033', fontSize: 12 },
       valueFormatter: (value: number) => formatAmount(value),
     },
     legend: {
       top: 0,
       right: 0,
       icon: 'circle',
-      textStyle: { color: '#64748b', fontSize: 12 },
+      itemWidth: 9,
+      itemHeight: 9,
+      textStyle: { color: '#65758b', fontSize: 12, fontWeight: 600 },
       data: ['收入', '消费'],
     },
     xAxis: {
       type: 'category',
       boundaryGap: false,
       data: labels,
-      axisLine: { lineStyle: { color: '#e2e8f0' } },
+      axisLine: { lineStyle: { color: '#e8eef6' } },
       axisTick: { show: false },
-      axisLabel: { color: '#64748b' },
+      axisLabel: { color: '#73839a', fontSize: 12 },
     },
     yAxis: {
       type: 'value',
-      axisLabel: { color: '#64748b', formatter: (value: number) => `$${value}` },
+      axisLabel: { color: '#73839a', fontSize: 12, formatter: (value: number) => `$${value}` },
-      splitLine: { lineStyle: { color: '#eef2f7' } },
+      splitLine: { lineStyle: { color: '#edf2f7' } },
     },
     series: [
       {
@@ -605,7 +611,7 @@ function renderTrendChart() {
         smooth: true,
         symbolSize: 7,
         data: summary.value.chart.revenue,
-        areaStyle: { color: 'rgba(31, 157, 122, 0.12)' },
+        areaStyle: { color: 'rgba(34, 168, 132, 0.12)' },
         lineStyle: { width: 3 },
       },
       {
@@ -614,7 +620,7 @@ function renderTrendChart() {
         smooth: true,
         symbolSize: 7,
         data: summary.value.chart.cost,
-        areaStyle: { color: 'rgba(217, 119, 6, 0.12)' },
+        areaStyle: { color: 'rgba(240, 138, 5, 0.11)' },
         lineStyle: { width: 3 },
       },
     ],
@@ -628,29 +634,42 @@ function renderShareChart() {
     .filter(item => item.amount > 0)
     .map(item => ({ name: item.name, value: Number(item.amount.toFixed(6)) }))
   shareChart.setOption({
-    color: ['#1f9d7a', '#2563eb', '#d97706', '#9333ea', '#dc2626', '#0891b2'],
+    color: ['#22a884', '#2f69e8', '#e87d04', '#9b42e8', '#dc4b4b', '#0b9bb0'],
     tooltip: {
       trigger: 'item',
+      backgroundColor: '#ffffff',
+      borderColor: '#dbe4ef',
+      borderWidth: 1,
+      textStyle: { color: '#142033', fontSize: 12 },
       formatter: (params: any) => `${params.name}<br/>${formatAmount(params.value)} (${params.percent}%)`,
     },
     legend: {
       bottom: 0,
       type: 'scroll',
       icon: 'circle',
-      textStyle: { color: '#64748b', fontSize: 12 },
+      itemWidth: 9,
+      itemHeight: 9,
+      textStyle: { color: '#65758b', fontSize: 12, fontWeight: 600 },
     },
     series: [
       {
         name: '上游消费',
         type: 'pie',
-        radius: ['54%', '74%'],
+        radius: ['52%', '72%'],
-        center: ['50%', '43%'],
+        center: ['50%', '42%'],
         avoidLabelOverlap: true,
         minAngle: 4,
         label: {
-          color: '#334155',
+          color: '#536276',
+          fontSize: 12,
+          fontWeight: 600,
           formatter: '{b}\n{d}%',
         },
+        labelLine: {
+          length: 16,
+          length2: 18,
+          lineStyle: { width: 1.4 },
+        },
         itemStyle: {
           borderColor: '#fff',
           borderWidth: 3,
@@ -753,17 +772,18 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .finance-page {
-  --finance-bg: #f4f7fb;
+  --finance-bg: #eef3f8;
   --finance-card: #ffffff;
-  --finance-border: #e2e8f0;
+  --finance-card-soft: #f8fafd;
-  --finance-border-strong: #cbd5e1;
+  --finance-border: #dce5ef;
-  --finance-text: #0f172a;
+  --finance-border-strong: #c7d3e1;
-  --finance-muted: #64748b;
+  --finance-text: #142033;
-  --finance-soft: #94a3b8;
+  --finance-muted: #65758b;
-  --finance-green: #1f9d7a;
+  --finance-soft: #9aa8ba;
-  --finance-orange: #d97706;
+  --finance-green: #22a884;
-  --finance-blue: #2563eb;
+  --finance-orange: #e87d04;
-  --finance-red: #dc2626;
+  --finance-blue: #2f69e8;
+  --finance-red: #ef5b61;
 
   width: 100%;
   color: var(--finance-text);
@@ -772,12 +792,18 @@ onBeforeUnmount(() => {
 
 .finance-shell {
   display: grid;
-  gap: 18px;
+  gap: 16px;
-  max-width: 1600px;
+  max-width: 1504px;
   margin: 0 auto;
-  padding: 18px;
+  padding: 16px;
+  border: 1px solid rgba(221, 230, 240, 0.96);
   border-radius: 18px;
-  background: var(--finance-bg);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 56px),
+    var(--finance-bg);
+  box-shadow:
+    0 24px 70px rgba(10, 16, 28, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86);
 }
 
 .finance-topbar,
@@ -788,15 +814,16 @@ onBeforeUnmount(() => {
   background: var(--finance-card);
   border: 1px solid var(--finance-border);
   border-radius: 8px;
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
+  box-shadow: 0 8px 20px rgba(30, 43, 62, 0.045);
 }
 
 .finance-topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 14px;
+  gap: 12px;
-  padding: 14px;
+  min-height: 66px;
+  padding: 12px;
 }
 
 .period-tabs,
@@ -806,28 +833,31 @@ onBeforeUnmount(() => {
   gap: 4px;
   padding: 4px;
   border-radius: 8px;
-  background: #eef2f7;
+  background: #e7edf5;
   border: 1px solid var(--finance-border);
+  box-shadow: inset 0 1px 2px rgba(20, 32, 51, 0.04);
 }
 
 .period-tab,
 .table-tabs button {
   min-width: 54px;
-  height: 32px;
+  height: 34px;
-  padding: 0 14px;
+  padding: 0 18px;
   border: 0;
   border-radius: 6px;
   background: transparent;
   color: var(--finance-muted);
   font-weight: 700;
+  line-height: 34px;
   cursor: pointer;
+  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
 }
 
 .period-tab.active,
 .table-tabs button.active {
   color: var(--finance-text);
   background: #fff;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 1px 4px rgba(20, 32, 51, 0.13);
 }
 
 .toolbar-actions {
@@ -835,20 +865,23 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: flex-end;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 9px;
 }
 
 .search-input {
-  width: 240px;
+  width: 232px;
 }
 
 .date-picker {
-  width: 170px;
+  width: 190px;
 }
 
 .icon-button {
+  min-height: 38px;
+  padding-inline: 15px;
   border-radius: 8px;
   font-weight: 700;
+  cursor: pointer;
 }
 
 .icon-button :deep(svg) {
@@ -856,7 +889,8 @@ onBeforeUnmount(() => {
 }
 
 .compare-button {
-  color: #fff;
+  color: #fff6ec;
+  box-shadow: 0 8px 18px rgba(232, 125, 4, 0.24);
 }
 
 .page-alert {
@@ -870,10 +904,25 @@ onBeforeUnmount(() => {
 }
 
 .metric-card {
-  min-height: 136px;
+  position: relative;
-  padding: 18px;
+  min-height: 120px;
+  padding: 17px 18px 16px;
   display: grid;
   align-content: space-between;
+  overflow: hidden;
+}
+
+.metric-card::after {
+  content: "";
+  position: absolute;
+  right: 24px;
+  bottom: 18px;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(232, 125, 4, 0.13), transparent 68%);
+  filter: blur(2px);
+  pointer-events: none;
 }
 
 .metric-head {
@@ -882,13 +931,13 @@ onBeforeUnmount(() => {
   justify-content: space-between;
   gap: 12px;
   color: var(--finance-muted);
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 700;
 }
 
 .metric-icon {
-  width: 34px;
+  width: 31px;
-  height: 34px;
+  height: 31px;
   display: inline-grid;
   place-items: center;
   border-radius: 8px;
@@ -917,7 +966,7 @@ onBeforeUnmount(() => {
 .metric-card strong {
   color: var(--finance-text);
   font-family: "JetBrains Mono", Consolas, monospace;
-  font-size: clamp(22px, 2vw, 32px);
+  font-size: 30px;
   font-weight: 800;
   line-height: 1.12;
   word-break: break-word;
@@ -927,6 +976,7 @@ onBeforeUnmount(() => {
 .metric-card small {
   color: var(--finance-muted);
   font-size: 12px;
+  font-weight: 700;
 }
 
 .positive {
@@ -939,7 +989,7 @@ onBeforeUnmount(() => {
 
 .chart-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
+  grid-template-columns: minmax(0, 1.74fr) minmax(340px, 0.82fr);
   gap: 14px;
 }
 
@@ -953,7 +1003,7 @@ onBeforeUnmount(() => {
   align-items: flex-start;
   justify-content: space-between;
   gap: 14px;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .panel-header h2 {
@@ -961,19 +1011,21 @@ onBeforeUnmount(() => {
   color: var(--finance-text);
   font-size: 17px;
   line-height: 1.2;
+  font-weight: 800;
 }
 
 .panel-header p {
   margin: 5px 0 0;
   color: var(--finance-muted);
   font-size: 12px;
+  font-weight: 600;
 }
 
 .panel-chip {
   flex: 0 0 auto;
   padding: 5px 9px;
   border-radius: 999px;
-  background: #eef2f7;
+  background: #eef3f8;
   color: var(--finance-muted);
   font-size: 12px;
   font-weight: 700;
@@ -984,11 +1036,11 @@ onBeforeUnmount(() => {
 }
 
 .trend-chart {
-  height: 326px;
+  height: 314px;
 }
 
 .share-chart {
-  height: 326px;
+  height: 314px;
 }
 
 .detail-header {
@@ -1000,6 +1052,7 @@ onBeforeUnmount(() => {
   overflow-x: auto;
   border: 1px solid var(--finance-border);
   border-radius: 8px;
+  background: #fff;
 }
 
 .finance-table {
@@ -1096,19 +1149,20 @@ onBeforeUnmount(() => {
 }
 
 .finance-page :deep(.el-input__wrapper) {
-  min-height: 34px;
+  min-height: 38px;
   border-radius: 8px;
   background: #fff;
-  box-shadow: 0 0 0 1px var(--finance-border) inset;
+  box-shadow: 0 0 0 1px #e7dde5 inset !important;
 }
 
 .finance-page :deep(.el-input__wrapper:hover),
 .finance-page :deep(.el-input__wrapper.is-focus) {
-  box-shadow: 0 0 0 1px var(--finance-border-strong) inset;
+  box-shadow: 0 0 0 1px var(--finance-border-strong) inset, 0 0 0 3px rgba(232, 125, 4, 0.06) !important;
 }
 
 .finance-page :deep(.el-input__inner) {
-  color: var(--finance-text);
+  color: var(--finance-text) !important;
+  font-weight: 600;
 }
 
 .finance-page :deep(.el-input__inner::placeholder),
@@ -1117,10 +1171,13 @@ onBeforeUnmount(() => {
 }
 
 .finance-page :deep(.el-button--primary) {
-  --el-button-bg-color: #0f172a;
+  --el-button-bg-color: #ee9b45;
-  --el-button-border-color: #0f172a;
+  --el-button-border-color: #ee9b45;
-  --el-button-hover-bg-color: #263449;
+  --el-button-hover-bg-color: #f0a85a;
-  --el-button-hover-border-color: #263449;
+  --el-button-hover-border-color: #f0a85a;
+  --el-button-active-bg-color: #e2862c;
+  --el-button-active-border-color: #e2862c;
+  transform: none;
 }
 
 .finance-page :deep(.el-button:not(.el-button--primary)) {
@@ -1130,6 +1187,7 @@ onBeforeUnmount(() => {
   --el-button-hover-bg-color: #f8fafc;
   --el-button-hover-border-color: var(--finance-border-strong);
   --el-button-hover-text-color: var(--finance-text);
+  transform: none;
 }
 
 .finance-page :deep(.el-table) {
@@ -1140,17 +1198,20 @@ onBeforeUnmount(() => {
   --el-table-text-color: var(--finance-text);
   --el-table-row-hover-bg-color: #f8fafc;
   --el-table-border-color: var(--finance-border);
+  border-radius: 8px;
 }
 
 .finance-page :deep(.el-table th.el-table__cell) {
   background: #f8fafc;
-  color: #475569;
+  color: #506179;
   font-size: 12px;
   font-weight: 800;
 }
 
 .finance-page :deep(.el-table td.el-table__cell) {
   border-bottom-color: #eef2f7;
+  padding-top: 13px;
+  padding-bottom: 13px;
 }
 
 .finance-page :deep(.el-table__inner-wrapper::before),
@@ -1161,6 +1222,31 @@ onBeforeUnmount(() => {
 .finance-page :deep(.el-tag) {
   border-radius: 4px;
   font-weight: 800;
+  padding-inline: 8px;
+}
+
+.finance-page :deep(.el-tag--success) {
+  --el-tag-bg-color: #edf9e9;
+  --el-tag-border-color: #edf9e9;
+  --el-tag-text-color: #42aa35;
+}
+
+.finance-page :deep(.el-tag--primary) {
+  --el-tag-bg-color: #e9f3ff;
+  --el-tag-border-color: #e9f3ff;
+  --el-tag-text-color: #4d9cff;
+}
+
+.finance-page :deep(.el-tag--warning) {
+  --el-tag-bg-color: #fff4e2;
+  --el-tag-border-color: #fff4e2;
+  --el-tag-text-color: #e3912d;
+}
+
+.finance-page :deep(.el-tag--danger) {
+  --el-tag-bg-color: #fff0f0;
+  --el-tag-border-color: #fff0f0;
+  --el-tag-text-color: var(--finance-red);
 }
 
 :global(.finance-compare-dialog) {
@@ -1224,6 +1310,10 @@ onBeforeUnmount(() => {
     grid-template-columns: 1fr;
   }
 
+  .metric-card strong {
+    font-size: 26px;
+  }
+
   .panel-header,
   .detail-header,
   .compare-grid {