Merge pull request #11 from chatfire-AI/feature-1.0.1

feat: 新增一键配置；新增合成删除
2026-01-15 23:04:54 +08:00
parent fef7cb4b85 393f743233
commit edba3388fb
3 changed files with 224 additions and 44 deletions
--- 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;
--- 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  // 异步查询端点（用于视频等异步任务）
 }
--- 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;