feat(settings): create LLMTableRow component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-21 11:27:50 +08:00
parent cdde7e3bc9
commit d3749817b0
2 changed files with 368 additions and 3 deletions
--- a/frontend/src/components/settings/LLMTableRow.vue
+++ b/frontend/src/components/settings/LLMTableRow.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Eye, EyeOff, Play, ChevronDown, ChevronRight, Trash2 } from 'lucide-vue-next'
+import type { LLMModelConfig } from '@/api/settings'
+
+const props = defineProps<{
+  model: LLMModelConfig
+  isExpanded: boolean
+  isNew?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggle'): void
+  (e: 'update', data: LLMModelConfig): void
+  (e: 'delete'): void
+  (e: 'test', data: LLMModelConfig): void
+}>()
+
+const showApiKey = ref(false)
+
+const status = computed(() => {
+  if (!props.model.api_key || !props.model.model) return 'empty'
+  if (props.model.enabled) return 'available'
+  return 'unavailable'
+})
+
+const statusConfig = computed(() => ({
+  available: { icon: '●', color: '#10b981', label: '可用' },
+  unavailable: { icon: '○', color: '#6b7280', label: '不可用' },
+  empty: { icon: '⚠', color: '#ef4444', label: '未配置' }
+}[status.value]))
+
+function onProviderChange() {
+  const defaults: Record<string, string> = {
+    ollama: 'http://localhost:11434',
+    openai: 'https://api.openai.com/v1',
+    claude: 'https://api.anthropic.com',
+    deepseek: 'https://api.deepseek.com/v1'
+  }
+  if (!props.model.base_url || Object.values(defaults).includes(props.model.base_url)) {
+    emit('update', { ...props.model, base_url: defaults[props.model.provider] || '' })
+  }
+}
+</script>
+
+<template>
+  <div class="table-row" :class="{ expanded: isExpanded, 'is-new': isNew }">
+    <!-- 表格行（可点击展开） -->
+    <div class="row-summary" @click="emit('toggle')">
+      <div class="cell cell-toggle">
+        <ChevronDown v-if="isExpanded" :size="14" />
+        <ChevronRight v-else :size="14" />
+      </div>
+      <div class="cell cell-name">{{ model.name || '未命名' }}</div>
+      <div class="cell cell-provider">{{ model.provider }}</div>
+      <div class="cell cell-model">{{ model.model || '-' }}</div>
+      <div class="cell cell-status" :style="{ color: statusConfig.color }">
+        {{ statusConfig.icon }} {{ statusConfig.label }}
+      </div>
+      <div class="cell cell-actions" @click.stop>
+        <button class="icon-btn danger" @click="emit('delete')" title="删除">
+          <Trash2 :size="12" />
+        </button>
+      </div>
+    </div>
+
+    <!-- 展开的详情面板 -->
+    <div v-if="isExpanded" class="expand-panel">
+      <div class="form-row">
+        <div class="form-group">
+          <label>// PROVIDER</label>
+          <select v-model="model.provider" @change="onProviderChange">
+            <option value="openai">OpenAI</option>
+            <option value="claude">Claude</option>
+            <option value="ollama">Ollama</option>
+            <option value="deepseek">DeepSeek</option>
+            <option value="custom">Custom</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>// MODEL</label>
+          <input v-model="model.model" type="text" placeholder="gpt-4o" />
+        </div>
+      </div>
+      <div class="form-group">
+        <label>// BASE URL</label>
+        <input v-model="model.base_url" type="text" />
+      </div>
+      <div class="form-group">
+        <label>// API KEY</label>
+        <div class="input-with-toggle">
+          <input
+            v-model="model.api_key"
+            :type="showApiKey ? 'text' : 'password'"
+            placeholder="sk-..."
+          />
+          <button @click="showApiKey = !showApiKey">
+            <Eye v-if="!showApiKey" :size="14" />
+            <EyeOff v-else :size="14" />
+          </button>
+        </div>
+      </div>
+      <div class="panel-actions">
+        <button class="test-btn" @click="emit('test', model)">
+          <Play :size="12" /> 测试连接
+        </button>
+        <button
+          class="save-btn"
+          :disabled="status !== 'available'"
+          @click="emit('update', model)"
+        >
+          保存
+        </button>
+        <button class="cancel-btn" @click="emit('toggle')">取消</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.table-row {
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-md);
+  margin-bottom: 8px;
+  background: var(--bg-card);
+}
+
+.row-summary {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  cursor: pointer;
+}
+
+.row-summary:hover {
+  background: rgba(0,245,212,0.05);
+}
+
+.cell {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.cell-toggle { width: 30px; }
+.cell-name { flex: 1; min-width: 120px; }
+.cell-provider { width: 80px; }
+.cell-model { width: 120px; }
+.cell-status { width: 80px; }
+.cell-actions { width: 40px; text-align: right; }
+
+.expand-panel {
+  padding: 14px;
+  border-top: 1px solid var(--border-dim);
+  background: var(--bg-void);
+}
+
+.form-row {
+  display: flex;
+  gap: 14px;
+}
+
+.form-row .form-group {
+  flex: 1;
+}
+
+.form-group {
+  margin-bottom: 14px;
+}
+
+.form-group label {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.15em;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 8px 10px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.input-with-toggle {
+  display: flex;
+  gap: 8px;
+}
+
+.input-with-toggle input {
+  flex: 1;
+}
+
+.input-with-toggle button {
+  width: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-card);
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+}
+
+.panel-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+.test-btn, .save-btn, .cancel-btn {
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.test-btn {
+  background: transparent;
+  border: 1px solid rgba(0,245,212,0.3);
+  color: var(--accent-cyan);
+}
+
+.save-btn {
+  background: rgba(0,245,212,0.1);
+  border: 1px solid rgba(0,245,212,0.3);
+  color: var(--accent-cyan);
+}
+
+.save-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.cancel-btn {
+  background: transparent;
+  border: 1px solid var(--border-mid);
+  color: var(--text-dim);
+}
+
+.icon-btn {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid var(--border-mid);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+}
+
+.icon-btn.danger:hover {
+  border-color: var(--accent-red);
+  color: var(--accent-red);
+}
+</style>
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { settingsApi, type LLMConfig, type SchedulerConfig, type LLMModelConfig, type LLMProvider } from '@/api/settings'
-import { Save, Eye, EyeOff, Play, RotateCcw, Plus, Trash2, Copy, X } from 'lucide-vue-next'
+import LLMTableRow from '@/components/settings/LLMTableRow.vue'
+import { Save, Eye, EyeOff, Play, RotateCcw, Plus, Trash2, X, Check } from 'lucide-vue-next'

 // 状态
 const loading = ref(false)
 const saving = ref(false)
 const showApiKey = ref<Record<string, boolean>>({})
+const savingModel = ref<string | null>(null) // 当前正在保存的模型 key
+const modelSaveSuccess = ref<string | null>(null) // 刚刚保存成功的模型 key
 const toast = ref<{ show: boolean; message: string; type: 'success' | 'error' }>({
  show: false,
  message: '',
@@ -58,6 +61,19 @@ const isSchedulerDirty = computed(() => {
  return JSON.stringify(schedulerConfig.value) !== JSON.stringify(originalSchedulerConfig.value)
 })

+// 检查单个模型是否有未保存的更改
+function isModelDirty(type: string, index: number): boolean {
+  const original = originalLlmConfig.value[type as keyof LLMConfig]?.[index]
+  const current = llmConfig.value[type as keyof LLMConfig]?.[index]
+  if (!original || !current) return false
+  return JSON.stringify(original) !== JSON.stringify(current)
+}
+
+// 获取模型唯一标识
+function getModelKey(type: string, index: number): string {
+  return `${type}-${index}`
+}
+
 // 创建空的模型配置
 function createEmptyModel(type: string): LLMModelConfig {
  return {
@@ -162,6 +178,32 @@ async function saveLLM() {
  }
 }

+// 保存单个模型
+async function saveModel(type: string, index: number) {
+  const key = getModelKey(type, index)
+  savingModel.value = key
+  try {
+    // 发送完整的配置（包含该类型的所有模型）
+    await settingsApi.updateLLM(llmConfig.value)
+
+    // 更新原始配置（深拷贝当前完整配置）
+    originalLlmConfig.value = JSON.parse(JSON.stringify(llmConfig.value))
+
+    // 显示成功状态
+    modelSaveSuccess.value = key
+    setTimeout(() => {
+      if (modelSaveSuccess.value === key) {
+        modelSaveSuccess.value = null
+      }
+    }, 1500)
+  } catch (e: unknown) {
+    const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败'
+    showToast(msg, 'error')
+  } finally {
+    savingModel.value = null
+  }
+}
+
 // 测试 LLM 连接
 async function testLLM(type: string, config: LLMModelConfig) {
  try {
@@ -333,8 +375,21 @@ onMounted(loadSettings)
                </label>
              </div>
              <div class="model-actions">
-                <button class="icon-btn" @click="duplicateModel(type, index)" title="复制">
-                  <Copy :size="12" />
+                <button
+                  class="icon-btn"
+                  :class="{
+                    'has-changes': isModelDirty(type, index),
+                    'is-saving': savingModel === getModelKey(type, index),
+                    'is-saved': modelSaveSuccess === getModelKey(type, index)
+                  }"
+                  @click="saveModel(type, index)"
+                  :title="isModelDirty(type, index) ? '保存更改' : '无更改'"
+                  :disabled="savingModel === getModelKey(type, index)"
+                >
+                  <div v-if="savingModel === getModelKey(type, index)" class="btn-spinner-sm"></div>
+                  <Check v-else-if="modelSaveSuccess === getModelKey(type, index)" :size="12" />
+                  <Save v-else :size="12" />
+                  <span v-if="isModelDirty(type, index) && modelSaveSuccess !== getModelKey(type, index)" class="unsaved-dot"></span>
                </button>
                <button class="icon-btn danger" @click="removeModel(type, index)" title="删除">
                  <Trash2 :size="12" />
@@ -756,6 +811,46 @@ onMounted(loadSettings)
  color: var(--accent-red);
 }

+/* 保存按钮状态 */
+.icon-btn.has-changes {
+  border-color: var(--accent-cyan);
+  color: var(--accent-cyan);
+  position: relative;
+}
+
+.icon-btn.is-saving {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.icon-btn.is-saved {
+  border-color: #10b981;
+  color: #10b981;
+}
+
+.unsaved-dot {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  width: 6px;
+  height: 6px;
+  background: var(--accent-red);
+  border-radius: 50%;
+}
+
+.btn-spinner-sm {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--border-mid);
+  border-top-color: var(--accent-cyan);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
 .model-footer {
  margin-top: 10px;
  padding-top: 10px;