fix: 修复表格底部多余空白

- 去掉高度计算中多余的 borderWidth * 2 - 调整边框绘制，向内偏移半个线宽 - 边框紧贴表格内容，无额外空白
feat: 风格切换按钮移至图表右侧
2026-07-17 13:30:26 +08:00 · 2026-07-17 13:21:52 +08:00 · 2026-07-17 13:17:56 +08:00 · 2026-07-17 13:14:47 +08:00 · 2026-07-17 13:10:03 +08:00 · 2026-07-17 12:55:46 +08:00
4 changed files with 454 additions and 10 deletions
@@ -12,7 +12,17 @@ const colorPalettes = {
    dark: ['#4fc3f7', '#81c784', '#fff176', '#ff8a65', '#ba68c8', '#4dd0e1', '#ffab91', '#aed581', '#f48fb1'],
    macarons: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3', '#e5cf0d', '#97b552', '#95706d'],
    gradient: ['#7f7fd5', '#86a8e7', '#91eae4', '#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#5f27cd'],
-    retro: ['#d4a5a5', '#95b9c7', '#f6e8c3', '#dfceb4', '#a4c3b5', '#c9b1ff', '#f5c7b8', '#b8d4e3', '#e8c8a0']
+    retro: ['#d4a5a5', '#95b9c7', '#f6e8c3', '#dfceb4', '#a4c3b5', '#c9b1ff', '#f5c7b8', '#b8d4e3', '#e8c8a0'],
+    ocean: ['#0077b6', '#00b4d8', '#90e0ef', '#caf0f8', '#023e8a', '#48cae4', '#ade8f4', '#0096c7', '#03045e'],
+    forest: ['#2d6a4f', '#40916c', '#52b788', '#74c69d', '#95d5b2', '#b7e4c7', '#d8f3dc', '#1b4332', '#344e41'],
+    sunset: ['#e85d04', '#f48c06', '#faa307', '#ffba08', '#dc2f02', '#d00000', '#9d0208', '#6a040f', '#370617'],
+    lavender: ['#7c3aed', '#8b5cf6', '#a78bfa', '#c4b5fd', '#ddd6fe', '#ede9fe', '#5b21b6', '#4c1d95', '#6d28d9'],
+    minimal: ['#111827', '#374151', '#6b7280', '#9ca3af', '#d1d5db', '#e5e7eb', '#f3f4f6', '#4b5563', '#1f2937'],
+    cherry: ['#e91e63', '#f06292', '#f48fb1', '#f8bbd0', '#fce4ec', '#c2185b', '#ad1457', '#880e4f', '#d81b60'],
+    midnight: ['#6c63ff', '#5a52d5', '#483fb5', '#7c79ff', '#3d3d5c', '#8b89ff', '#9d9bff', '#2c2c4a', '#b3b2ff'],
+    gold: ['#b8860b', '#daa520', '#f0c040', '#ffd700', '#ffe066', '#996515', '#cc9900', '#e6b800', '#8b6914'],
+    coral: ['#ff6f61', '#ff8a70', '#ffa07a', '#ffab91', '#ffccbc', '#e64a19', '#f4511e', '#ff5722', '#d84315'],
+    mint: ['#00bfa5', '#26a69a', '#4db6ac', '#80cbc4', '#b2dfdb', '#00897b', '#00796b', '#004d40', '#009688']
 };

 // ===== 示例数据 =====
@@ -718,3 +728,41 @@ function exportTable(format) {
    a.click();
    URL.revokeObjectURL(url);
 }
+
+// ===== 快速切换风格 =====
+function quickSwitchTheme(theme) {
+    // 更新按钮状态
+    document.querySelectorAll('.theme-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.theme === theme);
+    });
+
+    if (currentMode === 'chart') {
+        // 图表模式：更新主题选择器并重新渲染
+        document.getElementById('themeStyle').value = theme;
+        updateChart();
+    } else {
+        // 表格模式：更新主题选择器并重新请求
+        document.getElementById('tableTheme').value = theme;
+        updateTable();
+    }
+}
+
+// ===== 同步风格按钮状态（下拉框变更时） =====
+function syncThemeButtons(theme) {
+    document.querySelectorAll('.theme-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.theme === theme);
+    });
+}
+
+// ===== 初始化风格按钮状态 =====
+function initThemeButtons() {
+    // 默认激活 default
+    document.querySelectorAll('.theme-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.theme === 'default');
+    });
+}
+
+// 页面加载时初始化
+document.addEventListener('DOMContentLoaded', () => {
+    initThemeButtons();
+});
@@ -65,12 +65,29 @@ C, 20, 30, 40</pre>

                    <div class="config-group">
                        <label>主题风格</label>
-                        <select id="themeStyle" onchange="updateChart()">
+                        <select id="themeStyle" onchange="syncThemeButtons(this.value); updateChart()">
                            <option value="default">默认</option>
                            <option value="dark">深色</option>
                            <option value="macarons">马卡龙</option>
                            <option value="gradient">渐变</option>
                            <option value="retro">复古</option>
+                            <option value="ocean">海洋</option>
+                            <option value="forest">森林</option>
+                            <option value="sunset">日落</option>
+                            <option value="lavender">薰衣草</option>
+                            <option value="minimal">极简</option>
+                            <option value="cherry">樱花</option>
+                            <option value="midnight">午夜</option>
+                            <option value="gold">金色</option>
+                            <option value="coral">珊瑚</option>
+                            <option value="mint">薄荷</option>
+                            <option value="slate">石板灰</option>
+                            <option value="sky">天空蓝</option>
+                            <option value="rose">玫瑰红</option>
+                            <option value="amber">琥珀黄</option>
+                            <option value="emerald">翡翠绿</option>
+                            <option value="indigo">靛蓝色</option>
+                            <option value="stone">石灰白</option>
                        </select>
                    </div>

@@ -97,12 +114,29 @@ C, 20, 30, 40</pre>

                    <div class="config-group">
                        <label>主题风格</label>
-                        <select id="tableTheme" onchange="updateTable()">
+                        <select id="tableTheme" onchange="syncThemeButtons(this.value); updateTable()">
                            <option value="default">默认</option>
                            <option value="dark">深色</option>
                            <option value="macarons">马卡龙</option>
                            <option value="gradient">渐变</option>
                            <option value="retro">复古</option>
+                            <option value="ocean">海洋</option>
+                            <option value="forest">森林</option>
+                            <option value="sunset">日落</option>
+                            <option value="lavender">薰衣草</option>
+                            <option value="minimal">极简</option>
+                            <option value="cherry">樱花</option>
+                            <option value="midnight">午夜</option>
+                            <option value="gold">金色</option>
+                            <option value="coral">珊瑚</option>
+                            <option value="mint">薄荷</option>
+                            <option value="slate">石板灰</option>
+                            <option value="sky">天空蓝</option>
+                            <option value="rose">玫瑰红</option>
+                            <option value="amber">琥珀黄</option>
+                            <option value="emerald">翡翠绿</option>
+                            <option value="indigo">靛蓝色</option>
+                            <option value="stone">石灰白</option>
                        </select>
                    </div>

@@ -166,7 +200,7 @@ C, 20, 30, 40</pre>
                </div>
            </div>

-            <!-- 右侧面板：图表预览 -->
+            <!-- 右侧面板：图表预览 + 风格切换 -->
            <div class="right-panel">
                <div class="chart-container">
                    <div id="chartArea" class="chart-area">
@@ -176,6 +210,100 @@ C, 20, 30, 40</pre>
                        </div>
                    </div>
                </div>
+                <!-- 风格快速切换按钮（放在图表右侧） -->
+                <div class="theme-buttons-section">
+                    <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>
+                            <span class="theme-name">默认</span>
+                        </button>
+                        <button class="theme-btn" data-theme="dark" onclick="quickSwitchTheme('dark')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #4fc3f7, #81c784)"></span>
+                            <span class="theme-name">深色</span>
+                        </button>
+                        <button class="theme-btn" data-theme="macarons" onclick="quickSwitchTheme('macarons')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #2ec7c9, #b6a2de)"></span>
+                            <span class="theme-name">马卡龙</span>
+                        </button>
+                        <button class="theme-btn" data-theme="gradient" onclick="quickSwitchTheme('gradient')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #7f7fd5, #91eae4)"></span>
+                            <span class="theme-name">渐变</span>
+                        </button>
+                        <button class="theme-btn" data-theme="retro" onclick="quickSwitchTheme('retro')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #d4a5a5, #95b9c7)"></span>
+                            <span class="theme-name">复古</span>
+                        </button>
+                        <button class="theme-btn" data-theme="ocean" onclick="quickSwitchTheme('ocean')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #0077b6, #90e0ef)"></span>
+                            <span class="theme-name">海洋</span>
+                        </button>
+                        <button class="theme-btn" data-theme="forest" onclick="quickSwitchTheme('forest')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #2d6a4f, #95d5b2)"></span>
+                            <span class="theme-name">森林</span>
+                        </button>
+                        <button class="theme-btn" data-theme="sunset" onclick="quickSwitchTheme('sunset')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #e85d04, #ffba08)"></span>
+                            <span class="theme-name">日落</span>
+                        </button>
+                        <button class="theme-btn" data-theme="lavender" onclick="quickSwitchTheme('lavender')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #7c3aed, #c4b5fd)"></span>
+                            <span class="theme-name">薰衣草</span>
+                        </button>
+                        <button class="theme-btn" data-theme="minimal" onclick="quickSwitchTheme('minimal')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #6b7280, #d1d5db)"></span>
+                            <span class="theme-name">极简</span>
+                        </button>
+                        <button class="theme-btn" data-theme="cherry" onclick="quickSwitchTheme('cherry')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #e91e63, #f48fb1)"></span>
+                            <span class="theme-name">樱花</span>
+                        </button>
+                        <button class="theme-btn" data-theme="midnight" onclick="quickSwitchTheme('midnight')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #6c63ff, #3d3d5c)"></span>
+                            <span class="theme-name">午夜</span>
+                        </button>
+                        <button class="theme-btn" data-theme="gold" onclick="quickSwitchTheme('gold')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #b8860b, #daa520)"></span>
+                            <span class="theme-name">金色</span>
+                        </button>
+                        <button class="theme-btn" data-theme="coral" onclick="quickSwitchTheme('coral')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #ff6f61, #ffab91)"></span>
+                            <span class="theme-name">珊瑚</span>
+                        </button>
+                        <button class="theme-btn" data-theme="mint" onclick="quickSwitchTheme('mint')">
+                            <span class="theme-preview" style="background: linear-gradient(135deg, #00bfa5, #80cbc4)"></span>
+                            <span class="theme-name">薄荷</span>
+                        </button>
+                        <button class="theme-btn" data-theme="slate" onclick="quickSwitchTheme('slate')">
+                            <span class="theme-preview" style="background: #475569"></span>
+                            <span class="theme-name">石板灰</span>
+                        </button>
+                        <button class="theme-btn" data-theme="sky" onclick="quickSwitchTheme('sky')">
+                            <span class="theme-preview" style="background: #0ea5e9"></span>
+                            <span class="theme-name">天空蓝</span>
+                        </button>
+                        <button class="theme-btn" data-theme="rose" onclick="quickSwitchTheme('rose')">
+                            <span class="theme-preview" style="background: #e11d48"></span>
+                            <span class="theme-name">玫瑰红</span>
+                        </button>
+                        <button class="theme-btn" data-theme="amber" onclick="quickSwitchTheme('amber')">
+                            <span class="theme-preview" style="background: #f59e0b"></span>
+                            <span class="theme-name">琥珀黄</span>
+                        </button>
+                        <button class="theme-btn" data-theme="emerald" onclick="quickSwitchTheme('emerald')">
+                            <span class="theme-preview" style="background: #10b981"></span>
+                            <span class="theme-name">翡翠绿</span>
+                        </button>
+                        <button class="theme-btn" data-theme="indigo" onclick="quickSwitchTheme('indigo')">
+                            <span class="theme-preview" style="background: #6366f1"></span>
+                            <span class="theme-name">靛蓝色</span>
+                        </button>
+                        <button class="theme-btn" data-theme="stone" onclick="quickSwitchTheme('stone')">
+                            <span class="theme-preview" style="background: #78716c"></span>
+                            <span class="theme-name">石灰白</span>
+                        </button>
+                    </div>
+                </div>
            </div>
        </div>
    </div>
@@ -29,7 +29,17 @@ const colorPalettes = {
    dark: ['#4fc3f7', '#81c784', '#fff176', '#ff8a65', '#ba68c8', '#4dd0e1', '#ffab91', '#aed581', '#f48fb1'],
    macarons: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3', '#e5cf0d', '#97b552', '#95706d'],
    gradient: ['#7f7fd5', '#86a8e7', '#91eae4', '#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff', '#5f27cd'],
-    retro: ['#d4a5a5', '#95b9c7', '#f6e8c3', '#dfceb4', '#a4c3b5', '#c9b1ff', '#f5c7b8', '#b8d4e3', '#e8c8a0']
+    retro: ['#d4a5a5', '#95b9c7', '#f6e8c3', '#dfceb4', '#a4c3b5', '#c9b1ff', '#f5c7b8', '#b8d4e3', '#e8c8a0'],
+    ocean: ['#0077b6', '#00b4d8', '#90e0ef', '#caf0f8', '#023e8a', '#48cae4', '#ade8f4', '#0096c7', '#03045e'],
+    forest: ['#2d6a4f', '#40916c', '#52b788', '#74c69d', '#95d5b2', '#b7e4c7', '#d8f3dc', '#1b4332', '#344e41'],
+    sunset: ['#e85d04', '#f48c06', '#faa307', '#ffba08', '#dc2f02', '#d00000', '#9d0208', '#6a040f', '#370617'],
+    lavender: ['#7c3aed', '#8b5cf6', '#a78bfa', '#c4b5fd', '#ddd6fe', '#ede9fe', '#5b21b6', '#4c1d95', '#6d28d9'],
+    minimal: ['#111827', '#374151', '#6b7280', '#9ca3af', '#d1d5db', '#e5e7eb', '#f3f4f6', '#4b5563', '#1f2937'],
+    cherry: ['#e91e63', '#f06292', '#f48fb1', '#f8bbd0', '#fce4ec', '#c2185b', '#ad1457', '#880e4f', '#d81b60'],
+    midnight: ['#6c63ff', '#5a52d5', '#483fb5', '#7c79ff', '#3d3d5c', '#8b89ff', '#9d9bff', '#2c2c4a', '#b3b2ff'],
+    gold: ['#b8860b', '#daa520', '#f0c040', '#ffd700', '#ffe066', '#996515', '#cc9900', '#e6b800', '#8b6914'],
+    coral: ['#ff6f61', '#ff8a70', '#ffa07a', '#ffab91', '#ffccbc', '#e64a19', '#f4511e', '#ff5722', '#d84315'],
+    mint: ['#00bfa5', '#26a69a', '#4db6ac', '#80cbc4', '#b2dfdb', '#00897b', '#00796b', '#004d40', '#009688']
 };

 // ===== 数据解析（与前端一致） =====
@@ -470,6 +480,160 @@ const tableThemes = {
        borderColor: '#d4a5a5',
        stripeColor: '#f6e8c3',
        titleColor: '#444444'
+    },
+    ocean: {
+        bgColor: '#f0f8ff',
+        headerBg: '#0077b6',
+        headerColor: '#ffffff',
+        cellColor: '#023e58',
+        borderColor: '#90e0ef',
+        stripeColor: '#caf0f8',
+        titleColor: '#023e58'
+    },
+    forest: {
+        bgColor: '#f5faf5',
+        headerBg: '#2d6a4f',
+        headerColor: '#ffffff',
+        cellColor: '#1b4332',
+        borderColor: '#95d5b2',
+        stripeColor: '#d8f3dc',
+        titleColor: '#1b4332'
+    },
+    sunset: {
+        bgColor: '#fff8f0',
+        headerBg: '#e85d04',
+        headerColor: '#ffffff',
+        cellColor: '#6a040f',
+        borderColor: '#ffba08',
+        stripeColor: '#fff3e0',
+        titleColor: '#6a040f'
+    },
+    lavender: {
+        bgColor: '#faf5ff',
+        headerBg: '#7c3aed',
+        headerColor: '#ffffff',
+        cellColor: '#4c1d95',
+        borderColor: '#c4b5fd',
+        stripeColor: '#ede9fe',
+        titleColor: '#4c1d95'
+    },
+    minimal: {
+        bgColor: '#ffffff',
+        headerBg: '#f8f9fa',
+        headerColor: '#212529',
+        cellColor: '#495057',
+        borderColor: '#dee2e6',
+        stripeColor: '#f8f9fa',
+        titleColor: '#212529'
+    },
+    cherry: {
+        bgColor: '#fff5f7',
+        headerBg: '#e91e63',
+        headerColor: '#ffffff',
+        cellColor: '#880e4f',
+        borderColor: '#f48fb1',
+        stripeColor: '#fce4ec',
+        titleColor: '#880e4f'
+    },
+    midnight: {
+        bgColor: '#1a1a2e',
+        headerBg: '#6c63ff',
+        headerColor: '#ffffff',
+        cellColor: '#e0e0e0',
+        borderColor: '#3d3d5c',
+        stripeColor: '#22223a',
+        titleColor: '#e0e0e0'
+    },
+    gold: {
+        bgColor: '#fffef5',
+        headerBg: '#b8860b',
+        headerColor: '#ffffff',
+        cellColor: '#5c4a00',
+        borderColor: '#daa520',
+        stripeColor: '#fdf6e3',
+        titleColor: '#5c4a00'
+    },
+    coral: {
+        bgColor: '#fff5f2',
+        headerBg: '#ff6f61',
+        headerColor: '#ffffff',
+        cellColor: '#5d2b1f',
+        borderColor: '#ffab91',
+        stripeColor: '#fff0ed',
+        titleColor: '#5d2b1f'
+    },
+    mint: {
+        bgColor: '#f0fff8',
+        headerBg: '#00bfa5',
+        headerColor: '#ffffff',
+        cellColor: '#004d40',
+        borderColor: '#80cbc4',
+        stripeColor: '#e0f2f1',
+        titleColor: '#004d40'
+    },
+    // 简约纯色风格
+    slate: {
+        bgColor: '#ffffff',
+        headerBg: '#475569',
+        headerColor: '#ffffff',
+        cellColor: '#334155',
+        borderColor: '#cbd5e1',
+        stripeColor: '#f8fafc',
+        titleColor: '#1e293b'
+    },
+    sky: {
+        bgColor: '#ffffff',
+        headerBg: '#0ea5e9',
+        headerColor: '#ffffff',
+        cellColor: '#0c4a6e',
+        borderColor: '#bae6fd',
+        stripeColor: '#f0f9ff',
+        titleColor: '#0c4a6e'
+    },
+    rose: {
+        bgColor: '#ffffff',
+        headerBg: '#e11d48',
+        headerColor: '#ffffff',
+        cellColor: '#881337',
+        borderColor: '#fecdd3',
+        stripeColor: '#fff1f2',
+        titleColor: '#881337'
+    },
+    amber: {
+        bgColor: '#ffffff',
+        headerBg: '#f59e0b',
+        headerColor: '#ffffff',
+        cellColor: '#78350f',
+        borderColor: '#fde68a',
+        stripeColor: '#fffbeb',
+        titleColor: '#78350f'
+    },
+    emerald: {
+        bgColor: '#ffffff',
+        headerBg: '#10b981',
+        headerColor: '#ffffff',
+        cellColor: '#064e3b',
+        borderColor: '#a7f3d0',
+        stripeColor: '#ecfdf5',
+        titleColor: '#064e3b'
+    },
+    indigo: {
+        bgColor: '#ffffff',
+        headerBg: '#6366f1',
+        headerColor: '#ffffff',
+        cellColor: '#312e81',
+        borderColor: '#c7d2fe',
+        stripeColor: '#eef2ff',
+        titleColor: '#312e81'
+    },
+    stone: {
+        bgColor: '#ffffff',
+        headerBg: '#78716c',
+        headerColor: '#ffffff',
+        cellColor: '#44403c',
+        borderColor: '#d6d3d1',
+        stripeColor: '#fafaf9',
+        titleColor: '#292524'
    }
 };

@@ -530,7 +694,7 @@ function generateTableImage(params) {
    const headerHeight = fontSize * 2.5;
    const rowHeight = fontSize * 2.2;
    const titleHeight = title ? fontSize * 3 : 0;
-    const tableHeight = headerHeight + rows.length * rowHeight + borderWidth * 2;
+    const tableHeight = headerHeight + rows.length * rowHeight;
    const finalHeight = tableHeight + titleHeight;

    // 创建正式 canvas
@@ -599,8 +763,9 @@ function generateTableImage(params) {
    ctx.strokeStyle = themeConfig.borderColor;
    ctx.lineWidth = borderWidth;

-    // 外边框
-    ctx.strokeRect(0, startY, finalWidth, tableHeight);
+    // 外边框（向内偏移半个线宽，确保边框完全在画布内）
+    const offset = borderWidth / 2;
+    ctx.strokeRect(offset, startY + offset, finalWidth - borderWidth, tableHeight - borderWidth);

    // 横线
    ctx.beginPath();
@@ -724,7 +889,7 @@ app.get('/api/docs', (req, res) => {
                    data: { type: 'string', required: true, description: 'CSV 格式数据（第一行表头，第一列横坐标）' },
                    chartType: { type: 'string', default: 'bar', options: ['bar', 'line', 'bar-line'], description: '图表类型' },
                    title: { type: 'string', default: '', description: '图表标题' },
-                    theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro'], description: '主题风格' },
+                    theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro', 'ocean', 'forest', 'sunset', 'lavender', 'minimal', 'cherry', 'midnight', 'gold', 'coral', 'mint'], description: '主题风格' },
                    showLegend: { type: 'boolean', default: true, description: '是否显示图例' },
                    showGrid: { type: 'boolean', default: true, description: '是否显示网格线' },
                    showLabel: { type: 'boolean', default: false, description: '是否显示数据标签' },
@@ -780,7 +945,7 @@ app.get('/api/docs', (req, res) => {
                params: {
                    data: { type: 'string', required: true, description: 'CSV 格式数据（第一行表头）' },
                    title: { type: 'string', default: '', description: '表格标题' },
-                    theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro'], description: '主题风格' },
+                    theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro', 'ocean', 'forest', 'sunset', 'lavender', 'minimal', 'cherry', 'midnight', 'gold', 'coral', 'mint'], description: '主题风格' },
                    fontSize: { type: 'number', default: 14, description: '字体大小' },
                    cellPadding: { type: 'number', default: 12, description: '单元格内边距' },
                    borderWidth: { type: 'number', default: 1, description: '边框宽度' },
@@ -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);
+    }
 }

 /* ===== 动画 ===== */
@@ -457,3 +476,87 @@ input[type="range"]::-moz-range-thumb {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
+
+/* ===== 风格快速切换按钮区（右侧） ===== */
+.theme-buttons-section {
+    width: 160px;
+    flex-shrink: 0;
+    background: var(--panel-bg);
+    border-radius: var(--radius);
+    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.9rem;
+    margin-bottom: 12px;
+    color: var(--text);
+    text-align: center;
+}
+
+.theme-buttons-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+}
+
+.theme-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 4px;
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    background: white;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.theme-btn:hover {
+    border-color: var(--primary);
+    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 2px rgba(79, 70, 229, 0.15);
+}
+
+.theme-preview {
+    display: block;
+    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.7rem;
+    color: var(--text-light);
+    font-weight: 500;
+}
+
+.theme-btn.active .theme-name {
+    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;
+}
Author	SHA1	Message	Date
hz4th_coder	c6b930b6d6	fix: 修复表格底部多余空白 - 去掉高度计算中多余的 borderWidth * 2 - 调整边框绘制，向内偏移半个线宽 - 边框紧贴表格内容，无额外空白	2026-07-17 13:30:26 +08:00
hz4th_coder	0e1ef77054	feat: 风格切换按钮移至图表右侧布局调整： - 风格按钮区域移到图表展示区右侧并排显示 - 右侧面板改为 flex 横向布局 - 风格区域固定宽度 160px，每行2个按钮 - 风格区域支持独立滚动 - 小屏幕下自动回到图表下方（响应式）	2026-07-17 13:21:52 +08:00
hz4th_coder	9f4d67a65f	style: 风格切换按钮改为每行两个布局 - 使用 grid 布局，固定两列 - 按钮更宽，预览色块更清晰 - 保持右侧位置，便于快速切换	2026-07-17 13:17:56 +08:00
hz4th_coder	2f85dd5b28	feat: 新增7种简约纯色表格风格新增风格： - slate 石板灰：专业商务 - sky 天空蓝：清爽明亮 - rose 玫瑰红：优雅大方 - amber 琥珀黄：温暖柔和 - emerald 翡翠绿：高贵典雅 - indigo 靛蓝色：沉稳内敛 - stone 石灰白：极简现代特点：纯色表头，简洁干净，无渐变效果	2026-07-17 13:14:47 +08:00
hz4th_coder	3833742d4d	feat: 新增5种主题风格 + 风格快速切换按钮新增主题： - cherry 樱花粉：甜美可爱 - midnight 午夜：深紫高端 - gold 金色：奢华典雅 - coral 珊瑚：时尚活泼 - mint 薄荷：清新凉爽 UI改进： - 在图表展示区下方添加15种风格快速切换按钮 - 每个按钮带渐变色预览，点击即切换 - 图表模式和表格模式都支持全部15种主题 - 下拉框和按钮状态双向同步	2026-07-17 13:10:03 +08:00
hz4th_coder	13abdea15b	feat: 新增5种表格主题风格 - ocean 海洋蓝：清爽专业，适合商务科技场景 - forest 森林绿：自然护眼，适合长时间阅读 - sunset 日落橙：温暖活力，吸引注意力 - lavender 薰衣草紫：优雅浪漫，柔和梦幻 - minimal 极简灰：干净现代，强调内容本身现在共10种表格主题可选	2026-07-17 12:55:46 +08:00