X-Agents/web/src/views/Settings.vue

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useModelSettings } from './settings/useModelSettings'
import './settings/settings.css'
import './settings/settings-parsing.css'
import './settings/modelSettings.css'

// 当前选中的设置菜单
const activeMenu = ref('general')

// 导入 Model Settings 逻辑
const {
  models,
  modelsLoading,
  modelTypeOptions,
  providerOptions,
  showAddModelForm,
  showEditModelForm,
  newModelForm,
  editForm,
  testingConnection,
  connectionStatus,
  fetchModels,
  testConnection,
  addModel,
  cancelAddModel,
  deleteModel,
  openEditDialog,
  updateModel,
  cancelEditModel,
  testingEditConnection,
  editConnectionStatus,
  testConnectionEdit,
} = useModelSettings()

// 监听菜单切换，获取模型列表
watch(activeMenu, (newVal) => {
  if (newVal === 'modelSettings') {
    fetchModels()
  }
})

// 设置菜单列表
const menuItems = [
  { key: 'general', label: 'General', icon: 'fa-gear' },
  { key: 'members', label: 'Members', icon: 'fa-users' },
  { key: 'notifications', label: 'Notifications', icon: 'fa-bell' },
  { key: 'modelSettings', label: 'Model Settings', icon: 'fa-brain' },
  { key: 'parsing', label: 'Parsing', icon: 'fa-code' },
  { key: 'storage', label: 'Storage', icon: 'fa-database' },
]

// Model Options by Provider (for Parsing settings)
const modelOptionsByProvider: Record<string, { value: string; label: string }[]> = {
  'OpenAI': [
    { value: 'gpt-4o', label: 'GPT-4o' },
    { value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
    { value: 'gpt-4-turbo', label: 'GPT-4 Turbo' },
    { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo' },
  ],
  'Ollama': [
    { value: 'llama3', label: 'Llama 3' },
    { value: 'mistral', label: 'Mistral' },
    { value: 'codellama', label: 'CodeLlama' },
  ],
}

// General 设置表单
const generalForm = ref({
  name: 'Alex Smith',
  email: 'alex@gmail.com',
  password: '********',
  language: 'English',
  timezone: 'UTC +08:00 Beijing',
})

// 语言选项
const languageOptions = [
  { value: 'English', label: 'English' },
  { value: 'Chinese', label: '中文' },
  { value: 'Japanese', label: '日本語' },
]

// 时区选项
const timezoneOptions = [
  { value: 'UTC +08:00 Beijing', label: 'UTC +08:00 Beijing' },
  { value: 'UTC +00:00 London', label: 'UTC +00:00 London' },
  { value: 'UTC -05:00 New York', label: 'UTC -05:00 New York' },
  { value: 'UTC -08:00 Los Angeles', label: 'UTC -08:00 Los Angeles' },
]

// 保存设置
const saveChanges = () => {
  ElMessage.success('Settings saved successfully')
}

// 显示密码修改弹窗
const showChangePassword = () => {
  ElMessage.info('Password change dialog would open here')
}

// Parsing 配置表单
const parsingForm = ref({
  // LLM Provider
  provider: 'OpenAI',
  model: 'gpt-4o',
  apiKey: '',
  apiEndpoint: '',
  // 通用配置
  maxWorkers: 5,
  maxRetries: 3,
  requestTimeout: 60,
  enableProxy: false,
  httpProxyUrl: '',
  // 文本解析
  enableMultimodal: true,
  visionModel: 'gpt-4o',
  imageUnderstandingPrice: 0.00125,
  enableJsonMode: false,
  jsonModeModel: 'gpt-4o',
  // 文件解析
  enableFileParsing: true,
  enableTableRecognition: true,
  enableFormulaRecognition: true,
  ocrLanguage: 'en',
})

// Vision Model 选项
const visionModelOptions = [
  { value: 'gpt-4o', label: 'GPT-4o' },
  { value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
  { value: 'claude-3-5-sonnet', label: 'Claude 3.5 Sonnet' },
  { value: 'claude-3-haiku', label: 'Claude 3 Haiku' },
  { value: 'gemini-1.5-pro', label: 'Gemini 1.5 Pro' },
]

// OCR 语言选项
const ocrLanguageOptions = [
  { value: 'en', label: 'English' },
  { value: 'zh', label: 'Chinese' },
  { value: 'ja', label: 'Japanese' },
  { value: 'ko', label: 'Korean' },
  { value: 'auto', label: 'Auto Detect' },
]

// 保存 Parsing 设置
const saveParsingSettings = () => {
  ElMessage.success('Parsing settings saved successfully')
}

// Storage 配置表单
const storageForm = ref({
  storageType: 'local',
  // Local 存储
  localPath: './storage',
  // MinIO 存储
  minioEndpoint: 'localhost:9000',
  minioAccessKey: '',
  minioSecretKey: '',
  minioBucket: 'x-agents',
  minioUseSSL: false,
})

// 保存 Storage 设置
const saveStorageSettings = () => {
  ElMessage.success('Storage settings saved successfully')
}
</script>

<template>
  <div class="settings-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">Settings</h1>
    </div>

    <div class="settings-container">
      <!-- 左侧菜单 -->
      <nav class="settings-nav">
        <ul>
          <li
            v-for="item in menuItems"
            :key="item.key"
            :class="['nav-item', { active: activeMenu === item.key }]"
            @click="activeMenu = item.key"
          >
            <i :class="['fa-solid', item.icon]"></i>
            <span>{{ item.label }}</span>
          </li>
        </ul>
      </nav>

      <!-- 右侧内容 -->
      <div class="settings-content">
        <!-- General 设置 -->
        <div v-if="activeMenu === 'general'" class="settings-section">
          <h2 class="section-title">General Settings</h2>
          <p class="section-desc">Manage your personal information and preferences</p>

          <el-form :model="generalForm" label-position="top" class="settings-form">
            <el-form-item label="Name">
              <el-input v-model="generalForm.name" placeholder="Enter your name" />
            </el-form-item>

            <el-form-item label="Email">
              <el-input v-model="generalForm.email" placeholder="Enter your email" />
            </el-form-item>

            <el-form-item label="Password">
              <div class="password-field">
                <el-input v-model="generalForm.password" type="password" disabled />
                <el-button @click="showChangePassword">Change</el-button>
              </div>
            </el-form-item>

            <el-form-item label="Language">
              <el-select v-model="generalForm.language" placeholder="Select language">
                <el-option
                  v-for="lang in languageOptions"
                  :key="lang.value"
                  :label="lang.label"
                  :value="lang.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="Timezone">
              <el-select v-model="generalForm.timezone" placeholder="Select timezone">
                <el-option
                  v-for="tz in timezoneOptions"
                  :key="tz.value"
                  :label="tz.label"
                  :value="tz.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="saveChanges">Save Changes</el-button>
            </el-form-item>
          </el-form>
        </div>


        <!-- Parsing 设置 -->
        <div v-if="activeMenu === 'parsing'" class="settings-section">
          <h2 class="section-title">Parsing</h2>
          <p class="section-desc">Configure parsing settings</p>

          <!-- LLM Provider -->
          <div class="config-card">
            <h3 class="config-title">LLM Provider</h3>
            <el-form label-position="top" class="settings-form">
              <div class="form-row">
                <el-form-item label="Provider" class="flex-1">
                  <el-select v-model="parsingForm.provider" placeholder="Select provider">
                    <el-option v-for="p in providerOptions" :key="p.value" :label="p.label" :value="p.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="Model" class="flex-1">
                  <el-select v-model="parsingForm.model" placeholder="Select model">
                    <el-option v-for="m in modelOptionsByProvider[parsingForm.provider]" :key="m.value" :label="m.label" :value="m.value" />
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item label="API Key">
                <el-input v-model="parsingForm.apiKey" type="password" placeholder="Enter API key" show-password />
              </el-form-item>
              <el-form-item label="API Endpoint">
                <el-input v-model="parsingForm.apiEndpoint" placeholder="Enter API endpoint" />
              </el-form-item>
            </el-form>
          </div>

          <!-- Parsing Configuration -->
          <div class="config-card">
            <h3 class="config-title">Parsing Configuration</h3>

            <!-- 通用配置 -->
            <div class="config-section">
              <h4 class="config-subtitle">General</h4>
              <el-form label-position="top" class="settings-form">
                <div class="form-row">
                  <el-form-item label="Max Workers" class="flex-1">
                    <el-input-number v-model="parsingForm.maxWorkers" :min="1" :max="100" controls-position="right" />
                  </el-form-item>
                  <el-form-item label="Max Retries" class="flex-1">
                    <el-input-number v-model="parsingForm.maxRetries" :min="0" :max="10" controls-position="right" />
                  </el-form-item>
                  <el-form-item label="Request Timeout (seconds)" class="flex-1">
                    <el-input-number v-model="parsingForm.requestTimeout" :min="10" :max="600" controls-position="right" />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <el-form-item label="Enable HTTP Proxy" class="flex-1">
                    <el-switch v-model="parsingForm.enableProxy" class="parsing-switch" />
                  </el-form-item>
                  <el-form-item v-if="parsingForm.enableProxy" label="HTTP Proxy URL" class="flex-1">
                    <el-input v-model="parsingForm.httpProxyUrl" placeholder="http://proxy:8080" />
                  </el-form-item>
                </div>
              </el-form>
            </div>

            <!-- 文本解析 -->
            <div class="config-section">
              <h4 class="config-subtitle">Text Parsing</h4>
              <el-form label-position="top" class="settings-form">
                <div class="form-row">
                  <el-form-item label="Enable Multimodal" class="flex-1">
                    <el-switch v-model="parsingForm.enableMultimodal" class="parsing-switch" />
                  </el-form-item>
                  <el-form-item v-if="parsingForm.enableMultimodal" label="Vision Model" class="flex-1">
                    <el-select v-model="parsingForm.visionModel" placeholder="Select model">
                      <el-option v-for="m in visionModelOptions" :key="m.value" :label="m.label" :value="m.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="parsingForm.enableMultimodal" label="Image Understanding Price" class="flex-1">
                    <el-input v-model="parsingForm.imageUnderstandingPrice" placeholder="0.00125">
                      <template #append>$/1k tokens</template>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="form-row">
                  <el-form-item label="Enable JSON Mode" class="flex-1">
                    <el-switch v-model="parsingForm.enableJsonMode" class="parsing-switch" />
                  </el-form-item>
                  <el-form-item v-if="parsingForm.enableJsonMode" label="JSON Mode Model" class="flex-1">
                    <el-select v-model="parsingForm.jsonModeModel" placeholder="Select model">
                      <el-option v-for="m in visionModelOptions" :key="m.value" :label="m.label" :value="m.value" />
                    </el-select>
                  </el-form-item>
                </div>
              </el-form>
            </div>

            <!-- 文件解析 -->
            <div class="config-section">
              <h4 class="config-subtitle">File Parsing</h4>
              <el-form label-position="top" class="settings-form">
                <div class="form-row">
                  <el-form-item label="Enable File Parsing" class="flex-1">
                    <el-switch v-model="parsingForm.enableFileParsing" class="parsing-switch" />
                  </el-form-item>
                  <el-form-item label="Enable Table Recognition" class="flex-1">
                    <el-switch v-model="parsingForm.enableTableRecognition" class="parsing-switch" />
                  </el-form-item>
                  <el-form-item label="Enable Formula Recognition" class="flex-1">
                    <el-switch v-model="parsingForm.enableFormulaRecognition" class="parsing-switch" />
                  </el-form-item>
                </div>
                <el-form-item label="OCR Language">
                  <el-select v-model="parsingForm.ocrLanguage" placeholder="Select language">
                    <el-option v-for="lang in ocrLanguageOptions" :key="lang.value" :label="lang.label" :value="lang.value" />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 保存按钮 -->
          <div class="form-actions mt-6">
            <el-button type="primary" @click="saveParsingSettings">Save</el-button>
          </div>
        </div>

        <!-- Storage 设置 -->
        <div v-if="activeMenu === 'storage'" class="settings-section">
          <h2 class="section-title">Storage</h2>
          <p class="section-desc">Configure storage settings</p>

          <!-- Storage Type -->
          <div class="config-card">
            <h3 class="config-title">Storage Type</h3>
            <el-form label-position="top" class="settings-form">
              <el-form-item label="Storage Type">
                <el-select v-model="storageForm.storageType" placeholder="Select storage type">
                  <el-option label="Local" value="local" />
                  <el-option label="MinIO" value="minio" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <!-- Local Storage -->
          <div v-if="storageForm.storageType === 'local'" class="config-card">
            <h3 class="config-title">Local Storage</h3>
            <el-form label-position="top" class="settings-form">
              <el-form-item label="Storage Path">
                <el-input v-model="storageForm.localPath" placeholder="Enter local storage path" />
              </el-form-item>
            </el-form>
          </div>

          <!-- MinIO Storage -->
          <div v-if="storageForm.storageType === 'minio'" class="config-card">
            <h3 class="config-title">MinIO Storage</h3>
            <el-form label-position="top" class="settings-form">
              <el-form-item label="Endpoint">
                <el-input v-model="storageForm.minioEndpoint" placeholder="e.g., localhost:9000" />
              </el-form-item>
              <div class="form-row">
                <el-form-item label="Access Key" class="flex-1">
                  <el-input v-model="storageForm.minioAccessKey" placeholder="Enter access key" />
                </el-form-item>
                <el-form-item label="Secret Key" class="flex-1">
                  <el-input v-model="storageForm.minioSecretKey" type="password" placeholder="Enter secret key" show-password />
                </el-form-item>
              </div>
              <el-form-item label="Bucket">
                <el-input v-model="storageForm.minioBucket" placeholder="Enter bucket name" />
              </el-form-item>
              <el-form-item label="Use SSL">
                <el-switch v-model="storageForm.minioUseSSL" class="parsing-switch" />
              </el-form-item>
            </el-form>
          </div>

          <!-- 保存按钮 -->
          <div class="form-actions mt-6">
            <el-button type="primary" @click="saveStorageSettings">Save</el-button>
          </div>
        </div>

        <!-- Members 设置 -->
        <div v-if="activeMenu === 'members'" class="settings-section">
          <h2 class="section-title">Members</h2>
          <p class="section-desc">Manage team members</p>
        </div>

        <!-- Notifications 设置 -->
        <div v-if="activeMenu === 'notifications'" class="settings-section">
          <h2 class="section-title">Notifications</h2>
          <p class="section-desc">Configure notification preferences</p>
        </div>

        <!-- Model Settings 设置 -->
        <div v-if="activeMenu === 'modelSettings'" class="settings-section">
          <div class="flex justify-between items-center mb-6">
            <div>
              <h2 class="section-title">Model Settings</h2>
              <p class="section-desc">Configure AI model settings</p>
            </div>
            <el-button type="primary" class="add-model-btn" @click="showAddModelForm = true">
              <i class="fa-solid fa-plus mr-2"></i>
              Add New Model
            </el-button>
          </div>

          <!-- 模型列表 -->
          <div v-if="modelsLoading" class="loading-spinner">
            <i class="fa-solid fa-spinner"></i>
          </div>
          <table v-else class="model-table">
            <thead>
              <tr>
                <th>Model Name</th>
                <th class="text-center">Provider</th>
                <th class="text-center">Model</th>
                <th class="text-center">Model Type</th>
                <th class="text-center">Base URL</th>
                <th class="text-center">Status</th>
                <th class="text-center">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="model in models" :key="model.id" class="table-row">
                <td>
                  <span class="font-medium">{{ model.name }}</span>
                </td>
                <td class="text-center text-sm">
                  {{ model.provider }}
                </td>
                <td class="text-center text-sm">
                  {{ model.model }}
                </td>
                <td class="text-center">
                  <span class="model-type-tag" :class="model.model_type">{{ model.model_type }}</span>
                </td>
                <td class="text-center text-sm">
                  {{ model.base_url }}
                </td>
                <td class="text-center">
                  <span v-if="model.status === 'active'" class="status-active">Active</span>
                  <span v-else class="status-inactive">Inactive</span>
                </td>
                <td class="text-center">
                  <button class="btn-icon" title="Edit" @click="openEditDialog(model)">
                    <i class="fa-solid fa-pen"></i>
                  </button>
                  <button class="btn-icon" title="Delete" @click="deleteModel(model.id)">
                    <i class="fa-solid fa-trash"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>

          <!-- 新增模型弹窗 -->
          <el-dialog
            v-model="showAddModelForm"
            title="Add New Model"
            width="500px"
            :close-on-click-modal="false"
            class="add-model-dialog"
          >
            <p class="dialog-desc">Configure your model settings</p>

            <el-form label-position="top" class="settings-form">
              <el-form-item label="Model Name">
                <el-input v-model="newModelForm.name" placeholder="e.g., My GPT-4 Model" />
              </el-form-item>

              <el-form-item label="Model Type">
                <el-select v-model="newModelForm.modelType" placeholder="Select model type">
                  <el-option
                    v-for="type in modelTypeOptions"
                    :key="type.value"
                    :label="type.label"
                    :value="type.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="Provider">
                <el-select v-model="newModelForm.provider" placeholder="Select provider">
                  <el-option
                    v-for="provider in providerOptions"
                    :key="provider.value"
                    :label="provider.label"
                    :value="provider.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="Model">
                <el-input v-model="newModelForm.model" placeholder="e.g., gpt-4o (OpenAI) or llama3 (Ollama)" />
              </el-form-item>

              <el-form-item label="API Key">
                <el-input v-model="newModelForm.apiKey" type="password" placeholder="sk-xxxxx (required for OpenAI)" show-password />
              </el-form-item>

              <el-form-item label="Base URL">
                <el-input v-model="newModelForm.baseUrl" placeholder="https://api.openai.com/v1 (OpenAI) or http://localhost:11434 (Ollama)" />
              </el-form-item>
            </el-form>

            <template #footer>
              <div class="dialog-footer">
                <el-button text @click="cancelAddModel">Cancel</el-button>
                <el-button
                  :loading="testingConnection"
                  @click="testConnection"
                  class="test-btn"
                >
                  <i v-if="!testingConnection" class="fa-solid fa-plug"></i>
                  Test Connection
                </el-button>
                <el-button type="primary" @click="addModel">Confirm</el-button>
              </div>
              <div v-if="connectionStatus === 'success'" class="connection-status success">
                <i class="fa-solid fa-check-circle"></i> Connection successful
              </div>
              <div v-else-if="connectionStatus === 'error'" class="connection-status error">
                <i class="fa-solid fa-xmark-circle"></i> Connection failed
              </div>
            </template>
          </el-dialog>

          <!-- 编辑模型弹窗 -->
          <el-dialog
            v-model="showEditModelForm"
            title="Edit Model"
            width="500px"
            :close-on-click-modal="false"
            class="add-model-dialog"
          >
            <p class="dialog-desc">Update your model settings</p>

            <el-form label-position="top" class="settings-form">
              <el-form-item label="Model Name">
                <el-input v-model="editForm.name" placeholder="e.g., My GPT-4 Model" />
              </el-form-item>

              <el-form-item label="Provider">
                <el-select v-model="editForm.provider" placeholder="Select provider">
                  <el-option
                    v-for="option in providerOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="Model">
                <el-input v-model="editForm.model" placeholder="e.g., gpt-4, llama2" />
              </el-form-item>

              <el-form-item label="Model Type">
                <el-select v-model="editForm.modelType" placeholder="Select model type">
                  <el-option
                    v-for="option in modelTypeOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="API Key">
                <el-input v-model="editForm.apiKey" type="password" placeholder="sk-..." show-password />
              </el-form-item>

              <el-form-item label="Base URL">
                <el-input v-model="editForm.baseUrl" placeholder="e.g., https://api.openai.com/v1" />
              </el-form-item>
            </el-form>

            <template #footer>
              <div class="dialog-footer">
                <button class="test-btn" @click="cancelEditModel">Cancel</button>
                <el-button
                  :loading="testingEditConnection"
                  @click="testConnectionEdit"
                  class="test-btn"
                >
                  <i v-if="!testingEditConnection" class="fa-solid fa-plug"></i>
                  Test Connection
                </el-button>
                <el-button type="primary" @click="updateModel">Confirm</el-button>
              </div>
              <div v-if="editConnectionStatus === 'success'" class="connection-status success">
                <i class="fa-solid fa-check-circle"></i> Connection successful
              </div>
              <div v-if="editConnectionStatus === 'error'" class="connection-status error">
                <i class="fa-solid fa-xmark-circle"></i> Connection failed
              </div>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
/* Model Settings dialog - 最高优先级覆盖 */

/* 输入框 */
.add-model-dialog .el-input__wrapper {
  background-color: #171922 !important;
}

.add-model-dialog .el-input__wrapper input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.add-model-dialog .el-input__wrapper input::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

/* 选择框 */
.add-model-dialog .el-select__wrapper {
  background-color: #171922 !important;
}

.add-model-dialog .el-select__wrapper .el-select__selected-item {
  color: #ffffff !important;
}

.add-model-dialog .el-select__wrapper input::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

/* 未选中时的占位符文字 */
.add-model-dialog .el-select__placeholder {
  color: #9ca3af !important;
}
</style>