refine Semi UI authentication workspace

vehicle-data-platform/apps/web/src/v2/auth/AuthGate.test.tsx

@@ -48,7 +48,7 @@ test('presents failed credentials as a clear Semi UI alert without losing the lo
   const view = render(<QueryClientProvider client={client}><AuthGate><div>受保护工作台</div></AuthGate></QueryClientProvider>);
   fireEvent.change(await screen.findByPlaceholderText('请输入用户名'), { target: { value: 'customer' } });
   fireEvent.change(screen.getByPlaceholderText('请输入密码'), { target: { value: 'wrong-password' } });
-  fireEvent.click(screen.getByRole('button', { name: '登录' }));
+  fireEvent.click(screen.getByRole('button', { name: '登录工作台' }));
 
   expect(await screen.findByRole('alert')).toHaveTextContent('登录未完成');
   expect(screen.getByRole('alert')).toHaveTextContent('账号或密码错误');
@@ -71,7 +71,7 @@ test('treats login and logout as complete query and mutation cache boundaries',
   render(<QueryClientProvider client={client}><AuthGate><ProtectedWorkspace onAbort={aborted} /></AuthGate></QueryClientProvider>);
   fireEvent.change(await screen.findByPlaceholderText('请输入用户名'), { target: { value: 'next-user' } });
   fireEvent.change(screen.getByPlaceholderText('请输入密码'), { target: { value: 'StrongPass!1' } });
-  fireEvent.click(screen.getByRole('button', { name: '登录' }));
+  fireEvent.click(screen.getByRole('button', { name: '登录工作台' }));
 
   expect(await screen.findByText('next-user')).toBeInTheDocument();
   expect(client.getQueryData(['previous-user-vehicle-data'])).toBeUndefined();
@@ -88,6 +88,37 @@ 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 () => {
+  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' };
+  });
+
+  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');
+});
+
 test('an expired protected request returns to login and removes the active user cache', async () => {
   mocks.logout.mockResolvedValue({ loggedOut: true });
   const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });

vehicle-data-platform/apps/web/src/v2/auth/AuthGate.tsx

@@ -1,6 +1,6 @@
-import { IconAlertTriangle, IconLock, IconSafe } from '@douyinfe/semi-icons';
+import { IconAlertTriangle, IconKey, IconLock, IconSafe, IconShield, IconUser } from '@douyinfe/semi-icons';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Banner, Button, Card, Input, Spin, Tag, Typography } from '@douyinfe/semi-ui';
+import { Banner, Button, Card, Input, Spin, Tabs, Tag, Typography } from '@douyinfe/semi-ui';
 import { FormEvent, ReactNode, useCallback, useContext, useEffect, useState, createContext } from 'react';
 import { api } from '../../api/client';
 import { clearAccessToken, getAccessToken, PLATFORM_UNAUTHORIZED_EVENT, PlatformSession, setAccessToken } from './session';
@@ -14,6 +14,24 @@ type AuthContextValue = {
 
 const AuthContext = createContext<AuthContextValue | null>(null);
 
+const authAssurances = [
+  {
+    icon: <IconUser />,
+    title: '车辆级权限',
+    description: '管理员按车牌与菜单精确授权'
+  },
+  {
+    icon: <IconSafe />,
+    title: '会话隔离',
+    description: '切换账号自动清理当前用户缓存'
+  },
+  {
+    icon: <IconShield />,
+    title: '身份可扩展',
+    description: '预留统一身份与外部系统接入'
+  }
+];
+
 function AuthLoadingState() {
   return <main className="v2-auth-screen is-session-loading">
     <Card className="v2-auth-card v2-auth-loading" bodyStyle={{ padding: 0 }} aria-label="正在恢复平台会话">
@@ -41,6 +59,7 @@ function AuthErrorMessage({ message }: { message: string }) {
     <Banner
       type="danger"
       bordered
+      closeIcon={null}
       icon={<IconAlertTriangle />}
       title="登录未完成"
       description={message}
@@ -112,6 +131,10 @@ export function AuthGate({ children }: { children: ReactNode }) {
       setLoginPending(false);
     }
   };
+  const switchLoginMode = (mode: string) => {
+    setLegacyMode(mode === 'token');
+    setLoginError('');
+  };
 
   if (session.isPending) {
     return <AuthLoadingState />;
@@ -119,29 +142,63 @@ export function AuthGate({ children }: { children: ReactNode }) {
   if (!session.data) {
     const error = loginError || (attempted && session.error ? session.error.message : '');
     return <div className="v2-auth-screen">
-      <section className="v2-auth-intro" aria-hidden="true">
-        <img src="/brand-logo.svg" alt="" />
-        <Title heading={1}>让每一辆车的数据<br />清晰、可控、可信</Title>
+      <section className="v2-auth-intro" aria-labelledby="v2-auth-intro-title">
+        <header>
+          <img src="/brand-logo.svg" alt="羚牛智能" />
+          <Tag color="blue" prefixIcon={<IconSafe />}>车辆数据可信入口</Tag>
+        </header>
+        <Title id="v2-auth-intro-title" heading={1}>让每一辆车的数据<br />清晰、可控、可信</Title>
         <Text>统一查看实时状态、车辆轨迹与里程数据。账号权限由管理员按车辆和功能精确分配。</Text>
-        <div><Tag color="blue">车辆级数据隔离</Tag><Tag color="cyan">登录审计</Tag><Tag color="green">可扩展身份接入</Tag></div>
+        <ul className="v2-auth-assurances" aria-label="平台身份能力">
+          {authAssurances.map((item) => <li key={item.title}>
+            <span aria-hidden="true">{item.icon}</span>
+            <div><strong>{item.title}</strong><small>{item.description}</small></div>
+          </li>)}
+        </ul>
+        <footer><IconLock /><Text>账号、车辆与菜单权限全程隔离</Text></footer>
       </section>
       <Card className="v2-auth-card" bodyStyle={{ padding: 0 }}>
-        <form className="v2-auth-form" onSubmit={login}>
+        <form className="v2-auth-form" onSubmit={login} aria-label={legacyMode ? '运维令牌登录' : '平台账号登录'}>
           <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>
             <Title heading={3}>登录车辆数据中台</Title>
             <Text type="secondary">{legacyMode ? '仅供平台运维使用，输入服务器访问令牌。' : '使用管理员为你开通的账号登录。'}</Text>
           </header>
-          {legacyMode ? <label><span>运维访问令牌</span><Input autoFocus required type="password" autoComplete="off" value={draftToken} onChange={setDraftToken} placeholder="Bearer token" size="large" /></label> : <>
-            <label><span>用户名</span><Input autoFocus required autoComplete="username" value={username} onChange={setUsername} placeholder="请输入用户名" size="large" /></label>
-            <label><span>密码</span><Input required type="password" autoComplete="current-password" value={password} onChange={setPassword} placeholder="请输入密码" size="large" /></label>
-          </>}
+          <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" value={username} onChange={setUsername} placeholder="请输入用户名" size="large" /></label>
+                <label><span>密码</span><Input required={!legacyMode} type="password" autoComplete="current-password" 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><Input autoFocus required={legacyMode} type="password" autoComplete="off" value={draftToken} onChange={setDraftToken} placeholder="请输入服务器访问令牌" size="large" /></label>
+              </div>
+            </Tabs.TabPane>
+          </Tabs>
           {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 ? '正在登录…' : '登录'}</Button>
-          <Button block className="v2-auth-mode-switch" type="tertiary" theme="borderless" onClick={() => { setLegacyMode((value) => !value); setLoginError(''); }}>
-            {legacyMode ? '返回账号密码登录' : '使用运维令牌登录'}
+          <Button block htmlType="submit" loading={loginPending} disabled={loginPending || (legacyMode ? !draftToken.trim() : !username.trim() || !password)} theme="solid" type="primary" size="large">
+            {loginPending ? '正在登录…' : legacyMode ? '验证令牌并进入' : '登录工作台'}
           </Button>
-          <div className="v2-auth-trust-note"><IconLock /><Text type="tertiary" size="small">登录后按账号隔离菜单与车辆数据</Text></div>
+          <div className="v2-auth-trust-note"><IconLock /><Text type="tertiary" size="small">登录后按账号隔离菜单、车辆和本地缓存</Text></div>
         </form>
       </Card>
     </div>;