优化更新

DjangoAdmin_Django_AntdVue/zh/volume7/fe-component.md

@@ -2,11 +2,11 @@
 
 ## 概述
 
-前端基于 Vue3 + ElementPlus + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
+前端基于 Vue3 + Ant Design Vue + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `bodyCell` 插槽四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
 
 :::tip 技术栈
 - Vue3（Composition API + `<script setup>`）
-- ElementPlus 2.x
+- Ant Design Vue 3.x
 - 自定义组件（BasicTable / BasicForm / TableAction / PageWrapper）
 - Pinia 状态管理
 - Vue Router 路由管理
@@ -56,7 +56,7 @@ ui/src/
 ├── utils/                # 工具函数
 ├── hooks/                # 组合式函数
 ├── styles/               # 全局样式
-├── plugins/              # 插件注册（ElementPlus、自定义组件、指令）
+├── plugins/              # 插件注册（Ant Design Vue、自定义组件、指令）
 └── main.ts               # 入口文件
 ```
 
@@ -79,37 +79,48 @@ ui/src/
 <template>
   <PageWrapper>
     <!-- 搜索表单 -->
-    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+    <a-card :bordered="false" class="pt-3 mb-3 proCard">
       <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
-    </el-card>
+    </a-card>
 
     <!-- 数据表格 -->
-    <el-card :bordered="false" class="proCard">
+    <a-card :bordered="false" class="proCard">
       <BasicTable
         :columns="columns"
         :request="loadDataTable"
         :row-key="(row) => row.id"
         ref="tableRef"
-        :actionColumn="actionColumn"
-        @selection-change="onSelectionChange"
+        :row-selection="{ onChange: onSelectionChange }"
+        scroll-x="1200"
       >
         <template #tableTitle>
-          <el-button type="primary" @click="handleAdd" v-perm="['sys:param:add']">
-            <el-icon><PlusOutlined /></el-icon>
-            添加参数
-          </el-button>
-          <el-button
-            type="danger"
-            @click="handleDelete()"
-            :disabled="!selectionData.length"
-            v-perm="['sys:param:batchDelete']"
-          >
-            <el-icon><Delete /></el-icon>
-            删除
-          </el-button>
+          <a-space>
+            <a-button type="primary" @click="handleAdd" v-perm="['sys:param:add']">
+              <template #icon><PlusOutlined /></template>
+              添加参数
+            </a-button>
+            <a-button type="danger" @click="handleDelete()" :disabled="!selectionData.length" v-perm="['sys:param:batchDelete']">
+              <template #icon><DeleteOutlined /></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:param:update']">
+                <template #icon><EditOutlined /></template>
+                编辑
+              </a-button>
+              <a-button type="primary" danger @click="handleDelete(record.id)" v-perm="['sys:param:delete']">
+                <template #icon><DeleteOutlined /></template>
+                删除
+              </a-button>
+            </a-space>
+          </template>
         </template>
       </BasicTable>
-    </el-card>
+    </a-card>
 
     <!-- 编辑弹窗（懒加载） -->
     <editDialog
@@ -133,37 +144,63 @@ ui/src/
 ```typescript
 // views/data/param/columns.ts
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
+import { Tag } from 'ant-design-vue';
 
 export const columns = [
-  { type: 'selection' },                    // 多选列
-  { label: 'ID', prop: 'id', width: 50 },  // 固定列
-  { label: '参数名称', prop: 'name', minWidth: 200 },
-  { label: '参数编码', prop: 'code', minWidth: 250 },
-  { label: '参数值', prop: 'value', minWidth: 200 },
   {
-    label: '参数类型',
-    prop: 'type',
-    minWidth: 100,
-    render(record) {
-      return h(ElTag,
-        { type: record.row.type == 0 ? 'primary' : 'warning' },
-        { default: () => (record.row.type == 0 ? '系统' : '业务') }
+    title: 'ID',
+    dataIndex: 'id',
+    width: 50,
+  },
+  {
+    title: '参数名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '参数编码',
+    dataIndex: 'code',
+    width: 250,
+  },
+  {
+    title: '参数值',
+    dataIndex: 'value',
+    width: 200,
+  },
+  {
+    title: '参数类型',
+    dataIndex: 'type',
+    width: 100,
+    customRender({ record }) {
+      return h(Tag,
+        { color: record.type == 0 ? 'blue' : 'warning' },
+        { default: () => (record.type == 0 ? '系统' : '业务') }
       );
     },
   },
   {
-    label: '状态',
-    prop: 'status',
-    minWidth: 100,
-    render(record) {
-      return h(ElTag,
-        { type: record.row.status == 1 ? 'success' : 'danger' },
-        { default: () => (record.row.status == 1 ? '正常' : '禁用') }
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+    customRender({ record }) {
+      return h(Tag,
+        { color: record.status == 1 ? 'success' : 'error' },
+        { default: () => (record.status == 1 ? '正常' : '禁用') }
       );
     },
   },
-  { label: '创建时间', prop: 'createTime', width: 180 },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+  {
+    title: '操作',
+    fixed: 'right',
+    dataIndex: 'action',
+    key: 'action',
+    width: 200,
+  },
 ];
 ```
 
@@ -171,10 +208,10 @@ export const columns = [
 
 ```typescript
 // 状态标签
-render(record) {
-  return h(ElTag,
-    { type: record.row.status == 1 ? 'success' : 'danger' },
-    { default: () => record.row.statusText }  // 使用后端 serialize_maps 返回的 xxxText
+customRender({ record }) {
+  return h(Tag,
+    { color: record.status == 1 ? 'success' : 'error' },
+    { default: () => record.statusText }  // 使用后端 serialize_maps 返回的 xxxText
   );
 }