feat: simplify login and unify monitor summary

2026-07-19 10:48:08 +08:00
parent dcc6b223d9
commit e02d8dba54
6 changed files with 329 additions and 181 deletions
--- a/vehicle-data-platform/apps/web/src/v2/auth/AuthGate.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/auth/AuthGate.test.tsx
@@ -88,35 +88,20 @@ test('treats login and logout as complete query and mutation cache boundaries',
  expect(window.sessionStorage.length).toBe(0);
 });

-test('makes account and operations-token entry explicit while preserving the account draft', async () => {
+test('exposes only account and password login on the public sign-in screen', async () => {
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  mocks.session.mockImplementation(async () => {
-    if (getAccessToken() !== 'ops-session-token') throw new Error('未登录');
-    return { name: 'platform-operator', role: 'admin', authMode: 'enforce' };
-  });
+  mocks.session.mockRejectedValue(new Error('未登录'));

  render(<QueryClientProvider client={client}><AuthGate><ProtectedWorkspace onAbort={() => undefined} /></AuthGate></QueryClientProvider>);

  expect(await screen.findByRole('form', { name: '平台账号登录' })).toBeInTheDocument();
-  expect(screen.getByRole('tab', { name: '账号登录' })).toHaveAttribute('aria-selected', 'true');
-  expect(screen.getByRole('tab', { name: '运维令牌' })).toHaveAttribute('aria-selected', 'false');
-  fireEvent.change(screen.getByPlaceholderText('请输入用户名'), { target: { value: 'remember-me' } });
-
-  fireEvent.click(screen.getByRole('tab', { name: '运维令牌' }));
-  expect(screen.getByRole('form', { name: '运维令牌登录' })).toBeInTheDocument();
-  expect(screen.getByText('仅限平台运维')).toBeInTheDocument();
-  expect(screen.getByText('令牌只保存在当前浏览器会话，关闭或退出后失效。')).toBeInTheDocument();
-  expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
-  fireEvent.change(screen.getByPlaceholderText('请输入服务器访问令牌'), { target: { value: 'ops-session-token' } });
-
-  fireEvent.click(screen.getByRole('tab', { name: '账号登录' }));
-  expect(screen.getByPlaceholderText('请输入用户名')).toHaveValue('remember-me');
-  fireEvent.click(screen.getByRole('tab', { name: '运维令牌' }));
-  fireEvent.click(screen.getByRole('button', { name: '验证令牌并进入' }));
-
-  expect(await screen.findByText('platform-operator')).toBeInTheDocument();
-  expect(mocks.login).not.toHaveBeenCalled();
-  expect(getAccessToken()).toBe('ops-session-token');
+  expect(screen.getByPlaceholderText('请输入用户名')).toHaveAttribute('autocomplete', 'username');
+  expect(screen.getByPlaceholderText('请输入密码')).toHaveAttribute('autocomplete', 'current-password');
+  expect(screen.queryByRole('tab')).not.toBeInTheDocument();
+  expect(screen.queryByText('运维令牌')).not.toBeInTheDocument();
+  expect(screen.queryByPlaceholderText('请输入服务器访问令牌')).not.toBeInTheDocument();
+  expect(screen.queryByRole('button', { name: '验证令牌并进入' })).not.toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '登录工作台' })).toBeDisabled();
 });

 test('an expired protected request returns to login and removes the active user cache', async () => {
--- a/vehicle-data-platform/apps/web/src/v2/auth/AuthGate.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/auth/AuthGate.tsx
@@ -1,6 +1,6 @@
-import { IconAlertTriangle, IconKey, IconLock, IconSafe, IconShield, IconUser } from '@douyinfe/semi-icons';
+import { IconAlertTriangle, IconLock, IconSafe, IconShield, IconUser } from '@douyinfe/semi-icons';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Banner, Button, Card, Input, Spin, Tabs, Tag, Typography } from '@douyinfe/semi-ui';
+import { Banner, Button, Card, Input, Spin, Tag, Typography } from '@douyinfe/semi-ui';
 import { FormEvent, ReactNode, useCallback, useContext, useEffect, useState, createContext } from 'react';
 import { api } from '../../api/client';
 import { PasswordInput } from '../shared/PasswordInput';
@@ -79,8 +79,6 @@ export function AuthGate({ children }: { children: ReactNode }) {
  const [tokenVersion, setTokenVersion] = useState(0);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
-  const [draftToken, setDraftToken] = useState('');
-  const [legacyMode, setLegacyMode] = useState(false);
  const [attempted, setAttempted] = useState(() => Boolean(getAccessToken()));
  const [loginPending, setLoginPending] = useState(false);
  const [loginError, setLoginError] = useState('');
@@ -98,7 +96,6 @@ export function AuthGate({ children }: { children: ReactNode }) {
    clearAccessToken();
    clearClientSession();
    setPassword('');
-    setDraftToken('');
    setAttempted(false);
    setLoginError('');
    setTokenVersion((value) => value + 1);
@@ -117,12 +114,8 @@ export function AuthGate({ children }: { children: ReactNode }) {
    setLoginError('');
    setLoginPending(true);
    try {
-      if (legacyMode) {
-        setAccessToken(draftToken);
-      } else {
-        const result = await api.login({ username: username.trim(), password });
-        setAccessToken(result.accessToken);
-      }
+      const result = await api.login({ username: username.trim(), password });
+      setAccessToken(result.accessToken);
      clearClientSession();
      setTokenVersion((value) => value + 1);
    } catch (error) {
@@ -132,11 +125,6 @@ export function AuthGate({ children }: { children: ReactNode }) {
      setLoginPending(false);
    }
  };
-  const switchLoginMode = (mode: string) => {
-    setLegacyMode(mode === 'token');
-    setLoginError('');
-  };
-
  if (session.isPending) {
    return <AuthLoadingState />;
  }
@@ -159,45 +147,20 @@ export function AuthGate({ children }: { children: ReactNode }) {
        <footer><IconLock /><Text>账号、车辆与菜单权限全程隔离</Text></footer>
      </section>
      <Card className="v2-auth-card" bodyStyle={{ padding: 0 }}>
-        <form className="v2-auth-form" onSubmit={login} aria-label={legacyMode ? '运维令牌登录' : '平台账号登录'}>
+        <form className="v2-auth-form" onSubmit={login} aria-label="平台账号登录">
          <header className="v2-auth-form-heading">
            <img className="v2-auth-logo" src="/brand-logo.svg" alt="羚牛智能" />
-            <Tag color={legacyMode ? 'amber' : 'blue'} prefixIcon={legacyMode ? <IconKey /> : <IconUser />}>
-              {legacyMode ? '受控运维入口' : '账号权限登录'}
-            </Tag>
+            <Tag color="blue" prefixIcon={<IconUser />}>账号权限登录</Tag>
            <Title heading={3}>登录车辆数据中台</Title>
-            <Text type="secondary">{legacyMode ? '仅供平台运维使用，输入服务器访问令牌。' : '使用管理员为你开通的账号登录。'}</Text>
+            <Text type="secondary">使用管理员为你开通的账号登录。</Text>
          </header>
-          <Tabs
-            className="v2-auth-mode-tabs"
-            activeKey={legacyMode ? 'token' : 'account'}
-            onChange={switchLoginMode}
-            tabPaneMotion={false}
-            type="button"
-          >
-            <Tabs.TabPane itemKey="account" tab="账号登录" icon={<IconUser aria-hidden="true" />}>
-              <div className="v2-auth-fields">
-                <label><span>用户名</span><Input autoFocus required={!legacyMode} autoComplete="username" prefix={<IconUser aria-hidden="true" />} value={username} onChange={setUsername} placeholder="请输入用户名" size="large" /></label>
-                <label><span>密码</span><PasswordInput aria-label="登录密码" required={!legacyMode} autoComplete="current-password" prefix={<IconLock aria-hidden="true" />} visibilityLabel="登录密码" value={password} onChange={setPassword} placeholder="请输入密码" size="large" /></label>
-              </div>
-            </Tabs.TabPane>
-            <Tabs.TabPane itemKey="token" tab="运维令牌" icon={<IconKey aria-hidden="true" />}>
-              <div className="v2-auth-fields">
-                <Banner
-                  className="v2-auth-token-note"
-                  type="warning"
-                  bordered
-                  closeIcon={null}
-                  title="仅限平台运维"
-                  description="令牌只保存在当前浏览器会话，关闭或退出后失效。"
-                />
-                <label><span>运维访问令牌</span><PasswordInput aria-label="运维访问令牌" autoFocus required={legacyMode} autoComplete="off" prefix={<IconKey aria-hidden="true" />} visibilityLabel="运维访问令牌" value={draftToken} onChange={setDraftToken} placeholder="请输入服务器访问令牌" size="large" /></label>
-              </div>
-            </Tabs.TabPane>
-          </Tabs>
+          <div className="v2-auth-fields">
+            <label><span>用户名</span><Input autoFocus required autoComplete="username" prefix={<IconUser aria-hidden="true" />} value={username} onChange={setUsername} placeholder="请输入用户名" size="large" /></label>
+            <label><span>密码</span><PasswordInput aria-label="登录密码" required autoComplete="current-password" prefix={<IconLock aria-hidden="true" />} visibilityLabel="登录密码" value={password} onChange={setPassword} placeholder="请输入密码" size="large" /></label>
+          </div>
          {error ? <AuthErrorMessage message={error} /> : null}
-          <Button block htmlType="submit" loading={loginPending} disabled={loginPending || (legacyMode ? !draftToken.trim() : !username.trim() || !password)} theme="solid" type="primary" size="large">
-            {loginPending ? '正在登录…' : legacyMode ? '验证令牌并进入' : '登录工作台'}
+          <Button block htmlType="submit" loading={loginPending} disabled={loginPending || !username.trim() || !password} theme="solid" type="primary" size="large">
+            {loginPending ? '正在登录…' : '登录工作台'}
          </Button>
          <div className="v2-auth-trust-note"><IconLock /><Text type="tertiary" size="small">登录后按账号隔离菜单、车辆和本地缓存</Text></div>
        </form>
--- a/vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.test.tsx
@@ -118,15 +118,19 @@ test('starts without a selection and supports expand, collapse, reselection, and

  expect(firstVehicle).toHaveClass('semi-button', 'v2-vehicle-row');
  expect(view.container.querySelector('.v2-filterbar')).toHaveClass('semi-card');
-  const kpis = view.container.querySelector('.v2-kpis');
-  expect(kpis).toHaveClass('semi-card');
-  expect(Array.from(kpis?.querySelectorAll('.v2-kpi small') ?? []).map((item) => item.textContent)).toEqual([
-    '车辆总数', '当前在线', '当前离线', '行驶车辆', '静止车辆', '告警车辆', '今日上报', '无实时位置'
+  const kpis = screen.getByRole('list', { name: '车辆整体统计' });
+  expect(kpis.closest('.v2-monitor-summary-rail')).toHaveClass('semi-card', 'v2-workspace-metric-rail', 'is-queue');
+  expect(Array.from(kpis.querySelectorAll(':scope > [role="listitem"] > small')).map((item) => item.textContent)).toEqual([
+    '车辆总数', '当前在线', '行驶车辆', '当前离线', '静止车辆', '告警车辆'
  ]);
-  expect(kpis?.querySelector('.v2-kpi.is-fleet')).toHaveClass('is-primary');
-  expect(kpis?.querySelector('.v2-kpi.is-online')).toHaveClass('is-primary');
-  expect(kpis?.querySelector('.v2-kpi.is-today')).toHaveClass('is-support');
-  expect(kpis?.querySelector('.v2-kpi:last-child')).toHaveClass('is-missing', 'is-support');
+  expect(kpis.querySelectorAll(':scope > [role="listitem"]')).toHaveLength(6);
+  expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(1)')).toHaveClass('is-primary');
+  expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(2)')).toHaveClass('is-primary', 'is-success');
+  expect(kpis.querySelector(':scope > [role="listitem"]:nth-child(4)')).toHaveClass('is-secondary');
+  const summarySupport = view.container.querySelector('.v2-monitor-summary-support');
+  expect(summarySupport).toHaveTextContent('今日上报10条数据活跃度');
+  expect(summarySupport).toHaveTextContent('无实时位置0辆辅助排查');
+  expect(view.container.querySelector('.v2-kpis')).not.toBeInTheDocument();
  expect(view.container.querySelector('.v2-event-strip')).toHaveClass('semi-card');
  expect(view.container.querySelector('.v2-monitor-live-tag')).toHaveClass('semi-tag');
  const liveStatus = screen.getByLabelText('实时数据状态');
--- a/vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.tsx
@@ -13,6 +13,7 @@ import { EmptyState, InlineError } from '../shared/AsyncState';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
 import { TablePagination } from '../shared/TablePagination';
 import { ProtocolTag } from '../shared/ProtocolTag';
+import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
 import { formatNumber, statusLabel, vehicleStatus } from '../domain/monitor';
@@ -340,6 +341,56 @@ export default function MonitorPage() {
  const driving = rows.filter((vehicle) => vehicleStatus(vehicle) === 'driving').length;
  const idle = rows.filter((vehicle) => vehicleStatus(vehicle) === 'idle').length;
  const offline = rows.filter((vehicle) => vehicleStatus(vehicle) === 'offline').length;
+  const totalVehicleCount = summary.data?.totalVehicles ?? vehicles.data?.total ?? rows.length;
+  const onlineVehicleCount = summary.data?.onlineVehicles ?? rows.length - offline;
+  const offlineVehicleCount = summary.data?.offlineVehicles ?? offline;
+  const drivingVehicleCount = summary.data?.drivingVehicles ?? driving;
+  const idleVehicleCount = summary.data?.idleVehicles ?? idle;
+  const alertVehicleCount = summary.data?.alertDataAvailable ? summary.data.alertVehicles : undefined;
+  const monitorMetrics: WorkspaceQueueMetricRailItem[] = [
+    {
+      label: '车辆总数',
+      value: <>{formatNumber(totalVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
+      note: '授权车辆',
+      tone: 'primary',
+      emphasis: 'primary'
+    },
+    {
+      label: '当前在线',
+      value: <>{formatNumber(onlineVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
+      note: '当前可用',
+      tone: 'success',
+      emphasis: 'primary'
+    },
+    {
+      label: '行驶车辆',
+      value: <>{formatNumber(drivingVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
+      note: '实时行驶',
+      tone: 'primary',
+      emphasis: 'primary'
+    },
+    {
+      label: '当前离线',
+      value: <>{formatNumber(offlineVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
+      note: '无在线来源',
+      tone: 'neutral',
+      emphasis: 'secondary'
+    },
+    {
+      label: '静止车辆',
+      value: <>{formatNumber(idleVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
+      note: '在线静止',
+      tone: 'success',
+      emphasis: 'secondary'
+    },
+    {
+      label: '告警车辆',
+      value: <>{alertVehicleCount == null ? '—' : formatNumber(alertVehicleCount)}<i className="v2-monitor-summary-unit">辆</i></>,
+      note: alertVehicleCount == null ? '数据未开放' : '需要关注',
+      tone: alertVehicleCount ? 'danger' : 'neutral',
+      emphasis: 'primary'
+    }
+  ];
  const viewportLoad = mode === 'map'
    ? (map.data?.clusters.length
      ? `${map.data.clusters.length} 个聚合 · ${map.data.points.length} 个车辆点`
@@ -409,18 +460,16 @@ export default function MonitorPage() {
      </Card>
      {batchSearchOpen ? <BatchVehicleSearchDialog initialValue={searchTerms.join('\n')} mobile={mobileLayout} onClose={() => setBatchSearchOpen(false)} onApply={(value) => { setKeyword(value); setListOffset(0); setBatchSearchOpen(false); }} /> : null}

-      <Card className="v2-kpis" bodyStyle={{ padding: 0 }} aria-label="车辆整体统计">
-        {[
-          { label: '车辆总数', value: formatNumber(summary.data?.totalVehicles ?? vehicles.data?.total ?? rows.length), tone: 'fleet', priority: 'primary', unit: '辆' },
-          { label: '当前在线', value: formatNumber(summary.data?.onlineVehicles ?? rows.length - offline), tone: 'online', priority: 'primary', unit: '辆' },
-          { label: '当前离线', value: formatNumber(summary.data?.offlineVehicles ?? offline), tone: 'offline', priority: 'standard', unit: '辆' },
-          { label: '行驶车辆', value: formatNumber(summary.data?.drivingVehicles ?? driving), tone: 'driving', priority: 'standard', unit: '辆' },
-          { label: '静止车辆', value: formatNumber(summary.data?.idleVehicles ?? idle), tone: 'idle', priority: 'standard', unit: '辆' },
-          { label: '告警车辆', value: summary.data?.alertDataAvailable ? formatNumber(summary.data.alertVehicles) : '—', tone: 'alert', priority: 'standard', unit: '辆' },
-          { label: '今日上报', value: formatNumber(summary.data?.frameToday ?? 0), tone: 'today', priority: 'support', unit: '条' },
-          { label: '无实时位置', value: formatNumber(summary.data?.noLocationVehicles ?? 0), tone: 'missing', priority: 'support', unit: '辆' }
-        ].map(({ label, value, tone, priority, unit }) => <div key={label} className={`v2-kpi is-${tone} is-${priority}`}><small>{label}</small><strong>{value}<em>{unit}</em></strong></div>)}
-      </Card>
+      <WorkspaceMetricRail
+        variant="queue"
+        ariaLabel="车辆整体统计"
+        className="v2-monitor-summary-rail"
+        items={monitorMetrics}
+        context={<div className="v2-monitor-summary-support">
+          <span><small>今日上报</small><strong>{formatNumber(summary.data?.frameToday ?? 0)}<i>条</i></strong><em>数据活跃度</em></span>
+          <span><small>无实时位置</small><strong>{formatNumber(summary.data?.noLocationVehicles ?? 0)}<i>辆</i></strong><em>辅助排查</em></span>
+        </div>}
+      />

      {vehicles.isError ? <InlineError message={vehicles.error instanceof Error ? vehicles.error.message : '车辆数据加载失败'} onRetry={() => vehicles.refetch()} /> : null}
      {mode === 'list' && realtimeListQuery.isError ? <InlineError message={realtimeListQuery.error instanceof Error ? realtimeListQuery.error.message : '车辆列表加载失败'} onRetry={() => realtimeListQuery.refetch()} /> : null}
--- a/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts
+++ b/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts
@@ -513,7 +513,10 @@ describe('V2 production entry', () => {
    expect(corePageSources.MonitorPage).not.toContain('<textarea');
    expect(corePageSources.MonitorPage).not.toContain('<button');
    expect(corePageSources.MonitorPage).toContain('<Card className="v2-filterbar"');
-    expect(corePageSources.MonitorPage).toContain('<Card className="v2-kpis"');
+    expect(corePageSources.MonitorPage).toContain("from '../shared/WorkspaceMetricRail'");
+    expect(corePageSources.MonitorPage).toContain('<WorkspaceMetricRail');
+    expect(corePageSources.MonitorPage).toContain('className="v2-monitor-summary-rail"');
+    expect(corePageSources.MonitorPage).not.toContain('className="v2-kpis"');
    expect(corePageSources.MonitorPage).toContain('<Card className="v2-monitor-table-panel"');
    expect(corePageSources.MonitorPage).not.toContain('<section className="v2-filterbar"');
    expect(corePageSources.MonitorPage).not.toContain('<section className="v2-kpis"');
@@ -639,7 +642,9 @@ describe('V2 production entry', () => {
    expect(vehicleActionsSource).not.toContain('useSideSheetA11y');
    expect(appShellSource).toContain('className="v2-password-modal"');
    expect(appShellSource.match(/<PasswordInput/g)).toHaveLength(3);
-    expect(authGateSource.match(/<PasswordInput/g)).toHaveLength(2);
+    expect(authGateSource.match(/<PasswordInput/g)).toHaveLength(1);
+    expect(authGateSource).not.toContain('<Tabs');
+    expect(authGateSource).not.toContain('运维令牌');
    expect(passwordInputSource).toContain('<Input');
    expect(passwordInputSource).toContain('<Button');
    expect(passwordInputSource).toContain("`${visible ? '隐藏' : '显示'}${visibilityLabel}`");
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -454,7 +454,7 @@
    line-height: 1.55;
  }

-  :root .v2-auth-mode-tabs {
+  :root .v2-auth-form > .v2-auth-fields {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
@@ -462,15 +462,6 @@
    margin-top: 0;
  }

-  :root .v2-auth-mode-tabs > .semi-tabs-bar {
-    padding: 3px;
-  }
-
-  :root .v2-auth-mode-tabs > .semi-tabs-bar .semi-tabs-tab {
-    height: 32px;
-    font-size: 10px;
-  }
-
  :root .v2-auth-fields {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -489,19 +480,6 @@
    border-radius: 9px;
  }

-  :root .v2-auth-token-note.semi-banner {
-    min-width: 0;
-    margin-top: 9px;
-    padding: 6px 7px;
-  }
-
-  :root .v2-auth-token-note .semi-banner-description {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-
  :root .v2-auth-error {
    min-width: 0;
    grid-column: 2;
@@ -5998,39 +5976,10 @@
  line-height: 1.65;
 }

-.v2-auth-mode-tabs {
+.v2-auth-form > .v2-auth-fields {
  margin-top: 20px;
 }

-.v2-auth-mode-tabs > .semi-tabs-bar {
-  width: 100%;
-  border: 1px solid #e5ebf3;
-  border-radius: 12px;
-  background: #f4f7fb;
-  padding: 4px;
-}
-
-.v2-auth-mode-tabs > .semi-tabs-bar .semi-tabs-tab {
-  width: 50%;
-  min-width: 0;
-  height: 38px;
-  justify-content: center;
-  border-radius: 9px;
-  color: #718096;
-  font-size: 11px;
-  font-weight: 650;
-}
-
-.v2-auth-mode-tabs > .semi-tabs-bar .semi-tabs-tab-active {
-  background: #fff;
-  color: #1268f3;
-  box-shadow: 0 2px 8px rgba(30, 58, 92, .1);
-}
-
-.v2-auth-mode-tabs > .semi-tabs-content {
-  padding: 0;
-}
-
 .v2-auth-fields {
  display: grid;
  gap: 0;
@@ -6066,28 +6015,6 @@
  box-shadow: 0 0 0 3px rgba(18, 104, 243, .1);
 }

-.v2-auth-token-note.semi-banner {
-  align-items: flex-start;
-  margin-top: 14px;
-  border: 1px solid #f4d9a7;
-  border-radius: 10px;
-  background: #fffbf2;
-  padding: 9px 10px;
-}
-
-.v2-auth-token-note .semi-banner-title {
-  color: #815d16;
-  font-size: 10px;
-  font-weight: 750;
-}
-
-.v2-auth-token-note .semi-banner-description {
-  margin-top: 2px;
-  color: #9b7a37;
-  font-size: 9px;
-  line-height: 1.5;
-}
-
 .v2-auth-form > .semi-button-primary {
  height: 46px;
  margin-top: 18px;
@@ -6314,15 +6241,10 @@
    font-size: 11px;
  }

-  .v2-auth-mode-tabs {
+  .v2-auth-form > .v2-auth-fields {
    margin-top: 17px;
  }

-  .v2-auth-mode-tabs > .semi-tabs-bar .semi-tabs-tab {
-    height: 40px;
-    font-size: 12px;
-  }
-
  .v2-auth-fields {
    min-height: 143px;
  }
@@ -6340,10 +6262,6 @@
    font-size: 13px;
  }

-  .v2-auth-token-note.semi-banner {
-    margin-top: 12px;
-  }
-
  .v2-route-error > .v2-route-error-card.semi-card {
    border-radius: 15px;
  }
@@ -23090,3 +23008,227 @@
    display: flex;
  }
 }
+
+/*
+ * Monitor fleet summary.
+ * Operational state remains prominent; high-volume ingest evidence is kept
+ * in a quieter support lane so the map stays the page's visual focus.
+ */
+.v2-monitor-summary-rail.is-queue.semi-card {
+  border: 1px solid #dce5ef;
+  border-radius: 12px;
+  box-shadow: 0 7px 24px rgba(31, 53, 80, .05);
+}
+
+.v2-monitor-summary-rail.is-queue > .semi-card-body {
+  min-height: 74px;
+  grid-template-columns: minmax(0, 1fr) minmax(206px, .8fr);
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list {
+  grid-template-columns: 1.13fr 1.13fr 1.03fr .9fr .9fr 1fr;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span {
+  min-height: 74px;
+  column-gap: 8px;
+  padding: 10px 14px;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-primary {
+  background: linear-gradient(145deg, #f6faff 0%, #fff 78%);
+  box-shadow: inset 0 2px #5b96ee;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-primary.is-success {
+  background: linear-gradient(145deg, #f4fbf7 0%, #fff 78%);
+  box-shadow: inset 0 2px #4fbd8d;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-primary.is-danger {
+  background: linear-gradient(145deg, #fff8f7 0%, #fff 78%);
+  box-shadow: inset 0 2px #e36a64;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span > small {
+  font-size: 10px;
+  line-height: 15px;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span > strong {
+  overflow: hidden;
+  font-size: clamp(22px, 1.75vw, 29px);
+  font-weight: 750;
+  letter-spacing: -.025em;
+  line-height: 29px;
+  text-overflow: ellipsis;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-secondary > strong {
+  color: #5f6f82;
+  font-size: clamp(18px, 1.35vw, 22px);
+  font-weight: 680;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span > em {
+  max-width: 72px;
+  color: #8794a5;
+  font-size: 8px;
+}
+
+.v2-monitor-summary-unit {
+  margin-left: 4px;
+  color: #8b98a9;
+  font-size: 8px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-list > span.is-primary .v2-monitor-summary-unit {
+  color: #7392ba;
+}
+
+.v2-monitor-summary-rail .v2-workspace-metric-context {
+  min-height: 74px;
+  padding: 0;
+}
+
+.v2-monitor-summary-support {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: 1.15fr 1fr;
+}
+
+.v2-monitor-summary-support > span {
+  display: grid;
+  min-width: 0;
+  min-height: 74px;
+  align-content: center;
+  padding: 9px 13px;
+}
+
+.v2-monitor-summary-support > span + span {
+  border-left: 1px solid #e5ebf2;
+}
+
+.v2-monitor-summary-support small {
+  color: #8b97a6;
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 13px;
+}
+
+.v2-monitor-summary-support strong {
+  overflow: hidden;
+  color: #69798e;
+  font-size: clamp(15px, 1.18vw, 19px);
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+  line-height: 22px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v2-monitor-summary-support strong > i {
+  margin-left: 3px;
+  color: #99a4b2;
+  font-size: 7px;
+  font-style: normal;
+  font-weight: 550;
+}
+
+.v2-monitor-summary-support em {
+  overflow: hidden;
+  color: #a0a9b5;
+  font-size: 7px;
+  font-style: normal;
+  line-height: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 1120px) {
+  .v2-monitor-summary-rail.is-queue > .semi-card-body {
+    grid-template-columns: minmax(0, 1fr) 188px;
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span {
+    padding-inline: 10px;
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span > em {
+    display: none;
+  }
+}
+
+@media (max-width: 680px) {
+  .v2-monitor-summary-rail.is-queue > .semi-card-body {
+    min-height: 132px;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span {
+    min-height: 48px;
+    padding: 5px 11px;
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span.is-secondary {
+    display: none;
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(3),
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(6) {
+    border-top: 1px solid #e5ebf2;
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span:nth-child(3) {
+    border-left: 0;
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span > strong,
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span.is-secondary > strong {
+    font-size: 19px;
+    line-height: 21px;
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-list > span > em {
+    display: block;
+    max-width: none;
+    font-size: 7px;
+  }
+
+  .v2-monitor-summary-rail .v2-workspace-metric-context {
+    display: flex;
+    min-height: 36px;
+    border-top: 1px solid #e5ebf2;
+    border-left: 0;
+  }
+
+  .v2-monitor-summary-support > span {
+    min-height: 36px;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: baseline;
+    align-content: center;
+    gap: 0 5px;
+    padding: 4px 11px;
+  }
+
+  .v2-monitor-summary-support small {
+    font-size: 8px;
+  }
+
+  .v2-monitor-summary-support strong {
+    font-size: 14px;
+    line-height: 17px;
+  }
+
+  .v2-monitor-summary-support em {
+    display: none;
+  }
+}