优化更新

2026-09-13 17:33:13 +08:00
parent 8be23a62a3
commit 7f758cc6e9
97 changed files with 2333 additions and 3595 deletions
@@ -3,7 +3,7 @@
 <!-- Copyright (c) 2021-2026 小蚂蚁云团队 版权所有 -->

 :::tip 说明
-项目提供丰富的公共组件，位于 `ui/src/components/` 目录，基于 ElementPlus 二次封装，覆盖表格、表单、弹窗、上传、富文本编辑等常见场景。组件通过 `src/plugins/` 中的 `setupCustomComponents` 全局注册，任何页面直接使用，无需单独 import。
+项目提供丰富的公共组件，位于 `ui/src/components/` 目录，基于 Ant Design Vue 二次封装，覆盖表格、表单、弹窗、上传、富文本编辑等常见场景。组件通过 `src/plugins/` 中的 `setupCustomComponents` 全局注册，任何页面直接使用，无需单独 import。
 :::

 ## 组件总览
@@ -19,7 +19,7 @@
 | CropperImage | `components/Cropper/` | 图片裁剪（圆形/矩形、实时预览） |
 | QrCode | `components/Qrcode/` | 二维码生成（canvas/img、内嵌 logo） |
 | ChinaArea | `components/ChinaArea/` | 省市区级联（懒加载、二/三级联动） |
-| Icon | `components/icon/` | 图标（支持 ElementPlus 图标 + SVG 图标） |
+| Icon | `components/icon/` | 图标（支持 Ant Design Icons + SVG 图标） |
 | BasicSelect | `components/Select/` | 增强下拉（远程请求、本地缓存） |
 | CountTo | `components/CountTo/` | 数字动画（前缀/后缀、千分位、缓动曲线） |
 | Password | `components/Password/` | 密码强度（强度指示器、重复确认、复杂度校验） |
@@ -40,7 +40,7 @@

 ## BasicTable 表格

-表格组件是使用频率最高的组件，基于 `el-table` + `el-pagination` 封装，详见 [BasicTable 表格](/zh/volume4/frontend/table) 章节。
+表格组件是使用频率最高的组件，基于 Ant Design Vue 的 `a-table` 封装，详见 [BasicTable 表格](/zh/volume4/frontend/table) 章节。

 ### Props

@@ -79,12 +79,12 @@

 | 属性 | 类型 | 说明 |
 |------|------|------|
-| `label` | `string` | 列标题 |
-| `prop` | `string` | 字段名 |
+| `title` | `string` | 列标题 |
+| `dataIndex` | `string` | 字段名 |
 | `width` | `number` | 列宽 |
 | `align` | `string` | 对齐方式 |
 | `type` | `string` | 类型：`index` / `selection` |
-| `render` | `Function` | 自定义渲染函数 `(column, row, index) => VNode` |
+| `customRender` | `Function` | 自定义渲染函数 `({ text, record, index, column }) => VNode` |
 | `isSlot` | `boolean` | 是否使用插槽 |
 | `ellipsis` | `boolean` | 超出省略（tooltip） |
 | `auth` | `string[]` | 权限编码，控制列是否显示 |
@@ -131,37 +131,42 @@
 <template>
  <BasicTable :columns="columns" :request="loadDataTable" ref="tableRef">
    <template #tableTitle>
-      <el-button v-perm="['sys:level:add']" type="primary" @click="handleAdd">
-        <el-icon><Plus /></el-icon>新增
-      </el-button>
+      <a-space>
+        <a-button v-perm="['sys:level:add']" type="primary" @click="handleAdd">
+          <template #icon><PlusOutlined /></template>
+          新增
+        </a-button>
+      </a-space>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <a-space>
+          <a-button type="primary" @click="handleEdit(record.id)" v-perm="['sys:level:update']">
+            <template #icon><EditOutlined /></template>
+            编辑
+          </a-button>
+          <a-button type="primary" danger @click="handleDelete(record.id)" v-perm="['sys:level:delete']">
+            <template #icon><DeleteOutlined /></template>
+            删除
+          </a-button>
+        </a-space>
+      </template>
    </template>
  </BasicTable>
 </template>

 <script setup lang="ts">
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+
 const columns = [
-  { label: '名称', prop: 'name', width: 200 },
-  { label: '状态', prop: 'status', width: 100 },
-  { label: '创建时间', prop: 'createTime', width: 180 },
+  { title: '名称', dataIndex: 'name', width: 200 },
+  { title: '状态', dataIndex: 'status', width: 100 },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
 ];

-const actionColumn = {
-  width: 200,
-  actions: [
-    { label: '编辑', auth: ['sys:level:update'], onClick: handleEdit },
-    {
-      label: '删除',
-      auth: ['sys:level:delete'],
-      isConfirm: true,
-      popConfirm: { title: '确认删除？' },
-      onClick: handleDelete,
-    },
-  ],
-};
-
-async function loadDataTable({ page, pageSize }) {
-  const res = await getListApi({ pageNo: page, pageSize });
-  return { items: res.data, total: res.count };
+async function loadDataTable(params) {
+  const res = await getListApi(params);
+  return res;
 }
 </script>
 ```
@@ -228,7 +233,7 @@ async function loadDataTable({ page, pageSize }) {

 | 属性 | 类型 | 说明 |
 |------|------|------|
-| `field` | `string` | 字段名（必填） |
+| `name` | `string` | 字段名（必填） |
 | `label` | `string` | 标签文字 |
 | `component` | `ComponentType` | 渲染组件：`Input` / `Select` / `DatePicker` 等 |
 | `componentProps` | `object` | 组件属性 |
@@ -270,13 +275,13 @@ async function loadDataTable({ page, pageSize }) {
 const [registerForm] = useForm({
  schemas: [
    {
-      field: 'name',
+      name: 'name',
      label: '名称',
      component: 'Input',
      componentProps: { placeholder: '请输入名称' },
    },
    {
-      field: 'status',
+      name: 'status',
      label: '状态',
      component: 'Select',
      componentProps: {
@@ -287,7 +292,7 @@ const [registerForm] = useForm({
      },
    },
    {
-      field: 'dateRange',
+      name: 'dateRange',
      label: '日期范围',
      component: 'DatePicker',
      componentProps: { type: 'daterange' },
@@ -301,7 +306,7 @@ const [registerForm] = useForm({

 ## BasicModal 弹窗

-弹窗组件基于 `el-dialog` 封装，支持拖拽、自定义按钮，详见 [Modal 弹窗](/zh/volume4/frontend/modal) 章节。
+弹窗组件基于 `a-modal` 封装，支持拖拽、自定义按钮，详见 [Modal 弹窗](/zh/volume4/frontend/modal) 章节。

 ### Props

@@ -358,7 +363,7 @@ function handleEdit(record) {

 ## BasicUpload 上传

-文件/图片上传组件，基于 `el-upload` 封装，支持卡片/列表模式、数量限制、图片预览。
+文件/图片上传组件，基于 Ant Design Vue 的 `a-upload` 封装，支持卡片/列表模式、数量限制、图片预览。

 ### Props

@@ -700,10 +705,10 @@ async function getDeptOptions() {
    <BasicTable :columns="columns" :request="loadData" />

    <template #leftFooter>
-      <el-button @click="handleCancel">取消</el-button>
+      <a-button @click="handleCancel">取消</a-button>
    </template>
    <template #rightFooter>
-      <el-button type="primary" @click="handleSubmit">提交</el-button>
+      <a-button type="primary" @click="handleSubmit">提交</a-button>
    </template>
  </PageWrapper>
 </template>
@@ -726,7 +731,7 @@ async function getDeptOptions() {
 ```vue
 <template>
  <Authority :value="['sys:user:add']">
-    <el-button type="primary">新增用户</el-button>
+    <a-button type="primary">新增用户</a-button>
  </Authority>
 </template>
 ```
@@ -734,7 +739,7 @@ async function getDeptOptions() {
 :::tip v-perm 指令
 除了 `Authority` 组件，项目还提供 `v-perm` 指令，功能相同但更简洁：
 ```vue
-<el-button v-perm="['sys:user:add']">新增用户</el-button>
+<a-button v-perm="['sys:user:add']">新增用户</a-button>
 ```
 :::

@@ -742,7 +747,7 @@ async function getDeptOptions() {

 ## Icon 图标

-统一图标组件，支持 ElementPlus 图标和 SVG 图标。
+统一图标组件，支持 Ant Design Icons 和 SVG 图标。

 ### Props

@@ -756,8 +761,8 @@ async function getDeptOptions() {

 ```vue
 <template>
-  <!-- ElementPlus 图标 -->
-  <Icon name="el-icon-Plus" size="18px" />
+  <!-- Ant Design Icons -->
+  <PlusOutlined style="font-size: 18px" />
  <!-- SVG 图标 -->
  <Icon name="svg-icon-user" />
 </template>
@@ -838,4 +843,4 @@ setupCustomComponents(app); // 注册所有自定义组件

 ## 总结

-公共组件库基于 ElementPlus 二次封装，核心三件套 BasicTable（表格）、BasicForm（表单）、BasicModal（弹窗）覆盖列表页标准场景。辅以 Upload、Editor、Cropper 等业务组件，以及 Authority、v-perm 权限体系。通过全局注册，任何页面直接使用，无需单独 import。优先使用公共组件，避免重复开发。
+公共组件库基于 Ant Design Vue 二次封装，核心三件套 BasicTable（表格）、BasicForm（表单）、BasicModal（弹窗）覆盖列表页标准场景。辅以 Upload、Editor、Cropper 等业务组件，以及 Authority、v-perm 权限体系。通过全局注册，任何页面直接使用，无需单独 import。优先使用公共组件，避免重复开发。