重命名 WebUI 项目相关引用为 X1，更新 README.md 和 package.json

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
+  <Button variant="default" size="default">按钮</Button>
+  ```
+
+- `Input` - 输入框组件
+  ```tsx
+  <Input type="text" placeholder="请输入" />
+  ```
+
+- `Select` - 下拉选择组件
+  ```tsx
+  <Select>
+    <SelectTrigger>
+      <SelectValue placeholder="请选择" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="1">选项 1</SelectItem>
+      <SelectItem value="2">选项 2</SelectItem>
+    </SelectContent>
+  </Select>
+  ```
+
+- `Form` - 表单组件
+  ```tsx
+  <Form>
+    <FormField>
+      <FormLabel>标签</FormLabel>
+      <FormControl>
+        <Input />
+      </FormControl>
+      <FormMessage />
+    </FormField>
+  </Form>
+  ```
+
+- `Table` - 表格组件
+  ```tsx
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>标题</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>内容</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+  ```
+
+- `Dialog` - 对话框组件
+  ```tsx
+  <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          # 角色相关工具函数
+```
+
+### 使用说明
+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 

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"
+  }
+}