fix: 修复单图模式预览区遮挡导出预览 + 下载按钮宽度

1. 布局重构：右侧主区域改为上下排列（原图预览在上、导出预览在下），
   chartArea 高度 600→420px，导出预览不再被遮挡
2. 下载按钮：根因是 .btn-success 自带 flex:1 把按钮拉伸占满，已用
   flex:0 0 auto + width:auto 覆盖，189px→58px

index.html

@@ -401,18 +401,20 @@ C, 20, 30, 40</pre>
 
             <!-- 右侧面板：图表预览 + 导出预览 + 风格切换 -->
             <div class="right-panel">
-                <div class="chart-container">
+                <div class="right-main">
-                    <div id="chartArea" class="chart-area">
+                    <div class="chart-container">
-                        <div class="placeholder">
+                        <div id="chartArea" class="chart-area">
-                            <p>📊</p>
+                            <div class="placeholder">
-                            <p>输入数据后点击"生成图表"</p>
+                                <p>📊</p>
+                                <p>输入数据后点击"生成图表"</p>
+                            </div>
                         </div>
                     </div>
-                </div>
+                    <!-- 导出效果预览（按分辨率居中展示保存后的图） -->
-                <!-- 导出效果预览（按分辨率居中展示保存后的图） -->
+                    <div class="export-preview-box" id="exportPreviewBox" style="display:none;">
-                <div class="export-preview-box" id="exportPreviewBox" style="display:none;">
+                        <div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
-                    <div class="export-preview-title" id="exportPreviewTitle">📐 导出预览</div>
+                        <div class="export-preview-inner" id="exportPreviewInner"></div>
-                    <div class="export-preview-inner" id="exportPreviewInner"></div>
+                    </div>
                 </div>
                 <!-- 风格快速切换按钮（放在图表右侧） -->
                 <div class="theme-buttons-section">

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',

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;
 }