187 lines
7.0 KiB
Plaintext
187 lines
7.0 KiB
Plaintext
<template>
|
||
<view class="admin-page">
|
||
<view class="page-header">
|
||
<view class="breadcrumb">
|
||
<text class="bc-item">设置</text>
|
||
<text class="bc-sep">/</text>
|
||
<text class="bc-item">接口配置</text>
|
||
<text class="bc-sep">/</text>
|
||
<text class="bc-item active">系统存储配置</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-card">
|
||
<view class="tabs-header">
|
||
<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false">
|
||
<view class="tabs-list">
|
||
<view
|
||
v-for="(item, index) in tabs"
|
||
:key="index"
|
||
class="tab-item"
|
||
:class="{ active: activeTab === index }"
|
||
@click="activeTab = index"
|
||
>
|
||
<text class="tab-text">{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="tab-body">
|
||
<view v-if="isLoading" class="loading-state">
|
||
<text>配置加载中...</text>
|
||
</view>
|
||
|
||
<!-- Tab 0: 储存配置 -->
|
||
<view v-else-if="activeTab === 0" class="config-view">
|
||
<view class="notice-box">
|
||
<view class="notice-content">
|
||
<text class="notice-line">上传图片时会生成缩略图</text>
|
||
<text class="notice-line">未设置按照系统默认生成，系统默认：大图800*800，中图300*300，小图150*150</text>
|
||
<text class="notice-line">水印只在上传图片时生成，原图，大中小缩略图都会按照比例存在。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-body">
|
||
<view class="form-row">
|
||
<text class="form-label">存储方式：</text>
|
||
<view class="form-control">
|
||
<radio-group class="storage-radio-group" @change="onStorageTypeChange">
|
||
<label class="radio-label" v-for="st in storageOptions" :key="st.value">
|
||
<radio :value="st.value" :checked="form.storageType === st.value" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
<text class="radio-text">{{ st.label }}</text>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-row mt-30">
|
||
<text class="form-label">是否开启缩略图：</text>
|
||
<view class="form-control">
|
||
<switch :checked="form.enableThumb" @change="onToggleThumb" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-row mt-30">
|
||
<text class="form-label">是否开启水印：</text>
|
||
<view class="form-control">
|
||
<switch :checked="form.enableWatermark" @change="onToggleWatermark" color="#2d8cf0" style="transform:scale(0.8)" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-footer mt-40">
|
||
<button class="save-btn" type="primary" :disabled="isSaving" @click="handleSave">
|
||
{{ isSaving ? '保存中...' : '保存' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他云存储 Tab 逻辑保持现有结构，数据由 backend 动态驱动 -->
|
||
<view v-else class="cloud-view">
|
||
<view class="empty-state">
|
||
<text class="empty-text">{{ tabs[activeTab] }} 详细配置请在“修改配置信息”中设置</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { getSystemConfig, saveSystemConfig } from "@/services/admin/systemConfigService.uts"
|
||
|
||
const tabs = ['储存配置', '七牛云储存', '阿里云储存', '腾讯云储存', '京东云储存', '华为云储存', '天翼云储存']
|
||
const activeTab = ref(0)
|
||
const isLoading = ref(false)
|
||
const isSaving = ref(false)
|
||
|
||
const storageOptions = [
|
||
{ label: '本地存储', value: 'local' },
|
||
{ label: '七牛云存储', value: 'qiniu' },
|
||
{ label: '阿里云存储', value: 'aliyun' },
|
||
{ label: '腾讯云存储', value: 'tencent' },
|
||
{ label: '京东云存储', value: 'jd' },
|
||
{ label: '华为云存储', value: 'huawei' },
|
||
{ label: '天翼云存储', value: 'tianyi' }
|
||
]
|
||
|
||
const form = reactive({
|
||
storageType: 'local',
|
||
enableThumb: false,
|
||
enableWatermark: false
|
||
})
|
||
|
||
onMounted(() => {
|
||
loadConfig()
|
||
})
|
||
|
||
async function loadConfig() {
|
||
isLoading.value = true
|
||
try {
|
||
const res = await getSystemConfig('storage_config')
|
||
if (res != null) {
|
||
Object.assign(form, res as any)
|
||
}
|
||
} finally {
|
||
isLoading.value = false
|
||
}
|
||
}
|
||
|
||
const onStorageTypeChange = (e : any) => {
|
||
form.storageType = e.detail.value as string
|
||
}
|
||
|
||
const onToggleThumb = (e : any) => {
|
||
form.enableThumb = e.detail.value as boolean
|
||
}
|
||
|
||
const onToggleWatermark = (e : any) => {
|
||
form.enableWatermark = e.detail.value as boolean
|
||
}
|
||
|
||
const handleSave = async () => {
|
||
isSaving.value = true
|
||
try {
|
||
const ok = await saveSystemConfig('storage_config', form as UTSJSONObject, '系统存储配置')
|
||
if (ok) {
|
||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||
}
|
||
} finally {
|
||
isSaving.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.admin-page { min-height: 100vh; background-color: #f5f7f9; padding: 20px; }
|
||
.breadcrumb { display: flex; flex-direction: row; margin-bottom: 20px; }
|
||
.bc-item { font-size: 14px; color: #999; }
|
||
.bc-item.active { color: #333; }
|
||
.bc-sep { margin: 0 8px; color: #ccc; }
|
||
.content-card { background-color: #ffffff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,21,41,.08); }
|
||
.tabs-header { border-bottom: 1px solid #f0f0f0; }
|
||
.tabs-scroll { white-space: nowrap; width: 100%; }
|
||
.tabs-list { display: flex; flex-direction: row; padding: 0 15px; }
|
||
.tab-item { padding: 15px 15px; cursor: pointer; position: relative; }
|
||
.tab-text { font-size: 14px; color: #666; }
|
||
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
|
||
.tab-item.active::after { content: ""; position: absolute; bottom: 0; left: 15px; right: 15px; height: 2px; background-color: #2d8cf0; }
|
||
.tab-body { padding: 20px; }
|
||
.loading-state { padding: 60px; text-align: center; color: #999; }
|
||
.notice-box { background-color: #fffaf3; border: 1px solid #ffebcc; padding: 15px 20px; border-radius: 4px; margin-bottom: 30px; }
|
||
.notice-line { font-size: 13px; color: #666; line-height: 1.8; display: block; }
|
||
.form-body { max-width: 800px; }
|
||
.form-row { display: flex; flex-direction: row; align-items: center; }
|
||
.form-label { width: 140px; font-size: 13px; color: #333; }
|
||
.storage-radio-group { display: flex; flex-direction: row; flex-wrap: wrap; }
|
||
.radio-label { display: flex; flex-direction: row; align-items: center; margin-right: 20px; margin-bottom: 10px; }
|
||
.radio-text { font-size: 13px; margin-left: 4px; color: #666; }
|
||
.save-btn { width: 80px; height: 32px; line-height: 32px; background-color: #2d8cf0; color: white; font-size: 13px; border-radius: 4px; }
|
||
.mt-30 { margin-top: 30px; }
|
||
.mt-40 { margin-top: 40px; }
|
||
.cloud-view { padding: 40px; text-align: center; }
|
||
.empty-text { color: #ccc; font-size: 14px; }
|
||
</style>
|