erp/wiki/frontend.md

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)

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	消息中心、通知设置