556 lines
19 KiB
Vue
556 lines
19 KiB
Vue
<template>
|
||
<div class="w-full animate-reveal">
|
||
<div class="mb-6">
|
||
<h1 class="text-2xl font-serif italic text-white">OSS配置管理</h1>
|
||
</div>
|
||
|
||
<!-- Tab导航 -->
|
||
<div class="mb-6 border-b border-white/10">
|
||
<div class="flex gap-4">
|
||
<button
|
||
v-for="tab in tabs"
|
||
:key="tab.value"
|
||
@click="switchTab(tab.value)"
|
||
:class="[
|
||
'px-4 py-2 text-sm font-medium transition-colors border-b-2',
|
||
activeTab === tab.value
|
||
? 'text-art-accent border-art-accent'
|
||
: 'text-art-muted border-transparent hover:text-white'
|
||
]"
|
||
>
|
||
{{ tab.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表单 -->
|
||
<div class="admin-card p-6">
|
||
<form @submit.prevent="saveOSSConfig" class="space-y-6">
|
||
<div class="space-y-2">
|
||
<label for="ossName" class="block text-xs font-medium text-art-muted uppercase tracking-wider">配置名称</label>
|
||
<input
|
||
type="text"
|
||
id="ossName"
|
||
v-model="ossForm.name"
|
||
required
|
||
class="admin-input"
|
||
:placeholder="`${getStorageTypeLabel(activeTab)}配置名称`"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="storageType" class="block text-xs font-medium text-art-muted uppercase tracking-wider">存储类型</label>
|
||
<input
|
||
type="text"
|
||
id="storageType"
|
||
:value="getStorageTypeLabel(activeTab)"
|
||
disabled
|
||
class="admin-input bg-white/5 text-art-muted cursor-not-allowed"
|
||
>
|
||
</div>
|
||
|
||
<!-- 阿里云OSS字段 -->
|
||
<template v-if="activeTab === 'aliyun'">
|
||
<div class="space-y-2">
|
||
<label for="ossAccessKeyId" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
OSS Access Key ID <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="ossAccessKeyId"
|
||
v-model="ossForm.ossAccessKeyId"
|
||
required
|
||
class="admin-input font-mono"
|
||
placeholder="OSS Access Key ID"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="ossAccessKeySecret" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
OSS Access Key Secret <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="password"
|
||
id="ossAccessKeySecret"
|
||
v-model="ossForm.ossAccessKeySecret"
|
||
required
|
||
class="admin-input font-mono"
|
||
placeholder="OSS Access Key Secret"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="ossEndpoint" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
OSS Endpoint <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="ossEndpoint"
|
||
v-model="ossForm.ossEndpoint"
|
||
required
|
||
class="admin-input"
|
||
placeholder="例如: https://oss-cn-beijing.aliyuncs.com"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="ossBucket" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
OSS Bucket <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="ossBucket"
|
||
v-model="ossForm.ossBucket"
|
||
required
|
||
class="admin-input"
|
||
placeholder="存储桶名称"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="ossDomain" class="block text-xs font-medium text-art-muted uppercase tracking-wider">OSS Domain</label>
|
||
<input
|
||
type="text"
|
||
id="ossDomain"
|
||
v-model="ossForm.ossDomain"
|
||
class="admin-input"
|
||
placeholder="例如: https://cdn.example.com"
|
||
>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 腾讯云COS字段 -->
|
||
<template v-if="activeTab === 'qcloud'">
|
||
<div class="space-y-2">
|
||
<label for="qcloudSecretId" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
QCloud Secret ID <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="qcloudSecretId"
|
||
v-model="ossForm.qcloudSecretId"
|
||
required
|
||
class="admin-input font-mono"
|
||
placeholder="QCloud Secret ID"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="qcloudSecretKey" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
QCloud Secret Key <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="password"
|
||
id="qcloudSecretKey"
|
||
v-model="ossForm.qcloudSecretKey"
|
||
required
|
||
class="admin-input font-mono"
|
||
placeholder="QCloud Secret Key"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="qcloudRegion" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
QCloud Region <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="qcloudRegion"
|
||
v-model="ossForm.qcloudRegion"
|
||
required
|
||
class="admin-input"
|
||
placeholder="例如: ap-beijing"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="qcloudBucket" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
QCloud Bucket <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="qcloudBucket"
|
||
v-model="ossForm.qcloudBucket"
|
||
required
|
||
class="admin-input"
|
||
placeholder="存储桶名称"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="qcloudDomain" class="block text-xs font-medium text-art-muted uppercase tracking-wider">QCloud Domain</label>
|
||
<input
|
||
type="text"
|
||
id="qcloudDomain"
|
||
v-model="ossForm.qcloudDomain"
|
||
class="admin-input"
|
||
placeholder="例如: https://cdn.example.com"
|
||
>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 七牛云字段 -->
|
||
<template v-if="activeTab === 'qiniu'">
|
||
<div class="space-y-2">
|
||
<label for="qiniuAccessKey" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
Qiniu Access Key <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="qiniuAccessKey"
|
||
v-model="ossForm.qiniuAccessKey"
|
||
required
|
||
class="admin-input font-mono"
|
||
placeholder="Qiniu Access Key"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="qiniuSecretKey" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
Qiniu Secret Key <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="password"
|
||
id="qiniuSecretKey"
|
||
v-model="ossForm.qiniuSecretKey"
|
||
required
|
||
class="admin-input font-mono"
|
||
placeholder="Qiniu Secret Key"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="qiniuBucket" class="block text-xs font-medium text-art-muted uppercase tracking-wider">
|
||
Qiniu Bucket <span class="text-red-400">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="qiniuBucket"
|
||
v-model="ossForm.qiniuBucket"
|
||
required
|
||
class="admin-input"
|
||
placeholder="存储桶名称"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="qiniuRegion" class="block text-xs font-medium text-art-muted uppercase tracking-wider">Qiniu Region</label>
|
||
<input
|
||
type="text"
|
||
id="qiniuRegion"
|
||
v-model="ossForm.qiniuRegion"
|
||
class="admin-input"
|
||
placeholder="例如: z0 (华东), z1 (华北), z2 (华南)"
|
||
>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label for="qiniuDomain" class="block text-xs font-medium text-art-muted uppercase tracking-wider">Qiniu Domain</label>
|
||
<input
|
||
type="text"
|
||
id="qiniuDomain"
|
||
v-model="ossForm.qiniuDomain"
|
||
class="admin-input"
|
||
placeholder="例如: https://cdn.example.com"
|
||
>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 本地存储不需要额外字段 -->
|
||
<div v-if="activeTab === 'local'" class="p-4 bg-white/5 rounded text-sm text-art-muted">
|
||
本地存储不需要配置额外的密钥信息
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<label class="flex items-center gap-2 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
v-model="ossForm.isActive"
|
||
:true-value="1"
|
||
:false-value="0"
|
||
class="w-4 h-4 rounded border-white/20 bg-white/5 text-art-accent focus:ring-art-accent"
|
||
>
|
||
<span class="text-sm text-art-muted">启用此配置</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="pt-4 flex justify-between items-center">
|
||
<button
|
||
v-if="currentConfig && !isDefaultConfig(currentConfig)"
|
||
type="button"
|
||
@click="deleteOSSConfig"
|
||
class="admin-btn-danger"
|
||
>
|
||
删除配置
|
||
</button>
|
||
<div v-else></div>
|
||
<div class="flex gap-3">
|
||
<button type="submit" class="admin-btn-primary" :disabled="isSubmitting">
|
||
{{ isSubmitting ? '保存中...' : (currentConfig ? '保存' : '创建') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, computed, watch } from 'vue'
|
||
import { getOSSConfigs, createOSSConfig, updateOSSConfig, deleteOSSConfig as deleteOSSConfigApi, OSSConfig } from '../../services/api'
|
||
import { useToast } from '../../composables/useToast'
|
||
|
||
const toast = useToast()
|
||
|
||
// Tab管理
|
||
const activeTab = ref<string>('local')
|
||
const tabs = [
|
||
{ value: 'local', label: '本地存储' },
|
||
{ value: 'aliyun', label: '阿里云' },
|
||
{ value: 'qcloud', label: '腾讯云' },
|
||
{ value: 'qiniu', label: '七牛云' }
|
||
]
|
||
|
||
// OSS配置管理
|
||
const ossConfigs = ref<OSSConfig[]>([])
|
||
const isSubmitting = ref(false)
|
||
|
||
const ossForm = ref({
|
||
id: 0,
|
||
name: '',
|
||
storageType: '',
|
||
// 阿里云OSS专用字段
|
||
ossAccessKeyId: '',
|
||
ossAccessKeySecret: '',
|
||
ossEndpoint: '',
|
||
ossBucket: '',
|
||
ossDomain: '',
|
||
// 腾讯云COS专用字段
|
||
qcloudSecretId: '',
|
||
qcloudSecretKey: '',
|
||
qcloudRegion: '',
|
||
qcloudBucket: '',
|
||
qcloudDomain: '',
|
||
// 七牛云专用字段
|
||
qiniuAccessKey: '',
|
||
qiniuSecretKey: '',
|
||
qiniuBucket: '',
|
||
qiniuRegion: '',
|
||
qiniuDomain: '',
|
||
isActive: 0 as number
|
||
})
|
||
|
||
// 存储类型选项
|
||
const storageTypeOptions = [
|
||
{ value: 'local', label: '本地存储' },
|
||
{ value: 'qcloud', label: '腾讯云COS' },
|
||
{ value: 'aliyun', label: '阿里云OSS' },
|
||
{ value: 'qiniu', label: '七牛云' }
|
||
]
|
||
|
||
// 获取存储类型标签
|
||
const getStorageTypeLabel = (type: string): string => {
|
||
const option = storageTypeOptions.find(opt => opt.value === type)
|
||
return option ? option.label : type
|
||
}
|
||
|
||
// 获取当前tab对应的配置
|
||
const currentConfig = computed(() => {
|
||
// 优先查找已启用的配置
|
||
const activeConfig = ossConfigs.value.find(c => c.storageType === activeTab.value && c.isActive === 1)
|
||
if (activeConfig) return activeConfig
|
||
// 如果没有已启用的，查找任意配置
|
||
return ossConfigs.value.find(c => c.storageType === activeTab.value)
|
||
})
|
||
|
||
// 判断是否为默认配置
|
||
const isDefaultConfig = (config: OSSConfig | undefined): boolean => {
|
||
if (!config) return false
|
||
const defaultNames = ['本地存储', '阿里云OSS', '腾讯云COS', '七牛云']
|
||
return defaultNames.includes(config.name)
|
||
}
|
||
|
||
// 切换Tab时加载对应配置
|
||
const switchTab = (tabValue: string) => {
|
||
activeTab.value = tabValue
|
||
loadConfigForTab()
|
||
}
|
||
|
||
// 加载当前tab的配置
|
||
const loadConfigForTab = () => {
|
||
const config = currentConfig.value
|
||
if (config) {
|
||
// 填充表单
|
||
ossForm.value = {
|
||
id: config.id,
|
||
name: config.name,
|
||
storageType: config.storageType,
|
||
ossAccessKeyId: (config as any).ossAccessKeyId === '***' ? '' : (config as any).ossAccessKeyId || '',
|
||
ossAccessKeySecret: (config as any).ossAccessKeySecret === '***' ? '' : (config as any).ossAccessKeySecret || '',
|
||
ossEndpoint: (config as any).ossEndpoint || '',
|
||
ossBucket: (config as any).ossBucket || '',
|
||
ossDomain: (config as any).ossDomain || '',
|
||
qcloudSecretId: (config as any).qcloudSecretId === '***' ? '' : (config as any).qcloudSecretId || '',
|
||
qcloudSecretKey: (config as any).qcloudSecretKey === '***' ? '' : (config as any).qcloudSecretKey || '',
|
||
qcloudRegion: (config as any).qcloudRegion || '',
|
||
qcloudBucket: (config as any).qcloudBucket || '',
|
||
qcloudDomain: (config as any).qcloudDomain || '',
|
||
qiniuAccessKey: (config as any).qiniuAccessKey === '***' ? '' : (config as any).qiniuAccessKey || '',
|
||
qiniuSecretKey: (config as any).qiniuSecretKey === '***' ? '' : (config as any).qiniuSecretKey || '',
|
||
qiniuBucket: (config as any).qiniuBucket || '',
|
||
qiniuRegion: (config as any).qiniuRegion || '',
|
||
qiniuDomain: (config as any).qiniuDomain || '',
|
||
isActive: config.isActive
|
||
}
|
||
} else {
|
||
// 清空表单，设置默认值
|
||
const defaultNames: Record<string, string> = {
|
||
local: '本地存储',
|
||
aliyun: '阿里云OSS',
|
||
qcloud: '腾讯云COS',
|
||
qiniu: '七牛云'
|
||
}
|
||
ossForm.value = {
|
||
id: 0,
|
||
name: defaultNames[activeTab.value] || '',
|
||
storageType: activeTab.value,
|
||
ossAccessKeyId: '',
|
||
ossAccessKeySecret: '',
|
||
ossEndpoint: '',
|
||
ossBucket: '',
|
||
ossDomain: '',
|
||
qcloudSecretId: '',
|
||
qcloudSecretKey: '',
|
||
qcloudRegion: '',
|
||
qcloudBucket: '',
|
||
qcloudDomain: '',
|
||
qiniuAccessKey: '',
|
||
qiniuSecretKey: '',
|
||
qiniuBucket: '',
|
||
qiniuRegion: '',
|
||
qiniuDomain: '',
|
||
isActive: activeTab.value === 'local' ? 1 : 0 // 本地存储默认启用
|
||
}
|
||
}
|
||
}
|
||
|
||
// OSS配置相关函数
|
||
const fetchOSSConfigs = async () => {
|
||
try {
|
||
ossConfigs.value = await getOSSConfigs()
|
||
|
||
// 设置默认tab：优先选择已启用的配置
|
||
const activeConfig = ossConfigs.value.find(c => c.isActive === 1)
|
||
if (activeConfig) {
|
||
activeTab.value = activeConfig.storageType
|
||
} else {
|
||
activeTab.value = 'local' // 默认本地存储
|
||
}
|
||
|
||
// 加载当前tab的配置
|
||
loadConfigForTab()
|
||
} catch (error) {
|
||
console.error('Error fetching OSS configs:', error)
|
||
toast.showToast('获取OSS配置失败', 'error')
|
||
}
|
||
}
|
||
|
||
const saveOSSConfig = async () => {
|
||
// 设置存储类型
|
||
ossForm.value.storageType = activeTab.value
|
||
|
||
// 验证必填字段
|
||
if (activeTab.value === 'aliyun') {
|
||
if (!ossForm.value.ossAccessKeyId || !ossForm.value.ossAccessKeySecret || !ossForm.value.ossEndpoint || !ossForm.value.ossBucket) {
|
||
toast.showToast('请填写所有必填字段', 'error')
|
||
return
|
||
}
|
||
} else if (activeTab.value === 'qcloud') {
|
||
if (!ossForm.value.qcloudSecretId || !ossForm.value.qcloudSecretKey || !ossForm.value.qcloudRegion || !ossForm.value.qcloudBucket) {
|
||
toast.showToast('请填写所有必填字段', 'error')
|
||
return
|
||
}
|
||
} else if (activeTab.value === 'qiniu') {
|
||
if (!ossForm.value.qiniuAccessKey || !ossForm.value.qiniuSecretKey || !ossForm.value.qiniuBucket) {
|
||
toast.showToast('请填写所有必填字段', 'error')
|
||
return
|
||
}
|
||
}
|
||
|
||
isSubmitting.value = true
|
||
try {
|
||
const updateData: any = {
|
||
name: ossForm.value.name,
|
||
storageType: ossForm.value.storageType,
|
||
isActive: ossForm.value.isActive
|
||
}
|
||
|
||
// 根据存储类型设置对应字段
|
||
if (activeTab.value === 'aliyun') {
|
||
updateData.ossAccessKeyId = ossForm.value.ossAccessKeyId
|
||
updateData.ossAccessKeySecret = ossForm.value.ossAccessKeySecret
|
||
updateData.ossEndpoint = ossForm.value.ossEndpoint
|
||
updateData.ossBucket = ossForm.value.ossBucket
|
||
updateData.ossDomain = ossForm.value.ossDomain || ''
|
||
} else if (activeTab.value === 'qcloud') {
|
||
updateData.qcloudSecretId = ossForm.value.qcloudSecretId
|
||
updateData.qcloudSecretKey = ossForm.value.qcloudSecretKey
|
||
updateData.qcloudRegion = ossForm.value.qcloudRegion
|
||
updateData.qcloudBucket = ossForm.value.qcloudBucket
|
||
updateData.qcloudDomain = ossForm.value.qcloudDomain || ''
|
||
} else if (activeTab.value === 'qiniu') {
|
||
updateData.qiniuAccessKey = ossForm.value.qiniuAccessKey
|
||
updateData.qiniuSecretKey = ossForm.value.qiniuSecretKey
|
||
updateData.qiniuBucket = ossForm.value.qiniuBucket
|
||
updateData.qiniuRegion = ossForm.value.qiniuRegion || ''
|
||
updateData.qiniuDomain = ossForm.value.qiniuDomain || ''
|
||
}
|
||
|
||
if (ossForm.value.id > 0) {
|
||
// 更新
|
||
await updateOSSConfig(ossForm.value.id, updateData)
|
||
toast.showToast('OSS配置更新成功', 'success')
|
||
} else {
|
||
// 创建
|
||
await createOSSConfig({
|
||
...updateData,
|
||
createdAt: '',
|
||
updatedAt: ''
|
||
})
|
||
toast.showToast('OSS配置创建成功', 'success')
|
||
}
|
||
|
||
await fetchOSSConfigs()
|
||
} catch (error: any) {
|
||
console.error('Error saving OSS config:', error)
|
||
toast.showToast(error.message || (ossForm.value.id > 0 ? '更新OSS配置失败' : '创建OSS配置失败'), 'error')
|
||
} finally {
|
||
isSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
const deleteOSSConfig = async () => {
|
||
if (!currentConfig.value) return
|
||
|
||
if (isDefaultConfig(currentConfig.value)) {
|
||
toast.showToast('默认配置不能删除', 'error')
|
||
return
|
||
}
|
||
|
||
if (confirm(`确定要删除这个OSS配置吗？`)) {
|
||
try {
|
||
await deleteOSSConfigApi(currentConfig.value.id)
|
||
toast.showToast('OSS配置删除成功', 'success')
|
||
await fetchOSSConfigs()
|
||
} catch (error: any) {
|
||
console.error('Error deleting OSS config:', error)
|
||
toast.showToast(error.message || '删除OSS配置失败', 'error')
|
||
}
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
fetchOSSConfigs()
|
||
})
|
||
</script>
|