优化更新

2026-09-14 10:33:29 +08:00
parent e8b5d55603
commit 11c46addfa
61 changed files with 1025 additions and 896 deletions
@@ -1,6 +1,6 @@
 # 前端页面视图

-前端页面视图是用户直接交互的界面。项目使用 Vue3 + ElementPlus + Vite 构建。一个完整的 CRUD 页面由 4 个文件组成：
+前端页面视图是用户直接交互的界面。项目使用 Vue3 + NaiveUI + Vite 构建。一个完整的 CRUD 页面由 4 个文件组成：

 ```
 ui/src/views/system/position/
@@ -19,10 +19,10 @@ ui/src/views/system/position/
 ```vue
 <template>
  <PageWrapper>
-    <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>
-    <el-card :bordered="false" class="proCard">
+    </n-card>
+    <n-card :bordered="false" class="proCard">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
@@ -32,30 +32,30 @@ ui/src/views/system/position/
        @selection-change="onSelectionChange"
      >
        <template #tableTitle>
-          <el-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
+          <n-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
            <template #icon>
-              <el-icon class="el-input__icon">
+              <n-icon>
                <PlusOutlined />
-              </el-icon>
+              </n-icon>
            </template>
            添加岗位
-          </el-button>
-          <el-button
-            type="danger"
+          </n-button>
+          <n-button
+            type="error"
            @click="handleDelete()"
            :disabled="!selectionData.length"
            v-perm="['sys:position:batchDelete']"
          >
            <template #icon>
-              <el-icon class="el-input__icon">
+              <n-icon>
                <Delete />
-              </el-icon>
+              </n-icon>
            </template>
            删除
-          </el-button>
+          </n-button>
        </template>
      </BasicTable>
-    </el-card>
+    </n-card>

    <editDialog
      v-if="editVisible"
@@ -68,7 +68,6 @@ ui/src/views/system/position/

 <script lang="ts" setup>
  import { reactive, ref, h, nextTick, defineAsyncComponent } from 'vue';
-  import { ColProps } from 'element-plus';
  import { schemas } from './querySchemas';
  import { useForm } from '@/components/Form/index';
  import { TableAction } from '@/components/Table';
@@ -112,7 +111,7 @@ ui/src/views/system/position/
          {
            label: '删除',
            icon: 'Delete',
-            type: 'danger',
+            type: 'error',
            onClick: handleDelete.bind(null, record),
            auth: ['sys:position:delete'],
          },
@@ -142,7 +141,7 @@ ui/src/views/system/position/
  const [register, {}] = useForm({
    labelWidth: 80,
    layout: 'horizontal',
-    colProps: { span: 6 } as ColProps,
+    colProps: { span: 6 },
    submitOnReset: true,
    schemas,
  });
@@ -210,7 +209,7 @@ ui/src/views/system/position/

 ### 代码解析

-**页面结构**：`PageWrapper` 包裹两个 `el-card`，上方是搜索表单，下方是数据表格。
+**页面结构**：`PageWrapper` 包裹两个 `n-card`，上方是搜索表单，下方是数据表格。

 **搜索表单**：通过 `useForm` 注册，Schema 从 `querySchemas.ts` 导入。`submitOnReset: true` 表示重置时自动触发查询。

@@ -230,49 +229,47 @@ ui/src/views/system/position/

 ```vue
 <template>
-  <el-dialog
-    v-model="props.visible"
+  <n-modal
+    v-model:show="props.visible"
    :title="props.positionId ? '编辑' : '新增'"
-    width="500"
+    preset="dialog"
    :close-on-click-modal="false"
-    :before-close="dialogClose"
+    @close="dialogClose"
  >
-    <el-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
-      <el-form-item
+    <n-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
+      <n-form-item
        label="岗位名称"
-        prop="name"
-        :rules="{ required: true, message: '请输入岗位名称', trigger: 'blur' }"
+        path="name"
+        :rule="{ required: true, message: '请输入岗位名称', trigger: 'blur' }"
      >
-        <el-input class="ls-input" v-model="formData.name" placeholder="请输入岗位名称" clearable />
-      </el-form-item>
-      <el-form-item label="岗位状态" prop="status">
-        <el-radio-group v-model="formData.status" name="status">
-          <el-radio :value="1">正常</el-radio>
-          <el-radio :value="2">停用</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="排序" prop="sort">
-        <el-input-number v-model="formData.sort" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="dialogClose">取消</el-button>
-        <el-button :loading="subLoading" type="primary" @click="submit"> 确定 </el-button>
-      </span>
+        <n-input class="ls-input" v-model:value="formData.name" placeholder="请输入岗位名称" clearable />
+      </n-form-item>
+      <n-form-item label="岗位状态" path="status">
+        <n-radio-group v-model:value="formData.status" name="status">
+          <n-radio :value="1">正常</n-radio>
+          <n-radio :value="2">停用</n-radio>
+        </n-radio-group>
+      </n-form-item>
+      <n-form-item label="排序" path="sort">
+        <n-input-number v-model:value="formData.sort" />
+      </n-form-item>
+    </n-form>
+    <template #action>
+      <n-button @click="dialogClose">取消</n-button>
+      <n-button :loading="subLoading" type="primary" @click="submit"> 确定 </n-button>
    </template>
-  </el-dialog>
+  </n-modal>
 </template>

 <script lang="ts" setup>
-  import type { FormInstance } from 'element-plus';
+  import type { FormInst } from 'naive-ui';
  import { getPositionDetail, positionAdd, positionUpdate } from '@/api/system/position';
  import { onMounted, reactive, shallowRef } from 'vue';
  import { message } from '@/utils/auth';
  import { useLockFn } from '@/utils/useLockFn';

  const emit = defineEmits(['success', 'update:visible']);
-  const formRef = shallowRef<FormInstance>();
+  const formRef = shallowRef<FormInst>();

  /**
   * 定义表单参数
@@ -369,7 +366,7 @@ ui/src/views/system/position/

 ```typescript
 import { h } from 'vue';
-import { ElTag } from 'element-plus';
+import { NTag } from 'naive-ui';

 export const columns = [
  {
@@ -392,9 +389,9 @@ export const columns = [
    minWidth: 100,
    render(record) {
      return h(
-        ElTag,
+        NTag,
        {
-          type: record.row.status == 1 ? 'success' : 'danger',
+          type: record.row.status == 1 ? 'success' : 'error',
        },
        {
          default: () => (record.row.status == 1 ? '正常' : '停用'),
@@ -480,7 +477,7 @@ export const schemas: FormSchema[] = [
 | `field` | 字段名，与后端查询参数对应 |
 | `component` | 表单组件类型：`Input` / `Select` / `DatePicker` 等 |
 | `label` | 标签文本 |
-| `componentProps` | 组件属性，透传给 ElementPlus 组件 |
+| `componentProps` | 组件属性，透传给 NaiveUI 组件 |

 **Select 组件**：`options` 定义下拉选项，`clearable: true` 允许清空选择。

@@ -61,9 +61,9 @@
 | name | varchar(255) | 岗位名称 |
 | status | int | 状态：1-在用 2-停用 |
 | sort | int | 排序号 |
-| create_user | varchar(255) | 创建人 |
+| create_user | varchar(50) | 创建人 |
 | create_time | datetime | 创建时间 |
-| update_user | varchar(255) | 更新人 |
+| update_user | varchar(50) | 更新人 |
 | update_time | datetime | 更新时间 |
 | is_delete | int | 软删除标记：0-正常 1-已删除 |