优化更新

DjangoAdmin_Django_NaiveVue/zh/volume7/fe-component.md

@@ -2,11 +2,11 @@
 
 ## 概述
 
-前端基于 Vue3 + ElementPlus + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
+前端基于 Vue3 + NaiveUI + 自定义组件库构建。页面统一使用 `n-card` + `BasicForm` + `BasicTable` + `TableAction` 组件组合，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
 
 :::tip 技术栈
 - Vue3（Composition API + `<script setup>`）
-- ElementPlus 2.x
+- NaiveUI
 - 自定义组件（BasicTable / BasicForm / TableAction / PageWrapper）
 - Pinia 状态管理
 - Vue Router 路由管理
@@ -56,7 +56,7 @@ ui/src/
 ├── utils/                # 工具函数
 ├── hooks/                # 组合式函数
 ├── styles/               # 全局样式
-├── plugins/              # 插件注册（ElementPlus、自定义组件、指令）
+├── plugins/              # 插件注册（NaiveUI、自定义组件、指令）
 └── main.ts               # 入口文件
 ```
 
@@ -77,48 +77,52 @@ ui/src/
 
 ```vue
 <template>
-  <PageWrapper>
+  <div>
     <!-- 搜索表单 -->
-    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+    <n-card :bordered="false" class="pt-3 mb-3 proCard">
       <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
-    </el-card>
+    </n-card>
 
     <!-- 数据表格 -->
-    <el-card :bordered="false" class="proCard">
+    <n-card :bordered="false" class="proCard">
       <BasicTable
         :columns="columns"
         :request="loadDataTable"
         :row-key="(row) => row.id"
-        ref="tableRef"
+        ref="basicTableRef"
         :actionColumn="actionColumn"
-        @selection-change="onSelectionChange"
+        @update:checked-row-keys="onCheckedRow"
+        :auto-scroll-x="true"
       >
         <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>
+          <n-space>
+            <n-button type="primary" @click="handleAdd" v-perm="['sys:param:add']">
+              <template #icon><n-icon><PlusOutlined /></n-icon></template>
+              添加参数
+            </n-button>
+            <n-button
+              type="error"
+              @click="handleDelete()"
+              :disabled="!rowKeys.length"
+              v-perm="['sys:param:batchDelete']"
+            >
+              <template #icon><n-icon><DeleteOutlined /></n-icon></template>
+              删除
+            </n-button>
+          </n-space>
         </template>
       </BasicTable>
-    </el-card>
+    </n-card>
 
-    <!-- 编辑弹窗（懒加载） -->
+    <!-- 编辑弹窗 -->
     <editDialog
+      ref="editModalRef"
       v-if="editVisible"
       :paramId="paramId"
       v-model:visible="editVisible"
       @success="reloadTable('noRefresh')"
     />
-  </PageWrapper>
+  </div>
 </template>
 ```
 
@@ -133,37 +137,37 @@ ui/src/
 ```typescript
 // views/data/param/columns.ts
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
+import { NTag } from 'naive-ui';
 
 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 },
+  { type: 'selection', width: 50, fixed: 'left' },  // 多选列
+  { title: 'ID', key: 'id', width: 50 },            // 固定列
+  { title: '参数名称', key: 'name', width: 200 },
+  { title: '参数编码', key: 'code', width: 250 },
+  { title: '参数值', key: 'value', width: 200 },
   {
-    label: '参数类型',
-    prop: 'type',
-    minWidth: 100,
+    title: '参数类型',
+    key: 'type',
+    width: 100,
     render(record) {
-      return h(ElTag,
-        { type: record.row.type == 0 ? 'primary' : 'warning' },
-        { default: () => (record.row.type == 0 ? '系统' : '业务') }
+      return h(NTag,
+        { bordered: false, type: record.type == 0 ? 'info' : 'warning' },
+        { default: () => (record.type == 0 ? '系统' : '业务') }
       );
     },
   },
   {
-    label: '状态',
-    prop: 'status',
-    minWidth: 100,
+    title: '状态',
+    key: 'status',
+    width: 100,
     render(record) {
-      return h(ElTag,
-        { type: record.row.status == 1 ? 'success' : 'danger' },
-        { default: () => (record.row.status == 1 ? '正常' : '禁用') }
+      return h(NTag,
+        { bordered: false, type: record.status == 1 ? 'success' : 'error' },
+        { default: () => (record.status == 1 ? '正常' : '禁用') }
       );
     },
   },
-  { label: '创建时间', prop: 'createTime', width: 180 },
+  { title: '创建时间', key: 'createTime', width: 180 },
 ];
 ```
 
@@ -172,17 +176,17 @@ export const columns = [
 ```typescript
 // 状态标签
 render(record) {
-  return h(ElTag,
-    { type: record.row.status == 1 ? 'success' : 'danger' },
-    { default: () => record.row.statusText }  // 使用后端 serialize_maps 返回的 xxxText
+  return h(NTag,
+    { bordered: false, type: record.status == 1 ? 'success' : 'error' },
+    { default: () => record.statusText }  // 使用后端 serialize_maps 返回的 xxxText
   );
 }
 
 // 链接
 render(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' },
+    { default: () => record.url }
   );
 }
 ```
@@ -196,13 +200,13 @@ import { FormSchema } from '@/components/Form/index';
 export const schemas: FormSchema[] = [
   {
     field: 'name',
-    component: 'Input',
+    component: 'NInput',
     label: '参数名称',
     componentProps: { placeholder: '请输入参数名称' },
   },
   {
     field: 'type',
-    component: 'Select',
+    component: 'NSelect',
     label: '参数类型',
     componentProps: {
       placeholder: '请选择参数类型',
@@ -215,7 +219,7 @@ export const schemas: FormSchema[] = [
   },
   {
     field: 'status',
-    component: 'Select',
+    component: 'NSelect',
     label: '状态',
     componentProps: {
       placeholder: '请选择状态',
@@ -232,26 +236,30 @@ export const schemas: FormSchema[] = [
 ## 操作栏（TableAction）
 
 ```typescript
+import { FormOutlined, DeleteOutlined } from '@vicons/antd';
+import { renderIcon } from '@/utils';
+
 const actionColumn = reactive({
   width: 200,
-  label: '操作',
-  prop: 'action',
+  title: '操作',
+  align: 'center',
+  key: 'action',
   fixed: 'right',
   render(record) {
-    return h(TableAction, {
+    return h(TableAction as any, {
       style: 'button',
       actions: [
         {
           label: '编辑',
-          icon: 'Edit',
-          type: 'warning',
+          icon: renderIcon(FormOutlined),
+          type: 'info',
           onClick: handleEdit.bind(null, record),
           auth: ['sys:param:update'],
         },
         {
           label: '删除',
-          icon: 'Delete',
-          type: 'danger',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
           onClick: handleDelete.bind(null, record),
           auth: ['sys:param:delete'],
         },
@@ -325,11 +333,12 @@ function handleReset() {
 
 ## 编辑弹窗（edit.vue）
 
-编辑弹窗通过 `defineAsyncComponent` 懒加载，使用 `v-model:visible` 控制显示：
+编辑弹窗使用 `basicModal` + `useModal` 模式，通过 `v-model:visible` 控制显示：
 
 ```vue
 <!-- index.vue 中引用 -->
 <editDialog
+  ref="editModalRef"
   v-if="editVisible"
   :paramId="paramId"
   v-model:visible="editVisible"
@@ -338,42 +347,58 @@ function handleReset() {
 ```
 
 ```typescript
-// 懒加载编辑组件
-const editDialog = defineAsyncComponent(() => import('./edit.vue'));
+import editDialog from './edit.vue';
 
 // 新增
 const handleAdd = async () => {
   paramId.value = 0;
-  await nextTick();
   editVisible.value = true;
+  await nextTick();
+  editModalRef.value?.openModal();
 };
 
 // 编辑
 const handleEdit = async (record: Recordable) => {
-  paramId.value = record.row.id;
-  await nextTick();
+  paramId.value = record.id;
   editVisible.value = true;
+  await nextTick();
+  editModalRef.value?.openModal();
 };
 ```
 
 ## 删除（单条 + 批量）
 
 ```typescript
-async function handleDelete(record: Recordable) {
+import { useMessage, useDialog } from 'naive-ui';
+
+const message = useMessage();
+const dialog = useDialog();
+
+async function handleDelete(record?: Recordable) {
   let ids = [];
   if (!record) {
-    // 批量删除：取多选行的 ID
-    ids = selectionData.value.map(({ id }) => id);
+    ids = rowKeys.value;
+    if (!ids.length) {
+      message.warning('请选择要删除的数据');
+      return;
+    }
   }
-  await confirm('确定要删除？');
-  record ? await paramDelete(record.row.id) : await paramBatchDelete(ids);
-  message('删除成功');
-  reloadTable();
+  dialog.warning({
+    title: '提示',
+    content: '确定要删除？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      record ? await paramDelete(record.id) : await paramBatchDelete(ids);
+      message.success('删除成功');
+      reloadTable();
+    },
+  });
 }
 
 // 多选变化
-function onSelectionChange(value) {
-  selectionData.value = value;
+function onCheckedRow(keys: (string | number)[]) {
+  rowKeys.value = keys;
 }
 ```
 
@@ -388,4 +413,4 @@ function onSelectionChange(value) {
 
 ## 总结
 
-前端页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套。分页由 `BasicTable` 内置处理，无需单独引入分页组件。每个模块包含 `index.vue`（列表页）、`edit.vue`（编辑弹窗）、`columns.ts`（列定义）、`querySchemas.ts`（搜索配置）四个文件。API 接口按模块分文件定义在 `api/` 目录下。
+前端页面统一使用 `n-card` + `BasicForm` + `BasicTable` + `TableAction` 组件组合。分页由 `BasicTable` 内置处理，无需单独引入分页组件。每个模块包含 `index.vue`（列表页）、`edit.vue`（编辑弹窗）、`columns.ts`（列定义）、`querySchemas.ts`（搜索配置）四个文件。API 接口按模块分文件定义在 `api/` 目录下。