| | |
|---|
| | | npm run typecheck # 仅做 TypeScript 类型检查 |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ## 演示账号 |
|---|
| | | ## 登录接口 |
|---|
| | | |
|---|
| | | | 账号 | 密码 | 说明 | |
|---|
| | | | ------- | ---------- | ------------ | |
|---|
| | | | `admin` | `admin123` | 超级管理员 | |
|---|
| | | | `user` | `user123` | 普通运营账号 | |
|---|
| | | 登录使用 `POST /auth/tenant-login`： |
|---|
| | | |
|---|
| | | 登录页提供了一键填充演示账号的按钮。 |
|---|
| | | ```json |
|---|
| | | { |
|---|
| | | "phone": "string", |
|---|
| | | "password": "string", |
|---|
| | | "tenantCode": "string" |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | - **开发环境**：请求走 Vite 代理 `/proxy-api`，代理目标由 `.env` 中的 `VITE_API_PROXY_TARGET` 配置（未配置时取 `VITE_API_BASE_URL`），浏览器端不会产生跨域请求。 |
|---|
| | | - **生产环境**：请求直接使用 `VITE_API_BASE_URL`；需要在后端开启 CORS，或将前端与接口部署在同一域名下由反向代理转发。 |
|---|
| | | |
|---|
| | | ## 功能说明 |
|---|
| | | |
|---|
| | | ### 1. 登录 / 退出 |
|---|
| | | |
|---|
| | | - 登录页：`src/pages/login/index.tsx` |
|---|
| | | - 登录页：`src/pages/login/index.tsx`，调用 `POST /auth/tenant-login` |
|---|
| | | - 登录状态使用 Zustand + `localStorage` 持久化：`src/store/auth.ts` |
|---|
| | | - 未登录访问受保护页面时，会跳转登录页并记录原地址，登录成功后自动返回 |
|---|
| | | - 顶部用户菜单支持退出登录（带二次确认），退出后回到登录页 |
|---|
| | |
|---|
| | | ```tsx |
|---|
| | | { |
|---|
| | | path: '/system', |
|---|
| | | title: '系统管理', |
|---|
| | | icon: <SettingOutlined />, |
|---|
| | | title: '用户与权限', |
|---|
| | | icon: <SafetyCertificateOutlined />, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | path: '/system/users', |
|---|
| | |
|---|
| | | - 受保护路由统一包裹登录校验，未登录时跳转 `/login` 并带上 `state.from` |
|---|
| | | - 登录成功后自动返回原地址 |
|---|
| | | |
|---|
| | | ### 4. 演示页面 |
|---|
| | | ### 4. 网络请求 |
|---|
| | | |
|---|
| | | 统一使用 `src/api/request.ts` 的 `request`（基于 axios）： |
|---|
| | | |
|---|
| | | ```ts |
|---|
| | | const result = await request<{ keyword: string }, PageResult<User>>({ |
|---|
| | | url: '/api/users', |
|---|
| | | method: 'GET', |
|---|
| | | params: { keyword }, |
|---|
| | | }); |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | - 泛型 `request<TReq, TRes>` 分别表示请求参数/请求体与响应 `data` 的类型。 |
|---|
| | | - 默认只返回响应 `data`；传 `parse: false` 返回完整 `AxiosResponse`。 |
|---|
| | | - 默认自动提示错误，`showError: false` 可关闭。 |
|---|
| | | - 默认合并方法、URL、参数与请求体都相同的并发请求；`merge: false` 时每次都单独发送。 |
|---|
| | | - 通过 `signal: AbortSignal` 取消调用方的请求。 |
|---|
| | | - 失败时抛出 `ApiError`，保留 `status`、`data`、`response`、`config` 与原始错误。 |
|---|
| | | |
|---|
| | | 页面级接口调用放在页面目录的 `server.ts`，组件通过它调用请求。 |
|---|
| | | |
|---|
| | | ### 5. 演示页面 |
|---|
| | | |
|---|
| | | | 页面 | 路由 | 说明 | |
|---|
| | | | -------- | ----------------------- | ---------------------------------- | |
|---|
| | | | 工作台 | `/dashboard` | 数据卡片、快捷入口、动态、最近订单 | |
|---|
| | | | 用户管理 | `/system/users` | 搜索、新增 / 编辑 / 删除用户 | |
|---|
| | | | 用户管理 | `/system/users` | 员工列表、详情、增删改、导入 / 导出 | |
|---|
| | | | 角色管理 | `/system/roles` | 角色列表、详情、启用 / 停用 | |
|---|
| | | | 订单管理 | `/business/orders` | 筛选、处理订单、导出 | |
|---|
| | | | 客户管理 | `/business/customers` | 筛选、新增 / 编辑客户 | |
|---|
| | | | 客户列表 | `/customers/list` | 接口数据，按归属销售员筛选 | |
|---|
| | | | 404 | 任意未知地址 | 页面不存在提示 | |
|---|
| | | |
|---|
| | | ## 目录结构 |
|---|
| | | |
|---|
| | | ```text |
|---|
| | | src/ |
|---|
| | | ├── api/ # 模拟登录接口（替换为真实后端） |
|---|
| | | ├── api/ # request.ts（axios 封装）与登录接口 |
|---|
| | | ├── components/ # 通用组件（如 AntdAppBridge） |
|---|
| | | ├── layouts/ # 后台整体布局（侧边栏、头部、内容区） |
|---|
| | | ├── pages/ # 业务页面 |
|---|
| | | │ ├── login/ |
|---|
| | |
|---|
| | | │ └── index.tsx # React Router 路由生成 + 登录校验 |
|---|
| | | ├── store/ # Zustand 登录状态 |
|---|
| | | ├── styles/ # 全局 SCSS |
|---|
| | | ├── utils/ # feedback.ts（全局错误提示） |
|---|
| | | ├── types/ |
|---|
| | | └── main.tsx |
|---|
| | | ``` |
|---|
| | |
|---|
| | | |
|---|
| | | ## 安全说明 |
|---|
| | | |
|---|
| | | 本项目中的登录接口与账号数据均为 **前端模拟**，仅用于演示。 |
|---|
| | | |
|---|
| | | 接入真实后端时： |
|---|
| | | |
|---|
| | | - 登录、菜单、用户信息应由后端接口返回； |
|---|
| | | - 登录、菜单、用户信息由后端接口返回； |
|---|
| | | - 所有敏感接口必须在服务端校验身份与权限； |
|---|
| | | - Token 建议使用 HttpOnly Cookie 或安全的存储方案，并支持过期 / 刷新机制。 |
|---|
