# G. 前端组件速查

:::tip 概述
ui/src/components/ 全部公共组件速查（25 类），按展示/录入/布局/能力分组。详细用法见 [9.9 数据展示组件](../frontend/display-components) 与 [9.10 数据录入组件](../frontend/form-components)。
:::

## 组件清单

| 组件 | 分组 | 职责 |
|------|------|------|
| Table | 展示 | 表格封装（columns 配置驱动） |
| pagination | 展示 | 分页 |
| Page | 布局 | 页面容器（搜索区/操作区/表格区） |
| Render | 展示 | 函数式渲染（h 函数封装） |
| CountTo | 展示 | 数字滚动动画 |
| Qrcode | 展示 | 二维码生成 |
| icon | 展示 | 图标 |
| Modal | 布局 | 弹窗封装 |
| TableSelect | 录入 | 表格选择器（关联数据单选/多选） |
| Form | 录入 | 表单封装（FormSchema 配置驱动） |
| Select | 录入 | 下拉封装 |
| numberInput | 录入 | 数字输入 |
| priceInput | 录入 | 价格输入（精度处理） |
| Password | 录入 | 密码输入（强度显示） |
| ChinaArea | 录入 | 中国省市区级联 |
| Region | 录入 | 行政区划 |
| Cropper | 录入 | 图片裁剪 |
| Upload | 录入 | 上传组件族（单图/多图/文件） |
| importFile | 录入 | Excel 导入入口 |
| Excel | 能力 | Excel 处理（导入解析/导出） |
| Editor | 录入 | 富文本（TinyMCE/Quill） |
| Authority | 能力 | 权限包装容器 |
| CheckToken | 能力 | 令牌检查 |
| Lockscreen | 能力 | 锁屏 |
| Websocket | 能力 | WebSocket 封装（前端遗留能力） |
| Application | 布局 | 应用级包装 |

## 高频组合（列表页标准形态）

```text
<Page>
  搜索区  Form(querySchemas 驱动)
  操作区  按钮 + v-permission
  表格区  Table(columns 驱动) + pagination
</Page>
弹窗    Modal + edit.vue / detail.vue
```

## 与后端对接要点

```text
Table data    ← PageData.data.records（http 已解包）
Upload        ← /api/upload/uploadFile（temp URL）→ 保存转正
Editor        ← content 字段（[IMG_URL] 契约，Detail 已还原）
ChinaArea     ← /api/area 接口（级联懒加载）
Excel         ← /api/{module}/import|export
Authority     ← permissions（getUser，超管 *:*:*）
```