# G. 前端组件速查

:::tip 概述
以下组件定义在 `ui/src/components/` 目录下，可在页面中直接引入使用。
:::

## 数据展示

| 组件 | 路径 | 说明 | 核心 Props |
|------|------|------|-----------|
| BasicTable | `components/Table/` | 数据表格 | `columns`、`dataSource`、`pagination` |
| PageWrapper | `components/Page/` | 页面容器 | `title`、`contentFullHeight` |
| CountTo | `components/CountTo/` | 数字动画 | `startVal`、`endVal`、`duration` |
| Qrcode | `components/Qrcode/` | 二维码 | `value`、`size`、`level` |
| Icon | `components/icon/` | 图标选择器 | `value`、`disabled` |

## 数据录入

| 组件 | 路径 | 说明 | 核心 Props |
|------|------|------|-----------|
| BasicForm | `components/Form/` | 动态表单 | `schemas`、`labelWidth` |
| BasicModal | `components/Modal/` | 弹窗 | `title`、`width`、`okText` |
| BasicUpload | `components/Upload/` | 文件上传 | `action`、`maxCount`、`accept` |
| Editor | `components/Editor/` | 富文本编辑器 | `value`、`height`、`placeholder` |
| Password | `components/Password/` | 密码强度 | `value`、`placeholder` |
| ChinaArea | `components/ChinaArea/` | 省市区联动 | `value`、`placeholder` |
| Region | `components/Region/` | 行政区划 | `value`、`level` |
| Cropper | `components/Cropper/` | 头像裁剪 | `image`、`aspectRatio` |
| NumberInput | `components/numberInput/` | 数字输入 | `value`、`min`、`max` |
| PriceInput | `components/priceInput/` | 价格输入 | `value`、`precision` |

## Excel

| 组件 | 路径 | 说明 |
|------|------|------|
| ImportExcel | `components/Excel/` | Excel 导入（解析文件） |
| Export2Excel | `components/Excel/` | Excel 导出（生成文件） |

## 其他

| 组件 | 路径 | 说明 |
|------|------|------|
| Authority | `components/Authority/` | 权限组件（根据权限显示/隐藏） |
| CheckToken | `components/CheckToken/` | Token 校验组件 |
| Lockscreen | `components/Lockscreen/` | 锁屏组件 |
| Websocket | `components/Websocket/` | WebSocket 组件 |

## 使用示例

### BasicTable

```vue
<template>
  <BasicTable @register="registerTable" />
</template>

<script setup>
import { BasicTable, useTable } from '@/components/Table';

const [registerTable] = useTable({
  api: getExamplePage,
  columns: [
    { title: 'ID', field: 'id', width: 80 },
    { title: '名称', field: 'name' },
    { title: '状态', field: 'statusText', width: 100 },
  ],
});
</script>
```

### BasicForm

```vue
<template>
  <BasicForm @register="registerForm" />
</template>

<script setup>
import { BasicForm, useForm } from '@/components/Form';

const [registerForm] = useForm({
  schemas: [
    { field: 'name', label: '名称', component: 'Input', required: true },
    { field: 'status', label: '状态', component: 'Select', componentProps: { options: [...] } },
  ],
});
</script>
```

### BasicModal

```vue
<template>
  <BasicModal @register="registerModal" @ok="handleSubmit" />
</template>

<script setup>
import { BasicModal, useModal } from '@/components/Modal';

const [registerModal, { openModal, closeModal }] = useModal();

const handleAdd = () => openModal(true, { isUpdate: false });
const handleSubmit = async () => { /* ... */ closeModal(); };
</script>
```