From 1bba83329134dc1a7572566fe67896420e7446c5 Mon Sep 17 00:00:00 2001 From: SmartUp Developer Date: Fri, 3 Jul 2026 23:57:52 +0800 Subject: [PATCH] Match finance dashboard dark design --- frontend/src/views/Finance.vue | 499 +++++++++++++++++---------------- 1 file changed, 252 insertions(+), 247 deletions(-) diff --git a/frontend/src/views/Finance.vue b/frontend/src/views/Finance.vue index 3445f3b..a4d5d4b 100644 --- a/frontend/src/views/Finance.vue +++ b/frontend/src/views/Finance.vue @@ -72,7 +72,7 @@
- 总收入 + 网站收入 (USD)
{{ formatAmount(summary.total_revenue) }} @@ -80,7 +80,7 @@
- 总消费 + 上游消费 (USD)
{{ formatAmount(summary.total_cost) }} @@ -88,7 +88,7 @@
- 净收入 + 净收入 (USD)
@@ -98,7 +98,7 @@
- {{ summary.partial ? '部分汇总' : '失败项' }} + {{ summary.partial ? '部分汇总' : '失败项（项）' }}
@@ -134,30 +134,14 @@
-

收入 / 消费明细

-

{{ filteredWebsiteItems.length }} 个收入项，{{ filteredUpstreamItems.length }} 个消费项

-
-
- - +

网站收入明细

+

{{ filteredWebsiteItems.length }} 个收入项

+ {{ filteredWebsiteItems.filter(i => i.status === 'success').length }}/{{ filteredWebsiteItems.length }} 成功
+
+
+
+
+
+

上游消费明细

+

{{ filteredUpstreamItems.length }} 个消费项

+
+ {{ filteredUpstreamItems.filter(i => i.status === 'success').length }}/{{ filteredUpstreamItems.length }} 成功 +
+ +
= [ - { value: 'day', label: '日' }, - { value: 'week', label: '周' }, - { value: 'month', label: '月' }, + { value: 'day', label: '按日查询' }, + { value: 'week', label: '按周查询' }, + { value: 'month', label: '按月查询' }, ] const period = ref('day') @@ -411,7 +406,6 @@ const comparing = ref(false) const overwriting = ref(false) const fetchError = ref(null) const summary = ref(null) -const activeTable = ref<'websites' | 'upstreams'>('websites') const compareDialogVisible = ref(false) const compareResult = ref(null) @@ -572,56 +566,56 @@ function renderTrendChart() { trendChart ??= echarts.init(trendChartRef.value) const labels = summary.value.chart.labels.map(label => label.slice(5)) trendChart.setOption({ - color: ['#22a884', '#f08a05'], - grid: { left: 10, right: 18, top: 28, bottom: 10, containLabel: true }, + color: ['#f4a01f', '#ff4d4f'], + grid: { left: 10, right: 20, top: 34, bottom: 12, containLabel: true }, tooltip: { trigger: 'axis', - backgroundColor: '#ffffff', - borderColor: '#dbe4ef', + backgroundColor: '#17110f', + borderColor: 'rgba(245, 158, 11, 0.35)', borderWidth: 1, - textStyle: { color: '#142033', fontSize: 12 }, + textStyle: { color: '#f5ede5', fontSize: 12 }, valueFormatter: (value: number) => formatAmount(value), }, legend: { top: 0, - right: 0, - icon: 'circle', - itemWidth: 9, - itemHeight: 9, - textStyle: { color: '#65758b', fontSize: 12, fontWeight: 600 }, - data: ['收入', '消费'], + left: 'center', + icon: 'rect', + itemWidth: 32, + itemHeight: 8, + textStyle: { color: '#8f7c6d', fontSize: 12, fontWeight: 700 }, + data: ['网站总收入 (USD)', '上游总消费 (USD)'], }, xAxis: { type: 'category', boundaryGap: false, data: labels, - axisLine: { lineStyle: { color: '#e8eef6' } }, + axisLine: { lineStyle: { color: 'rgba(218, 183, 142, 0.14)' } }, axisTick: { show: false }, - axisLabel: { color: '#73839a', fontSize: 12 }, + axisLabel: { color: '#74665b', fontSize: 12 }, }, yAxis: { type: 'value', - axisLabel: { color: '#73839a', fontSize: 12, formatter: (value: number) => `$${value}` }, - splitLine: { lineStyle: { color: '#edf2f7' } }, + axisLabel: { color: '#74665b', fontSize: 12, formatter: (value: number) => `${value}` }, + splitLine: { lineStyle: { color: 'rgba(218, 183, 142, 0.10)' } }, }, series: [ { - name: '收入', + name: '网站总收入 (USD)', type: 'line', smooth: true, symbolSize: 7, data: summary.value.chart.revenue, - areaStyle: { color: 'rgba(34, 168, 132, 0.12)' }, - lineStyle: { width: 3 }, + areaStyle: { color: 'rgba(244, 160, 31, 0.18)' }, + lineStyle: { width: 2.5 }, }, { - name: '消费', + name: '上游总消费 (USD)', type: 'line', smooth: true, symbolSize: 7, data: summary.value.chart.cost, - areaStyle: { color: 'rgba(240, 138, 5, 0.11)' }, - lineStyle: { width: 3 }, + areaStyle: { color: 'rgba(255, 77, 79, 0.16)' }, + lineStyle: { width: 2.5 }, }, ], }) @@ -634,13 +628,13 @@ function renderShareChart() { .filter(item => item.amount > 0) .map(item => ({ name: item.name, value: Number(item.amount.toFixed(6)) })) shareChart.setOption({ - color: ['#22a884', '#2f69e8', '#e87d04', '#9b42e8', '#dc4b4b', '#0b9bb0'], + color: ['#f4a01f', '#ff4d4f', '#3b82f6', '#10b981', '#a855f7', '#06b6d4'], tooltip: { trigger: 'item', - backgroundColor: '#ffffff', - borderColor: '#dbe4ef', + backgroundColor: '#17110f', + borderColor: 'rgba(245, 158, 11, 0.35)', borderWidth: 1, - textStyle: { color: '#142033', fontSize: 12 }, + textStyle: { color: '#f5ede5', fontSize: 12 }, formatter: (params: any) => `${params.name}
${formatAmount(params.value)} (${params.percent}%)`, }, legend: { @@ -649,20 +643,20 @@ function renderShareChart() { icon: 'circle', itemWidth: 9, itemHeight: 9, - textStyle: { color: '#65758b', fontSize: 12, fontWeight: 600 }, + textStyle: { color: '#a99583', fontSize: 12, fontWeight: 700 }, }, series: [ { name: '上游消费', type: 'pie', - radius: ['52%', '72%'], + radius: ['48%', '70%'], center: ['50%', '42%'], avoidLabelOverlap: true, minAngle: 4, label: { - color: '#536276', + color: '#a99583', fontSize: 12, - fontWeight: 600, + fontWeight: 700, formatter: '{b}\n{d}%', }, labelLine: { @@ -671,10 +665,10 @@ function renderShareChart() { lineStyle: { width: 1.4 }, }, itemStyle: { - borderColor: '#fff', + borderColor: '#120d0b', borderWidth: 3, }, - data: data.length ? data : [{ name: '暂无消费', value: 1, itemStyle: { color: '#e2e8f0' } }], + data: data.length ? data : [{ name: '暂无消费', value: 1, itemStyle: { color: '#2a201b' } }], }, ], }) @@ -772,18 +766,20 @@ onBeforeUnmount(() => {