|
|
|
@ -16,6 +16,86 @@ |
|
|
|
- 👤 用户管理 |
|
|
|
- 👥 角色权限管理 |
|
|
|
|
|
|
|
## 技术栈 |
|
|
|
|
|
|
|
- 前端: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> |
|
|
|
``` |
|
|
|
|
|
|
|
## 角色管理功能 |
|
|
|
|
|
|
|
### 功能概述 |
|
|
|
|