style: 登录时长图表轴上限提取与标签外置

横轴上限提取为 loginDurationAxisMax 常量,标签位置统一回到柱体右侧灰色展示,回归断言同步。
This commit is contained in:
caoxiaozhu
2026-07-16 11:20:30 +08:00
parent 4173b53b1b
commit 7d5b345779
2 changed files with 7 additions and 3 deletions

View File

@@ -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, /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 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 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, /\.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*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;/, '窄屏应将用户统计卡片降为单列') assert.match(dashboardSource, /@media\s*\(max-width:\s*720px\)[\s\S]*?\.user-stats-row\s*\{[\s\S]*?grid-template-columns:\s*1fr;/, '窄屏应将用户统计卡片降为单列')

View File

@@ -252,6 +252,9 @@ const loginDurationStats: LoginDurationStat[] = [
{ id: 3, username: 'lisi', duration: 42 }, { id: 3, username: 'lisi', duration: 42 },
{ id: 4, username: 'wangwu', duration: 18 }, { 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>(() => ({ const loginDurationChartOption = computed<EChartsOption>(() => ({
animationDuration: 500, animationDuration: 500,
@@ -263,7 +266,7 @@ const loginDurationChartOption = computed<EChartsOption>(() => ({
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
max: Math.ceil(Math.max(...loginDurationStats.map((user) => user.duration)) * 1.15 / 10) * 10, max: loginDurationAxisMax,
splitNumber: 4, splitNumber: 4,
axisLabel: { color: '#94a3b8', fontSize: 11, formatter: '{value}h' }, axisLabel: { color: '#94a3b8', fontSize: 11, formatter: '{value}h' },
axisLine: { show: false }, axisLine: { show: false },
@@ -286,7 +289,7 @@ const loginDurationChartOption = computed<EChartsOption>(() => ({
barMaxWidth: 18, barMaxWidth: 18,
barCategoryGap: '34%', barCategoryGap: '34%',
itemStyle: { color: '#4f46e5', borderRadius: [0, 4, 4, 0] }, 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} 小时' },
}, },
], ],
})) }))