From 36108f5fc592335b876624015ffa4e57f911d2c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E7=99=BB=E5=B1=B1?= <cxymds@qq.com>
Date: Mon, 22 Sep 2025 15:19:35 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Aevents=20=20s3=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/events/new-form.vue | 24 ++++++++++++++++++++++--
 composables/useBucket.ts       | 20 ++++++++++++++++++++
 pages/events/index.vue         | 31 ++++++++++++++++++++++++++++++-
 3 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/components/events/new-form.vue b/components/events/new-form.vue
index 2f15df6..f41ff7c 100644
--- a/components/events/new-form.vue
+++ b/components/events/new-form.vue
@@ -11,9 +11,14 @@
     }"
   >
     <n-card>
-      <n-form :model="formData" label-placement="left" label-width="120px">
+      <n-form :model="formData" label-placement="left" label-width="140px">
         <n-form-item :label="t('Amazon Resource Name')">
-          <n-input v-model="formData.resourceName" :placeholder="t('Please enter resource name')" />
+          <n-select
+            v-model:value="formData.resourceName"
+            filterable
+            :options="arnList"
+            :placeholder="t('Please select resource name')"
+          />
         </n-form-item>
 
         <n-form-item :label="t('Prefix')">
@@ -55,6 +60,13 @@ import { NButton, NForm, NFormItem, NInput } from 'naive-ui';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
+const formRef = ref(null);
+import { NButton, NForm, NFormItem, NInput } from 'naive-ui';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { getEventTargetArnList } = useEventTarget();
 const { t } = useI18n();
 const formRef = ref(null);
 const formData = ref({
@@ -92,4 +104,12 @@ const handleCancel = () => {
   // 取消逻辑
   visible.value = false;
 };
+  visible.value = false;
+};
+
+// 获取arn列表
+const arnList = ref([]);
+getEventTargetArnList().then(res => {
+  arnList.value = res.notification_endpoints;
+});
 </script>
diff --git a/composables/useBucket.ts b/composables/useBucket.ts
index 9dfe88a..4475ef3 100644
--- a/composables/useBucket.ts
+++ b/composables/useBucket.ts
@@ -26,6 +26,8 @@ import {
   GetBucketReplicationCommand,
   PutBucketReplicationCommand,
   DeleteBucketReplicationCommand,
+  PutBucketNotificationConfigurationCommand,
+  GetBucketNotificationConfigurationCommand,
 } from '@aws-sdk/client-s3';
 
 export function useBucket({ region }: { region?: string }) {
@@ -242,6 +244,22 @@ export function useBucket({ region }: { region?: string }) {
     return await $api.delete(`/remove-remote-target?bucket=${bucket}&arn=${arn}`);
   };
 
+  // 桶通知
+  const listBucketNotifications = async (bucket: string) => {
+    const params = {
+      Bucket: bucket,
+    };
+    return await $client.send(new GetBucketNotificationConfigurationCommand(params));
+  };
+
+  const putBucketNotifications = async (bucket: string, data: any) => {
+    const params = {
+      Bucket: bucket,
+      NotificationConfiguration: data,
+    };
+    return await $client.send(new PutBucketNotificationConfigurationCommand(params));
+  };
+
   /********************rustfs Replication target  end********************/
 
   return {
@@ -273,5 +291,7 @@ export function useBucket({ region }: { region?: string }) {
     setRemoteReplicationTarget,
     listRemoteReplicationTarget,
     deleteRemoteReplicationTarget,
+    listBucketNotifications,
+    putBucketNotifications,
   };
 }
diff --git a/pages/events/index.vue b/pages/events/index.vue
index 5ecfe12..a54d61d 100644
--- a/pages/events/index.vue
+++ b/pages/events/index.vue
@@ -23,7 +23,7 @@
             <Icon name="ri:add-line" class="mr-2" />
             <span>{{ t('Add Event Subscription') }}</span>
           </n-button>
-          <n-button @click="">
+          <n-button @click="refresh">
             <Icon name="ri:refresh-line" class="mr-2" />
             <span>{{ t('Refresh') }}</span>
           </n-button>
@@ -46,6 +46,8 @@ import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 const { listBuckets } = useBucket({});
+const { t } = useI18n();
+const { listBuckets, listBucketNotifications } = useBucket({});
 const formVisible = ref(false);
 const searchTerm = ref('');
 
@@ -139,6 +141,25 @@ const bucketList = computed(() => {
 const bucketName = ref<string>(bucketList.value.length > 0 ? (bucketList.value[0]?.value ?? '') : '');
 
 const pageData = ref([]);
+const bucketName = ref<string>(bucketList.value.length > 0 ? (bucketList.value[0]?.value ?? '') : '');
+const loading = ref<boolean>(false);
+const pageData = ref([]);
+watch(
+  () => bucketName.value,
+  async newVal => {
+    if (!newVal) return;
+
+    loading.value = true;
+    try {
+      refresh();
+    } catch (error) {
+      pageData.value = [];
+    } finally {
+      loading.value = false;
+    }
+  },
+  { immediate: true }
+);
 
 const handleRowDelete = (row: RowData, e: Event) => {
   e.stopPropagation();
@@ -148,5 +169,13 @@ const handleRowDelete = (row: RowData, e: Event) => {
 const newRef = ref();
 const handleNew = () => {
   newRef.value.open();
+};
+  newRef.value.open();
+};
+
+const refresh = async () => {
+  const response = await listBucketNotifications(bucketName.value);
+  console.log('🚀 ~ refresh ~ response:', response);
+  // pageData.value = response?.sort((a: any, b: any) => a.ID.localeCompare(b.ID)) || [];
 };
 </script>