优化配置项

.env.example

@@ -1,18 +1,12 @@
-# 菜谱生成模型配置（文本生成）- 零一万物（默认）
-VITE_TEXT_GENERATION_BASE_URL=https://api.lingyiwanwu.com/v1/
-VITE_TEXT_GENERATION_API_KEY=******
-VITE_TEXT_GENERATION_MODEL=yi-lightning
+# 菜谱生成模型配置（文本生成）
+VITE_TEXT_GENERATION_BASE_URL=https://api.302ai.cn/v1/
+VITE_TEXT_GENERATION_API_KEY=xxxxxxxxxxxx
+VITE_TEXT_GENERATION_MODEL=doubao-1.5-pro-32k
 VITE_TEXT_GENERATION_TEMPERATURE=0.7
 VITE_TEXT_GENERATION_TIMEOUT=300000
 
-# 菜谱生成模型配置（文本生成）- Deepseek（备选）
-# VITE_TEXT_GENERATION_BASE_URL=https://api.deepseek.com/v1/
-# VITE_TEXT_GENERATION_API_KEY=******
-# VITE_TEXT_GENERATION_MODEL=deepseek-chat
-# VITE_TEXT_GENERATION_TEMPERATURE=0.7
-# VITE_TEXT_GENERATION_TIMEOUT=300000
 
 # 图片生成模型配置
-VITE_IMAGE_GENERATION_BASE_URL=https://open.bigmodel.cn/api/paas/v4/
-VITE_IMAGE_GENERATION_API_KEY=******
-VITE_IMAGE_GENERATION_MODEL=cogview-3-flash
+VITE_IMAGE_GENERATION_BASE_URL=https://open.bigmodel.cn/api/paas/v4/images/generations
+VITE_IMAGE_GENERATION_API_KEY=xxxxxxxxxxxxx
+VITE_IMAGE_GENERATION_MODEL=cogview-3-flash

src/components/SettingsModal.vue

@@ -84,9 +84,10 @@
                         </button>
 
                         <div v-show="isTextConfigExpanded" class="px-3 md:px-4 pb-3 md:pb-4">
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
+                            <div class="space-y-3 md:space-y-4">
+                                <!-- API地址单独一行 -->
                                 <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">API地址</label>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">API地址<span class="text-xs">（省略：/chat/completions）</span></label>
                                     <input
                                         v-model="textConfig.baseUrl"
                                         type="text"
@@ -95,46 +96,49 @@
                                     />
                                 </div>
 
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">API密钥</label>
-                                    <input
-                                        v-model="textConfig.apiKey"
-                                        type="password"
-                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                        placeholder="输入API密钥"
-                                    />
-                                </div>
+                                <!-- 其他配置项两列布局 -->
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 mb-1">API密钥</label>
+                                        <input
+                                            v-model="textConfig.apiKey"
+                                            type="password"
+                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                            placeholder="输入API密钥"
+                                        />
+                                    </div>
 
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">模型名称</label>
-                                    <input
-                                        v-model="textConfig.model"
-                                        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="yi-lightning"
-                                    />
-                                </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 mb-1">模型名称</label>
+                                        <input
+                                            v-model="textConfig.model"
+                                            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="yi-lightning"
+                                        />
+                                    </div>
 
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">温度参数 (0-1)</label>
-                                    <input
-                                        v-model.number="textConfig.temperature"
-                                        type="number"
-                                        min="0"
-                                        max="1"
-                                        step="0.1"
-                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                    />
-                                </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 mb-1">温度参数 (0-1)</label>
+                                        <input
+                                            v-model.number="textConfig.temperature"
+                                            type="number"
+                                            min="0"
+                                            max="1"
+                                            step="0.1"
+                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                        />
+                                    </div>
 
-                                <div class="md:col-span-2">
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">超时时间 (毫秒)</label>
-                                    <input
-                                        v-model.number="textConfig.timeout"
-                                        type="number"
-                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                                        placeholder="300000"
-                                    />
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 mb-1">超时时间 (毫秒)</label>
+                                        <input
+                                            v-model.number="textConfig.timeout"
+                                            type="number"
+                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                            placeholder="300000"
+                                        />
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -169,9 +173,10 @@
                         </button>
 
                         <div v-show="isImageConfigExpanded" class="px-3 md:px-4 pb-3 md:pb-4">
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
+                            <div class="space-y-3 md:space-y-4">
+                                <!-- API地址单独一行 -->
                                 <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">API地址</label>
+                                    <label class="block text-sm font-medium text-gray-700 mb-1">API地址<span class="text-xs">（生成图片全地址）</span></label>
                                     <input
                                         v-model="imageConfig.baseUrl"
                                         type="text"
@@ -180,24 +185,27 @@
                                     />
                                 </div>
 
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">API密钥</label>
-                                    <input
-                                        v-model="imageConfig.apiKey"
-                                        type="password"
-                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                                        placeholder="输入API密钥"
-                                    />
-                                </div>
+                                <!-- 其他配置项两列布局 -->
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 mb-1">API密钥</label>
+                                        <input
+                                            v-model="imageConfig.apiKey"
+                                            type="password"
+                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                                            placeholder="输入API密钥"
+                                        />
+                                    </div>
 
-                                <div class="md:col-span-2">
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">模型名称</label>
-                                    <input
-                                        v-model="imageConfig.model"
-                                        type="text"
-                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
-                                        placeholder="cogview-3-flash"
-                                    />
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 mb-1">模型名称</label>
+                                        <input
+                                            v-model="imageConfig.model"
+                                            type="text"
+                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
+                                            placeholder="cogview-3-flash"
+                                        />
+                                    </div>
                                 </div>
                             </div>
                         </div>

src/services/imageService.ts

@@ -1,13 +1,5 @@
 import type { Recipe } from '@/types'
-
-// 图片生成模型配置 - 从环境变量读取
-const IMAGE_CONFIG = {
-    apiKey: import.meta.env.VITE_IMAGE_GENERATION_API_KEY,
-    baseURL: import.meta.env.VITE_IMAGE_GENERATION_BASE_URL || 'https://open.bigmodel.cn/api/paas/v4/',
-    model: import.meta.env.VITE_IMAGE_GENERATION_MODEL || 'cogview-3-flash'
-}
-
-const API_URL = `${IMAGE_CONFIG.baseURL}images/generations`
+import { getImageGenerationConfig } from '@/utils/apiConfig'
 
 export interface GeneratedImage {
     url: string
@@ -15,20 +7,23 @@ export interface GeneratedImage {
 }
 
 export const generateRecipeImage = async (recipe: Recipe): Promise<GeneratedImage> => {
+    // 从设置中获取图片生成配置
+    const config = getImageGenerationConfig()
+
     // 构建图片生成的提示词
     const prompt = buildImagePrompt(recipe)
 
     const sizeToUse = { width: 1024, height: 1024 }
 
     try {
-        const response = await fetch(API_URL, {
+        const response = await fetch(config.baseUrl, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
-                Authorization: `Bearer ${IMAGE_CONFIG.apiKey}`
+                Authorization: `Bearer ${config.apiKey}`
             },
             body: JSON.stringify({
-                model: IMAGE_CONFIG.model,
+                model: config.model,
                 prompt: prompt,
                 size: `${sizeToUse.width}x${sizeToUse.height}`,
                 n: 1,