|
|
|
@ -14,6 +14,7 @@ |
|
|
|
- 🔔 通知系统 |
|
|
|
- 🔍 搜索功能 |
|
|
|
- 👤 用户管理 |
|
|
|
- 👥 角色权限管理 |
|
|
|
|
|
|
|
## 角色管理功能 |
|
|
|
|
|
|
|
@ -28,93 +29,184 @@ |
|
|
|
- 采用 Ant Design 组件库构建 UI |
|
|
|
- 使用 React Hooks 进行状态管理 |
|
|
|
- 遵循 Clean Architecture 架构设计 |
|
|
|
- 使用 Axios 进行 API 请求 |
|
|
|
- 使用 React Query 进行数据缓存和状态管理 |
|
|
|
- 使用 React Hook Form 进行表单管理 |
|
|
|
- 使用 Zod 进行数据验证 |
|
|
|
|
|
|
|
### 目录结构 |
|
|
|
``` |
|
|
|
src/ |
|
|
|
├── pages/ |
|
|
|
│ └── roles/ |
|
|
|
│ └── RolesView.tsx # 角色管理页面 |
|
|
|
│ ├── RolesView.tsx # 角色管理页面 |
|
|
|
│ ├── RoleForm.tsx # 角色表单组件 |
|
|
|
│ └── RolePermissions.tsx # 角色权限管理 |
|
|
|
├── components/ |
|
|
|
│ └── roles/ # 角色相关组件 |
|
|
|
│ └── roles/ |
|
|
|
│ ├── RoleList.tsx # 角色列表组件 |
|
|
|
│ ├── RoleCard.tsx # 角色卡片组件 |
|
|
|
│ └── PermissionTree.tsx # 权限树组件 |
|
|
|
├── services/ |
|
|
|
│ └── roleService.ts # 角色服务 |
|
|
|
├── hooks/ |
|
|
|
│ └── useRoles.ts # 角色相关 Hook |
|
|
|
└── types/ |
|
|
|
└── role.ts # 角色类型定义 |
|
|
|
│ ├── useRoles.ts # 角色相关 Hook |
|
|
|
│ └── usePermissions.ts # 权限相关 Hook |
|
|
|
├── types/ |
|
|
|
│ ├── role.ts # 角色类型定义 |
|
|
|
│ └── permission.ts # 权限类型定义 |
|
|
|
└── utils/ |
|
|
|
└── roleUtils.ts # 角色相关工具函数 |
|
|
|
``` |
|
|
|
|
|
|
|
### 使用说明 |
|
|
|
1. 角色列表页面：展示所有角色信息 |
|
|
|
2. 新建角色：点击"新建角色"按钮 |
|
|
|
3. 编辑角色：点击角色列表中的"编辑"按钮 |
|
|
|
4. 删除角色：点击角色列表中的"删除"按钮 |
|
|
|
1. 角色列表页面 |
|
|
|
- 展示所有角色信息 |
|
|
|
- 支持分页、排序和筛选 |
|
|
|
- 显示角色名称、描述、创建时间等信息 |
|
|
|
- 提供快速操作按钮 |
|
|
|
|
|
|
|
2. 新建角色 |
|
|
|
- 点击"新建角色"按钮 |
|
|
|
- 填写角色基本信息 |
|
|
|
- 配置角色权限 |
|
|
|
- 提交表单创建角色 |
|
|
|
|
|
|
|
3. 编辑角色 |
|
|
|
- 点击角色列表中的"编辑"按钮 |
|
|
|
- 修改角色信息 |
|
|
|
- 更新权限配置 |
|
|
|
- 保存更改 |
|
|
|
|
|
|
|
4. 删除角色 |
|
|
|
- 点击角色列表中的"删除"按钮 |
|
|
|
- 确认删除操作 |
|
|
|
- 系统自动更新角色列表 |
|
|
|
|
|
|
|
### API 接口 |
|
|
|
- GET /api/roles - 获取角色列表 |
|
|
|
- GET /api/roles/{id} - 获取单个角色 |
|
|
|
- POST /api/roles - 创建角色 |
|
|
|
- PUT /api/roles/{id} - 更新角色 |
|
|
|
- DELETE /api/roles/{id} - 删除角色 |
|
|
|
|
|
|
|
## 开始使用 |
|
|
|
|
|
|
|
1. 克隆项目 |
|
|
|
|
|
|
|
```bash |
|
|
|
git clone https://github.com/yourusername/cellular-management-webui.git |
|
|
|
cd cellular-management-webui |
|
|
|
``` |
|
|
|
|
|
|
|
2. 安装依赖 |
|
|
|
|
|
|
|
```bash |
|
|
|
npm install |
|
|
|
``` |
|
|
|
|
|
|
|
3. 启动开发服务器 |
|
|
|
|
|
|
|
```bash |
|
|
|
npm run dev |
|
|
|
``` |
|
|
|
|
|
|
|
4. 构建生产版本 |
|
|
|
|
|
|
|
```bash |
|
|
|
npm run build |
|
|
|
- GET /api/roles |
|
|
|
- 获取角色列表 |
|
|
|
- 支持分页、排序和筛选 |
|
|
|
- 返回角色数组 |
|
|
|
|
|
|
|
- GET /api/roles/{id} |
|
|
|
- 获取单个角色详情 |
|
|
|
- 包含角色基本信息和权限配置 |
|
|
|
- 返回角色对象 |
|
|
|
|
|
|
|
- POST /api/roles |
|
|
|
- 创建新角色 |
|
|
|
- 请求体：角色信息对象 |
|
|
|
- 返回创建的角色对象 |
|
|
|
|
|
|
|
- PUT /api/roles/{id} |
|
|
|
- 更新角色信息 |
|
|
|
- 请求体：更新的角色信息 |
|
|
|
- 返回更新后的角色对象 |
|
|
|
|
|
|
|
- DELETE /api/roles/{id} |
|
|
|
- 删除指定角色 |
|
|
|
- 返回删除成功状态 |
|
|
|
|
|
|
|
### 数据模型 |
|
|
|
```typescript |
|
|
|
interface Role { |
|
|
|
id: string; |
|
|
|
name: string; |
|
|
|
description: string; |
|
|
|
permissions: Permission[]; |
|
|
|
createdAt: string; |
|
|
|
updatedAt: string; |
|
|
|
} |
|
|
|
|
|
|
|
interface Permission { |
|
|
|
id: string; |
|
|
|
name: string; |
|
|
|
code: string; |
|
|
|
description: string; |
|
|
|
type: 'menu' | 'operation'; |
|
|
|
parentId?: string; |
|
|
|
} |
|
|
|
``` |
|
|
|
|
|
|
|
## 项目结构 |
|
|
|
|
|
|
|
``` |
|
|
|
src/ |
|
|
|
├── components/ # 组件 |
|
|
|
│ ├── layout/ # 布局组件 |
|
|
|
│ └── ui/ # UI 组件 |
|
|
|
├── pages/ # 页面 |
|
|
|
├── routes/ # 路由配置 |
|
|
|
├── hooks/ # 自定义 Hooks |
|
|
|
├── utils/ # 工具函数 |
|
|
|
├── assets/ # 静态资源 |
|
|
|
├── App.tsx # 应用入口 |
|
|
|
└── main.tsx # 主入口 |
|
|
|
``` |
|
|
|
|
|
|
|
## 技术栈 |
|
|
|
|
|
|
|
- [Vite](https://vitejs.dev/) |
|
|
|
- [React](https://reactjs.org/) |
|
|
|
- [TypeScript](https://www.typescriptlang.org/) |
|
|
|
- [Tailwind CSS](https://tailwindcss.com/) |
|
|
|
- [Shadcn UI](https://ui.shadcn.com/) |
|
|
|
- [React Router](https://reactrouter.com/) |
|
|
|
- [Zustand](https://github.com/pmndrs/zustand) |
|
|
|
|
|
|
|
## 贡献 |
|
|
|
|
|
|
|
欢迎提交 Issue 和 Pull Request！ |
|
|
|
### 开发指南 |
|
|
|
1. 环境要求 |
|
|
|
- Node.js >= 16 |
|
|
|
- npm >= 7 |
|
|
|
- Git |
|
|
|
|
|
|
|
2. 开发流程 |
|
|
|
```bash |
|
|
|
# 克隆项目 |
|
|
|
git clone https://github.com/yourusername/cellular-management-webui.git |
|
|
|
|
|
|
|
# 安装依赖 |
|
|
|
npm install |
|
|
|
|
|
|
|
# 启动开发服务器 |
|
|
|
npm run dev |
|
|
|
|
|
|
|
# 运行测试 |
|
|
|
npm test |
|
|
|
|
|
|
|
# 构建生产版本 |
|
|
|
npm run build |
|
|
|
``` |
|
|
|
|
|
|
|
3. 代码规范 |
|
|
|
- 使用 ESLint 进行代码检查 |
|
|
|
- 使用 Prettier 进行代码格式化 |
|
|
|
- 遵循 TypeScript 严格模式 |
|
|
|
- 使用 Git Flow 工作流 |
|
|
|
|
|
|
|
4. 测试规范 |
|
|
|
- 单元测试覆盖率 > 80% |
|
|
|
- 使用 Jest 和 React Testing Library |
|
|
|
- 编写集成测试和端到端测试 |
|
|
|
|
|
|
|
### 部署说明 |
|
|
|
1. 构建项目 |
|
|
|
```bash |
|
|
|
npm run build |
|
|
|
``` |
|
|
|
|
|
|
|
2. 部署步骤 |
|
|
|
- 将构建产物部署到 Web 服务器 |
|
|
|
- 配置 Nginx 反向代理 |
|
|
|
- 设置环境变量 |
|
|
|
- 配置 SSL 证书 |
|
|
|
|
|
|
|
3. 环境变量 |
|
|
|
```env |
|
|
|
VITE_API_BASE_URL=https://api.example.com |
|
|
|
VITE_APP_TITLE=Cellular Management |
|
|
|
``` |
|
|
|
|
|
|
|
### 性能优化 |
|
|
|
- 使用 React.lazy 进行代码分割 |
|
|
|
- 实现组件级别的缓存 |
|
|
|
- 优化图片和静态资源 |
|
|
|
- 使用 Service Worker 实现离线功能 |
|
|
|
|
|
|
|
### 安全措施 |
|
|
|
- 实现 CSRF 防护 |
|
|
|
- 使用 HTTPS |
|
|
|
- 实现请求限流 |
|
|
|
- 数据加密传输 |
|
|
|
- XSS 防护 |
|
|
|
|
|
|
|
## 贡献指南 |
|
|
|
1. Fork 项目 |
|
|
|
2. 创建特性分支 |
|
|
|
3. 提交更改 |
|
|
|
4. 推送到分支 |
|
|
|
5. 创建 Pull Request |
|
|
|
|
|
|
|
## 版本历史 |
|
|
|
- v1.0.0 (2024-03-xx) |
|
|
|
- 初始版本发布 |
|
|
|
- 实现基础功能 |
|
|
|
- 添加角色管理模块 |
|
|
|
|
|
|
|
## 许可证 |
|
|
|
|
|
|
|
MIT |
hyh
3 months ago