# react_mobx
**Repository Path**: OK68/react_mobx
## Basic Information
- **Project Name**: react_mobx
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-21
- **Last Updated**: 2026-03-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# react_mobx 项目说明
这是一个基于 React + TypeScript + Vite 的后台管理前端项目，使用 MobX 做状态管理，Ant Design 作为 UI 组件库，`react-router-dom` 负责路由。
## 1. 项目基本情况
- 前端框架：React 19
- 构建工具：Vite 7
- 语言：TypeScript
- 状态管理：MobX + mobx-react-lite
- UI：Ant Design + @ant-design/icons
- HTTP：axios（统一封装在 `src/services/request.ts`）
- 路由：react-router-dom（在 `src/App.tsx` 统一配置）
## 2. 目录与职责（核心）
- `src/App.tsx`：应用入口路由，包含登录页和受保护路由。
- `src/components/AdminLayout.tsx`：后台主布局（侧边栏菜单 + 顶部栏 + 内容区 Outlet）。
- `src/pages/`：页面组件目录（如 `organization/Department.tsx`、`LoginPage.tsx`）。
- `src/store/`：MobX store 目录，按业务拆分（如 `organization/departmentStore`）。
- `src/services/`：接口层，按业务拆分（如 `organization/departmentService.ts`）。
- `src/types/`：通用类型定义。
- `src/utils/`：通用工具方法（弹窗、加密、解密等）。
## 3. 快速启动
```bash
npm install
npm run dev
```
常用命令：
```bash
npm run build
npm run lint
npm run preview
```
默认后端地址在 `src/services/request.ts`：`http://localhost:1024`。
## 4. 当前路由与访问控制
- 登录页：`/`
- 受保护页面挂在 `AdminLayout` 下（`/index`、`/department`、`/employee`、`/role`、`/personal-center`）。
- 通过 `authStore.isAuthenticated` 控制访问，未登录会重定向到登录页。
## 5. 如何新增一个页面功能
下面给一个推荐流程，保持与现有代码风格一致。
### 第一步：创建页面组件
在 `src/pages/` 下新建页面文件，例如：
- `src/pages/system/Notice.tsx`
页面建议先按现有风格使用 AntD + MobX observer：
```tsx
import { observer } from 'mobx-react-lite';
const Notice = observer(() => {
return 通知管理页面
;
});
export default Notice;
```
### 第二步：在路由中注册页面
编辑 `src/App.tsx`：
1. 引入页面组件
2. 在受保护路由区域新增 `} />`
这样页面就可以通过地址访问。
### 第三步：在侧边栏菜单增加入口
编辑 `src/components/AdminLayout.tsx` 的 `navItems`，增加一项：
```tsx
{
key: '/notice',
icon: ,
label: 通知管理,
}
```
这样用户可以在左侧菜单点击进入新页面。
### 第四步（可选）：接入接口与状态管理
如果新页面需要请求后端，按当前分层方式新增：
1. `src/services//Service.ts`：只做接口调用。
2. `src/store//Store/index.ts`：管理页面状态、调用 service。
3. `src/store//Store/types.ts`：维护类型定义。
4. 页面中引入 store，使用 `observer` 响应式渲染。
建议参考：
- 页面：`src/pages/organization/Department.tsx`
- store：`src/store/organization/departmentStore/index.ts`
- service：`src/services/organization/departmentService.ts`
### 第五步：联调与自检
- 本地运行：`npm run dev`
- 检查菜单高亮是否正确（`key` 与路由路径保持一致）。
- 检查页面刷新后路由是否可直达。
- 检查接口异常提示是否符合 `request.ts` 的统一错误处理。
- 提交前建议执行：`npm run lint` + `npm run build`。
## 6. 新页面开发规范建议
- 路由路径、菜单 `key`、页面文件名语义保持一致。
- 业务接口不要直接写在页面里，统一下沉到 `services`。
- 页面状态尽量放在 MobX store，避免组件内堆积复杂状态。
- 类型优先，接口返回值和列表项都定义 TypeScript 类型。
- 复用现有弹窗模式（可参考 `showDialog` + 业务弹窗组件）。
---
如果你是首次接手该项目，建议先按顺序阅读：
1. `src/App.tsx`（路由总览）
2. `src/components/AdminLayout.tsx`（页面骨架与菜单）
3. 任一业务模块的 page/store/service 三层实现（如部门模块）
理解这三部分后，新增页面会非常顺畅。