优化更新

2026-09-13 23:01:19 +08:00
parent 0c67b3e8b5
commit 23bd737b82
88 changed files with 2214 additions and 2503 deletions
@@ -2,11 +2,11 @@

 ## 概述

-前端基于 Vue3 + ElementPlus + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
+前端基于 Vue3 + NaiveUI + 自定义组件库构建。页面统一使用 `PageWrapper` + `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/              # 插件注册（自定义组件、指令）
 └── main.ts               # 入口文件
 ```

@@ -77,55 +77,58 @@ 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"
      >
        <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="createModalRef"
      v-if="editVisible"
      :paramId="paramId"
      v-model:visible="editVisible"
      @success="reloadTable('noRefresh')"
    />
-  </PageWrapper>
+  </div>
 </template>
 ```

 :::warning 注意
 - 分页由 `BasicTable` 内置处理，无需引入 `<pagination>` 组件
 - `:request="loadDataTable"` 自动管理分页参数（pageNo / pageSize）和 loading 状态
- `tableRef.value.reload({ pageNo: 1 })` 用于搜索/刷新时重置到第一页
+- `basicTableRef.value.reload({ pageNo: 1 })` 用于搜索/刷新时重置到第一页
 :::

 ## 表格列定义（columns.ts）
@@ -133,37 +136,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 },                    // 多选列
+  { 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 +175,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 +199,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 +218,7 @@ export const schemas: FormSchema[] = [
  },
  {
    field: 'status',
-    component: 'Select',
+    component: 'NSelect',
    label: '状态',
    componentProps: {
      placeholder: '请选择状态',
@@ -234,24 +237,25 @@ export const schemas: FormSchema[] = [
 ```typescript
 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'],
        },
@@ -303,23 +307,21 @@ const loadDataTable = async (res: any) => {

 // 刷新表格
 function reloadTable(noRefresh = '') {
-  tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+  basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
 }

 // 搜索提交
 function handleSubmit(values: Recordable) {
-  handleReset();
-  for (const key in values) {
-    formParams[key] = values[key];
-  }
+  for (const key in formParams) { formParams[key] = ''; }
+  for (const key in values) { formParams[key] = values[key]; }
  reloadTable();  // 重置到第一页
 }

 // 重置搜索
-function handleReset() {
-  for (const key in formParams) {
-    formParams[key] = '';
-  }
+function handleReset(values: Recordable) {
+  for (const key in formParams) { formParams[key] = ''; }
+  for (const key in values) { formParams[key] = values[key]; }
+  reloadTable();
 }
 ```

@@ -330,6 +332,7 @@ function handleReset() {
 ```vue
 <!-- index.vue 中引用 -->
 <editDialog
+  ref="createModalRef"
  v-if="editVisible"
  :paramId="paramId"
  v-model:visible="editVisible"
@@ -338,42 +341,48 @@ function handleReset() {
 ```

 ```typescript
-// 懒加载编辑组件
-const editDialog = defineAsyncComponent(() => import('./edit.vue'));
-
 // 新增
 const handleAdd = async () => {
  paramId.value = 0;
-  await nextTick();
  editVisible.value = true;
+  await nextTick();
+  createModalRef.value.openModal();
 };

 // 编辑
-const handleEdit = async (record: Recordable) => {
-  paramId.value = record.row.id;
-  await nextTick();
+async function handleEdit(record) {
+  paramId.value = record.id;
  editVisible.value = true;
-};
+  await nextTick();
+  createModalRef.value.openModal();
+}
 ```

 ## 删除（单条 + 批量）

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

 // 多选变化
-function onSelectionChange(value) {
-  selectionData.value = value;
+function onCheckedRow(keys) {
+  rowKeys.value = keys;
 }
 ```

@@ -384,8 +393,8 @@ function onSelectionChange(value) {
 | `handle` | 事件处理 | `handleAdd`、`handleEdit`、`handleDelete`、`handleSubmit`、`handleReset` |
 | `load` | 数据加载 | `loadDataTable` |
 | `reload` | 刷新数据 | `reloadTable` |
-| `on` | 组件事件回调 | `onSelectionChange`、`onSuccess`、`onError` |
+| `on` | 组件事件回调 | `onCheckedRow`、`onSuccess`、`onError` |

 ## 总结

-前端页面统一使用 `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/` 目录下。列定义使用 `title`/`key`（非 `label`/`prop`），组件使用 NaiveUI（`NTag`、`NInput`、`NSelect`），图标来自 `@vicons/antd`。