style: 顶部标题与收藏按钮同一行显示，压缩头部高度给内容区更多空间

feat: 新增收藏功能 - 图/表/合并图一键收藏，按原始大小保存到收藏区，可查看原图/下载/删除，点击编辑在新标签页加载配置再次制作
feat: 新增饼图/雷达图图表类型
2026-08-19 18:16:28 +08:00 · 2026-08-19 17:55:18 +08:00 · 2026-08-19 17:12:18 +08:00 · 2026-08-19 16:39:45 +08:00 · 2026-08-19 13:39:14 +08:00 · 2026-08-19 13:30:35 +08:00
8 changed files with 3386 additions and 76 deletions
@@ -1,4 +1,5 @@
 node_modules/
 logs/
+data/
 *.png
 *.svg
@@ -1,6 +1,6 @@
 # 📡 数据可视化图表生成器 - API 文档

-> 版本：v1.1.0 | 基础地址：`http://192.168.0.101:16016`
+> 版本：v1.9.0 | 基础地址：`http://192.168.0.101:16016`

 ---

@@ -10,6 +10,7 @@
 |------|------|------|
 | POST | `/api/chart` | 生成图表图片（JSON body，推荐） |
 | GET | `/api/chart` | 生成图表图片（URL 参数） |
+| POST | `/api/combine` | 多图合并（横排/竖排）生成一张图 |
 | GET | `/api/health` | 健康检查 |
 | GET | `/api/docs` | 返回本文档（JSON） |

@@ -31,7 +32,7 @@ Content-Type: application/json
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
 |------|------|:----:|--------|------|
 | `data` | string | ✅ | — | CSV 格式数据，`\n` 换行，第一行表头，第一列横坐标 |
-| `chartType` | string | — | `bar` | 图表类型：`bar` / `line` / `bar-line` |
+| `chartType` | string | — | `bar` | 图表类型：`bar` / `line` / `bar-line` / `pie` / `radar` |
 | `title` | string | — | `""` | 图表标题 |
 | `theme` | string | — | `default` | 主题风格：`default` / `dark` / `macarons` / `gradient` / `retro` |
 | `showLegend` | boolean | — | `true` | 显示图例 |
@@ -44,6 +45,11 @@ Content-Type: application/json
 | `leftLabel` | string | — | `"左侧"` | 左侧区域标签 |
 | `rightLabel` | string | — | `"右侧"` | 右侧区域标签 |
 | `splitStyle` | string | — | `"solid"` | 分割线样式：`solid` / `dashed` / `dotted` |
+| `dualYAxis` | boolean | — | `false` | 启用双Y轴（左右量度不同） |
+| `rightAxisSeries` | array | — | `null` | 右轴系列名列表，如 `["利润"]`（未列出的系列用左轴） |
+| `leftAxisName` | string | — | `""` | 左轴名称（如 `"销售额(元)"`） |
+| `rightAxisName` | string | — | `""` | 右轴名称（如 `"增长率(%)"`） |
+| `seriesTypes` | array | — | `null` | 每系列图表类型，按系列顺序对应，如 `["bar","line"]`（`bar`/`line`/`auto`） |
 | `width` | number | — | `800` | 图片宽度（px） |
 | `height` | number | — | `500` | 图片高度（px） |
 | `pixelRatio` | number | — | `2` | 像素倍率（越大越清晰） |
@@ -151,7 +157,85 @@ curl "http://192.168.0.101:16016/api/chart?data=%E4%BA%A7%E5%93%81,Q1,Q2%0A%E6%8

 ---

-## 3. GET /api/health
+## 3. POST /api/combine（多图合并）
+
+将**多张图表**合并到一张图片中（默认 2 张，可多张），支持**横排（单行）**、**竖排（单列）**、**多行多列网格**三种排布，返回 PNG 图片。
+
+### 请求
+
+```
+POST /api/combine
+Content-Type: application/json
+```
+
+### 参数说明
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `charts` | array | ✅ | 图表配置数组（N 张），每项同 `/api/chart` 参数：data/chartType/title/theme 等 |
+| `direction` | string | 否 | `horizontal` 横排（默认）/ `vertical` 竖排 / `grid` 多行多列 |
+| `cols` | number | 否 | 多行多列时的每行列数（默认 2，仅 `grid` 生效） |
+| `gap` | number | 否 | 图间距（默认 24px） |
+| `pixelRatio` | number | 否 | 像素倍率，默认 2（越清晰文件越大） |
+| `background` | string | 否 | 背景色，默认 `#ffffff` |
+
+> 兼容旧参数：`chart1` + `chart2` 仍可传（等价于 `charts: [chart1, chart2]`）。
+
+每个子图配置支持：`data`（CSV）、`chartType`（bar/line/bar-line/pie/radar）、`title`、`theme`、`showLegend`、`showGrid`、`showLabel`、`stackMode`、`smoothLine`、`width`、`height`。
+
+### curl 示例
+
+**横排三张图（左右并排）：**
+```bash
+curl -X POST http://127.0.0.1:16016/api/combine \
+  -H "Content-Type: application/json" \
+  -d '{
+    "charts": [
+      {"data": "产品, Q1, Q2\n手机, 1200, 1800\n平板, 800, 950", "title": "销售", "chartType": "bar"},
+      {"data": "月份, 营收\n1月, 500\n2月, 680\n3月, 820", "title": "趋势", "chartType": "line"},
+      {"data": "地区, 销量\n华东, 300\n华南, 450", "title": "地区销量", "chartType": "bar"}
+    ],
+    "direction": "horizontal"
+  }' -o combine.png
+```  -d '{
+    "chart1": {
+      "data": "产品, Q1, Q2\n手机, 1200, 1800\n平板, 800, 950",
+      "title": "2024年销售",
+      "chartType": "bar"
+    },
+    "chart2": {
+      "data": "月份, 营收\n1月, 500\n2月, 680\n3月, 820",
+      "title": "营收趋势",
+      "chartType": "line"
+    },
+    "direction": "horizontal"
+  }' -o combine.png
+```
+
+**竖排（上下堆叠）：**
+```bash
+curl -X POST http://127.0.0.1:16016/api/combine \
+  -H "Content-Type: application/json" \
+  -d '{
+    "chart1": {"data": "指标, 2023年\n营收, 500\n利润, 80", "title": "营收对比", "chartType": "bar"},
+    "chart2": {"data": "月份, 效率\n1月, 85\n2月, 88", "title": "效率趋势", "chartType": "line"},
+    "direction": "vertical"
+  }' -o combine.png
+```
+
+### 返回
+
+PNG 图片二进制流，响应头包含：
+
+| 响应头 | 说明 |
+|--------|------|
+| `Content-Type` | `image/png` |
+| `X-Combine-Direction` | `horizontal` / `vertical` |
+| `X-Chart-Width` / `X-Chart-Height` | 合并图逻辑尺寸 |
+
+---
+
+## 4. GET /api/health

 健康检查。

@@ -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.8.0-green.svg)

 ## ✨ 功能特性

@@ -11,6 +11,15 @@
 - **柱状图** - 支持单系列/多系列对比
 - **折线图** - 支持平滑曲线、面积填充
 - **混合图** - 柱状图+折线图组合展示
+- **饼图** - 环形占比展示（第一列=名称，第一系列=数值）
+- **雷达图** - 多维度对比（第一列=维度，每个系列=一个多边形）
+- **双Y轴** - 一张图左右两个坐标轴，量度可不同，左右轴可独立命名，系列可指定左轴/右轴且每种类型独立设置（柱状/折线）
+
+### 📋 表格功能
+- **表格图片生成** - 根据数据生成精美的表格图片
+- **多种主题** - 与图表共享5种主题风格
+- **自定义样式** - 字体大小、斑马纹、边框等可配置
+- **中文支持** - 完美支持中文内容显示

 ### 🎨 自定义配置
 - **主题风格** - 5种预设主题（默认/深色/马卡龙/渐变/复古）
@@ -23,13 +32,26 @@
 - 可自定义分割线样式（实线/虚线/点线）
 - 自动标注左右区域标签

+### 🖼️ 多图合并
+- 将多张图表合并到一张图片中，适合对比/汇总场景，**默认2张，可一键不断添加**（支持删除）
+- 支持**横排（单行）**、**竖排（单列）**、**多行多列网格**（可设每行列数），一键切换实时预览
+- 每张图可独立配置：数据、标题、图表类型、主题、图例/网格/标签/堆叠
+- 支持导出 PNG
+
 ### 📡 API 接口
 - **POST /api/chart** - JSON 请求体生成图表（完整参数支持）
 - **GET /api/chart** - URL 参数生成图表（简单场景）
+- **POST /api/table** - JSON 请求体生成表格图片
+- **GET /api/table** - URL 参数生成表格图片
+- **POST /api/combine** - 多图合并（横排/竖排）生成一张图片
 - 返回 PNG 图片，支持自定义分辨率和像素倍率

 ### 📥 导出功能
- Web UI 导出 PNG（2倍分辨率）
+- 导出设置：分辨率预设（原始/1920×1080/1280×720/1024×768/800×600/自定义）
+- 自定义分辨率手动输入，页面实时居中预览保存后的图
+- 分辨率历史记忆（最近5个，localStorage 持久化，一键复用）
+- 文件名默认按日期时间自动命名（每次不同），支持手动命名
+- Web UI 导出 PNG / 图表模式支持 SVG
 - API 直接返回 PNG 图片流

 ## 🚀 快速开始
@@ -96,6 +118,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 +181,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 +254,7 @@ data-chart-tool/
 ## 🔧 开发计划

 - [x] 支持 API 生成图表图片
+- [x] 支持表格图片生成
 - [ ] 支持饼图、雷达图等更多图表类型
 - [ ] 支持从 Excel/CSV 文件导入
 - [ ] 支持数据编辑和实时预览
@@ -11,19 +11,33 @@
    <div class="app-container">
        <!-- 顶部标题 -->
        <header class="app-header">
-            <h1>📊 数据可视化图表生成器</h1>
-            <p class="subtitle">粘贴数据，生成精美图表</p>
+            <div class="header-title">
+                <h1>📊 数据可视化图表生成器</h1>
+                <p class="subtitle">粘贴数据，生成精美图表或表格</p>
+            </div>
+            <div class="header-actions">
+                <button class="btn btn-fav-outline" onclick="openFavorites()">⭐ 收藏区</button>
+            </div>
        </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>
+                        <button class="mode-btn" id="btnCombineMode" onclick="switchMode('combine')">🖼️ 多图合并</button>
+                    </div>
+                </div>
+
+                <!-- 数据输入区 -->
+                <div class="panel-section" id="dataInputSection">
                    <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 +45,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">
@@ -47,6 +61,8 @@ C, 20, 30, 40</pre>
                            <option value="bar">柱状图</option>
                            <option value="line">折线图</option>
                            <option value="bar-line">柱状图+折线图混合</option>
+                            <option value="pie">饼图</option>
+                            <option value="radar">雷达图</option>
                        </select>
                    </div>

@@ -57,12 +73,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>

@@ -74,12 +107,89 @@ C, 20, 30, 40</pre>
                            <label><input type="checkbox" id="showLabel" onchange="updateChart()"> 数据标签</label>
                            <label><input type="checkbox" id="stackMode" onchange="updateChart()"> 堆叠模式</label>
                            <label><input type="checkbox" id="smoothLine" checked onchange="updateChart()"> 平滑曲线</label>
+                            <label><input type="checkbox" id="dualAxis" onchange="onDualAxisChange()"> 双Y轴</label>
                        </div>
                    </div>
+
+                    <div class="config-group" id="rightAxisGroup" style="display:none;">
+                        <label>左右轴名称（量度可不同）</label>
+                        <div class="res-input-row">
+                            <input type="text" id="leftAxisName" placeholder="左轴，如：销售额" oninput="updateChart()">
+                            <span class="res-times">/</span>
+                            <input type="text" id="rightAxisName" placeholder="右轴，如：增长率(%)" oninput="updateChart()">
+                        </div>
+                        <p class="hint-text">在下方「系列配置」中可指定每个系列用左轴/右轴及图表类型（柱状/折线）</p>
+                    </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 class="config-group">
+                        <label>边框样式</label>
+                        <select id="borderStyle" onchange="updateTable()">
+                            <option value="all">全部边框</option>
+                            <option value="none">无边框</option>
+                            <option value="no-outer">无外边线</option>
+                            <option value="no-horizontal">无横线</option>
+                            <option value="no-vertical">无竖线</option>
+                            <option value="no-inner">无内部线</option>
+                            <option value="no-inner-horizontal">无内部横线</option>
+                            <option value="no-inner-vertical">无内部竖线</option>
+                            <option value="outer-only">仅外边框</option>
+                            <option value="header-only">仅表头分隔线</option>
+                        </select>
+                    </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 +197,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>
@@ -116,29 +226,217 @@ C, 20, 30, 40</pre>
                    </div>
                </div>

-                <!-- 导出按钮 -->
-                <div class="panel-section">
+                <!-- 导出设置 + 按钮（默认折叠） -->
+                <div class="panel-section" id="exportSection">
+                    <div class="export-header">
+                        <div class="export-header-main" onclick="toggleExportSettings()" title="点击展开/折叠">
+                            <h2>📤 导出设置</h2>
+                            <span class="export-summary" id="exportSummary">原始大小</span>
+                            <span class="export-toggle" id="exportToggle">▸</span>
+                        </div>
+                        <button class="btn btn-success btn-sm" onclick="exportImage('png')">📥 下载</button>
+                        <button class="btn btn-fav btn-sm" id="btnFavorite" onclick="saveFavorite()">⭐ 收藏</button>
+                    </div>
+
+                    <div id="exportSettingsBody" class="export-settings-body" style="display:none;">
+                        <div class="config-group">
+                            <label>分辨率</label>
+                            <select id="exportPreset" onchange="onExportPresetChange()">
+                                <option value="original">原始大小</option>
+                                <option value="1920x1080">1920 × 1080</option>
+                                <option value="1280x720">1280 × 720</option>
+                                <option value="1024x768">1024 × 768</option>
+                                <option value="800x600">800 × 600</option>
+                                <option value="custom">自定义</option>
+                            </select>
+                        </div>
+
+                        <div class="config-group" id="customResGroup" style="display:none;">
+                            <label>自定义分辨率（宽 × 高）</label>
+                            <div class="res-input-row">
+                                <input type="number" id="customWidth" min="1" max="8192" placeholder="宽" oninput="onCustomResInput()">
+                                <span class="res-times">×</span>
+                                <input type="number" id="customHeight" min="1" max="8192" placeholder="高" oninput="onCustomResInput()">
+                            </div>
+                        </div>
+
+                        <div class="config-group">
+                            <label>历史分辨率（最近5个）</label>
+                            <select id="exportHistory" onchange="onHistorySelect()">
+                                <option value="">— 暂无历史 —</option>
+                            </select>
+                        </div>
+
+                        <div class="config-group">
+                            <label>文件名</label>
+                            <input type="text" id="exportFilename" placeholder="留空则按日期时间自动命名">
+                            <p class="hint-text" id="exportResHint"></p>
+                        </div>
+
+                        <div class="btn-group">
+                            <button class="btn btn-secondary" onclick="resetExportSettings()">🔄 恢复默认</button>
+                            <button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 多图合并配置区 -->
+                <div class="panel-section" id="combineConfigSection" style="display:none;">
+                    <h2>🖼️ 多图合并配置</h2>
+
+                    <div class="config-group">
+                        <label>排列方式</label>
+                        <div class="combine-direction">
+                            <label class="dir-option"><input type="radio" name="combineDirection" value="horizontal" checked onchange="generateCombine()"> ⇄ 横排（单行）</label>
+                            <label class="dir-option"><input type="radio" name="combineDirection" value="vertical" onchange="generateCombine()"> ⇅ 竖排（单列）</label>
+                            <label class="dir-option"><input type="radio" name="combineDirection" value="grid" onchange="onCombineGridToggle()"> ▦ 多行多列</label>
+                        </div>
+                    </div>
+
+                    <div class="config-group" id="gridColsGroup" style="display:none;">
+                        <label>每行列数</label>
+                        <input type="number" id="gridCols" value="2" min="1" max="6" oninput="generateCombine()">
+                    </div>
+
+                    <div id="combineChartsContainer">
+                        <!-- 图表卡片由 JS 动态渲染 -->
+                    </div>
+
                    <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-secondary" onclick="addCombineChart()">＋ 添加图表</button>
+                        <button class="btn btn-primary" onclick="generateCombine()">🖼️ 生成合并图</button>
+                        <button class="btn btn-success" onclick="exportImage('png')">📥 下载图片</button>
                    </div>
                </div>
            </div>

-            <!-- 右侧面板：图表预览 -->
+            <!-- 右侧面板：图表预览 + 导出预览 + 风格切换 -->
            <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 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">
+                    <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>

    <script src="app.js"></script>
+
+    <!-- 收藏区弹窗 -->
+    <div class="fav-modal" id="favoritesModal" onclick="if(event.target===this)closeFavorites()">
+        <div class="fav-modal-box">
+            <div class="fav-modal-head">
+                <h2>⭐ 收藏区</h2>
+                <button class="btn btn-remove" onclick="closeFavorites()" title="关闭">✕</button>
+            </div>
+            <div class="fav-modal-tip">共 <span id="favCount">0</span> 条 · 点击图片看原图 · 「编辑」在新标签页再次制作</div>
+            <div class="fav-list" id="favoritesList"></div>
+        </div>
+    </div>
 </body>
 </html>
@@ -0,0 +1,55 @@
+#!/bash
+# data-chart-tool 保活脚本
+# 检查服务是否运行，如果没有则启动
+
+PORT=16016
+APP_DIR="/home/openclaw/.openclaw/workspace-hz4th_coder/works/data-chart-tool"
+LOG_FILE="$APP_DIR/logs/server.log"
+
+# node 绝对路径（cron 环境 PATH 不含 nvm，必须用全路径）
+NODE_BIN="$HOME/.nvm/versions/node/v24.15.0/bin/node"
+if [ ! -x "$NODE_BIN" ]; then
+    NODE_BIN="$(command -v node 2>/dev/null)"
+fi
+
+# 检查端口是否被占用
+if ss -tlnp | grep -q ":$PORT "; then
+    # 检查是不是 node 进程
+    PID=$(ss -tlnp | grep ":$PORT " | grep -oP 'pid=\K[0-9]+' | head -1)
+    if [ -n "$PID" ]; then
+        CMD=$(ps -p "$PID" -o comm= 2>/dev/null)
+        if [ "$CMD" = "node" ] || [ "$CMD" = "MainThread" ]; then
+            # node 服务在运行，检查是否正常响应
+            HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:$PORT/api/health 2>/dev/null)
+            if [ "$HTTP_CODE" = "200" ]; then
+                echo "[$(date)] Service OK (PID=$PID, HTTP=$HTTP_CODE)"
+                exit 0
+            fi
+        fi
+        # 端口被非 node 进程占用（如 Python http.server），杀掉它
+        echo "[$(date)] Port $PORT occupied by $CMD (PID=$PID), killing..."
+        kill -9 "$PID" 2>/dev/null
+        sleep 1
+    fi
+fi
+
+# 启动 node 服务
+if [ -z "$NODE_BIN" ] || [ ! -x "$NODE_BIN" ]; then
+    echo "[$(date)] ERROR: node 未找到，无法启动"
+    exit 1
+fi
+echo "[$(date)] Starting data-chart-tool..."
+cd "$APP_DIR"
+nohup "$NODE_BIN" server.js >> "$LOG_FILE" 2>&1 &
+echo "[$(date)] Started with PID $!"
+
+# 等待启动
+sleep 2
+
+# 验证
+HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:$PORT/api/health 2>/dev/null)
+if [ "$HTTP_CODE" = "200" ]; then
+    echo "[$(date)] Service started successfully (HTTP=$HTTP_CODE)"
+else
+    echo "[$(date)] WARNING: Service may not have started correctly (HTTP=$HTTP_CODE)"
+fi
@@ -35,12 +35,22 @@ body {
 }

 .app-header {
-    text-align: center;
-    padding: 20px 0 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+    text-align: left;
+    padding: 6px 0 10px;
+}
+
+.header-title {
+    min-width: 0;
 }

 .app-header h1 {
-    font-size: 2rem;
+    font-size: 1.35rem;
+    margin: 0;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
@@ -49,8 +59,8 @@ body {

 .subtitle {
    color: var(--text-light);
-    margin-top: 5px;
-    font-size: 0.95rem;
+    margin-top: 2px;
+    font-size: 0.8rem;
 }

 .main-content {
@@ -65,7 +75,7 @@ body {
    display: flex;
    flex-direction: column;
    gap: 16px;
-    max-height: calc(100vh - 140px);
+    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 8px;
 }
@@ -205,7 +215,8 @@ body {

 .config-group select,
 .config-group input[type="text"],
-.config-group input[type="number"] {
+.config-group input[type="number"],
+.config-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
@@ -215,8 +226,15 @@ body {
    transition: border-color 0.2s;
 }

+.config-group textarea {
+    font-family: inherit;
+    resize: vertical;
+    min-height: 80px;
+}
+
 .config-group select:focus,
-.config-group input:focus {
+.config-group input:focus,
+.config-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
@@ -320,9 +338,23 @@ body {
 .right-panel {
    position: sticky;
    top: 20px;
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+/* 右侧主区域：原图预览 + 导出预览 上下排列 */
+.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;
@@ -332,7 +364,7 @@ body {

 .chart-area {
    width: 100%;
-    height: 600px;
+    height: 420px;
 }

 .placeholder {
@@ -365,7 +397,21 @@ body {
    }
    
    .chart-area {
-        height: 450px;
+        height: 320px;
+    }
+    
+    /* 小屏幕下风格按钮回到图表下方 */
+    .right-panel {
+        flex-direction: column;
+    }
+    
+    .theme-buttons-section {
+        width: 100%;
+        max-height: none;
+    }
+    
+    .theme-buttons-grid {
+        grid-template-columns: repeat(4, 1fr);
    }
 }

@@ -378,3 +424,570 @@ 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;
+}
+
+/* ===== 双图合并 ===== */
+.combine-direction {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.dir-option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: #f8fafc;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+}
+
+.dir-option:hover {
+    border-color: var(--primary);
+}
+
+.dir-option:has(input:checked) {
+    border-color: var(--primary);
+    background: #eef2ff;
+    color: var(--primary);
+    font-weight: 500;
+}
+
+.combine-chart-card {
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 14px;
+    margin-bottom: 14px;
+    background: #f8fafc;
+}
+
+.combine-chart-card h3 {
+    font-size: 0.95rem;
+    margin: 0;
+    color: var(--text);
+}
+
+.combine-card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px dashed var(--border);
+}
+
+.btn-remove {
+    background: #fee2e2;
+    color: #dc2626;
+    border: none;
+    border-radius: 6px;
+    width: 24px;
+    height: 24px;
+    line-height: 1;
+    font-size: 0.8rem;
+    cursor: pointer;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-remove:hover {
+    background: #fecaca;
+}
+
+/* ===== 表格预览 ===== */
+.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;
+}
+
+/* ===== 导出设置 ===== */
+.res-input-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.res-input-row input[type="number"] {
+    flex: 1;
+    min-width: 0;
+}
+
+.res-times {
+    color: var(--text-light);
+    font-weight: 600;
+}
+
+/* ===== 导出预览（按分辨率居中展示保存后的图） ===== */
+.export-preview-box {
+    margin-top: 14px;
+    border: 1px dashed var(--border);
+    border-radius: 10px;
+    background: #ffffff;
+    padding: 10px;
+}
+
+.export-preview-title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-light);
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.export-preview-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 120px;
+    background: repeating-conic-gradient(#f1f5f9 0% 25%, #ffffff 0% 50%) 0 0 / 20px 20px;
+    border-radius: 8px;
+    padding: 12px;
+    overflow: auto;
+}
+
+.export-preview-inner img {
+    max-width: 100%;
+    max-height: 300px;
+    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
+    border-radius: 4px;
+    background: #fff;
+}
+
+.export-preview-size {
+    font-size: 0.78rem;
+    color: var(--primary);
+    background: #eef2ff;
+    border-radius: 4px;
+    padding: 1px 8px;
+    font-weight: 600;
+}
+
+/* ===== 导出设置折叠栏 ===== */
+.export-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.export-header-main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    cursor: pointer;
+    user-select: none;
+    padding: 2px 0;
+}
+
+.export-header h2 {
+    font-size: 1rem;
+    margin: 0;
+    color: var(--text);
+}
+
+.export-summary {
+    font-size: 0.75rem;
+    color: var(--primary);
+    background: #eef2ff;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.export-toggle {
+    color: var(--text-light);
+    font-size: 0.8rem;
+    transition: transform 0.2s;
+}
+
+.export-settings-body {
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px dashed var(--border);
+}
+
+.btn-sm {
+    padding: 4px 10px;
+    font-size: 0.78rem;
+}
+
+/* 导出设置折叠栏下载按钮（更小，避免挤占） */
+.export-header .btn-sm {
+    flex: 0 0 auto;
+    width: auto;
+    padding: 3px 8px;
+    font-size: 0.74rem;
+    white-space: nowrap;
+}
+
+/* ===== 收藏功能 ===== */
+.header-actions {
+    margin-top: 0;
+    flex-shrink: 0;
+}
+
+.btn-fav-outline {
+    background: #fff7ed;
+    color: #b45309;
+    border: 1px solid #fcd34d;
+    font-size: 0.88rem;
+}
+
+.btn-fav-outline:hover {
+    background: #ffedd5;
+    border-color: #f59e0b;
+}
+
+.btn-fav {
+    background: #f59e0b;
+    color: #fff;
+}
+
+.btn-fav:hover {
+    background: #d97706;
+}
+
+.btn-fav:disabled {
+    background: #fcd34d;
+    cursor: wait;
+    transform: none;
+}
+
+/* 收藏区弹窗 */
+.fav-modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    background: rgba(15, 23, 42, 0.55);
+    backdrop-filter: blur(3px);
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+}
+
+.fav-modal-box {
+    width: min(1080px, 96vw);
+    max-height: 88vh;
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.fav-modal-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 22px;
+    border-bottom: 1px solid var(--border);
+    background: #fffbeb;
+}
+
+.fav-modal-head h2 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #92400e;
+}
+
+.fav-modal-tip {
+    padding: 8px 22px;
+    font-size: 0.8rem;
+    color: var(--text-light);
+    background: #f8fafc;
+    border-bottom: 1px solid var(--border);
+}
+
+.fav-modal-tip #favCount {
+    font-weight: 700;
+    color: #b45309;
+}
+
+.fav-list {
+    padding: 18px 22px;
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 16px;
+    align-content: start;
+}
+
+.fav-empty {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 60px 20px;
+    color: var(--text-light);
+    font-size: 0.95rem;
+}
+
+.fav-card {
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+    background: #fff;
+    box-shadow: var(--shadow);
+    transition: box-shadow 0.2s, transform 0.2s;
+}
+
+.fav-card:hover {
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-2px);
+}
+
+.fav-card-img {
+    position: relative;
+    height: 200px;
+    background: repeating-conic-gradient(#f1f5f9 0% 25%, #ffffff 0% 50%) 0 0 / 20px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: zoom-in;
+}
+
+.fav-card-img img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.fav-badge {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    background: rgba(79, 70, 229, 0.9);
+    color: #fff;
+    font-size: 0.72rem;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-weight: 600;
+}
+
+.fav-card-body {
+    padding: 10px 12px 12px;
+}
+
+.fav-card-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 4px;
+}
+
+.fav-card-meta {
+    font-size: 0.74rem;
+    color: var(--text-light);
+    margin-bottom: 8px;
+}
+
+.fav-card-actions {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.fav-card-actions .btn-sm {
+    padding: 3px 10px;
+    font-size: 0.75rem;
+    flex: 0 0 auto;
+}
+
+.fav-card-actions .btn-remove {
+    margin-left: auto;
+}
+
+/* Toast 提示 */
+#appToast {
+    position: fixed;
+    bottom: 28px;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    background: rgba(17, 24, 39, 0.92);
+    color: #fff;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-size: 0.88rem;
+    z-index: 10000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s, transform 0.25s;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    max-width: 80vw;
+    text-align: center;
+}
+
+#appToast.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
Author	SHA1	Message	Date
hz4th_coder	94aa37e612	style: 顶部标题与收藏按钮同一行显示，压缩头部高度给内容区更多空间	2026-08-19 18:16:28 +08:00
hz4th_coder	606610f8d3	feat: 新增收藏功能 - 图/表/合并图一键收藏，按原始大小保存到收藏区，可查看原图/下载/删除，点击编辑在新标签页加载配置再次制作	2026-08-19 17:55:18 +08:00
hz4th_coder	7a03ecc063	feat: 新增饼图/雷达图图表类型 - 单图模式图表类型新增：饼图（环形占比，第一列=名称/第一系列=数值）、雷达图（多维度对比，第一列=维度/每系列=多边形） - 多图合并的每张图也可选饼图/雷达图 - 后端 /api/chart 与 /api/combine 的 chartType 支持 pie/radar - 饼图/雷达图自动隐藏坐标轴/网格/双轴等不适用配置	2026-08-19 17:12:18 +08:00
hz4th_coder	d7c7c08407	fix: keepalive 保活脚本改用 node 绝对路径 cron 环境 PATH 不含 nvm 目录，nohup node 找不到命令导致服务一直拉不起来（HTTP=000）。改用 $HOME/.nvm/.../bin/node 绝对路径，模拟 cron 最小环境验证可正常拉起。	2026-08-19 16:39:45 +08:00
hz4th_coder	6b5223daec	feat: 多图合并支持多行多列网格排布 + 统一'多图合并'文案 - 合并模式新增'多行多列'排布（radio），可选每行列数（gridCols），子图按最大单元格 contain 居中排列，列数变化实时重排 - 后端 /api/combine 支持 direction=grid + cols 参数 - 页面所有'双图合并'文案统一改为'多图合并'	2026-08-19 13:39:14 +08:00
hz4th_coder	e56c6cb79f	feat: 双图合并升级为多图合并 + 数据输入框加宽 - 合并模式默认2张图，新增'＋添加图表'按钮可不断添加，每张图可独立删除 - 每张图卡片：标题/类型/主题/显示选项/数据，动态渲染（combineCharts 数组驱动） - 合并逻辑支持 N 张图：横排等高依次排列、竖排等宽依次堆叠 - 后端 /api/combine 支持 charts 数组（N 张），兼容 chart1+chart2 - 修复合并图数据输入框过窄：.config-group textarea 统一 width:100%（与设置区一致）	2026-08-19 13:30:35 +08:00
hz4th_coder	576024af76	feat: 双Y轴左右轴可独立命名 + 不同轴可设不同图表类型 - 双Y轴：左右两个轴都可单独命名（左轴名称/右轴名称输入框） - 修复系列类型下拉不生效的 bug（seriesTypeOverrides 只写不读），现在每个系列可独立设置柱状/折线，结合轴分配实现'左轴柱状+右轴折线' - 后端 /api/chart 新增 leftAxisName + seriesTypes 参数（POST/GET 均可）	2026-08-19 13:19:28 +08:00
hz4th_coder	68e4b72d46	fix: 修复单图模式预览区遮挡导出预览 + 下载按钮宽度 1. 布局重构：右侧主区域改为上下排列（原图预览在上、导出预览在下）， chartArea 高度 600→420px，导出预览不再被遮挡 2. 下载按钮：根因是 .btn-success 自带 flex:1 把按钮拉伸占满，已用 flex:0 0 auto + width:auto 覆盖，189px→58px	2026-08-19 13:09:51 +08:00
hz4th_coder	6a696daeb8	feat: 单图模式新增双Y轴 + 下载按钮缩小 - 图表模式新增双Y轴：左右两个坐标轴，量度可不同 - 显示选项加"双Y轴"开关，启用后显示右轴名称输入 - 每个系列在系列配置中可选择左轴/右轴 - 后端 /api/chart 支持 dualYAxis + rightAxisSeries + rightAxisName（POST/GET 均可） - 导出设置折叠栏下载按钮改小，避免挤占	2026-08-19 12:59:46 +08:00
hz4th_coder	d9b3253fa0	chore: 同步版本号至 v1.10.1	2026-08-19 12:50:40 +08:00
hz4th_coder	51d3e09378	feat: 导出设置支持展开/折叠（默认折叠）+ 恢复默认按钮 - 导出设置面板默认折叠，点击标题栏展开/收起，折叠栏显示当前分辨率摘要 - 折叠栏保留快速下载按钮，始终可用 - 新增🔄恢复默认按钮：一键重置分辨率/自定义/文件名/历史选择到初始状态（历史记录保留）	2026-08-19 12:50:26 +08:00
hz4th_coder	9a8cbb125c	feat: 导出设置增强 —— 分辨率预设/自定义/历史记忆/日期命名 - 导出设置面板：分辨率预设（原始/1920×1080/1280×720/1024×768/800×600/自定义） - 自定义宽高手动输入，页面实时居中预览导出效果（原图 contain 居中，自动适配深色背景） - 分辨率历史记忆：localStorage 存最近5个，下拉一键复用 - 文件名：默认按日期时间自动命名（每次不同），支持手动命名（自动补扩展名） - 三个模式（图表/表格/双图合并）统一走带分辨率的导出 - 修复：DOMContentLoaded 提前调用 generateCombine 覆盖 chartArea，导致图表模式 echarts canvas 被破坏	2026-08-19 12:40:22 +08:00
hz4th_coder	52a245e044	fix: 修复双图合并预览/导出为白图的问题根因：renderOne 里 resolve(cvs) 后立即 chart.dispose()，Promise 微任务在 dispose 之后才执行，此时 echarts 已清空 canvas 内容，合并出来全是白图。默认主题下因白底白图不易察觉（内容其实一直没画上）。修复：resolve 前先把内容复制到独立 canvas 副本再 dispose，保证合并时拿到的是有效像素。深色主题下验证通过（深色背景+彩色内容均正常）。	2026-08-19 12:27:04 +08:00
hz4th_coder	479d95cb2c	chore: 同步健康检查版本号至 v1.9.0	2026-08-19 12:15:56 +08:00
hz4th_coder	e62aac539b	feat: 新增双图合并模式，支持横排/竖排将两张图合并为一张图 - 后端新增 POST /api/combine 接口（chart1/chart2 + direction/gap/pixelRatio/background） - 前端新增 🖼️ 双图合并模式：两张图独立配置数据/标题/类型/主题 - 横排（左右等高三张图）或竖排（上下等宽），一键切换实时预览 - 修复 @napi-rs/canvas echarts 渲染需先 toBuffer 再 dispose 的关键问题 - 更新 README/API 文档	2026-08-19 12:15:31 +08:00
hz4th_coder	3107d56764	chore: 同步版本号至 v1.8.0（修正 tag 序列）	2026-08-19 11:57:08 +08:00
hz4th_coder	79a1ca36c5	feat: 添加 keepalive 保活脚本 + cron 定时检查 - 每5分钟检查服务是否运行 - 自动杀掉占用端口的非 node 进程（如 Python http.server） - 自动重启 node 服务	2026-07-24 17:34:02 +08:00
hz4th_coder	a6c8de5820	fix: 修复表格模式无法显示的问题 1. 修复 registerFont API 调用 - @napi-rs/canvas 使用 GlobalFonts.registerFromPath 而非 registerFont 2. 确保 Express 服务端正确启动（之前误用 Python http.server 导致 POST 请求返回 501）	2026-07-24 16:17:32 +08:00
hz4th_coder	5f9357a182	feat: 新增表格边框样式控制功能支持10种边框样式： - all: 全部边框（默认） - none: 无边框 - no-outer: 无外边线 - no-horizontal: 无横线 - no-vertical: 无竖线 - no-inner: 无内部线 - no-inner-horizontal: 无内部横线 - no-inner-vertical: 无内部竖线 - outer-only: 仅外边框 - header-only: 仅表头分隔线前端和API均已支持	2026-07-17 13:37:43 +08:00
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