From 0788c041163babbbb4bc116c407f0982df871eb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E7=99=BB=E5=B1=B1?= <cxymds@qq.com>
Date: Wed, 5 Nov 2025 10:33:45 +0800
Subject: [PATCH] feat :add aliyun tencent huaweicloud azure gcs r2 backend
 tier

---
 assets/svg/cloudflare.svg     |   1 +
 components/tiers/new-form.vue | 115 ++++++++++++++++++++++++++--------
 pages/tiers/index.vue         |  26 +++++++-
 3 files changed, 115 insertions(+), 27 deletions(-)
 create mode 100644 assets/svg/cloudflare.svg

diff --git a/assets/svg/cloudflare.svg b/assets/svg/cloudflare.svg
new file mode 100644
index 0000000..18562b0
--- /dev/null
+++ b/assets/svg/cloudflare.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="70" height="30" fill="none" viewBox="0 0 70 30" style="width:204px;height:30px"><g clip-path="url(#a)"><path fill="#FBAD41" d="M52.688 13.028c-.22 0-.437.008-.654.015a.297.297 0 0 0-.102.024.365.365 0 0 0-.236.255l-.93 3.249c-.401 1.397-.252 2.687.422 3.634.618.876 1.646 1.39 2.894 1.45l5.045.306c.15.008.28.08.359.199a.492.492 0 0 1 .051.434.64.64 0 0 1-.547.426l-5.242.306c-2.848.132-5.912 2.456-6.987 5.29l-.378 1a.28.28 0 0 0 .248.382h18.054a.48.48 0 0 0 .464-.35 13.12 13.12 0 0 0 .48-3.54c0-7.22-5.789-13.072-12.933-13.072"></path><path fill="#F6821F" d="m44.808 29.578.334-1.175c.402-1.397.253-2.687-.42-3.634-.62-.876-1.647-1.39-2.896-1.45l-23.665-.306a.467.467 0 0 1-.374-.199.492.492 0 0 1-.052-.434.64.64 0 0 1 .552-.426l23.886-.306c2.836-.131 5.9-2.456 6.975-5.29l1.362-3.6a.914.914 0 0 0 .04-.477C48.998 5.259 42.79 0 35.368 0c-6.842 0-12.647 4.462-14.73 10.665a6.92 6.92 0 0 0-4.911-1.374c-3.28.33-5.92 3.002-6.246 6.318a7.148 7.148 0 0 0 .18 2.472c-5.36.16-9.66 4.598-9.66 10.052 0 .493.035.979.106 1.453a.46.46 0 0 0 .457.402h43.704a.57.57 0 0 0 .54-.418"></path></g><defs><clipPath id="a"><path fill="#FFF" d="M0 0h204v30H0z"></path></clipPath></defs></svg>
\ No newline at end of file
diff --git a/components/tiers/new-form.vue b/components/tiers/new-form.vue
index 06d10cf..2765a28 100644
--- a/components/tiers/new-form.vue
+++ b/components/tiers/new-form.vue
@@ -2,7 +2,12 @@
   <Modal v-model="visible" :title="t('Add Tier')" size="lg" :close-on-backdrop="false">
     <div class="space-y-6">
       <div v-if="!formData.type" class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <div v-for="item in typeOptions" :key="item.value" class="cursor-pointer border border-border/70 transition hover:border-primary" @click="chooseType(item.value)">
+        <div
+          v-for="item in typeOptions"
+          :key="item.value"
+          class="cursor-pointer border border-border/70 transition hover:border-primary"
+          @click="chooseType(item.value)"
+        >
           <div class="flex items-center gap-3 p-4">
             <img :src="item.iconUrl" class="h-10 w-10" alt="" />
             <div>
@@ -28,7 +33,12 @@
           <Field>
             <FieldLabel>{{ t('Name') }} (A-Z,0-9,_)</FieldLabel>
             <FieldContent>
-              <Input v-model="formData.name" :placeholder="t('Please enter name')" autocomplete="off" @input="filterName" />
+              <Input
+                v-model="formData.name"
+                :placeholder="t('Please enter name')"
+                autocomplete="off"
+                @input="filterName"
+              />
             </FieldContent>
             <FieldDescription v-if="errors.name" class="text-destructive">
               {{ errors.name }}
@@ -42,19 +52,40 @@
             </FieldContent>
           </Field>
 
-          <Field>
-            <FieldLabel>{{ t('Access Key') }}</FieldLabel>
-            <FieldContent>
-              <Input v-model="formData.accesskey" :placeholder="t('Please enter Access Key')" autocomplete="off" />
-            </FieldContent>
-          </Field>
+          <template v-if="isGCS">
+            <Field>
+              <FieldLabel>{{ t('Credentials') }} (JSON)</FieldLabel>
+              <FieldContent>
+                <Textarea
+                  v-model="formData.creds"
+                  :placeholder="t('Please enter GCS credentials JSON')"
+                  autocomplete="off"
+                  :rows="6"
+                />
+              </FieldContent>
+            </Field>
+          </template>
 
-          <Field>
-            <FieldLabel>{{ t('Secret Key') }}</FieldLabel>
-            <FieldContent>
-              <Input v-model="formData.secretkey" type="password" autocomplete="off" :placeholder="t('Please enter Secret Key')" />
-            </FieldContent>
-          </Field>
+          <template v-else>
+            <Field>
+              <FieldLabel>{{ t('Access Key') }}</FieldLabel>
+              <FieldContent>
+                <Input v-model="formData.accesskey" :placeholder="t('Please enter Access Key')" autocomplete="off" />
+              </FieldContent>
+            </Field>
+
+            <Field>
+              <FieldLabel>{{ t('Secret Key') }}</FieldLabel>
+              <FieldContent>
+                <Input
+                  v-model="formData.secretkey"
+                  type="password"
+                  autocomplete="off"
+                  :placeholder="t('Please enter Secret Key')"
+                />
+              </FieldContent>
+            </Field>
+          </template>
 
           <Field>
             <FieldLabel>{{ t('Bucket') }}</FieldLabel>
@@ -101,13 +132,20 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 
 import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'
-import { reactive, ref } from 'vue'
+import { reactive, ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import RustfsIcon from '~/assets/logo.svg'
 import AWSIcon from '~/assets/svg/aws.svg'
 import MinioIcon from '~/assets/svg/minio.svg'
+import AliyunIcon from '~/assets/svg/aliyun.svg'
+import TencentIcon from '~/assets/svg/tenxunyun.svg'
+import HuaweiIcon from '~/assets/svg/huaweiyun.svg'
+import AzureIcon from '~/assets/svg/azure.svg'
+import GoogleIcon from '~/assets/svg/google.svg'
+import CloudflareIcon from '~/assets/svg/cloudflare.svg'
 import Modal from '~/components/modal.vue'
 
 const { t } = useI18n()
@@ -118,6 +156,22 @@ const typeOptions = [
   { label: t('RustFS'), value: 'rustfs', iconUrl: RustfsIcon, description: t('RustFS built-in cold storage') },
   { label: t('Minio'), value: 'minio', iconUrl: MinioIcon, description: t('External MinIO tier') },
   { label: t('AWS S3'), value: 's3', iconUrl: AWSIcon, description: t('Standard AWS S3 tier') },
+  {
+    label: t('Aliyun OSS'),
+    value: 'aliyun',
+    iconUrl: AliyunIcon,
+    description: t('Alibaba Cloud Object Storage Service'),
+  },
+  { label: t('Tencent COS'), value: 'tencent', iconUrl: TencentIcon, description: t('Tencent Cloud Object Storage') },
+  {
+    label: t('Huawei OBS'),
+    value: 'huaweicloud',
+    iconUrl: HuaweiIcon,
+    description: t('Huawei Cloud Object Storage Service'),
+  },
+  { label: t('Azure Blob'), value: 'azure', iconUrl: AzureIcon, description: t('Microsoft Azure Blob Storage') },
+  { label: t('Google Cloud Storage'), value: 'gcs', iconUrl: GoogleIcon, description: t('Google Cloud Storage') },
+  { label: t('Cloudflare R2'), value: 'r2', iconUrl: CloudflareIcon, description: t('Cloudflare R2 Storage') },
 ]
 
 const visible = ref(false)
@@ -130,12 +184,15 @@ const formData = reactive({
   endpoint: '',
   accesskey: '',
   secretkey: '',
+  creds: '',
   bucket: '',
   prefix: '',
   region: '',
   storageclass: 'STANDARD',
 })
 
+const isGCS = computed(() => formData.type === 'gcs')
+
 const errors = reactive({
   name: '',
 })
@@ -160,6 +217,7 @@ const resetForm = () => {
   formData.endpoint = ''
   formData.accesskey = ''
   formData.secretkey = ''
+  formData.creds = ''
   formData.bucket = ''
   formData.prefix = ''
   formData.region = ''
@@ -188,18 +246,25 @@ const handleSave = async () => {
   if (!validate()) return
   submitting.value = true
   try {
+    const config: any = {
+      name: formData.name,
+      endpoint: formData.endpoint,
+      bucket: formData.bucket,
+      prefix: formData.prefix,
+      region: formData.region,
+      storageClass: formData.storageclass,
+    }
+
+    if (isGCS.value) {
+      config.creds = formData.creds
+    } else {
+      config.accessKey = formData.accesskey
+      config.secretKey = formData.secretkey
+    }
+
     const payload = {
       type: formData.type,
-      [formData.type]: {
-        name: formData.name,
-        endpoint: formData.endpoint,
-        bucket: formData.bucket,
-        prefix: formData.prefix,
-        region: formData.region,
-        accessKey: formData.accesskey,
-        secretKey: formData.secretkey,
-        storageClass: formData.storageclass,
-      },
+      [formData.type]: config,
     }
 
     await usetier.addTiers(payload)
diff --git a/pages/tiers/index.vue b/pages/tiers/index.vue
index bc1d4cc..1c39316 100644
--- a/pages/tiers/index.vue
+++ b/pages/tiers/index.vue
@@ -14,10 +14,20 @@
       </template>
     </page-header>
 
-    <DataTable :table="table" :is-loading="loading" :empty-title="t('No Tiers')" :empty-description="t('Add tiers to configure remote storage destinations.')" />
+    <DataTable
+      :table="table"
+      :is-loading="loading"
+      :empty-title="t('No Tiers')"
+      :empty-description="t('Add tiers to configure remote storage destinations.')"
+    />
 
     <tiers-new-form ref="newFormRef" @search="() => refresh()" />
-    <tiers-change-key ref="changeKeyRef" v-model:visible="changeKeyVisible" v-model:name="selectedTier" @search="() => refresh()" />
+    <tiers-change-key
+      ref="changeKeyRef"
+      v-model:visible="changeKeyVisible"
+      v-model:name="selectedTier"
+      @search="() => refresh()"
+    />
   </page>
 </template>
 
@@ -52,6 +62,18 @@ const getConfig = (row: TierRow) => {
       return row.minio
     case 's3':
       return row.s3
+    case 'aliyun':
+      return row.aliyun
+    case 'tencent':
+      return row.tencent
+    case 'huaweicloud':
+      return row.huaweicloud
+    case 'azure':
+      return row.azure
+    case 'gcs':
+      return row.gcs
+    case 'r2':
+      return row.r2
     default:
       return undefined
   }