github_mirrors/hotgo
1
0
Fork 0
mirror of https://github.com/bufanyun/hotgo.git synced 2025-02-02 18:28:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

系统设置 - 管理配置 - 优化

Browse Source 
1. 新增异步加载的组件，用到的时候再加载组件
2. 短信和云存存储 新增选卡功能，选中的方式，自动切换选项卡（之前的配置页面过长）
This commit is contained in:
tak 2023-12-18 18:31:31 +08:00
parent 90f0e85774
commit dddb932a46
3 changed files with 629 additions and 534 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
web/src/views/system/config/SmsSetting.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<div> <div>
<n-spin :show="show" description="请稍候..."> <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-form-item label="默认驱动" path="smsDrive">
<n-select <n-select
placeholder="默认发送驱动" placeholder="默认发送驱动"
@ -35,12 +41,15 @@
</n-input-number> </n-input-number>
</n-form-item> </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-divider title-placement="left"> 阿里云</n-divider>
<n-form-item label="AccessKeyID" path="smsAliYunAccessKeyID"> <n-form-item label="AccessKeyID" path="smsAliYunAccessKeyID">
<n-input v-model:value="formValue.smsAliYunAccessKeyID" placeholder="" /> <n-input v-model:value="formValue.smsAliYunAccessKeyID" placeholder="" />
<template #feedback <template #feedback>
>应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取</template 应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取
> </template>
</n-form-item> </n-form-item>
<n-form-item label="AccessKeySecret" path="smsAliYunAccessKeySecret"> <n-form-item label="AccessKeySecret" path="smsAliYunAccessKeySecret">
@ -60,12 +69,12 @@
<n-form-item label="签名" path="smsAliYunSign"> <n-form-item label="签名" path="smsAliYunSign">
<n-input v-model:value="formValue.smsAliYunSign" placeholder="" /> <n-input v-model:value="formValue.smsAliYunSign" placeholder="" />
<template #feedback <template #feedback>
>申请地址：https://dysms.console.aliyun.com/domestic/text/sign</template 申请地址：https://dysms.console.aliyun.com/domestic/text/sign
> </template>
</n-form-item> </n-form-item>
<n-form-item label="短信模板" path="smsAliYunTemplate"> <n-form-item label="短信模板" path="smsAliYunTemplate" label-placement="top">
<n-dynamic-input <n-dynamic-input
v-model:value="formValue.smsAliYunTemplate" v-model:value="formValue.smsAliYunTemplate"
preset="pair" preset="pair"
@ -73,13 +82,16 @@
value-placeholder="模板CODE" value-placeholder="模板CODE"
/> />
</n-form-item> </n-form-item>
</n-tab-pane>
<n-tab-pane name="tencent">
<template #tab> 腾讯云 </template>
<n-divider title-placement="left"> 腾讯云</n-divider> <n-divider title-placement="left"> 腾讯云</n-divider>
<n-form-item label="SecretId" path="smsTencentSecretId"> <n-form-item label="SecretId" path="smsTencentSecretId">
<n-input v-model:value="formValue.smsTencentSecretId" placeholder="" /> <n-input v-model:value="formValue.smsTencentSecretId" placeholder="" />
<template #feedback <template #feedback>
>应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取</template 应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取
> </template>
</n-form-item> </n-form-item>
<n-form-item label="SecretKey" path="smsTencentSecretKey"> <n-form-item label="SecretKey" path="smsTencentSecretKey">
@ -99,34 +111,36 @@
<n-form-item label="接入地域域名" path="smsTencentEndpoint"> <n-form-item label="接入地域域名" path="smsTencentEndpoint">
<n-input v-model:value="formValue.smsTencentEndpoint" placeholder="" /> <n-input v-model:value="formValue.smsTencentEndpoint" placeholder="" />
<template #feedback <template #feedback>
>默认就近地域接入域名为 sms.tencentcloudapi.com 默认就近地域接入域名为 <n-text code>sms.tencentcloudapi.com</n-text>
，也支持指定地域域名访问，例如广州地域的域名为 ，也支持指定地域域名访问，例如广州地域的域名为
sms.ap-guangzhou.tencentcloudapi.com</template <n-text code>sms.ap-guangzhou.tencentcloudapi.com</n-text>
> </template>
</n-form-item> </n-form-item>
<n-form-item label="地域信息" path="smsTencentRegion"> <n-form-item label="地域信息" path="smsTencentRegion">
<n-input v-model:value="formValue.smsTencentRegion" placeholder="" /> <n-input v-model:value="formValue.smsTencentRegion" placeholder="" />
<template #feedback <template #feedback>
>支持的地域列表参考 支持的地域列表参考
https://cloud.tencent.com/document/api/382/52071#.E5.9C.B0.E5.9F.9F.E5.88.97.E8.A1.A8</template 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>
<n-form-item label="短信应用ID" path="smsTencentAppId"> <n-form-item label="短信应用ID" path="smsTencentAppId">
<n-input v-model:value="formValue.smsTencentAppId" placeholder="" /> <n-input v-model:value="formValue.smsTencentAppId" placeholder="" />
<template #feedback <template #feedback>
>查看地址：https://console.cloud.tencent.com/smsv2/app-manage</template 查看地址：https://console.cloud.tencent.com/smsv2/app-manage
> </template>
</n-form-item> </n-form-item>
<n-form-item label="签名" path="smsTencentSign"> <n-form-item label="签名" path="smsTencentSign">
<n-input v-model:value="formValue.smsTencentSign" placeholder="" /> <n-input v-model:value="formValue.smsTencentSign" placeholder="" />
<template #feedback>查看地址：https://console.cloud.tencent.com/smsv2/csms-sign</template> <template #feedback>
查看地址：https://console.cloud.tencent.com/smsv2/csms-sign
</template>
</n-form-item> </n-form-item>
<n-form-item label="短信模板" path="smsTencentTemplate"> <n-form-item label="短信模板" path="smsTencentTemplate" label-placement="top">
<n-dynamic-input <n-dynamic-input
v-model:value="formValue.smsTencentTemplate" v-model:value="formValue.smsTencentTemplate"
preset="pair" preset="pair"
@ -134,6 +148,10 @@
value-placeholder="模板ID" value-placeholder="模板ID"
/> />
</n-form-item> </n-form-item>
</n-tab-pane>
<!-- tencent -->
</n-tabs>
<div> <div>
<n-space> <n-space>
@ -161,7 +179,10 @@
class="py-4" class="py-4"
> >
<n-form-item label="事件模板" path="event"> <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>
<n-form-item label="手机号" path="mobile"> <n-form-item label="手机号" path="mobile">
@ -184,7 +205,9 @@
<template #action> <template #action>
<n-space> <n-space>
<n-button @click="() => (showModal = false)">关闭</n-button> <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> </n-space>
</template> </template>
</n-modal> </n-modal>
@ -192,24 +215,24 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted, watch } from "vue";
import { useMessage } from 'naive-ui'; import { useMessage } from "naive-ui";
import { getConfig, sendTestSms, updateConfig } from '@/api/sys/config'; import { getConfig, sendTestSms, updateConfig } from "@/api/sys/config";
import { Dicts } from '@/api/dict/dict'; import { Dicts } from "@/api/dict/dict";
import { Options } from '@/utils/hotgo'; import { Options } from "@/utils/hotgo";
import { GlassesOutline, Glasses } from '@vicons/ionicons5'; import { GlassesOutline, Glasses } from "@vicons/ionicons5";
const group = ref('sms'); const group = ref("sms");
const show = ref(false); const show = ref(false);
const showModal = ref(false); const showModal = ref(false);
const formBtnLoading = ref(false); const formBtnLoading = ref(false);
const formParams = ref({ mobile: '', event: '', code: '1234' }); const formParams = ref({ mobile: "", event: "", code: "1234" });
const rules = { const rules = {
smsDrive: { smsDrive: {
required: true, required: true,
message: '请输入默认驱动', message: "请输入默认驱动",
trigger: 'blur', trigger: "blur",
}, },
}; };
@ -222,24 +245,38 @@
config_sms_drive: [], config_sms_drive: [],
}); });
/** 默认选项卡 */
const defaultTabName = "aliyun";
/** 选项卡名称 */
const tabName = ref<string>(defaultTabName);
const formValue = ref({ const formValue = ref({
smsDrive: 'aliyun', smsDrive: defaultTabName,
smsMinInterval: 60, smsMinInterval: 60,
smsMaxIpLimit: 10, smsMaxIpLimit: 10,
smsCodeExpire: 600, smsCodeExpire: 600,
smsAliYunAccessKeyID: '', smsAliYunAccessKeyID: "",
smsAliYunAccessKeySecret: '', smsAliYunAccessKeySecret: "",
smsAliYunSign: '', smsAliYunSign: "",
smsAliYunTemplate: null, smsAliYunTemplate: null,
smsTencentSecretId: '', smsTencentSecretId: "",
smsTencentSecretKey: '', smsTencentSecretKey: "",
smsTencentEndpoint: 'sms.tencentcloudapi.com', smsTencentEndpoint: "sms.tencentcloudapi.com",
smsTencentRegion: 'ap-guangzhou', smsTencentRegion: "ap-guangzhou",
smsTencentAppId: '', smsTencentAppId: "",
smsTencentSign: '', smsTencentSign: "",
smsTencentTemplate: null, smsTencentTemplate: null,
}); });
/** 监听类型变化,同步到选项卡中 */
watch(
() => formValue.value.smsDrive,
(smsDrive: string) => {
console.error(smsDrive);
tabName.value = smsDrive;
}
);
function sendTest() { function sendTest() {
showModal.value = true; showModal.value = true;
formBtnLoading.value = false; formBtnLoading.value = false;
@ -249,11 +286,11 @@
formRef.value.validate((errors) => { formRef.value.validate((errors) => {
if (!errors) { if (!errors) {
updateConfig({ group: group.value, list: formValue.value }).then((_res) => { updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
message.success('更新成功'); message.success("更新成功");
load(); load();
}); });
} else { } else {
message.error('验证失败，请填写完整信息'); message.error("验证失败，请填写完整信息");
} }
}); });
} }
@ -280,7 +317,7 @@
async function loadOptions() { async function loadOptions() {
options.value = await Dicts({ options.value = await Dicts({
types: ['config_sms_template', 'config_sms_drive'], types: ["config_sms_template", "config_sms_drive"],
}); });
} }
@ -290,11 +327,11 @@
formTestRef.value.validate((errors) => { formTestRef.value.validate((errors) => {
if (!errors) { if (!errors) {
sendTestSms(formParams.value).then((_res) => { sendTestSms(formParams.value).then((_res) => {
message.success('发送成功'); message.success("发送成功");
showModal.value = false; showModal.value = false;
}); });
} else { } else {
message.error('请填写完整信息'); message.error("请填写完整信息");
} }
formBtnLoading.value = false; formBtnLoading.value = false;
}); });

167
web/src/views/system/config/UploadSetting.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<div> <div>
<n-spin :show="show" description="请稍候..."> <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-form-item label="默认驱动" path="uploadDrive">
<n-select <n-select
placeholder="默认驱动" placeholder="默认驱动"
@ -36,16 +42,22 @@
<n-form-item label="文件类型限制" path="uploadFileType"> <n-form-item label="文件类型限制" path="uploadFileType">
<n-input v-model:value="formValue.uploadFileType" placeholder="" /> <n-input v-model:value="formValue.uploadFileType" placeholder="" />
</n-form-item> </n-form-item>
<n-tabs
<template v-if="formValue.uploadDrive == 'local'"> type="card"
tab-style="min-width: 120px; text-aling:center;"
v-model:value="tabName"
>
<n-tab-pane name="local">
<template #tab> 本地存储</template>
<n-divider title-placement="left">本地存储</n-divider> <n-divider title-placement="left">本地存储</n-divider>
<n-form-item label="本地存储路径" path="uploadLocalPath"> <n-form-item label="本地存储路径" path="uploadLocalPath">
<n-input v-model:value="formValue.uploadLocalPath" placeholder="" /> <n-input v-model:value="formValue.uploadLocalPath" placeholder="" />
<template #feedback>填对外访问的相对路径</template> <template #feedback>填对外访问的相对路径</template>
</n-form-item> </n-form-item>
</template> </n-tab-pane>
<template v-if="formValue.uploadDrive == 'ucloud'"> <n-tab-pane name="ucloud">
<template #tab> ucloud对象存储</template>
<n-divider title-placement="left">ucloud对象存储</n-divider> <n-divider title-placement="left">ucloud对象存储</n-divider>
<n-form-item label="公钥" path="uploadUCloudPublicKey"> <n-form-item label="公钥" path="uploadUCloudPublicKey">
<n-input <n-input
@ -60,7 +72,9 @@
<n-icon :size="16" :component="Glasses" /> <n-icon :size="16" :component="Glasses" />
</template> </template>
</n-input> </n-input>
<template #feedback>获取地址：https://console.ucloud.cn/ufile/token</template> <template #feedback>
获取地址：https://console.ucloud.cn/ufile/token
</template>
</n-form-item> </n-form-item>
<n-form-item label="私钥" path="uploadUCloudPrivateKey"> <n-form-item label="私钥" path="uploadUCloudPrivateKey">
@ -94,11 +108,14 @@
</n-form-item> </n-form-item>
<n-form-item label="访问域名" path="uploadUCloudEndpoint"> <n-form-item label="访问域名" path="uploadUCloudEndpoint">
<n-input v-model:value="formValue.uploadUCloudEndpoint" placeholder="" /> <n-input v-model:value="formValue.uploadUCloudEndpoint" placeholder="" />
<template #feedback>格式，http://abc.com 或 https://abc.com，不可为空</template> <template #feedback>
</n-form-item> 格式，http://abc.com 或 https://abc.com，不可为空
</template> </template>
</n-form-item>
</n-tab-pane>
<template v-if="formValue.uploadDrive == 'cos'"> <n-tab-pane name="cos">
<template #tab> 腾讯云COS存储</template>
<n-divider title-placement="left">腾讯云COS存储</n-divider> <n-divider title-placement="left">腾讯云COS存储</n-divider>
<n-form-item label="secretId" path="uploadCosSecretId"> <n-form-item label="secretId" path="uploadCosSecretId">
<n-input <n-input
@ -113,8 +130,8 @@
<n-icon :size="16" :component="Glasses" /> <n-icon :size="16" :component="Glasses" />
</template> </template>
</n-input> </n-input>
<template #feedback <template #feedback>
>子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140 子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140
</template> </template>
</n-form-item> </n-form-item>
@ -138,13 +155,14 @@
</n-form-item> </n-form-item>
<n-form-item label="地域API" path="uploadCosPath"> <n-form-item label="地域API" path="uploadCosPath">
<n-input v-model:value="formValue.uploadCosPath" placeholder="" /> <n-input v-model:value="formValue.uploadCosPath" placeholder="" />
<template #feedback <template #feedback>
>控制台查看地址：https://console.cloud.tencent.com/cos5/bucket 控制台查看地址：https://console.cloud.tencent.com/cos5/bucket
</template> </template>
</n-form-item> </n-form-item>
</template> </n-tab-pane>
<template v-if="formValue.uploadDrive == 'oss'"> <n-tab-pane name="oss">
<template #tab> 阿里云OSS存储</template>
<n-divider title-placement="left">阿里云OSS存储</n-divider> <n-divider title-placement="left">阿里云OSS存储</n-divider>
<n-form-item label="AccessKey ID" path="uploadOssSecretId"> <n-form-item label="AccessKey ID" path="uploadOssSecretId">
<n-input <n-input
@ -159,7 +177,9 @@
<n-icon :size="16" :component="Glasses" /> <n-icon :size="16" :component="Glasses" />
</template> </template>
</n-input> </n-input>
<template #feedback>创建地址：https://ram.console.aliyun.com/manage/ak</template> <template #feedback>
创建地址：https://ram.console.aliyun.com/manage/ak
</template>
</n-form-item> </n-form-item>
<n-form-item label="AccessKey Secret" path="uploadOssSecretKey"> <n-form-item label="AccessKey Secret" path="uploadOssSecretKey">
@ -190,9 +210,10 @@
<n-form-item label="Bucket 域名" path="uploadOssBucketURL"> <n-form-item label="Bucket 域名" path="uploadOssBucketURL">
<n-input v-model:value="formValue.uploadOssBucketURL" placeholder="" /> <n-input v-model:value="formValue.uploadOssBucketURL" placeholder="" />
</n-form-item> </n-form-item>
</template> </n-tab-pane>
<template v-if="formValue.uploadDrive == 'qiniu'"> <n-tab-pane name="qiniu">
<template #tab> 七牛云对象存储</template>
<n-divider title-placement="left">七牛云对象存储</n-divider> <n-divider title-placement="left">七牛云对象存储</n-divider>
<n-form-item label="AccessKey" path="uploadQiNiuAccessKey"> <n-form-item label="AccessKey" path="uploadQiNiuAccessKey">
<n-input <n-input
@ -234,9 +255,9 @@
<n-form-item label="访问域名" path="uploadQiNiuDomain"> <n-form-item label="访问域名" path="uploadQiNiuDomain">
<n-input v-model:value="formValue.uploadQiNiuDomain" placeholder="" /> <n-input v-model:value="formValue.uploadQiNiuDomain" placeholder="" />
</n-form-item> </n-form-item>
</template> </n-tab-pane>
<n-tab-pane name="minio">
<template v-if="formValue.uploadDrive == 'minio'"> <template #tab> minio配置</template>
<n-divider title-placement="left">minio配置</n-divider> <n-divider title-placement="left">minio配置</n-divider>
<n-form-item label="AccessKey ID" path="uploadMinioAccessKey"> <n-form-item label="AccessKey ID" path="uploadMinioAccessKey">
<n-input <n-input
@ -291,7 +312,8 @@
<n-form-item label="对外访问域名" path="uploadMinioDomain"> <n-form-item label="对外访问域名" path="uploadMinioDomain">
<n-input v-model:value="formValue.uploadMinioDomain" placeholder="" /> <n-input v-model:value="formValue.uploadMinioDomain" placeholder="" />
</n-form-item> </n-form-item>
</template> </n-tab-pane>
</n-tabs>
<div> <div>
<n-space> <n-space>
<n-button type="primary" @click="formSubmit">保存更新</n-button> <n-button type="primary" @click="formSubmit">保存更新</n-button>
@ -303,14 +325,14 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref, watch } from "vue";
import { useMessage } from 'naive-ui'; import { useMessage } from "naive-ui";
import { getConfig, updateConfig } from '@/api/sys/config'; import { getConfig, updateConfig } from "@/api/sys/config";
import { Glasses, GlassesOutline } from '@vicons/ionicons5'; import { Glasses, GlassesOutline } from "@vicons/ionicons5";
import { Dicts } from '@/api/dict/dict'; import { Dicts } from "@/api/dict/dict";
import { Options } from '@/utils/hotgo'; import { Options } from "@/utils/hotgo";
const group = ref('upload'); const group = ref("upload");
const show = ref(false); const show = ref(false);
const formRef: any = ref(null); const formRef: any = ref(null);
const message = useMessage(); const message = useMessage();
@ -318,8 +340,8 @@
const rules = { const rules = {
uploadDrive: { uploadDrive: {
required: true, required: true,
message: '请输入默认驱动', message: "请输入默认驱动",
trigger: 'blur', trigger: "blur",
}, },
}; };
@ -327,53 +349,66 @@
config_upload_drive: [], config_upload_drive: [],
}); });
/** 默认选项卡 */
const defaultTabName = "local";
/** 选项卡名称 */
const tabName = ref<string>(defaultTabName);
const formValue = ref({ const formValue = ref({
uploadDrive: 'local', uploadDrive: defaultTabName,
uploadImageSize: 2, uploadImageSize: 2,
uploadImageType: '', uploadImageType: "",
uploadFileSize: 10, uploadFileSize: 10,
uploadFileType: '', uploadFileType: "",
uploadLocalPath: '', uploadLocalPath: "",
uploadUCloudPath: '', uploadUCloudPath: "",
uploadUCloudPublicKey: '', uploadUCloudPublicKey: "",
uploadUCloudPrivateKey: '', uploadUCloudPrivateKey: "",
uploadUCloudBucketHost: 'api.ucloud.cn', uploadUCloudBucketHost: "api.ucloud.cn",
uploadUCloudBucketName: '', uploadUCloudBucketName: "",
uploadUCloudFileHost: 'cn-bj.ufileos.com', uploadUCloudFileHost: "cn-bj.ufileos.com",
uploadUCloudEndpoint: '', uploadUCloudEndpoint: "",
uploadCosSecretId: '', uploadCosSecretId: "",
uploadCosSecretKey: '', uploadCosSecretKey: "",
uploadCosBucketURL: '', uploadCosBucketURL: "",
uploadCosPath: '', uploadCosPath: "",
uploadOssSecretId: '', uploadOssSecretId: "",
uploadOssSecretKey: '', uploadOssSecretKey: "",
uploadOssEndpoint: '', uploadOssEndpoint: "",
uploadOssBucketURL: '', uploadOssBucketURL: "",
uploadOssPath: '', uploadOssPath: "",
uploadOssBucket: '', uploadOssBucket: "",
uploadQiNiuAccessKey: '', uploadQiNiuAccessKey: "",
uploadQiNiuSecretKey: '', uploadQiNiuSecretKey: "",
uploadQiNiuDomain: '', uploadQiNiuDomain: "",
uploadQiNiuPath: '', uploadQiNiuPath: "",
uploadQiNiuBucket: '', uploadQiNiuBucket: "",
uploadMinioAccessKey: '', uploadMinioAccessKey: "",
uploadMinioSecretKey: '', uploadMinioSecretKey: "",
uploadMinioEndpoint: '', uploadMinioEndpoint: "",
uploadMinioUseSSL: 2, uploadMinioUseSSL: 2,
uploadMinioPath: '', uploadMinioPath: "",
uploadMinioBucket: '', uploadMinioBucket: "",
uploadMinioDomain: '', uploadMinioDomain: "",
}); });
/** 监听类型变化,同步到选项卡中 */
watch(
() => formValue.value.uploadDrive,
(uploadDrive: string) => {
tabName.value = uploadDrive;
}
);
function formSubmit() { function formSubmit() {
formRef.value.validate((errors) => { formRef.value.validate((errors) => {
if (!errors) { if (!errors) {
updateConfig({ group: group.value, list: formValue.value }).then((_res) => { updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
message.success('更新成功'); message.success("更新成功");
load(); load();
}); });
} else { } else {
message.error('验证失败，请填写完整信息'); message.error("验证失败，请填写完整信息");
} }
}); });
} }
@ -398,7 +433,7 @@
async function loadOptions() { async function loadOptions() {
options.value = await Dicts({ options.value = await Dicts({
types: ['config_upload_drive'], types: ["config_upload_drive"],
}); });
} }
</script> </script>

47
web/src/views/system/config/system.vue
View File

@ -34,18 +34,41 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'; import { defineAsyncComponent, defineComponent, reactive, toRefs } from "vue";
import BasicSetting from './BasicSetting.vue'; /** 异步加载的组件，用到的时候再加载组件 */
import RevealSetting from './RevealSetting.vue'; const BasicSetting = defineAsyncComponent(() => {
import EmailSetting from './EmailSetting.vue'; return import("./BasicSetting.vue");
import ThemeSetting from './ThemeSetting.vue'; }),
import CashSetting from './CashSetting.vue'; RevealSetting = defineAsyncComponent(() => {
import UploadSetting from './UploadSetting.vue'; return import("./RevealSetting.vue");
import GeoSetting from './GeoSetting.vue'; }),
import SmsSetting from './SmsSetting.vue'; EmailSetting = defineAsyncComponent(() => {
import PaySetting from './PaySetting.vue'; return import("./EmailSetting.vue");
import WechatSetting from './WechatSetting.vue'; }),
import LoginSetting from './LoginSetting.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 = [ const typeTabList = [
{ {
name: '基本设置', name: '基本设置',