fix: make dashboard metrics display-only

This commit is contained in:
inman
2026-09-02 13:12:00 +08:00
parent d034f649c4
commit b1fe53386c
7 changed files with 82 additions and 45 deletions

View File

@@ -9,12 +9,21 @@ const [app, index, styles, taskService] = await Promise.all([
readFile(new URL('../control-plane/src/task-service.ts', import.meta.url), 'utf8')
]);
test('dashboard summary cards share one visual treatment and expose an accessible selected state', () => {
test('dashboard summary cards are uniform display-only totals and leave filtering to the explicit controls', () => {
const summaryRenderer = app.slice(
app.indexOf('function renderOperationsDashboardSummary()'),
app.indexOf('function operationsDashboardRankScale')
);
assert.match(app, /label: '操作次数'[^\n]+tone: 'total'/);
assert.doesNotMatch(app, /tone: 'primary'/);
assert.match(app, /card\.setAttribute\('aria-pressed', String\(isSelected\)\)/);
assert.match(summaryRenderer, /const card = el\('article', `operations-dashboard-stat operations-dashboard-stat-\$\{item\.tone\}`\)/);
assert.doesNotMatch(summaryRenderer, /selectedStatus|isSelected|operationsStatus|aria-pressed/);
assert.doesNotMatch(app, /\$\('#operationsDashboardSummary'\)\?\.addEventListener\('click'/);
assert.match(index, /<option value="all">全部结果<\/option>/);
assert.match(app, /function resetOperationsDashboardFilters\(\)[\s\S]*?\$\('#operationsDashboardStatus'\)\.value = 'all';/);
assert.match(styles, /\.operations-dashboard-summary\s*{[\s\S]*?grid-template-columns: repeat\(5, minmax\(0, 1fr\)\)/);
assert.match(styles, /\.operations-dashboard-stat\.is-active\s*{[\s\S]*?background: var\(--dashboard-accent-soft\);[\s\S]*?transform: none;/);
assert.doesNotMatch(styles, /\.operations-dashboard-stat\[data-operations-status\]/);
assert.doesNotMatch(styles, /\.operations-dashboard-stat\.is-active/);
assert.doesNotMatch(styles, /operations-dashboard-stat-primary/);
});

View File

@@ -1363,22 +1363,14 @@ function renderOperationsDashboardSummary() {
container.replaceChildren();
const summary = operationsDashboardData?.summary || {};
const cards = [
{ label: '操作次数', value: summary.total || 0, hint: '全部任务操作', status: 'all', tone: 'total' },
{ label: '成功次数', value: summary.completed || 0, hint: '已成功完成', status: 'completed', tone: 'success' },
{ label: '进行中', value: Number(summary.active || 0) + Number(summary.attention || 0), hint: '正在处理', status: 'active', tone: 'active' },
{ label: '未成功', value: summary.failed || 0, hint: '需要继续处理', status: 'failed', tone: 'failed' },
{ label: '操作员工', value: summary.user_count || 0, hint: '参与操作人数', status: '', tone: 'people' }
{ label: '操作次数', value: summary.total || 0, hint: '全部任务操作', tone: 'total' },
{ label: '成功次数', value: summary.completed || 0, hint: '已成功完成', tone: 'success' },
{ label: '进行中', value: Number(summary.active || 0) + Number(summary.attention || 0), hint: '正在处理', tone: 'active' },
{ label: '未成功', value: summary.failed || 0, hint: '需要继续处理', tone: 'failed' },
{ label: '操作员工', value: summary.user_count || 0, hint: '参与操作人数', tone: 'people' }
];
const selectedStatus = String($('#operationsDashboardStatus')?.value || 'all');
for (const item of cards) {
const isSelected = Boolean(item.status && selectedStatus === item.status);
const card = el(item.status ? 'button' : 'article', `operations-dashboard-stat operations-dashboard-stat-${item.tone}${isSelected ? ' is-active' : ''}`);
if (item.status) {
card.type = 'button';
card.dataset.operationsStatus = item.status;
card.setAttribute('aria-label', `${item.label}筛选任务`);
card.setAttribute('aria-pressed', String(isSelected));
}
const card = el('article', `operations-dashboard-stat operations-dashboard-stat-${item.tone}`);
card.append(el('span', '', item.label));
card.append(el('strong', '', String(item.value)));
card.append(el('small', '', item.hint));
@@ -5579,12 +5571,6 @@ document.addEventListener('DOMContentLoaded', async () => {
$('#operationsDashboardActor').value = button.dataset.operationsActorId || '';
refreshOperationsDashboardAfterDrilldown();
});
$('#operationsDashboardSummary')?.addEventListener('click', (event) => {
const button = event.target.closest('[data-operations-status]');
if (!button) return;
$('#operationsDashboardStatus').value = button.dataset.operationsStatus || 'all';
refreshOperationsDashboardAfterDrilldown();
});
$('#operationsDashboardBusinesses')?.addEventListener('click', (event) => {
const button = event.target.closest('[data-operations-business]');
if (!button?.dataset.operationsBusiness) return;

View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#edf2f4">
<title>AI操作台 · LianSyn-platform</title>
<link rel="stylesheet" href="styles.css?v=20260902-dashboard-mobile-share-1">
<link rel="stylesheet" href="styles.css?v=20260902-dashboard-metrics-static-1">
</head>
<body>
<main class="app-shell">
@@ -405,6 +405,6 @@
</section>
</main>
<script src="app.js?v=20260902-dashboard-mobile-share-1"></script>
<script src="app.js?v=20260902-dashboard-metrics-static-1"></script>
</body>
</html>

View File

@@ -3244,23 +3244,6 @@ textarea {
text-align: left;
}
.operations-dashboard-stat[data-operations-status] {
cursor: pointer;
}
.operations-dashboard-stat[data-operations-status]:not(.is-active):hover {
border-color: #8daf9f;
box-shadow: 0 9px 24px rgba(32, 79, 67, 0.09);
transform: translateY(-2px);
}
.operations-dashboard-stat.is-active {
border-color: var(--dashboard-accent);
background: var(--dashboard-accent-soft);
box-shadow: inset 0 0 0 1px var(--dashboard-accent), 0 9px 24px rgba(32, 79, 67, 0.09);
transform: none;
}
.operations-dashboard-stat > span {
color: var(--dashboard-muted);
font-size: 12px;