From 7d5b345779db69cb7b7dd8581879b1a3b2538d69 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <leocaoxiaozhu@gmail.com>
Date: Thu, 16 Jul 2026 11:20:30 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=99=BB=E5=BD=95=E6=97=B6=E9=95=BF?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=BD=B4=E4=B8=8A=E9=99=90=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E4=B8=8E=E6=A0=87=E7=AD=BE=E5=A4=96=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

横轴上限提取为 loginDurationAxisMax 常量，标签位置统一回到柱体右侧灰色展示，回归断言同步。
---
 frontend/scripts/regression-dashboard.mjs      | 3 ++-
 frontend/src/views/dashboard/DashboardView.vue | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/scripts/regression-dashboard.mjs b/frontend/scripts/regression-dashboard.mjs
index aad453e..09b529d 100644
--- a/frontend/scripts/regression-dashboard.mjs
+++ b/frontend/scripts/regression-dashboard.mjs
@@ -54,7 +54,8 @@ assert.match(dashboardSource, /class=["']user-stats-row["'][\s\S]*?用户操作
 assert.match(dashboardSource, /class=["']duration-chart["'][\s\S]*?loginDurationChartOption/, '登录时长应使用 ECharts 图表展示')
 assert.match(dashboardSource, /const loginDurationChartOption[\s\S]*?type:\s*['"]bar['"][\s\S]*?formatter:\s*['"]\{c\} 小时['"]/, '登录时长应以横向柱状图展示具体小时数')
 assert.match(dashboardSource, /const operationChartOption[\s\S]*?position:\s*['"]outside['"][\s\S]*?labelLine:\s*\{[\s\S]*?show:\s*true/, '饼图应以外侧引导线标注操作名称')
-assert.match(dashboardSource, /const loginDurationChartOption[\s\S]*?grid:\s*\{\s*top:\s*8,\s*right:\s*12,\s*bottom:\s*6,\s*left:\s*8,[\s\S]*?max:\s*Math\.ceil\(Math\.max[\s\S]*?position:\s*['"]insideRight['"]/, '登录时长图应收紧左右边距、按数据范围拉伸，并将数值置于柱内')
+assert.match(dashboardSource, /const loginDurationAxisMax\s*=\s*Math\.ceil\([\s\S]*?Math\.max/, '登录时长图应按数据范围计算横轴上限')
+assert.match(dashboardSource, /const loginDurationChartOption[\s\S]*?position:\s*['"]right['"][\s\S]*?formatter:\s*['"]\{c\} 小时['"]/, '登录时长标签应统一显示在柱体外侧')
 assert.match(dashboardSource, /\.user-stats-row\s*\{[\s\S]*?repeat\(3,\s*minmax\(0,\s*1fr\)\)/, '宽屏用户统计卡片应保持三列')
 assert.match(dashboardSource, /@media\s*\(max-width:\s*1180px\)[\s\S]*?\.user-stats-row\s*\{[\s\S]*?repeat\(2,\s*minmax\(0,\s*1fr\)\)/, '中等宽度应将用户统计卡片降为两列')
 assert.match(dashboardSource, /@media\s*\(max-width:\s*720px\)[\s\S]*?\.user-stats-row\s*\{[\s\S]*?grid-template-columns:\s*1fr;/, '窄屏应将用户统计卡片降为单列')
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index 23495fc..30d3ba9 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -252,6 +252,9 @@ const loginDurationStats: LoginDurationStat[] = [
   { id: 3, username: 'lisi', duration: 42 },
   { id: 4, username: 'wangwu', duration: 18 },
 ]
+const loginDurationAxisMax = Math.ceil(
+  Math.max(...loginDurationStats.map((user) => user.duration)) * 1.15 / 10,
+) * 10
 
 const loginDurationChartOption = computed<EChartsOption>(() => ({
   animationDuration: 500,
@@ -263,7 +266,7 @@ const loginDurationChartOption = computed<EChartsOption>(() => ({
   },
   xAxis: {
     type: 'value',
-    max: Math.ceil(Math.max(...loginDurationStats.map((user) => user.duration)) * 1.15 / 10) * 10,
+    max: loginDurationAxisMax,
     splitNumber: 4,
     axisLabel: { color: '#94a3b8', fontSize: 11, formatter: '{value}h' },
     axisLine: { show: false },
@@ -286,7 +289,7 @@ const loginDurationChartOption = computed<EChartsOption>(() => ({
       barMaxWidth: 18,
       barCategoryGap: '34%',
       itemStyle: { color: '#4f46e5', borderRadius: [0, 4, 4, 0] },
-      label: { show: true, position: 'insideRight', distance: 6, color: '#ffffff', fontSize: 11, formatter: '{c} 小时' },
+      label: { show: true, position: 'right', distance: 6, color: '#475569', fontSize: 11, formatter: '{c} 小时' },
     },
   ],
 }))