From f2a6bb93f97d99bc0a4fc31cb96f50bd3b1dc20f Mon Sep 17 00:00:00 2001
From: yuzhiran-dev <dev@yuzhiran.com>
Date: Mon, 18 May 2026 10:39:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20P0e=20=E6=A8=A1=E5=9E=8B=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E5=8D=87=E7=BA=A7=20=E2=80=94=20=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=BC=8F=E4=B8=8B=E6=8B=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ModelSelector 组件：标签/提供商/描述/选中状态
- 替换 sandbox page + workshop page 原生 select
- 模型数据增加 provider/desc 字段
---
 frontend/src/app/prompts/workshop/page.tsx    |  9 +---
 frontend/src/app/sandbox/page.tsx             |  6 +--
 frontend/src/components/ui/model-selector.tsx | 50 +++++++++++++++++++
 frontend/src/lib/models.ts                    |  6 ++-
 4 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/ui/model-selector.tsx

diff --git a/frontend/src/app/prompts/workshop/page.tsx b/frontend/src/app/prompts/workshop/page.tsx
index 6f887ca..30064db 100644
--- a/frontend/src/app/prompts/workshop/page.tsx
+++ b/frontend/src/app/prompts/workshop/page.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { useAuth } from '@/lib/auth-context';
 import { apiFetch, getToken } from '@/lib/auth';
 import { AVAILABLE_MODELS, DEFAULT_MODEL } from '@/lib/models';
+import { ModelSelector } from '@/components/ui/model-selector';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api/v1';
 
@@ -119,13 +120,7 @@ export default function PromptWorkshopPage() {
           <div className="bg-card rounded-2xl border border-border p-6">
             <div className="flex items-center justify-between mb-4">
               <h3 className="font-semibold text-foreground">提示词编辑</h3>
-              <select
-                value={model}
-                onChange={e => setModel(e.target.value)}
-                className="px-3 py-1.5 border border-border rounded-lg text-sm bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
-              >
-                {AVAILABLE_MODELS.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
-              </select>
+              <ModelSelector value={model} onChange={setModel} className="w-48" />
             </div>
 
             <textarea
diff --git a/frontend/src/app/sandbox/page.tsx b/frontend/src/app/sandbox/page.tsx
index 76d910b..f0364e1 100644
--- a/frontend/src/app/sandbox/page.tsx
+++ b/frontend/src/app/sandbox/page.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { useAuth } from '@/lib/auth-context';
 import { getToken, apiFetch } from '@/lib/auth';
 import { AVAILABLE_MODELS, DEFAULT_MODEL } from '@/lib/models';
+import { ModelSelector } from '@/components/ui/model-selector';
 import { useT } from '@/i18n';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api/v1';
@@ -254,10 +255,7 @@ export default function SandboxPage() {
           </div>
         </div>
         <div className="flex items-center gap-3">
-          <select value={model} onChange={e => setModel(e.target.value)}
-            className="px-3 py-1.5 border border-border rounded-lg text-sm bg-background focus:outline-none focus:border-brand-400">
-            {AVAILABLE_MODELS.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
-          </select>
+          <ModelSelector value={model} onChange={setModel} className="w-48" />
           {!isLoggedIn && (
             <Link href="/auth"
               className="px-4 py-1.5 text-sm font-medium text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50">
diff --git a/frontend/src/components/ui/model-selector.tsx b/frontend/src/components/ui/model-selector.tsx
new file mode 100644
index 0000000..0245514
--- /dev/null
+++ b/frontend/src/components/ui/model-selector.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useState } from 'react';
+import { AVAILABLE_MODELS, type ModelOption } from '@/lib/models';
+
+interface ModelSelectorProps {
+  value: string;
+  onChange: (id: string) => void;
+  className?: string;
+}
+
+export function ModelSelector({ value, onChange, className = '' }: ModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const selected = AVAILABLE_MODELS.find(m => m.id === value) || AVAILABLE_MODELS[0];
+
+  return (
+    <div className={`relative ${className}`}>
+      <button onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-3 py-2 border border-border rounded-lg bg-background hover:bg-accent transition-colors text-sm w-full text-left">
+        <span className="w-2 h-2 rounded-full bg-brand-600 shrink-0" />
+        <span className="text-foreground font-medium">{selected.label}</span>
+        <svg className={`w-3.5 h-3.5 ml-auto text-muted-foreground transition-transform ${open ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="absolute right-0 top-full mt-1 z-20 w-64 bg-card border border-border rounded-xl shadow-lg overflow-hidden">
+            {AVAILABLE_MODELS.map(m => (
+              <button key={m.id} onClick={() => { onChange(m.id); setOpen(false); }}
+                className={`w-full text-left px-4 py-3 hover:bg-accent transition-colors flex items-center gap-3 ${m.id === value ? 'bg-accent' : ''}`}>
+                <span className={`w-2 h-2 rounded-full shrink-0 ${m.id === value ? 'bg-brand-600' : 'bg-muted-foreground/30'}`} />
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-foreground">{m.label}</div>
+                  <div className="text-xs text-muted-foreground">{m.provider} · {m.desc}</div>
+                </div>
+                {m.id === value && (
+                  <svg className="w-4 h-4 text-brand-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/lib/models.ts b/frontend/src/lib/models.ts
index 28cb33d..b6cfb58 100644
--- a/frontend/src/lib/models.ts
+++ b/frontend/src/lib/models.ts
@@ -1,11 +1,13 @@
 export interface ModelOption {
   id: string;
   label: string;
+  provider: string;
+  desc: string;
 }
 
 export const AVAILABLE_MODELS: ModelOption[] = [
-  { id: 'general', label: '通用模式' },
-  { id: 'opencode-go', label: 'DeepSeek V4 Flash' },
+  { id: 'general', label: '通用模式', provider: 'OpenAI 兼容', desc: '日常问答，综合能力均衡' },
+  { id: 'opencode-go', label: 'DeepSeek V4 Flash', provider: 'OpenCode Go', desc: '高速推理，代码生成强' },
 ];
 
 export const DEFAULT_MODEL = 'general';