340 lines
13 KiB
Vue
340 lines
13 KiB
Vue
<template>
|
||
<div class="space-y-8">
|
||
<!-- 页面头部 -->
|
||
<div>
|
||
<h1 class="text-2xl font-bold text-gray-900">系统设置</h1>
|
||
<p class="mt-1 text-sm text-gray-600">管理系统的基本配置和参数</p>
|
||
</div>
|
||
|
||
<!-- 基本设置 -->
|
||
<div class="bg-white shadow rounded-lg">
|
||
<div class="px-4 py-5 sm:p-6">
|
||
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">基本设置</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">系统名称</label>
|
||
<input
|
||
v-model="settings.systemName"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入系统名称"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">系统描述</label>
|
||
<input
|
||
v-model="settings.systemDescription"
|
||
type="text"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入系统描述"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">管理员邮箱</label>
|
||
<input
|
||
v-model="settings.adminEmail"
|
||
type="email"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入管理员邮箱"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">联系电话</label>
|
||
<input
|
||
v-model="settings.contactPhone"
|
||
type="tel"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入联系电话"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 翻译设置 -->
|
||
<div class="bg-white shadow rounded-lg">
|
||
<div class="px-4 py-5 sm:p-6">
|
||
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">翻译设置</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">默认翻译费率（元/字）</label>
|
||
<input
|
||
v-model.number="settings.defaultRate"
|
||
type="number"
|
||
step="0.01"
|
||
min="0"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入默认费率"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">最低充值金额（元）</label>
|
||
<input
|
||
v-model.number="settings.minRecharge"
|
||
type="number"
|
||
step="0.01"
|
||
min="0"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入最低充值金额"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">支持的语言对</label>
|
||
<select
|
||
v-model="settings.supportedLanguages"
|
||
multiple
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="zh-en">中文-英文</option>
|
||
<option value="zh-ja">中文-日文</option>
|
||
<option value="zh-ko">中文-韩文</option>
|
||
<option value="en-ja">英文-日文</option>
|
||
<option value="en-ko">英文-韩文</option>
|
||
<option value="ja-ko">日文-韩文</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">质量等级</label>
|
||
<select
|
||
v-model="settings.qualityLevel"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="standard">标准</option>
|
||
<option value="professional">专业</option>
|
||
<option value="premium">高级</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用户管理设置 -->
|
||
<div class="bg-white shadow rounded-lg">
|
||
<div class="px-4 py-5 sm:p-6">
|
||
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">用户管理设置</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">新用户默认余额（元）</label>
|
||
<input
|
||
v-model.number="settings.defaultBalance"
|
||
type="number"
|
||
step="0.01"
|
||
min="0"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入默认余额"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">用户注册审核</label>
|
||
<select
|
||
v-model="settings.registrationApproval"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
>
|
||
<option value="auto">自动通过</option>
|
||
<option value="manual">手动审核</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">会话超时时间（分钟）</label>
|
||
<input
|
||
v-model.number="settings.sessionTimeout"
|
||
type="number"
|
||
min="1"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入超时时间"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">密码最小长度</label>
|
||
<input
|
||
v-model.number="settings.minPasswordLength"
|
||
type="number"
|
||
min="6"
|
||
max="20"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="请输入最小长度"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统维护 -->
|
||
<div class="bg-white shadow rounded-lg">
|
||
<div class="px-4 py-5 sm:p-6">
|
||
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">系统维护</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h4 class="text-sm font-medium text-gray-900">维护模式</h4>
|
||
<p class="text-sm text-gray-500">启用后系统将进入维护状态</p>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input
|
||
v-model="settings.maintenanceMode"
|
||
type="checkbox"
|
||
class="sr-only peer"
|
||
/>
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h4 class="text-sm font-medium text-gray-900">自动备份</h4>
|
||
<p class="text-sm text-gray-500">每日自动备份数据库</p>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input
|
||
v-model="settings.autoBackup"
|
||
type="checkbox"
|
||
class="sr-only peer"
|
||
/>
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h4 class="text-sm font-medium text-gray-900">邮件通知</h4>
|
||
<p class="text-sm text-gray-500">系统事件邮件提醒</p>
|
||
</div>
|
||
<label class="relative inline-flex items-center cursor-pointer">
|
||
<input
|
||
v-model="settings.emailNotifications"
|
||
type="checkbox"
|
||
class="sr-only peer"
|
||
/>
|
||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 保存按钮 -->
|
||
<div class="flex justify-end space-x-3">
|
||
<button
|
||
@click="resetSettings"
|
||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
|
||
>
|
||
重置
|
||
</button>
|
||
<button
|
||
@click="saveSettings"
|
||
:disabled="saving"
|
||
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||
>
|
||
{{ saving ? '保存中...' : '保存设置' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 页面元数据 - 确保使用默认布局
|
||
definePageMeta({
|
||
middleware: 'auth',
|
||
layout: 'default' // 明确指定使用默认布局
|
||
})
|
||
|
||
// 页面标题
|
||
useHead({
|
||
title: '系统设置 - 翻译管理系统'
|
||
})
|
||
|
||
// 响应式数据
|
||
const saving = ref(false)
|
||
|
||
// 设置数据
|
||
const settings = ref({
|
||
// 基本设置
|
||
systemName: '翻译管理系统',
|
||
systemDescription: '专业的翻译服务管理平台',
|
||
adminEmail: 'admin@system.com',
|
||
contactPhone: '400-123-4567',
|
||
|
||
// 翻译设置
|
||
defaultRate: 0.15,
|
||
minRecharge: 100,
|
||
supportedLanguages: ['zh-en', 'zh-ja'],
|
||
qualityLevel: 'professional',
|
||
|
||
// 用户管理设置
|
||
defaultBalance: 0,
|
||
registrationApproval: 'auto',
|
||
sessionTimeout: 30,
|
||
minPasswordLength: 8,
|
||
|
||
// 系统维护
|
||
maintenanceMode: false,
|
||
autoBackup: true,
|
||
emailNotifications: true
|
||
})
|
||
|
||
// 默认设置（用于重置）
|
||
const defaultSettings = {
|
||
systemName: '翻译管理系统',
|
||
systemDescription: '专业的翻译服务管理平台',
|
||
adminEmail: 'admin@system.com',
|
||
contactPhone: '400-123-4567',
|
||
defaultRate: 0.15,
|
||
minRecharge: 100,
|
||
supportedLanguages: ['zh-en', 'zh-ja'],
|
||
qualityLevel: 'professional',
|
||
defaultBalance: 0,
|
||
registrationApproval: 'auto',
|
||
sessionTimeout: 30,
|
||
minPasswordLength: 8,
|
||
maintenanceMode: false,
|
||
autoBackup: true,
|
||
emailNotifications: true
|
||
}
|
||
|
||
// 保存设置
|
||
const saveSettings = () => {
|
||
try {
|
||
if (process.client) {
|
||
localStorage.setItem('systemSettings', JSON.stringify(settings.value))
|
||
}
|
||
|
||
ElMessage.success('设置保存成功')
|
||
console.log('设置已保存:', settings.value)
|
||
} catch (error) {
|
||
console.error('保存设置失败:', error)
|
||
ElMessage.error('保存设置失败')
|
||
}
|
||
}
|
||
|
||
// 加载设置
|
||
const loadSettings = () => {
|
||
try {
|
||
if (process.client) {
|
||
const savedSettings = localStorage.getItem('systemSettings')
|
||
if (savedSettings) {
|
||
const parsed = JSON.parse(savedSettings)
|
||
settings.value = { ...settings.value, ...parsed }
|
||
console.log('设置已加载:', settings.value)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载设置失败:', error)
|
||
}
|
||
}
|
||
|
||
// 重置设置
|
||
const resetSettings = () => {
|
||
if (confirm('确定要重置所有设置到默认值吗？')) {
|
||
settings.value = { ...defaultSettings }
|
||
}
|
||
}
|
||
|
||
// 组件挂载时加载设置
|
||
onMounted(() => {
|
||
if (process.client) {
|
||
loadSettings()
|
||
}
|
||
})
|
||
</script>
|
||
|