# H. 前端组件速查

:::tip 说明
`ui/src/components` 公共组件速查（28 个）。业务页面优先复用；页面私有组件放 views 下 components/。
:::

## 骨架与容器

| 组件 | 职责 |
|---|---|
| Page | 页面容器（标题/内容区/响应高度） |
| Modal | 弹窗封装（新增/编辑常用） |
| Form | 表单容器（布局/重置/提交） |
| Table | 数据表格封装（列配置/加载/选择） |
| pagination | 分页条（pageNo/pageSize 契约） |

## 数据录入

| 组件 | 职责 |
|---|---|
| Select | 下拉（支持字典数据源） |
| TableSelect | 表格选择器（选人/选部门，单/多选） |
| Upload | 文件/图片上传（两段式契约） |
| Editor | 富文本（TinyMCE / vue-quill 双引擎） |
| Cropper | 图片裁剪 |
| Password | 密码输入 |
| numberInput / priceInput | 数字/金额输入（精度控制） |
| ChinaArea / Region | 省市区级联 |

## 数据展示

| 组件 | 职责 |
|---|---|
| CountTo | 数字滚动动画 |
| Qrcode | 二维码生成 |
| Render | 配置化/函数式渲染 |
| icon | 图标（菜单与页面统一入口） |

## 功能性

| 组件 | 职责 |
|---|---|
| Authority | 权限包装（组件式权限控制） |
| CheckToken | 令牌校验 |
| Websocket | WebSocket 封装（实时推送） |
| Lockscreen | 锁屏 |
| Application | 应用级注入 |
| importFile | 导入文件交互 |
| Excel | 前端 Excel 解析/生成 |

## 速览入口

组件 props 与用法以各组件源码注释为准（`ui/src/components/{名}`）。典型组合见：

- [9.9 表格与页面组件](/zh/frontend/table-components.html)
- [9.10 数据录入组件](/zh/frontend/form-components.html)
- [9.11 数据展示组件](/zh/frontend/display-components.html)
- [9.12 Excel 导入导出组件](/zh/frontend/excel-components.html)