59 lines
1.8 KiB
Markdown
59 lines
1.8 KiB
Markdown
# 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)
|