release(custom): i

src/views/system/index/index.vue

@@ -1,12 +1,15 @@
 <template>
   <CommonPage show-footer :title="$route.title">
-    <n-button type="primary" @click="handleAdd(1)">新增幻灯片</n-button>
+    <n-button v-perms="['/admin/rotation/edit']" type="primary" @click="handleAdd(1)">
+      新增幻灯片
+    </n-button>
     <n-data-table
       :loading="loading"
       :columns="columns"
       :data="data"
       :pagination="pagination"
       :bordered="false"
+      remote
     />
     <n-modal v-model:show="showModal">
       <n-card
@@ -44,10 +47,11 @@
 </template>
 
 <script setup>
-import { onMounted, h } from 'vue'
+import { onMounted, h, withDirectives, resolveDirective } from 'vue'
 import api from './api'
-import { NButton } from 'naive-ui'
+import { NButton, NImage } from 'naive-ui'
 import Upload from '@/components/Upload.vue'
+const vPerms = resolveDirective('perms')
 
 const loading = ref(false)
 
@@ -62,12 +66,9 @@ const columns = ref([
     align: 'center',
     slot: 'url',
     render(row) {
-      return h('img', {
+      return h(NImage, {
+        width: '50',
         src: row.url[0]?.url || '',
-        style: {
-          width: '30px',
-          height: '30px',
-        },
       })
     },
   },
@@ -85,17 +86,20 @@ const columns = ref([
     slot: 'action',
     render(row) {
       return [
-        h(
-          NButton,
-          {
-            type: 'primary',
-            size: 'small',
-            onClick: () => {
-              formValue.value = row
-              handleAdd(2)
+        withDirectives(
+          h(
+            NButton,
+            {
+              type: 'primary',
+              size: 'small',
+              onClick: () => {
+                formValue.value = row
+                handleAdd(2)
+              },
             },
-          },
-          () => '编辑'
+            () => '编辑'
+          ),
+          [[vPerms, ['/admin/rotation/edit']]]
         ),
       ]
     },