xinyin025/hotgo
1
0
Fork 0
mirror of https://github.com/bufanyun/hotgo.git synced 2025-10-09 03:26:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

系统设置 - 管理配置

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

415
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,105 +41,117 @@
</n-input-number> </n-input-number>
</n-form-item> </n-form-item>
<n-divider title-placement="left">阿里云</n-divider> <n-tabs type="segment" v-model:value="tabName">
<n-form-item label="AccessKeyID" path="smsAliYunAccessKeyID"> <n-tab-pane name="aliyun">
<n-input v-model:value="formValue.smsAliYunAccessKeyID" placeholder="" /> <template #tab> 阿里云 </template>
<template #feedback <n-divider title-placement="left"> 阿里云</n-divider>
>应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取</template <n-form-item label="AccessKeyID" path="smsAliYunAccessKeyID">
> <n-input v-model:value="formValue.smsAliYunAccessKeyID" placeholder="" />
</n-form-item> <template #feedback>
应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取
</template>
</n-form-item>
<n-form-item label="AccessKeySecret" path="smsAliYunAccessKeySecret"> <n-form-item label="AccessKeySecret" path="smsAliYunAccessKeySecret">
<n-input <n-input
type="password" type="password"
v-model:value="formValue.smsAliYunAccessKeySecret" v-model:value="formValue.smsAliYunAccessKeySecret"
show-password-on="click" show-password-on="click"
> >
<template #password-visible-icon> <template #password-visible-icon>
<n-icon :size="16" :component="GlassesOutline" /> <n-icon :size="16" :component="GlassesOutline" />
</template> </template>
<template #password-invisible-icon> <template #password-invisible-icon>
<n-icon :size="16" :component="Glasses" /> <n-icon :size="16" :component="Glasses" />
</template> </template>
</n-input> </n-input>
</n-form-item> </n-form-item>
<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"
key-placeholder="事件KEY" key-placeholder="事件KEY"
value-placeholder="模板CODE" value-placeholder="模板CODE"
/> />
</n-form-item> </n-form-item>
</n-tab-pane>
<n-divider title-placement="left">腾讯云</n-divider> <n-tab-pane name="tencent">
<n-form-item label="SecretId" path="smsTencentSecretId"> <template #tab> 腾讯云 </template>
<n-input v-model:value="formValue.smsTencentSecretId" placeholder="" /> <n-divider title-placement="left"> 腾讯云</n-divider>
<template #feedback <n-form-item label="SecretId" path="smsTencentSecretId">
>应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取</template <n-input v-model:value="formValue.smsTencentSecretId" placeholder="" />
> <template #feedback>
</n-form-item> 应用key和密钥你可以通过 https://ram.console.aliyun.com/manage/ak 获取
</template>
</n-form-item>
<n-form-item label="SecretKey" path="smsTencentSecretKey"> <n-form-item label="SecretKey" path="smsTencentSecretKey">
<n-input <n-input
type="password" type="password"
v-model:value="formValue.smsTencentSecretKey" v-model:value="formValue.smsTencentSecretKey"
show-password-on="click" show-password-on="click"
> >
<template #password-visible-icon> <template #password-visible-icon>
<n-icon :size="16" :component="GlassesOutline" /> <n-icon :size="16" :component="GlassesOutline" />
</template> </template>
<template #password-invisible-icon> <template #password-invisible-icon>
<n-icon :size="16" :component="Glasses" /> <n-icon :size="16" :component="Glasses" />
</template> </template>
</n-input> </n-input>
</n-form-item> </n-form-item>
<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>
</n-form-item> 查看地址：https://console.cloud.tencent.com/smsv2/csms-sign
</template>
</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"
key-placeholder="事件KEY" key-placeholder="事件KEY"
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,111 +215,125 @@
</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",
}, },
}; };
const formTestRef = ref<any>(); const formTestRef = ref<any>();
const formRef: any = ref(null); const formRef: any = ref(null);
const message = useMessage(); const message = useMessage();
const options = ref<Options>({ const options = ref<Options>({
config_sms_template: [], config_sms_template: [],
config_sms_drive: [], 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({ onMounted(() => {
smsDrive: 'aliyun', load();
smsMinInterval: 60, });
smsMaxIpLimit: 10,
smsCodeExpire: 600, async function load() {
smsAliYunAccessKeyID: '', show.value = true;
smsAliYunAccessKeySecret: '', await loadOptions();
smsAliYunSign: '', new Promise((_resolve, _reject) => {
smsAliYunTemplate: null, getConfig({ group: group.value })
smsTencentSecretId: '', .then((res) => {
smsTencentSecretKey: '', res.list.smsAliYunTemplate = JSON.parse(res.list.smsAliYunTemplate);
smsTencentEndpoint: 'sms.tencentcloudapi.com', res.list.smsTencentTemplate = JSON.parse(res.list.smsTencentTemplate);
smsTencentRegion: 'ap-guangzhou', formValue.value = res.list;
smsTencentAppId: '', })
smsTencentSign: '', .finally(() => {
smsTencentTemplate: null, show.value = false;
});
}); });
}
function sendTest() { async function loadOptions() {
showModal.value = true; 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; 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>

631
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="默认驱动"
@ -37,261 +43,223 @@
<n-input v-model:value="formValue.uploadFileType" placeholder="" /> <n-input v-model:value="formValue.uploadFileType" placeholder="" />
</n-form-item> </n-form-item>
<template v-if="formValue.uploadDrive == 'local'"> <n-tabs
<n-divider title-placement="left">本地存储</n-divider> type="card"
<n-form-item label="本地存储路径" path="uploadLocalPath"> tab-style="min-width: 120px; text-aling:center;"
<n-input v-model:value="formValue.uploadLocalPath" placeholder="" /> v-model:value="tabName"
<template #feedback>填对外访问的相对路径</template> >
</n-form-item> <n-tab-pane name="local">
</template> <template #tab> 本地存储</template>
<template v-if="formValue.uploadDrive == 'ucloud'"> <n-divider title-placement="left">本地存储</n-divider>
<n-divider title-placement="left">ucloud对象存储</n-divider> <n-form-item label="本地存储路径" path="uploadLocalPath">
<n-form-item label="公钥" path="uploadUCloudPublicKey"> <n-input v-model:value="formValue.uploadLocalPath" placeholder="" />
<n-input <template #feedback>填对外访问的相对路径</template>
type="password" </n-form-item>
v-model:value="formValue.uploadUCloudPublicKey" </n-tab-pane>
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-form-item label="私钥" path="uploadUCloudPrivateKey"> <n-tab-pane name="ucloud">
<n-input <template #tab> ucloud对象存储</template>
type="password" <n-divider title-placement="left">ucloud对象存储</n-divider>
v-model:value="formValue.uploadUCloudPrivateKey" <n-form-item label="公钥" path="uploadUCloudPublicKey">
show-password-on="click" <n-input
> type="password"
<template #password-visible-icon> v-model:value="formValue.uploadUCloudPublicKey"
<n-icon :size="16" :component="GlassesOutline" /> 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>
<template #password-invisible-icon> </n-form-item>
<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>
<template v-if="formValue.uploadDrive == 'cos'"> <n-form-item label="私钥" path="uploadUCloudPrivateKey">
<n-divider title-placement="left">腾讯云COS存储</n-divider> <n-input
<n-form-item label="secretId" path="uploadCosSecretId"> type="password"
<n-input v-model:value="formValue.uploadUCloudPrivateKey"
type="password" show-password-on="click"
v-model:value="formValue.uploadCosSecretId" >
show-password-on="click" <template #password-visible-icon>
> <n-icon :size="16" :component="GlassesOutline" />
<template #password-visible-icon> </template>
<n-icon :size="16" :component="GlassesOutline" /> <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>
<template #password-invisible-icon> </n-form-item>
<n-icon :size="16" :component="Glasses" /> </n-tab-pane>
</template>
</n-input>
<template #feedback
>子账号密钥获取地址：https://cloud.tencent.com/document/product/598/37140
</template>
</n-form-item>
<n-form-item label="secretKey" path="uploadCosSecretKey"> <n-tab-pane name="cos">
<n-input <template #tab> 腾讯云COS存储</template>
type="password" <n-divider title-placement="left">腾讯云COS存储</n-divider>
v-model:value="formValue.uploadCosSecretKey" <n-form-item label="secretId" path="uploadCosSecretId">
show-password-on="click" <n-input
> type="password"
<template #password-visible-icon> v-model:value="formValue.uploadCosSecretId"
<n-icon :size="16" :component="GlassesOutline" /> 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>
<template #password-invisible-icon> </n-form-item>
<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>
<template v-if="formValue.uploadDrive == 'oss'"> <n-form-item label="secretKey" path="uploadCosSecretKey">
<n-divider title-placement="left">阿里云OSS存储</n-divider> <n-input
<n-form-item label="AccessKey ID" path="uploadOssSecretId"> type="password"
<n-input v-model:value="formValue.uploadCosSecretKey"
type="password" show-password-on="click"
v-model:value="formValue.uploadOssSecretId" >
show-password-on="click" <template #password-visible-icon>
> <n-icon :size="16" :component="GlassesOutline" />
<template #password-visible-icon> </template>
<n-icon :size="16" :component="GlassesOutline" /> <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>
<template #password-invisible-icon> </n-form-item>
<n-icon :size="16" :component="Glasses" /> </n-tab-pane>
</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-tab-pane name="oss">
<n-input <template #tab> 阿里云OSS存储</template>
type="password" <n-divider title-placement="left">阿里云OSS存储</n-divider>
v-model:value="formValue.uploadOssSecretKey" <n-form-item label="AccessKey ID" path="uploadOssSecretId">
show-password-on="click" <n-input
> type="password"
<template #password-visible-icon> v-model:value="formValue.uploadOssSecretId"
<n-icon :size="16" :component="GlassesOutline" /> 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>
<template #password-invisible-icon> </n-form-item>
<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>
<template v-if="formValue.uploadDrive == 'qiniu'"> <n-form-item label="AccessKey Secret" path="uploadOssSecretKey">
<n-divider title-placement="left">七牛云对象存储</n-divider> <n-input
<n-form-item label="AccessKey" path="uploadQiNiuAccessKey"> type="password"
<n-input v-model:value="formValue.uploadOssSecretKey"
type="password" show-password-on="click"
v-model:value="formValue.uploadQiNiuAccessKey" >
show-password-on="click" <template #password-visible-icon>
> <n-icon :size="16" :component="GlassesOutline" />
<template #password-visible-icon> </template>
<n-icon :size="16" :component="GlassesOutline" /> <template #password-invisible-icon>
</template> <n-icon :size="16" :component="Glasses" />
<template #password-invisible-icon> </template>
<n-icon :size="16" :component="Glasses" /> </n-input>
</template> </n-form-item>
</n-input> <n-form-item label="Endpoint" path="uploadOssEndpoint">
<template #feedback>创建地址：https://portal.qiniu.com/user/key</template> <n-input v-model:value="formValue.uploadOssEndpoint" placeholder="" />
</n-form-item> <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-tab-pane name="qiniu">
<n-input <template #tab> 七牛云对象存储</template>
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">七牛云对象存储</n-divider>
<n-divider title-placement="left">minio配置</n-divider> <n-form-item label="AccessKey" path="uploadQiNiuAccessKey">
<n-form-item label="AccessKey ID" path="uploadMinioAccessKey"> <n-input
<n-input type="password"
type="password" v-model:value="formValue.uploadQiNiuAccessKey"
v-model:value="formValue.uploadMinioAccessKey" show-password-on="click"
show-password-on="click" >
> <template #password-visible-icon>
<template #password-visible-icon> <n-icon :size="16" :component="GlassesOutline" />
<n-icon :size="16" :component="GlassesOutline" /> </template>
</template> <template #password-invisible-icon>
<template #password-invisible-icon> <n-icon :size="16" :component="Glasses" />
<n-icon :size="16" :component="Glasses" /> </template>
</template> </n-input>
</n-input> <template #feedback>创建地址：https://portal.qiniu.com/user/key</template>
<template #feedback>相关文档：https://min.io/</template> </n-form-item>
</n-form-item>
<n-form-item label="AccessKey Secret" path="uploadMinioSecretKey"> <n-form-item label="SecretKey" path="uploadQiNiuSecretKey">
<n-input <n-input
type="password" type="password"
v-model:value="formValue.uploadMinioSecretKey" v-model:value="formValue.uploadQiNiuSecretKey"
show-password-on="click" show-password-on="click"
> >
<template #password-visible-icon> <template #password-visible-icon>
<n-icon :size="16" :component="GlassesOutline" /> <n-icon :size="16" :component="GlassesOutline" />
</template> </template>
<template #password-invisible-icon> <template #password-invisible-icon>
<n-icon :size="16" :component="Glasses" /> <n-icon :size="16" :component="Glasses" />
</template> </template>
</n-input> </n-input>
</n-form-item> </n-form-item>
<n-form-item label="Endpoint" path="uploadMinioEndpoint"> <n-form-item label="储存路径" path="uploadQiNiuPath">
<n-input v-model:value="formValue.uploadMinioEndpoint" placeholder="" /> <n-input v-model:value="formValue.uploadQiNiuPath" placeholder="" />
<template #feedback> Endpoint（不带http://和路径）</template> <template #feedback>填对对象存储中的相对路径</template>
</n-form-item> </n-form-item>
<n-form-item path="uploadMinioUseSSL"> <n-form-item label="存储空间名称" path="uploadQiNiuBucket">
<n-switch <n-input v-model:value="formValue.uploadQiNiuBucket" placeholder="" />
v-model:value="formValue.uploadMinioUseSSL" </n-form-item>
:checked-value="1" <n-form-item label="访问域名" path="uploadQiNiuDomain">
:unchecked-value="2" <n-input v-model:value="formValue.uploadQiNiuDomain" placeholder="" />
> </n-form-item>
<template #checked> 启用SSL</template> </n-tab-pane>
<template #unchecked> 禁用SSL</template> </n-tabs>
</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>
<div> <div>
<n-space> <n-space>
<n-button type="primary" @click="formSubmit">保存更新</n-button> <n-button type="primary" @click="formSubmit">保存更新</n-button>
@ -303,102 +271,107 @@
</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();
const rules = { const rules = {
uploadDrive: { uploadDrive: {
required: true, required: true,
message: '请输入默认驱动', message: "请输入默认驱动",
trigger: 'blur', trigger: "blur",
}, },
}; };
const options = ref<Options>({ const options = ref<Options>({
config_upload_drive: [], config_upload_drive: [],
}); });
const formValue = ref({ /** 默认选项卡 */
uploadDrive: 'local', const defaultTabName = "local";
uploadImageSize: 2, /** 选项卡名称 */
uploadImageType: '', const tabName = ref<string>(defaultTabName);
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: '',
});
function formSubmit() { const formValue = ref({
formRef.value.validate((errors) => { uploadDrive: defaultTabName,
if (!errors) { uploadImageSize: 2,
updateConfig({ group: group.value, list: formValue.value }).then((_res) => { uploadImageType: "",
message.success('更新成功'); uploadFileSize: 10,
load(); uploadFileType: "",
}); uploadLocalPath: "",
} else { uploadUCloudPath: "",
message.error('验证失败，请填写完整信息'); 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 () => { function formSubmit() {
load(); formRef.value.validate((errors) => {
await loadOptions(); if (!errors) {
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
message.success("更新成功");
load();
});
} else {
message.error("验证失败，请填写完整信息");
}
}); });
}
function load() { onMounted(async () => {
show.value = true; load();
new Promise((_resolve, _reject) => { await loadOptions();
getConfig({ group: group.value }) });
.then((res) => {
formValue.value = res.list;
})
.finally(() => {
show.value = false;
});
});
}
async function loadOptions() { function load() {
options.value = await Dicts({ show.value = true;
types: ['config_upload_drive'], 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> </script>

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

@ -34,129 +34,153 @@
</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';
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: '基本设置',
});
function switchType(e) { /** 异步加载的组件，用到的时候再加载组件 */
state.type = e.key; const BasicSetting = defineAsyncComponent(() => {
state.typeTitle = e.name; return import("./BasicSetting.vue");
} }),
RevealSetting = defineAsyncComponent(() => {
return { return import("./RevealSetting.vue");
...toRefs(state), }),
switchType, EmailSetting = defineAsyncComponent(() => {
typeTabList, 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.thing-cell { .thing-cell {
margin: 0 -16px 10px; margin: 0 -16px 10px;
padding: 5px 16px; padding: 5px 16px;
&:hover { &:hover {
background: #f3f3f3; background: #f3f3f3;
cursor: pointer; cursor: pointer;
}
} }
}
.thing-cell-on { .thing-cell-on {
background: #f0faff; background: #f0faff;
color: #2d8cf0;
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
color: #2d8cf0; color: #2d8cf0;
::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
color: #2d8cf0;
}
&:hover {
background: #f0faff;
}
} }
&:hover {
background: #f0faff;
}
}
</style> </style>