From 6a70b236b6d2ed4a46d7853e46640fb1cdee9464 Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Sat, 27 Dec 2025 15:02:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E6=94=AF=E6=8C=81=20Gemini=20?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 Gemini 图片模型卡片配置
- 添加 gemini 模型类型检测逻辑
- 实现 Gemini 模型选择和高亮显示
- 添加模型类型切换提示信息
---
 src/components/ui/ModelCardSelector.tsx | 97 ++++++++++++++++++++++++-
 1 file changed, 96 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/ModelCardSelector.tsx b/src/components/ui/ModelCardSelector.tsx
index 29b62bb..4480a56 100644
--- a/src/components/ui/ModelCardSelector.tsx
+++ b/src/components/ui/ModelCardSelector.tsx
@@ -48,8 +48,18 @@ const CODEX_MODEL_CARDS = [
   },
 ];
 
+// Gemini 图片模型卡片配置
+const GEMINI_MODEL_CARDS = [
+  {
+    id: 'gemini-3-pro-image-preview',
+    name: 'Gemini 图片',
+    description: '文生图',
+    modelIdPattern: 'gemini',
+  },
+];
+
 // 模型类型
-type ModelType = 'claude' | 'codex';
+type ModelType = 'claude' | 'codex' | 'gemini';
 
 interface ModelCardSelectorProps {
   value: string;
@@ -73,6 +83,9 @@ export function ModelCardSelector({
     if (modelId.startsWith('gpt-') && modelId.includes('codex')) {
       return 'codex';
     }
+    if (modelId.includes('gemini') || modelId.includes('imagen')) {
+      return 'gemini';
+    }
     return 'claude';
   };
 
@@ -107,9 +120,22 @@ export function ModelCardSelector({
     return model?.modelId || cardId;
   };
 
+  // 根据当前选中的模型ID判断选中的卡片（Gemini）
+  const getSelectedGeminiCard = (modelId: string): string | null => {
+    const matchedCard = GEMINI_MODEL_CARDS.find((card) => modelId.includes(card.modelIdPattern));
+    return matchedCard?.id || null;
+  };
+
+  // 根据卡片类型找到对应的实际模型ID（Gemini）
+  const findGeminiModelIdByCard = (cardId: string): string => {
+    const model = models.find((m) => m.modelId === cardId);
+    return model?.modelId || cardId;
+  };
+
   const currentModelType = getModelType(value);
   const selectedClaudeCard = getSelectedClaudeCard(value);
   const selectedCodexCard = getSelectedCodexCard(value);
+  const selectedGeminiCard = getSelectedGeminiCard(value);
 
   // 处理模型选择
   const handleModelSelect = (modelId: string, modelType: ModelType) => {
@@ -137,6 +163,9 @@ export function ModelCardSelector({
   // 检查是否有 Codex 模型可用
   const hasCodexModels = models.some(m => m.modelType === 'codex' || (m.modelId.startsWith('gpt-') && m.modelId.includes('codex')));
 
+  // 检查是否有 Gemini 模型可用
+  const hasGeminiModels = models.some(m => m.modelType === 'gemini' || m.modelId.includes('gemini') || m.modelId.includes('imagen'));
+
   return (
     <div className="space-y-6">
       {/* 模型切换提示 */}
@@ -148,6 +177,8 @@ export function ModelCardSelector({
             <p className="text-amber-600 dark:text-amber-300 mt-1">
               {currentModelType === 'codex'
                 ? 'Codex 模型不支持思考模式（Thinking），但支持工具调用。'
+                : currentModelType === 'gemini'
+                ? 'Gemini 图片模型专注于图片生成，不支持思考模式和工具调用。'
                 : 'Claude 模型支持思考模式和工具调用。'}
             </p>
           </div>
@@ -271,6 +302,70 @@ export function ModelCardSelector({
           </div>
         </div>
       )}
+
+      {/* Gemini 图片模型组 */}
+      {hasGeminiModels && (
+        <div>
+          <div className="text-xs font-medium text-[var(--color-text-tertiary)] mb-3 flex items-center gap-2">
+            <span className="w-2 h-2 rounded-full bg-blue-500"></span>
+            Gemini 图片模型
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
+              Google
+            </span>
+          </div>
+          <div className="flex gap-3">
+            {GEMINI_MODEL_CARDS.map((card) => {
+              const isSelected = selectedGeminiCard === card.id;
+              // 检查该模型是否在可用模型列表中
+              const isAvailable = models.some(m => m.modelId === card.id || m.modelId.includes(card.modelIdPattern));
+
+              if (!isAvailable) return null;
+
+              return (
+                <button
+                  key={card.id}
+                  onClick={() => {
+                    const newModelId = findGeminiModelIdByCard(card.id);
+                    handleModelSelect(newModelId, 'gemini');
+                  }}
+                  disabled={disabled}
+                  className={cn(
+                    'flex flex-col items-center justify-center',
+                    'w-[120px] h-[72px] rounded-md',
+                    'border-2 transition-all duration-200',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
+                    isSelected
+                      ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-500'
+                      : 'bg-[var(--color-bg-tertiary)] border-transparent hover:border-blue-300 dark:hover:border-blue-700',
+                    disabled && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'text-sm font-semibold',
+                      isSelected
+                        ? 'text-blue-600 dark:text-blue-400'
+                        : 'text-[var(--color-text-primary)]'
+                    )}
+                  >
+                    {card.name}
+                  </span>
+                  <span
+                    className={cn(
+                      'text-xs mt-1',
+                      isSelected
+                        ? 'text-blue-500 dark:text-blue-400'
+                        : 'text-[var(--color-text-tertiary)]'
+                    )}
+                  >
+                    {card.description}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
     </div>
   );
 }