From cff104ab026befca1125f5521771ad45ba138b6b Mon Sep 17 00:00:00 2001
From: cxymds <cxymds@qq.com>
Date: Tue, 25 Mar 2025 10:00:24 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20remove=20refresh=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/access-keys/index.vue | 121 +++++++++++++++++++-----------------
 pages/browser/index.vue     |  45 ++++++++------
 pages/policies/index.vue    |  60 ++++++++++--------
 3 files changed, 122 insertions(+), 104 deletions(-)

diff --git a/pages/access-keys/index.vue b/pages/access-keys/index.vue
index 7200817..abb3c1d 100644
--- a/pages/access-keys/index.vue
+++ b/pages/access-keys/index.vue
@@ -34,10 +34,10 @@
           <n-form-item label="" path="name">
             <n-input placeholder="搜索访问秘钥" @input="filterName" />
           </n-form-item>
-          <n-button @click="() => refresh()">
+          <!-- <n-button @click="() => refresh()">
             <Icon name="ri:refresh-line" class="mr-2" />
             <span>刷新</span>
-          </n-button>
+          </n-button> -->
         </n-flex>
       </n-form>
 
@@ -58,25 +58,32 @@
 </template>
 
 <script lang="ts" setup>
-import { type DataTableColumns, type DataTableInst, type DataTableRowKey, NButton, NPopconfirm, NSpace } from "naive-ui"
-import { Icon } from "#components"
-import { ChangePassword, EditItem, NewItem } from "~/components/access-keys"
+import {
+  type DataTableColumns,
+  type DataTableInst,
+  type DataTableRowKey,
+  NButton,
+  NPopconfirm,
+  NSpace,
+} from "naive-ui";
+import { Icon } from "#components";
+import { ChangePassword, EditItem, NewItem } from "~/components/access-keys";
 
-const { $api } = useNuxtApp()
-const dialog = useDialog()
-const message = useMessage()
-const { listUserServiceAccounts, deleteServiceAccount } = useAccessKeys()
+const { $api } = useNuxtApp();
+const dialog = useDialog();
+const message = useMessage();
+const { listUserServiceAccounts, deleteServiceAccount } = useAccessKeys();
 
 const searchForm = reactive({
   name: "",
-})
+});
 interface RowData {
-  accessKey: string
-  expiration: string
-  name: string
-  description: string
-  accountStatus: string
-  actions: string
+  accessKey: string;
+  expiration: string;
+  name: string;
+  description: string;
+  accountStatus: string;
+  actions: string;
 }
 
 const columns: DataTableColumns<RowData> = [
@@ -88,7 +95,7 @@ const columns: DataTableColumns<RowData> = [
     align: "center",
     key: "accessKey",
     filter(value, row) {
-      return !!row.accessKey.includes(value.toString())
+      return !!row.accessKey.includes(value.toString());
     },
   },
   {
@@ -101,7 +108,7 @@ const columns: DataTableColumns<RowData> = [
     align: "center",
     key: "accountStatus",
     render: (row: any) => {
-      return row.accountStatus === "on" ? "可用" : "禁用"
+      return row.accountStatus === "on" ? "可用" : "禁用";
     },
   },
   {
@@ -157,88 +164,88 @@ const columns: DataTableColumns<RowData> = [
             ),
           ],
         }
-      )
+      );
     },
   },
-]
+];
 
 // 搜索过滤
-const tableRef = ref<DataTableInst>()
+const tableRef = ref<DataTableInst>();
 function filterName(value: string) {
   tableRef.value &&
     tableRef.value.filter({
       accessKey: [value],
-    })
+    });
 }
-const listData = ref<any[]>([])
+const listData = ref<any[]>([]);
 
 onMounted(() => {
-  getDataList()
-})
+  getDataList();
+});
 // 获取数据
 const getDataList = async () => {
   try {
-    const res = await listUserServiceAccounts({})
-    listData.value = res.accounts || []
+    const res = await listUserServiceAccounts({});
+    listData.value = res.accounts || [];
   } catch (error) {
-    message.error("获取数据失败")
+    message.error("获取数据失败");
   }
-}
+};
 
 // 刷新
 const refresh = () => {
-  getDataList()
-}
+  getDataList();
+};
 
 /** **********************************添加 */
-const newItemRef = ref()
-const newItemVisible = ref(false)
+const newItemRef = ref();
+const newItemVisible = ref(false);
 
 function addItem() {
-  newItemVisible.value = true
+  newItemVisible.value = true;
 }
 
 // 添加之后的反馈弹窗
-const noticeRef = ref()
+const noticeRef = ref();
 function noticeDialog(data: any) {
-  console.log(data)
-  noticeRef.value.openDialog(data)
+  console.log(data);
+  noticeRef.value.openDialog(data);
 }
 
 /** **********************************修改 */
-const editItemRef = ref()
+const editItemRef = ref();
 function openEditItem(row: any) {
-  editItemRef.value.openDialog(row)
+  editItemRef.value.openDialog(row);
 }
 /** **********************************修改密码 */
-const changePasswordModalRef = ref()
-const changePasswordVisible = ref(false)
+const changePasswordModalRef = ref();
+const changePasswordVisible = ref(false);
 
 function changePassword() {
-  changePasswordVisible.value = true
+  changePasswordVisible.value = true;
 }
 
 /** ***********************************删除 */
 async function deleteItem(row: any) {
   try {
-    const res = await deleteServiceAccount(row.accessKey)
+    const res = await deleteServiceAccount(row.accessKey);
 
-    message.success("删除成功")
-    getDataList()
+    message.success("删除成功");
+    getDataList();
   } catch (error) {
-    message.error("删除失败")
+    message.error("删除失败");
   }
 }
 
 /** ************************************批量删除 */
 function rowKey(row: any): string {
-  return row.accessKey
+  return row.accessKey;
 }
 
-const checkedKeys = ref<DataTableRowKey[]>([])
+const checkedKeys = ref<DataTableRowKey[]>([]);
 function handleCheck(keys: DataTableRowKey[]) {
-  checkedKeys.value = keys
-  return checkedKeys
+  checkedKeys.value = keys;
+  return checkedKeys;
 }
 // 批量删除
 function deleteByList() {
@@ -249,17 +256,17 @@ function deleteByList() {
     negativeText: "取消",
     onPositiveClick: async () => {
       if (!checkedKeys.value.length) {
-        message.error("请至少选择一项")
-        return
+        message.error("请至少选择一项");
+        return;
       }
       try {
-        await Promise.all(checkedKeys.value.map((item) => deleteServiceAccount(item as string)))
-        message.success("删除成功")
-        getDataList()
+        await Promise.all(checkedKeys.value.map((item) => deleteServiceAccount(item as string)));
+        message.success("删除成功");
+        getDataList();
       } catch (error) {
-        message.error("删除失败")
+        message.error("删除失败");
       }
     },
-  })
+  });
 }
 </script>
diff --git a/pages/browser/index.vue b/pages/browser/index.vue
index 21468ec..63bfe68 100644
--- a/pages/browser/index.vue
+++ b/pages/browser/index.vue
@@ -20,14 +20,19 @@
             </template>
           </n-input>
         </div>
-        <div class="flex items-center gap-4">
+        <!-- <div class="flex items-center gap-4">
           <n-button @click="async () => refresh()">
             <Icon name="ri:refresh-line" class="mr-2" />
             <span>刷新</span>
           </n-button>
-        </div>
+        </div> -->
       </div>
-      <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="data" :pagination="false" :bordered="false" />
+      <n-data-table
+        class="border dark:border-neutral-700 rounded overflow-hidden"
+        :columns="columns"
+        :data="data"
+        :pagination="false"
+        :bordered="false" />
     </page-content>
 
     <buckets-new-form :show="formVisible" @update:show="handleFormClosed"></buckets-new-form>
@@ -35,9 +40,9 @@
 </template>
 
 <script lang="ts" setup>
-import { Icon, NuxtLink } from '#components'
-import { NButton, NSpace, type DataTableColumns } from 'naive-ui'
-import { useRouter } from 'vue-router'
+import { Icon, NuxtLink } from "#components";
+import { NButton, NSpace, type DataTableColumns } from "naive-ui";
+import { useRouter } from "vue-router";
 
 const { listBuckets } = useBucket({});
 const formVisible = ref(false);
@@ -48,50 +53,50 @@ interface RowData {
 }
 const columns: DataTableColumns<RowData> = [
   {
-    title: '桶',
+    title: "桶",
     // dataIndex: 'name',
-    key: 'Name',
+    key: "Name",
     render: (row: { Name: string }) => {
       return h(
         NuxtLink,
         {
           href: `/browser/${encodeURIComponent(row.Name)}`,
-          class: 'flex items-center gap-2',
+          class: "flex items-center gap-2",
         },
         {
-          default: () => [icon('ri:archive-line'), row.Name]
+          default: () => [icon("ri:archive-line"), row.Name],
         }
       );
     },
   },
   {
-    title: '创建时间',
+    title: "创建时间",
     // dataIndex: 'creationDate',
-    key: 'CreationDate',
+    key: "CreationDate",
   },
   {
-    title: '操作',
-    key: 'actions',
-    align: 'center',
+    title: "操作",
+    key: "actions",
+    align: "center",
     width: 100,
     render: (row: RowData) => {
       return h(
         NSpace,
         {
-          justify: 'center',
+          justify: "center",
         },
         {
           default: () => [
             h(
               NButton,
               {
-                size: 'small',
+                size: "small",
                 secondary: true,
                 onClick: () => handleRowClick(row),
               },
               {
-                default: () => '',
-                icon: () => h(Icon, { name: 'ri:settings-5-line' }),
+                default: () => "",
+                icon: () => h(Icon, { name: "ri:settings-5-line" }),
               }
             ),
           ],
@@ -102,7 +107,7 @@ const columns: DataTableColumns<RowData> = [
 ];
 
 const { data, refresh } = await useAsyncData(
-  'buckets',
+  "buckets",
   async () => {
     const response = await listBuckets();
     return response.Buckets || [];
diff --git a/pages/policies/index.vue b/pages/policies/index.vue
index 1fc9dcf..aebc55a 100644
--- a/pages/policies/index.vue
+++ b/pages/policies/index.vue
@@ -20,22 +20,28 @@
             </template>
           </n-input>
         </div>
-        <div class="flex items-center gap-4">
+        <!-- <div class="flex items-center gap-4">
           <n-button @click="() => refresh()">
             <Icon name="ri:refresh-line" class="mr-2" />
             <span>刷新</span>
           </n-button>
-        </div>
+        </div> -->
       </div>
-      <n-data-table ref="tableRef" class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="pilicies" :pagination="false" :bordered="false" />
+      <n-data-table
+        ref="tableRef"
+        class="border dark:border-neutral-700 rounded overflow-hidden"
+        :columns="columns"
+        :data="pilicies"
+        :pagination="false"
+        :bordered="false" />
     </page-content>
     <policies-form-item v-model:show="showPolicyForm" :policy="current" @saved="fetchPolicies" />
   </div>
 </template>
 <script lang="ts" setup>
-import { Icon } from '#components'
-import { type DataTableColumns, type DataTableInst, NButton, NPopconfirm, NSpace } from 'naive-ui'
-import { useNuxtApp } from 'nuxt/app'
+import { Icon } from "#components";
+import { type DataTableColumns, type DataTableInst, NButton, NPopconfirm, NSpace } from "naive-ui";
+import { useNuxtApp } from "nuxt/app";
 const { $api } = useNuxtApp();
 const message = useMessage();
 
@@ -46,17 +52,17 @@ const showPolicyForm = computed({
   get: () => !!current.value,
   set: (val) => {
     if (!val) current.value = null;
-  }
+  },
 });
 
 const handleEdit = (item: any) => {
   current.value = item;
-}
+};
 
 const handleNew = () => {
   current.value = {
-    name: '',
-    content: '',
+    name: "",
+    content: "{}",
   };
 };
 
@@ -67,50 +73,50 @@ interface RowData {
 
 const columns: DataTableColumns<RowData> = [
   {
-    title: '名称',
-    key: 'name',
+    title: "名称",
+    key: "name",
     filter(value, row) {
       return !!row.name.includes(value.toString());
     },
   },
 
   {
-    title: '操作',
-    key: 'actions',
-    align: 'center',
+    title: "操作",
+    key: "actions",
+    align: "center",
     width: 180,
     render: (row: any) => {
       return h(
         NSpace,
         {
-          justify: 'center',
+          justify: "center",
         },
         {
           default: () => [
             h(
               NButton,
               {
-                size: 'small',
+                size: "small",
                 secondary: true,
                 onClick: () => handleEdit(row),
               },
               {
-                default: () => '',
-                icon: () => h(Icon, { name: 'ri:edit-2-line' }),
+                default: () => "",
+                icon: () => h(Icon, { name: "ri:edit-2-line" }),
               }
             ),
             h(
               NPopconfirm,
               { onPositiveClick: () => deleteItem(row) },
               {
-                default: () => '确认删除',
+                default: () => "确认删除",
                 trigger: () =>
                   h(
                     NButton,
-                    { size: 'small', secondary: true },
+                    { size: "small", secondary: true },
                     {
-                      default: () => '',
-                      icon: () => h(Icon, { name: 'ri:delete-bin-5-line' }),
+                      default: () => "",
+                      icon: () => h(Icon, { name: "ri:delete-bin-5-line" }),
                     }
                   ),
               }
@@ -131,7 +137,7 @@ function filterName(value: string) {
 
 const fetchPolicies = async () => {
   try {
-    const res = await $api.get('/list-canned-policies');
+    const res = await $api.get("/list-canned-policies");
     pilicies.value = Object.keys(res).map((key) => {
       return {
         name: key,
@@ -139,7 +145,7 @@ const fetchPolicies = async () => {
       };
     });
   } catch (error) {
-    message.error('获取数据失败');
+    message.error("获取数据失败");
   }
 };
 
@@ -154,10 +160,10 @@ const refresh = () => {
 async function deleteItem(row: any) {
   try {
     await $api.delete(`/remove-canned-policy?name=${encodeURIComponent(row.name)}`);
-    message.success('删除成功');
+    message.success("删除成功");
     fetchPolicies();
   } catch (error) {
-    message.error('删除失败');
+    message.error("删除失败");
   }
 }
 </script>