优化更新

2026-09-14 09:44:33 +08:00
parent b3a9e21254
commit 5b8e178970
60 changed files with 1243 additions and 1022 deletions
@@ -133,7 +133,7 @@ query = query.filter(self._soft_col() == 0)
 ```
 document/                           # 补充文档
 ├── 数据库迁移_runbook.md           # 数据库迁移操作手册
-└── djangoadmin.fastapi.elevue.sql  # 数据库结构 SQL
+└── djangoadmin.fastapi.antdvue.sql  # 数据库结构 SQL

 wiki/                               # VitePress 文档站
 ├── zh/                             # 中文文档
@@ -2,11 +2,11 @@

 ## 概述

-前端基于 Vue3 + ElementPlus + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
+前端基于 Vue3 + AntDesign Vue + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。

 :::tip 技术栈
 - Vue3（Composition API + `<script setup>`）
- ElementPlus
+- AntDesign Vue 4.x
 - 自定义组件（BasicTable / BasicForm / TableAction / PageWrapper）
 - Pinia 状态管理
 - Vue Router 路由管理
@@ -56,7 +56,7 @@ ui/src/
 ├── utils/                # 工具函数
 ├── hooks/                # 组合式函数
 ├── styles/               # 全局样式
-├── plugins/              # 插件注册（ElementPlus、自定义组件、指令）
+├── plugins/              # 插件注册（AntDesign Vue、自定义组件、指令）
 └── main.ts               # 入口文件
 ```

@@ -79,12 +79,12 @@ 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"
@@ -94,22 +94,25 @@ ui/src/
        @selection-change="onSelectionChange"
      >
        <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="primary"
+              danger
+              @click="handleDelete()"
+              :disabled="!selectionData.length"
+              v-perm="['sys:param:batchDelete']"
+            >
+              <template #icon><DeleteOutlined /></template>
+              删除
+            </a-button>
+          </a-space>
        </template>
      </BasicTable>
-    </el-card>
+    </a-card>

    <!-- 编辑弹窗（懒加载） -->
    <editDialog
@@ -133,56 +136,56 @@ 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 },
+  { title: 'ID', dataIndex: 'id', width: 50 },  // 固定列
+  { title: '参数名称', dataIndex: 'name', minWidth: 200 },
+  { title: '参数编码', dataIndex: 'code', minWidth: 250 },
+  { title: '参数值', dataIndex: 'value', minWidth: 200 },
  {
-    label: '参数类型',
-    prop: 'type',
+    title: '参数类型',
+    dataIndex: 'type',
    minWidth: 100,
-    render(record) {
-      return h(ElTag,
-        { type: record.row.type == 0 ? 'primary' : 'warning' },
-        { default: () => (record.row.type == 0 ? '系统' : '业务') }
+    customRender: ({ record }) => {
+      return h(Tag,
+        { color: record.type == 0 ? 'processing' : 'warning' },
+        () => (record.type == 0 ? '系统' : '业务')
      );
    },
  },
  {
-    label: '状态',
-    prop: 'status',
+    title: '状态',
+    dataIndex: 'status',
    minWidth: 100,
-    render(record) {
-      return h(ElTag,
-        { type: record.row.status == 1 ? 'success' : 'danger' },
-        { default: () => (record.row.status == 1 ? '正常' : '禁用') }
+    customRender: ({ record }) => {
+      return h(Tag,
+        { color: record.status == 1 ? 'success' : 'error' },
+        () => (record.status == 1 ? '正常' : '禁用')
      );
    },
  },
-  { label: '创建时间', prop: 'createTime', width: 180 },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
 ];
 ```

-### render 函数自定义渲染
+### customRender 函数自定义渲染

 ```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' },
+    () => record.statusText  // 使用后端 serialize_maps 返回的 xxxText
  );
 }

 // 链接
-render(record) {
+customRender: ({ record }) => {
  return h('a',
-    { href: record.row.url, target: '_blank', class: 'text-blue-500' },
-    { default: () => record.row.url }
+    { href: record.url, target: '_blank', class: 'text-blue-500' },
+    () => record.url
  );
 }
 ```
@@ -206,7 +209,7 @@ export const schemas: FormSchema[] = [
    label: '参数类型',
    componentProps: {
      placeholder: '请选择参数类型',
-      clearable: true,
+      allowClear: true,
      options: [
        { label: '系统', value: '0' },
        { label: '业务', value: '1' },
@@ -219,7 +222,7 @@ export const schemas: FormSchema[] = [
    label: '状态',
    componentProps: {
      placeholder: '请选择状态',
-      clearable: true,
+      allowClear: true,
      options: [
        { label: '正常', value: '1' },
        { label: '禁用', value: '2' },
@@ -349,8 +352,8 @@ const handleAdd = async () => {
 };

 // 编辑
-const handleEdit = async (record: Recordable) => {
-  paramId.value = record.row.id;
+const handleEdit = async (id: number) => {
+  paramId.value = id;
  await nextTick();
  editVisible.value = true;
 };
@@ -359,16 +362,18 @@ const handleEdit = async (record: Recordable) => {
 ## 删除（单条 + 批量）

 ```typescript
-async function handleDelete(record: Recordable) {
-  let ids = [];
-  if (!record) {
-    // 批量删除：取多选行的 ID
-    ids = selectionData.value.map(({ id }) => id);
-  }
-  await confirm('确定要删除？');
-  record ? await paramDelete(record.row.id) : await paramBatchDelete(ids);
-  message('删除成功');
-  reloadTable();
+import { Modal, message } from 'ant-design-vue';
+
+async function handleDelete(id?: number) {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除？',
+    onOk: async () => {
+      id ? await paramDelete(id) : await paramBatchDelete(selectionData.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  });
 }

 // 多选变化
@@ -73,6 +73,9 @@ position_service = PositionService()
 | `serialize_maps` | dict | 枚举显示名映射 | `{'status': {1: '在用', 2: '停用'}}` |
 | `file_fields` | tuple | 文件字段 | `('cover', 'image')` |
 | `rich_text_fields` | tuple | 富文本字段 | `('content',)` |
+| `file_dir` | str | 文件存储子目录名 | 默认从表名去掉 `DB_PREFIX` 推导 |
+| `serialize_extra` | Callable | 列表/详情共用序列化钩子，返回需合并进字典的额外字段 | — |
+| `detail_serialize` | Callable | 详情专用序列化钩子，仅在 `get_detail` 时合并 | — |

 :::tip 单例模式
 每个模块在文件末尾创建 Service 实例（如 `position_service`），供 Endpoint 层使用。