From 68e4b72d465dc8d2e08cd742feb5b4d755152329 Mon Sep 17 00:00:00 2001
From: hz4th_coder <hz4th_coder@tphai.com>
Date: Wed, 19 Aug 2026 13:09:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8D=95=E5=9B=BE?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E9=A2=84=E8=A7=88=E5=8C=BA=E9=81=AE=E6=8C=A1?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E9=A2=84=E8=A7=88=20+=20=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 布局重构：右侧主区域改为上下排列（原图预览在上、导出预览在下），
   chartArea 高度 600→420px，导出预览不再被遮挡
2. 下载按钮：根因是 .btn-success 自带 flex:1 把按钮拉伸占满，已用
   flex:0 0 auto + width:auto 覆盖，189px→58px
---
 index.html | 22 ++++++++++++----------
 server.js  |  4 ++--
 style.css  | 18 ++++++++++++++----
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 937a29d..bb43c81 100644
--- a/index.html
+++ b/index.html
@@ -401,18 +401,20 @@ C, 20, 30, 40</pre>
 
             <!-- 右侧面板：图表预览 + 导出预览 + 风格切换 -->
             <div class="right-panel">
-                <div class="chart-container">
-                    <div id="chartArea" class="chart-area">
-                        <div class="placeholder">
-                            <p>📊</p>
-                            <p>输入数据后点击"生成图表"</p>
+                <div class="right-main">
+                    <div class="chart-container">
+                        <div id="chartArea" class="chart-area">
+                            <div class="placeholder">
+                                <p>📊</p>
+                                <p>输入数据后点击"生成图表"</p>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <!-- 导出效果预览（按分辨率居中展示保存后的图） -->
-                <div class="export-preview-box" id="exportPreviewBox" style="display:none;">
-                    <div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
-                    <div class="export-preview-inner" id="exportPreviewInner"></div>
+                    <!-- 导出效果预览（按分辨率居中展示保存后的图） -->
+                    <div class="export-preview-box" id="exportPreviewBox" style="display:none;">
+                        <div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
+                        <div class="export-preview-inner" id="exportPreviewInner"></div>
+                    </div>
                 </div>
                 <!-- 风格快速切换按钮（放在图表右侧） -->
                 <div class="theme-buttons-section">
diff --git a/server.js b/server.js
index 8a2bbcb..c1652e0 100644
--- a/server.js
+++ b/server.js
@@ -919,7 +919,7 @@ app.get('/api/health', (req, res) => {
     res.json({
         status: 'ok',
         service: 'data-chart-tool',
-        version: '1.11.0',
+        version: '1.11.1',
         endpoints: {
             'POST /api/chart': '生成图表图片（JSON body）',
             'GET /api/chart': '生成图表图片（URL 参数）',
@@ -934,7 +934,7 @@ app.get('/api/health', (req, res) => {
 app.get('/api/docs', (req, res) => {
     res.json({
         name: '数据可视化图表生成器 API',
-        version: '1.11.0',
+        version: '1.11.1',
         endpoints: [
             {
                 method: 'POST',
diff --git a/style.css b/style.css
index 4aa34de..e7f240f 100644
--- a/style.css
+++ b/style.css
@@ -325,9 +325,18 @@ body {
     align-items: flex-start;
 }
 
-.chart-container {
+/* 右侧主区域：原图预览 + 导出预览 上下排列 */
+.right-main {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.chart-container {
+    flex: none;
+    min-width: 0;
     background: var(--panel-bg);
     border-radius: var(--radius);
     padding: 20px;
@@ -337,7 +346,7 @@ body {
 
 .chart-area {
     width: 100%;
-    height: 600px;
+    height: 420px;
 }
 
 .placeholder {
@@ -370,7 +379,7 @@ body {
     }
     
     .chart-area {
-        height: 450px;
+        height: 320px;
     }
     
     /* 小屏幕下风格按钮回到图表下方 */
@@ -725,8 +734,9 @@ input[type="range"]::-moz-range-thumb {
 
 /* 导出设置折叠栏下载按钮（更小，避免挤占） */
 .export-header .btn-sm {
+    flex: 0 0 auto;
+    width: auto;
     padding: 3px 8px;
     font-size: 0.74rem;
     white-space: nowrap;
-    flex-shrink: 0;
 }