feat: 存储管理S3存储配置填充默认域名 (#21)

src/utils/validate.ts

@@ -8,3 +8,9 @@ export const isExternal = (path: string) => {
 export function isHttp(url: string) {
   return url.includes('http://') || url.includes('https://')
 }
+
+/** 判断 字符串 是否是 ipv4 */
+export function isIPv4(ip: string): boolean {
+  const ipv4Pattern = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+  return ipv4Pattern.test(ip)
+}

src/views/system/storage/StorageAddModal.vue

@@ -1,12 +1,12 @@
 <template>
   <a-drawer
-    v-model:visible="visible"
-    :title="title"
-    :mask-closable="false"
-    :esc-to-close="false"
-    :width="width >= 600 ? 600 : '100%'"
-    @before-ok="save"
-    @close="reset"
+      v-model:visible="visible"
+      :title="title"
+      :mask-closable="false"
+      :esc-to-close="false"
+      :width="width >= 600 ? 600 : '100%'"
+      @before-ok="save"
+      @close="reset"
   >
     <a-form ref="formRef" :model="form" :rules="rules" size="large" auto-label-width>
       <a-form-item label="名称" field="name">
@@ -23,10 +23,9 @@
       </a-form-item>
       <a-form-item v-if="form.type === 1" label="私有密钥" field="secretKey">
         <a-input
-          v-model.trim="form.secretKey"
-          placeholder="请输入私有密钥"
-          :max-length="255"
-          @input="updateSecretKey"
+            v-model.trim="form.secretKey"
+            placeholder="请输入私有密钥"
+            :max-length="255"
         />
       </a-form-item>
       <a-form-item v-if="form.type === 1" label="终端节点" field="endpoint">
@@ -37,12 +36,17 @@
       </a-form-item>
       <a-form-item v-if="form.type === 1" label="域名" field="domain">
         <a-input v-model.trim="form.domain" placeholder="请输入域名" />
+        <template #extra>
+          <div v-if="defaultDomain">
+            <span>留空默认域名：{{ defaultDomain }}</span>
+          </div>
+        </template>
       </a-form-item>
       <a-form-item
-        v-if="form.type === 2"
-        label="域名"
-        field="domain"
-        :rules="[
+          v-if="form.type === 2"
+          label="域名"
+          field="domain"
+          :rules="[
           {
             required: true,
             message: '请输入域名',
@@ -56,31 +60,31 @@
       </a-form-item>
       <a-form-item label="描述" field="description">
         <a-textarea
-          v-model.trim="form.description"
-          placeholder="请输入描述"
-          show-word-limit
-          :max-length="200"
-          :auto-size="{ minRows: 3, maxRows: 5 }"
+            v-model.trim="form.description"
+            placeholder="请输入描述"
+            show-word-limit
+            :max-length="200"
+            :auto-size="{ minRows: 3, maxRows: 5 }"
         />
       </a-form-item>
       <a-form-item label="默认存储" field="isDefault">
         <a-switch
-          v-model="form.isDefault"
-          type="round"
-          :checked-value="true"
-          :unchecked-value="false"
-          checked-text="是"
-          unchecked-text="否"
+            v-model="form.isDefault"
+            type="round"
+            :checked-value="true"
+            :unchecked-value="false"
+            checked-text="是"
+            unchecked-text="否"
         />
       </a-form-item>
       <a-form-item label="状态" field="status">
         <a-switch
-          v-model="form.status"
-          type="round"
-          :checked-value="1"
-          :unchecked-value="2"
-          checked-text="启用"
-          unchecked-text="禁用"
+            v-model="form.status"
+            type="round"
+            :checked-value="1"
+            :unchecked-value="2"
+            checked-text="启用"
+            unchecked-text="禁用"
         />
       </a-form-item>
     </a-form>
@@ -94,6 +98,7 @@ import { addStorage, getStorage, updateStorage } from '@/apis'
 import { useForm } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import { encryptByRsa } from '@/utils/encrypt'
+import { isIPv4 } from '@/utils/validate'
 
 const emit = defineEmits<{
   (e: 'save-success'): void
@@ -122,6 +127,24 @@ const { form, resetForm } = useForm({
   sort: 999,
   status: 1
 })
+/** 获取url的protocol和endpoint */
+const stripProtocol = (url: string): { endpoint: string, protocol: string } => {
+  if (url.startsWith('http://')) {
+    return { endpoint: url.substring(7), protocol: 'http://' }
+  } else if (url.startsWith('https://')) {
+    return { endpoint: url.substring(8), protocol: 'https://' }
+  }
+  return { endpoint: url, protocol: 'http://' }
+}
+/** 按规则拼接当前默认domain */
+const defaultDomain = computed(() => {
+  const { endpoint: initialEndpoint, bucketName, domain, type } = form
+  if (domain || type !== 1 || !initialEndpoint || !bucketName) {
+    return
+  }
+  const { endpoint, protocol } = stripProtocol(initialEndpoint)
+  return isIPv4(endpoint) ? `${protocol}${endpoint}/${bucketName}/` : `${protocol}${bucketName}.${endpoint}/`
+})
 
 // 重置
 const reset = () => {
@@ -153,7 +176,8 @@ const save = async () => {
     if (isInvalid) return false
     const data = {
       ...form,
-      secretKey: form.type === 1 && !form.secretKey.includes('*') ? encryptByRsa(form.secretKey) : null
+      secretKey: form.type === 1 && !form.secretKey.includes('*') ? encryptByRsa(form.secretKey) : null,
+      domain: form.domain || defaultDomain.value
     }
     if (isUpdate.value) {
       await updateStorage(data, dataId.value)