feat: 默认账号文档与登录失败体验（E8）

- README 补充 seed:dev 默认账号（仅本地联调）
- LoginPage 增加后端不可达提示与 data-testid
- errorMessages 补充 SYS_001/AUTH_003 可读化

client/README.md

@@ -34,6 +34,20 @@ npm run dev
 - 前端在 401 时自动调用 `/api/auth/refresh` 并重试一次请求。
 - 登录与刷新请求都会附带 `x-device-fingerprint`。
 
+## 4.1 开发环境默认账号（seed:dev）
+仅用于本地联调（`cd server && npm run seed:dev`）：
+
+| 角色 | 账号 | 密码 |
+|---|---|---|
+| employee | `[email protected]` | `EmployeePassword1234` |
+| manager | `[email protected]` | `ManagerPassword1234` |
+| finance | `[email protected]` | `FinancePassword1234` |
+| finance_mgr | `[email protected]` | `FinanceMgrPassword1234` |
+| admin | `[email protected]` | `AdminPassword1234` |
+| ceo | `[email protected]` | `CeoPassword1234` |
+
+忘记密码：试运行/生产建议采用“管理员重置密码”策略。
+
 ## 5. 菜单与权限（当前壳层）
 - 仪表盘：登录即可访问。
 - 我的报销：`expense.view_own` 或 `expense.view_all`。

client/src/api/errorMessages.ts

@@ -7,6 +7,10 @@ export function mapApiErrorMessage(
     return "账号或密码错误，请检查后重试。";
   }
 
+  if (code === "AUTH_003") {
+    return "账号已离职/禁用，请联系管理员。";
+  }
+
   if (code === "AUTH_004") {
     return "登录状态失效，请重新登录。";
   }
@@ -23,6 +27,10 @@ export function mapApiErrorMessage(
     return "目标数据不存在或已被删除。";
   }
 
+  if (code === "SYS_001") {
+    return "服务暂不可用，请稍后重试或联系管理员。";
+  }
+
   if (code === "VALID_002") {
     return "输入内容长度不足，请补充后再提交。";
   }
@@ -59,4 +67,3 @@ export function mapApiErrorMessage(
 
   return fallbackMessage || "请求失败，请稍后重试。";
 }
-

client/src/pages/LoginPage.tsx

@@ -1,7 +1,12 @@
 import { useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
 import { useAuth } from "../auth/AuthContext";
+import { Button } from "../components/ui/button";
+import { Card } from "../components/ui/card";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
 
 function resolveRedirect(searchParams: URLSearchParams) {
   const redirect = searchParams.get("redirect");
@@ -38,7 +43,9 @@ export function LoginPage() {
       navigate(redirectTo, { replace: true });
     } catch (err) {
       if (isApiError(err)) {
-        setError(`${err.code}: ${err.message}`);
+        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
+      } else if (err instanceof TypeError) {
+        setError("无法连接后端服务，请确认 server 已启动（http://127.0.0.1:3000）。");
       } else {
         setError("登录失败，请稍后重试");
       }
@@ -48,49 +55,53 @@ export function LoginPage() {
   }
 
   return (
-    <div className="card-std border-primary-100">
+    <Card className="space-y-6 border-primary-100 p-6">
       <div className="mb-6">
         <p className="text-xs font-semibold uppercase tracking-wide text-primary">hyb-oa</p>
         <h1 className="mt-2 text-2xl font-bold text-slate-900">登录工作台</h1>
         <p className="mt-2 text-sm text-secondary">使用邮箱/手机号与密码登录。</p>
+        <p className="mt-1 text-xs text-slate-500">忘记密码：请联系管理员重置。</p>
       </div>
 
       <form className="space-y-4" onSubmit={handleSubmit}>
-        <label className="block text-sm font-medium text-slate-700" htmlFor="identifier">
-          账号
-          <input
+        <div className="space-y-1">
+          <Label htmlFor="identifier">账号</Label>
+          <Input
             autoComplete="username"
-            className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-100"
+            data-testid="login-identifier"
             id="identifier"
             onChange={(event) => setIdentifier(event.target.value)}
             placeholder="邮箱或手机号"
             value={identifier}
           />
-        </label>
+        </div>
 
-        <label className="block text-sm font-medium text-slate-700" htmlFor="password">
-          密码
-          <input
+        <div className="space-y-1">
+          <Label htmlFor="password">密码</Label>
+          <Input
             autoComplete="current-password"
-            className="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-100"
+            data-testid="login-password"
             id="password"
             onChange={(event) => setPassword(event.target.value)}
             placeholder="请输入密码"
             type="password"
             value={password}
           />
-        </label>
+        </div>
 
         {error ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+          <p
+            className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
+            data-testid="login-error"
+          >
             {error}
           </p>
         ) : null}
 
-        <button className="btn-primary w-full" disabled={submitting} type="submit">
+        <Button data-testid="login-submit" className="w-full" disabled={submitting} type="submit">
           {submitting ? "登录中..." : "登录"}
-        </button>
+        </Button>
       </form>
-    </div>
+    </Card>
   );
 }