236 lines
9.4 KiB
Plaintext
236 lines
9.4 KiB
Plaintext
<template>
|
|
<view class="admin-page">
|
|
<view class="admin-sections">
|
|
<view class="admin-card settings-card">
|
|
<!-- 顶部导航标签 -->
|
|
<view class="tabs-container">
|
|
<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false" :enable-flex="true">
|
|
<view class="tabs-bar">
|
|
<view
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
class="tab-item"
|
|
:class="{ active: currentTab === index }"
|
|
@click="currentTab = index"
|
|
>
|
|
<text class="tab-text">{{ tab.name }}</text>
|
|
<view class="tab-line" v-if="currentTab === index"></view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 表单区域 -->
|
|
<view class="form-container">
|
|
<view v-if="isLoading" class="loading-state">
|
|
<text>加载配置中...</text>
|
|
</view>
|
|
|
|
<view v-else class="form-scroll-wrap">
|
|
<!-- 1. 基础配置 -->
|
|
<view v-if="currentTab === 0" class="form-content">
|
|
<view class="form-item">
|
|
<view class="form-label">站点开启:</view>
|
|
<view class="form-right">
|
|
<radio-group class="radio-group" @change="formData.site_open = parseInt(($event.detail.value as string))">
|
|
<label class="radio-label"><radio value="1" :checked="formData.site_open == 1" color="#1890ff" />开启</label>
|
|
<label class="radio-label"><radio value="0" :checked="formData.site_open == 0" color="#1890ff" />关闭</label>
|
|
</radio-group>
|
|
<view class="form-tip">站点开启/关闭（用于升级等临时关闭）</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">网站名称:</view>
|
|
<view class="form-right">
|
|
<input class="form-input" v-model="formData.site_name" placeholder="请输入网站名称" />
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">网站地址:</view>
|
|
<view class="form-right">
|
|
<input class="form-input" v-model="formData.site_url" placeholder="请输入网站地址" />
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">联系电话:</view>
|
|
<view class="form-right">
|
|
<input class="form-input" v-model="formData.contact_phone" placeholder="请输入联系电话" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 2. 分享配置 -->
|
|
<view v-else-if="currentTab === 1" class="form-content">
|
|
<view class="form-item">
|
|
<view class="form-label">分享标题:</view>
|
|
<view class="form-right">
|
|
<input class="form-input" v-model="formData.share_title" />
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">分享简介:</view>
|
|
<view class="form-right">
|
|
<textarea class="form-textarea" v-model="formData.share_desc" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 3. LOGO配置 -->
|
|
<view v-else-if="currentTab === 2" class="form-content">
|
|
<view class="form-item">
|
|
<view class="form-label">后台登录LOGO:</view>
|
|
<view class="form-right">
|
|
<view class="upload-placeholder" @click="handleUpload('login_logo')">
|
|
<image v-if="formData.login_logo" :src="formData.login_logo" mode="aspectFit" class="logo-preview" />
|
|
<text v-else>上传图片</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 9. WAF配置 -->
|
|
<view v-else-if="currentTab === 8" class="form-content">
|
|
<view class="form-item">
|
|
<view class="form-label">WAF类型:</view>
|
|
<view class="form-right">
|
|
<radio-group class="radio-group" @change="formData.waf_type = parseInt(($event.detail.value as string))">
|
|
<label class="radio-label"><radio value="0" :checked="formData.waf_type == 0" color="#1890ff" />关闭</label>
|
|
<label class="radio-label"><radio value="1" :checked="formData.waf_type == 1" color="#1890ff" />拦截</label>
|
|
<label class="radio-label"><radio value="2" :checked="formData.waf_type == 2" color="#1890ff" />过滤</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-label">WAF规则:</view>
|
|
<view class="form-right">
|
|
<textarea class="form-textarea code-bg" v-model="formData.waf_config" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="submit-section">
|
|
<view class="form-label"></view>
|
|
<view class="form-right">
|
|
<button class="btn-submit" :disabled="isSaving" @click="handleSubmit">
|
|
<text class="btn-txt">{{ isSaving ? '保存中...' : '提交' }}</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</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 currentTab = ref(0)
|
|
const tabs = [
|
|
{ name: "基础配置" }, { name: "分享配置" }, { name: "LOGO配置" },
|
|
{ name: "自定义JS" }, { name: "地图配置" }, { name: "备案配置" },
|
|
{ name: "模块配置" }, { name: "远程登录" }, { name: "WAF配置" }
|
|
]
|
|
|
|
const isLoading = ref(false)
|
|
const isSaving = ref(false)
|
|
|
|
const formData = reactive({
|
|
site_open: 1,
|
|
site_name: "",
|
|
site_url: "",
|
|
msg_queue: 0,
|
|
contact_phone: "",
|
|
auth_key: "",
|
|
share_img: "",
|
|
share_title: "",
|
|
share_desc: "",
|
|
login_logo: "",
|
|
small_logo: "",
|
|
big_logo: "",
|
|
mobile_js: "",
|
|
admin_js: "",
|
|
pc_js: "",
|
|
tencent_map_key: "",
|
|
filing_no: "",
|
|
icp_link: "",
|
|
module_config: [] as string[],
|
|
remote_login_url: "",
|
|
waf_type: 0,
|
|
waf_config: ""
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadConfig()
|
|
})
|
|
|
|
async function loadConfig() {
|
|
isLoading.value = true
|
|
try {
|
|
const res = await getSystemConfig('system_settings')
|
|
if (res != null) {
|
|
Object.assign(formData, res as any)
|
|
}
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
isSaving.value = true
|
|
try {
|
|
const ok = await saveSystemConfig('system_settings', formData as UTSJSONObject, '系统全局配置项')
|
|
if (ok) {
|
|
uni.showToast({ title: "保存成功", icon: "success" })
|
|
} else {
|
|
uni.showToast({ title: "保存失败", icon: "none" })
|
|
}
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
|
|
const handleUpload = (field: string) => {
|
|
uni.showToast({ title: "上传功能开发中: " + field, icon: "none" })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-page { padding: 24px; background-color: #f0f2f5; min-height: 100vh; }
|
|
.settings-card { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); }
|
|
|
|
.tabs-container { margin-bottom: 30px; border-bottom: 1px solid #e8eaec; }
|
|
.tabs-scroll { width: 100%; white-space: nowrap; }
|
|
.tabs-bar { display: inline-flex; flex-direction: row; }
|
|
.tab-item { padding: 12px 24px; cursor: pointer; position: relative; }
|
|
.tab-text { font-size: 14px; color: #515a6e; }
|
|
.tab-item.active .tab-text { color: #1890ff; font-weight: bold; }
|
|
.tab-line { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #1890ff; }
|
|
|
|
.form-container { padding: 0 20px 40px; }
|
|
.loading-state { padding: 60px; text-align: center; color: #999; }
|
|
|
|
.form-item { display: flex; flex-direction: row; margin-bottom: 25px; align-items: flex-start; }
|
|
.form-label { width: 140px; font-size: 14px; color: #303133; text-align: right; padding-right: 20px; padding-top: 8px; flex-shrink: 0; }
|
|
.form-right { flex: 1; display: flex; flex-direction: column; }
|
|
|
|
.form-input { border: 1px solid #dcdfe6; width: 100%; max-width: 450px; height: 32px; padding: 0 12px; border-radius: 4px; font-size: 14px; }
|
|
.form-textarea { border: 1px solid #dcdfe6; width: 100%; max-width: 550px; height: 100px; padding: 8px 12px; border-radius: 4px; font-size: 14px; }
|
|
.code-bg { background-color: #f5f7fa; }
|
|
.form-tip { font-size: 12px; color: #c0c4cc; margin-top: 8px; }
|
|
|
|
.radio-group { display: flex; flex-direction: row; gap: 20px; height: 32px; align-items: center; }
|
|
.radio-label { display: flex; flex-direction: row; align-items: center; font-size: 14px; color: #606266; }
|
|
|
|
.upload-placeholder { width: 80px; height: 80px; border: 1px dashed #dcdfe6; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #909399; cursor: pointer; }
|
|
.logo-preview { width: 100%; height: 100%; }
|
|
|
|
.submit-section { display: flex; flex-direction: row; margin-top: 20px; }
|
|
.btn-submit { background-color: #1890ff; border: none; padding: 0 24px; height: 36px; border-radius: 4px; cursor: pointer; }
|
|
.btn-txt { color: #fff; font-size: 14px; }
|
|
.btn-submit[disabled] { opacity: 0.6; }
|
|
</style>
|