mirror of
https://github.com/bufanyun/hotgo.git
synced 2025-09-21 18:56:39 +08:00
335 lines
12 KiB
Vue
335 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<n-spin :show="show" description="请稍候...">
|
||
<n-form :label-width="100" :model="formValue" :rules="rules" ref="formRef">
|
||
<n-form-item label="默认驱动" path="uploadDrive">
|
||
<n-select
|
||
placeholder="默认驱动"
|
||
:options="options.config_upload_drive"
|
||
v-model:value="formValue.uploadDrive"
|
||
/>
|
||
</n-form-item>
|
||
|
||
<n-divider title-placement="left">上传限制</n-divider>
|
||
<n-form-item label="图片大小限制" path="uploadImageSize">
|
||
<n-input-number
|
||
:show-button="false"
|
||
placeholder="请输入"
|
||
v-model:value="formValue.uploadImageSize"
|
||
>
|
||
<template #suffix> MB</template>
|
||
</n-input-number>
|
||
</n-form-item>
|
||
<n-form-item label="图片类型限制" path="uploadImageType">
|
||
<n-input v-model:value="formValue.uploadImageType" placeholder="" />
|
||
</n-form-item>
|
||
|
||
<n-form-item label="文件大小限制" path="uploadFileSize">
|
||
<n-input-number
|
||
:show-button="false"
|
||
placeholder="请输入"
|
||
v-model:value="formValue.uploadFileSize"
|
||
>
|
||
<template #suffix> MB</template>
|
||
</n-input-number>
|
||
</n-form-item>
|
||
<n-form-item label="文件类型限制" path="uploadFileType">
|
||
<n-input v-model:value="formValue.uploadFileType" placeholder="" />
|
||
</n-form-item>
|
||
|
||
<n-divider title-placement="left">本地存储</n-divider>
|
||
<n-form-item label="本地存储路径" path="uploadLocalPath">
|
||
<n-input v-model:value="formValue.uploadLocalPath" placeholder="" />
|
||
<template #feedback>填对外访问的相对路径</template>
|
||
</n-form-item>
|
||
|
||
<n-divider title-placement="left">ucloud对象存储</n-divider>
|
||
<n-form-item label="公钥" path="uploadUCloudPublicKey">
|
||
<n-input
|
||
type="password"
|
||
v-model:value="formValue.uploadUCloudPublicKey"
|
||
show-password-on="click"
|
||
>
|
||
<template #password-visible-icon>
|
||
<n-icon :size="16" :component="GlassesOutline" />
|
||
</template>
|
||
<template #password-invisible-icon>
|
||
<n-icon :size="16" :component="Glasses" />
|
||
</template>
|
||
</n-input>
|
||
<template #feedback>获取地址：https://console.ucloud.cn/ufile/token</template>
|
||
</n-form-item>
|
||
|
||
<n-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>
|
||
</n-form-item>
|
||
|
||
<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
|
||
>
|
||
</n-form-item>
|
||
|
||
<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
|
||
>
|
||
</n-form-item>
|
||
|
||
<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-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>
|
||
<div>
|
||
<n-space>
|
||
<n-button type="primary" @click="formSubmit">保存更新</n-button>
|
||
</n-space>
|
||
</div>
|
||
</n-form>
|
||
</n-spin>
|
||
</div>
|
||
</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';
|
||
|
||
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 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:'',
|
||
});
|
||
|
||
function formSubmit() {
|
||
formRef.value.validate((errors) => {
|
||
if (!errors) {
|
||
updateConfig({ group: group.value, list: formValue.value }).then((_res) => {
|
||
message.success('更新成功');
|
||
load();
|
||
});
|
||
} else {
|
||
message.error('验证失败，请填写完整信息');
|
||
}
|
||
});
|
||
}
|
||
|
||
onMounted(async () => {
|
||
load();
|
||
await loadOptions();
|
||
});
|
||
|
||
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>
|