59 lines
2.2 KiB
Markdown
59 lines
2.2 KiB
Markdown
# 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，超管 *:*:*）
|
||
```
|