From 341de966740b0e23a6cd122ef0c423b6a46253ae Mon Sep 17 00:00:00 2001
From: cxymds <cxymds@qq.com>
Date: Thu, 27 Mar 2025 16:55:22 +0800
Subject: [PATCH] feat : add some empty page

---
 components.d.ts                    |   1 +
 components/buckets/info-bak.vue    | 431 ++++++++++++++++++++++++++++
 components/buckets/info.vue        | 442 ++---------------------------
 components/buckets/replication.vue |   0
 components/events/new-form.vue     |   0
 components/json-editor.vue         |   7 +-
 components/object/list.vue         |   7 +-
 config/navs.ts                     |  20 +-
 pages/browser/index.vue            |  13 +-
 pages/events/index.vue             | 139 +++++++++
 pages/lifecycle/index.vue          | 136 +++++++++
 pages/replication/index.vue        | 139 +++++++++
 12 files changed, 893 insertions(+), 442 deletions(-)
 create mode 100644 components/buckets/info-bak.vue
 create mode 100644 components/buckets/replication.vue
 create mode 100644 components/events/new-form.vue
 create mode 100644 pages/events/index.vue
 create mode 100644 pages/lifecycle/index.vue
 create mode 100644 pages/replication/index.vue

diff --git a/components.d.ts b/components.d.ts
index 47ffc43..3959057 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -26,6 +26,7 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NFlex: typeof import('naive-ui')['NFlex']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
diff --git a/components/buckets/info-bak.vue b/components/buckets/info-bak.vue
new file mode 100644
index 0000000..62f25bf
--- /dev/null
+++ b/components/buckets/info-bak.vue
@@ -0,0 +1,431 @@
+<template>
+  <n-page-header @back="router.back()">
+    <template #title>桶信息详情</template>
+    <template #extra>
+      <div class="flex items-center gap-4 ml-auto">
+        <n-button @click="">
+          <Icon name="ri:calendar-event-line" class="mr-2" />
+          <span>事件</span>
+        </n-button>
+
+        <n-button @click="">
+          <Icon name="ri:file-copy-line" class="mr-2" />
+          <span>副本</span>
+        </n-button>
+
+        <n-button>
+          <Icon name="ri:exchange-2-line" class="mr-2" />
+          <span>生命周期</span>
+        </n-button>
+
+        <!-- <n-button>
+          <Icon name="ri:key-2-line" class="mr-2" />
+          <span>访问权限</span>
+        </n-button> -->
+
+        <n-button>
+          <Icon name=" ri:surgical-mask-line" class="mr-2" />
+          <span>匿名访问</span>
+        </n-button>
+
+        <n-popconfirm @positive-click="handleDelteBucket">
+          <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">{{}}</span>
+          ?
+        </n-popconfirm>
+
+        <n-button @click="() => refresh()">
+          <Icon name="ri:refresh-line" class="mr-2" />
+          <span>刷新</span>
+        </n-button>
+      </div>
+    </template>
+  </n-page-header>
+  <n-card title="桶摘要">
+    <div v-if="status === 'pending'" class="flex items-center justify-center">
+      <n-spin size="small" />
+    </div>
+    <n-descriptions :column="2">
+      <n-descriptions-item label="桶名称">
+        <span class="select-all">{{ bucketName }}</span>
+      </n-descriptions-item>
+      <!-- <n-descriptions-item class="font-bold">
+        <template #label>
+          当前状态
+          <n-button class="align-middle" quaternary round type="primary">
+            <Icon name="ri:edit-2-line" class="mr-2" />
+          </n-button>
+        </template>
+        {{ 111 }}
+      </n-descriptions-item> -->
+      <n-descriptions-item>
+        <template #label>
+          访问策略
+          <n-button class="align-middle" quaternary round type="primary" @click="editPolicy">
+            <Icon name="ri:edit-2-line" class="mr-2" />
+          </n-button>
+        </template>
+        {{ policyOptions.find(item => item.value === bucketPolicy)?.label }}
+      </n-descriptions-item>
+      <n-descriptions-item>
+        <template #label>
+          加密类型
+          <n-button class="align-middle" quaternary round type="primary" @click="editEncript">
+            <Icon name="ri:edit-2-line" class="mr-2" />
+          </n-button>
+        </template>
+        禁用
+      </n-descriptions-item>
+      <!-- <n-descriptions-item>
+        <template #label>
+          使用情况报告
+          <n-button class="align-middle" quaternary round type="primary">
+            <Icon name="ri:edit-2-line" class="mr-2" />
+          </n-button>
+        </template>
+        todo
+      </n-descriptions-item> -->
+      <n-descriptions-item>
+        <template #label>
+          副本
+          <n-button class="align-middle" quaternary round type="primary">
+            <Icon name="ri:edit-2-line" class="mr-2" />
+          </n-button>
+        </template>
+        关闭
+      </n-descriptions-item>
+      
+      <!-- <n-descriptions-item>
+        <template #label>
+          配额
+          <n-button class="align-middle" quaternary round type="primary">
+            <Icon name="ri:edit-2-line" />
+          </n-button>
+        </template>
+        todo
+      </n-descriptions-item> -->
+      <n-descriptions-item class="w-1/2">
+        <template #label>
+          标签
+          <n-button class="align-middle" round quaternary type="primary" @click="addTag">
+            <Icon name="ri:add-line" size="16" 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>
+          对象锁
+          <n-button quaternary round type="primary">
+            <Icon name="ri:edit-2-line" class="mr-2" />
+          </n-button>
+        </template>
+        关闭
+      </n-descriptions-item>
+
+      <n-descriptions-item>
+        <template #label>
+          版本控制
+          <!-- <n-button quaternary round type="primary">
+            <Icon name="ri:edit-2-line" class="mr-2" />
+          </n-button> -->
+        </template>
+        <n-switch
+          v-model:value="versioningStatus"
+          checked-value="Enabled"
+          unchecked-value="Suspended"
+          :loading="statusLoading"
+          @update:value="handleChangeVersionStatus" />
+      </n-descriptions-item>
+    </n-descriptions>
+  </n-card>
+
+  <!-- policy -->
+<n-modal v-model:show="showPolicyModal" title="设置策略" preset="card" draggable :style="{ width: '750px' }">
+    <n-form ref="policyFormRef" :inline="policyFormValue.policy !=='custom'"  :label-width="80" :model="policyFormValue">
+       <n-form-item label="策略" path="" class="flex-auto">
+        <n-select v-model:value="policyFormValue.policy" placeholder="请选择策略" :options="policyOptions" />
+      </n-form-item>
+      <n-form-item :span="24" v-if="policyFormValue.policy =='custom'" label="策略原文" path="content">
+        <json-editor v-model="policyFormValue.content" class="max-h-[60vh] overflow-y-auto" />
+      </n-form-item>
+      <n-form-item>
+        <n-button type="primary" @click="submitTagForm">确认</n-button>
+        <n-button class="mx-4" @click="showPolicyModal = false">取消</n-button>
+      </n-form-item>
+    </n-form>
+  </n-modal>
+
+  <!-- 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="name">
+        <n-input v-model:value="tagFormValue.name" placeholder="输入标签key" />
+      </n-form-item>
+      <n-form-item label="标签值" path="value">
+        <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>
+
+  <!-- Encrypt -->
+  <n-modal v-model:show="showEncryptModal" title="启用存储空间加密" preset="card" draggable :style="{ width: '550px' }">
+    <n-form ref="encryptFormRef" label-placemen="left" label-width="auto" inline :model="encryptFormValue">
+      <n-form-item label="加密类型" path="encrypt" class="flex-auto">
+        <n-select v-model:value="encryptFormValue.encrypt" placeholder="请选择加密类型" :options="encryptOptions" />
+      </n-form-item>
+      <n-form-item v-if="encryptFormValue.encrypt == 'SSE-KMS'" label="KMS Key ID" path="kmsKeyId" class="flex-auto">
+        <n-select v-model:value="encryptFormValue.kmsKeyId" placeholder="" :options="[]" />
+      </n-form-item>
+
+      <n-form-item>
+        <n-button type="primary" @click="submitEncryptForm">确认</n-button>
+        <n-button class="mx-4" @click="showEncryptModal = false">取消</n-button>
+      </n-form-item>
+    </n-form>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+
+const router = useRouter()
+const message = useMessage()
+const props = defineProps<{ bucket: string }>()
+
+const bucketName = computed(() => props.bucket as string)
+
+const { headBucket, getBucketTagging, deleteBucket, putBucketTagging, putBucketVersioning, getBucketVersioning , getBucketPolicy,
+    putBucketPolicy,} = useBucket({})
+
+/******** policy ***********************/
+import {setPolicy,getPolicy,getPolicies} from '~/utils/bucketPolicy'
+
+const policys = setPolicy([],'readonly',bucketName.value,'')
+console.log("🚀 ~ policys:", policys)
+const  po = getPolicy(policys,bucketName.value,'')
+console.log(111,po)
+
+const bucketPolicy = ref("private")
+const getbucketPolicy = async () => {
+  try {
+    const res = await getBucketPolicy( bucketName.value )
+    console.log("🚀 ~ getbucketPolicy ~ res:", res)
+    // bucketPolicy.value = res.Policy
+  } catch (error) {
+    // console.error("Error fetching bucket policy:", error)
+  }
+}
+getbucketPolicy()
+
+const policyFormValue = ref({
+  policy: "private",
+  content:'{}'
+})
+const showPolicyModal = ref(false)
+const editPolicy = () => {
+  showPolicyModal.value = true
+}
+const policyOptions = [
+  {
+    label: "公有",
+    value: "public",
+  },
+  {
+    label: "私有",
+    value: "private",
+  },
+  {
+    label: "自定义",
+    value: "custom",
+  },
+]
+
+
+/******** policy ***********************/
+
+
+
+/********Encrypt ***********************/
+const showEncryptModal = ref(false)
+const encryptFormValue = ref({
+  encrypt: "disabled",
+  kmsKeyId: "",
+})
+
+const encryptOptions = [
+  {
+    label: "禁用",
+    value: "disabled",
+  },
+  {
+    label: "SSE-KMS",
+    value: "SSE-KMS",
+  },
+  {
+    label: "SSE-S3",
+    value: "SSE-S3",
+  },
+]
+
+const editEncript = () => {
+  showEncryptModal.value = true
+}
+const submitEncryptForm = () => {
+  // 处理表单提交逻辑
+  // console.log("提交表单数据:", encryptFormValue.value)
+  // showEncryptModal.value = false
+  if (encryptFormValue.value.encrypt == "SSE-KMS") {
+    message.error("您提供的 XML 格式不正确，或者未根据我们发布的架构进行验证。 (MasterKeyID 未找到 aws:kms)。")
+  } else if (encryptFormValue.value.encrypt == "SSE-S3") {
+    message.error("指定了服务器端加密，但S3未配置。")
+  } else {
+    message.success("修改成功")
+    showEncryptModal.value = false
+  }
+}
+
+/********Encrypt ***********************/
+
+/********versioning ***********************/
+const versioningStatus: any = ref("")
+const versionStatus = ref("Suspended")
+const statusLoading = ref(false)
+// 获取版本控制状态
+const getVersioningStatus = async () => {
+  try {
+    const resp = await getBucketVersioning(bucketName.value)
+    versioningStatus.value = resp.Status
+  } catch (error) {
+    console.error("获取版本控制状态失败:", error)
+  }
+}
+getVersioningStatus()
+
+const handleChangeVersionStatus = async (value: string) => {
+  statusLoading.value = true
+  putBucketVersioning(bucketName.value, value)
+    .then(() => {
+      message.success("修改成功")
+      getVersioningStatus()
+    })
+    .finally(() => {
+      statusLoading.value = false
+      versioningStatus.value = versioningStatus.value == "Suspended" ? "Enabled" : "Suspended"
+    })
+}
+
+/********versioning ***********************/
+
+/********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
+  }
+
+  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 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 dialog = useDialog()
+const handledeleteTag = (index: number) => {
+   dialog.error({
+    title: "警告",
+    content: "你确定要删除这个标签吗？",
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: async () => {
+      nowTagIndex.value = index
+      tags.value.splice(index, 1) // 从标签列表中删除
+
+      // 调用 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))
+
+const  handleDelteBucket = ()=>{
+  deleteBucket(bucketName.value).then(()=>{
+    message.success("删除成功")
+    router.push("/browser")
+  }).catch((error)=>{
+    message.error("删除失败")
+  })
+}
+</script>
diff --git a/components/buckets/info.vue b/components/buckets/info.vue
index a998b42..53c26a1 100644
--- a/components/buckets/info.vue
+++ b/components/buckets/info.vue
@@ -1,432 +1,22 @@
 <template>
-  <n-page-header @back="router.back()">
-    <template #title>桶信息详情</template>
-    <template #extra>
-      <div class="flex items-center gap-4 ml-auto">
-        <n-button @click="">
-          <Icon name="ri:calendar-event-line" class="mr-2" />
-          <span>事件</span>
-        </n-button>
-
-        <n-button @click="">
-          <Icon name="ri:file-copy-line" class="mr-2" />
-          <span>副本</span>
-        </n-button>
-
-        <n-button>
-          <Icon name="ri:exchange-2-line" class="mr-2" />
-          <span>生命周期</span>
-        </n-button>
-
-        <!-- <n-button>
-          <Icon name="ri:key-2-line" class="mr-2" />
-          <span>访问权限</span>
-        </n-button> -->
-
-        <n-button>
-          <Icon name=" ri:surgical-mask-line" class="mr-2" />
-          <span>匿名访问</span>
-        </n-button>
-
-        <n-popconfirm @positive-click="handleDelteBucket">
-          <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">{{}}</span>
-          ?
-        </n-popconfirm>
-
-        <n-button @click="() => refresh()">
-          <Icon name="ri:refresh-line" class="mr-2" />
-          <span>刷新</span>
-        </n-button>
-      </div>
-    </template>
-  </n-page-header>
-  <n-card title="桶摘要">
-    <div v-if="status === 'pending'" class="flex items-center justify-center">
-      <n-spin size="small" />
-    </div>
-    <n-descriptions :column="2">
-      <n-descriptions-item label="桶名称">
-        <span class="select-all">{{ bucketName }}</span>
-      </n-descriptions-item>
-      <!-- <n-descriptions-item class="font-bold">
-        <template #label>
-          当前状态
-          <n-button class="align-middle" quaternary round type="primary">
-            <Icon name="ri:edit-2-line" class="mr-2" />
-          </n-button>
-        </template>
-        {{ 111 }}
-      </n-descriptions-item> -->
-      <n-descriptions-item>
-        <template #label>
-          访问策略
-          <n-button class="align-middle" quaternary round type="primary" @click="editPolicy">
-            <Icon name="ri:edit-2-line" class="mr-2" />
-          </n-button>
-        </template>
-        {{ policyOptions.find(item => item.value === bucketPolicy)?.label }}
-      </n-descriptions-item>
-      <n-descriptions-item>
-        <template #label>
-          加密类型
-          <n-button class="align-middle" quaternary round type="primary" @click="editEncript">
-            <Icon name="ri:edit-2-line" class="mr-2" />
-          </n-button>
-        </template>
-        禁用
-      </n-descriptions-item>
-      <!-- <n-descriptions-item>
-        <template #label>
-          使用情况报告
-          <n-button class="align-middle" quaternary round type="primary">
-            <Icon name="ri:edit-2-line" class="mr-2" />
-          </n-button>
-        </template>
-        todo
-      </n-descriptions-item> -->
-      <n-descriptions-item>
-        <template #label>
-          副本
-          <n-button class="align-middle" quaternary round type="primary">
-            <Icon name="ri:edit-2-line" class="mr-2" />
-          </n-button>
-        </template>
-        关闭
-      </n-descriptions-item>
-      
-      <!-- <n-descriptions-item>
-        <template #label>
-          配额
-          <n-button class="align-middle" quaternary round type="primary">
-            <Icon name="ri:edit-2-line" />
-          </n-button>
-        </template>
-        todo
-      </n-descriptions-item> -->
-      <n-descriptions-item class="w-1/2">
-        <template #label>
-          标签
-          <n-button class="align-middle" round quaternary type="primary" @click="addTag">
-            <Icon name="ri:add-line" size="16" 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>
-          对象锁
-          <n-button quaternary round type="primary">
-            <Icon name="ri:edit-2-line" class="mr-2" />
-          </n-button>
-        </template>
-        关闭
-      </n-descriptions-item>
-
-      <n-descriptions-item>
-        <template #label>
-          版本控制
-          <!-- <n-button quaternary round type="primary">
-            <Icon name="ri:edit-2-line" class="mr-2" />
-          </n-button> -->
-        </template>
-        <n-switch
-          v-model:value="versioningStatus"
-          checked-value="Enabled"
-          unchecked-value="Suspended"
-          :loading="statusLoading"
-          @update:value="handleChangeVersionStatus" />
-      </n-descriptions-item>
-    </n-descriptions>
-  </n-card>
-
-  <!-- policy -->
-<n-modal v-model:show="showPolicyModal" title="设置策略" preset="card" draggable :style="{ width: '750px' }">
-    <n-form ref="policyFormRef" :inline="policyFormValue.policy !=='custom'"  :label-width="80" :model="policyFormValue">
-       <n-form-item label="策略" path="" class="flex-auto">
-        <n-select v-model:value="policyFormValue.policy" placeholder="请选择策略" :options="policyOptions" />
-      </n-form-item>
-      <n-form-item :span="24" v-if="policyFormValue.policy =='custom'" label="策略原文" path="content">
-        <json-editor v-model="policyFormValue.content" class="max-h-[60vh] overflow-y-auto" />
-      </n-form-item>
-      <n-form-item>
-        <n-button type="primary" @click="submitTagForm">确认</n-button>
-        <n-button class="mx-4" @click="showPolicyModal = false">取消</n-button>
-      </n-form-item>
-    </n-form>
-  </n-modal>
-
-  <!-- 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="name">
-        <n-input v-model:value="tagFormValue.name" placeholder="输入标签key" />
-      </n-form-item>
-      <n-form-item label="标签值" path="value">
-        <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>
-
-  <!-- Encrypt -->
-  <n-modal v-model:show="showEncryptModal" title="启用存储空间加密" preset="card" draggable :style="{ width: '550px' }">
-    <n-form ref="encryptFormRef" label-placemen="left" label-width="auto" inline :model="encryptFormValue">
-      <n-form-item label="加密类型" path="encrypt" class="flex-auto">
-        <n-select v-model:value="encryptFormValue.encrypt" placeholder="请选择加密类型" :options="encryptOptions" />
-      </n-form-item>
-      <n-form-item v-if="encryptFormValue.encrypt == 'SSE-KMS'" label="KMS Key ID" path="kmsKeyId" class="flex-auto">
-        <n-select v-model:value="encryptFormValue.kmsKeyId" placeholder="" :options="[]" />
-      </n-form-item>
-
-      <n-form-item>
-        <n-button type="primary" @click="submitEncryptForm">确认</n-button>
-        <n-button class="mx-4" @click="showEncryptModal = false">取消</n-button>
-      </n-form-item>
-    </n-form>
-  </n-modal>
+ <n-drawer v-model:show="show" :width="502">
+    <n-drawer-content :title="`桶配置(${bucketName})`" closable>
+      《斯通纳》是美国作家约翰·威廉姆斯在 1965 年出版的小说。
+    </n-drawer-content>
+  </n-drawer>
 </template>
 
-<script setup lang="ts">
-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, deleteBucket, putBucketTagging, putBucketVersioning, getBucketVersioning , getBucketPolicy,
-    putBucketPolicy,} = useBucket({})
-
-/******** policy ***********************/
-import {setPolicy,getPolicy,getPolicies} from '~/utils/bucketPolicy'
-
-const policys = setPolicy([],'readonly',bucketName.value,'')
-console.log("🚀 ~ policys:", policys)
-const  po = getPolicy(policys,bucketName.value,'')
-console.log(111,po)
-
-const bucketPolicy = ref("private")
-const getbucketPolicy = async () => {
-  try {
-    const res = await getBucketPolicy( bucketName.value )
-    console.log("🚀 ~ getbucketPolicy ~ res:", res)
-    // bucketPolicy.value = res.Policy
-  } catch (error) {
-    // console.error("Error fetching bucket policy:", error)
+<script setup>
+  const  show = ref(false)
+  const bucketName = ref('')
+  const openDrawer = (bucket) => {
+    show.value = true
+    bucketName.value = bucket
   }
-}
-getbucketPolicy()
-
-const policyFormValue = ref({
-  policy: "private",
-  content:'{}'
-})
-const showPolicyModal = ref(false)
-const editPolicy = () => {
-  showPolicyModal.value = true
-}
-const policyOptions = [
-  {
-    label: "公有",
-    value: "public",
-  },
-  {
-    label: "私有",
-    value: "private",
-  },
-  {
-    label: "自定义",
-    value: "custom",
-  },
-]
-
-
-/******** policy ***********************/
-
-
-
-/********Encrypt ***********************/
-const showEncryptModal = ref(false)
-const encryptFormValue = ref({
-  encrypt: "disabled",
-  kmsKeyId: "",
-})
-
-const encryptOptions = [
-  {
-    label: "禁用",
-    value: "disabled",
-  },
-  {
-    label: "SSE-KMS",
-    value: "SSE-KMS",
-  },
-  {
-    label: "SSE-S3",
-    value: "SSE-S3",
-  },
-]
-
-const editEncript = () => {
-  showEncryptModal.value = true
-}
-const submitEncryptForm = () => {
-  // 处理表单提交逻辑
-  // console.log("提交表单数据:", encryptFormValue.value)
-  // showEncryptModal.value = false
-  if (encryptFormValue.value.encrypt == "SSE-KMS") {
-    message.error("您提供的 XML 格式不正确，或者未根据我们发布的架构进行验证。 (MasterKeyID 未找到 aws:kms)。")
-  } else if (encryptFormValue.value.encrypt == "SSE-S3") {
-    message.error("指定了服务器端加密，但S3未配置。")
-  } else {
-    message.success("修改成功")
-    showEncryptModal.value = false
-  }
-}
-
-/********Encrypt ***********************/
-
-/********versioning ***********************/
-const versioningStatus: any = ref("")
-const versionStatus = ref("Suspended")
-const statusLoading = ref(false)
-// 获取版本控制状态
-const getVersioningStatus = async () => {
-  try {
-    const resp = await getBucketVersioning(bucketName.value)
-    versioningStatus.value = resp.Status
-  } catch (error) {
-    console.error("获取版本控制状态失败:", error)
-  }
-}
-getVersioningStatus()
-
-const handleChangeVersionStatus = async (value: string) => {
-  statusLoading.value = true
-  putBucketVersioning(bucketName.value, value)
-    .then(() => {
-      message.success("修改成功")
-      getVersioningStatus()
-    })
-    .finally(() => {
-      statusLoading.value = false
-      versioningStatus.value = versioningStatus.value == "Suspended" ? "Enabled" : "Suspended"
-    })
-}
-
-/********versioning ***********************/
-
-/********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
-  }
-
-  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 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 dialog = useDialog()
-const handledeleteTag = (index: number) => {
-   dialog.error({
-    title: "警告",
-    content: "你确定要删除这个标签吗？",
-    positiveText: "确定",
-    negativeText: "取消",
-    onPositiveClick: async () => {
-      nowTagIndex.value = index
-      tags.value.splice(index, 1) // 从标签列表中删除
-
-      // 调用 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))
-
-const  handleDelteBucket = ()=>{
-  deleteBucket(bucketName.value).then(()=>{
-    message.success("删除成功")
-    router.push("/browser")
-  }).catch((error)=>{
-    message.error("删除失败")
+  defineExpose({
+    openDrawer
   })
-}
 </script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/components/buckets/replication.vue b/components/buckets/replication.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/events/new-form.vue b/components/events/new-form.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/json-editor.vue b/components/json-editor.vue
index e19fa44..80e9d95 100644
--- a/components/json-editor.vue
+++ b/components/json-editor.vue
@@ -6,12 +6,13 @@ import "vanilla-jsoneditor/themes/jse-theme-dark.css"
 // const validator = createAjvValidator({ schema, schemaDefinitions })
 const attrs = useAttrs()
 const model = defineModel()
-const value = ref(model.value)
+// const value = ref(model.value)
 // 监听model变化
 watch(
   model,
   (newValue) => {
-    value.value = JSON.stringify(JSON.parse(newValue), null, 2)
+    model.value = JSON.stringify(JSON.parse(newValue), null, 2)
+    // value.value = JSON.stringify(JSON.parse(newValue), null, 2)
   },
   {
     deep: true,
@@ -26,7 +27,7 @@ watch(
     <JsonEditorVue
       v-bind="attrs"
       mode="text"
-      v-model="value"
+      v-model="model"
       :mainMenuBar="false"
       selection="TextSelection"
       class="editor w-full jse-theme-dark" />
diff --git a/components/object/list.vue b/components/object/list.vue
index 0b79964..d1b09d7 100644
--- a/components/object/list.vue
+++ b/components/object/list.vue
@@ -158,7 +158,12 @@ const columns: DataTableColumns<RowData> = [
 
       const keyInUri = row.Key;
 
-      return h(NuxtLink, { href: bucketPath(keyInUri), class: "block text-cyan-400" }, () => label);
+      return h(NuxtLink, {  href: 'javascript:;' , class: "block text-cyan-400" ,onClick:(e:MouseEvent)=>{
+        // 阻止跳转
+        
+        e.preventDefault();
+        alert(1)
+      }}, () => label);
     },
   },
   { key: "Size", title: "大小", render: (row: { Size: number }) => (row.Size ? formatBytes(row.Size) : "") },
diff --git a/config/navs.ts b/config/navs.ts
index f5e3f41..1df930b 100644
--- a/config/navs.ts
+++ b/config/navs.ts
@@ -20,11 +20,21 @@ export default [
     to: '/users',
     icon: 'ri:file-user-line'
   },
-  // {
-  //   label: '事件',
-  //   to: '/events',
-  //   icon: 'ri:broadcast-line',
-  // },
+  {
+    label: '事件',
+    to: '/events',
+    icon: 'ri:broadcast-line',
+  },
+  {
+    label: '副本',
+    to: '/replication',
+    icon: 'ri:file-copy-line',
+  },
+  {
+    label: '生命周期',
+    to: '/lifecycle',
+    icon: 'ri:exchange-2-line',
+  },
   // {
   //   label: '配置',
   //   to: '/configuration',
diff --git a/pages/browser/index.vue b/pages/browser/index.vue
index 7ffa476..7fa2c68 100644
--- a/pages/browser/index.vue
+++ b/pages/browser/index.vue
@@ -30,6 +30,7 @@
     </page-content>
 
     <buckets-new-form :show="formVisible" @update:show="handleFormClosed"></buckets-new-form>
+    <buckets-info ref="infoRef"></buckets-info>
   </div>
 </template>
 
@@ -37,7 +38,6 @@
 import { Icon, NuxtLink } from '#components'
 import dayjs from 'dayjs'
 import { NButton, NSpace, type DataTableColumns } from 'naive-ui'
-import { useRouter } from 'vue-router'
 
 const { listBuckets } = useBucket({});
 const formVisible = ref(false);
@@ -92,7 +92,7 @@ const columns: DataTableColumns<RowData> = [
               {
                 size: 'small',
                 secondary: true,
-                onClick: () => handleRowClick(row),
+                onClick: (e) => handleRowClick(row,e),
               },
               {
                 default: () => '',
@@ -126,11 +126,10 @@ const filteredData = computed(() => {
   );
 });
 
-const router = useRouter();
-const handleRowClick = (row: RowData) => {
-  router.push({
-    path: `/buckets/${encodeURIComponent(row.Name)}`,
-  });
+const infoRef = ref();
+const handleRowClick = (row: RowData,e: Event) => {
+  e.stopPropagation();
+  infoRef.value.openDrawer(row.Name);
 };
 const handleFormClosed = (show: boolean) => {
   formVisible.value = show;
diff --git a/pages/events/index.vue b/pages/events/index.vue
new file mode 100644
index 0000000..27f4b54
--- /dev/null
+++ b/pages/events/index.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <page-header>
+      <template #title>
+        <h1 class="text-2xl font-bold">事件</h1>
+      </template>
+    </page-header>
+    <page-content class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div style="width:300px">
+          <n-form-item label="存储桶：" path="" class="flex-auto" label-placement="left">
+            <n-select v-model:value="bucketName" placeholder="请选择桶" :options="bucketList" />
+          </n-form-item>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <n-button @click="() => (formVisible = true)">
+            <Icon name="ri:add-line" class="mr-2" />
+            <span>添加订阅事件</span>
+          </n-button>
+          <n-button @click="">
+            <Icon name="ri:refresh-line" class="mr-2" />
+            <span>刷新</span>
+          </n-button>
+        </div>
+      </div>
+      
+      <n-card class="flex flex-center" style="height:400px">
+        <n-empty description="空空如也" ></n-empty>
+      </n-card>
+      <!-- <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="pageData" :pagination="false" :bordered="false" /> -->
+    </page-content>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '#components'
+import { NButton, NSpace, type DataTableColumns } from 'naive-ui'
+
+const { listBuckets } = useBucket({});
+const formVisible = ref(false);
+const searchTerm = ref('');
+
+interface RowData {
+  Name: string;
+  CreationDate: string;
+}
+
+const columns: DataTableColumns<RowData> = [
+  {
+    title: '类型',
+    key: '',
+   
+  },
+  {
+    title: '版本',
+    key: '',
+  },
+   {
+    title: '到期删除标记',
+    key: '',
+  },
+   {
+    title: '分层',
+    key: '',
+  },
+   {
+    title: '前缀',
+    key: '',
+  },
+   {
+    title: '时间',
+    key: '',
+  },
+   {
+    title: '状态',
+    key: '',
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    align: 'center',
+    width: 100,
+    render: (row: RowData) => {
+      return h(
+        NSpace,
+        {
+          justify: 'center',
+        },
+        {
+          default: () => [
+            h(
+              NButton,
+              {
+                size: 'small',
+                secondary: true,
+                onClick: (e) => handleRowDelete(row,e),
+              },
+              {
+                default: () => '',
+                icon: () => h(Icon, { name: 'ri:delete-bin-7-line' }),
+              }
+            ),
+          ],
+        }
+      );
+    },
+  },
+];
+
+// 获取桶列表
+const { data } = await useAsyncData(
+  'buckets',
+  async () => {
+    const response = await listBuckets();
+    return response.Buckets || [];
+  },
+  { default: () => [] }
+);
+
+const bucketList = computed(() => {
+  return data.value.map((bucket) => ({
+    label: bucket.Name,
+    value: bucket.Name,
+  }));
+});
+
+const bucketName = ref<string>(
+  bucketList.value.length > 0 ? bucketList.value[0]?.value ?? '' : ''
+);
+
+const pageData = ref([])
+
+const handleRowDelete = (row: RowData, e: Event) => {
+  e.stopPropagation();
+  console.log(row);
+};
+</script>
diff --git a/pages/lifecycle/index.vue b/pages/lifecycle/index.vue
new file mode 100644
index 0000000..b85bdbf
--- /dev/null
+++ b/pages/lifecycle/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <page-header>
+      <template #title>
+        <h1 class="text-2xl font-bold">生命周期</h1>
+      </template>
+    </page-header>
+    <page-content class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div style="width:300px">
+          <n-form-item label="存储桶：" path="" class="flex-auto" label-placement="left">
+            <n-select v-model:value="bucketName" placeholder="请选择桶" :options="bucketList" />
+          </n-form-item>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <n-button @click="() => (formVisible = true)">
+            <Icon name="ri:add-line" class="mr-2" />
+            <span>添加生命周期规则</span>
+          </n-button>
+          <n-button @click="">
+            <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="pageData" :pagination="false" :bordered="false" />
+    </page-content>
+
+    <buckets-info ref="infoRef"></buckets-info>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '#components'
+import { NButton, NSpace, type DataTableColumns } from 'naive-ui'
+
+const { listBuckets } = useBucket({});
+const formVisible = ref(false);
+const searchTerm = ref('');
+
+interface RowData {
+  Name: string;
+  CreationDate: string;
+}
+
+const columns: DataTableColumns<RowData> = [
+  {
+    title: '类型',
+    key: '',
+   
+  },
+  {
+    title: '版本',
+    key: '',
+  },
+   {
+    title: '到期删除标记',
+    key: '',
+  },
+   {
+    title: '分层',
+    key: '',
+  },
+   {
+    title: '前缀',
+    key: '',
+  },
+   {
+    title: '时间',
+    key: '',
+  },
+   {
+    title: '状态',
+    key: '',
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    align: 'center',
+    width: 100,
+    render: (row: RowData) => {
+      return h(
+        NSpace,
+        {
+          justify: 'center',
+        },
+        {
+          default: () => [
+            h(
+              NButton,
+              {
+                size: 'small',
+                secondary: true,
+                onClick: (e) => handleRowDelete(row,e),
+              },
+              {
+                default: () => '',
+                icon: () => h(Icon, { name: 'ri:delete-bin-7-line' }),
+              }
+            ),
+          ],
+        }
+      );
+    },
+  },
+];
+
+// 获取桶列表
+const { data } = await useAsyncData(
+  'buckets',
+  async () => {
+    const response = await listBuckets();
+    return response.Buckets || [];
+  },
+  { default: () => [] }
+);
+
+const bucketList = computed(() => {
+  return data.value.map((bucket) => ({
+    label: bucket.Name,
+    value: bucket.Name,
+  }));
+});
+
+const bucketName = ref<string>(
+  bucketList.value.length > 0 ? bucketList.value[0]?.value ?? '' : ''
+);
+
+const pageData = ref([])
+
+const handleRowDelete = (row: RowData, e: Event) => {
+  e.stopPropagation();
+  console.log(row);
+};
+</script>
diff --git a/pages/replication/index.vue b/pages/replication/index.vue
new file mode 100644
index 0000000..a42cef3
--- /dev/null
+++ b/pages/replication/index.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <page-header>
+      <template #title>
+        <h1 class="text-2xl font-bold">桶复制</h1>
+      </template>
+    </page-header>
+    <page-content class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div style="width:300px">
+          <n-form-item label="存储桶：" path="" class="flex-auto" label-placement="left">
+            <n-select v-model:value="bucketName" placeholder="请选择桶" :options="bucketList" />
+          </n-form-item>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <n-button @click="() => (formVisible = true)">
+            <Icon name="ri:add-line" class="mr-2" />
+            <span>添加副本规则</span>
+          </n-button>
+          <n-button @click="">
+            <Icon name="ri:refresh-line" class="mr-2" />
+            <span>刷新</span>
+          </n-button>
+        </div>
+      </div>
+      
+      <n-card class="flex flex-center" style="height:400px">
+        <n-empty description="空空如也" ></n-empty>
+      </n-card>
+      <!-- <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="pageData" :pagination="false" :bordered="false" /> -->
+    </page-content>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '#components'
+import { NButton, NSpace, type DataTableColumns } from 'naive-ui'
+
+const { listBuckets } = useBucket({});
+const formVisible = ref(false);
+const searchTerm = ref('');
+
+interface RowData {
+  Name: string;
+  CreationDate: string;
+}
+
+const columns: DataTableColumns<RowData> = [
+  {
+    title: '类型',
+    key: '',
+   
+  },
+  {
+    title: '版本',
+    key: '',
+  },
+   {
+    title: '到期删除标记',
+    key: '',
+  },
+   {
+    title: '分层',
+    key: '',
+  },
+   {
+    title: '前缀',
+    key: '',
+  },
+   {
+    title: '时间',
+    key: '',
+  },
+   {
+    title: '状态',
+    key: '',
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    align: 'center',
+    width: 100,
+    render: (row: RowData) => {
+      return h(
+        NSpace,
+        {
+          justify: 'center',
+        },
+        {
+          default: () => [
+            h(
+              NButton,
+              {
+                size: 'small',
+                secondary: true,
+                onClick: (e) => handleRowDelete(row,e),
+              },
+              {
+                default: () => '',
+                icon: () => h(Icon, { name: 'ri:delete-bin-7-line' }),
+              }
+            ),
+          ],
+        }
+      );
+    },
+  },
+];
+
+// 获取桶列表
+const { data } = await useAsyncData(
+  'buckets',
+  async () => {
+    const response = await listBuckets();
+    return response.Buckets || [];
+  },
+  { default: () => [] }
+);
+
+const bucketList = computed(() => {
+  return data.value.map((bucket) => ({
+    label: bucket.Name,
+    value: bucket.Name,
+  }));
+});
+
+const bucketName = ref<string>(
+  bucketList.value.length > 0 ? bucketList.value[0]?.value ?? '' : ''
+);
+
+const pageData = ref([])
+
+const handleRowDelete = (row: RowData, e: Event) => {
+  e.stopPropagation();
+  console.log(row);
+};
+</script>