docs: 更新 phase1_log.md 前端骨架完工记录
This commit is contained in:
+83
-2
@@ -201,5 +201,86 @@ uvicorn app.main:app --reload
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
*本日志由 Claude Opus 4.7 基于 Sonnet 4.6 完工报告 + chat 关键决策整理生成。*
|
## 九、前端骨架完工记录(2026-05-15)
|
||||||
*下一次 Phase 收尾时,沿用本格式继续写 phase2_log.md。*
|
|
||||||
|
### 9.1 完成时间
|
||||||
|
- **前端骨架开发日期**:2026-05-15
|
||||||
|
- **前端骨架状态**:✅ 已完成
|
||||||
|
|
||||||
|
### 9.2 完成内容
|
||||||
|
|
||||||
|
1. **Vite + React 项目初始化**:`npm create vite@latest frontend -- --template react`
|
||||||
|
|
||||||
|
2. **核心依赖安装**:
|
||||||
|
- `antd` (UI 库)
|
||||||
|
- `@ant-design/icons`
|
||||||
|
- `zustand` (状态管理)
|
||||||
|
- `react-router-dom` v6
|
||||||
|
- `axios`
|
||||||
|
- `dayjs`
|
||||||
|
|
||||||
|
3. **Vite 代理配置**:`vite.config.js` 中 `/api` → `http://localhost:8000`
|
||||||
|
|
||||||
|
4. **AntD 中文 locale + 主题**:主色 `#6b8e6b`(深绿),圆角 12px/16px
|
||||||
|
|
||||||
|
5. **CSS 变量定义**:`src/index.css` 中定义奶油底 `#fbf9f1`、深绿 `#6b8e6b`、浅绿 `#c8d9b0`
|
||||||
|
|
||||||
|
6. **Auth 体系**:
|
||||||
|
- `services/http.js`:axios 实例,`withCredentials: true`
|
||||||
|
- `services/authService.js`:login/logout/me 三接口
|
||||||
|
- `stores/authStore.js`:Zustand,含 user/isLoading/login/logout/fetchMe
|
||||||
|
|
||||||
|
7. **路由守卫**:`components/AuthGuard/AuthGuard.jsx`,挂载时调用 me() 一次,401 跳转登录
|
||||||
|
|
||||||
|
8. **主布局**:`components/Layout/AppLayout.jsx` (侧边栏 + 顶栏 + 内容区 Outlet)
|
||||||
|
|
||||||
|
9. **侧边栏**:`SideNav.jsx`,6 项菜单(含 doco 占位),图标用 AntD icons
|
||||||
|
|
||||||
|
10. **顶栏**:`TopBar.jsx`,搜索框 + 通知 + 头像下拉(退出)
|
||||||
|
|
||||||
|
11. **登录页**:`pages/Login/Login.jsx`,AntD Form,用户名 + 密码,提交后调用 store.login()
|
||||||
|
|
||||||
|
12. **仪表盘**:`pages/Dashboard/Dashboard.jsx`:
|
||||||
|
- 顶部 Banner(题图占位)
|
||||||
|
- 3 个 KPI 卡(平均收视/完成率/待排期)
|
||||||
|
- 热点雷达占位(模块 H,Phase 4c)
|
||||||
|
- **近 9 期收视柱图**(假数据,三种颜色都有)
|
||||||
|
- 排播计划占位(模块 F,Phase 4b)
|
||||||
|
- 柱图下方:期次标题 + 编导头像 + 姓名
|
||||||
|
- 左下角颜色规则注释:红=优秀/蓝=达标/绿=待提升
|
||||||
|
|
||||||
|
13. **空页占位**:TPS / 知识库 / 编导首页 / 用户管理 / 文稿对齐(Doco 用 Result 组件)
|
||||||
|
|
||||||
|
14. **路由配置**:`App.jsx` 中 Routes 嵌套,AuthGuard 包裹,共 7 个路由
|
||||||
|
|
||||||
|
### 9.3 技术决策
|
||||||
|
|
||||||
|
- **角色拼音值**:前端代码中所有角色判断用 `zhipianren/zebian/biandao`,不得用英文别名
|
||||||
|
- **收视颜色判定(反直觉)**:红=优秀(>摸高)/蓝=达标(基础~摸高)/绿=待提升(<基础)
|
||||||
|
- **Session + Cookie**:axios `withCredentials: true`,Vite 代理 `/api`
|
||||||
|
- **刷新登录态保持**:Zustand 初始 user=null,AuthGuard 挂载时调用 me() 补全
|
||||||
|
|
||||||
|
### 9.4 文档修正(同期完成)
|
||||||
|
|
||||||
|
- `README.md`:近 4 期 → 近 9 期
|
||||||
|
- `dev_plan.md`:近 4 期 → 近 9 期
|
||||||
|
- `docs/git_workflow.md`:Z:\AIworks\ 路径残留 → E:\tps-dashboard\
|
||||||
|
|
||||||
|
### 9.5 Git commit 记录
|
||||||
|
|
||||||
|
| commit | 内容 |
|
||||||
|
|---|---|
|
||||||
|
| b39b7c8 | chore: 清理 indexUI 中文文件名空格与重复字符 |
|
||||||
|
| e907876 | docs: 仪表盘收视柱图统一为近 9 期(制片人 2026-05-15 拍板) |
|
||||||
|
| 233cb85 | docs: git_workflow.md 第 2/3 章路径残留 Z:\AIworks → E:\tps-dashboard 修正 |
|
||||||
|
| fef9e81 | feat: frontend skeleton done |
|
||||||
|
|
||||||
|
### 9.6 遗留事项
|
||||||
|
|
||||||
|
- `frontend/src/App.css` 和 `frontend/src/assets/` 是 Vite 模板自带,未使用但已 commit(不影响功能)
|
||||||
|
- Phase 2 需接入真实后端 API 数据
|
||||||
|
- Phase 2 仪表盘真实柱图需替换假数据
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*本日志由 MiniMax M2.7(Cline Act 模式)于 2026-05-15 前端骨架完工后追加。*
|
||||||
|
|||||||
Reference in New Issue
Block a user