diff --git a/docs/superpowers/specs/2026-06-01-FE-01.md b/docs/superpowers/specs/2026-06-01-FE-01.md new file mode 100644 index 0000000..7e32241 --- /dev/null +++ b/docs/superpowers/specs/2026-06-01-FE-01.md @@ -0,0 +1,163 @@ +# FE-01 登录页 — 实现规格(前端) + +> 阶段:前端(frontend)。作用域限定 `frontend/` 下的页面 / 组件 / 路由 / store / api / 样式。 +> SSoT 引用:需求卡片 `docs/01-需求清单/USR-用户管理/REQ-USR-004.md`;原型 `prototype/erp.html`(`#screen-login` 区域,布局/交互权威);API 契约 `docs/05-API接口契约.md` § REQ-USR-004;技术规范 `docs/04-技术规范.md` § 零 / § 二;Design Tokens `src/styles/tokens.css`。 +> 本规格只消费已锁定事实。后端身份认证、BCrypt 比对、JWT 签发、限流等业务逻辑全部在后端(见 REQ-USR-004 后端规格),前端只负责采集输入、提交、依据响应/错误码渲染状态与文案。 + +--- + +## 1. 关联 REQ + 关联原型 + +| 维度 | 内容 | +|---|---| +| 业务功能 | FE-01 登录页(用户名/密码/版本下拉登录) | +| 关联 REQ | REQ-USR-004 登录用户(主);其「版本」下拉数据依赖后端 `GET /api/usr/companies`(REQ-USR-004 后端补齐的配套只读端点) | +| 关联原型 | `prototype/erp.html` → `
`(含 `.login-wrap` / `.login-head` / `.login-hero` / `.login-card` / `.login-foot`) | +| 路由 | `/login`(React Router v6)。登录成功后跳转主页落地路由(属 FE-02 范畴,本页只负责导航跳转动作,目标路径默认 `/`,见 § 7 决策 D3) | +| 落地组件目录 | `frontend/src/pages/usr/Login/`(页面);登录态写入 `frontend/src/store/slices/authSlice`;接口走 `frontend/src/api/usrApi.ts` + `frontend/src/api/request.ts` | + +> 原型 `#screen-login` 用纯静态 HTML + 内联 demo 脚本(`goTo('login')` 默认进登录页、`.submit[data-go=main]` 点击直接切主页、`#ver-drop` 点击切换 `.open` 展开版本项)模拟交互。本规格按 React + AntD 5 复刻其**布局与交互语义**,但表单校验、提交、下拉取数、错误反馈改为真实对接后端。 + +--- + +## 2. 组件树(按区域分块,推导自 prototype DOM) + +页面根 `LoginPage`(路由 `/login` 挂载),结构对应原型 `.login-wrap`(占满视口、纵向 flex:头部 / 主视觉 / 页脚): + +``` +LoginPage (容器,对应 .login-wrap:position 占满、flex column、背景 --color-bg-base) +├── LoginHeader (对应 .login-head:左 Logo SVG + 品牌名「Antler ERP」+ 副标题「欢迎登录EBC平台」) +│ ├── BrandLogo (鹿角 SVG,复用原型 inline svg path) +│ ├── BrandName ("Antler ERP") +│ └── BrandSub ("欢迎登录EBC平台") +├── LoginHero (对应 .login-hero:占满剩余高度的主视觉区,深蓝渐变 + 网格透视背景) +│ ├── HeroText (对应 .login-text:英文标语 / 中文「企业业务能力平台」/ 巨型 "ERP") +│ └── LoginCard (对应 .login-card:右侧浮层登录卡片,AntD
容器) +│ ├── CardTitle ("用户登录") +│ └── LoginForm (AntD ,提交触发认证) +│ ├── Form.Item[sUserName] → 占位「请输入你的用户名」 +│ ├── Form.Item[password] → 占位「请输入你的密码」(输入显示星号) +│ ├── Form.Item[companyId] →