From bffc659f85f41844bf5a93681e443efde1555eaf Mon Sep 17 00:00:00 2001
From: overtrue <anzhengchao@gmail.com>
Date: Fri, 27 Dec 2024 20:16:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E5=AD=98=E5=82=A8?=
 =?UTF-8?q?=E6=A1=B6=20&=20=E5=88=A0=E9=99=A4=E5=AF=B9=E8=B1=A1=20&=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E5=A4=B9?=
 =?UTF-8?q?=E6=97=B6=E8=B7=AF=E5=BE=84=E6=8B=BC=E6=8E=A5=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                     |  1 +
 components/buckets/new-form.vue     | 55 +++++++++++++++++++++++++++++
 components/buckets/new-item.vue     |  7 ----
 components/object/list.vue          |  4 +--
 components/object/upload/picker.vue | 47 ++++++++++++++++--------
 components/object/view.vue          | 19 ++++++++++
 composables/useBucket.ts            | 21 ++++++++---
 config/navs.ts                      |  7 +---
 pages/browser/index.vue             | 17 ++++++---
 pages/buckets/index.vue             | 53 ---------------------------
 10 files changed, 139 insertions(+), 92 deletions(-)
 create mode 100644 components/buckets/new-form.vue
 delete mode 100644 components/buckets/new-item.vue
 delete mode 100644 pages/buckets/index.vue

diff --git a/components.d.ts b/components.d.ts
index 449b9a1..5b1d3db 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -41,6 +41,7 @@ declare module 'vue' {
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
+    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NProgress: typeof import('naive-ui')['NProgress']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
diff --git a/components/buckets/new-form.vue b/components/buckets/new-form.vue
new file mode 100644
index 0000000..2c7ec84
--- /dev/null
+++ b/components/buckets/new-form.vue
@@ -0,0 +1,55 @@
+<template>
+  <n-modal :show="show" @update:show="val => $emit('update:show', val)" size="huge">
+    <n-card class="max-w-screen-sm">
+      <template #header>
+        <div style="display:flex; justify-content: space-between; align-items:center;">
+          <span>新建存储桶</span>
+          <n-button size="small" ghost @click="closeModal">关闭</n-button>
+        </div>
+      </template>
+      <div class="flex flex-col gap-4">
+        <!-- <div class="flex items-center gap-4">
+          <div>新建存储桶</div>
+          <div class="text-cyan-600">{{ bucketName }}{{ prefix || '/' }}</div>
+        </div> -->
+
+        <!-- <n-alert title="" type="info">
+          若上传路径中存在同名文件，上传将覆盖原有文件。
+        </n-alert> -->
+
+        <div class="flex items-center gap-4">
+          <n-input :placeholder="`请输入名称`" v-model:value="objectKey" />
+        </div>
+
+        <div class="flex justify-center gap-4">
+          <n-button type="primary" :disabled="objectKey.trim().length < 1" @click="handlePutObject">创建</n-button>
+        </div>
+      </div>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps } from 'vue'
+const emit = defineEmits(['update:show'])
+
+const props = defineProps<{ show: boolean; }>()
+
+const closeModal = () => emit('update:show', false)
+
+const objectKey = ref('')
+
+const { createBucket } = useBucket({})
+
+const $message = useMessage()
+
+const handlePutObject = () => {
+  createBucket(objectKey.value).then(() => {
+    emit('update:show', false)
+    objectKey.value = ''
+    $message.success('创建成功')
+  }).catch((e) => {
+    $message.error(e.message)
+  })
+}
+</script>
diff --git a/components/buckets/new-item.vue b/components/buckets/new-item.vue
deleted file mode 100644
index 677f24b..0000000
--- a/components/buckets/new-item.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>
diff --git a/components/object/list.vue b/components/object/list.vue
index 24a323f..d7a1814 100644
--- a/components/object/list.vue
+++ b/components/object/list.vue
@@ -101,7 +101,7 @@ const columns = [
   {
     key: 'Key', title: '对象', render: (row: { Key: string, type: 'prefix' | 'object' }) => {
       const displayKey = prefix.value ? row.Key.substring(prefix.value.length) : row.Key
-      let label: string | VNode = displayKey || '根目录'
+      let label: string | VNode = displayKey || '/'
 
       if (row.type === 'prefix') {
         label = h('span', { class: 'inline-flex items-center gap-2' }, [icon('ri:folder-line'), label])
@@ -109,7 +109,7 @@ const columns = [
 
       const keyInUri = row.Key
 
-      return h(NuxtLink, { href: bucketPath(keyInUri) }, label)
+      return h(NuxtLink, { href: bucketPath(keyInUri), class: 'block text-cyan-400' }, label)
     }
   },
   { key: 'Size', title: '大小', render: (row: { Size: number }) => row.Size ? formatBytes(row.Size) : '' },
diff --git a/components/object/upload/picker.vue b/components/object/upload/picker.vue
index da2e94b..5b15bcd 100644
--- a/components/object/upload/picker.vue
+++ b/components/object/upload/picker.vue
@@ -65,16 +65,22 @@
 </template>
 
 <script setup lang="ts">
+import { prefix } from 'naive-ui/es/_utils/cssr'
 import { computed, defineEmits, defineProps, ref } from 'vue'
 import { useUploadTaskManagerStore } from '~/store/upload-tasks'
 
 const uploadTaskManagerStore = useUploadTaskManagerStore()
 
+interface FileItem {
+  file: File,
+  prefix: string
+}
+
 interface SelectedItem {
   type: 'file' | 'folder'
   name: string
   size: number
-  files?: File[]
+  files?: FileItem[]
 }
 
 const emit = defineEmits(['update:show'])
@@ -95,7 +101,9 @@ const handleFileSelect = (e: Event) => {
   const input = e.target as HTMLInputElement
   if (input.files) {
     // 更新展示列表
-    Array.from(input.files).forEach(f => selectedItems.value.push({ type: 'file', name: f.name, size: f.size, files: [f] }))
+    Array.from(input.files).forEach(f => selectedItems.value.push(
+      { type: 'file', name: f.name, size: f.size, files: [{ file: f, prefix: props.prefix }] }
+    ))
   }
 }
 
@@ -104,24 +112,29 @@ const handleFolderSelect = (e: Event) => {
 
   if (input.files) {
     const folderFiles = Array.from(input.files)
-
-    // 找到每一个文件的 top-level 文件夹
     const folderMap = new Map<string, File[]>()
+
     for (const file of folderFiles) {
-      const parts = file.webkitRelativePath.split('/')
-      const folderName = parts[0] || '未知文件夹'
+      // 保留完整目录路径（去掉最后的文件名）
+      const pathParts = file.webkitRelativePath.split('/')
+      pathParts.pop() // 移除文件名
+      const folderPath = pathParts.join('/') || '未知文件夹'
 
-      if (!folderMap.has(folderName)) {
-        folderMap.set(folderName, [])
+      if (!folderMap.has(folderPath)) {
+        folderMap.set(folderPath, [])
       }
-
-      folderMap.get(folderName)?.push(file)
+      folderMap.get(folderPath)?.push(file)
     }
 
-    // 只展示文件夹名称，实际上传依然包含 folderFiles
-    for (const [folderName, files] of folderMap.entries()) {
+    // 将每个完整路径和对应文件放到 selectedItems
+    for (const [folderPath, files] of folderMap.entries()) {
       const totalSize = files.reduce((acc, file) => acc + file.size, 0)
-      selectedItems.value.push({ type: 'folder', name: folderName, size: totalSize, files })
+      selectedItems.value.push({
+        type: 'folder',
+        name: folderPath,
+        size: totalSize,
+        files: files.map(file => ({ file, prefix: `${props.prefix}${folderPath}/` }))
+      })
     }
   }
 }
@@ -129,7 +142,9 @@ const handleFolderSelect = (e: Event) => {
 const handleDrop = (e: DragEvent) => {
   if (e.dataTransfer?.files) {
     const droppedFiles = Array.from(e.dataTransfer.files)
-    droppedFiles.forEach(file => selectedItems.value.push({ type: 'file', name: file.name, size: file.size, files: [file] }))
+    droppedFiles.forEach(file => selectedItems.value.push({
+      type: 'file', name: file.name, size: file.size, files: [{ file, prefix: props.prefix }]
+    }))
   }
 }
 
@@ -141,7 +156,9 @@ function removeItem(index: number) {
 }
 
 function handleUpload() {
-  uploadTaskManagerStore.addFiles(allFiles.value, props.bucketName, props.prefix)
+  allFiles.value.forEach(fileItem => {
+    uploadTaskManagerStore.addFiles([fileItem.file], props.bucketName, fileItem.prefix)
+  })
   selectedItems.value = []
   closeModal()
 }
diff --git a/components/object/view.vue b/components/object/view.vue
index 12a899d..d031c44 100644
--- a/components/object/view.vue
+++ b/components/object/view.vue
@@ -9,18 +9,32 @@
           <Icon name="ri:download-line" class="mr-2" />
           <span>下载</span>
         </n-button>
+
         <n-button @click="() => copySignedUrl()">
           <Icon name="ri:file-copy-line" class="mr-2" />
           <span>复制临时链接</span>
         </n-button>
+
         <n-button @click="() => showPreview = true">
           <Icon name="ri:eye-line" class="mr-2" />
           <span>预览</span>
         </n-button>
+
         <n-button>
           <Icon name="ri:price-tag-3-line" class="mr-2" />
           <span>标签</span>
         </n-button>
+
+        <n-popconfirm @positive-click="deleteObject">
+          <template #trigger>
+            <n-button ghost type="error">
+              <Icon name="ri:delete-bin-7-line" class="mr-2" />
+              <span>删除</span>
+            </n-button>
+          </template>
+          删除对象 <span class="select-all">{{ key }}</span> ?
+        </n-popconfirm>
+
         <n-button @click="() => refresh()">
           <Icon name="ri:refresh-line" class="mr-2" />
           <span>刷新</span>
@@ -82,6 +96,11 @@ const copySignedUrl = async () => {
   msg.destroy();
   message.success('链接已复制到剪贴板');
 }
+const deleteObject = async () => {
+  await objectApi.deleteObject(key.value);
+  message.success('删除成功');
+  router.back();
+}
 
 
 </script>
diff --git a/composables/useBucket.ts b/composables/useBucket.ts
index d31b5f3..348eed2 100644
--- a/composables/useBucket.ts
+++ b/composables/useBucket.ts
@@ -1,6 +1,19 @@
-import {} from '@aws-sdk/client-s3';
-import { getSignedUrl as _getSignedUrl } from '@aws-sdk/s3-request-presigner';
+import { CreateBucketCommand, ListBucketsCommand } from '@aws-sdk/client-s3';
 
-export function useBucket({ bucket, region }: { bucket: string; region?: string }) {
-  return {};
+export function useBucket({ region }: { region?: string }) {
+  const $client = useNuxtApp().$s3Client
+
+  const listBuckets = async () => {
+    return await $client.send(new ListBucketsCommand({}))
+  }
+
+  const createBucket = async (bucket: string) => {
+    const params = {
+      Bucket: bucket,
+    }
+
+    return await $client.send(new CreateBucketCommand(params))
+  }
+
+  return { listBuckets, createBucket };
 }
diff --git a/config/navs.ts b/config/navs.ts
index 2680477..1f24479 100644
--- a/config/navs.ts
+++ b/config/navs.ts
@@ -10,15 +10,10 @@ export default [
     icon: 'ri:file-user-line',
     children: [
       {
-        label: '对象浏览器',
+        label: '存储桶',
         to: '/browser',
         icon: 'ri:box-3-line',
       },
-      {
-        label: '存储桶',
-        to: '/buckets',
-        icon: 'ri:archive-drawer-line',
-      },
       {
         label: '访问密钥',
         to: '/access-keys',
diff --git a/pages/browser/index.vue b/pages/browser/index.vue
index cee727b..bbffbd8 100644
--- a/pages/browser/index.vue
+++ b/pages/browser/index.vue
@@ -2,10 +2,10 @@
   <div>
     <page-header>
       <template #title>
-        <h1 class="text-2xl font-bold">对象浏览器</h1>
+        <h1 class="text-2xl font-bold">桶</h1>
       </template>
       <template #actions>
-        <n-button>
+        <n-button @click="() => formVisible = true">
           <Icon name="ri:add-line" class="mr-2" />
           <span>创建桶</span>
         </n-button>
@@ -29,14 +29,16 @@
       </div>
       <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>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { NuxtLink } from "#components"
-import { ListBucketsCommand } from "@aws-sdk/client-s3"
 
-const { $s3Client } = useNuxtApp();
+const { listBuckets } = useBucket({})
+const formVisible = ref(false);
 
 const columns = [
   {
@@ -51,7 +53,12 @@ const columns = [
 ]
 
 const { data, refresh } = await useAsyncData('buckets', async () => {
-  const response = await $s3Client.send(new ListBucketsCommand({}));
+  const response = await listBuckets()
   return response.Buckets || [];
 }, { default: () => [] });
+
+const handleFormClosed = (show: boolean) => {
+  formVisible.value = show;
+  refresh();
+}
 </script>
diff --git a/pages/buckets/index.vue b/pages/buckets/index.vue
deleted file mode 100644
index fe08433..0000000
--- a/pages/buckets/index.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div>
-    <page-header>
-      <template #title>
-        <h1 class="text-2xl font-bold">存储桶</h1>
-      </template>
-      <template #actions>
-        <n-button @click="createBucket">
-          <Icon name="ri:add-line" class="mr-2" />
-          <span>创建桶</span>
-        </n-button>
-      </template>
-    </page-header>
-    <page-content class="flex flex-col gap-4">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center justify-between">
-          <n-input placeholder="搜索">
-            <template #prefix>
-              <Icon name="ri:search-2-line" />
-            </template>
-          </n-input>
-        </div>
-        <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>
-      <n-data-table
-        class="border dark:border-neutral-700 rounded overflow-hidden"
-        :columns="columns"
-        :data="data"
-        :pagination="false"
-        :bordered="false" />
-    </page-content>
-    <!--  新建桶弹窗 -->
-    <buckets-new-item @search="getDataList"></buckets-new-item>
-  </div>
-</template>
-
-<script setup>
-/****************************基本配置******************************/
-
-// 获取同列表
-const getDataList = () => {};
-/****************************创建桶******************************/
-const createBucket = () => {};
-
-/****************************创建桶******************************/
-</script>
-
-<style lang="scss" scoped></style>