From 0e1ef770544ed13a1e315d46ff29ba859e2c469f Mon Sep 17 00:00:00 2001
From: hz4th_coder <hz4th_coder@tphai.com>
Date: Fri, 17 Jul 2026 13:21:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A3=8E=E6=A0=BC=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=A7=BB=E8=87=B3=E5=9B=BE=E8=A1=A8=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

布局调整：
- 风格按钮区域移到图表展示区右侧并排显示
- 右侧面板改为 flex 横向布局
- 风格区域固定宽度 160px，每行2个按钮
- 风格区域支持独立滚动
- 小屏幕下自动回到图表下方（响应式）
---
 index.html |  6 ++---
 style.css  | 69 ++++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index a33dd31..6a7eec2 100644
--- a/index.html
+++ b/index.html
@@ -200,7 +200,7 @@ C, 20, 30, 40</pre>
                 </div>
             </div>
 
-            <!-- 右侧面板：图表预览 -->
+            <!-- 右侧面板：图表预览 + 风格切换 -->
             <div class="right-panel">
                 <div class="chart-container">
                     <div id="chartArea" class="chart-area">
@@ -210,9 +210,9 @@ C, 20, 30, 40</pre>
                         </div>
                     </div>
                 </div>
-                <!-- 风格快速切换按钮 -->
+                <!-- 风格快速切换按钮（放在图表右侧） -->
                 <div class="theme-buttons-section">
-                    <h3>🎨 快速切换风格</h3>
+                    <h3>🎨 风格</h3>
                     <div class="theme-buttons-grid" id="themeButtonsGrid">
                         <button class="theme-btn" data-theme="default" onclick="quickSwitchTheme('default')">
                             <span class="theme-preview" style="background: linear-gradient(135deg, #5470c6, #91cc75)"></span>
diff --git a/style.css b/style.css
index 704be94..3ffbdb5 100644
--- a/style.css
+++ b/style.css
@@ -320,9 +320,14 @@ body {
 .right-panel {
     position: sticky;
     top: 20px;
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
 }
 
 .chart-container {
+    flex: 1;
+    min-width: 0;
     background: var(--panel-bg);
     border-radius: var(--radius);
     padding: 20px;
@@ -367,6 +372,20 @@ body {
     .chart-area {
         height: 450px;
     }
+    
+    /* 小屏幕下风格按钮回到图表下方 */
+    .right-panel {
+        flex-direction: column;
+    }
+    
+    .theme-buttons-section {
+        width: 100%;
+        max-height: none;
+    }
+    
+    .theme-buttons-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
 }
 
 /* ===== 动画 ===== */
@@ -458,67 +477,67 @@ input[type="range"]::-moz-range-thumb {
     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
-/* ===== 风格快速切换按钮区 ===== */
+/* ===== 风格快速切换按钮区（右侧） ===== */
 .theme-buttons-section {
-    margin-top: 16px;
+    width: 160px;
+    flex-shrink: 0;
     background: var(--panel-bg);
     border-radius: var(--radius);
-    padding: 16px 20px;
+    padding: 16px;
     box-shadow: var(--shadow);
     border: 1px solid var(--border);
+    max-height: calc(100vh - 140px);
+    overflow-y: auto;
 }
 
 .theme-buttons-section h3 {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     margin-bottom: 12px;
     color: var(--text);
-    display: flex;
-    align-items: center;
-    gap: 6px;
+    text-align: center;
 }
 
 .theme-buttons-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
+    gap: 8px;
 }
 
 .theme-btn {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
+    gap: 4px;
+    padding: 6px 4px;
     border: 2px solid var(--border);
-    border-radius: 10px;
+    border-radius: 8px;
     background: white;
     cursor: pointer;
     transition: all 0.2s;
-    min-width: 72px;
 }
 
 .theme-btn:hover {
     border-color: var(--primary);
-    transform: translateY(-2px);
+    transform: translateY(-1px);
     box-shadow: var(--shadow);
 }
 
 .theme-btn.active {
     border-color: var(--primary);
     background: rgba(79, 70, 229, 0.05);
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
 }
 
 .theme-preview {
     display: block;
-    width: 40px;
-    height: 28px;
-    border-radius: 6px;
+    width: 32px;
+    height: 20px;
+    border-radius: 4px;
     box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
 }
 
 .theme-name {
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     color: var(--text-light);
     font-weight: 500;
 }
@@ -527,3 +546,17 @@ input[type="range"]::-moz-range-thumb {
     color: var(--primary);
     font-weight: 600;
 }
+
+/* 滚动条样式 */
+.theme-buttons-section::-webkit-scrollbar {
+    width: 4px;
+}
+
+.theme-buttons-section::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.theme-buttons-section::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+}