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
5 changed files with 1106 additions and 19 deletions
@@ -1,9 +1,9 @@
 # 📊 数据可视化图表生成器

-一个简洁强大的数据可视化工具，支持 **Web UI** 和 **API** 两种方式生成精美的对比图表图片。
+一个简洁强大的数据可视化工具，支持 **Web UI** 和 **API** 两种方式生成精美的对比图表和表格图片。

 ![License](https://img.shields.io/badge/license-MIT-blue.svg)
-![Version](https://img.shields.io/badge/version-1.1.0-green.svg)
+![Version](https://img.shields.io/badge/version-1.2.0-green.svg)

 ## ✨ 功能特性

@@ -12,6 +12,12 @@
 - **折线图** - 支持平滑曲线、面积填充
 - **混合图** - 柱状图+折线图组合展示

+### 📋 表格功能
+- **表格图片生成** - 根据数据生成精美的表格图片
+- **多种主题** - 与图表共享5种主题风格
+- **自定义样式** - 字体大小、斑马纹、边框等可配置
+- **中文支持** - 完美支持中文内容显示
+
 ### 🎨 自定义配置
 - **主题风格** - 5种预设主题（默认/深色/马卡龙/渐变/复古）
 - **颜色自定义** - 每个系列可单独设置颜色
@@ -26,6 +32,8 @@
 ### 📡 API 接口
 - **POST /api/chart** - JSON 请求体生成图表（完整参数支持）
 - **GET /api/chart** - URL 参数生成图表（简单场景）
+- **POST /api/table** - JSON 请求体生成表格图片
+- **GET /api/table** - URL 参数生成表格图片
 - 返回 PNG 图片，支持自定义分辨率和像素倍率

 ### 📥 导出功能
@@ -96,6 +104,26 @@ with open('chart.png', 'wb') as f:
    f.write(resp.content)
 ```

+### 生成表格图片
+
+#### POST 方式
+
+```bash
+curl -X POST http://localhost:16016/api/table \
+  -H "Content-Type: application/json" \
+  -d '{
+    "data": "姓名, 部门, 职位, 薪资\n张三, 技术部, 工程师, 15000\n李四, 产品部, 产品经理, 18000\n王五, 设计部, UI设计师, 16000",
+    "title": "员工信息表",
+    "theme": "default"
+  }' -o table.png
+```
+
+#### GET 方式
+
+```bash
+curl "http://localhost:16016/api/table?data=产品,价格,库存\n手机,2999,100\n平板,1999,50&title=产品列表" -o table.png
+```
+
 ## 📡 API 文档

 ### POST /api/chart
@@ -139,6 +167,38 @@ with open('chart.png', 'wb') as f:
 | width | 图片宽度 |
 | height | 图片高度 |

+### POST /api/table
+
+通过 JSON 请求体生成表格图片。
+
+**请求参数：**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|------|--------|------|
+| data | string | ✅ | - | CSV 格式数据（`\n` 换行，第一行表头） |
+| title | string | - | "" | 表格标题 |
+| theme | string | - | default | 主题：`default` / `dark` / `macarons` / `gradient` / `retro` |
+| fontSize | number | - | 14 | 字体大小 |
+| cellPadding | number | - | 12 | 单元格内边距 |
+| borderWidth | number | - | 1 | 边框宽度 |
+| stripeRows | boolean | - | true | 是否斑马纹 |
+| pixelRatio | number | - | 2 | 像素倍率（清晰度） |
+| maxWidth | number | - | 1200 | 最大宽度(px) |
+
+**返回：** `image/png` 二进制流
+
+### GET /api/table
+
+通过 URL 参数生成表格图片。
+
+| 参数 | 说明 |
+|------|------|
+| data | CSV 数据（换行用 `\n` 表示） |
+| title | 表格标题 |
+| theme | 主题风格 |
+| fontSize | 字体大小 |
+| stripeRows | 是否斑马纹 |
+
 ### GET /api/health

 健康检查，返回服务状态。
@@ -180,6 +240,7 @@ data-chart-tool/
 ## 🔧 开发计划

 - [x] 支持 API 生成图表图片
+- [x] 支持表格图片生成
 - [ ] 支持饼图、雷达图等更多图表类型
 - [ ] 支持从 Excel/CSV 文件导入
 - [ ] 支持数据编辑和实时预览
@@ -3,6 +3,8 @@ let chartInstance = null;
 let parsedData = null;
 let seriesColors = [];
 let seriesOrder = [];
+let currentMode = 'chart'; // 'chart' or 'table'
+let tableImageBlob = null;

 // ===== 预设颜色方案 =====
 const colorPalettes = {
@@ -10,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']
 };

 // ===== 示例数据 =====
@@ -605,3 +617,152 @@ function exportChart(format) {
        svgChart.dispose();
    }
 }
+
+// ===== 模式切换 =====
+function switchMode(mode) {
+    currentMode = mode;
+    
+    // 更新按钮状态
+    document.getElementById('btnChartMode').classList.toggle('active', mode === 'chart');
+    document.getElementById('btnTableMode').classList.toggle('active', mode === 'table');
+    
+    // 显示/隐藏配置区
+    document.getElementById('chartConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
+    document.getElementById('tableConfigSection').style.display = mode === 'table' ? 'block' : 'none';
+    document.getElementById('seriesConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
+    document.getElementById('splitConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
+    
+    // 更新生成按钮
+    const btnGenerate = document.getElementById('btnGenerate');
+    btnGenerate.textContent = mode === 'chart' ? '🎨 生成图表' : '📋 生成表格';
+    
+    // 更新导出按钮
+    const btnExportSvg = document.getElementById('btnExportSvg');
+    btnExportSvg.style.display = mode === 'chart' ? 'inline-flex' : 'none';
+    
+    // 重新生成
+    generate();
+}
+
+// ===== 统一生成入口 =====
+function generate() {
+    if (currentMode === 'chart') {
+        generateChart();
+    } else {
+        generateTable();
+    }
+}
+
+// ===== 更新字体大小显示 =====
+function updateFontSize() {
+    const val = document.getElementById('tableFontSize').value;
+    document.getElementById('fontSizeValue').textContent = val;
+}
+
+// ===== 生成表格 =====
+function generateTable() {
+    const rawText = document.getElementById('dataInput').value;
+    if (!rawText.trim()) {
+        alert('请输入数据');
+        return;
+    }
+
+    const params = {
+        data: rawText,
+        title: document.getElementById('tableTitle').value,
+        theme: document.getElementById('tableTheme').value,
+        fontSize: parseInt(document.getElementById('tableFontSize').value) || 14,
+        stripeRows: document.getElementById('stripeRows').checked,
+        pixelRatio: 2
+    };
+
+    const chartArea = document.getElementById('chartArea');
+    chartArea.innerHTML = '<div class="placeholder"><p>⏳</p><p>正在生成表格...</p></div>';
+
+    fetch('/api/table', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(params)
+    })
+    .then(res => {
+        if (!res.ok) throw new Error('表格生成失败');
+        return res.blob();
+    })
+    .then(blob => {
+        tableImageBlob = blob;
+        const url = URL.createObjectURL(blob);
+        chartArea.innerHTML = `<div class="table-preview"><img src="${url}" alt="表格预览"></div>`;
+    })
+    .catch(err => {
+        chartArea.innerHTML = `<div class="placeholder"><p>❌</p><p>${err.message}</p></div>`;
+    });
+}
+
+// ===== 更新表格（配置变更时） =====
+function updateTable() {
+    if (currentMode === 'table' && document.getElementById('dataInput').value.trim()) {
+        generateTable();
+    }
+}
+
+// ===== 统一导出图片 =====
+function exportImage(format) {
+    if (currentMode === 'chart') {
+        exportChart(format);
+    } else {
+        exportTable(format);
+    }
+}
+
+// ===== 导出表格 =====
+function exportTable(format) {
+    if (!tableImageBlob) {
+        alert('请先生成表格');
+        return;
+    }
+
+    const url = URL.createObjectURL(tableImageBlob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'table.png';
+    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();
+});
@@ -12,18 +12,26 @@
        <!-- 顶部标题 -->
        <header class="app-header">
            <h1>📊 数据可视化图表生成器</h1>
-            <p class="subtitle">粘贴数据，生成精美图表</p>
+            <p class="subtitle">粘贴数据，生成精美图表或表格</p>
        </header>

        <div class="main-content">
            <!-- 左侧面板：数据输入和配置 -->
            <div class="left-panel">
+                <!-- 模式切换 -->
+                <div class="panel-section">
+                    <div class="mode-switch">
+                        <button class="mode-btn active" id="btnChartMode" onclick="switchMode('chart')">📈 图表模式</button>
+                        <button class="mode-btn" id="btnTableMode" onclick="switchMode('table')">📋 表格模式</button>
+                    </div>
+                </div>
+
                <!-- 数据输入区 -->
                <div class="panel-section">
                    <h2>📝 数据输入</h2>
                    <div class="input-format-hint">
                        <p><strong>格式说明：</strong></p>
-                        <p>第一行为表头（系列名称），第一列为横坐标值</p>
+                        <p>第一行为表头，后续行为数据</p>
                        <pre>类别, 系列1, 系列2, 系列3
 A, 10, 20, 30
 B, 15, 25, 35
@@ -31,14 +39,14 @@ C, 20, 30, 40</pre>
                    </div>
                    <textarea id="dataInput" placeholder="在此粘贴数据...&#10;支持逗号、制表符分隔&#10;&#10;示例：&#10;产品, 2023年, 2024年, 2025年&#10;Q1, 120, 150, 180&#10;Q2, 200, 220, 260&#10;Q3, 180, 210, 240&#10;Q4, 250, 280, 320"></textarea>
                    <div class="btn-group">
-                        <button class="btn btn-primary" onclick="generateChart()">🎨 生成图表</button>
+                        <button class="btn btn-primary" id="btnGenerate" onclick="generate()">🎨 生成图表</button>
                        <button class="btn btn-secondary" onclick="loadSampleData()">📋 加载示例</button>
                        <button class="btn btn-secondary" onclick="clearData()">🗑️ 清空</button>
                    </div>
                </div>

                <!-- 图表配置区 -->
-                <div class="panel-section">
+                <div class="panel-section" id="chartConfigSection">
                    <h2>⚙️ 图表配置</h2>
                    
                    <div class="config-group">
@@ -57,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>

@@ -78,8 +103,58 @@ C, 20, 30, 40</pre>
                    </div>
                </div>

+                <!-- 表格配置区 -->
+                <div class="panel-section" id="tableConfigSection" style="display:none;">
+                    <h2>⚙️ 表格配置</h2>
+
+                    <div class="config-group">
+                        <label>标题</label>
+                        <input type="text" id="tableTitle" placeholder="表格标题" oninput="updateTable()">
+                    </div>
+
+                    <div class="config-group">
+                        <label>主题风格</label>
+                        <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>
+
+                    <div class="config-group">
+                        <label>字体大小: <span id="fontSizeValue">14</span>px</label>
+                        <input type="range" id="tableFontSize" min="10" max="24" value="14" oninput="updateFontSize(); updateTable()">
+                    </div>
+
+                    <div class="config-group">
+                        <label>显示选项</label>
+                        <div class="checkbox-group">
+                            <label><input type="checkbox" id="stripeRows" checked onchange="updateTable()"> 斑马纹</label>
+                        </div>
+                    </div>
+                </div>
+
                <!-- 系列配置区 -->
-                <div class="panel-section">
+                <div class="panel-section" id="seriesConfigSection">
                    <h2>🎨 系列配置</h2>
                    <div id="seriesConfig" class="series-config">
                        <p class="hint-text">生成图表后可在此调整各系列的顺序和颜色</p>
@@ -87,7 +162,7 @@ C, 20, 30, 40</pre>
                </div>

                <!-- 区域分割配置 -->
-                <div class="panel-section">
+                <div class="panel-section" id="splitConfigSection">
                    <h2>📐 区域分割</h2>
                    <div class="config-group">
                        <label><input type="checkbox" id="enableSplit" onchange="updateChart()"> 启用区域分割</label>
@@ -119,13 +194,13 @@ C, 20, 30, 40</pre>
                <!-- 导出按钮 -->
                <div class="panel-section">
                    <div class="btn-group">
-                        <button class="btn btn-success" onclick="exportChart('png')">📥 导出PNG</button>
-                        <button class="btn btn-success" onclick="exportChart('svg')">📥 导出SVG</button>
+                        <button class="btn btn-success" onclick="exportImage('png')">📥 导出PNG</button>
+                        <button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
                    </div>
                </div>
            </div>

-            <!-- 右侧面板：图表预览 -->
+            <!-- 右侧面板：图表预览 + 风格切换 -->
            <div class="right-panel">
                <div class="chart-container">
                    <div id="chartArea" class="chart-area">
@@ -135,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>
@@ -1,9 +1,17 @@
 const express = require('express');
 const cors = require('cors');
-const { createCanvas } = require('@napi-rs/canvas');
+const { createCanvas, registerFont } = require('@napi-rs/canvas');
 const echarts = require('echarts');
 const path = require('path');

+// 注册中文字体
+try {
+    registerFont('/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc', { family: 'Noto Sans CJK SC' });
+    registerFont('/usr/share/fonts/opentype/noto/NotoSansCJK-Bold.ttc', { family: 'Noto Sans CJK SC', weight: 'bold' });
+} catch (e) {
+    console.warn('中文字体注册失败，将使用系统默认字体:', e.message);
+}
+
 const app = express();
 const PORT = process.env.PORT || 16016;

@@ -21,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']
 };

 // ===== 数据解析（与前端一致） =====
@@ -391,15 +409,466 @@ app.get('/api/chart', (req, res) => {
    }
 });

+// ===== 表格数据解析（保留原始文本） =====
+function parseTableData(rawText) {
+    const lines = rawText.trim().split('\n').filter(l => l.trim());
+    if (lines.length < 2) {
+        throw new Error('数据至少需要包含表头和一行数据');
+    }
+
+    // 自动检测分隔符
+    let delimiter = ',';
+    if (lines[0].includes('\t')) {
+        delimiter = '\t';
+    } else if (lines[0].split('|').length > lines[0].split(',').length) {
+        delimiter = '|';
+    }
+
+    const rows = lines.map(line => {
+        return line.split(delimiter).map(cell => cell.trim());
+    });
+
+    return {
+        headers: rows[0],
+        rows: rows.slice(1)
+    };
+}
+
+// ===== 表格主题配置 =====
+const tableThemes = {
+    default: {
+        bgColor: '#ffffff',
+        headerBg: '#5470c6',
+        headerColor: '#ffffff',
+        cellColor: '#333333',
+        borderColor: '#e0e0e0',
+        stripeColor: '#f8f9fa',
+        titleColor: '#333333'
+    },
+    dark: {
+        bgColor: '#1a1a2e',
+        headerBg: '#4fc3f7',
+        headerColor: '#1a1a2e',
+        cellColor: '#e0e0e0',
+        borderColor: '#444444',
+        stripeColor: '#252540',
+        titleColor: '#e0e0e0'
+    },
+    macarons: {
+        bgColor: '#ffffff',
+        headerBg: '#2ec7c9',
+        headerColor: '#ffffff',
+        cellColor: '#333333',
+        borderColor: '#e8e8e8',
+        stripeColor: '#f0fafb',
+        titleColor: '#333333'
+    },
+    gradient: {
+        bgColor: '#ffffff',
+        headerBg: '#7f7fd5',
+        headerColor: '#ffffff',
+        cellColor: '#333333',
+        borderColor: '#e8e8e8',
+        stripeColor: '#f5f5ff',
+        titleColor: '#333333'
+    },
+    retro: {
+        bgColor: '#fefefe',
+        headerBg: '#95b9c7',
+        headerColor: '#ffffff',
+        cellColor: '#444444',
+        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'
+    }
+};
+
+// ===== 测量文字宽度 =====
+function measureTextWidth(ctx, text, fontSize) {
+    ctx.font = `${fontSize}px "Noto Sans CJK SC", sans-serif`;
+    const metrics = ctx.measureText(text);
+    return metrics.width;
+}
+
+// ===== 生成表格图片 =====
+function generateTableImage(params) {
+    const {
+        data,
+        title = '',
+        theme = 'default',
+        fontSize = 14,
+        cellPadding = 12,
+        borderWidth = 1,
+        stripeRows = true,
+        pixelRatio = 2,
+        maxWidth = 1200
+    } = params;
+
+    const tableData = parseTableData(data);
+    const { headers, rows } = tableData;
+    const themeConfig = tableThemes[theme] || tableThemes.default;
+
+    // 创建临时 canvas 用于测量文字
+    const tempCanvas = createCanvas(100, 100);
+    const tempCtx = tempCanvas.getContext('2d');
+
+    // 计算每列最大宽度
+    const colWidths = headers.map((header, colIdx) => {
+        let maxW = measureTextWidth(tempCtx, header, fontSize) + cellPadding * 2;
+        
+        rows.forEach(row => {
+            if (row[colIdx]) {
+                const cellW = measureTextWidth(tempCtx, row[colIdx], fontSize) + cellPadding * 2;
+                if (cellW > maxW) maxW = cellW;
+            }
+        });
+        
+        return Math.min(maxW, 300); // 单列最大宽度 300px
+    });
+
+    // 计算表格总宽度
+    const tableWidth = colWidths.reduce((sum, w) => sum + w, 0) + borderWidth * 2;
+    const finalWidth = Math.min(tableWidth, maxWidth);
+    
+    // 如果超出最大宽度，按比例缩放列宽
+    if (tableWidth > maxWidth) {
+        const scale = maxWidth / tableWidth;
+        colWidths.forEach((_, i) => colWidths[i] *= scale);
+    }
+
+    // 计算行高
+    const headerHeight = fontSize * 2.5;
+    const rowHeight = fontSize * 2.2;
+    const titleHeight = title ? fontSize * 3 : 0;
+    const tableHeight = headerHeight + rows.length * rowHeight;
+    const finalHeight = tableHeight + titleHeight;
+
+    // 创建正式 canvas
+    const canvas = createCanvas(finalWidth * pixelRatio, finalHeight * pixelRatio);
+    const ctx = canvas.getContext('2d');
+    ctx.scale(pixelRatio, pixelRatio);
+
+    // 绘制背景
+    ctx.fillStyle = themeConfig.bgColor;
+    ctx.fillRect(0, 0, finalWidth, finalHeight);
+
+    let startY = 0;
+
+    // 绘制标题
+    if (title) {
+        ctx.fillStyle = themeConfig.titleColor;
+        ctx.font = `bold ${fontSize * 1.4}px "Noto Sans CJK SC", sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(title, finalWidth / 2, titleHeight / 2);
+        startY = titleHeight;
+    }
+
+    // 绘制表头背景
+    ctx.fillStyle = themeConfig.headerBg;
+    ctx.fillRect(0, startY, finalWidth, headerHeight);
+
+    // 绘制表头文字
+    ctx.fillStyle = themeConfig.headerColor;
+    ctx.font = `bold ${fontSize}px "Noto Sans CJK SC", sans-serif`;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+
+    let x = 0;
+    headers.forEach((header, i) => {
+        ctx.fillText(header, x + cellPadding, startY + headerHeight / 2, colWidths[i] - cellPadding * 2);
+        x += colWidths[i];
+    });
+
+    // 绘制数据行
+    rows.forEach((row, rowIdx) => {
+        const y = startY + headerHeight + rowIdx * rowHeight;
+
+        // 斑马纹背景
+        if (stripeRows && rowIdx % 2 === 1) {
+            ctx.fillStyle = themeConfig.stripeColor;
+            ctx.fillRect(0, y, finalWidth, rowHeight);
+        }
+
+        // 绘制单元格文字
+        ctx.fillStyle = themeConfig.cellColor;
+        ctx.font = `${fontSize}px "Noto Sans CJK SC", sans-serif`;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+
+        let cellX = 0;
+        row.forEach((cell, colIdx) => {
+            if (cell && colWidths[colIdx]) {
+                ctx.fillText(cell, cellX + cellPadding, y + rowHeight / 2, colWidths[colIdx] - cellPadding * 2);
+            }
+            cellX += colWidths[colIdx];
+        });
+    });
+
+    // 绘制边框
+    ctx.strokeStyle = themeConfig.borderColor;
+    ctx.lineWidth = borderWidth;
+
+    // 外边框（向内偏移半个线宽，确保边框完全在画布内）
+    const offset = borderWidth / 2;
+    ctx.strokeRect(offset, startY + offset, finalWidth - borderWidth, tableHeight - borderWidth);
+
+    // 横线
+    ctx.beginPath();
+    ctx.moveTo(0, startY + headerHeight);
+    ctx.lineTo(finalWidth, startY + headerHeight);
+    ctx.stroke();
+
+    rows.forEach((_, rowIdx) => {
+        const y = startY + headerHeight + (rowIdx + 1) * rowHeight;
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(finalWidth, y);
+        ctx.stroke();
+    });
+
+    // 竖线
+    x = 0;
+    colWidths.forEach((width, i) => {
+        if (i > 0) {
+            ctx.beginPath();
+            ctx.moveTo(x, startY);
+            ctx.lineTo(x, startY + tableHeight);
+            ctx.stroke();
+        }
+        x += width;
+    });
+
+    return canvas;
+}
+
+// ===== API: 生成表格图片 (POST) =====
+app.post('/api/table', (req, res) => {
+    try {
+        const params = req.body;
+
+        if (!params.data) {
+            return res.status(400).json({ error: '缺少 data 参数（CSV 格式数据）' });
+        }
+
+        const pixelRatio = parseInt(params.pixelRatio) || 2;
+        const canvas = generateTableImage(params);
+
+        const buffer = canvas.toBuffer('image/png');
+        res.set({
+            'Content-Type': 'image/png',
+            'Content-Length': buffer.length,
+            'X-Table-Format': 'png'
+        });
+        res.send(buffer);
+    } catch (err) {
+        console.error('Table generation error:', err);
+        res.status(500).json({ error: '表格生成失败: ' + err.message });
+    }
+});
+
+// ===== API: 生成表格图片 (GET) =====
+app.get('/api/table', (req, res) => {
+    try {
+        const params = {
+            data: req.query.data,
+            title: req.query.title || '',
+            theme: req.query.theme || 'default',
+            fontSize: parseInt(req.query.fontSize) || 14,
+            cellPadding: parseInt(req.query.cellPadding) || 12,
+            borderWidth: parseInt(req.query.borderWidth) || 1,
+            stripeRows: req.query.stripeRows !== 'false',
+            pixelRatio: parseInt(req.query.pixelRatio) || 2,
+            maxWidth: parseInt(req.query.maxWidth) || 1200
+        };
+
+        if (!params.data) {
+            return res.status(400).json({ error: '缺少 data 参数' });
+        }
+
+        // 解码 data（支持 URL 编码的换行符）
+        params.data = params.data.replace(/\\n/g, '\n');
+
+        const canvas = generateTableImage(params);
+        const buffer = canvas.toBuffer('image/png');
+        
+        res.set({
+            'Content-Type': 'image/png',
+            'Content-Length': buffer.length,
+            'X-Table-Format': 'png'
+        });
+        res.send(buffer);
+    } catch (err) {
+        console.error('Table generation error:', err);
+        res.status(500).json({ error: '表格生成失败: ' + err.message });
+    }
+});
+
 // ===== API: 健康检查 =====
 app.get('/api/health', (req, res) => {
    res.json({
        status: 'ok',
        service: 'data-chart-tool',
-        version: '1.1.0',
+        version: '1.2.0',
        endpoints: {
            'POST /api/chart': '生成图表图片（JSON body）',
            'GET /api/chart': '生成图表图片（URL 参数）',
+            'POST /api/table': '生成表格图片（JSON body）',
+            'GET /api/table': '生成表格图片（URL 参数）',
            'GET /api/health': '健康检查'
        }
    });
@@ -409,7 +878,7 @@ app.get('/api/health', (req, res) => {
 app.get('/api/docs', (req, res) => {
    res.json({
        name: '数据可视化图表生成器 API',
-        version: '1.1.0',
+        version: '1.2.0',
        endpoints: [
            {
                method: 'POST',
@@ -420,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: '是否显示数据标签' },
@@ -467,6 +936,50 @@ app.get('/api/docs', (req, res) => {
                example: {
                    request: `curl "http://localhost:16016/api/chart?data=产品,Q1,Q2\\n手机,100,200\\n平板,150,250&type=bar&title=测试" -o chart.png`
                }
+            },
+            {
+                method: 'POST',
+                path: '/api/table',
+                description: '通过 JSON 请求体生成表格图片',
+                'Content-Type': 'application/json',
+                params: {
+                    data: { type: 'string', required: true, description: 'CSV 格式数据（第一行表头）' },
+                    title: { type: 'string', default: '', 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: '边框宽度' },
+                    stripeRows: { type: 'boolean', default: true, description: '是否斑马纹' },
+                    pixelRatio: { type: 'number', default: 2, description: '像素倍率（清晰度）' },
+                    maxWidth: { type: 'number', default: 1200, description: '最大宽度(px)' }
+                },
+                returns: 'image/png',
+                example: {
+                    request: `curl -X POST http://localhost:16016/api/table \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "data": "姓名, 部门, 职位, 薪资\\n张三, 技术部, 工程师, 15000\\n李四, 产品部, 产品经理, 18000\\n王五, 设计部, UI设计师, 16000",
+    "title": "员工信息表",
+    "theme": "default"
+  }' -o table.png`,
+                    response: 'PNG 图片二进制流'
+                }
+            },
+            {
+                method: 'GET',
+                path: '/api/table',
+                description: '通过 URL 参数生成表格图片',
+                params: {
+                    data: { type: 'string', required: true, description: 'CSV 数据（换行用 \\n 分隔）' },
+                    title: { type: 'string', description: '表格标题' },
+                    theme: { type: 'string', default: 'default', description: '主题风格' },
+                    fontSize: { type: 'number', default: 14 },
+                    stripeRows: { type: 'boolean', default: true }
+                },
+                returns: 'image/png',
+                example: {
+                    request: `curl "http://localhost:16016/api/table?data=产品,价格,库存\\n手机,2999,100\\n平板,1999,50&title=产品列表" -o table.png`
+                }
            }
        ]
    });
@@ -476,7 +989,8 @@ app.get('/api/docs', (req, res) => {
 app.listen(PORT, '0.0.0.0', () => {
    console.log(`🚀 数据可视化图表生成器已启动`);
    console.log(`📊 Web UI:  http://0.0.0.0:${PORT}`);
-    console.log(`📡 API:    http://0.0.0.0:${PORT}/api/chart`);
+    console.log(`📡 图表API: http://0.0.0.0:${PORT}/api/chart`);
+    console.log(`📋 表格API: http://0.0.0.0:${PORT}/api/table`);
    console.log(`📖 文档:   http://0.0.0.0:${PORT}/api/docs`);
    console.log(`❤️  健康:   http://0.0.0.0:${PORT}/api/health`);
 });
@@ -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);
+    }
 }

 /* ===== 动画 ===== */
@@ -378,3 +397,166 @@ body {
 .panel-section {
    animation: fadeIn 0.3s ease-out;
 }
+
+/* ===== 模式切换 ===== */
+.mode-switch {
+    display: flex;
+    gap: 8px;
+}
+
+.mode-btn {
+    flex: 1;
+    padding: 10px 16px;
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    background: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: var(--text-light);
+}
+
+.mode-btn:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.mode-btn.active {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: white;
+}
+
+/* ===== 表格预览 ===== */
+.table-preview {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+}
+
+.table-preview img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+
+/* ===== 滑块样式 ===== */
+input[type="range"] {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: #e2e8f0;
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--primary);
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--primary);
+    cursor: pointer;
+    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
hz4th_coder	e2f9892a2a	feat: 新增表格图片生成功能 - 新增 POST/GET /api/table 接口 - 支持5种主题风格、自定义字体大小、斑马纹等 - 前端新增图表/表格模式切换 - 完美支持中文内容显示（Noto Sans CJK SC） - 更新 API 文档和 README	2026-07-17 12:40:47 +08:00