From 393f74323324918877e8194d3bde63e9e76e161b Mon Sep 17 00:00:00 2001
From: kongweigen <421505648@qq.com>
Date: Thu, 15 Jan 2026 23:02:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=B8=80=E9=94=AE?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=EF=BC=9B=E6=96=B0=E5=A2=9E=E5=90=88=E6=88=90?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/common/AIConfigDialog.vue | 205 ++++++++++++++++++-
 web/src/types/ai.ts                          |   4 +
 web/src/views/drama/ProfessionalEditor.vue   |  59 +++---
 3 files changed, 224 insertions(+), 44 deletions(-)

diff --git a/web/src/components/common/AIConfigDialog.vue b/web/src/components/common/AIConfigDialog.vue
index 937e3db..35855bc 100644
--- a/web/src/components/common/AIConfigDialog.vue
+++ b/web/src/components/common/AIConfigDialog.vue
@@ -11,10 +11,16 @@
     <template #header>
       <div class="dialog-header">
         <span class="dialog-title">{{ $t('aiConfig.title') }}</span>
-        <el-button type="primary" size="small" @click="showCreateDialog">
-          <el-icon><Plus /></el-icon>
-          <span>{{ $t('aiConfig.addConfig') }}</span>
-        </el-button>
+        <div class="header-actions">
+          <el-button type="success" size="small" @click="showQuickSetupDialog">
+            <el-icon><MagicStick /></el-icon>
+            <span>一键配置火宝</span>
+          </el-button>
+          <el-button type="primary" size="small" @click="showCreateDialog">
+            <el-icon><Plus /></el-icon>
+            <span>{{ $t('aiConfig.addConfig') }}</span>
+          </el-button>
+        </div>
       </div>
     </template>
 
@@ -55,6 +61,52 @@
       </el-tab-pane>
     </el-tabs>
 
+    <!-- Quick Setup Dialog -->
+    <el-dialog
+      v-model="quickSetupVisible"
+      title="一键配置"
+      width="500px"
+      :close-on-click-modal="false"
+      append-to-body
+    >
+      <div class="quick-setup-info">
+        <p>将自动创建以下配置：</p>
+        <ul>
+          <li><strong>文本服务</strong>: {{ providerConfigs.text[1].models[0] }}</li>
+          <li><strong>图片服务</strong>: {{ providerConfigs.image[1].models[0] }}</li>
+          <li><strong>视频服务</strong>: {{ providerConfigs.video[1].models[0] }}</li>
+        </ul>
+        <p class="quick-setup-tip">Base URL: https://api.chatfire.site/v1</p>
+      </div>
+      <el-form label-width="80px">
+        <el-form-item label="API Key" required>
+          <el-input 
+            v-model="quickSetupApiKey" 
+            type="password" 
+            show-password
+            placeholder="请输入 ChatFire API Key"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="quick-setup-footer">
+          <a 
+            href="https://api.chatfire.site/login?inviteCode=C4453345" 
+            target="_blank"
+            class="register-link"
+          >
+            没有 API Key？点击注册
+          </a>
+          <div class="footer-buttons">
+            <el-button @click="quickSetupVisible = false">取消</el-button>
+            <el-button type="primary" @click="handleQuickSetup" :loading="quickSetupLoading">
+              确认配置
+            </el-button>
+          </div>
+        </div>
+      </template>
+    </el-dialog>
+
     <!-- Edit/Create Sub-Dialog -->
     <el-dialog
       v-model="editDialogVisible"
@@ -149,11 +201,22 @@
       </el-form>
 
       <template #footer>
-        <el-button @click="editDialogVisible = false">{{ $t('common.cancel') }}</el-button>
-        <el-button v-if="form.service_type === 'text'" @click="testConnection" :loading="testing">{{ $t('aiConfig.actions.test') }}</el-button>
-        <el-button type="primary" @click="handleSubmit" :loading="submitting">
-          {{ isEdit ? $t('common.save') : $t('common.create') }}
-        </el-button>
+        <div class="quick-setup-footer">
+          <a 
+            href="https://api.chatfire.site/login?inviteCode=C4453345" 
+            target="_blank"
+            class="register-link"
+          >
+            没有 API Key？点击注册
+          </a>
+          <div class="footer-buttons">
+            <el-button @click="editDialogVisible = false">{{ $t('common.cancel') }}</el-button>
+            <el-button v-if="form.service_type === 'text'" @click="testConnection" :loading="testing">{{ $t('aiConfig.actions.test') }}</el-button>
+            <el-button type="primary" @click="handleSubmit" :loading="submitting">
+              {{ isEdit ? $t('common.save') : $t('common.create') }}
+            </el-button>
+          </div>
+        </div>
       </template>
     </el-dialog>
   </el-dialog>
@@ -162,7 +225,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, MagicStick } from '@element-plus/icons-vue'
 import { aiAPI } from '@/api/ai'
 import type { AIServiceConfig, AIServiceType, CreateAIConfigRequest, UpdateAIConfigRequest } from '@/types/ai'
 import ConfigList from '@/views/settings/components/ConfigList.vue'
@@ -189,6 +252,9 @@ const editingId = ref<number>()
 const formRef = ref<FormInstance>()
 const submitting = ref(false)
 const testing = ref(false)
+const quickSetupVisible = ref(false)
+const quickSetupApiKey = ref('')
+const quickSetupLoading = ref(false)
 
 const form = reactive<CreateAIConfigRequest & { is_active?: boolean, provider?: string }>({
   service_type: 'text',
@@ -543,6 +609,68 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
+const showQuickSetupDialog = () => {
+  quickSetupApiKey.value = ''
+  quickSetupVisible.value = true
+}
+
+const handleQuickSetup = async () => {
+  if (!quickSetupApiKey.value.trim()) {
+    ElMessage.warning('请输入 API Key')
+    return
+  }
+
+  quickSetupLoading.value = true
+  const baseUrl = 'https://api.chatfire.site/v1'
+  const apiKey = quickSetupApiKey.value.trim()
+
+  try {
+    // 创建文本配置
+    const textProvider = providerConfigs.text.find(p => p.id === 'chatfire')!
+    await aiAPI.create({
+      service_type: 'text',
+      provider: 'chatfire',
+      name: generateConfigName('chatfire', 'text'),
+      base_url: baseUrl,
+      api_key: apiKey,
+      model: [textProvider.models[0]],
+      priority: 0
+    })
+
+    // 创建图片配置
+    const imageProvider = providerConfigs.image.find(p => p.id === 'chatfire')!
+    await aiAPI.create({
+      service_type: 'image',
+      provider: 'chatfire',
+      name: generateConfigName('chatfire', 'image'),
+      base_url: baseUrl,
+      api_key: apiKey,
+      model: [imageProvider.models[0]],
+      priority: 0
+    })
+
+    // 创建视频配置
+    const videoProvider = providerConfigs.video.find(p => p.id === 'chatfire')!
+    await aiAPI.create({
+      service_type: 'video',
+      provider: 'chatfire',
+      name: generateConfigName('chatfire', 'video'),
+      base_url: baseUrl,
+      api_key: apiKey,
+      model: [videoProvider.models[0]],
+      priority: 0
+    })
+
+    ElMessage.success('一键配置成功！已创建文本、图片、视频三个服务配置')
+    quickSetupVisible.value = false
+    loadConfigs()
+  } catch (error: any) {
+    ElMessage.error(error.message || '配置失败')
+  } finally {
+    quickSetupLoading.value = false
+  }
+}
+
 // Load configs when dialog opens
 watch(visible, (val) => {
   if (val) {
@@ -566,6 +694,63 @@ watch(visible, (val) => {
   padding-right: 32px;
 }
 
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.quick-setup-info {
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  font-size: 14px;
+  color: var(--text-primary);
+
+  p {
+    margin: 0 0 8px 0;
+  }
+
+  ul {
+    margin: 8px 0;
+    padding-left: 20px;
+  }
+
+  li {
+    margin: 4px 0;
+    color: var(--text-secondary);
+  }
+
+  .quick-setup-tip {
+    margin-top: 12px;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+}
+
+.quick-setup-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.register-link {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--accent);
+  }
+}
+
+.footer-buttons {
+  display: flex;
+  gap: 8px;
+}
+
 .dialog-title {
   font-size: 1.125rem;
   font-weight: 600;
diff --git a/web/src/types/ai.ts b/web/src/types/ai.ts
index fc29496..5de6168 100644
--- a/web/src/types/ai.ts
+++ b/web/src/types/ai.ts
@@ -1,6 +1,7 @@
 export interface AIServiceConfig {
   id: number
   service_type: AIServiceType
+  provider?: string  // 厂商标识
   name: string
   base_url: string
   api_key: string
@@ -18,6 +19,7 @@ export type AIServiceType = 'text' | 'image' | 'video'
 
 export interface CreateAIConfigRequest {
   service_type: AIServiceType
+  provider?: string  // 厂商标识
   name: string
   base_url: string
   api_key: string
@@ -30,6 +32,7 @@ export interface CreateAIConfigRequest {
 
 export interface UpdateAIConfigRequest {
   name?: string
+  provider?: string  // 厂商标识
   base_url?: string
   api_key?: string
   model?: string | string[]  // 支持单个或多个模型
@@ -44,6 +47,7 @@ export interface TestConnectionRequest {
   base_url: string
   api_key: string
   model: string | string[]  // 支持单个或多个模型
+  provider?: string  // 厂商标识
   endpoint?: string
   query_endpoint?: string  // 异步查询端点（用于视频等异步任务）
 }
diff --git a/web/src/views/drama/ProfessionalEditor.vue b/web/src/views/drama/ProfessionalEditor.vue
index 8988796..eead78e 100644
--- a/web/src/views/drama/ProfessionalEditor.vue
+++ b/web/src/views/drama/ProfessionalEditor.vue
@@ -765,9 +765,9 @@
                             在线预览
                           </el-button>
                         </template>
-                        <el-button v-if="merge.status === 'failed'" type="danger" :icon="Close"
-                          @click="deleteMerge(merge.id)" plain round>
-                          删除记录
+                        <el-button type="danger" :icon="Delete"
+                          @click="deleteMerge(merge.id)" round>
+                          删除
                         </el-button>
                       </div>
                     </div>
@@ -890,7 +890,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   ArrowLeft, Plus, Picture, VideoPlay, VideoPause, View, Setting,
   Upload, MagicStick, VideoCamera, ZoomIn, ZoomOut, Top, Bottom, Check, Close, Right,
-  Timer, Calendar, Clock, Loading, WarningFilled
+  Timer, Calendar, Clock, Loading, WarningFilled, Delete
 } from '@element-plus/icons-vue'
 import { dramaAPI } from '@/api/drama'
 import { generateFramePrompt, type FrameType } from '@/api/frame'
@@ -2483,7 +2483,7 @@ onBeforeUnmount(() => {
   padding: 16px;
   max-height: calc(100vh - 200px);
   overflow-y: auto;
-  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
+  background: var(--bg-secondary);
 
   .merge-items {
     display: flex;
@@ -2493,17 +2493,17 @@ onBeforeUnmount(() => {
 
   .merge-item {
     position: relative;
-    background: #fff;
+    background: var(--bg-card);
     border-radius: 12px;
     overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    border: 1px solid transparent;
+    border: 1px solid var(--border-primary);
 
     &:hover {
       transform: translateY(-2px);
-      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(64, 158, 255, 0.3);
-      border-color: rgba(64, 158, 255, 0.2);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+      border-color: var(--accent);
     }
 
     .status-indicator {
@@ -2543,7 +2543,7 @@ onBeforeUnmount(() => {
       align-items: center;
       margin-bottom: 16px;
       padding-bottom: 14px;
-      border-bottom: 1px solid #f0f2f5;
+      border-bottom: 1px solid var(--border-primary);
 
       .title-section {
         display: flex;
@@ -2558,17 +2558,16 @@ onBeforeUnmount(() => {
           width: 38px;
           height: 38px;
           border-radius: 10px;
-          background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
-          color: #606266;
+          background: var(--bg-secondary);
+          color: var(--text-secondary);
           transition: all 0.3s;
-          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
         }
 
         .merge-title {
           margin: 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: #303133;
+          font-size: 15px;
+          font-weight: 500;
+          color: var(--text-secondary);
           line-height: 1.4;
         }
       }
@@ -2583,19 +2582,16 @@ onBeforeUnmount(() => {
     &.merge-status-completed .title-icon {
       background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
       color: #fff;
-      box-shadow: 0 2px 8px rgba(103, 194, 58, 0.25);
     }
 
     &.merge-status-processing .title-icon {
       background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
       color: #fff;
-      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.25);
     }
 
     &.merge-status-failed .title-icon {
       background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
       color: #fff;
-      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.25);
     }
 
     .merge-details {
@@ -2608,17 +2604,14 @@ onBeforeUnmount(() => {
         display: flex;
         gap: 10px;
         padding: 12px 14px;
-        background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
+        background: var(--bg-secondary);
         border-radius: 8px;
-        border: 1px solid transparent;
+        border: 1px solid var(--border-primary);
         transition: all 0.3s;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 
         &:hover {
-          background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
+          border-color: var(--accent);
           transform: translateY(-1px);
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-          border-color: rgba(64, 158, 255, 0.15);
         }
 
         .detail-icon {
@@ -2628,10 +2621,9 @@ onBeforeUnmount(() => {
           width: 28px;
           height: 28px;
           border-radius: 6px;
-          background: #fff;
-          color: #409eff;
+          background: var(--bg-card);
+          color: var(--accent);
           flex-shrink: 0;
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
         }
 
         .detail-content {
@@ -2640,15 +2632,15 @@ onBeforeUnmount(() => {
 
           .detail-label {
             font-size: 11px;
-            color: #909399;
+            color: var(--text-muted);
             margin-bottom: 3px;
             font-weight: 500;
           }
 
           .detail-value {
             font-size: 13px;
-            color: #303133;
-            font-weight: 600;
+            color: var(--text-primary);
+            font-weight: 500;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -2663,7 +2655,6 @@ onBeforeUnmount(() => {
       :deep(.el-alert) {
         border-radius: 8px;
         border: none;
-        box-shadow: 0 1px 4px rgba(245, 108, 108, 0.12);
         padding: 8px 12px;
         font-size: 12px;
       }
@@ -4132,7 +4123,7 @@ onBeforeUnmount(() => {
           margin: 0;
           font-size: 16px;
           font-weight: 600;
-          color: #303133;
+          color: var(--text-secondary);
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;