6.3 KiB

Raw Blame History

X1 WebUI

基于 Vite + React + TypeScript + Tailwind CSS + Shadcn UI 的现代化管理系统前端。

特性

🚀 基于 Vite 构建，开发体验极佳
⚛️ 使用 React 18 和 TypeScript 开发
🎨 使用 Tailwind CSS 和 Shadcn UI 构建美观的界面
📱 响应式设计，支持移动端和桌面端
🌙 支持暗黑模式
🔒 内置登录认证
📊 完整的布局系统
🔔 通知系统
🔍 搜索功能
👤 用户管理
👥 角色权限管理

技术栈

前端：React + TypeScript + Vite
UI 组件库：Radix UI + Tailwind CSS
状态管理：React Query
HTTP 客户端：Axios
路由：React Router
表单处理：React Hook Form

组件库

项目使用 Radix UI 作为基础组件库，结合 Tailwind CSS 进行样式定制。主要组件包括：

基础组件

Button - 按钮组件

<Button variant="default" size="default">按钮</Button>

Input - 输入框组件

<Input type="text" placeholder="请输入" />

Select - 下拉选择组件

<Select>
  <SelectTrigger>
    <SelectValue placeholder="请选择" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">选项 1</SelectItem>
    <SelectItem value="2">选项 2</SelectItem>
  </SelectContent>
</Select>

Form - 表单组件

<Form>
  <FormField>
    <FormLabel>标签</FormLabel>
    <FormControl>
      <Input />
    </FormControl>
    <FormMessage />
  </FormField>
</Form>

Table - 表格组件

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>标题</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>内容</TableCell>
    </TableRow>
  </TableBody>
</Table>

Dialog - 对话框组件

<Dialog>
  <DialogTrigger>打开</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>标题</DialogTitle>
    </DialogHeader>
    <DialogDescription>描述</DialogDescription>
  </DialogContent>
</Dialog>

角色管理功能

功能概述

角色列表展示
角色创建、编辑、删除
角色权限管理
角色用户关联

技术实现

使用 React + TypeScript 开发
采用 Ant Design 组件库构建 UI
使用 React Hooks 进行状态管理
遵循 Clean Architecture 架构设计
使用 Axios 进行 API 请求
使用 React Query 进行数据缓存和状态管理
使用 React Hook Form 进行表单管理
使用 Zod 进行数据验证

目录结构

src/
├── pages/
│   └── roles/
│       ├── RolesView.tsx      # 角色管理页面
│       ├── RoleForm.tsx       # 角色表单组件
│       └── RolePermissions.tsx # 角色权限管理
├── components/
│   └── roles/
│       ├── RoleList.tsx       # 角色列表组件
│       ├── RoleCard.tsx       # 角色卡片组件
│       └── PermissionTree.tsx # 权限树组件
├── services/
│   └── roleService.ts        # 角色服务
├── hooks/
│   ├── useRoles.ts           # 角色相关 Hook
│   └── usePermissions.ts     # 权限相关 Hook
├── types/
│   ├── role.ts               # 角色类型定义
│   └── permission.ts         # 权限类型定义
└── utils/
    └── roleUtils.ts          # 角色相关工具函数

使用说明

角色列表页面
- 展示所有角色信息
- 支持分页、排序和筛选
- 显示角色名称、描述、创建时间等信息
- 提供快速操作按钮
新建角色
- 点击"新建角色"按钮
- 填写角色基本信息
- 配置角色权限
- 提交表单创建角色
编辑角色
- 点击角色列表中的"编辑"按钮
- 修改角色信息
- 更新权限配置
- 保存更改
删除角色
- 点击角色列表中的"删除"按钮
- 确认删除操作
- 系统自动更新角色列表

API 接口

GET /api/roles
- 获取角色列表
- 支持分页、排序和筛选
- 返回角色数组
GET /api/roles/{id}
- 获取单个角色详情
- 包含角色基本信息和权限配置
- 返回角色对象
POST /api/roles
- 创建新角色
- 请求体：角色信息对象
- 返回创建的角色对象
PUT /api/roles/{id}
- 更新角色信息
- 请求体：更新的角色信息
- 返回更新后的角色对象
DELETE /api/roles/{id}
- 删除指定角色
- 返回删除成功状态

数据模型

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;
}

开发指南

环境要求
- Node.js >= 16
- npm >= 7
- Git

开发流程

# 克隆项目
git clone https://github.com/yourusername/cellular-management-webui.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 运行测试
npm test

# 构建生产版本
npm run build

代码规范
- 使用 ESLint 进行代码检查
- 使用 Prettier 进行代码格式化
- 遵循 TypeScript 严格模式
- 使用 Git Flow 工作流
测试规范
- 单元测试覆盖率 > 80%
- 使用 Jest 和 React Testing Library
- 编写集成测试和端到端测试

部署说明

构建项目
```
npm run build
```
部署步骤
- 将构建产物部署到 Web 服务器
- 配置 Nginx 反向代理
- 设置环境变量
- 配置 SSL 证书

环境变量

VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=Cellular Management

性能优化

使用 React.lazy 进行代码分割
实现组件级别的缓存
优化图片和静态资源
使用 Service Worker 实现离线功能

安全措施

实现 CSRF 防护
使用 HTTPS
实现请求限流
数据加密传输
XSS 防护

贡献指南

Fork 项目
创建特性分支
提交更改
推送到分支
创建 Pull Request

版本历史

v1.0.0 (2024-03-xx)
- 初始版本发布
- 实现基础功能
- 添加角色管理模块

许可证

MIT

6.3 KiB Raw Blame History