| | |
| | | │ ├── login/ |
| | | │ ├── dashboard/ |
| | | │ ├── system/users/ |
| | | │ ├── business/{orders,customers}/ |
| | | │ ├── business/orders/ |
| | | │ ├── customers/list/ |
| | | │ └── error/NotFound.tsx |
| | | │ # 页面目录:index.tsx、columns.tsx、types.ts、server.ts、同名 .scss(按需) |
| | | ├── router/ |
| | |
| | | |
| | | `src/router/routeConfig.tsx` 是**唯一数据源**。新增页面只需在这里配置 `path`、`title`、`icon`、`element`,侧边栏、面包屑会自动读取。 |
| | | |
| | | - 支持 2-3 级嵌套,例如:`系统管理 → 用户管理`。 |
| | | - 支持 2-3 级嵌套,例如:`用户与权限 → 用户管理`。 |
| | | - `src/router/index.tsx` 把菜单配置转换成 React Router 的嵌套路由。 |
| | | - 分组路由(无 `element`)通过 `<Outlet />` 渲染子页面,默认跳转到第一个子页面。 |
| | | - 未匹配路由显示 404,普通页面组件位于 `BasicLayout` 内。 |
| | |
| | | |
| | | ## 七、接口与状态约定 |
| | | |
| | | - **每个接口都必须为其请求(request)与响应(response)定义 `interface`**,并在 `server.ts` 中通过 `request<TReq, TRes>` 显式标注泛型;禁止使用 `any` 或省略类型。 |
| | | - 类型统一定义在页面目录的 `types.ts` 中(跨页面复用的放在 `src/api/` 对应业务域文件)。 |
| | | - 命名约定:`<业务>Request` / `<业务>Response`,例如 `TenantRoleListRequest`、`TenantRoleListResponse`。 |
| | | - 请求体 / 查询参数建模为 `XxxRequest`;响应建模为 `XxxResponse`,对应接口返回 `data` 的结构(若后端是 `Result<T>`,`Response` 指 `data` 部分)。 |
| | | - 无请求参数时也应显式定义,例如 `type TenantRoleListRequest = Record<string, never>`,不要留空或使用 `undefined`。 |
| | | |
| | | ```ts |
| | | // types.ts |
| | | export interface TenantRoleToggleStatusRequest { |
| | | id: number; |
| | | } |
| | | export interface TenantRoleToggleStatusResponse { |
| | | id: number; |
| | | status: RoleStatus; |
| | | } |
| | | |
| | | // server.ts |
| | | export const toggleRoleStatus = ({ id }: TenantRoleToggleStatusRequest) => |
| | | request<TenantRoleToggleStatusRequest, TenantRoleToggleStatusResponse>({ |
| | | url: `/tenant/roles/${id}/toggle-status`, |
| | | method: 'PUT', |
| | | headers: getAuthHeaders(), |
| | | }); |
| | | ``` |
| | | |
| | | - 页面级接口调用统一放在页面目录下的 `server.ts`,页面组件通过它调用接口,不要在组件内直接写请求实现。 |
| | | - 跨页面复用的接口可放在 `src/api/` 下,按业务域拆分文件。 |
| | | - 网络请求统一使用 `src/api/request.ts` 的 `request`(基于 axios),不要在页面或 `server.ts` 中直接使用 axios。 |