From 34bfed7b0edfbd0974d2caf4baa1cd55a69b92f1 Mon Sep 17 00:00:00 2001
From: cxymds <cxymds@qq.com>
Date: Tue, 1 Apr 2025 16:04:09 +0800
Subject: [PATCH] feat : bucket replication

---
 components/lifecycle/new-form.vue   |   2 +-
 components/replication/new-form.vue | 173 ++++++++++++++++++++++++++++
 package.json                        |   2 +-
 pages/replication/index.vue         |   8 +-
 4 files changed, 182 insertions(+), 3 deletions(-)
 create mode 100644 components/replication/new-form.vue

diff --git a/components/lifecycle/new-form.vue b/components/lifecycle/new-form.vue
index 67abb4c..5241c8d 100644
--- a/components/lifecycle/new-form.vue
+++ b/components/lifecycle/new-form.vue
@@ -66,7 +66,7 @@
      
 
     <!-- 高级设置 -->
-    <n-card class="mt-4">
+    <n-card class="my-4">
       <n-collapse >
         <n-collapse-item title="高级设置" name="advanced">
           <n-form-item label="删除标记处理">
diff --git a/components/replication/new-form.vue b/components/replication/new-form.vue
new file mode 100644
index 0000000..ead7335
--- /dev/null
+++ b/components/replication/new-form.vue
@@ -0,0 +1,173 @@
+<template>
+   <n-modal
+    v-model:show="visible"
+    :mask-closable="false"
+    preset="card"
+    title="添加桶复制规则"
+    class="max-w-screen-md"
+    :segmented="{
+      content: true,
+      action: true,
+    }">
+    <n-card>
+  <n-form label-placement="left" :label-width='100' ref="formRef" :model="formData">
+    <n-form-item label="优先级" path="type">
+       <n-input v-model="formData.level"/>
+    </n-form-item>
+    <n-form-item label="目标地址" path="type">
+       <n-input v-model="formData.endpoint"/>
+    </n-form-item>
+    <n-form-item label="使用TLS" path="tls">
+      <n-switch
+        v-model:value="formData.tls"
+        :round="false"
+      />
+    </n-form-item>
+    <n-form-item label="Access Key" path="type">
+       <n-input v-model="formData.accesskey"/>
+    </n-form-item>
+    <n-form-item label="Secret Key" path="type">
+       <n-input v-model="formData.secrretkey"/>
+    </n-form-item>
+    <n-form-item label="目标存储空间" path="type">
+       <n-input v-model="formData.bucket"/>
+    </n-form-item>
+    <n-form-item label="地区" path="type">
+       <n-input v-model="formData.region"/>
+    </n-form-item>
+    <n-form-item label="复制模式" path="type">
+       <n-input v-model="formData.mode"/>
+    </n-form-item>
+
+    <n-form-item label="带宽" path="type">
+       <n-input v-model="formData.daikuan"/>
+    </n-form-item>
+    <n-form-item label="健康检查时长" path="type">
+       <n-input v-model="formData.timelong"/>
+    </n-form-item>
+    <n-form-item label="存储类型" path="type">
+       <n-input v-model="formData.storageType"/>
+    </n-form-item>
+
+    <!-- 对象搜索 -->
+    <n-card title="对象搜索">  
+      <n-form-item label="前缀">
+        <n-input v-model="formData.prefix" placeholder="请输入前缀" />
+      </n-form-item>
+      <n-form-item label="标签">
+        <n-dynamic-input
+          v-model:value="formData.tags"
+          preset="pair"
+          key-placeholder="标签名"
+          value-placeholder="标签值"
+        />
+      </n-form-item>
+    </n-card>
+     
+
+    <!-- 复制选项 -->
+    <n-card class="my-4">
+      <n-collapse >
+        <n-collapse-item title="复制选项" name="advanced">
+          <n-form-item label="现有对象">
+            <n-space >
+              <n-switch
+                v-model:value="formData.expiredDeleteMark"
+                :round="false"
+              />
+              <span class="ml-4 text-gray-500">复制现有对象</span>
+            </n-space>
+          </n-form-item>
+
+          <n-form-item label="元数据同步">
+            <n-space >
+              <n-switch
+                v-model:value="formData.deleteAllExpired"
+                :round="false"
+              />
+              <span class="ml-4 text-gray-500">元数据同步</span>
+            </n-space>
+          </n-form-item>
+
+          <n-form-item label="删除标记">
+            <n-space >
+              <n-switch
+                v-model:value="formData.delete"
+                :round="false"
+              />
+              <span class="ml-4 text-gray-500">复制软删除</span>
+            </n-space>
+          </n-form-item>
+
+          <n-form-item label="删除">
+            <n-space >
+              <n-switch
+                v-model:value="formData.deleteforever"
+                :round="false"
+              />
+              <span class="ml-4 text-gray-500">复制版本化删除</span>
+            </n-space>
+          </n-form-item>
+        </n-collapse-item>
+      </n-collapse>
+    </n-card> 
+
+    <n-space justify="center">
+      <n-button @click="handleCancel">取消</n-button>
+      <n-button type="primary" @click="handleSave">保存</n-button>
+    </n-space>
+  </n-form>
+  </n-card>
+  </n-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  NForm,
+  NFormItem,
+  NInput,
+  NDynamicInput,
+  NCollapse,
+  NCollapseItem,
+  NSwitch,
+  NButton,
+} from 'naive-ui'
+
+const formRef = ref(null)
+const formData = ref({
+  ruleName: '',
+  type: null,
+  versionType: 'current',
+  days: null,
+  action: 'transition',
+  tags:[{
+    key:'',
+    value:''
+  }],
+  expiredDeleteMark: false,
+  deleteAllExpired: false
+})
+
+const visible = ref(false)
+
+const open = () => {
+  visible.value = true
+}
+
+defineExpose({
+  open
+})
+const handleSave = () => {
+  formRef.value?.validate((errors) => {
+    if (!errors) {
+      console.log('提交数据:', formData.value)
+      // 调用保存接口
+    }
+  })
+}
+
+const handleCancel = () => {
+  // 取消逻辑
+}
+</script>
diff --git a/package.json b/package.json
index 2ad7b0f..43349d4 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
diff --git a/pages/replication/index.vue b/pages/replication/index.vue
index 8da3f3c..b935bbc 100644
--- a/pages/replication/index.vue
+++ b/pages/replication/index.vue
@@ -14,7 +14,7 @@
         </div>
 
         <div class="flex items-center gap-4">
-          <n-button @click="() => (formVisible = true)">
+          <n-button @click="() => openForm()">
             <Icon name="ri:add-line" class="mr-2" />
             <span>添加副本规则</span>
           </n-button>
@@ -29,6 +29,7 @@
         <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" /> -->
+       <replication-new-form ref="addFromRef"></replication-new-form>
     </page-content>
 
   </div>
@@ -136,4 +137,9 @@ const handleRowDelete = (row: RowData, e: Event) => {
   e.stopPropagation();
   console.log(row);
 };
+
+const addFromRef = ref();
+const openForm = () => {
+  addFromRef.value.open();
+}
 </script>