G. 前端组件速查

概述

以下组件定义在 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

<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

<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

<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>