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(() => ({ animationDuration: 500, @@ -263,7 +266,7 @@ const loginDurationChartOption = computed(() => ({ }, 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(() => ({ 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} 小时' }, }, ], }))