refine Semi UI operations workspace

2026-07-18 07:32:32 +08:00
parent 0c6a3e4ef1
commit ffb1283807
3 changed files with 253 additions and 15 deletions
--- 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');
--- 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 <div className={`v2-ops-page is-${workspace}`}>
    <WorkspaceCommandBar
      className="v2-ops-command-bar"
@@ -350,19 +359,25 @@ export default function OperationsPage() {
      meta={<Typography.Text type="tertiary">{data?.runtime.platformRelease ? `版本 ${data.runtime.platformRelease}` : '正在读取运行版本'}</Typography.Text>}
      actions={<Button theme="light" icon={<IconRefresh />} loading={health.isFetching || readiness.isFetching} onClick={refresh}>刷新全局证据</Button>}
    />
-    <SegmentedTabs
-      className="v2-ops-tabs"
-      variant="filled"
-      ariaLabel="运维质量工作区"
-      value={workspace}
-      onChange={setWorkspace}
-      items={[
-        { key: 'reconciliation', label: '差异处置' },
-        { key: 'diagnostic', label: '单车诊断' },
-        { key: 'health', label: '全局健康' }
-      ]}
-    />
-    <section className={`v2-ops-workspace is-${workspace}`} role="tabpanel" aria-label={workspace === 'reconciliation' ? '差异处置' : workspace === 'diagnostic' ? '单车诊断' : '全局健康'}>
+    <nav className="v2-ops-navigation" aria-label="运维质量视图">
+      <SegmentedTabs
+        className="v2-ops-tabs"
+        variant="filled"
+        ariaLabel="运维质量工作区"
+        value={workspace}
+        onChange={setWorkspace}
+        items={[
+          { key: 'reconciliation', label: '差异处置' },
+          { key: 'diagnostic', label: '单车诊断' },
+          { key: 'health', label: '全局健康' }
+        ]}
+      />
+      <div className="v2-ops-navigation-meta" aria-live="polite">
+        <Typography.Text type="tertiary">{workspaceContext.description}</Typography.Text>
+        <Tag color={workspaceContext.color} type="light" size="small">{workspaceContext.status}</Tag>
+      </div>
+    </nav>
+    <section className={`v2-ops-workspace is-${workspace}`} role="tabpanel" tabIndex={0} aria-label={workspace === 'reconciliation' ? '差异处置' : workspace === 'diagnostic' ? '单车诊断' : '全局健康'}>
      {workspace === 'reconciliation' ? <ReconciliationCenter /> : null}
      {workspace === 'diagnostic' ? <SourceDiagnosticWorkspace /> : null}
      {workspace === 'health' ? <>
--- 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;
+  }
+}