CRM Admin

基于 Vite + React + TypeScript + Ant Design + SCSS 的后台管理平台。

内置多级路由菜单、登录 / 退出、动态菜单，以及一套可直接运行的 CRM 演示页面。

快速开始

cd tenant-console
npm install
npm run dev

默认访问地址：http://localhost:5173

npm run build      # 类型检查 + 生产构建
npm run preview    # 预览生产构建
npm run typecheck  # 仅做 TypeScript 类型检查

登录接口

登录使用 POST /auth/tenant-login：

{
  "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，调用 POST /auth/tenant-login
• 登录状态使用 Zustand + localStorage 持久化：src/store/auth.ts
• 未登录访问受保护页面时，会跳转登录页并记录原地址，登录成功后自动返回
• 顶部用户菜单支持退出登录（带二次确认），退出后回到登录页

2. 多级路由菜单（支持 2-3 级嵌套）

路由、菜单、面包屑共用一份配置：src/router/routeConfig.tsx。

{
  path: '/system',
  title: '用户与权限',
  icon: <SafetyCertificateOutlined />,
  children: [
    {
      path: '/system/users',
      title: '用户管理',
      icon: <TeamOutlined />,
      element: <Users />,
    },
  ],
}

• 路由会被转换成 React Router 的嵌套路由（src/router/index.tsx）
• 侧边栏菜单自动生成，并支持任意层级展开
• 面包屑根据当前地址自动推导
• 访问分组路径（如 /system）时，自动跳转到第一个子页面

3. 登录态校验

• 受保护路由统一包裹登录校验，未登录时跳转 /login 并带上 state.from
• 登录成功后自动返回原地址

4. 网络请求

统一使用 src/api/request.ts 的 request（基于 axios）：

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. 演示页面

目录结构

src/
├── api/                 # request.ts（axios 封装）与登录接口
├── components/          # 通用组件（如 AntdAppBridge）
├── layouts/             # 后台整体布局（侧边栏、头部、内容区）
├── pages/               # 业务页面
│   ├── login/
│   ├── dashboard/
│   ├── system/
│   ├── business/
│   └── error/
├── router/
│   ├── routeConfig.tsx  # 路由 + 菜单唯一数据源
│   ├── menu.tsx         # 菜单构建
│   └── index.tsx        # React Router 路由生成 + 登录校验
├── store/               # Zustand 登录状态
├── styles/              # 全局 SCSS
├── utils/               # feedback.ts（全局错误提示）
├── types/
└── main.tsx

如何新增一个页面

1. 在 src/pages 下创建页面组件。
2. 在 src/router/routeConfig.tsx 中添加一条配置（path、title、icon、element）。

侧边栏、面包屑会自动读取新配置，无需重复维护。

安全说明

• 登录、菜单、用户信息由后端接口返回；
• 所有敏感接口必须在服务端校验身份与权限；
• Token 建议使用 HttpOnly Cookie 或安全的存储方案，并支持过期 / 刷新机制。