feat(frontend): 完成品牌 SVG 与后台 Phase 1 基础切片
This commit is contained in:
yml2213
@@ -0,0 +1,181 @@
|
||||
# Phase 1 验收报告（基础切片）
|
||||
|
||||
> 日期：2026-10-30
|
||||
> 项目：解忧商行（hfb_jysh）
|
||||
> 阶段：Phase 1 · 品牌与设计系统 / 后台基础 Shell
|
||||
> 结论：**基础切片通过，继续扩展页面**
|
||||
|
||||
---
|
||||
|
||||
## 1. 本批次完成内容
|
||||
|
||||
### 1.1 SVG 品牌资产
|
||||
|
||||
已从现有 PNG 重绘为可缩放 SVG：
|
||||
|
||||
- 浅底横版：`frontend/src/assets/brand/logo-light.svg`
|
||||
- 深底反白横版：`frontend/src/assets/brand/logo-dark.svg`
|
||||
- 独立朱砂印章：`frontend/src/assets/brand/logo-seal.svg`
|
||||
- favicon：`frontend/public/favicon.svg`
|
||||
|
||||
`BrandLogo` 组件已支持三种变体：
|
||||
|
||||
```tsx
|
||||
<BrandLogo variant="light" />
|
||||
<BrandLogo variant="dark" />
|
||||
<BrandLogo variant="seal" />
|
||||
```
|
||||
|
||||
> 当前 SVG 使用字体渲染中文；正式对外前建议把中文标题与英文辅助字转为路径，避免不同设备字体差异。
|
||||
|
||||
### 1.2 管理员独立 API 客户端
|
||||
|
||||
新增 `frontend/src/shared/api/adminClient.ts`：
|
||||
|
||||
- 独立 `withCredentials` Cookie 会话。
|
||||
- 不注入普通用户 Bearer Token。
|
||||
- 401 时单飞刷新 `/api/admin/auth/refresh`。
|
||||
- 刷新失败自动回后台登录页。
|
||||
- 与普通用户 `apiClient` 完全隔离，避免后台 401 被错误跳转到用户登录。
|
||||
|
||||
### 1.3 管理员会话与强制改密
|
||||
|
||||
新增：
|
||||
|
||||
- `frontend/src/stores/adminSession.ts`
|
||||
- `frontend/src/features/admin/AdminGuard.tsx`
|
||||
- `frontend/src/features/admin/AdminChangePasswordPage.tsx`
|
||||
|
||||
流程：
|
||||
|
||||
1. 管理员验证码登录。
|
||||
2. 后端返回 `password_must_change=true`。
|
||||
3. 前端强制跳转 `/console-jy8k3m/change-password`。
|
||||
4. 修改成功后重新拉取 `/api/admin/me`。
|
||||
5. 再进入后台仪表盘。
|
||||
|
||||
### 1.4 后台登录页
|
||||
|
||||
新增 `AdminLoginPage`：
|
||||
|
||||
- 管理员账号 / 密码 / 图形验证码。
|
||||
- 验证码失败自动刷新。
|
||||
- 深绿品牌面板 + 米白表单卡。
|
||||
- 与用户登录页共享品牌语言，但布局和信息层级不同。
|
||||
- 开发环境提示：`admin / JieyouAdmin@2026`。
|
||||
|
||||
### 1.5 浅色后台 Shell
|
||||
|
||||
新增 `frontend/src/layouts/AdminLayout.tsx`：
|
||||
|
||||
- 暖白侧栏，不使用旧站深蓝后台。
|
||||
- 墨绿选中态、朱砂强调。
|
||||
- 菜单分组：工作台、交易、商品、用户、财务、分销、运营、系统。
|
||||
- 按管理员权限码过滤菜单。
|
||||
- 顶栏：面包屑、管理员角色、账号菜单、退出后台。
|
||||
- 未迁移页面统一进入“Phase 1 · 待迁移”占位，不复用旧站页面。
|
||||
|
||||
### 1.6 真实仪表盘
|
||||
|
||||
新增 `AdminDashboardPage`：
|
||||
|
||||
- 今日订单、用户总数、在架商品、今日入账。
|
||||
- 商品待审核、待交接、待确认归还、进行中申诉。
|
||||
- 最近订单表格。
|
||||
- 数据来自真实 `/api/admin/dashboard`，不是静态假数据。
|
||||
|
||||
### 1.7 路由懒加载
|
||||
|
||||
`AppRouter` 已改为 `React.lazy + Suspense`：
|
||||
|
||||
- 首页商品列表、用户登录、后台登录、后台改密、后台仪表盘、后台 Shell 分别按路由加载。
|
||||
- 后台代码不会在用户首页首屏直接执行。
|
||||
- 已移除会提前触发后台模块加载的顶层 `import()`。
|
||||
|
||||
---
|
||||
|
||||
## 2. 验证结果
|
||||
|
||||
### 2.1 前端
|
||||
|
||||
```text
|
||||
npm run typecheck 通过
|
||||
npm run build 通过
|
||||
```
|
||||
|
||||
### 2.2 管理员接口
|
||||
|
||||
通过前端代理 `http://127.0.0.1:5289/api` 验证：
|
||||
|
||||
```text
|
||||
proxy login = ok
|
||||
must_change = false（改密后）
|
||||
proxy dashboard = ok
|
||||
today_orders = 0
|
||||
```
|
||||
|
||||
### 2.3 用户回归
|
||||
|
||||
```text
|
||||
user login = ok，已返回 token
|
||||
listings = ok，返回 1 件联调商品
|
||||
```
|
||||
|
||||
### 2.4 路由
|
||||
|
||||
```text
|
||||
/console-jy8k3m/login HTTP 200
|
||||
/favicon.svg HTTP 200
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 当前管理员账号
|
||||
|
||||
开发环境：
|
||||
|
||||
```text
|
||||
账号：admin
|
||||
密码：JieyouAdmin@2026
|
||||
后台：http://localhost:5289/console-jy8k3m/login
|
||||
```
|
||||
|
||||
初始密码已通过真实改密接口更新；`backend/.env` 中的 `ADMIN_BOOTSTRAP_PASSWORD` 也已同步，后续空库初始化会使用新密码。
|
||||
|
||||
---
|
||||
|
||||
## 4. 构建体积
|
||||
|
||||
当前生产构建：
|
||||
|
||||
```text
|
||||
dist/assets/index-*.js 884.51 kB │ gzip 288.64 kB
|
||||
dist/assets/AdminLayout-*.js 36.74 kB │ gzip 12.98 kB
|
||||
dist/assets/AdminDashboardPage-*.js 179.67 kB │ gzip 58.44 kB
|
||||
```
|
||||
|
||||
**问题：** 首屏主包仍偏大，超过 Phase 1 目标。
|
||||
**原因：** Ant Design 基础组件被首页与后台共享，当前 Rollup 仍把较大依赖合并进 index。
|
||||
**下一步：** 在 Phase 1 后续批次做组件级按需、图表库延迟加载、后台页面进一步拆分，并引入包分析工具定位。
|
||||
|
||||
---
|
||||
|
||||
## 5. 已知限制
|
||||
|
||||
1. 移动端 `/m` 尚未开始迁移。
|
||||
2. 后台 43 个页面目前只有仪表盘是真实页面，其余为统一占位。
|
||||
3. 分销后台尚未做品牌轻改。
|
||||
4. 后台菜单权限码基于旧项目推断，后续需与后端权限表逐一核对。
|
||||
5. SVG 中文尚未转曲。
|
||||
6. 首屏包体仍偏大。
|
||||
7. 本批次尚未提交 Git。
|
||||
|
||||
---
|
||||
|
||||
## 6. 建议下一批次
|
||||
|
||||
1. 移动端 `/m` 首页 + 商品列表 + 底部导航。
|
||||
2. 后台列表页原型：DataTable、FilterBar、详情 Drawer、批量操作。
|
||||
3. 先迁移后台订单列表与商品审核列表。
|
||||
4. 分销后台主题轻改。
|
||||
5. 包体分析与 AntD 按需优化。
|
||||
+1
-1
@@ -63,7 +63,7 @@
|
||||
| 品牌反白文字 | `#F0F4F2` |
|
||||
| 页面米白底 | `#F6F2E8` |
|
||||
|
||||
> 目前没有矢量源文件。Phase 1 需要按现有 PNG 重绘 SVG：印章边框与「解忧」二字转为路径，中文主标题与英文辅助字转曲，交付横版、方形、单色、反白、竖版五套文件。
|
||||
> 目前没有原始矢量文件。Phase 1 已按现有 PNG 重绘第一版 SVG：`logo-light.svg`、`logo-dark.svg`、`logo-seal.svg`、`favicon.svg`。中文当前仍使用字体渲染，正式对外前需要把中文主标题、英文辅助字和印章文字转为路径，避免不同设备字体差异。
|
||||
|
||||
需要交付的 logo 版本：
|
||||
|
||||
|
||||
@@ -352,6 +352,8 @@ hfb_jysh/
|
||||
|
||||
### Phase 1：品牌与设计系统（1 周）
|
||||
|
||||
> 状态：**基础切片已完成（2026-10-30）**，验收见 [`Phase1-验收报告.md`](./Phase1-验收报告.md)。已完成 SVG 品牌资产、管理员会话、后台登录/强制改密/Shell/仪表盘与路由懒加载；移动端与后台列表页原型继续。
|
||||
|
||||
- 重绘 logo SVG：横版、方形印章、单色、反白。
|
||||
- 落地 Design Token：颜色、字体、间距、圆角、阴影、动效。
|
||||
- 搭建 AntD `ConfigProvider` 主题。
|
||||
|
||||
Reference in New Issue
Block a user