refine Semi UI platform shell and states

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

@@ -27,6 +27,35 @@ afterEach(() => {
   window.sessionStorage.clear();
 });
 
+test('uses a branded Semi UI session state while restoring authentication', () => {
+  mocks.session.mockReturnValue(new Promise(() => undefined));
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+
+  const view = render(<QueryClientProvider client={client}><AuthGate><div>受保护工作台</div></AuthGate></QueryClientProvider>);
+
+  expect(screen.getByRole('status')).toHaveTextContent('正在验证登录状态');
+  expect(screen.getByRole('status')).toHaveTextContent('账号、菜单与车辆权限');
+  expect(screen.getByAltText('羚牛智能')).toHaveAttribute('src', '/brand-logo.svg');
+  expect(view.container.querySelector('.v2-auth-loading.semi-card')).toBeInTheDocument();
+  expect(view.container.querySelectorAll('.v2-auth-loading-skeleton > i')).toHaveLength(3);
+});
+
+test('presents failed credentials as a clear Semi UI alert without losing the login form', async () => {
+  mocks.session.mockRejectedValue(new Error('未登录'));
+  mocks.login.mockRejectedValue(new Error('账号或密码错误'));
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+
+  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: '登录' }));
+
+  expect(await screen.findByRole('alert')).toHaveTextContent('登录未完成');
+  expect(screen.getByRole('alert')).toHaveTextContent('账号或密码错误');
+  expect(view.container.querySelector('.v2-auth-error .semi-banner')).toBeInTheDocument();
+  expect(screen.getByPlaceholderText('请输入用户名')).toBeInTheDocument();
+});
+
 test('treats login and logout as complete query and mutation cache boundaries', 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,5 +1,6 @@
+import { IconAlertTriangle, IconLock, IconSafe } from '@douyinfe/semi-icons';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Button, Card, Input, Spin, 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 { clearAccessToken, getAccessToken, PLATFORM_UNAUTHORIZED_EVENT, PlatformSession, setAccessToken } from './session';
@@ -13,6 +14,40 @@ type AuthContextValue = {
 
 const AuthContext = createContext<AuthContextValue | null>(null);
 
+function AuthLoadingState() {
+  return <main className="v2-auth-screen is-session-loading">
+    <Card className="v2-auth-card v2-auth-loading" bodyStyle={{ padding: 0 }} aria-label="正在恢复平台会话">
+      <div className="v2-auth-loading-inner">
+        <header className="v2-auth-loading-header">
+          <img src="/brand-logo.svg" alt="羚牛智能" />
+          <Tag color="blue" prefixIcon={<IconSafe />}>安全会话</Tag>
+        </header>
+        <div className="v2-auth-loading-status" role="status" aria-live="polite">
+          <span><Spin size="large" /></span>
+          <div>
+            <Title heading={4}>正在验证登录状态</Title>
+            <Text type="tertiary">正在恢复账号、菜单与车辆权限，完成后会自动进入工作台。</Text>
+          </div>
+        </div>
+        <div className="v2-auth-loading-skeleton" aria-hidden="true"><i /><i /><i /></div>
+        <footer><IconLock /><Text type="tertiary" size="small">会话仅保存在当前浏览器，切换账号时会清理用户数据缓存。</Text></footer>
+      </div>
+    </Card>
+  </main>;
+}
+
+function AuthErrorMessage({ message }: { message: string }) {
+  return <div className="v2-auth-error">
+    <Banner
+      type="danger"
+      bordered
+      icon={<IconAlertTriangle />}
+      title="登录未完成"
+      description={message}
+    />
+  </div>;
+}
+
 export function usePlatformSession() {
   const value = useContext(AuthContext);
   if (!value) throw new Error('usePlatformSession must be used inside AuthGate');
@@ -79,7 +114,7 @@ export function AuthGate({ children }: { children: ReactNode }) {
   };
 
   if (session.isPending) {
-    return <div className="v2-auth-screen"><Card className="v2-auth-card v2-auth-loading"><img className="v2-auth-logo" src="/brand-logo.svg" alt="羚牛智能" /><Spin size="large" /><Text strong>正在验证登录状态…</Text></Card></div>;
+    return <AuthLoadingState />;
   }
   if (!session.data) {
     const error = loginError || (attempted && session.error ? session.error.message : '');
@@ -92,19 +127,21 @@ export function AuthGate({ children }: { children: ReactNode }) {
       </section>
       <Card className="v2-auth-card" bodyStyle={{ padding: 0 }}>
         <form className="v2-auth-form" onSubmit={login}>
-          <img className="v2-auth-logo" src="/brand-logo.svg" alt="羚牛智能" />
-          <Title heading={3}>登录车辆数据中台</Title>
-          <Text type="secondary">{legacyMode ? '仅供平台运维使用，输入服务器访问令牌。' : '使用管理员为你开通的账号登录。'}</Text>
+          <header className="v2-auth-form-heading">
+            <img className="v2-auth-logo" src="/brand-logo.svg" alt="羚牛智能" />
+            <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>
           </>}
-          {error ? <Text type="danger" role="alert">{error}</Text> : null}
+          {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>
-          <Text type="tertiary" size="small">登录即表示你同意遵守平台数据安全规范</Text>
+          <div className="v2-auth-trust-note"><IconLock /><Text type="tertiary" size="small">登录后按账号隔离菜单与车辆数据</Text></div>
         </form>
       </Card>
     </div>;