9568dd7875
- Run cargo fmt on all Rust crates for consistent formatting - Update CLAUDE.md with WASM plugin commands and dev.ps1 instructions - Update wiki: add WASM plugin architecture, rewrite dev environment docs - Minor frontend cleanup (unused imports)
82 lines
2.6 KiB
Markdown
82 lines
2.6 KiB
Markdown
# frontend (Web 前端)
|
||
|
||
## 设计思想
|
||
|
||
前端是一个 Vite + React SPA，遵循 **UI 层只做展示** 的原则：
|
||
|
||
- **组件库优先** — 使用 Ant Design，不自造轮子
|
||
- **状态集中** — Zustand 管理全局状态（主题、侧边栏、认证）
|
||
- **API 层分离** — HTTP 调用封装到 service 层，组件不直接 fetch
|
||
- **代理开发** — Vite 开发服务器代理 `/api` 到后端 3000 端口
|
||
|
||
版本实际使用情况（与设计规格有差异）：
|
||
| 技术 | 规格 | 实际 |
|
||
|------|------|------|
|
||
| React | 18 | 19.2.4 |
|
||
| Ant Design | 5 | 6.3.5 |
|
||
| React Router | 7 | 7.14.0 |
|
||
|
||
## 代码逻辑
|
||
|
||
### 应用结构
|
||
```
|
||
main.tsx → App.tsx (ConfigProvider + HashRouter) → MainLayout → 各页面组件
|
||
```
|
||
|
||
### MainLayout 布局
|
||
经典 SaaS 后台管理布局：
|
||
- **左侧 Sidebar** — 可折叠暗色菜单，分组：首页/用户/权限/设置
|
||
- **顶部 Header** — 侧边栏切换 + 通知徽标(硬编码5) + 头像("Admin")
|
||
- **中间 Content** — React Router Outlet，多标签页切换
|
||
- **底部 Footer** — 租户名 + 版本号
|
||
|
||
### 状态管理 (Zustand)
|
||
```typescript
|
||
appStore {
|
||
isLoggedIn: boolean // 未使用，无登录页
|
||
tenantName: string // 默认 "ERP Platform"
|
||
theme: 'light' | 'dark' // 切换 Ant Design 主题
|
||
sidebarCollapsed: boolean
|
||
toggleSidebar(), setTheme(), login(), logout()
|
||
}
|
||
```
|
||
|
||
### 开发服务器代理
|
||
```
|
||
http://localhost:5174/api/* → http://localhost:3000/* (API)
|
||
ws://localhost:5174/ws/* → ws://localhost:3000/* (WebSocket)
|
||
```
|
||
|
||
### 当前状态
|
||
- 布局壳体完整，暗色/亮色主题切换可用
|
||
- 只有一个路由 `/` → 占位 HomePage ("Welcome to ERP Platform")
|
||
- 无 API 调用、无认证流程、无真实数据
|
||
- 通知计数硬编码为 5，用户名硬编码为 "Admin"
|
||
- 未实现 i18n（代码中有 zh_CN locale 但文案硬编码）
|
||
|
||
## 关联模块
|
||
|
||
- **[[erp-server]]** — API 后端，通过 Vite proxy 连接
|
||
- **[[infrastructure]]** — Docker 提供 PostgreSQL + Redis
|
||
|
||
## 关键文件
|
||
|
||
| 文件 | 职责 |
|
||
|------|------|
|
||
| `apps/web/src/main.tsx` | React 入口 |
|
||
| `apps/web/src/App.tsx` | 根组件：ConfigProvider + 路由 |
|
||
| `apps/web/src/layouts/MainLayout.tsx` | 完整后台管理布局 |
|
||
| `apps/web/src/stores/app.ts` | Zustand 全局状态 |
|
||
| `apps/web/src/index.css` | TailwindCSS 导入 |
|
||
| `apps/web/vite.config.ts` | Vite 配置 + API 代理 |
|
||
| `apps/web/package.json` | 依赖声明 |
|
||
|
||
## 待实现 (按 Phase)
|
||
|
||
| Phase | 内容 |
|
||
|-------|------|
|
||
| Phase 2 | 登录页、用户管理页、角色权限页 |
|
||
| Phase 3 | 系统配置管理页 |
|
||
| Phase 4 | 工作流设计器、审批列表 |
|
||
| Phase 5 | 消息中心、通知设置 |
|