mirror of
https://github.com/bufanyun/hotgo.git
synced 2025-01-23 02:40:23 +08:00
系统设置 - 管理配置 - 优化
1. 新增异步加载的组件，用到的时候再加载组件 2. 短信和云存存储 新增选卡功能，选中的方式，自动切换选项卡（之前的配置页面过长）
This commit is contained in:
tak
parent
90f0e85774
commit
dddb932a46
@ -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>
|
||||
}
|
||||
</script>
|
||||
@ -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="默认驱动"
|
||||
@ -36,262 +42,278 @@
|
||||
<n-form-item label="文件类型限制" path="uploadFileType">
|
||||
<n-input v-model:value="formValue.uploadFileType" placeholder="" />
|
||||
</n-form-item>
|
||||
<n-tabs
|
||||
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-form-item label="本地存储路径" path="uploadLocalPath">
|
||||
<n-input v-model:value="formValue.uploadLocalPath" placeholder="" />
|
||||
<template #feedback>填对外访问的相对路径</template>
|
||||
</n-form-item>
|
||||
</n-tab-pane>
|
||||
|
||||
<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-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>
|
||||
</n-form-item>
|
||||
|
||||
<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" />
|
||||
<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://console.ucloud.cn/ufile/token</template>
|
||||
</n-form-item>
|
||||
</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="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="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="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/bucket
|
||||
</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="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="存储路径" 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" />
|
||||
</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 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="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>
|
||||
</template>
|
||||
<n-tab-pane name="qiniu">
|
||||
<template #tab> 七牛云对象存储</template>
|
||||
<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>
|
||||
|
||||
<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="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-tab-pane name="minio">
|
||||
<template #tab> minio配置</template>
|
||||
<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-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>
|
||||
|
||||
<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-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="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>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
<div>
|
||||
<n-space>
|
||||
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||||
@ -303,102 +325,115 @@
|
||||
</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: "",
|
||||
uploadMinioAccessKey: "",
|
||||
uploadMinioSecretKey: "",
|
||||
uploadMinioEndpoint: "",
|
||||
uploadMinioUseSSL: 2,
|
||||
uploadMinioPath: "",
|
||||
uploadMinioBucket: "",
|
||||
uploadMinioDomain: "",
|
||||
});
|
||||
|
||||
/** 监听类型变化,同步到选项卡中 */
|
||||
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>
|
||||
|
||||
@ -34,18 +34,41 @@
|
||||
</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';
|
||||
import { defineAsyncComponent, defineComponent, reactive, toRefs } from "vue";
|
||||
/** 异步加载的组件，用到的时候再加载组件 */
|
||||
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: '基本设置',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user