From c86b7d1fbc658fb99990dc0d0c5bb9074c7a05b2 Mon Sep 17 00:00:00 2001
From: hex2077 <justlikemaki@qq.com>
Date: Thu, 15 Jan 2026 21:13:35 +0800
Subject: [PATCH] =?UTF-8?q?style(components):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=8F=90=E4=BE=9B=E5=95=86=E5=88=97=E8=A1=A8=E5=92=8C=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=A4=8D=E9=80=89=E6=A1=86=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整模型复选框的布局和间距，添加文本溢出处理。重命名指南页面的提供商类名以避免冲突，并统一样式。添加模态框中的提供商列表样式。
---
 static/components/section-guide.css     | 46 ++++++++++++-------------
 static/components/section-providers.css | 21 ++++++++---
 2 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/static/components/section-guide.css b/static/components/section-guide.css
index 6265ed6..68ba39b 100644
--- a/static/components/section-guide.css
+++ b/static/components/section-guide.css
@@ -295,14 +295,14 @@
     margin: 0;
 }
 
-/* Provider List */
-.provider-list {
+/* Guide Provider List - 使用 guide- 前缀避免与 section-providers.css 冲突 */
+.guide-provider-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1rem;
 }
 
-.provider-item {
+.guide-provider-item {
     background: var(--bg-secondary);
     padding: 1rem;
     border-radius: var(--radius-md);
@@ -310,12 +310,12 @@
     transition: var(--transition);
 }
 
-.provider-item:hover {
+.guide-provider-item:hover {
     border-color: var(--primary-30);
     box-shadow: var(--shadow-sm);
 }
 
-.provider-header {
+.guide-provider-header {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -323,52 +323,52 @@
     flex-wrap: wrap;
 }
 
-.provider-icon {
+.guide-provider-icon {
     font-size: 1.25rem;
 }
 
-.provider-icon.gemini { color: #4285f4; }
-.provider-icon.antigravity { color: #ea4335; }
-.provider-icon.kiro { color: #9b59b6; }
-.provider-icon.qwen { color: #ff6a00; }
-.provider-icon.claude { color: #d97706; }
-.provider-icon.openai { color: #10a37f; }
-.provider-icon.iflow { color: #3b82f6; }
-.provider-icon.orchids { color: #22c55e; }
+.guide-provider-icon.gemini { color: #4285f4; }
+.guide-provider-icon.antigravity { color: #ea4335; }
+.guide-provider-icon.kiro { color: #9b59b6; }
+.guide-provider-icon.qwen { color: #ff6a00; }
+.guide-provider-icon.claude { color: #d97706; }
+.guide-provider-icon.openai { color: #10a37f; }
+.guide-provider-icon.iflow { color: #3b82f6; }
+.guide-provider-icon.orchids { color: #22c55e; }
 
-.provider-name {
+.guide-provider-name {
     font-weight: 600;
     color: var(--text-primary);
 }
 
-.provider-badge {
+.guide-provider-badge {
     font-size: 0.7rem;
     padding: 0.15rem 0.5rem;
     border-radius: 9999px;
     font-weight: 500;
 }
 
-.provider-badge.oauth {
+.guide-provider-badge.oauth {
     background: var(--primary-10);
     color: var(--primary-color);
 }
 
-.provider-badge.experimental {
+.guide-provider-badge.experimental {
     background: var(--warning-bg);
     color: var(--warning-text);
 }
 
-.provider-badge.free {
+.guide-provider-badge.free {
     background: var(--success-bg);
     color: var(--success-text);
 }
 
-.provider-badge.official {
+.guide-provider-badge.official {
     background: var(--info-bg);
     color: var(--info-text);
 }
 
-.provider-desc {
+.guide-provider-desc {
     font-size: 0.875rem;
     color: var(--text-secondary);
     margin: 0;
@@ -564,7 +564,7 @@
         grid-template-columns: 1fr;
     }
     
-    .provider-list {
+    .guide-provider-list {
         grid-template-columns: 1fr;
     }
     
@@ -579,7 +579,7 @@
 }
 
 [data-theme="dark"] .feature-card,
-[data-theme="dark"] .provider-item,
+[data-theme="dark"] .guide-provider-item,
 [data-theme="dark"] .client-config-item,
 [data-theme="dark"] .api-example,
 [data-theme="dark"] .model-prefix-list,
diff --git a/static/components/section-providers.css b/static/components/section-providers.css
index 3375bbb..c14907d 100644
--- a/static/components/section-providers.css
+++ b/static/components/section-providers.css
@@ -65,6 +65,13 @@
     gap: 1rem;
 }
 
+/* 模态框中的提供商列表 */
+.provider-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 .provider-item {
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);
@@ -1073,20 +1080,21 @@
 
 .models-checkbox-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 10px;
 }
 
 .model-checkbox-label {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
+    gap: 6px;
+    padding: 6px 10px;
     background: var(--white);
     border: 1px solid var(--neutral-300);
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease;
+    min-width: 0;
 }
 
 .model-checkbox-label:hover {
@@ -1095,9 +1103,12 @@
 }
 
 .model-checkbox-label .model-name {
-    font-size: 13px;
+    font-size: 12px;
     color: var(--neutral-600);
     user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .model-checkbox-label input[type="checkbox"]:checked + .model-name {