interpreter-admin/pages/settings.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>