From 0c017d380caebcf3f4eb6a7ba73d367f919e1352 Mon Sep 17 00:00:00 2001
From: qyyfw <qyyfw@qihuyun.com>
Date: Fri, 10 Jul 2026 21:08:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E5=8F=B0AI=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E5=88=97=E8=A1=A8=E5=8F=AA=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=90=8D=E7=A7=B0+=E8=83=BD=E5=8A=9B?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E5=86=8D=E6=98=BE=E7=A4=BA=E4=BE=9B=E5=BA=94?=
 =?UTF-8?q?=E5=95=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/front/ChatPage.css | 36 +++++++++++++++++++--------
 frontend/src/pages/front/ChatPage.tsx | 36 ++++++++++++++++++---------
 2 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/frontend/src/pages/front/ChatPage.css b/frontend/src/pages/front/ChatPage.css
index 00ff730..1665ce6 100644
--- a/frontend/src/pages/front/ChatPage.css
+++ b/frontend/src/pages/front/ChatPage.css
@@ -667,20 +667,38 @@
   font-weight: 500;
 }
 
-/* 模型能力徽标（图像/视频） */
+/* 模型能力徽标（能力标签） */
 .model-cap-badge {
-  margin-left: auto;
   flex-shrink: 0;
   font-size: 11px;
   line-height: 1;
   padding: 3px 7px;
   border-radius: 999px;
-  background: linear-gradient(135deg, #6C63FF 0%, #8B7CFF 100%);
-  color: #fff;
-  font-weight: 600;
+  background: rgba(108, 99, 255, 0.1);
+  color: #6C63FF;
+  border: 1px solid rgba(108, 99, 255, 0.25);
+  font-weight: 500;
   letter-spacing: 0.3px;
 }
 
+.model-cap-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+  margin-top: 2px;
+}
+
+.model-display-name {
+  font-weight: 500;
+  color: var(--color-text-primary);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .dropdown-item.danger {
   color: var(--color-error);
 }
@@ -704,17 +722,13 @@
 .model-dropdown-item {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: var(--space-sm);
   width: 100%;
 }
 
 .model-provider-tag {
-  font-size: 10px;
-  color: var(--color-text-tertiary);
-  margin-left: auto;
-  background: var(--color-bg-tertiary);
-  padding: 1px 6px;
-  border-radius: var(--radius-full);
+  display: none;
 }
 
 .attach-dropdown-title {
diff --git a/frontend/src/pages/front/ChatPage.tsx b/frontend/src/pages/front/ChatPage.tsx
index e8cf263..4bfd9f6 100644
--- a/frontend/src/pages/front/ChatPage.tsx
+++ b/frontend/src/pages/front/ChatPage.tsx
@@ -466,6 +466,21 @@ const ChatPage: React.FC = () => {
 
   // Selected model info（Auto 为按能力自动匹配平台默认模型）
   const AUTO_MODEL = { id: 'auto', name: 'Auto 自动', display_name: 'Auto 自动', status: 'free', provider_name: '按能力匹配', price_per_million_tokens: 0, capabilities: [] as string[] };
+
+  // 能力标签映射（用于模型选项列表展示）
+  const CAPABILITY_LABELS: Record<string, string> = {
+    text: '文本对话',
+    thinking: '推理思考',
+    vision: '视觉理解',
+    tool: '工具调用',
+    image: '图像生成',
+    audio: '语音合成',
+    asr: '语音识别',
+    ocr: 'OCR识别',
+    embedding: '嵌入向量',
+    rerank: '重排序',
+    video: '视频生成',
+  };
   const selectedModel = selectedModelId === 'auto'
     ? AUTO_MODEL
     : (chatModels.find(m => m.id === selectedModelId) || chatModels[0] || AUTO_MODEL);
@@ -790,7 +805,7 @@ const ChatPage: React.FC = () => {
                   trigger={
                     <div className="model-selector">
                       <IconModel />
-                      <span className="model-name">{selectedModel.name}</span>
+                      <span className="model-name">{selectedModel.display_name || selectedModel.name}</span>
                       <span className="model-badge">{(selectedModel.status === 'free' || selectedModel.price_per_million_tokens === 0) ? '免费' : '付费'}</span>
                       <IconChevronDown />
                     </div>
@@ -815,15 +830,12 @@ const ChatPage: React.FC = () => {
                       onClick={() => setSelectedModelId(model.id)}
                     >
                       <div className="model-dropdown-item">
-                        <span>{model.name}</span>
-                        <span className="model-provider-tag">{model.provider_name || model.providerName || ''}</span>
-                        {(() => {
-                          const caps = model.capabilities || [];
-                          const label = caps.includes('image') && caps.includes('video') ? '图像/视频'
-                            : caps.includes('image') ? '图像'
-                            : caps.includes('video') ? '视频' : '';
-                          return label ? <span className="model-cap-badge">{label}</span> : null;
-                        })()}
+                        <span className="model-display-name">{model.display_name || model.name}</span>
+                        <span className="model-cap-list">
+                          {(model.capabilities || []).map((cap: string) => (
+                            <span key={cap} className="model-cap-badge">{CAPABILITY_LABELS[cap] || cap}</span>
+                          ))}
+                        </span>
                       </div>
                     </button>
                   ))}
@@ -845,7 +857,7 @@ const ChatPage: React.FC = () => {
                   <IconEmpty />
                   <p className="empty-title">开始一段新对话</p>
                   <p className="empty-desc">
-                    向 {selectedModel.name} 发送消息，开始对话
+                    向 {selectedModel.display_name || selectedModel.name} 发送消息，开始对话
                   </p>
                 </div>
               ) : (
@@ -1007,7 +1019,7 @@ const ChatPage: React.FC = () => {
                   <textarea
                     ref={inputRef}
                     className="chat-textarea"
-                    placeholder={`向 ${selectedModel.name} 发送消息...`}
+                    placeholder={`向 ${selectedModel.display_name || selectedModel.name} 发送消息...`}
                     value={inputValue}
                     onChange={(e) => setInputValue(e.target.value)}
                     onKeyDown={handleKeyDown}