优化更新

DjangoAdmin_Flask_NaiveVue/zh/volume4/frontend/perm-directive.md

@@ -90,15 +90,15 @@ export function usePermission() {
 ### v-perm（满足任一权限）
 
 ```vue
-<el-button v-perm="['sys:position:add']">添加岗位</el-button>
-<el-button v-perm="['sys:position:batchDelete']">删除</el-button>
-<el-button v-perm="['sys:position:export']">导出</el-button>
+<n-button v-perm="['sys:position:add']">添加岗位</n-button>
+<n-button v-perm="['sys:position:batchDelete']">删除</n-button>
+<n-button v-perm="['sys:position:export']">导出</n-button>
 ```
 
 ### v-perms（满足所有权限）
 
 ```vue
-<el-button v-perms="['sys:user:add', 'sys:user:import']">高级操作</el-button>
+<n-button v-perms="['sys:user:add', 'sys:user:import']">高级操作</n-button>
 ```
 
 ### 与 v-if 结合
@@ -113,7 +113,7 @@ const showAddBtn = computed(() => hasPermission(['sys:position:add']));
 ```
 
 ```vue
-<el-button v-if="showAddBtn">添加岗位</el-button>
+<n-button v-if="showAddBtn">添加岗位</n-button>
 ```
 
 ## 实际用法（position 模块）
@@ -123,20 +123,26 @@ const showAddBtn = computed(() => hasPermission(['sys:position:add']));
 ```vue
 <!-- src/views/system/position/index.vue -->
 <template>
-    <BasicTable :columns="columns" :request="loadDataTable" ref="tableRef" :actionColumn="actionColumn">
+    <BasicTable :columns="columns" :request="loadDataTable" ref="basicTableRef" :actionColumn="actionColumn">
         <template #tableTitle>
-            <el-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
-                <template #icon><el-icon><PlusOutlined /></el-icon></template>
-                添加岗位
-            </el-button>
-            <el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length"
-                v-perm="['sys:position:batchDelete']">
-                <template #icon><el-icon><Delete /></el-icon></template>
-                删除
-            </el-button>
+            <n-space>
+                <n-button type="primary" @click="handleAdd" v-perm="['sys:position:add']">
+                    <template #icon><n-icon><PlusOutlined /></n-icon></template>
+                    新建
+                </n-button>
+                <n-button type="error" @click="handleDelete" :disabled="!rowKeys.length"
+                    v-perm="['sys:position:batchDelete']">
+                    <template #icon><n-icon><DeleteOutlined /></n-icon></template>
+                    删除
+                </n-button>
+            </n-space>
         </template>
     </BasicTable>
 </template>
+
+<script setup>
+import { PlusOutlined, DeleteOutlined } from '@vicons/antd';
+</script>
 ```
 
 操作列中的权限控制通过 `auth` 属性实现：
@@ -144,23 +150,25 @@ const showAddBtn = computed(() => hasPermission(['sys:position:add']));
 ```typescript
 const actionColumn = reactive({
     width: 200,
-    label: '操作',
+    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:position:update'],  // 权限节点
                 },
                 {
                     label: '删除',
-                    icon: 'Delete',
-                    type: 'danger',
+                    icon: renderIcon(DeleteOutlined),
+                    type: 'error',
                     onClick: handleDelete.bind(null, record),
                     auth: ['sys:position:delete'],  // 权限节点
                 },
@@ -202,7 +210,7 @@ def add(request: Request, data: PositionForm):
 
 ```vue
 <!-- 前端 -->
-<el-button v-perm="['sys:position:add']">添加岗位</el-button>
+<n-button v-perm="['sys:position:add']">添加岗位</n-button>
 ```
 
 ## 超级管理员