style: 登录时长图表轴上限提取与标签外置
横轴上限提取为 loginDurationAxisMax 常量,标签位置统一回到柱体右侧灰色展示,回归断言同步。
This commit is contained in:
@@ -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;/, '窄屏应将用户统计卡片降为单列')
|
||||||
|
|||||||
@@ -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} 小时' },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}))
|
}))
|
||||||
|
|||||||
Reference in New Issue
Block a user