From 2d801601b39c87d01f809f59d4039a91f3ad853e Mon Sep 17 00:00:00 2001 From: root <295172551@qq.com> Date: Thu, 3 Jul 2025 00:12:05 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=20WebUI=20=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=9B=B8=E5=85=B3=E5=BC=95=E7=94=A8=E4=B8=BA=20X1?= =?UTF-8?q?=EF=BC=8C=E6=9B=B4=E6=96=B0=20README.md=20=E5=92=8C=20package.j?= =?UTF-8?q?son?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/X1.WebUI/README.md | 292 ++++++++++++++++++++++++++++++++++++++ src/X1.WebUI/package.json | 74 ++++++++++ 2 files changed, 366 insertions(+) create mode 100644 src/X1.WebUI/README.md create mode 100644 src/X1.WebUI/package.json diff --git a/src/X1.WebUI/README.md b/src/X1.WebUI/README.md new file mode 100644 index 0000000..5610c78 --- /dev/null +++ b/src/X1.WebUI/README.md @@ -0,0 +1,292 @@ +# 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` - 按钮组件 + ```tsx + + ``` + +- `Input` - 输入框组件 + ```tsx + + ``` + +- `Select` - 下拉选择组件 + ```tsx + + ``` + +- `Form` - 表单组件 + ```tsx +
+ + 标签 + + + + + +
+ ``` + +- `Table` - 表格组件 + ```tsx + + + + 标题 + + + + + 内容 + + +
+ ``` + +- `Dialog` - 对话框组件 + ```tsx + + 打开 + + + 标题 + + 描述 + + + ``` + +## 角色管理功能 + +### 功能概述 +- 角色列表展示 +- 角色创建、编辑、删除 +- 角色权限管理 +- 角色用户关联 + +### 技术实现 +- 使用 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 # 角色相关工具函数 +``` + +### 使用说明 +1. 角色列表页面 + - 展示所有角色信息 + - 支持分页、排序和筛选 + - 显示角色名称、描述、创建时间等信息 + - 提供快速操作按钮 + +2. 新建角色 + - 点击"新建角色"按钮 + - 填写角色基本信息 + - 配置角色权限 + - 提交表单创建角色 + +3. 编辑角色 + - 点击角色列表中的"编辑"按钮 + - 修改角色信息 + - 更新权限配置 + - 保存更改 + +4. 删除角色 + - 点击角色列表中的"删除"按钮 + - 确认删除操作 + - 系统自动更新角色列表 + +### API 接口 +- 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; +} +``` + +### 开发指南 +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 \ No newline at end of file diff --git a/src/X1.WebUI/package.json b/src/X1.WebUI/package.json new file mode 100644 index 0000000..4a28745 --- /dev/null +++ b/src/X1.WebUI/package.json @@ -0,0 +1,74 @@ +{ + "name": "x1-webui", + "private": true, + "version": "0.1.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "@radix-ui/react-accordion": "^1.2.10", + "@radix-ui/react-alert-dialog": "^1.1.13", + "@radix-ui/react-aspect-ratio": "^1.1.6", + "@radix-ui/react-avatar": "^1.1.9", + "@radix-ui/react-checkbox": "^1.3.1", + "@radix-ui/react-collapsible": "^1.1.10", + "@radix-ui/react-context-menu": "^2.2.14", + "@radix-ui/react-dialog": "^1.1.13", + "@radix-ui/react-dropdown-menu": "^2.1.14", + "@radix-ui/react-hover-card": "^1.1.13", + "@radix-ui/react-icons": "^1.3.2", + "@radix-ui/react-label": "^2.1.6", + "@radix-ui/react-menubar": "^1.1.14", + "@radix-ui/react-navigation-menu": "^1.2.12", + "@radix-ui/react-popover": "^1.1.13", + "@radix-ui/react-progress": "^1.1.6", + "@radix-ui/react-radio-group": "^1.3.6", + "@radix-ui/react-scroll-area": "^1.2.8", + "@radix-ui/react-select": "^2.2.4", + "@radix-ui/react-separator": "^1.1.6", + "@radix-ui/react-slider": "^1.3.4", + "@radix-ui/react-slot": "^1.2.2", + "@radix-ui/react-switch": "^1.2.4", + "@radix-ui/react-tabs": "^1.1.11", + "@radix-ui/react-toast": "^1.2.13", + "@radix-ui/react-toggle": "^1.1.8", + "@radix-ui/react-tooltip": "^1.2.6", + "axios": "^1.9.0", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", + "framer-motion": "^12.12.1", + "lucide-react": "^0.323.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-google-recaptcha": "^3.1.0", + "react-hook-form": "^7.50.0", + "react-icons": "^5.5.0", + "react-router-dom": "^6.22.0", + "recoil": "^0.7.7", + "tailwind-merge": "^2.2.1", + "tailwindcss-animate": "^1.0.7", + "zod": "^3.24.4" + }, + "devDependencies": { + "@shadcn/ui": "^0.0.4", + "@types/node": "^20.11.16", + "@types/react": "^18.2.43", + "@types/react-dom": "^18.2.17", + "@types/react-google-recaptcha": "^2.1.9", + "@typescript-eslint/eslint-plugin": "^6.14.0", + "@typescript-eslint/parser": "^6.14.0", + "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.17", + "eslint": "^8.55.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "postcss": "^8.4.33", + "tailwindcss": "^3.4.1", + "typescript": "^5.2.2", + "vite": "^5.0.8" + } +}