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

Excel

组件	路径	说明
ImportExcel	components/Excel/	Excel 导入（解析文件）
Export2Excel	components/Excel/	Excel 导出（生成文件）

其他

组件	路径	说明
Authority	components/Authority/	权限组件（根据权限显示/隐藏）
Lockscreen	components/Lockscreen/	锁屏组件
Websocket	components/Websocket/	WebSocket 组件

使用示例

BasicTable

<template>
  <BasicTable
    :columns="columns"
    :request="loadDataTable"
    :row-key="(row) => row.id"
    ref="tableRef"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
      </template>
    </template>
  </BasicTable>
</template>

<script setup>
import { ref } from 'vue';
import { getExamplePage } from '@/api/tool/example';

const tableRef = ref();
const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '名称', dataIndex: 'name' },
  { title: '状态', dataIndex: 'statusText', width: 100 },
  { title: '操作', dataIndex: 'action', key: 'action', width: 180 },
];

const loadDataTable = async (params) => await getExamplePage(params);
const handleEdit = (record) => {};
</script>

BasicForm

<template>
  <BasicForm @register="registerForm" />
</template>

<script setup>
import { BasicForm, useForm } from '@/components/Form';

const [registerForm] = useForm({
  schemas: [
    {
      name: 'name',
      label: '名称',
      component: 'Input',
      rules: [{ required: true, message: '请输入名称', trigger: ['blur'] }],
    },
    { name: 'status', label: '状态', component: 'Select', componentProps: { options: [...] } },
  ],
});
</script>

BasicModal

<template>
  <basicModal @register="registerModal" @ok="handleSubmit">
    <template #default>
      <!-- 表单内容 -->
    </template>
  </basicModal>
</template>

<script setup>
import { basicModal, useModal } from '@/components/Modal';

const [registerModal, { openModal, closeModal }] = useModal();

const handleAdd = () => openModal();
const handleSubmit = async () => { /* ... */ closeModal(); };
</script>