优化更新

DjangoAdmin_FastAPI_NaiveVue/zh/volume4/frontend/view.md

@@ -32,8 +32,8 @@ src/views/
 | 文件 | 职责 | 说明 |
 |------|------|------|
 | `index.vue` | 列表页 | 搜索表单 + 工具栏 + BasicTable + 编辑弹窗引用 |
-| `edit.vue` | 编辑弹窗 | el-dialog + el-form，懒加载 |
-| `columns.ts` | 表格列定义 | 定义列 prop、label、render 函数等 |
+| `edit.vue` | 编辑弹窗 | n-modal + n-form，懒加载 |
+| `columns.ts` | 表格列定义 | 定义列 key、title、render 函数等 |
 | `querySchemas.ts` | 搜索表单定义 | FormSchema 数组，定义搜索字段 |
 
 ## index.vue 列表页
@@ -44,10 +44,10 @@ src/views/
 <!-- src/views/system/position/index.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"
@@ -57,30 +57,30 @@ src/views/
         @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"
@@ -93,7 +93,6 @@ src/views/
 
 <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';
@@ -120,8 +119,8 @@ src/views/
    */
   const actionColumn = reactive({
     width: 200,
-    label: '操作',
-    prop: 'action',
+    title: '操作',
+    key: 'action',
     fixed: 'right',
     render(record) {
       return h(TableAction, {
@@ -137,7 +136,7 @@ src/views/
           {
             label: '删除',
             icon: 'Delete',
-            type: 'danger',
+            type: 'error',
             onClick: handleDelete.bind(null, record),
             auth: ['sys:position:delete'],
           },
@@ -169,7 +168,7 @@ src/views/
   const [register, {}] = useForm({
     labelWidth: 80,
     layout: 'horizontal',
-    colProps: { span: 6 } as ColProps,
+    colProps: { span: 6 },
     submitOnReset: true,
     schemas,
   });
@@ -237,7 +236,7 @@ src/views/
   }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>
 ```
 
 ## edit.vue 编辑弹窗
@@ -245,48 +244,47 @@ src/views/
 ```vue
 <!-- src/views/system/position/edit.vue -->
 <template>
-  <el-dialog
-    v-model="props.visible"
+  <n-modal
+    v-model:show="props.visible"
     :title="props.positionId ? '编辑' : '新增'"
-    width="500"
+    :style="{ width: '500px' }"
     :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>
+        <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 #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogClose">取消</el-button>
-        <el-button :loading="subLoading" type="primary" @click="submit"> 确定 </el-button>
+        <n-button @click="dialogClose">取消</n-button>
+        <n-button :loading="subLoading" type="primary" @click="submit"> 确定 </n-button>
       </span>
     </template>
-  </el-dialog>
+  </n-modal>
 </template>
 <script lang="ts" setup>
-  import type { FormInstance } from 'element-plus';
   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();
 
   /**
    * 定义表单参数
@@ -356,8 +354,6 @@ src/views/
     }
   });
 </script>
-
-</script>
 ```
 
 ## 数据流
@@ -375,52 +371,52 @@ src/views/
 ```typescript
 // src/views/system/position/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',
+    title: 'ID',
+    key: 'id',
     fixed: 'left',
     width: 50,
   },
   {
-    label: '岗位名称',
-    prop: 'name',
-    minWidth: 100,
+    title: '岗位名称',
+    key: 'name',
+    width: 100,
   },
   {
-    label: '岗位状态',
-    prop: 'status',
-    minWidth: 100,
+    title: '岗位状态',
+    key: 'status',
+    width: 100,
     render(record) {
       return h(
-        ElTag,
+        NTag,
         {
-          type: record.row.status == 1 ? 'success' : 'danger',
+          type: record.status == 1 ? 'success' : 'error',
         },
         {
-          default: () => (record.row.status == 1 ? '正常' : '停用'),
+          default: () => (record.status == 1 ? '正常' : '停用'),
         },
       );
     },
   },
   {
-    label: '排序',
-    prop: 'sort',
-    minWidth: 100,
+    title: '排序',
+    key: 'sort',
+    width: 100,
   },
   {
-    label: '创建人',
-    prop: 'createUser',
-    minWidth: 100,
+    title: '创建人',
+    key: 'createUser',
+    width: 100,
   },
   {
-    label: '创建时间',
-    prop: 'createTime',
+    title: '创建时间',
+    key: 'createTime',
     width: 180,
   },
 ];
@@ -434,7 +430,7 @@ import { FormSchema } from '@/components/Form/index';
 export const schemas: FormSchema[] = [
   {
     field: 'name',
-    component: 'Input',
+    component: 'NInput',
     label: '岗位名称',
     componentProps: {
       placeholder: '请输入岗位名称',
@@ -442,7 +438,7 @@ export const schemas: FormSchema[] = [
   },
   {
     field: 'status',
-    component: 'Select',
+    component: 'NSelect',
     label: '状态',
     componentProps: {
       placeholder: '请选择状态',