diff --git a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.test.tsx index d9c72c3d..dcd3679e 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.test.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.test.tsx @@ -1,5 +1,5 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'; import { afterEach, expect, test, vi } from 'vitest'; import OperationsPage from './OperationsPage'; @@ -61,8 +61,12 @@ test('renders reconciliation queue, loads evidence on demand and records review expect(await screen.findByText('数据差异中心')).toBeInTheDocument(); expect(screen.getByRole('heading', { name: '运行与数据质量', level: 5 })).toBeInTheDocument(); expect(screen.getByLabelText('运维质量操作')).toHaveClass('v2-workspace-command-bar', 'v2-ops-command-bar'); + const navigation = screen.getByRole('navigation', { name: '运维质量视图' }); + expect(navigation).toHaveClass('v2-ops-navigation'); + expect(within(navigation).getByText('每日自动对账')).toBeInTheDocument(); + expect(within(navigation).getByText('证据处置')).toBeInTheDocument(); expect(screen.getByRole('tab', { name: '差异处置', selected: true })).toHaveClass('semi-button'); - expect(screen.getByRole('tabpanel', { name: '差异处置' })).toBeInTheDocument(); + expect(screen.getByRole('tabpanel', { name: '差异处置' })).toHaveAttribute('tabindex', '0'); expect(document.querySelector('.v2-ops-page')).toHaveClass('is-reconciliation'); expect(screen.queryByText('先选择一辆车')).not.toBeInTheDocument(); expect(screen.getByText('数据差异中心').closest('.semi-card')).toHaveClass('v2-reconcile-center'); @@ -167,6 +171,8 @@ test('reconciles service identities with bound and identity-required vehicles', fireEvent.click(screen.getByRole('tab', { name: '全局健康' })); expect(await screen.findByText('1024 / 234')).toBeInTheDocument(); + expect(within(screen.getByRole('navigation', { name: '运维质量视图' })).getByText('15 秒刷新运行证据')).toBeInTheDocument(); + expect(within(screen.getByRole('navigation', { name: '运维质量视图' })).getByText('运行正常')).toBeInTheDocument(); for (const key of [['ops-health-v2'], ['ops-source-readiness-v2']]) { const query = client.getQueryCache().find({ queryKey: key }); const liveOptions = query?.options as { refetchIntervalInBackground?: boolean; refetchOnWindowFocus?: boolean }; @@ -195,6 +201,8 @@ test('reconciles service identities with bound and identity-required vehicles', expect(screen.getByText('验收标准').closest('.semi-card')).toHaveClass('v2-ops-source-card'); expect(screen.queryByText('单车多来源诊断')).not.toBeInTheDocument(); fireEvent.click(screen.getByRole('tab', { name: '单车诊断' })); + expect(within(screen.getByRole('navigation', { name: '运维质量视图' })).getByText('按需读取单车来源')).toBeInTheDocument(); + expect(within(screen.getByRole('navigation', { name: '运维质量视图' })).getByText('精确诊断')).toBeInTheDocument(); expect(screen.getByRole('heading', { name: '诊断车辆', level: 5 })).toBeInTheDocument(); expect(screen.getByRole('heading', { name: '诊断车辆', level: 5 }).closest('.semi-card')).toHaveClass('v2-source-filter-panel', 'v2-workspace-filter-panel'); expect(screen.getByText('先选择一辆车').closest('.semi-empty')).toHaveClass('v2-source-empty'); diff --git a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx index c65a9114..4f98c5ee 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx @@ -339,6 +339,15 @@ export default function OperationsPage() { const capacityIssueCount = data?.capacityFindings.length ?? 0; const healthIssueCount = linkIssueCount + runtimeIssueCount + capacityIssueCount + Number((data?.kafkaLag ?? 0) > 0); const overallStatus = !data ? 'unknown' : healthIssueCount > 0 ? 'warning' : 'ok'; + const workspaceContext = workspace === 'reconciliation' + ? { description: '每日自动对账', status: '证据处置', color: 'blue' as const } + : workspace === 'diagnostic' + ? { description: '按需读取单车来源', status: '精确诊断', color: 'cyan' as const } + : { + description: '15 秒刷新运行证据', + status: !data ? '读取中' : healthIssueCount > 0 ? `${healthIssueCount} 项关注` : '运行正常', + color: !data ? 'grey' as const : healthIssueCount > 0 ? 'orange' as const : 'green' as const + }; return
{data?.runtime.platformRelease ? `版本 ${data.runtime.platformRelease}` : '正在读取运行版本'}} actions={} /> - -
+ +
{workspace === 'reconciliation' ? : null} {workspace === 'diagnostic' ? : null} {workspace === 'health' ? <> diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css index 6c1677ab..e299bf1f 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css @@ -9993,3 +9993,218 @@ padding-left: 8px; } } + +/* + * Semi UI operations final convergence. + * Keep one compact navigation rail, give every workspace a single scroll owner, + * and never allow the health grid to shrink evidence below its intrinsic size. + */ +.v2-ops-navigation { + display: flex; + width: 100%; + height: 52px; + min-height: 52px; + flex: 0 0 52px; + align-items: center; + justify-content: space-between; + gap: 14px; + overflow: hidden; + border: 1px solid #dce4ed; + border-radius: 12px; + background: #fff; + padding: 5px 10px 5px 5px; + box-shadow: 0 5px 18px rgba(31, 53, 80, .045); +} + +.v2-ops-navigation .v2-ops-tabs.v2-segmented-tabs { + width: min(700px, calc(100% - 220px)); + height: 40px; + min-height: 40px; + flex: 0 1 700px; + grid-template-columns: repeat(3, minmax(132px, 1fr)); + gap: 3px; + overflow: visible; + border: 0; + border-radius: 9px; + background: #f2f5f9; + padding: 3px; + box-shadow: none; +} + +.v2-ops-navigation .v2-ops-tabs.v2-segmented-tabs > .semi-button { + height: 34px; + min-height: 34px; + border-radius: 7px; + font-size: 13px; +} + +.v2-ops-navigation-meta { + display: flex; + min-width: 0; + align-items: center; + justify-content: flex-end; + gap: 9px; + white-space: nowrap; +} + +.v2-ops-navigation-meta > .semi-typography { + overflow: hidden; + color: #7d899a; + font-size: 12px; + text-overflow: ellipsis; +} + +.v2-ops-navigation-meta > .semi-tag { + min-height: 26px; + flex: 0 0 auto; + border-radius: 6px; + font-size: 11px; +} + +.v2-ops-workspace.is-health { + align-content: start; + grid-auto-rows: max-content; +} + +.v2-ops-workspace.is-health > .v2-ops-overview.semi-card { + height: auto; + min-height: 0; +} + +.v2-ops-overview > .semi-card-body { + height: auto; +} + +.v2-ops-metric { + min-height: 100px; + padding: 14px 16px 13px; +} + +.v2-ops-metric::after { + right: 16px; + left: 16px; +} + +.v2-ops-metric strong { + margin: 8px 0 7px; + font-size: 22px; +} + +.v2-ops-workspace.is-diagnostic { + display: flex; + min-height: 0; + flex-direction: column; + align-items: stretch; + overflow: auto; +} + +.v2-ops-workspace.is-diagnostic > .v2-source-filter-panel { + flex: 0 0 auto; +} + +.v2-ops-workspace.is-diagnostic > .v2-source-diagnostic { + min-height: 300px; + flex: 1 0 auto; +} + +.v2-source-filter-panel .v2-source-search { + min-height: 60px; + align-items: center; +} + +.v2-source-filter-panel .v2-source-search > .semi-input-wrapper, +.v2-source-filter-panel .v2-source-search > .semi-button { + height: 38px; + min-height: 38px; +} + +.v2-ops-source-card.semi-card { + content-visibility: auto; + contain-intrinsic-size: auto 390px; +} + +.v2-ops-workspace, +.v2-reconcile-table-wrap.is-scroll-region { + scrollbar-color: #aebdce transparent; + scrollbar-width: thin; +} + +.v2-ops-workspace:focus-visible { + outline: 2px solid rgba(18, 104, 243, .34); + outline-offset: -2px; +} + +.v2-ops-workspace::-webkit-scrollbar, +.v2-reconcile-table-wrap.is-scroll-region::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +.v2-ops-workspace::-webkit-scrollbar-thumb, +.v2-reconcile-table-wrap.is-scroll-region::-webkit-scrollbar-thumb { + border: 2px solid transparent; + border-radius: 999px; + background: #aebdce; + background-clip: padding-box; +} + +@media (max-width: 900px) and (min-width: 681px) { + .v2-ops-navigation .v2-ops-tabs.v2-segmented-tabs { + width: min(620px, calc(100% - 150px)); + flex-basis: 620px; + } + + .v2-ops-navigation-meta > .semi-typography { + display: none; + } +} + +@media (max-width: 680px) { + .v2-ops-navigation { + position: sticky; + z-index: 8; + top: 0; + height: 50px; + min-height: 50px; + flex-basis: 50px; + border-radius: 11px; + padding: 4px; + } + + .v2-ops-navigation .v2-ops-tabs.v2-segmented-tabs { + position: static; + width: 100%; + height: 42px; + min-height: 42px; + flex: 1 1 auto; + grid-template-columns: repeat(3, minmax(92px, 1fr)); + overflow-x: auto; + } + + .v2-ops-navigation .v2-ops-tabs.v2-segmented-tabs > .semi-button { + min-width: 92px; + min-height: 36px; + padding-inline: 7px; + font-size: 11px; + } + + .v2-ops-navigation-meta { + display: none; + } + + .v2-ops-workspace.is-diagnostic { + overflow: visible; + } + + .v2-ops-workspace.is-diagnostic > .v2-source-diagnostic { + min-height: 260px; + } + + .v2-source-filter-panel .v2-source-search { + align-items: stretch; + } + + .v2-ops-metric { + min-height: 94px; + } +}