fix: make bucket name length between 3-63

components/buckets/new-form.vue

@@ -3,8 +3,8 @@
     <n-card class="max-w-screen-sm">
       <template #header>
         <div style="display: flex; justify-content: space-between; align-items: center">
-          <span>{{ t("Create Bucket") }}</span>
-          <n-button size="small" ghost @click="closeModal">{{ t("Close") }}</n-button>
+          <span>{{ t('Create Bucket') }}</span>
+          <n-button size="small" ghost @click="closeModal">{{ t('Close') }}</n-button>
         </div>
       </template>
       <div class="flex flex-col gap-4">
@@ -18,44 +18,60 @@
         </n-alert> -->
 
         <div class="flex items-center gap-4">
-          <n-input :placeholder="t('Please enter name')" v-model:value="objectKey" />
+          <n-input
+            :placeholder="t('Please enter name')"
+            v-model:value="objectKey"
+            :status="
+              objectKey.length > 0 && (objectKey.length < 3 || objectKey.length > 63)
+                ? 'error'
+                : undefined
+            "
+          />
         </div>
         <div class="flex items-center justify-between gap-4">
-          <n-space class="w-24">{{ t("Version") }}:</n-space>
+          <n-space class="w-24">{{ t('Version') }}:</n-space>
           <n-switch v-model:value="version" @update:value="handleVersionChange" />
         </div>
         <div class="flex items-center justify-between gap-4">
-          <n-space class="w-24">{{ t("Object Lock") }}:</n-space>
+          <n-space class="w-24">{{ t('Object Lock') }}:</n-space>
           <n-switch v-model:value="objectLock" @update:value="handleObjectLock" />
         </div>
 
         <!-- Retention 配置区块，仅对象锁开启时显示 -->
         <div v-if="objectLock" class="flex flex-col gap-4">
           <div class="flex items-center justify-between gap-4">
-            <n-space class="w-24">{{ t("Retention") }}</n-space>
+            <n-space class="w-24">{{ t('Retention') }}</n-space>
             <n-switch v-model:value="retentionEnabled" />
           </div>
           <div v-if="retentionEnabled">
             <div class="flex items-center justify-between gap-4">
-              <n-space class="w-24">{{ t("Retention Mode") }}:</n-space>
+              <n-space class="w-24">{{ t('Retention Mode') }}:</n-space>
               <n-radio-group v-model:value="retentionMode">
-                <n-radio value="COMPLIANCE">{{ t("COMPLIANCE") }}</n-radio>
-                <n-radio value="GOVERNANCE">{{ t("GOVERNANCE") }}</n-radio>
+                <n-radio value="COMPLIANCE">{{ t('COMPLIANCE') }}</n-radio>
+                <n-radio value="GOVERNANCE">{{ t('GOVERNANCE') }}</n-radio>
               </n-radio-group>
             </div>
             <div class="flex items-center justify-between gap-4">
-              <n-space class="w-24">{{ t("Validity") }}*</n-space>
+              <n-space class="w-24">{{ t('Validity') }}*</n-space>
               <n-input-group class="justify-end">
                 <n-input-number v-model:value="retentionPeriod" :min="1" class="w-96" />
-                <n-select v-model:value="retentionUnit" :options="retentionUnitOptions" class="w-16" />
+                <n-select
+                  v-model:value="retentionUnit"
+                  :options="retentionUnitOptions"
+                  class="w-16"
+                />
               </n-input-group>
             </div>
           </div>
         </div>
 
         <div class="flex justify-center gap-4">
-          <n-button type="primary" :disabled="objectKey.trim().length < 1" @click="handlePutObject">
-            {{ t("Create") }}
+          <n-button
+            type="primary"
+            :disabled="objectKey.trim().length < 3 || objectKey.trim().length > 63"
+            @click="handlePutObject"
+          >
+            {{ t('Create') }}
           </n-button>
         </div>
       </div>
@@ -64,28 +80,28 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps } from "vue";
-import { useI18n } from "vue-i18n";
+import { defineEmits, defineProps } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const emit = defineEmits(["update:show"]);
+const emit = defineEmits(['update:show']);
 
 const props = defineProps<{ show: boolean }>();
 
-const closeModal = () => emit("update:show", false);
+const closeModal = () => emit('update:show', false);
 
-const objectKey = ref("");
+const objectKey = ref('');
 const version = ref(false);
 const objectLock = ref(false);
 
 // Retention 相关变量
 const retentionEnabled = ref(false);
-const retentionMode = ref("COMPLIANCE");
+const retentionMode = ref('COMPLIANCE');
 const retentionPeriod = ref(180);
-const retentionUnit = ref("day");
+const retentionUnit = ref('day');
 const retentionUnitOptions = [
-  { label: t("Day"), value: "day" },
-  { label: t("Year"), value: "year" },
+  { label: t('Day'), value: 'day' },
+  { label: t('Year'), value: 'year' },
 ];
 
 const { createBucket, putBucketVersioning, putObjectLockConfiguration } = useBucket({});
@@ -108,7 +124,7 @@ const handleVersionChange = () => {
 
 const handlePutObject = () => {
   const params: any = {
-    Bucket: objectKey.value,
+    Bucket: objectKey.value.trim(),
     ObjectLockEnabledForBucket: objectLock.value,
   };
   createBucket(params)
@@ -117,40 +133,40 @@ const handlePutObject = () => {
       const afterVersioning = () => {
         // 如果需要设置 retention
         if (objectLock.value && retentionEnabled.value) {
-          putObjectLockConfiguration(objectKey.value, {
-            ObjectLockEnabled: "Enabled",
+          putObjectLockConfiguration(objectKey.value.trim(), {
+            ObjectLockEnabled: 'Enabled',
             Rule: {
               DefaultRetention: {
                 Mode: retentionMode.value,
-                Days: retentionUnit.value === "day" ? retentionPeriod.value : undefined,
-                Years: retentionUnit.value === "year" ? retentionPeriod.value : undefined,
+                Days: retentionUnit.value === 'day' ? retentionPeriod.value : undefined,
+                Years: retentionUnit.value === 'year' ? retentionPeriod.value : undefined,
               },
             },
           })
             .then(() => {
-              emit("update:show", false);
-              objectKey.value = "";
-              $message.success(t("Create Success"));
+              emit('update:show', false);
+              objectKey.value = '';
+              $message.success(t('Create Success'));
             })
-            .catch((e) => {
-              $message.error(t("Retention Save Failed"));
+            .catch(e => {
+              $message.error(t('Retention Save Failed'));
             });
         } else {
-          emit("update:show", false);
-          objectKey.value = "";
-          $message.success(t("Create Success"));
+          emit('update:show', false);
+          objectKey.value = '';
+          $message.success(t('Create Success'));
         }
       };
 
       if (version.value) {
-        putBucketVersioning(objectKey.value, version.value ? "Enabled" : "Suspended")
+        putBucketVersioning(objectKey.value.trim(), version.value ? 'Enabled' : 'Suspended')
           .then(afterVersioning)
-          .catch(() => $message.error(t("Create Failed")));
+          .catch(() => $message.error(t('Create Failed')));
       } else {
         afterVersioning();
       }
     })
-    .catch((e) => {
+    .catch(e => {
       $message.error(e.message);
     });
 };