| | |
|---|
| | | - **UI**：Ant Design 5 + `@ant-design/icons` |
|---|
| | | - **高级组件**：`@ant-design/pro-components`（表格优先使用其 `ProTable`） |
|---|
| | | - **状态**：Zustand 5（登录态持久化到 localStorage） |
|---|
| | | - **请求**：Axios（统一封装在 `src/api/request.ts`） |
|---|
| | | - **样式**：SCSS + Ant Design 主题 token + CSS 变量 |
|---|
| | | - **日期**：Day.js（已配置中文 locale） |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | ```text |
|---|
| | | src/ |
|---|
| | | ├── api/ # 接口层；当前只有模拟登录 auth.ts |
|---|
| | | ├── api/ # 接口层：request.ts（axios 封装）与登录 auth.ts |
|---|
| | | ├── components/ # 通用组件：AntdAppBridge（message 注入） |
|---|
| | | ├── layouts/ # BasicLayout：侧边栏、头部、内容区、面包屑 |
|---|
| | | ├── pages/ # 页面，按业务域分目录 |
|---|
| | | │ ├── login/ |
|---|
| | |
|---|
| | | │ ├── system/users/ |
|---|
| | | │ ├── business/{orders,customers}/ |
|---|
| | | │ └── error/NotFound.tsx |
|---|
| | | │ # 页面目录：index.tsx、columns.tsx、types.ts、server.ts、同名 .scss（按需） |
|---|
| | | ├── router/ |
|---|
| | | │ ├── routeConfig.tsx # 路由 + 菜单唯一数据源（含页面组件） |
|---|
| | | │ ├── menu.tsx # 菜单过滤与 antd Menu 结构生成 |
|---|
| | |
|---|
| | | ├── store/ # Zustand 登录态 |
|---|
| | | ├── styles/ # 全局 SCSS、通用页面样式 |
|---|
| | | ├── types/ # 全局类型 |
|---|
| | | ├── utils/ # 工具：feedback.ts（全局错误提示） |
|---|
| | | └── main.tsx # ConfigProvider + AntdApp + BrowserRouter |
|---|
| | | ``` |
|---|
| | | |
|---|
| | |
|---|
| | | ### 2. 登录态 |
|---|
| | | |
|---|
| | | - `src/store/auth.ts`：Zustand store，持久化 `token` 与 `user`。 |
|---|
| | | - 登录 / 退出：`src/api/auth.ts` 提供模拟登录。 |
|---|
| | | - 演示账号： |
|---|
| | | - `admin / admin123`：超级管理员。 |
|---|
| | | - `user / user123`：普通运营账号。 |
|---|
| | | - 登录 / 退出：`src/api/auth.ts` 调用 `POST /auth/tenant-login`，参数为 `{ phone, password, tenantCode }`。 |
|---|
| | | - 接口基础地址由 `.env` 中的 `VITE_API_BASE_URL` 配置。 |
|---|
| | | - 未登录访问受保护页面会跳转 `/login`，登录成功后返回原地址。 |
|---|
| | | |
|---|
| | | ### 3. 布局与样式 |
|---|
| | |
|---|
| | | |
|---|
| | | ## 六、新增页面流程 |
|---|
| | | |
|---|
| | | 1. 在 `src/pages/<业务域>/<页面>/` 下创建 `index.tsx`（有表格时增加 `columns.tsx`，有独立样式时增加同名 `.scss`）。 |
|---|
| | | 1. 在 `src/pages/<业务域>/<页面>/` 下创建 `index.tsx`（有表格时增加 `columns.tsx`，接口调用放在 `server.ts`，类型放 `types.ts`，有独立样式时增加同名 `.scss`）。 |
|---|
| | | 2. 在 `src/router/routeConfig.tsx` 中增加路由配置： |
|---|
| | | - 使用完整路径（如 `/system/users`）。 |
|---|
| | | - 配置 `title`、`icon`、`element`。 |
|---|
| | |
|---|
| | | |
|---|
| | | ## 七、接口与状态约定 |
|---|
| | | |
|---|
| | | - 所有请求统一放在 `src/api/` 下，按业务域拆分文件；不要在页面内直接写请求实现。 |
|---|
| | | - 当前 `src/api/auth.ts` 是前端模拟接口。接入真实后端时替换为实际请求，并保留登录态写入 store 的流程。 |
|---|
| | | - 页面级接口调用统一放在页面目录下的 `server.ts`，页面组件通过它调用接口，不要在组件内直接写请求实现。 |
|---|
| | | - 跨页面复用的接口可放在 `src/api/` 下，按业务域拆分文件。 |
|---|
| | | - 网络请求统一使用 `src/api/request.ts` 的 `request`（基于 axios），不要在页面或 `server.ts` 中直接使用 axios。 |
|---|
| | | - 开发环境通过 Vite 代理 `/proxy-api` 转发到 `VITE_API_PROXY_TARGET`（未配置时取 `VITE_API_BASE_URL`），因此浏览器端不会产生跨域请求；生产环境需后端配置 CORS，或使用同域反向代理。 |
|---|
| | | - 泛型：`request<TReq, TRes>(config, options)`，分别表示请求参数/请求体与响应 `data` 的类型。 |
|---|
| | | - 默认只返回响应 `data`；传 `parse: false` 时返回完整 `AxiosResponse`。 |
|---|
| | | - 默认自动提示错误，`showError: false` 可关闭；失败抛出 `ApiError`，包含 `status`、`data`、`response`、`config` 与原始错误。 |
|---|
| | | - 默认合并方法、URL、参数与请求体都相同的并发请求；`merge: false` 时每次都单独发送。 |
|---|
| | | - 通过 `signal: AbortSignal` 取消当前调用方的请求。 |
|---|
| | | - `src/api/auth.ts` 调用真实登录接口，登录成功后仍由 `src/store/auth.ts` 写入登录态。 |
|---|
| | | - 全局登录态只放在 `src/store/auth.ts`；页面局部状态使用 `useState` / `useMemo`。 |
|---|
| | | - 不要在前端持久化敏感信息；真实项目的 Token 建议使用 HttpOnly Cookie，并由后端处理过期与刷新。 |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | - 使用 BrowserRouter，生产环境需要配置 SPA fallback：所有前端路由回退到 `index.html`。 |
|---|
| | | - 构建产物在 `dist/`。 |
|---|
| | | - 开发环境的跨域由 Vite 代理 `/proxy-api` 处理；生产环境需要后端开启 CORS，或将前端与接口部署在同一域名下由反向代理转发。 |
|---|
| | | - 当前主包较大（Ant Design 全量依赖），后续可通过路由懒加载 / 手动分包优化。 |
|---|
