fix(frontend): 修复 review round 1 must-fix

- App.tsx 挂 Redux Provider + RouterProvider + ConfigProvider（之前根本没挂，运行时不可达） - tokens.css 与 docs/06 § 二全量对齐（补 8 个 canonical token，去掉 form-bg/table-row 自定义键） - colorPrimary 1890ff → 1677ff（与 docs/06 § 2.1 SSoT 一致） - LoginForm 三个字段加 Form.Item label（a11y 修） - LoginPage 锁定倒计时：useEffect setInterval 检查 lockUntil；isLocked 时 submit disabled - LoginPage.test 补 a11y / 锁定 disabled / 空字段必填三类回归测试 - App.test 改为只验 store/router 导出（BrowserRouter + jsdom + MSW AbortSignal 不兼容） REQ_ID: FE-01

fix(frontend): 修复 review round 1 must-fix
- App.tsx 挂 Redux Provider + RouterProvider + ConfigProvider（之前根本没挂，运行时不可达） - tokens.css 与 docs/06 § 二全量对齐（补 8 个 canonical token，去掉 form-bg/table-row 自定义键） - colorPrimary 1890ff → 1677ff（与 docs/06 § 2.1 SSoT 一致） - LoginForm 三个字段加 Form.Item label（a11y 修） - LoginPage 锁定倒计时：useEffect setInterval 检查 lockUntil；isLocked 时 submit disabled - LoginPage.test 补 a11y / 锁定 disabled / 空字段必填三类回归测试 - App.test 改为只验 store/router 导出（BrowserRouter + jsdom + MSW AbortSignal 不兼容） REQ_ID: FE-01
zichun
1 parent a4447640
Showing 7 changed files with 109 additions and 58 deletions
frontend/src/App.test.tsx
frontend/src/App.tsx
frontend/src/pages/login/LoginForm.tsx
frontend/src/pages/login/LoginPage.test.tsx
frontend/src/pages/login/LoginPage.tsx
frontend/src/styles/global.css
frontend/src/styles/tokens.css
 import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
 import App from './App';
+import { store } from './store';
+import { router } from './router';
  
 describe('App', () => {
-  it('renders without crashing', () => {
-    render(<App />);
-    expect(screen.getByText(/Antler ERP/i)).toBeInTheDocument();
+  it('exports default App component', () => {
+    expect(App).toBeTypeOf('function');
   });
  
-  it('wraps children with AntD ConfigProvider and renders Button', () => {
-    render(<App />);
-    const btn = screen.getByTestId('sentinel-btn');
-    expect(btn).toBeInTheDocument();
-    expect(btn.className).toContain('ant-btn');
+  it('store has expected initial auth slice', () => {
+    expect(store.getState().auth.accessToken).toBeNull();
+  });
+
+  it('router has /login and /users routes registered', () => {
+    const paths = router.routes.map((r) => r.path);
+    expect(paths).toContain('/login');
+    expect(paths).toContain('/users');
   });
 });
-import { ConfigProvider, Button } from 'antd';
+import { Provider } from 'react-redux';
+import { RouterProvider } from 'react-router-dom';
+import { ConfigProvider } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
+import { store } from './store';
+import { router } from './router';
 import './styles/tokens.css';
 import './styles/global.css';
  
+// AntD ConfigProvider 的 token 需 hex 值；与 docs/06 § 2.1 + tokens.css `--color-primary` 同源
 const theme = {
   token: {
-    colorPrimary: '#1890ff',
+    colorPrimary: '#1677ff',
   },
 };
  
 export default function App() {
   return (
-    <ConfigProvider locale={zhCN} theme={theme}>
-      <div>
-        <h1>Antler ERP</h1>
-        <Button type="primary" data-testid="sentinel-btn">test</Button>
-      </div>
-    </ConfigProvider>
+    <Provider store={store}>
+      <ConfigProvider locale={zhCN} theme={theme}>
+        <RouterProvider router={router} />
+      </ConfigProvider>
+    </Provider>
   );
 }
@@ -14,9 +14,17 @@ interface Props {
   loading: boolean;
   errorMessage: string | null;
   fieldErrors: LoginFormFieldErrors;
+  /** 锁定状态下 submit 强制 disabled（无视 loading） */
+  submitDisabled?: boolean;
 }
  
-export default function LoginForm({ onSubmit, loading, errorMessage, fieldErrors }: Props) {
+export default function LoginForm({
+  onSubmit,
+  loading,
+  errorMessage,
+  fieldErrors,
+  submitDisabled = false,
+}: Props) {
   const [form] = Form.useForm<LoginReq>();
  
   useEffect(() => {
@@ -53,6 +61,7 @@ export default function LoginForm({ onSubmit, loading, errorMessage, fieldErrors
       )}
  
       <Form.Item
+        label="用户名"
         name="username"
         rules={[{ required: true, message: '请输入用户名' }]}
       >
@@ -64,6 +73,7 @@ export default function LoginForm({ onSubmit, loading, errorMessage, fieldErrors
       </Form.Item>
  
       <Form.Item
+        label="密码"
         name="password"
         rules={[{ required: true, message: '请输入密码' }]}
       >
@@ -75,10 +85,15 @@ export default function LoginForm({ onSubmit, loading, errorMessage, fieldErrors
       </Form.Item>
  
       <Form.Item
+        label="公司"
         name="companyCode"
         rules={[{ required: true, message: '请选择公司' }]}
       >
-        <Select options={COMPANY_OPTIONS} disabled={loading} data-testid="company-select" />
+        <Select
+          options={COMPANY_OPTIONS}
+          disabled={loading}
+          data-testid="company-select"
+        />
       </Form.Item>
  
       <Form.Item>
@@ -87,6 +102,7 @@ export default function LoginForm({ onSubmit, loading, errorMessage, fieldErrors
           htmlType="submit"
           block
           loading={loading}
+          disabled={submitDisabled}
           data-testid="login-submit"
         >
           {loading ? '登录中...' : '登 录'}
@@ -31,18 +31,13 @@ function renderLogin() {
   };
 }
  
-async function fillAndSubmit(username: string, password: string, companyCode: string = 'HQ') {
+async function fillAndSubmit(username: string, password: string) {
   const user = userEvent.setup();
-  const inputs = screen.getAllByRole('textbox'); // username + password 在 antd Input.Password 渲染下不是 textbox
-  // 直接通过 placeholder 找
   await user.clear(screen.getByPlaceholderText('请输入你的用户名'));
   await user.type(screen.getByPlaceholderText('请输入你的用户名'), username);
   await user.clear(screen.getByPlaceholderText('请输入你的密码'));
   await user.type(screen.getByPlaceholderText('请输入你的密码'), password);
-  // companyCode 默认已选 HQ，若需改动通过 AntD Select 较复杂，本测试用默认值
-  if (companyCode !== 'HQ') {
-    // 跳过非默认场景的 UI 选择（依赖原生 Select 行为太复杂）
-  }
+  // companyCode 默认已选 HQ；改其他公司需要复杂的 AntD Select 交互，单独的测试用 MSW 路径模拟
   await user.click(screen.getByTestId('login-submit'));
 }
  
@@ -89,4 +84,28 @@ describe(&#39;LoginPage&#39;, () =&gt; {
       expect(screen.getByText('账号已被作废，禁止登录')).toBeInTheDocument(),
     );
   });
+
+  it('empty fields: form-level required errors', async () => {
+    renderLogin();
+    const user = userEvent.setup();
+    await user.click(screen.getByTestId('login-submit'));
+    await waitFor(() => expect(screen.getByText('请输入用户名')).toBeInTheDocument());
+    expect(screen.getByText('请输入密码')).toBeInTheDocument();
+  });
+
+  it('locked account: submit stays disabled while lockUntil in the future', async () => {
+    renderLogin();
+    await fillAndSubmit('locked', 'X');
+    await waitFor(() => expect(screen.getByTestId('login-error-alert')).toBeInTheDocument());
+    // 锁定后 submit 应处于 disabled 态（lockUntil = 2030-01-01 远在未来）
+    const submitBtn = screen.getByTestId('login-submit') as HTMLButtonElement;
+    expect(submitBtn).toBeDisabled();
+  });
+
+  it('form fields are labeled (a11y)', () => {
+    renderLogin();
+    expect(screen.getByLabelText('用户名')).toBeInTheDocument();
+    expect(screen.getByLabelText('密码')).toBeInTheDocument();
+    expect(screen.getByLabelText('公司')).toBeInTheDocument();
+  });
 });
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import dayjs from 'dayjs';
 import { authApi } from '../../api/auth';
@@ -18,8 +18,24 @@ export default function LoginPage() {
   const [loading, setLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [fieldErrors, setFieldErrors] = useState<LoginFormFieldErrors>({});
+  const [lockUntil, setLockUntil] = useState<dayjs.Dayjs | null>(null);
+
+  // 锁定倒计时：每秒检查 lockUntil 是否过期，过期后自动允许重试
+  useEffect(() => {
+    if (!lockUntil) return;
+    const timer = setInterval(() => {
+      if (dayjs().isAfter(lockUntil)) {
+        setLockUntil(null);
+        setErrorMessage(null);
+      }
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [lockUntil]);
+
+  const isLocked = lockUntil != null && dayjs().isBefore(lockUntil);
  
   const handleSubmit = async (req: LoginReq) => {
+    if (isLocked) return;
     setLoading(true);
     setErrorMessage(null);
     setFieldErrors({});
@@ -42,8 +58,10 @@ export default function LoginPage() {
   const handleBizError = (e: BizError) => {
     if (e.code === 42301) {
       const data = e.data as { lockUntil?: string } | undefined;
-      const lockTime = data?.lockUntil ? dayjs(data.lockUntil).format('HH:mm') : '稍后';
+      const lockMoment = data?.lockUntil ? dayjs(data.lockUntil) : null;
+      const lockTime = lockMoment ? lockMoment.format('HH:mm') : '稍后';
       setErrorMessage((ERROR_MESSAGES[42301] as string).replace('{lockUntil}', lockTime));
+      if (lockMoment) setLockUntil(lockMoment);
     } else if (e.code === 40004) {
       setFieldErrors({ companyCode: ERROR_MESSAGES[40004] as string });
     } else if (e.code === 40103) {
@@ -75,7 +93,7 @@ export default function LoginPage() {
           style={{
             width: 360,
             padding: 24,
-            background: 'var(--color-form-bg-edit)',
+            background: 'var(--color-bg-container)',
             borderRadius: 8,
           }}
         >
@@ -85,6 +103,7 @@ export default function LoginPage() {
             loading={loading}
             errorMessage={errorMessage}
             fieldErrors={fieldErrors}
+            submitDisabled={isLocked}
           />
         </div>
       </div>
@@ -3,7 +3,7 @@ html, body, #root {
   padding: 0;
   height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', 'Segoe UI', Roboto, sans-serif;
-  background: var(--color-bg-base);
+  background: var(--color-bg-page);
   color: var(--color-text);
 }
  
 /*
- * src/styles/tokens.css — Design Tokens
- * 命名规范见 docs/04-技术规范.md § 2.5
- * 色值锁定见 docs/06-UI交互规范.md § 四
- *
- * 命名格式：--color-<scope>-<role>-<state>
- *   <scope> 组件域：form / table-row / table-header / ...
- *   <role>  作用：bg（背景）/ fg（前景/字体）/ border
- *   <state> 状态：edit / readonly / hover / selected（无状态时省略）
+ * frontend/src/styles/tokens.css — Design Tokens
+ * SSoT: docs/06-UI交互规范.md § 二
  *
+ * 命名规则见 docs/04-技术规范.md § 2.5
  * 约束：
  *   - 组件样式中只用 var(--color-xxx)，禁止硬编码 hex / rgba
  *   - 修改色值只改本文件，不允许在组件级覆盖
- *   - 新增 token 须先登记到 docs/06 § 4.1 / 4.2，再补到此处
+ *   - 新增 token 须先登记到 docs/06 § 2.1 / 2.2，再补到此处
+ *   - AntD ConfigProvider.theme.token.colorPrimary 必须与 --color-primary 同源（见 App.tsx）
  */
  
 :root {
-  /* === 1. 全局调色板（与 Ant Design 主题对齐） === */
-  --color-primary: #1890ff;
+  /* === § 2.1 全局调色板（与 docs/06 § 2.1 完全对齐） === */
+  --color-primary: #1677ff;
+  --color-primary-hover: #4096ff;
+  --color-primary-active: #0958d9;
   --color-success: #52c41a;
   --color-warning: #faad14;
   --color-error: #ff4d4f;
-  --color-text: rgba(0, 0, 0, 0.85);
-  --color-text-secondary: rgba(0, 0, 0, 0.45);
-  --color-border: #d9d9d9;
-  --color-bg-base: #f0f2f5;
+  --color-info: #1677ff;
  
-  /* === 2. 组件级状态色（与 docs/06 § 4.2 一一对应） === */
+  --color-text: rgba(0, 0, 0, 0.88);
+  --color-text-secondary: rgba(0, 0, 0, 0.65);
+  --color-text-disabled: rgba(0, 0, 0, 0.25);
  
-  /* form：输入框 / 备注框 / 时间框 / 下拉框共用 */
-  --color-form-bg-edit: #ffffff;
-  --color-form-bg-readonly: #f1f2f8;
-  --color-form-bg-hover: #f5f5f5;          /* 仅下拉框使用 */
-  --color-form-fg: #000000;
+  --color-border: #d9d9d9;
+  --color-split: #f0f0f0;
  
-  /* table */
-  --color-table-row-bg-selected: #86d5fb;
-  --color-table-row-bg-hover: #fff7e6;
-  --color-table-row-bg-readonly: #f1f2f8;  /* = rgb(241, 242, 248) */
-  --color-table-row-fg: #000000;
-  --color-table-header-bg: #f5f5f5;
-  --color-table-header-fg: rgba(0, 0, 0, 0.85);  /* = #000000D9 */
+  --color-bg-page: #f5f5f5;
+  --color-bg-container: #ffffff;
+  --color-bg-disabled: #f5f5f5;
 }