From c449692b132cea579f1074a404ed3357ffb07fbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E7=99=BB=E5=B1=B1?= <cxymds@qq.com>
Date: Tue, 8 Jul 2025 15:03:22 +0800
Subject: [PATCH] feat add and  delete replication rule

---
 components.d.ts                     |   1 +
 components/object/list.vue          |  33 +++--
 components/replication/new-form.vue | 192 ++++++++++++++++++----------
 composables/useBucket.ts            |  23 +++-
 i18n/locales/en-US.json             |   4 +
 i18n/locales/zh-CN.json             |   4 +
 pages/replication/index.vue         |  40 +++++-
 7 files changed, 205 insertions(+), 92 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index b2a3519..de0fa14 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -71,6 +71,7 @@ declare module 'vue' {
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
+    NVirtualList: typeof import('naive-ui')['NVirtualList']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/components/object/list.vue b/components/object/list.vue
index 4516e22..1409d97 100644
--- a/components/object/list.vue
+++ b/components/object/list.vue
@@ -2,7 +2,7 @@
   <n-page-header subtitle="" @back="router.back()">
     <template #title>
       <div class="flex items-center justify-between">
-        <n-input placeholder="搜索" v-model:value="searchTerm" @update:value="handleSearch">
+        <n-input :placeholder="t('Search')" v-model:value="searchTerm" @update:value="handleSearch">
           <template #prefix>
             <Icon name="ri:search-2-line" />
           </template>
@@ -15,25 +15,25 @@
         <object-delete-stats />
         <n-button @click="() => handleNewObject(true)">
           <Icon name="ri:add-line" class="mr-2" />
-          <span>新建目录</span>
+          <span>{{ t("New Folder") }}</span>
         </n-button>
         <n-button @click="() => handleNewObject(false)">
           <Icon name="ri:add-line" class="mr-2" />
-          <span>新建文件</span>
+          <span>{{ t("New File") }}</span>
         </n-button>
         <n-button @click="() => (uploadPickerVisible = true)">
           <Icon name="ri:file-add-line" class="mr-2" />
-          <span>上传文件/文件夹</span>
+          <span>{{ t("Upload File") + "/" + t("Folder") }}</span>
         </n-button>
         <n-button :disabled="!checkedKeys.length" secondary @click="handleBatchDelete">
           <template #icon>
             <Icon name="ri:delete-bin-5-line"></Icon>
           </template>
-          删除选中项
+          {{ t("Delete Selected") }}
         </n-button>
         <n-button @click="() => refresh()">
           <Icon name="ri:refresh-line" class="mr-2" />
-          <span>刷新</span>
+          <span>{{ t("Refresh") }}</span>
         </n-button>
       </div>
     </template>
@@ -48,13 +48,23 @@
     :bordered="false" />
   <object-upload-picker
     :show="uploadPickerVisible"
-    @update:show="(val: any) => (uploadPickerVisible = val && refresh())"
+    @update:show="
+      (val) => {
+        uploadPickerVisible = val;
+        refresh();
+      }
+    "
     :bucketName="bucketName"
     :prefix="prefix" />
   <object-new-form
     :show="newObjectFormVisible"
     :asPrefix="newObjectAsPrefix"
-    @update:show="(val: any) => (newObjectFormVisible = val && refresh())"
+    @update:show="
+      (val) => {
+        newObjectFormVisible = val;
+        refresh();
+      }
+    "
     :bucketName="bucketName"
     :prefix="prefix" />
   <n-button-group class="ml-auto">
@@ -72,6 +82,7 @@
 
 <script setup lang="ts">
 const { $s3Client } = useNuxtApp();
+const { t } = useI18n();
 import { useAsyncData, useRoute, useRouter } from "#app";
 import { NuxtLink } from "#components";
 import { ListObjectsV2Command, type _Object, type CommonPrefix } from "@aws-sdk/client-s3";
@@ -171,7 +182,7 @@ const columns: DataTableColumns<RowData> = [
   },
   {
     key: "Key",
-    title: "对象",
+    title: t("Object"),
     render: (row: { Key: string; type: "prefix" | "object" }) => {
       const displayKey = prefix.value ? row.Key.substring(prefix.value.length) : row.Key;
       let label: string | VNode = displayKey || "/";
@@ -196,10 +207,10 @@ const columns: DataTableColumns<RowData> = [
       );
     },
   },
-  { key: "Size", title: "大小", render: (row: { Size: number }) => (row.Size ? formatBytes(row.Size) : "") },
+  { key: "Size", title: t("Size"), render: (row: { Size: number }) => (row.Size ? formatBytes(row.Size) : "") },
   {
     key: "LastModified",
-    title: "更新时间",
+    title: t("Update Time"),
     render: (row: { LastModified: string }) => {
       return row.LastModified ? dayjs(row.LastModified).format("YYYY-MM-DD HH:mm:ss") : "";
     },
diff --git a/components/replication/new-form.vue b/components/replication/new-form.vue
index e12631a..e5e1191 100644
--- a/components/replication/new-form.vue
+++ b/components/replication/new-form.vue
@@ -14,22 +14,22 @@
         <n-form-item :label="t('Priority')" path="level">
           <n-input v-model:value="formData.level" :placeholder="t('Please enter priority')" />
         </n-form-item>
-        <n-form-item :label="t('Target Address')" path="type">
+        <n-form-item :label="t('Target Address')" path="endpoint">
           <n-input v-model:value="formData.endpoint" :placeholder="t('Please enter target address')" />
         </n-form-item>
         <n-form-item :label="t('Use TLS')" path="tls">
           <n-switch v-model:value="formData.tls" :round="false" />
         </n-form-item>
-        <n-form-item :label="t('Access Key')" path="type">
+        <n-form-item :label="t('Access Key')" path="accesskey">
           <n-input v-model:value="formData.accesskey" :placeholder="t('Please enter Access Key')" />
         </n-form-item>
-        <n-form-item :label="t('Secret Key')" path="type">
+        <n-form-item :label="t('Secret Key')" path="secrretkey">
           <n-input v-model:value="formData.secrretkey" :placeholder="t('Please enter Secret Key')" />
         </n-form-item>
-        <n-form-item :label="t('Target Bucket')" path="type">
+        <n-form-item :label="t('Target Bucket')" path="bucket">
           <n-input v-model:value="formData.bucket" :placeholder="t('Please enter target bucket')" />
         </n-form-item>
-        <n-form-item :label="t('Region')" path="type">
+        <n-form-item :label="t('Region')" path="region">
           <n-input v-model:value="formData.region" :placeholder="t('Please enter region')" />
         </n-form-item>
         <n-form-item :label="t('Replication Mode')" path="modeType">
@@ -40,7 +40,7 @@
             :options="modes" />
         </n-form-item>
 
-        <n-form-item v-if="formData.modeType === 'async'" :label="t('Bandwidth')" path="type">
+        <n-form-item v-if="formData.modeType === 'async'" :label="t('Bandwidth')" path="daikuan">
           <n-input-group>
             <n-input v-model="formData.daikuan" :placeholder="t('Please enter bandwidth')" />
             <n-select
@@ -51,9 +51,11 @@
           </n-input-group>
         </n-form-item>
         <n-form-item :label="t('Health Check Duration')" path="timecheck">
-          <n-input v-model:value="formData.timecheck" :placeholder="t('Please enter health check duration')" />
+          <n-input v-model:value="formData.timecheck" :placeholder="t('Please enter health check duration')">
+            <template #suffix>s</template>
+          </n-input>
         </n-form-item>
-        <n-form-item :label="t('Storage Type')" path="type">
+        <n-form-item :label="t('Storage Type')" path="storageType">
           <n-input v-model:value="formData.storageType" :placeholder="t('Please enter storage type')" />
         </n-form-item>
 
@@ -159,10 +161,18 @@ const units = [
 const formRef = ref(null);
 const formData = ref({
   level: "1",
+  endpoint: "",
+  tls: false,
+  accesskey: "",
+  secrretkey: "",
+  bucket: "",
+  region: "",
+  modeType: "async",
   timecheck: "60",
-  modeType: "sync",
-  type: null,
   unit: "Mi",
+  daikuan: "",
+  storageType: "",
+  prefix: "",
   tags: [
     {
       key: "",
@@ -192,74 +202,114 @@ defineExpose({
 });
 
 const emit = defineEmits(["success"]);
-
-function genRuleId() {
-  return "rule-" + Math.random().toString(36).substr(2, 9) + Date.now();
-}
-
+// 创建远程复制目标
+const { setRemoteReplicationTarget, putBucketReplication, getBucketReplication } = useBucket({});
 const handleSave = async () => {
   formRef.value?.validate(async (errors) => {
     if (!errors) {
       try {
-        const { putBucketReplication } = useBucket({});
         const config = {
-          Role: formData.value.role || "arn:aws:iam::xxxx:role/xxx",
-          Rules: [
-            {
-              ID: genRuleId(),
-              Status: "Enabled",
-              Priority: Number(formData.value.level),
-              DeleteMarkerReplication: {
-                Status: formData.value.delete ? "Enabled" : "Disabled",
-              },
-              Filter: {
-                And: {
-                  Prefix: formData.value.prefix,
-                  Tag: (formData.value.tags || [])
-                    .filter((tag) => tag.key && tag.value)
-                    .map((tag) => ({
-                      Key: tag.key,
-                      Value: tag.value,
-                    })),
-                },
-              },
-              Destination: {
-                Bucket: `arn:aws:s3:::${formData.value.bucket}`,
-                ...(formData.value.metricsStatus && formData.value.metricsMinutes
-                  ? {
-                      Metrics: {
-                        Status: formData.value.metricsStatus,
-                        EventThreshold: {
-                          Minutes: Number(formData.value.metricsMinutes),
-                        },
-                      },
-                    }
-                  : {}),
-                ...(formData.value.replicationTimeStatus && formData.value.replicationTimeMinutes
-                  ? {
-                      ReplicationTime: {
-                        Status: formData.value.replicationTimeStatus,
-                        Time: {
-                          Minutes: Number(formData.value.replicationTimeMinutes),
-                        },
-                      },
-                    }
-                  : {}),
-                ...(formData.value.modeType === "async" && formData.value.daikuan
-                  ? {
-                      Bandwidth: {
-                        Value: formData.value.daikuan,
-                        Unit: formData.value.unit,
-                      },
-                    }
-                  : {}),
-              },
-            },
-          ],
+          sourcebucket: props.bucketName,
+          endpoint: formData.value.endpoint,
+          credentials: {
+            accessKey: formData.value.accesskey,
+            secretKey: formData.value.secrretkey,
+            expiration: "0001-01-01T00:00:00Z",
+          },
+          targetbucket: formData.value.bucket,
+          secure: formData.value.tls,
+          path: "auto",
+          api: "s3v4",
+          type: "replication",
+          replicationSync: formData.value.modeType === "sync" ? true : false,
+          healthCheckDuration: formData.value.timecheck * 1000000000 - 0,
+          disableProxy: false,
+          resetBeforeDate: "0001-01-01T00:00:00Z",
+          totalDowntime: 0,
+          lastOnline: "0001-01-01T00:00:00Z",
+          isOnline: false,
+          latency: {
+            curr: 0,
+            avg: 0,
+            max: 0,
+          },
+          edge: false,
+          edgeSyncBeforeExpiry: false,
         };
-        console.log("🚀 ~ formRef.value?.validate ~ config:", config);
 
-        await putBucketReplication(props.bucketName, config);
+        const targetRESP = await setRemoteReplicationTarget(props.bucketName, config);
+        if (!targetRESP) return;
+
+        // 获取已有的 replication 配置
+        let oldConfig = null;
+        try {
+          oldConfig = await getBucketReplication(props.bucketName);
+          console.log(oldConfig);
+        } catch (e) {
+          console.log(e);
+          // 没有配置时会报错，忽略即可
+        }
+
+        // 构造新规则
+        const newRule = {
+          ID: `replication-rule-${Date.now()}`,
+          Status: "Enabled",
+          Priority: parseInt(formData.value.level) || 1,
+          Filter: (() => {
+            const filter = {};
+            if (formData.value.prefix) {
+              filter.Prefix = formData.value.prefix;
+            }
+            const validTags = formData.value.tags.filter((tag) => tag.key && tag.value);
+            if (validTags.length > 0) {
+              if (validTags.length === 1) {
+                filter.Tag = {
+                  Key: validTags[0].key,
+                  Value: validTags[0].value,
+                };
+              } else {
+                filter.And = {
+                  Tags: validTags.map((tag) => ({
+                    Key: tag.key,
+                    Value: tag.value,
+                  })),
+                };
+              }
+            }
+            return filter;
+          })(),
+          Destination: {
+            Bucket: `arn:aws:s3:::${formData.value.bucket}`,
+            StorageClass: formData.value.storageType || "STANDARD",
+          },
+          DeleteMarkerReplication: {
+            Status: formData.value.delete ? "Enabled" : "Disabled",
+          },
+          ExistingObjectReplication: {
+            Status: formData.value.expiredDeleteMark ? "Enabled" : "Disabled",
+          },
+        };
+
+        // 合并规则
+        let rules = [];
+        if (
+          oldConfig &&
+          oldConfig.ReplicationConfiguration &&
+          Array.isArray(oldConfig.ReplicationConfiguration.Rules)
+        ) {
+          rules = [...oldConfig.ReplicationConfiguration.Rules, newRule];
+        } else {
+          rules = [newRule];
+        }
+
+        const params = {
+          Role: targetRESP,
+          Rules: rules,
+        };
+
+        // 创建复制规则
+        await putBucketReplication(props.bucketName, params);
+
         emit("success");
         visible.value = false;
       } catch (e) {
diff --git a/composables/useBucket.ts b/composables/useBucket.ts
index c19738e..25a072c 100644
--- a/composables/useBucket.ts
+++ b/composables/useBucket.ts
@@ -28,8 +28,6 @@ import {
   DeleteBucketReplicationCommand,
 } from "@aws-sdk/client-s3";
 
-const { $api } = useNuxtApp();
-
 export function useBucket({ region }: { region?: string }) {
   const $client = useNuxtApp().$s3Client;
 
@@ -223,16 +221,28 @@ export function useBucket({ region }: { region?: string }) {
 
   /********************S3 Replication********************/
 
+  /********************rustfs Replication target********************/
+  const { $api } = useNuxtApp();
+  const message = useMessage();
   const setRemoteReplicationTarget = async (bucket: string, data: any) => {
-    console.log("🚀 ~ setRemoteReplicationTarget ~ bucket:", bucket);
-    return await $api.put(`/set-remote-target?bucket=${bucket}}`, data);
+    try {
+      return await $api.put(`/set-remote-target?bucket=${bucket}`, data);
+    } catch (error: any) {
+      message.error(error.message as string);
+      console.log(error);
+    }
+    // return await $api.put(`/set-remote-target?bucket=${bucket}`, data);
   };
 
   const listRemoteReplicationTarget = async (bucket: string) => {
-    return await $api.get(`/list-remote-target?bucket=${bucket}`);
+    return await $api.get(`/list-remote-targets?bucket=${bucket}&type=`);
   };
 
-  /********************rustfs Replication********************/
+  const deleteRemoteReplicationTarget = async (bucket: string, arn: string) => {
+    return await $api.delete(`/remove-remote-target?bucket=${bucket}&arn=${arn}`);
+  };
+
+  /********************rustfs Replication target  end********************/
 
   return {
     listBuckets,
@@ -262,5 +272,6 @@ export function useBucket({ region }: { region?: string }) {
     deleteBucketReplication,
     setRemoteReplicationTarget,
     listRemoteReplicationTarget,
+    deleteRemoteReplicationTarget,
   };
 }
diff --git a/i18n/locales/en-US.json b/i18n/locales/en-US.json
index ed338ee..cf6d543 100644
--- a/i18n/locales/en-US.json
+++ b/i18n/locales/en-US.json
@@ -134,6 +134,9 @@
   "Login Problems": "Login Problems",
   "Bucket Not Empty": "Bucket Not Empty",
   "Upload File": "Upload File",
+  "Folder": "Folder",
+  "Update Time": "Update Time",
+  "Object": "Object",
   "Close": "Close",
   "Select File": "Select File",
   "Or": "Or",
@@ -150,6 +153,7 @@
   "Start Upload": "Start Upload",
   "Task Management": "Task Management",
   "Task In Progress": "Task In Progress",
+  "Task Completed": "Task Completed",
   "Upload Completed": "Upload Completed",
   "Browser Warning": "Browser Warning",
   "Cache Warning": "Cache Warning",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 0c53e48..45ac18f 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -158,7 +158,10 @@
   "Creation Date": "创建时间",
   "Bucket Not Empty": "当前桶不为空，请先删除桶内容",
   "Upload File": "上传文件",
+  "Folder": "文件夹",
   "Close": "关闭",
+  "Update Time": "更新时间",
+  "Object": "对象",
   "Select File": "选择文件",
   "Or": "或",
   "Select Folder": "选择文件夹",
@@ -174,6 +177,7 @@
   "Start Upload": "开始上传",
   "Task Management": "任务管理",
   "Task In Progress": "任务进行中（进行中 {uploading} 个，已成功 {completed} 个）",
+  "Task Completed": "任务完成",
   "Upload Completed": "上传完成（成功 {completed} 个，失败 {failed} 个）",
   "Browser Warning": "刷新/关闭浏览器 将取消当前所有任务。",
   "Cache Warning": "清空浏览器缓存、session过期等情况会导致任务中断或丢失，请谨慎操作。",
diff --git a/pages/replication/index.vue b/pages/replication/index.vue
index 779bc6a..a3273c2 100644
--- a/pages/replication/index.vue
+++ b/pages/replication/index.vue
@@ -53,7 +53,13 @@ import { h, ref, computed, watch } from "vue";
 import { useMessage } from "naive-ui";
 
 const { t } = useI18n();
-const { listBuckets, listRemoteReplicationTarget, deleteBucketReplication } = useBucket({});
+const {
+  listBuckets,
+  getBucketReplication,
+  putBucketReplication,
+  deleteBucketReplication,
+  deleteRemoteReplicationTarget,
+} = useBucket({});
 const formVisible = ref(false);
 const searchTerm = ref("");
 const message = useMessage();
@@ -168,8 +174,12 @@ const loadReplication = async () => {
     return;
   }
   try {
-    console.log(11111);
-    const res = await listRemoteReplicationTarget(bucketName.value);
+    const res = await getBucketReplication(bucketName.value);
+    if (!res) {
+      pageData.value = [];
+      return;
+    }
+
     // 兼容无规则时返回空对象
     pageData.value = res?.ReplicationConfiguration?.Rules || [];
   } catch (e) {
@@ -190,7 +200,29 @@ watch(
 const handleRowDelete = async (row: any, e: Event) => {
   e.stopPropagation();
   try {
-    await deleteBucketReplication(bucketName.value);
+    // 1. 获取当前所有规则
+    const res: any = await getBucketReplication(bucketName.value);
+    let rules = res?.ReplicationConfiguration?.Rules || [];
+    const arn: string = res?.ReplicationConfiguration?.Role || ""; // 例如 arn:aws:s3:::bucketname
+    console.log(arn);
+
+    // 2. 过滤掉要删除的规则
+    const newRules = rules.filter((r: any) => r.ID !== row.ID);
+    if (newRules.length === 0) {
+      // 如果删除后没有规则，直接删除整个配置
+      await deleteBucketReplication(bucketName.value);
+    } else {
+      // 否则 put 新规则集
+      await putBucketReplication(bucketName.value, {
+        Role: res?.ReplicationConfiguration?.Role,
+        Rules: newRules,
+      });
+      // 4. 删除远程目标
+      if (arn) {
+        deleteRemoteReplicationTarget(bucketName.value, arn);
+      }
+    }
+
     message.success(t("Delete success"));
     loadReplication();
   } catch (err) {