diff --git a/frontend/scripts/regression-dashboard.mjs b/frontend/scripts/regression-dashboard.mjs index 759be26..aad453e 100644 --- a/frontend/scripts/regression-dashboard.mjs +++ b/frontend/scripts/regression-dashboard.mjs @@ -48,8 +48,8 @@ assert.match(dashboardSource, /grid-template-columns:\s*minmax\(0,\s*1\.9fr\)\s* assert.match(dashboardSource, /\.training-chart\s*\{[\s\S]*?height:\s*300px;[\s\S]*?min-height:\s*300px;/, '训练统计图应保持舒展、稳定的展示高度') assert.match(dashboardSource, /\.service-table\s*\{[\s\S]*?grid-template-rows:[^;]*repeat\(4,\s*minmax\(48px,\s*1fr\)\)/, '服务状态行应随中间区域同步拉伸') assert.match(dashboardSource, /\.tasks-heading\s*\{[\s\S]*?min-height:\s*32px;[\s\S]*?padding:\s*0 14px 10px;/, '训练任务标题区应适当加高') -assert.match(dashboardSource, /\.tasks-table\s*\{[\s\S]*?th,\s*td\s*\{[\s\S]*?height:\s*42px;[\s\S]*?th\s*\{[\s\S]*?height:\s*36px;/, '训练任务表格行应适当加高') -assert.match(dashboardSource, /@media\s*\(max-height:\s*900px\)[\s\S]*?\.tasks-heading\s*\{[\s\S]*?min-height:\s*28px;[\s\S]*?padding:\s*0 12px 8px;[\s\S]*?\.tasks-table\s*\{[\s\S]*?height:\s*36px;[\s\S]*?th\s*\{[\s\S]*?height:\s*32px;/, '低高度桌面视口也应提高训练任务占比') +assert.match(dashboardSource, /\.tasks-table\s*\{[\s\S]*?th,\s*td\s*\{[\s\S]*?height:\s*50px;[\s\S]*?th\s*\{[\s\S]*?height:\s*38px;/, '训练任务表格正文行应保持舒展') +assert.match(dashboardSource, /@media\s*\(max-height:\s*900px\)[\s\S]*?\.tasks-heading\s*\{[\s\S]*?min-height:\s*28px;[\s\S]*?padding:\s*0 12px 8px;[\s\S]*?\.tasks-table\s*\{[\s\S]*?height:\s*42px;[\s\S]*?th\s*\{[\s\S]*?height:\s*34px;/, '低高度桌面视口也应保留可读的训练任务行高') assert.match(dashboardSource, /class=["']user-stats-row["'][\s\S]*?用户操作分布[\s\S]*?登录时长排行[\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\} 小时['"]/, '登录时长应以横向柱状图展示具体小时数') diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue index 2fe514f..ded45f6 100644 --- a/frontend/src/views/dashboard/DashboardView.vue +++ b/frontend/src/views/dashboard/DashboardView.vue @@ -253,7 +253,7 @@ const loginDurationStats: LoginDurationStat[] = [ const loginDurationChartOption = computed(() => ({ animationDuration: 500, - grid: { top: 8, right: 40, bottom: 6, left: 8, containLabel: true }, + grid: { top: 8, right: 60, bottom: 6, left: 8, containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, @@ -261,7 +261,7 @@ const loginDurationChartOption = computed(() => ({ }, xAxis: { type: 'value', - max: Math.ceil(Math.max(...loginDurationStats.map((user) => user.duration)) / 10) * 10, + max: Math.ceil(Math.max(...loginDurationStats.map((user) => user.duration)) * 1.15 / 10) * 10, splitNumber: 4, axisLabel: { color: '#94a3b8', fontSize: 11, formatter: '{value}h' }, axisLine: { show: false }, @@ -284,7 +284,7 @@ const loginDurationChartOption = computed(() => ({ barMaxWidth: 18, barCategoryGap: '34%', itemStyle: { color: '#4f46e5', borderRadius: [0, 4, 4, 0] }, - label: { show: true, position: 'right', distance: 8, color: '#64748b', fontSize: 11, formatter: '{c} 小时' }, + label: { show: true, position: 'insideRight', distance: 6, color: '#ffffff', fontSize: 11, formatter: '{c} 小时' }, }, ], })) @@ -798,8 +798,8 @@ function viewTask(task: DashboardTask) { th, td { - height: 42px; - padding: 6px 10px; + height: 50px; + padding: 8px 10px; border-top: 1px solid #eef2f7; text-align: left; vertical-align: middle; @@ -807,7 +807,7 @@ function viewTask(task: DashboardTask) { } th { - height: 36px; + height: 38px; background: #f8fafc; color: #475569; font-weight: 600; @@ -925,12 +925,12 @@ function viewTask(task: DashboardTask) { .tasks-table { th, td { - height: 36px; - padding: 4px 8px; + height: 42px; + padding: 6px 8px; } th { - height: 32px; + height: 34px; } } }