From 4c15689e1ff273a5124707c4b1c02df9cd41c56d Mon Sep 17 00:00:00 2001
From: tak <aklivecai@gmail.com>
Date: Mon, 18 Dec 2023 17:02:45 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE=20-=20?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=85=8D=E7=BD=AE=201.=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=BC=82=E6=AD=A5=E5=8A=A0=E8=BD=BD=E7=9A=84=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E7=94=A8=E5=88=B0=E7=9A=84=E6=97=B6=E5=80=99=E5=86=8D?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=BB=84=E4=BB=B6=202.=20=E7=9F=AD=E4=BF=A1?=
 =?UTF-8?q?=E5=92=8C=E4=BA=91=E5=AD=98=E5=AD=98=E5=82=A8=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E9=80=89=E5=8D=A1=E5=8A=9F=E8=83=BD=EF=BC=8C=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84=E6=96=B9=E5=BC=8F=EF=BC=8C=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=80=89=E9=A1=B9=E5=8D=A1=EF=BC=88=E4=B9=8B?=
 =?UTF-8?q?=E5=89=8D=E7=9A=84=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=E8=BF=87?=
 =?UTF-8?q?=E9=95=BF=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/system/config/SmsSetting.vue    | 415 ++++++------
 web/src/views/system/config/UploadSetting.vue | 631 +++++++++---------
 web/src/views/system/config/system.vue        | 256 +++----
 3 files changed, 668 insertions(+), 634 deletions(-)

diff --git a/web/src/views/system/config/SmsSetting.vue b/web/src/views/system/config/SmsSetting.vue
index d6e6748..4491df2 100644
--- a/web/src/views/system/config/SmsSetting.vue
+++ b/web/src/views/system/config/SmsSetting.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
     <n-spin :show="show" description="请稍候...">
-      <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
+      <n-form
+        :label-width="110"
+        :model="formValue"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+      >
         <n-form-item label="默认驱动" path="smsDrive">
           <n-select
             placeholder="默认发送驱动"
@@ -35,105 +41,117 @@
           </n-input-number>
         </n-form-item>
 
-        <n-divider title-placement="left">阿里云</n-divider>
-        <n-form-item label="AccessKeyID" path="smsAliYunAccessKeyID">
-          <n-input v-model:value="formValue.smsAliYunAccessKeyID" placeholder="" />
-          <template #feedback
-            >应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取</template
-          >
-        </n-form-item>
+        <n-tabs type="segment" v-model:value="tabName">
+          <n-tab-pane name="aliyun">
+            <template #tab> 阿里云 </template>
+            <n-divider title-placement="left"> 阿里云</n-divider>
+            <n-form-item label="AccessKeyID" path="smsAliYunAccessKeyID">
+              <n-input v-model:value="formValue.smsAliYunAccessKeyID" placeholder="" />
+              <template #feedback>
+                应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取
+              </template>
+            </n-form-item>
 
-        <n-form-item label="AccessKeySecret" path="smsAliYunAccessKeySecret">
-          <n-input
-            type="password"
-            v-model:value="formValue.smsAliYunAccessKeySecret"
-            show-password-on="click"
-          >
-            <template #password-visible-icon>
-              <n-icon :size="16" :component="GlassesOutline" />
-            </template>
-            <template #password-invisible-icon>
-              <n-icon :size="16" :component="Glasses" />
-            </template>
-          </n-input>
-        </n-form-item>
+            <n-form-item label="AccessKeySecret" path="smsAliYunAccessKeySecret">
+              <n-input
+                type="password"
+                v-model:value="formValue.smsAliYunAccessKeySecret"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
 
-        <n-form-item label="签名" path="smsAliYunSign">
-          <n-input v-model:value="formValue.smsAliYunSign" placeholder="" />
-          <template #feedback
-            >申请地址：https://dysms.console.aliyun.com/domestic/text/sign</template
-          >
-        </n-form-item>
+            <n-form-item label="签名" path="smsAliYunSign">
+              <n-input v-model:value="formValue.smsAliYunSign" placeholder="" />
+              <template #feedback>
+                申请地址：https://dysms.console.aliyun.com/domestic/text/sign
+              </template>
+            </n-form-item>
 
-        <n-form-item label="短信模板" path="smsAliYunTemplate">
-          <n-dynamic-input
-            v-model:value="formValue.smsAliYunTemplate"
-            preset="pair"
-            key-placeholder="事件KEY"
-            value-placeholder="模板CODE"
-          />
-        </n-form-item>
+            <n-form-item label="短信模板" path="smsAliYunTemplate" label-placement="top">
+              <n-dynamic-input
+                v-model:value="formValue.smsAliYunTemplate"
+                preset="pair"
+                key-placeholder="事件KEY"
+                value-placeholder="模板CODE"
+              />
+            </n-form-item>
+          </n-tab-pane>
 
-        <n-divider title-placement="left">腾讯云</n-divider>
-        <n-form-item label="SecretId" path="smsTencentSecretId">
-          <n-input v-model:value="formValue.smsTencentSecretId" placeholder="" />
-          <template #feedback
-            >应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取</template
-          >
-        </n-form-item>
+          <n-tab-pane name="tencent">
+            <template #tab> 腾讯云 </template>
+            <n-divider title-placement="left"> 腾讯云</n-divider>
+            <n-form-item label="SecretId" path="smsTencentSecretId">
+              <n-input v-model:value="formValue.smsTencentSecretId" placeholder="" />
+              <template #feedback>
+                应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取
+              </template>
+            </n-form-item>
 
-        <n-form-item label="SecretKey" path="smsTencentSecretKey">
-          <n-input
-            type="password"
-            v-model:value="formValue.smsTencentSecretKey"
-            show-password-on="click"
-          >
-            <template #password-visible-icon>
-              <n-icon :size="16" :component="GlassesOutline" />
-            </template>
-            <template #password-invisible-icon>
-              <n-icon :size="16" :component="Glasses" />
-            </template>
-          </n-input>
-        </n-form-item>
+            <n-form-item label="SecretKey" path="smsTencentSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.smsTencentSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
 
-        <n-form-item label="接入地域域名" path="smsTencentEndpoint">
-          <n-input v-model:value="formValue.smsTencentEndpoint" placeholder="" />
-          <template #feedback
-            >默认就近地域接入域名为 sms.tencentcloudapi.com
-            ，也支持指定地域域名访问，例如广州地域的域名为
-            sms.ap-guangzhou.tencentcloudapi.com</template
-          >
-        </n-form-item>
+            <n-form-item label="接入地域域名" path="smsTencentEndpoint">
+              <n-input v-model:value="formValue.smsTencentEndpoint" placeholder="" />
+              <template #feedback>
+                默认就近地域接入域名为 <n-text code>sms.tencentcloudapi.com</n-text>
+                ，也支持指定地域域名访问，例如广州地域的域名为
+                <n-text code>sms.ap-guangzhou.tencentcloudapi.com</n-text>
+              </template>
+            </n-form-item>
 
-        <n-form-item label="地域信息" path="smsTencentRegion">
-          <n-input v-model:value="formValue.smsTencentRegion" placeholder="" />
-          <template #feedback
-            >支持的地域列表参考
-            https://cloud.tencent.com/document/api/382/52071#.E5.9C.B0.E5.9F.9F.E5.88.97.E8.A1.A8</template
-          >
-        </n-form-item>
+            <n-form-item label="地域信息" path="smsTencentRegion">
+              <n-input v-model:value="formValue.smsTencentRegion" placeholder="" />
+              <template #feedback>
+                支持的地域列表参考
+                https://cloud.tencent.com/document/api/382/52071#.E5.9C.B0.E5.9F.9F.E5.88.97.E8.A1.A8
+              </template>
+            </n-form-item>
 
-        <n-form-item label="短信应用ID" path="smsTencentAppId">
-          <n-input v-model:value="formValue.smsTencentAppId" placeholder="" />
-          <template #feedback
-            >查看地址：https://console.cloud.tencent.com/smsv2/app-manage</template
-          >
-        </n-form-item>
+            <n-form-item label="短信应用ID" path="smsTencentAppId">
+              <n-input v-model:value="formValue.smsTencentAppId" placeholder="" />
+              <template #feedback>
+                查看地址：https://console.cloud.tencent.com/smsv2/app-manage
+              </template>
+            </n-form-item>
 
-        <n-form-item label="签名" path="smsTencentSign">
-          <n-input v-model:value="formValue.smsTencentSign" placeholder="" />
-          <template #feedback>查看地址：https://console.cloud.tencent.com/smsv2/csms-sign</template>
-        </n-form-item>
+            <n-form-item label="签名" path="smsTencentSign">
+              <n-input v-model:value="formValue.smsTencentSign" placeholder="" />
+              <template #feedback>
+                查看地址：https://console.cloud.tencent.com/smsv2/csms-sign
+              </template>
+            </n-form-item>
 
-        <n-form-item label="短信模板" path="smsTencentTemplate">
-          <n-dynamic-input
-            v-model:value="formValue.smsTencentTemplate"
-            preset="pair"
-            key-placeholder="事件KEY"
-            value-placeholder="模板ID"
-          />
-        </n-form-item>
+            <n-form-item label="短信模板" path="smsTencentTemplate" label-placement="top">
+              <n-dynamic-input
+                v-model:value="formValue.smsTencentTemplate"
+                preset="pair"
+                key-placeholder="事件KEY"
+                value-placeholder="模板ID"
+              />
+            </n-form-item>
+          </n-tab-pane>
+
+          <!-- tencent -->
+        </n-tabs>
 
         <div>
           <n-space>
@@ -161,7 +179,10 @@
         class="py-4"
       >
         <n-form-item label="事件模板" path="event">
-          <n-select :options="options.config_sms_template" v-model:value="formParams.event" />
+          <n-select
+            :options="options.config_sms_template"
+            v-model:value="formParams.event"
+          />
         </n-form-item>
 
         <n-form-item label="手机号" path="mobile">
@@ -184,7 +205,9 @@
       <template #action>
         <n-space>
           <n-button @click="() => (showModal = false)">关闭</n-button>
-          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">发送</n-button>
+          <n-button type="info" :loading="formBtnLoading" @click="confirmForm"
+            >发送</n-button
+          >
         </n-space>
       </template>
     </n-modal>
@@ -192,111 +215,125 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { useMessage } from 'naive-ui';
-  import { getConfig, sendTestSms, updateConfig } from '@/api/sys/config';
-  import { Dicts } from '@/api/dict/dict';
-  import { Options } from '@/utils/hotgo';
-  import { GlassesOutline, Glasses } from '@vicons/ionicons5';
+import { ref, onMounted, watch } from "vue";
+import { useMessage } from "naive-ui";
+import { getConfig, sendTestSms, updateConfig } from "@/api/sys/config";
+import { Dicts } from "@/api/dict/dict";
+import { Options } from "@/utils/hotgo";
+import { GlassesOutline, Glasses } from "@vicons/ionicons5";
 
-  const group = ref('sms');
-  const show = ref(false);
-  const showModal = ref(false);
-  const formBtnLoading = ref(false);
-  const formParams = ref({ mobile: '', event: '', code: '1234' });
+const group = ref("sms");
+const show = ref(false);
+const showModal = ref(false);
+const formBtnLoading = ref(false);
+const formParams = ref({ mobile: "", event: "", code: "1234" });
 
-  const rules = {
-    smsDrive: {
-      required: true,
-      message: '请输入默认驱动',
-      trigger: 'blur',
-    },
-  };
+const rules = {
+  smsDrive: {
+    required: true,
+    message: "请输入默认驱动",
+    trigger: "blur",
+  },
+};
 
-  const formTestRef = ref<any>();
-  const formRef: any = ref(null);
-  const message = useMessage();
+const formTestRef = ref<any>();
+const formRef: any = ref(null);
+const message = useMessage();
 
-  const options = ref<Options>({
-    config_sms_template: [],
-    config_sms_drive: [],
+const options = ref<Options>({
+  config_sms_template: [],
+  config_sms_drive: [],
+});
+
+/** 默认选项卡 */
+const defaultTabName = "aliyun";
+/** 选项卡名称 */
+const tabName = ref<string>(defaultTabName);
+
+const formValue = ref({
+  smsDrive: defaultTabName,
+  smsMinInterval: 60,
+  smsMaxIpLimit: 10,
+  smsCodeExpire: 600,
+  smsAliYunAccessKeyID: "",
+  smsAliYunAccessKeySecret: "",
+  smsAliYunSign: "",
+  smsAliYunTemplate: null,
+  smsTencentSecretId: "",
+  smsTencentSecretKey: "",
+  smsTencentEndpoint: "sms.tencentcloudapi.com",
+  smsTencentRegion: "ap-guangzhou",
+  smsTencentAppId: "",
+  smsTencentSign: "",
+  smsTencentTemplate: null,
+});
+
+/** 监听类型变化,同步到选项卡中 */
+watch(
+  () => formValue.value.smsDrive,
+  (smsDrive: string) => {
+    console.error(smsDrive);
+    tabName.value = smsDrive;
+  }
+);
+
+function sendTest() {
+  showModal.value = true;
+  formBtnLoading.value = false;
+}
+
+function formSubmit() {
+  formRef.value.validate((errors) => {
+    if (!errors) {
+      updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+        message.success("更新成功");
+        load();
+      });
+    } else {
+      message.error("验证失败，请填写完整信息");
+    }
   });
+}
 
-  const formValue = ref({
-    smsDrive: 'aliyun',
-    smsMinInterval: 60,
-    smsMaxIpLimit: 10,
-    smsCodeExpire: 600,
-    smsAliYunAccessKeyID: '',
-    smsAliYunAccessKeySecret: '',
-    smsAliYunSign: '',
-    smsAliYunTemplate: null,
-    smsTencentSecretId: '',
-    smsTencentSecretKey: '',
-    smsTencentEndpoint: 'sms.tencentcloudapi.com',
-    smsTencentRegion: 'ap-guangzhou',
-    smsTencentAppId: '',
-    smsTencentSign: '',
-    smsTencentTemplate: null,
+onMounted(() => {
+  load();
+});
+
+async function load() {
+  show.value = true;
+  await loadOptions();
+  new Promise((_resolve, _reject) => {
+    getConfig({ group: group.value })
+      .then((res) => {
+        res.list.smsAliYunTemplate = JSON.parse(res.list.smsAliYunTemplate);
+        res.list.smsTencentTemplate = JSON.parse(res.list.smsTencentTemplate);
+        formValue.value = res.list;
+      })
+      .finally(() => {
+        show.value = false;
+      });
   });
+}
 
-  function sendTest() {
-    showModal.value = true;
+async function loadOptions() {
+  options.value = await Dicts({
+    types: ["config_sms_template", "config_sms_drive"],
+  });
+}
+
+function confirmForm(e) {
+  e.preventDefault();
+  formBtnLoading.value = true;
+  formTestRef.value.validate((errors) => {
+    if (!errors) {
+      sendTestSms(formParams.value).then((_res) => {
+        message.success("发送成功");
+        showModal.value = false;
+      });
+    } else {
+      message.error("请填写完整信息");
+    }
     formBtnLoading.value = false;
-  }
-
-  function formSubmit() {
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
-          message.success('更新成功');
-          load();
-        });
-      } else {
-        message.error('验证失败，请填写完整信息');
-      }
-    });
-  }
-
-  onMounted(() => {
-    load();
   });
-
-  async function load() {
-    show.value = true;
-    await loadOptions();
-    new Promise((_resolve, _reject) => {
-      getConfig({ group: group.value })
-        .then((res) => {
-          res.list.smsAliYunTemplate = JSON.parse(res.list.smsAliYunTemplate);
-          res.list.smsTencentTemplate = JSON.parse(res.list.smsTencentTemplate);
-          formValue.value = res.list;
-        })
-        .finally(() => {
-          show.value = false;
-        });
-    });
-  }
-
-  async function loadOptions() {
-    options.value = await Dicts({
-      types: ['config_sms_template', 'config_sms_drive'],
-    });
-  }
-
-  function confirmForm(e) {
-    e.preventDefault();
-    formBtnLoading.value = true;
-    formTestRef.value.validate((errors) => {
-      if (!errors) {
-        sendTestSms(formParams.value).then((_res) => {
-          message.success('发送成功');
-          showModal.value = false;
-        });
-      } else {
-        message.error('请填写完整信息');
-      }
-      formBtnLoading.value = false;
-    });
-  }
+}
 </script>
diff --git a/web/src/views/system/config/UploadSetting.vue b/web/src/views/system/config/UploadSetting.vue
index 6b64fd2..9a72e52 100644
--- a/web/src/views/system/config/UploadSetting.vue
+++ b/web/src/views/system/config/UploadSetting.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
     <n-spin :show="show" description="请稍候...">
-      <n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
+      <n-form
+        :label-width="100"
+        :model="formValue"
+        :rules="rules"
+        ref="formRef"
+        label-placement="left"
+      >
         <n-form-item label="默认驱动" path="uploadDrive">
           <n-select
             placeholder="默认驱动"
@@ -37,261 +43,223 @@
           <n-input v-model:value="formValue.uploadFileType" placeholder="" />
         </n-form-item>
 
-        <template v-if="formValue.uploadDrive == 'local'">
-          <n-divider title-placement="left">本地存储</n-divider>
-          <n-form-item label="本地存储路径" path="uploadLocalPath">
-            <n-input v-model:value="formValue.uploadLocalPath" placeholder="" />
-            <template #feedback>填对外访问的相对路径</template>
-          </n-form-item>
-        </template>
+        <n-tabs
+          type="card"
+          tab-style="min-width: 120px; text-aling:center;"
+          v-model:value="tabName"
+        >
+          <n-tab-pane name="local">
+            <template #tab> 本地存储</template>
 
-        <template v-if="formValue.uploadDrive == 'ucloud'">
-          <n-divider title-placement="left">ucloud对象存储</n-divider>
-          <n-form-item label="公钥" path="uploadUCloudPublicKey">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadUCloudPublicKey"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
-              </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-            <template #feedback>获取地址：https://console.ucloud.cn/ufile/token</template>
-          </n-form-item>
+            <n-divider title-placement="left">本地存储</n-divider>
+            <n-form-item label="本地存储路径" path="uploadLocalPath">
+              <n-input v-model:value="formValue.uploadLocalPath" placeholder="" />
+              <template #feedback>填对外访问的相对路径</template>
+            </n-form-item>
+          </n-tab-pane>
 
-          <n-form-item label="私钥" path="uploadUCloudPrivateKey">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadUCloudPrivateKey"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
+          <n-tab-pane name="ucloud">
+            <template #tab> ucloud对象存储</template>
+            <n-divider title-placement="left">ucloud对象存储</n-divider>
+            <n-form-item label="公钥" path="uploadUCloudPublicKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadUCloudPublicKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+              <template #feedback>
+                获取地址：https://console.ucloud.cn/ufile/token
               </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item label="存储路径" path="uploadUCloudPath">
-            <n-input v-model:value="formValue.uploadUCloudPath" placeholder="" />
-            <template #feedback>填对对象存储中的相对路径</template>
-          </n-form-item>
-          <n-form-item label="地域API" path="uploadUCloudBucketHost">
-            <n-input v-model:value="formValue.uploadUCloudBucketHost" placeholder="" />
-          </n-form-item>
-          <n-form-item label="存储桶名称" path="uploadUCloudBucketName">
-            <n-input v-model:value="formValue.uploadUCloudBucketName" placeholder="" />
-            <template #feedback>存储空间名称</template>
-          </n-form-item>
-          <n-form-item label="存储桶地域host" path="uploadUCloudFileHost">
-            <n-input v-model:value="formValue.uploadUCloudFileHost" placeholder="" />
-            <template #feedback>不需要包含桶名称</template>
-          </n-form-item>
-          <n-form-item label="访问域名" path="uploadUCloudEndpoint">
-            <n-input v-model:value="formValue.uploadUCloudEndpoint" placeholder="" />
-            <template #feedback>格式，http://abc.com 或 https://abc.com，不可为空</template>
-          </n-form-item>
-        </template>
+            </n-form-item>
 
-        <template v-if="formValue.uploadDrive == 'cos'">
-          <n-divider title-placement="left">腾讯云COS存储</n-divider>
-          <n-form-item label="secretId" path="uploadCosSecretId">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadCosSecretId"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
+            <n-form-item label="私钥" path="uploadUCloudPrivateKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadUCloudPrivateKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="存储路径" path="uploadUCloudPath">
+              <n-input v-model:value="formValue.uploadUCloudPath" placeholder="" />
+              <template #feedback>填对对象存储中的相对路径</template>
+            </n-form-item>
+            <n-form-item label="地域API" path="uploadUCloudBucketHost">
+              <n-input v-model:value="formValue.uploadUCloudBucketHost" placeholder="" />
+            </n-form-item>
+            <n-form-item label="存储桶名称" path="uploadUCloudBucketName">
+              <n-input v-model:value="formValue.uploadUCloudBucketName" placeholder="" />
+              <template #feedback>存储空间名称</template>
+            </n-form-item>
+            <n-form-item label="存储桶地域host" path="uploadUCloudFileHost">
+              <n-input v-model:value="formValue.uploadUCloudFileHost" placeholder="" />
+              <template #feedback>不需要包含桶名称</template>
+            </n-form-item>
+            <n-form-item label="访问域名" path="uploadUCloudEndpoint">
+              <n-input v-model:value="formValue.uploadUCloudEndpoint" placeholder="" />
+              <template #feedback>
+                格式，http://abc.com 或 https://abc.com，不可为空
               </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-            <template #feedback
-              >子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140
-            </template>
-          </n-form-item>
+            </n-form-item>
+          </n-tab-pane>
 
-          <n-form-item label="secretKey" path="uploadCosSecretKey">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadCosSecretKey"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
+          <n-tab-pane name="cos">
+            <template #tab> 腾讯云COS存储</template>
+            <n-divider title-placement="left">腾讯云COS存储</n-divider>
+            <n-form-item label="secretId" path="uploadCosSecretId">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadCosSecretId"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+              <template #feedback>
+                子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140
               </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item label="存储路径" path="uploadCosBucketURL">
-            <n-input v-model:value="formValue.uploadCosBucketURL" placeholder="" />
-            <template #feedback>填对对象存储中的相对路径</template>
-          </n-form-item>
-          <n-form-item label="地域API" path="uploadCosPath">
-            <n-input v-model:value="formValue.uploadCosPath" placeholder="" />
-            <template #feedback
-              >控制台查看地址：https://console.cloud.tencent.com/cos5/bucket
-            </template>
-          </n-form-item>
-        </template>
+            </n-form-item>
 
-        <template v-if="formValue.uploadDrive == 'oss'">
-          <n-divider title-placement="left">阿里云OSS存储</n-divider>
-          <n-form-item label="AccessKey ID" path="uploadOssSecretId">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadOssSecretId"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
+            <n-form-item label="secretKey" path="uploadCosSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadCosSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="存储路径" path="uploadCosBucketURL">
+              <n-input v-model:value="formValue.uploadCosBucketURL" placeholder="" />
+              <template #feedback>填对对象存储中的相对路径</template>
+            </n-form-item>
+            <n-form-item label="地域API" path="uploadCosPath">
+              <n-input v-model:value="formValue.uploadCosPath" placeholder="" />
+              <template #feedback>
+                控制台查看地址：https://console.cloud.tencent.com/cos5/bucke
               </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-            <template #feedback>创建地址：https://ram.console.aliyun.com/manage/ak</template>
-          </n-form-item>
+            </n-form-item>
+          </n-tab-pane>
 
-          <n-form-item label="AccessKey Secret" path="uploadOssSecretKey">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadOssSecretKey"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
+          <n-tab-pane name="oss">
+            <template #tab> 阿里云OSS存储</template>
+            <n-divider title-placement="left">阿里云OSS存储</n-divider>
+            <n-form-item label="AccessKey ID" path="uploadOssSecretId">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadOssSecretId"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+              <template #feedback>
+                创建地址：https://ram.console.aliyun.com/manage/ak
               </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item label="Endpoint" path="uploadOssEndpoint">
-            <n-input v-model:value="formValue.uploadOssEndpoint" placeholder="" />
-            <template #feedback> Endpoint（地域节点）</template>
-          </n-form-item>
-          <n-form-item label="存储路径" path="uploadOssPath">
-            <n-input v-model:value="formValue.uploadOssPath" placeholder="" />
-            <template #feedback>填对对象存储中的相对路径</template>
-          </n-form-item>
-          <n-form-item label="存储空间名称" path="uploadOssBucket">
-            <n-input v-model:value="formValue.uploadOssBucket" placeholder="" />
-          </n-form-item>
-          <n-form-item label="Bucket 域名" path="uploadOssBucketURL">
-            <n-input v-model:value="formValue.uploadOssBucketURL" placeholder="" />
-          </n-form-item>
-        </template>
+            </n-form-item>
 
-        <template v-if="formValue.uploadDrive == 'qiniu'">
-          <n-divider title-placement="left">七牛云对象存储</n-divider>
-          <n-form-item label="AccessKey" path="uploadQiNiuAccessKey">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadQiNiuAccessKey"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
-              </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-            <template #feedback>创建地址：https://portal.qiniu.com/user/key</template>
-          </n-form-item>
+            <n-form-item label="AccessKey Secret" path="uploadOssSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadOssSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="Endpoint" path="uploadOssEndpoint">
+              <n-input v-model:value="formValue.uploadOssEndpoint" placeholder="" />
+              <template #feedback> Endpoint（地域节点）</template>
+            </n-form-item>
+            <n-form-item label="存储路径" path="uploadOssPath">
+              <n-input v-model:value="formValue.uploadOssPath" placeholder="" />
+              <template #feedback>填对对象存储中的相对路径</template>
+            </n-form-item>
+            <n-form-item label="存储空间名称" path="uploadOssBucket">
+              <n-input v-model:value="formValue.uploadOssBucket" placeholder="" />
+            </n-form-item>
+            <n-form-item label="Bucket 域名" path="uploadOssBucketURL">
+              <n-input v-model:value="formValue.uploadOssBucketURL" placeholder="" />
+            </n-form-item>
+          </n-tab-pane>
 
-          <n-form-item label="SecretKey" path="uploadQiNiuSecretKey">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadQiNiuSecretKey"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
-              </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item label="储存路径" path="uploadQiNiuPath">
-            <n-input v-model:value="formValue.uploadQiNiuPath" placeholder="" />
-            <template #feedback>填对对象存储中的相对路径</template>
-          </n-form-item>
-          <n-form-item label="存储空间名称" path="uploadQiNiuBucket">
-            <n-input v-model:value="formValue.uploadQiNiuBucket" placeholder="" />
-          </n-form-item>
-          <n-form-item label="访问域名" path="uploadQiNiuDomain">
-            <n-input v-model:value="formValue.uploadQiNiuDomain" placeholder="" />
-          </n-form-item>
-        </template>
+          <n-tab-pane name="qiniu">
+            <template #tab> 七牛云对象存储</template>
 
-        <template v-if="formValue.uploadDrive == 'minio'">
-          <n-divider title-placement="left">minio配置</n-divider>
-          <n-form-item label="AccessKey ID" path="uploadMinioAccessKey">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadMinioAccessKey"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
-              </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-            <template #feedback>相关文档：https://min.io/</template>
-          </n-form-item>
+            <n-divider title-placement="left">七牛云对象存储</n-divider>
+            <n-form-item label="AccessKey" path="uploadQiNiuAccessKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadQiNiuAccessKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+              <template #feedback>创建地址：https://portal.qiniu.com/user/key</template>
+            </n-form-item>
 
-          <n-form-item label="AccessKey Secret" path="uploadMinioSecretKey">
-            <n-input
-              type="password"
-              v-model:value="formValue.uploadMinioSecretKey"
-              show-password-on="click"
-            >
-              <template #password-visible-icon>
-                <n-icon :size="16" :component="GlassesOutline" />
-              </template>
-              <template #password-invisible-icon>
-                <n-icon :size="16" :component="Glasses" />
-              </template>
-            </n-input>
-          </n-form-item>
-          <n-form-item label="Endpoint" path="uploadMinioEndpoint">
-            <n-input v-model:value="formValue.uploadMinioEndpoint" placeholder="" />
-            <template #feedback> Endpoint（不带http://和路径）</template>
-          </n-form-item>
-          <n-form-item path="uploadMinioUseSSL">
-            <n-switch
-              v-model:value="formValue.uploadMinioUseSSL"
-              :checked-value="1"
-              :unchecked-value="2"
-            >
-              <template #checked> 启用SSL</template>
-              <template #unchecked> 禁用SSL</template>
-            </n-switch>
-          </n-form-item>
-          <n-form-item label="储存路径" path="uploadMinioPath">
-            <n-input v-model:value="formValue.uploadMinioPath" placeholder="" />
-          </n-form-item>
-          <n-form-item label="存储桶名称" path="uploadMinioBucket">
-            <n-input v-model:value="formValue.uploadMinioBucket" placeholder="" />
-          </n-form-item>
-          <n-form-item label="对外访问域名" path="uploadMinioDomain">
-            <n-input v-model:value="formValue.uploadMinioDomain" placeholder="" />
-          </n-form-item>
-        </template>
+            <n-form-item label="SecretKey" path="uploadQiNiuSecretKey">
+              <n-input
+                type="password"
+                v-model:value="formValue.uploadQiNiuSecretKey"
+                show-password-on="click"
+              >
+                <template #password-visible-icon>
+                  <n-icon :size="16" :component="GlassesOutline" />
+                </template>
+                <template #password-invisible-icon>
+                  <n-icon :size="16" :component="Glasses" />
+                </template>
+              </n-input>
+            </n-form-item>
+            <n-form-item label="储存路径" path="uploadQiNiuPath">
+              <n-input v-model:value="formValue.uploadQiNiuPath" placeholder="" />
+              <template #feedback>填对对象存储中的相对路径</template>
+            </n-form-item>
+            <n-form-item label="存储空间名称" path="uploadQiNiuBucket">
+              <n-input v-model:value="formValue.uploadQiNiuBucket" placeholder="" />
+            </n-form-item>
+            <n-form-item label="访问域名" path="uploadQiNiuDomain">
+              <n-input v-model:value="formValue.uploadQiNiuDomain" placeholder="" />
+            </n-form-item>
+          </n-tab-pane>
+        </n-tabs>
         <div>
           <n-space>
             <n-button type="primary" @click="formSubmit">保存更新</n-button>
@@ -303,102 +271,107 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
-  import { useMessage } from 'naive-ui';
-  import { getConfig, updateConfig } from '@/api/sys/config';
-  import { Glasses, GlassesOutline } from '@vicons/ionicons5';
-  import { Dicts } from '@/api/dict/dict';
-  import { Options } from '@/utils/hotgo';
+import { onMounted, ref, watch } from "vue";
+import { useMessage } from "naive-ui";
+import { getConfig, updateConfig } from "@/api/sys/config";
+import { Glasses, GlassesOutline } from "@vicons/ionicons5";
+import { Dicts } from "@/api/dict/dict";
+import { Options } from "@/utils/hotgo";
 
-  const group = ref('upload');
-  const show = ref(false);
-  const formRef: any = ref(null);
-  const message = useMessage();
+const group = ref("upload");
+const show = ref(false);
+const formRef: any = ref(null);
+const message = useMessage();
 
-  const rules = {
-    uploadDrive: {
-      required: true,
-      message: '请输入默认驱动',
-      trigger: 'blur',
-    },
-  };
+const rules = {
+  uploadDrive: {
+    required: true,
+    message: "请输入默认驱动",
+    trigger: "blur",
+  },
+};
 
-  const options = ref<Options>({
-    config_upload_drive: [],
-  });
+const options = ref<Options>({
+  config_upload_drive: [],
+});
 
-  const formValue = ref({
-    uploadDrive: 'local',
-    uploadImageSize: 2,
-    uploadImageType: '',
-    uploadFileSize: 10,
-    uploadFileType: '',
-    uploadLocalPath: '',
-    uploadUCloudPath: '',
-    uploadUCloudPublicKey: '',
-    uploadUCloudPrivateKey: '',
-    uploadUCloudBucketHost: 'api.ucloud.cn',
-    uploadUCloudBucketName: '',
-    uploadUCloudFileHost: 'cn-bj.ufileos.com',
-    uploadUCloudEndpoint: '',
-    uploadCosSecretId: '',
-    uploadCosSecretKey: '',
-    uploadCosBucketURL: '',
-    uploadCosPath: '',
-    uploadOssSecretId: '',
-    uploadOssSecretKey: '',
-    uploadOssEndpoint: '',
-    uploadOssBucketURL: '',
-    uploadOssPath: '',
-    uploadOssBucket: '',
-    uploadQiNiuAccessKey: '',
-    uploadQiNiuSecretKey: '',
-    uploadQiNiuDomain: '',
-    uploadQiNiuPath: '',
-    uploadQiNiuBucket: '',
-    uploadMinioAccessKey: '',
-    uploadMinioSecretKey: '',
-    uploadMinioEndpoint: '',
-    uploadMinioUseSSL: 2,
-    uploadMinioPath: '',
-    uploadMinioBucket: '',
-    uploadMinioDomain: '',
-  });
+/** 默认选项卡 */
+const defaultTabName = "local";
+/** 选项卡名称 */
+const tabName = ref<string>(defaultTabName);
 
-  function formSubmit() {
-    formRef.value.validate((errors) => {
-      if (!errors) {
-        updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
-          message.success('更新成功');
-          load();
-        });
-      } else {
-        message.error('验证失败，请填写完整信息');
-      }
-    });
+const formValue = ref({
+  uploadDrive: defaultTabName,
+  uploadImageSize: 2,
+  uploadImageType: "",
+  uploadFileSize: 10,
+  uploadFileType: "",
+  uploadLocalPath: "",
+  uploadUCloudPath: "",
+  uploadUCloudPublicKey: "",
+  uploadUCloudPrivateKey: "",
+  uploadUCloudBucketHost: "api.ucloud.cn",
+  uploadUCloudBucketName: "",
+  uploadUCloudFileHost: "cn-bj.ufileos.com",
+  uploadUCloudEndpoint: "",
+  uploadCosSecretId: "",
+  uploadCosSecretKey: "",
+  uploadCosBucketURL: "",
+  uploadCosPath: "",
+  uploadOssSecretId: "",
+  uploadOssSecretKey: "",
+  uploadOssEndpoint: "",
+  uploadOssBucketURL: "",
+  uploadOssPath: "",
+  uploadOssBucket: "",
+  uploadQiNiuAccessKey: "",
+  uploadQiNiuSecretKey: "",
+  uploadQiNiuDomain: "",
+  uploadQiNiuPath: "",
+  uploadQiNiuBucket: "",
+});
+/** 监听类型变化,同步到选项卡中 */
+watch(
+  () => formValue.value.uploadDrive,
+  (uploadDrive: string) => {
+    tabName.value = uploadDrive;
   }
+);
 
-  onMounted(async () => {
-    load();
-    await loadOptions();
+function formSubmit() {
+  formRef.value.validate((errors) => {
+    if (!errors) {
+      updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
+        message.success("更新成功");
+        load();
+      });
+    } else {
+      message.error("验证失败，请填写完整信息");
+    }
   });
+}
 
-  function load() {
-    show.value = true;
-    new Promise((_resolve, _reject) => {
-      getConfig({ group: group.value })
-        .then((res) => {
-          formValue.value = res.list;
-        })
-        .finally(() => {
-          show.value = false;
-        });
-    });
-  }
+onMounted(async () => {
+  load();
+  await loadOptions();
+});
 
-  async function loadOptions() {
-    options.value = await Dicts({
-      types: ['config_upload_drive'],
-    });
-  }
+function load() {
+  show.value = true;
+  new Promise((_resolve, _reject) => {
+    getConfig({ group: group.value })
+      .then((res) => {
+        formValue.value = res.list;
+      })
+      .finally(() => {
+        show.value = false;
+      });
+  });
+}
+
+async function loadOptions() {
+  options.value = await Dicts({
+    types: ["config_upload_drive"],
+  });
+}
 </script>
diff --git a/web/src/views/system/config/system.vue b/web/src/views/system/config/system.vue
index cf0763e..8427ea1 100644
--- a/web/src/views/system/config/system.vue
+++ b/web/src/views/system/config/system.vue
@@ -34,129 +34,153 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, toRefs } from 'vue';
-  import BasicSetting from './BasicSetting.vue';
-  import RevealSetting from './RevealSetting.vue';
-  import EmailSetting from './EmailSetting.vue';
-  import ThemeSetting from './ThemeSetting.vue';
-  import CashSetting from './CashSetting.vue';
-  import UploadSetting from './UploadSetting.vue';
-  import GeoSetting from './GeoSetting.vue';
-  import SmsSetting from './SmsSetting.vue';
-  import PaySetting from './PaySetting.vue';
-  import WechatSetting from './WechatSetting.vue';
-  import LoginSetting from './LoginSetting.vue';
-  const typeTabList = [
-    {
-      name: '基本设置',
-      desc: '系统常规设置',
-      key: 1,
-    },
-    // {
-    //   name: '主题设置',
-    //   desc: '系统主题设置',
-    //   key: 2,
-    // },
-    // {
-    //   name: '显示设置',
-    //   desc: '系统显示设置',
-    //   key: 3,
-    // },
-    {
-      name: '邮件设置',
-      desc: '系统邮件设置',
-      key: 4,
-    },
-    {
-      name: '短信配置',
-      desc: '短信验证码平台',
-      key: 5,
-    },
-    {
-      name: '登录注册',
-      desc: '登录注册配置',
-      key: 6,
-    },
-    {
-      name: '提现配置',
-      desc: '管理员提现规则配置',
-      key: 7,
-    },
-    {
-      name: '云存储',
-      desc: '配置上传文件驱动',
-      key: 8,
-    },
-    {
-      name: '地理位置',
-      desc: '配置地理位置工具',
-      key: 9,
-    },
-    {
-      name: '支付配置',
-      desc: '支付宝/微信/QQ支付配置等',
-      key: 10,
-    },
-    {
-      name: '微信配置',
-      desc: '公众号/开放平台/小程序配置等',
-      key: 11,
-    },
-  ];
-  export default defineComponent({
-    components: {
-      BasicSetting,
-      RevealSetting,
-      EmailSetting,
-      ThemeSetting,
-      CashSetting,
-      UploadSetting,
-      GeoSetting,
-      SmsSetting,
-      PaySetting,
-      WechatSetting,
-      LoginSetting,
-    },
-    setup() {
-      const state = reactive({
-        type: 1,
-        typeTitle: '基本设置',
-      });
+import { defineAsyncComponent, defineComponent, reactive, toRefs } from "vue";
 
-      function switchType(e) {
-        state.type = e.key;
-        state.typeTitle = e.name;
-      }
-
-      return {
-        ...toRefs(state),
-        switchType,
-        typeTabList,
-      };
-    },
+/** 异步加载的组件，用到的时候再加载组件 */
+const BasicSetting = defineAsyncComponent(() => {
+    return import("./BasicSetting.vue");
+  }),
+  RevealSetting = defineAsyncComponent(() => {
+    return import("./RevealSetting.vue");
+  }),
+  EmailSetting = defineAsyncComponent(() => {
+    return import("./EmailSetting.vue");
+  }),
+  ThemeSetting = defineAsyncComponent(() => {
+    return import("./ThemeSetting.vue");
+  }),
+  CashSetting = defineAsyncComponent(() => {
+    return import("./CashSetting.vue");
+  }),
+  UploadSetting = defineAsyncComponent(() => {
+    return import("./UploadSetting.vue");
+  }),
+  GeoSetting = defineAsyncComponent(() => {
+    return import("./GeoSetting.vue");
+  }),
+  SmsSetting = defineAsyncComponent(() => {
+    return import("./SmsSetting.vue");
+  }),
+  PaySetting = defineAsyncComponent(() => {
+    return import("./PaySetting.vue");
+  }),
+  WechatSetting = defineAsyncComponent(() => {
+    return import("./WechatSetting.vue");
+  }),
+  LoginSetting = defineAsyncComponent(() => {
+    return import("./LoginSetting.vue");
   });
+const typeTabList = [
+  {
+    name: "基本设置",
+    desc: "系统常规设置",
+    key: 1,
+  },
+  // {
+  //   name: '主题设置',
+  //   desc: '系统主题设置',
+  //   key: 2,
+  // },
+  // {
+  //   name: '显示设置',
+  //   desc: '系统显示设置',
+  //   key: 3,
+  // },
+  {
+    name: "邮件设置",
+    desc: "系统邮件设置",
+    key: 4,
+  },
+  {
+    name: "短信配置",
+    desc: "短信验证码平台",
+    key: 5,
+  },
+  {
+    name: "登录注册",
+    desc: "登录注册配置",
+    key: 6,
+  },
+  {
+    name: "提现配置",
+    desc: "管理员提现规则配置",
+    key: 7,
+  },
+  {
+    name: "云存储",
+    desc: "配置上传文件驱动",
+    key: 8,
+  },
+  {
+    name: "地理位置",
+    desc: "配置地理位置工具",
+    key: 9,
+  },
+  {
+    name: "支付配置",
+    desc: "支付宝/微信/QQ支付配置等",
+    key: 10,
+  },
+  {
+    name: "微信配置",
+    desc: "公众号/开放平台/小程序配置等",
+    key: 11,
+  },
+];
+export default defineComponent({
+  components: {
+    BasicSetting,
+    RevealSetting,
+    EmailSetting,
+    ThemeSetting,
+    CashSetting,
+    UploadSetting,
+    GeoSetting,
+    SmsSetting,
+    PaySetting,
+    WechatSetting,
+    LoginSetting,
+  },
+  setup() {
+    const state = reactive({
+      type: 1,
+      typeTitle: "基本设置",
+    });
+
+    function switchType(e) {
+      state.type = e.key;
+      state.typeTitle = e.name;
+    }
+
+    return {
+      ...toRefs(state),
+      switchType,
+      typeTabList,
+    };
+  },
+});
 </script>
 <style lang="less" scoped>
-  .thing-cell {
-    margin: 0 -16px 10px;
-    padding: 5px 16px;
+.thing-cell {
+  margin: 0 -16px 10px;
+  padding: 5px 16px;
 
-    &:hover {
-      background: #f3f3f3;
-      cursor: pointer;
-    }
+  &:hover {
+    background: #f3f3f3;
+    cursor: pointer;
   }
+}
 
-  .thing-cell-on {
-    background: #f0faff;
+.thing-cell-on {
+  background: #f0faff;
+  color: #2d8cf0;
+
+  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
     color: #2d8cf0;
-
-    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
-      color: #2d8cf0;
-    }
-
-    &:hover {
-      background: #f0faff;
-    }
   }
+
+  &:hover {
+    background: #f0faff;
+  }
+}
 </style>