From 001659ed9194ab177b14bf87f8d57752f85cce4f Mon Sep 17 00:00:00 2001 From: chick Date: Tue, 8 Sep 2026 19:58:10 +0800 Subject: [PATCH] style(web): unify panel, group and state controls Standardize panel actions, group filters, segmented modes, workbench tabs, message filters, identity controls and privacy toggles on the shared button scale. Add cascade-aware tests so stale compact sizes and low-contrast states cannot return. --- apps/web/src/audit/audit-page.tsx | 2 +- apps/web/src/fleet/fleet-page.test.tsx | 11 + apps/web/src/fleet/fleet-page.tsx | 1 - apps/web/src/jobs/jobs-page.tsx | 3 +- .../src/settings/instance-settings-page.tsx | 4 +- apps/web/src/styles.css | 218 ++++++++++-------- apps/web/src/ui/button-system.test.ts | 111 +++++++-- 7 files changed, 237 insertions(+), 113 deletions(-) diff --git a/apps/web/src/audit/audit-page.tsx b/apps/web/src/audit/audit-page.tsx index a00ceda..1dd08af 100644 --- a/apps/web/src/audit/audit-page.tsx +++ b/apps/web/src/audit/audit-page.tsx @@ -288,7 +288,7 @@ export function AuditPage({ dataSource, refreshSignal = 0 }: AuditPageProps) {

审计

只读运维审计事件。

- diff --git a/apps/web/src/fleet/fleet-page.test.tsx b/apps/web/src/fleet/fleet-page.test.tsx index c608842..a89d5fc 100644 --- a/apps/web/src/fleet/fleet-page.test.tsx +++ b/apps/web/src/fleet/fleet-page.test.tsx @@ -420,6 +420,17 @@ describe('FleetPage search and filter toolbar', () => { }); describe('FleetPage batch and restart actions', () => { + it('keeps top-level create and batch actions on the same control scale', () => { + render(); + + const create = screen.getByRole('link', { name: '添加实例' }); + const batch = screen.getByRole('button', { name: '批量选择' }); + + expect(create.classList.contains('primary-action')).toBe(true); + expect(batch.classList.contains('animal-btn-small')).toBe(false); + expect(batch.className).toMatch(/animal-btn-middle-[A-Za-z0-9]+/); + }); + it('keeps selection controls hidden until batch-selection mode is entered', () => { render(); expect(screen.queryByRole('checkbox', { name: /选择 Alpha modem/ })).toBeNull(); diff --git a/apps/web/src/fleet/fleet-page.tsx b/apps/web/src/fleet/fleet-page.tsx index 27fe156..8b75282 100644 --- a/apps/web/src/fleet/fleet-page.tsx +++ b/apps/web/src/fleet/fleet-page.tsx @@ -984,7 +984,6 @@ export function FleetPage({ ) : null} {canReconcile ? ( - ) : null} diff --git a/apps/web/src/settings/instance-settings-page.tsx b/apps/web/src/settings/instance-settings-page.tsx index d623a93..a6a6756 100644 --- a/apps/web/src/settings/instance-settings-page.tsx +++ b/apps/web/src/settings/instance-settings-page.tsx @@ -204,7 +204,9 @@ export function InstanceSettingsPage({ 实例 - 添加实例 + + 添加实例 + {unavailable ? ( diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index 790cafa..2f3e199 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -376,7 +376,7 @@ code { gap: 0.4rem; padding: 0.4rem 0.7rem; color: #aebdd0; - border-radius: 7px; + border-radius: var(--button-radius-compact); text-decoration: none; font-size: 0.82rem; font-weight: 700; @@ -680,7 +680,7 @@ button.fleet-cross-health-item { position: absolute; right: 0.28rem; top: 50%; - min-height: 2rem; + min-height: var(--button-height-compact); padding: 0.25rem 0.55rem; transform: translateY(-50%); font-size: 0.75rem; @@ -1443,12 +1443,23 @@ button.fleet-cross-health-item { white-space: nowrap; } .maintenance-backup-actions a { - color: var(--workbench-mint); - font-size: 0.78rem; - font-weight: 800; + min-height: var(--button-height-compact); + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.3rem 0.7rem; + color: var(--button-secondary-text); + border: 1px solid var(--button-secondary-border); + border-radius: var(--button-radius-compact); + background: var(--button-secondary-bg); + font-size: 0.76rem; + font-weight: 750; + text-decoration: none; } .maintenance-backup-actions a:hover { - text-decoration: underline; + color: var(--button-secondary-hover-text); + border-color: var(--button-secondary-hover-border); + background: var(--button-secondary-hover-bg); } .dense-table code { color: var(--muted); @@ -1920,12 +1931,12 @@ button.fleet-cross-health-item { list-style: none; } .instance-context nav a { - min-height: 2.4rem; + min-height: var(--button-height); display: inline-flex; align-items: center; padding: 0.5rem 0.7rem; color: #95a9be; - border-radius: 7px 7px 0 0; + border-radius: var(--button-radius-compact) var(--button-radius-compact) 0 0; text-decoration: none; font-size: 0.78rem; font-weight: 800; @@ -2324,7 +2335,7 @@ dd { letter-spacing: 0.02em; } .dense-table th button { - min-height: 1.8rem; + min-height: var(--button-height-compact); padding: 0.2rem 0.35rem; border: 0; background: transparent; @@ -3013,13 +3024,15 @@ a.primary-action:active { } .workbench-tabs button { - min-height: 2.75rem; - padding: 0 0.85rem; + min-height: var(--button-height-large); + padding: 0 0.75rem; border: 0; border-bottom: 2px solid transparent; + border-radius: var(--button-radius-compact) var(--button-radius-compact) 0 0; color: var(--workbench-muted); background: transparent; font: inherit; + font-size: 0.8rem; font-weight: 700; cursor: pointer; } @@ -3364,20 +3377,20 @@ a.icon-button:hover { .segmented-control button { flex: 1 1 0; min-height: var(--button-height-compact); - padding: 0.3rem 0.5rem; + padding: 0.3rem 0.7rem; border: 1px solid transparent; border-radius: var(--button-radius-compact); - color: var(--workbench-muted); + color: var(--button-secondary-text); background: transparent; font: inherit; - font-size: 0.78rem; - font-weight: 700; + font-size: 0.76rem; + font-weight: 750; cursor: pointer; } .segmented-control button.is-active { - border-color: var(--workbench-border-strong); - color: var(--workbench-text); - background: #fff; + border-color: var(--button-secondary-border); + color: var(--button-secondary-text); + background: var(--button-secondary-bg); } .segmented-control button:focus-visible { outline: 3px solid var(--button-focus-ring); @@ -3525,21 +3538,23 @@ a.icon-button:hover { } .organization-add { display: inline-flex; - gap: 0.3rem; + gap: 0.35rem; align-items: center; - min-height: 2.1rem; - padding: 0 0.7rem; + min-height: var(--button-height-compact); + padding: 0.3rem 0.7rem; border: 1px solid var(--workbench-border-strong); - border-radius: 999px; - color: var(--workbench-text); - background: #fff; + border-radius: var(--button-radius-compact); + color: var(--button-secondary-text); + background: var(--button-secondary-bg); font: inherit; - font-size: 0.75rem; - font-weight: 700; + font-size: 0.76rem; + font-weight: 750; cursor: pointer; } .organization-add:hover { - border-color: var(--workbench-mint); + color: var(--button-secondary-hover-text); + border-color: var(--button-secondary-hover-border); + background: var(--button-secondary-hover-bg); } .organization-add svg { width: 0.85rem; @@ -3754,16 +3769,21 @@ a.icon-button:hover { align-items: center; justify-content: center; gap: 0.35rem; - padding: 0.3rem 0.8rem; - border: 1px solid var(--workbench-border-strong); + padding: 0.3rem 0.7rem; + border: 1px solid var(--button-secondary-border); border-radius: var(--button-radius-compact); - color: var(--workbench-text); - background: #fff; + color: var(--button-secondary-text); + background: var(--button-secondary-bg); font: inherit; - font-size: 0.75rem; - font-weight: 700; + font-size: 0.76rem; + font-weight: 750; cursor: pointer; } +.identity-actions button:hover:not(:disabled) { + color: var(--button-secondary-hover-text); + border-color: var(--button-secondary-hover-border); + background: var(--button-secondary-hover-bg); +} .identity-actions button:disabled { color: var(--button-disabled-text); border-color: var(--button-disabled-border); @@ -4237,10 +4257,18 @@ button:not([class*='animal-']):hover:not(:disabled) { button[type='submit']:not([class*='animal-']), button.primary-action, a.primary-action { + min-height: var(--button-height); + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.45rem 0.9rem; color: var(--button-primary-text); border-color: var(--button-primary-bg); border-radius: var(--button-radius); background: var(--button-primary-bg); + font-size: 0.82rem; + font-weight: 750; + text-decoration: none; box-shadow: 0 3px 0 var(--button-primary-active); } @@ -4969,7 +4997,7 @@ main > section > header h1, } .fleet-card-admin-actions button { - min-height: 2.35rem; + min-height: var(--button-height-compact); transition: transform 100ms ease-out, opacity 100ms ease-out, @@ -5342,7 +5370,7 @@ svg { } .primary-action, .fleet-card-admin-actions button { - gap: 0.38rem; + gap: 0.4rem; } .primary-action svg, .fleet-card-admin-actions button svg { @@ -5708,11 +5736,13 @@ svg { .fleet-group-tabs button:hover:not(:disabled) { min-height: var(--button-height-compact); flex: 0 0 auto; - padding: 0 0.72rem; + padding: 0.3rem 0.7rem; border: 1px solid transparent; - border-radius: 8px; - color: var(--workbench-muted); + border-radius: var(--button-radius-compact); + color: var(--button-secondary-text); background: transparent; + font-size: 0.76rem; + font-weight: 750; box-shadow: none; transform: none; transition: @@ -5722,40 +5752,42 @@ svg { } .fleet-group-tabs button:hover:not(:disabled) { - color: var(--workbench-text); - background: var(--workbench-surface-muted); + color: var(--button-secondary-hover-text); + border-color: var(--button-secondary-hover-border); + background: var(--button-secondary-hover-bg); } .fleet-group-tabs button.is-active, .fleet-group-tabs button.is-active:hover:not(:disabled) { - color: #116f67; - border-color: #b7ded4; + color: var(--button-primary-hover); + border-color: var(--button-primary-bg); background: var(--workbench-mint-soft); } .fleet-group-count { margin-left: 0.35rem; padding: 0 0.32rem; border-radius: 999px; - color: var(--workbench-muted); + color: var(--button-secondary-text); background: var(--workbench-surface-muted); font-size: 0.68rem; - font-weight: 700; + font-weight: 750; } .fleet-group-tabs button.is-active .fleet-group-count { - color: #116f67; - background: #fff; + color: var(--button-primary-hover); + background: var(--button-secondary-bg); } .fleet-group-manage, .fleet-group-manage:hover:not(:disabled) { display: inline-flex; - gap: 0.3rem; + gap: 0.35rem; align-items: center; margin-left: auto; border-style: dashed; border-color: var(--workbench-border-strong); - color: var(--workbench-text); - background: #fff; - font-size: 0.75rem; + color: var(--button-secondary-text); + background: var(--button-secondary-bg); + font-size: 0.76rem; + font-weight: 750; } .fleet-group-manage svg { width: 0.85rem; @@ -6452,11 +6484,6 @@ button.fleet-card-menu-trigger:focus-visible { .fleet-status-summary-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } - - .fleet-group-tabs button, - .fleet-group-tabs button:hover:not(:disabled) { - min-height: 2.75rem; - } } @media (max-width: 70rem) { @@ -6627,16 +6654,16 @@ button.fleet-card-menu-trigger:focus-visible { .fleet-phone-privacy-toggle:active:not(:disabled) { position: relative; display: grid; - width: 2.5rem; - height: 2.5rem; - min-height: 2.5rem; - flex: 0 0 2.5rem; + width: var(--icon-button-size); + height: var(--icon-button-size); + min-height: var(--icon-button-size); + flex: 0 0 var(--icon-button-size); place-items: center; padding: 0; border: 1px solid var(--workbench-border); - border-radius: 8px; + border-radius: var(--button-radius); color: var(--workbench-muted); - background: #fffef9; + background: var(--button-secondary-bg); box-shadow: none; transform: none; } @@ -6648,13 +6675,13 @@ button.fleet-card-menu-trigger:focus-visible { } .fleet-phone-privacy-toggle:hover:not(:disabled) { - color: var(--workbench-text); - border-color: var(--workbench-border-strong); - background: #fff; + color: var(--button-secondary-hover-text); + border-color: var(--button-secondary-hover-border); + background: var(--button-secondary-hover-bg); } .fleet-phone-privacy-toggle[aria-pressed='true'] { - color: var(--workbench-mint); + color: var(--button-primary-hover); border-color: var(--workbench-mint-border); background: var(--workbench-mint-soft); } @@ -6737,27 +6764,29 @@ button.fleet-card-menu-trigger:focus-visible { padding: 0 0 0.55rem; } .fleet-messages-filter-chip { + min-height: var(--button-height-compact); display: inline-flex; align-items: center; gap: 0.3rem; - padding: 0.24rem 0.6rem; + padding: 0.3rem 0.7rem; border: 1px solid var(--workbench-border); border-radius: 999px; - background: var(--workbench-surface); - color: var(--workbench-muted); + color: var(--button-secondary-text); + background: var(--button-secondary-bg); font: inherit; - font-size: 0.7rem; + font-size: 0.76rem; font-weight: 750; cursor: pointer; } .fleet-messages-filter-chip:hover { - border-color: var(--workbench-border-strong); - color: var(--workbench-text); + color: var(--button-secondary-hover-text); + border-color: var(--button-secondary-hover-border); + background: var(--button-secondary-hover-bg); } .fleet-messages-filter-chip[aria-pressed='true'] { - border-color: var(--workbench-mint); + color: var(--button-primary-hover); + border-color: var(--button-primary-bg); background: var(--workbench-mint-soft); - color: var(--workbench-mint); } .fleet-messages-layout { display: grid; @@ -6792,7 +6821,7 @@ button.fleet-card-menu-trigger:focus-visible { justify-content: space-between; gap: 0.5rem; width: 100%; - min-height: 2.3rem; + min-height: var(--button-height-compact); padding: 0.45rem 0.55rem; border: 1px solid var(--workbench-border-strong); border-radius: var(--button-radius-compact); @@ -7202,17 +7231,17 @@ button.fleet-card-menu-trigger:focus-visible { display: inline-flex; align-items: center; justify-content: center; - gap: 0.4rem; + gap: 0.35rem; min-height: var(--button-height-compact); min-width: 8.2rem; - padding: 0.4rem 0.65rem; + padding: 0.3rem 0.7rem; border: 1px solid var(--button-danger-bg); border-radius: var(--button-radius-compact); - color: var(--workbench-danger); - background: var(--workbench-danger-soft); + color: var(--button-danger-text); + background: var(--button-danger-bg); font: inherit; - font-size: 0.72rem; - font-weight: 800; + font-size: 0.76rem; + font-weight: 750; cursor: pointer; } .fleet-messages-delete svg { @@ -7421,13 +7450,13 @@ button.fleet-card-menu-trigger:focus-visible { display: inline-flex; align-items: center; gap: 0.35rem; - padding: 0.3rem 0.65rem; + padding: 0.3rem 0.7rem; border: 1px solid var(--button-primary-bg); border-radius: var(--button-radius-compact); color: var(--workbench-mint); background: var(--workbench-mint-soft); - font-size: 0.68rem; - font-weight: 800; + font-size: 0.76rem; + font-weight: 750; } .fleet-notifications-retry-all:hover:not(:disabled) { border-color: var(--button-primary-hover); @@ -7521,33 +7550,34 @@ button.fleet-card-menu-trigger:focus-visible { gap: 0.8rem; } .fleet-switch { - min-height: 2.75rem; + min-height: var(--button-height-compact); display: inline-flex; align-items: center; - gap: 0.4rem; - padding: 0.45rem 0.85rem; + gap: 0.35rem; + padding: 0.3rem 0.7rem; border: 1px solid var(--workbench-border-strong); border-radius: var(--button-radius-compact); - color: var(--workbench-muted); - background: var(--workbench-surface-muted); + color: var(--button-secondary-text); + background: var(--button-secondary-bg); font: inherit; - font-size: 0.78rem; - font-weight: 800; + font-size: 0.76rem; + font-weight: 750; letter-spacing: 0; cursor: pointer; } .fleet-switch:hover { - border-color: var(--workbench-mint); - color: var(--workbench-text); + color: var(--button-secondary-hover-text); + border-color: var(--button-secondary-hover-border); + background: var(--button-secondary-hover-bg); } .fleet-switch svg { width: 1.05rem; height: 1.05rem; } .fleet-switch[aria-pressed='true'] { - border-color: var(--workbench-mint); + border-color: var(--button-primary-bg); background: var(--workbench-mint-soft); - color: var(--workbench-mint); + color: var(--button-primary-hover); } .fleet-rate-limit-grid { display: grid; diff --git a/apps/web/src/ui/button-system.test.ts b/apps/web/src/ui/button-system.test.ts index 98292a8..edd1a8a 100644 --- a/apps/web/src/ui/button-system.test.ts +++ b/apps/web/src/ui/button-system.test.ts @@ -28,7 +28,7 @@ function collectRules(css: string, rules: Rule[] = []): Rule[] { index += 1; continue; } - const selector = css.slice(preludeStart, index).trim(); + const prelude = css.slice(preludeStart, index).trim(); let cursor = index + 1; let depth = 1; while (cursor < css.length && depth > 0) { @@ -37,10 +37,13 @@ function collectRules(css: string, rules: Rule[] = []): Rule[] { cursor += 1; } const body = css.slice(index + 1, cursor - 1); - if (selector.startsWith('@')) { + if (prelude.startsWith('@')) { collectRules(body, rules); - } else if (selector) { - rules.push({ selector, declarations: parseDeclarations(body) }); + } else if (prelude) { + for (const selector of prelude.split(',')) { + const trimmed = selector.replace(/\s+/g, ' ').trim(); + if (trimmed) rules.push({ selector: trimmed, declarations: parseDeclarations(body) }); + } } preludeStart = cursor; index = cursor; @@ -75,9 +78,8 @@ async function loadStylesheet() { return value.replace(/var\((--[a-z0-9-]+)\)/gi, (_, name: string) => tokens[name] ?? ''); }; const exact = (selector: string, property: string) => - rules.filter((rule) => rule.selector.replace(/\s+/g, ' ') === selector).at(-1)?.declarations[ - property - ]; + rules.find((rule) => rule.selector === selector && rule.declarations[property] !== undefined) + ?.declarations[property]; return { rules, tokens, wins, resolve, exact }; } @@ -155,13 +157,14 @@ describe('button system', () => { expect(tokens['--field-radius']).toBe('10px'); expect(tokens['--field-border']).toBe('var(--line-strong)'); expect(tokens['--field-focus-border']).toBe('var(--button-focus-ring)'); - expect(exact('button, input, select, textarea', 'border')).toBe( - '1px solid var(--field-border)', - ); - expect(exact('button, input, select, textarea', 'background')).toBe('var(--field-bg)'); - expect(exact('input:focus, select:focus, textarea:focus', 'border-color')).toBe( - 'var(--field-focus-border)', - ); + for (const selector of ['button', 'input', 'select', 'textarea']) { + expect(exact(selector, 'border')).toBe('1px solid var(--field-border)'); + expect(exact(selector, 'background')).toBe('var(--field-bg)'); + } + + for (const selector of ['input:focus', 'select:focus', 'textarea:focus']) { + expect(exact(selector, 'border-color')).toBe('var(--field-focus-border)'); + } }); it('normalises semantic surfaces in notification, log and message centres', async () => { @@ -252,6 +255,86 @@ describe('button system', () => { expect(stale).toEqual([]); }); + it('keeps primitive actions aligned with the standard text-button scale', async () => { + const { rules, wins } = await loadStylesheet(); + const standardControls = [ + '.instance-context nav a', + '.dense-table th button', + '.organization-add', + '.fleet-card-admin-actions button', + '.fleet-messages-device-item', + '.maintenance-backup-actions a', + ]; + const stale = rules + .filter((rule) => + standardControls.some((selector) => rule.selector.replace(/\s+/g, ' ').includes(selector)), + ) + .filter((rule) => { + const declarations = Object.values(rule.declarations).join(' '); + const sizes = [rule.declarations['min-height'], rule.declarations.height].filter( + (value): value is string => value !== undefined, + ); + return ( + sizes.some((value) => + ['1.8rem', '2.1rem', '2.3rem', '2.35rem', '2.4rem'].includes(value), + ) || declarations.includes('border-radius: 999px') + ); + }) + .map((rule) => rule.selector); + + expect(stale).toEqual([]); + + for (const selector of [ + 'button.primary-action', + 'a.primary-action', + "[class*='animal-btn-middle']", + ]) { + expect(wins(selector, 'min-height')).toBe('var(--button-height)'); + expect(wins(selector, 'padding')).toBe('0.45rem 0.9rem'); + expect(wins(selector, 'font-size')).toBe('0.82rem'); + } + + for (const selector of ['.organization-add', '.maintenance-backup-actions a']) { + expect(wins(selector, 'min-height')).toBe('var(--button-height-compact)'); + expect(wins(selector, 'padding')).toBe('0.3rem 0.7rem'); + expect(wins(selector, 'font-size')).toBe('0.76rem'); + expect(wins(selector, 'border-radius')).toBe('var(--button-radius-compact)'); + } + }); + + it('keeps grouped, segmented and workbench controls on the shared scale', async () => { + const { exact, wins } = await loadStylesheet(); + const compactControls = [ + '.fleet-group-tabs button', + '.segmented-control button', + '.identity-actions button', + '.fleet-notifications-retry-all', + '.fleet-messages-filter-chip', + '.fleet-messages-delete', + '.fleet-switch', + ]; + + for (const selector of compactControls) { + expect(exact(selector, 'min-height')).toBe('var(--button-height-compact)'); + expect(exact(selector, 'padding')).toBe('0.3rem 0.7rem'); + expect(exact(selector, 'font-size')).toBe('0.76rem'); + } + + // Small touch surfaces deliberately promote panel controls to the standard height. + expect(wins('.identity-actions button', 'min-height')).toBe('var(--button-height)'); + + expect(wins('.fleet-group-tabs button', 'border-radius')).toBe('var(--button-radius-compact)'); + expect(wins('.workbench-tabs button', 'min-height')).toBe('var(--button-height-large)'); + }); + + it('keeps privacy toggles on the shared icon-button target', async () => { + const { wins } = await loadStylesheet(); + + expect(wins('.fleet-phone-privacy-toggle', 'width')).toBe('var(--icon-button-size)'); + expect(wins('.fleet-phone-privacy-toggle', 'height')).toBe('var(--icon-button-size)'); + expect(wins('.fleet-phone-privacy-toggle', 'border-radius')).toBe('var(--button-radius)'); + }); + it('keeps workbench text and focus indicators on the accessible brand scale', async () => { const { tokens, resolve } = await loadStylesheet();