feat ：buckets tag

Author: cxymds

components/buckets/info.vue

@@ -118,8 +118,22 @@
         </template>
         todo
       </n-descriptions-item>
-      <n-descriptions-item label="标签">
-        <span class="select-all">todo</span>
+      <n-descriptions-item class="w-1/2">
+        <template #label>
+          标签
+          <n-button quaternary round type="primary" @click="addTag">
+            <Icon name="ri:edit-2-line" class="mr-2" />
+          </n-button>
+        </template>
+        <n-tag
+          class="m-2"
+          v-for="(tag, index) in tags"
+          type="info"
+          @click="editTag(index)"
+          closable
+          @close="handledeleteTag(index)">
+          {{ tag.Key }}:{{ tag.Value }}
+        </n-tag>
       </n-descriptions-item>
       <n-descriptions-item>
         <template #label>
@@ -132,24 +146,107 @@
       </n-descriptions-item>
     </n-descriptions>
   </n-card>
+  <!-- tag -->
+  <n-modal v-model:show="showTagModal" title="设置tag" preset="card" draggable :style="{ width: '550px' }">
+    <n-form ref="formRef" inline :label-width="80" :model="tagFormValue">
+      <n-form-item label="标签key" path="user.name">
+        <n-input v-model:value="tagFormValue.name" placeholder="输入标签key" />
+      </n-form-item>
+      <n-form-item label="标签值" path="phone">
+        <n-input v-model:value="tagFormValue.value" placeholder="输入标签值" />
+      </n-form-item>
+      <n-form-item>
+        <n-button type="primary" @click="submitTagForm">确认</n-button>
+        <n-button class="mx-4" @click="showTagModal = false">取消</n-button>
+      </n-form-item>
+    </n-form>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from "vue"
+
+const router = useRouter()
+const { $s3Client } = useNuxtApp()
+const message = useMessage()
+const props = defineProps<{ bucket: string }>()
+
+const bucketName = computed(() => props.bucket as string)
+
+const { headBucket, getBucketTagging, putBucketTagging, deleteBucketTagging } = useBucket({})
+
+/********tag */
+// 定义标签的类型
+interface Tag {
+  Key: string
+  Value: string
+}
+const showTagModal = ref(false)
+
+const tagFormValue = ref({
+  name: "",
+  value: "",
+})
+// 获取标签
+const resp: any = await getBucketTagging(bucketName.value)
+const tags = ref<Tag[]>(resp.TagSet || [])
+
+const addTag = () => {
+  nowTagIndex.value = -1
+  tagFormValue.value = { name: "", value: "" } // 清空表单
+  showTagModal.value = true
+}
+
+const submitTagForm = () => {
+  if (!tagFormValue.value.name || !tagFormValue.value.value) {
+    message.error("请填写完整的标签信息")
+    return
+  }
 
-const router = useRouter();
-const { $s3Client } = useNuxtApp();
-const message = useMessage();
-const props = defineProps<{ bucket: string }>();
+  if (nowTagIndex.value === -1) {
+    tags.value.push({ Key: tagFormValue.value.name, Value: tagFormValue.value.value })
+  }
+  if (nowTagIndex.value !== -1) {
+    tags.value[nowTagIndex.value] = { Key: tagFormValue.value.name, Value: tagFormValue.value.value }
+  }
+  // 调用 putBucketTagging 接口
+  putBucketTagging(bucketName.value, { TagSet: tags.value })
+    .then(() => {
+      showTagModal.value = false // 关闭模态框
+      message.success("标签更新成功")
+    })
+    .catch((error) => {
+      message.error("标签更新失败: " + error.message)
+    })
+}
 
-const bucketName = computed(() => props.bucket as string);
+const nowTagIndex = ref(-1)
+// 编辑标签
+const editTag = (index: number) => {
+  nowTagIndex.value = index
+  const nowTag = tags.value[index]
+  tagFormValue.value = { name: nowTag.Key, value: nowTag.Value } // 填充表单
+  showTagModal.value = true // 打开模态框
+}
+const handledeleteTag = (index: number) => {
+  nowTagIndex.value = index
+  tags.value.splice(index, 1) // 从标签列表中删除
 
-const { headBucket } = useBucket({});
+  // 调用 putBucketTagging 接口
+  putBucketTagging(bucketName.value, { TagSet: tags.value })
+    .then(() => {
+      message.success("标签更新成功")
+    })
+    .catch((error) => {
+      message.error("删除标签失败: " + error.message)
+    })
+}
+/********tag */
 
 // 在服务端获取数据
 const {
   data: bucket,
   status,
   refresh,
-} = useAsyncData(`head-bucket&${bucketName.value}`, () => headBucket(bucketName.value));
+} = useAsyncData(`head-bucket&${bucketName.value}`, () => headBucket(bucketName.value))
 </script>

composables/useBucket.ts

@@ -1,31 +1,59 @@
 import {
   CreateBucketCommand,
   HeadBucketCommand,
-  ListBucketsCommand
-} from '@aws-sdk/client-s3';
+  ListBucketsCommand,
+  GetBucketTaggingCommand,
+  PutBucketTaggingCommand,
+  DeleteBucketTaggingCommand,
+} from "@aws-sdk/client-s3"
 
 export function useBucket({ region }: { region?: string }) {
-  const $client = useNuxtApp().$s3Client;
+  const $client = useNuxtApp().$s3Client
 
   const listBuckets = async () => {
-    return await $client.send(new ListBucketsCommand({}));
-  };
+    return await $client.send(new ListBucketsCommand({}))
+  }
 
   const createBucket = async (bucket: string) => {
     const params = {
       Bucket: bucket,
-    };
+    }
 
-    return await $client.send(new CreateBucketCommand(params));
-  };
+    return await $client.send(new CreateBucketCommand(params))
+  }
 
   const headBucket = async (bucket: string) => {
     const params = {
       Bucket: bucket,
-    };
+    }
+
+    return await $client.send(new HeadBucketCommand(params))
+  }
+
+  const getBucketTagging = async (bucket: string) => {
+    const params = {
+      Bucket: bucket,
+    }
+
+    return await $client.send(new GetBucketTaggingCommand(params))
+  }
+
+  const putBucketTagging = async (bucket: string, tagging: any) => {
+    const params = {
+      Bucket: bucket,
+      Tagging: tagging,
+    }
+
+    return await $client.send(new PutBucketTaggingCommand(params))
+  }
+
+  const deleteBucketTagging = async (bucket: string) => {
+    const params = {
+      Bucket: bucket,
+    }
 
-    return await $client.send(new HeadBucketCommand(params));
+    return await $client.send(new DeleteBucketTaggingCommand(params))
   }
 
-  return { listBuckets, createBucket, headBucket };
+  return { listBuckets, createBucket, headBucket, getBucketTagging, putBucketTagging, deleteBucketTagging }
 }