Browse Source

docs: 更新 README.md,添加组件库使用说明

refactor/repository-structure
hyh 7 months ago
parent
commit
986487be47
  1. 80
      src/CellularManagement.WebUI/README.md

80
src/CellularManagement.WebUI/README.md

@ -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>
```
## 角色管理功能
### 功能概述

Loading…
Cancel
Save