feat： tier

components/tiers/new-form.vue

@@ -45,7 +45,10 @@
           <n-input v-model="formData.prefix" :placeholder="t('Please enter prefix')" />
         </n-form-item>
         <n-form-item :label="t('Region')">
-          <n-input v-model="formData.regio" :placeholder="t('Please enter region')" />
+          <n-input v-model="formData.region" :placeholder="t('Please enter region')" />
+        </n-form-item>
+        <n-form-item :label="t('StorageClass')">
+          <n-input v-model:value="formData.storageclass" :placeholder="t('Please Enter storage class') " />
         </n-form-item>
         <n-space justify="center">
           <n-button @click="handleCancel">{{ t('Cancel') }}</n-button>
@@ -75,8 +78,10 @@ import {
   NSelect,
   NButton,
 } from 'naive-ui'
+import { useTiers } from '#imports'
 
 const { t } = useI18n()
+const usetier = useTiers()
 
 const formRef = ref(null)
 const formData = ref({
@@ -87,18 +92,20 @@ const formData = ref({
   secretkey: '',
   bucket: '',
   prefix: '',
-  regio: '',
+  region: '',
+  storageclass: 'STANDARD', // 新增字段，默认值为 STANDARD
 })
 const typeOptions = [
   { label: t('RustFS'), value: 'rustfs', iconUrl: RustfsIcon },
   { label: t('Minio'), value: 'minio', iconUrl: MinioIcon },
-  { label: t('Google Cloud Storage'), value: 'google', iconUrl: GoogleIcon },
-  { label: t('AWS S3'), value: 'AWS', iconUrl: AWSIcon },
-  { label: t('Azure'), value: 'azure', iconUrl: AzureIcon },
-  { label: t('Aliyun'), value: 'aliyun', iconUrl: AliyunIcon },
-  { label: t('Tencent Cloud'), value: 'tqyun', iconUrl: TqyunIcon },
-  { label: t('Huawei Cloud'), value: 'hwyun', iconUrl: HwcloudIcon },
-  { label: t('Baidu Cloud'), value: 'bdyun', iconUrl: BaiduIcon },
+  { label: t('AWS S3'), value: 's3', iconUrl: AWSIcon },
+  // 暂未支持
+  // { label: t('Google Cloud Storage'), value: 'google', iconUrl: GoogleIcon },
+  // { label: t('Azure'), value: 'azure', iconUrl: AzureIcon },
+  // { label: t('Aliyun'), value: 'aliyun', iconUrl: AliyunIcon },
+  // { label: t('Tencent Cloud'), value: 'tqyun', iconUrl: TqyunIcon },
+  // { label: t('Huawei Cloud'), value: 'hwyun', iconUrl: HwcloudIcon },
+  // { label: t('Baidu Cloud'), value: 'bdyun', iconUrl: BaiduIcon },
 ]
 
 const rules = {
@@ -116,11 +123,36 @@ const open = () => {
 defineExpose({
   open
 })
+
+const emmit = defineEmits(['search'])
 const handleSave = () => {
   formRef.value?.validate((errors) => {
     if (!errors) {
-      console.log(t('Submit data'), formData.value)
+      // {"type":"minio","minio":{"name":"COLDTIER","endpoint":"","bucket":"","prefix":"","region":"","accesskey":"","secretkey":""}}
       // 调用保存接口
+      const data = {
+        type: formData.value.type,
+        [formData.value.type]: {
+          name: formData.value.name,
+          endpoint: formData.value.endpoint,
+          bucket: formData.value.bucket,
+          prefix: formData.value.prefix,
+          region: formData.value.region,
+          accesskey: formData.value.accesskey,
+          secretkey: formData.value.secretkey,
+          storageclass: formData.value.storageclass, // 新增字段
+        },
+      }
+      console.log(t('Submit data'), data)
+      
+      usetier.addTiers(data).then((res) => {
+        if (res.code === 200) {
+          visible.value = false
+        }
+        // 处理成功逻辑
+        console.log('保存成功', res)
+        emit('search')
+      })
     }
   })
 }

composables/useTiers.ts

@@ -0,0 +1,46 @@
+export const useTiers = () => {
+  const { $api } = useNuxtApp()
+    /**
+     * 添加分层
+     * 
+     *'{"type":"minio","minio":{"name":"COLDTIER","endpoint":"","bucket":"","prefix":"","region":"","accesskey":"","secretkey":""}}'
+     * {"type":"rustfs","rustfs":{"name":"COLDTIER","endpoint":"","bucket":"","prefix":"","region":"","accesskey":"","secretkey":""}}
+     * {"type":"s3","s3":{"name":"S3COLDTIER","endpoint":"","bucket":"","prefix":"","region":"","accesskey":"","secretkey":"","storageclass":"STANDAR
+     * 
+     */ 
+   const addTiers =  async (data: any)=> {
+      return await $api.post('/tier',data)
+    }
+
+
+    /**
+     * 编辑分层
+     * @returns
+     */
+    const updateTiers = async (name: string, data: any) =>{
+      return await $api.put(`/tier/${encodeURIComponent(name)}`, data)
+    }
+
+    /**
+     * 获取分层列表
+     * @returns
+     */
+    const listTiers = async () =>{
+      return await $api.get('/tier')
+    }
+
+    /**
+     * 删除分层列表
+     * @returns
+     */
+   const removeTiers =  async (name: string) => {
+      return await $api.delete(`/tier/${encodeURIComponent(name)}`, {})
+    }
+   
+  return {
+    addTiers,
+    updateTiers,
+    listTiers,
+    removeTiers 
+  }
+}

i18n/locales/en-US.json

@@ -267,5 +267,8 @@
   "Remote Site": "Remote Site",
   "Endpoint Required": "Endpoint Required",
   "Access Key Required": "Access Key Required",
-  "Secret Key Required": "Secret Key Required"
+  "Secret Key Required": "Secret Key Required",
+  "StorageClass": "Storage Class",
+  "Please Enter storage class": "Please Enter storage class(e.g., STANDARD, IA, GLACIER)"
+
 }

i18n/locales/zh-CN.json

@@ -456,5 +456,7 @@
   "Description": "描述",
   "Are you sure you want to delete all selected keys?": "您确定要删除所有选中的密钥吗？",
   "Please select at least one item": "请至少选择一项",
-  "Get Data Failed": "获取数据失败"
+  "Get Data Failed": "获取数据失败",
+  "StorageClass": "存储类型",
+  "Please Enter storage class": "请输入存储类型"
 }

pages/tiers/index.vue

@@ -27,7 +27,7 @@
         </div>
       </div>
       <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="filteredData" :pagination="false" :bordered="false" />
-      <tiers-new-form ref='newFormRef'></tiers-new-form>
+      <tiers-new-form ref='newFormRef' @search="refresh"></tiers-new-form>
     </page-content>
   </div>
 </template>
@@ -37,6 +37,7 @@ import { Icon } from '#components'
 import dayjs from 'dayjs'
 import { NButton, NSpace, type DataTableColumns ,NPopconfirm} from 'naive-ui'
 import { useI18n } from 'vue-i18n'
+const usetier = useTiers()
 
 const { t } = useI18n()
 const searchTerm = ref('');
@@ -116,11 +117,10 @@ const columns: DataTableColumns<RowData> = [
 ];
 
 const { data, refresh } = await useAsyncData(
-  'tiers',
+  'tier',
   async () => {
-    // const response = await listBuckets();
-    // return response
-    return []
+    const response = await usetier.listTiers();
+    return response
   },
   { default: () => [] }
 );
@@ -131,8 +131,10 @@ const filteredData = computed(() => {
   }
 
   const term = searchTerm.value.toLowerCase();
-  return data.value.filter(bucket =>
-    bucket
+  return data.value.filter((tier:any) =>
+    tier.name.toLowerCase().includes(term) ||
+    tier.endpoint.toLowerCase().includes(term) ||
+    tier.bucket.toLowerCase().includes(term)
   );
 });