feat: 添加 keepalive 保活脚本 + cron 定时检查

- 每5分钟检查服务是否运行
- 自动杀掉占用端口的非 node 进程（如 Python http.server）
- 自动重启 node 服务

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+logs/
+*.png
+*.svg

API.md

@@ -0,0 +1,310 @@
+# 📡 数据可视化图表生成器 - API 文档
+
+> 版本：v1.1.0 | 基础地址：`http://192.168.0.101:16016`
+
+---
+
+## 接口总览
+
+| 方法 | 路径 | 说明 |
+|------|------|------|
+| POST | `/api/chart` | 生成图表图片（JSON body，推荐） |
+| GET | `/api/chart` | 生成图表图片（URL 参数） |
+| GET | `/api/health` | 健康检查 |
+| GET | `/api/docs` | 返回本文档（JSON） |
+
+---
+
+## 1. POST /api/chart（推荐）
+
+通过 JSON 请求体生成图表，返回 PNG 图片。
+
+### 请求
+
+```
+POST /api/chart
+Content-Type: application/json
+```
+
+### 参数说明
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|:----:|--------|------|
+| `data` | string | ✅ | — | CSV 格式数据，`\n` 换行，第一行表头，第一列横坐标 |
+| `chartType` | string | — | `bar` | 图表类型：`bar` / `line` / `bar-line` |
+| `title` | string | — | `""` | 图表标题 |
+| `theme` | string | — | `default` | 主题风格：`default` / `dark` / `macarons` / `gradient` / `retro` |
+| `showLegend` | boolean | — | `true` | 显示图例 |
+| `showGrid` | boolean | — | `true` | 显示网格线 |
+| `showLabel` | boolean | — | `false` | 显示数据标签 |
+| `stackMode` | boolean | — | `false` | 堆叠模式 |
+| `smoothLine` | boolean | — | `true` | 折线平滑 |
+| `enableSplit` | boolean | — | `false` | 启用区域分割 |
+| `splitIndex` | number | — | `3` | 分割位置（第几个数据后分割） |
+| `leftLabel` | string | — | `"左侧"` | 左侧区域标签 |
+| `rightLabel` | string | — | `"右侧"` | 右侧区域标签 |
+| `splitStyle` | string | — | `"solid"` | 分割线样式：`solid` / `dashed` / `dotted` |
+| `width` | number | — | `800` | 图片宽度（px） |
+| `height` | number | — | `500` | 图片高度（px） |
+| `pixelRatio` | number | — | `2` | 像素倍率（越大越清晰） |
+
+### 返回
+
+- **Content-Type:** `image/png`
+- **响应头:**
+  - `X-Chart-Width` — 图片宽度
+  - `X-Chart-Height` — 图片高度
+  - `X-Chart-Pixel-Ratio` — 像素倍率
+
+### curl 示例
+
+**基础柱状图：**
+```bash
+curl -X POST http://192.168.0.101:16016/api/chart \
+  -H "Content-Type: application/json" \
+  -d '{
+    "data": "产品, Q1, Q2, Q3, Q4\n手机, 1200, 1800, 2100, 2500\n平板, 800, 950, 1100, 1300\n笔记本, 600, 750, 900, 1050",
+    "chartType": "bar",
+    "title": "季度销售对比"
+  }' -o chart.png
+```
+
+**深色主题折线图 + 数据标签：**
+```bash
+curl -X POST http://192.168.0.101:16016/api/chart \
+  -H "Content-Type: application/json" \
+  -d '{
+    "data": "月份, 营收(万), 利润(万), 用户(千)\n1月, 500, 80, 50\n2月, 680, 120, 85\n3月, 820, 160, 130\n4月, 1050, 230, 200\n5月, 1380, 350, 320",
+    "chartType": "line",
+    "title": "年度增长趋势",
+    "theme": "dark",
+    "showLabel": true,
+    "width": 900,
+    "height": 500
+  }' -o trend.png
+```
+
+**区域分割对比图：**
+```bash
+curl -X POST http://192.168.0.101:16016/api/chart \
+  -H "Content-Type: application/json" \
+  -d '{
+    "data": "月份, 方案A, 方案B\n1月, 85, 78\n2月, 88, 82\n3月, 92, 88\n4月, 90, 95\n5月, 95, 98\n6月, 98, 102",
+    "chartType": "bar",
+    "title": "方案对比",
+    "theme": "gradient",
+    "enableSplit": true,
+    "splitIndex": 3,
+    "leftLabel": "上半年",
+    "rightLabel": "下半年",
+    "splitStyle": "dashed"
+  }' -o compare.png
+```
+
+**堆叠柱状图：**
+```bash
+curl -X POST http://192.168.0.101:16016/api/chart \
+  -H "Content-Type: application/json" \
+  -d '{
+    "data": "季度, 线上, 线下, 批发\nQ1, 300, 200, 150\nQ2, 450, 280, 200\nQ3, 520, 350, 180\nQ4, 680, 400, 250",
+    "chartType": "bar",
+    "title": "渠道销售分布",
+    "stackMode": true,
+    "theme": "macarons"
+  }' -o stack.png
+```
+
+**高分辨率大图：**
+```bash
+curl -X POST http://192.168.0.101:16016/api/chart \
+  -H "Content-Type: application/json" \
+  -d '{
+    "data": "产品, 2023, 2024, 2025\nA, 100, 200, 300\nB, 150, 250, 350",
+    "width": 1600,
+    "height": 900,
+    "pixelRatio": 3
+  }' -o hd-chart.png
+```
+
+---
+
+## 2. GET /api/chart
+
+通过 URL 参数生成图表，适合简单场景或直接在浏览器中使用。
+
+### 参数
+
+| 参数 | 说明 |
+|------|------|
+| `data` | CSV 数据（换行用 `\n` 表示，需 URL 编码） |
+| `type` | 图表类型（bar / line / bar-line） |
+| `title` | 图表标题 |
+| `theme` | 主题风格 |
+| `width` | 图片宽度 |
+| `height` | 图片高度 |
+
+### curl 示例
+
+```bash
+curl "http://192.168.0.101:16016/api/chart?data=%E4%BA%A7%E5%93%81,Q1,Q2%0A%E6%89%8B%E6%9C%BA,100,200%0A%E5%B9%B3%E6%9D%BF,150,250&type=bar&title=%E6%B5%8B%E8%AF%95" -o chart.png
+```
+
+---
+
+## 3. GET /api/health
+
+健康检查。
+
+```bash
+curl http://192.168.0.101:16016/api/health
+```
+
+返回：
+```json
+{
+  "status": "ok",
+  "service": "data-chart-tool",
+  "version": "1.1.0",
+  "endpoints": {
+    "POST /api/chart": "生成图表图片（JSON body）",
+    "GET /api/chart": "生成图表图片（URL 参数）",
+    "GET /api/health": "健康检查"
+  }
+}
+```
+
+---
+
+## 数据格式说明
+
+CSV 格式，规则：
+
+1. **第一行**：表头（系列名称）
+2. **第一列**：横坐标值
+3. **其余单元格**：数值
+4. **分隔符**：逗号（自动识别制表符和 `|`）
+
+```
+类别, 系列1, 系列2, 系列3
+A, 10, 20, 30
+B, 15, 25, 35
+C, 20, 30, 40
+```
+
+在 JSON 中用 `\n` 表示换行：
+```json
+{
+  "data": "类别, 系列1, 系列2, 系列3\nA, 10, 20, 30\nB, 15, 25, 35\nC, 20, 30, 40"
+}
+```
+
+---
+
+## 各语言调用示例
+
+### Python
+
+```python
+import requests
+
+resp = requests.post('http://192.168.0.101:16016/api/chart', json={
+    "data": "月份, 营收, 利润\n1月, 500, 80\n2月, 680, 120\n3月, 820, 160",
+    "chartType": "line",
+    "title": "增长趋势",
+    "theme": "dark",
+    "showLabel": True,
+    "width": 900,
+    "height": 500
+})
+
+with open('chart.png', 'wb') as f:
+    f.write(resp.content)
+
+print(f"图片大小: {len(resp.content)} bytes")
+```
+
+### JavaScript (Node.js)
+
+```javascript
+const fetch = require('node-fetch');
+const fs = require('fs');
+
+const resp = await fetch('http://192.168.0.101:16016/api/chart', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+        data: "产品, Q1, Q2\n手机, 1200, 2500\n平板, 800, 1300",
+        chartType: "bar",
+        title: "销售对比",
+        width: 800,
+        height: 500
+    })
+});
+
+const buffer = await resp.buffer();
+fs.writeFileSync('chart.png', buffer);
+```
+
+### JavaScript (浏览器 fetch)
+
+```javascript
+const resp = await fetch('http://192.168.0.101:16016/api/chart', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+        data: "产品, Q1, Q2\n手机, 1200, 2500\n平板, 800, 1300",
+        chartType: "bar",
+        title: "销售对比"
+    })
+});
+
+const blob = await resp.blob();
+const url = URL.createObjectURL(blob);
+const img = document.createElement('img');
+img.src = url;
+document.body.appendChild(img);
+```
+
+### Shell (保存到文件)
+
+```bash
+curl -X POST http://192.168.0.101:16016/api/chart \
+  -H "Content-Type: application/json" \
+  -d '{"data":"A,B\n1,2\n3,4","chartType":"bar"}' \
+  -o chart.png
+```
+
+---
+
+## 主题预览
+
+| 主题 | 说明 | 适用场景 |
+|------|------|----------|
+| `default` | 经典蓝绿配色 | 通用 |
+| `dark` | 深色背景 + 高亮色 | 大屏展示、PPT |
+| `macarons` | 柔和马卡龙色 | 清新风格 |
+| `gradient` | 渐变色 + 圆角柱 | 现代感设计 |
+| `retro` | 复古低饱和度 | 文艺风格 |
+
+---
+
+## 错误处理
+
+请求失败时返回 JSON：
+
+```json
+{
+  "error": "缺少 data 参数（CSV 格式数据）"
+}
+```
+
+常见错误：
+
+| HTTP 状态码 | 原因 |
+|:-----------:|------|
+| 400 | 缺少 `data` 参数或数据格式错误 |
+| 500 | 服务端渲染异常 |
+
+---
+
+*文档更新时间：2026-07-16*

README.md

@@ -1,9 +1,9 @@
 # 📊 数据可视化图表生成器
 
-一个简洁强大的在线数据可视化工具，粘贴数据即可生成精美的对比图表。
+一个简洁强大的数据可视化工具，支持 **Web UI** 和 **API** 两种方式生成精美的对比图表和表格图片。
 
 ![License](https://img.shields.io/badge/license-MIT-blue.svg)
-![Version](https://img.shields.io/badge/version-1.0.0-green.svg)
+![Version](https://img.shields.io/badge/version-1.2.0-green.svg)
 
 ## ✨ 功能特性
 
@@ -12,10 +12,16 @@
 - **折线图** - 支持平滑曲线、面积填充
 - **混合图** - 柱状图+折线图组合展示
 
+### 📋 表格功能
+- **表格图片生成** - 根据数据生成精美的表格图片
+- **多种主题** - 与图表共享5种主题风格
+- **自定义样式** - 字体大小、斑马纹、边框等可配置
+- **中文支持** - 完美支持中文内容显示
+
 ### 🎨 自定义配置
 - **主题风格** - 5种预设主题（默认/深色/马卡龙/渐变/复古）
 - **颜色自定义** - 每个系列可单独设置颜色
-- **顺序调整** - 拖拽即可调整系列显示顺序
+- **顺序调整** - 拖拽即可调整系列显示顺序（Web UI）
 - **显示选项** - 图例、网格线、数据标签、堆叠模式等
 
 ### 📐 区域分割
@@ -23,37 +29,186 @@
 - 可自定义分割线样式（实线/虚线/点线）
 - 自动标注左右区域标签
 
+### 📡 API 接口
+- **POST /api/chart** - JSON 请求体生成图表（完整参数支持）
+- **GET /api/chart** - URL 参数生成图表（简单场景）
+- **POST /api/table** - JSON 请求体生成表格图片
+- **GET /api/table** - URL 参数生成表格图片
+- 返回 PNG 图片，支持自定义分辨率和像素倍率
+
 ### 📥 导出功能
-- 导出为 PNG（2倍分辨率）
+- Web UI 导出 PNG（2倍分辨率）
-- 导出为 SVG（矢量格式）
+- API 直接返回 PNG 图片流
 
 ## 🚀 快速开始
 
-### 本地运行
+### 启动服务
 
 ```bash
-# 克隆仓库
-git clone http://121.40.164.32:12007/hz4th_coder/data-chart-tool.git
-
-# 进入目录
 cd data-chart-tool
-
+npm install
-# 启动本地服务器（任选其一）
+npm start
-python3 -m http.server 8080
 # 或
-npx serve
+node server.js
 ```
 
-浏览器访问 `http://localhost:8080` 即可使用。
+服务默认运行在 `16016` 端口，可通过环境变量修改：
 
-### 在线使用
+```bash
+PORT=8080 node server.js
+```
 
-已部署在内部服务器：http://192.168.0.101:16023
+### Web UI
+
+浏览器访问 `http://localhost:16016` 即可使用可视化界面。
+
+### API 调用
+
+#### POST 方式（推荐）
+
+```bash
+curl -X POST http://localhost:16016/api/chart \
+  -H "Content-Type: application/json" \
+  -d '{
+    "data": "产品, Q1, Q2, Q3, Q4\n手机, 1200, 1800, 2100, 2500\n平板, 800, 950, 1100, 1300",
+    "chartType": "bar",
+    "title": "季度销售对比",
+    "theme": "default",
+    "width": 800,
+    "height": 500
+  }' -o chart.png
+```
+
+#### GET 方式
+
+```bash
+curl "http://localhost:16016/api/chart?data=产品,Q1,Q2\n手机,100,200\n平板,150,250&type=bar&title=测试" -o chart.png
+```
+
+#### Python 调用示例
+
+```python
+import requests
+
+resp = requests.post('http://localhost:16016/api/chart', json={
+    "data": "月份, 营收, 利润\n1月, 500, 80\n2月, 680, 120\n3月, 820, 160",
+    "chartType": "line",
+    "title": "增长趋势",
+    "theme": "dark",
+    "showLabel": True,
+    "width": 900,
+    "height": 500
+})
+
+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
+
+通过 JSON 请求体生成图表图片。
+
+**请求参数：**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|------|--------|------|
+| data | string | ✅ | - | CSV 格式数据（`\n` 换行，第一行表头，第一列横坐标） |
+| chartType | string | - | bar | 图表类型：`bar` / `line` / `bar-line` |
+| title | string | - | "" | 图表标题 |
+| theme | string | - | default | 主题：`default` / `dark` / `macarons` / `gradient` / `retro` |
+| showLegend | boolean | - | true | 是否显示图例 |
+| showGrid | boolean | - | true | 是否显示网格线 |
+| showLabel | boolean | - | false | 是否显示数据标签 |
+| stackMode | boolean | - | false | 是否堆叠模式 |
+| smoothLine | boolean | - | true | 折线图是否平滑 |
+| enableSplit | boolean | - | false | 是否启用区域分割 |
+| splitIndex | number | - | 3 | 分割位置索引 |
+| leftLabel | string | - | "左侧" | 左侧区域标签 |
+| rightLabel | string | - | "右侧" | 右侧区域标签 |
+| splitStyle | string | - | "solid" | 分割线样式：`solid` / `dashed` / `dotted` |
+| width | number | - | 800 | 图片宽度(px) |
+| height | number | - | 500 | 图片高度(px) |
+| pixelRatio | number | - | 2 | 像素倍率（清晰度） |
+
+**返回：** `image/png` 二进制流
+
+### GET /api/chart
+
+通过 URL 参数生成图表（适合简单场景）。
+
+| 参数 | 说明 |
+|------|------|
+| data | CSV 数据（换行用 `\n` 表示） |
+| type | 图表类型 |
+| title | 图表标题 |
+| theme | 主题风格 |
+| 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
+
+健康检查，返回服务状态。
+
+### GET /api/docs
+
+返回 API 文档（JSON 格式）。
 
 ## 📝 数据格式
 
-### 基本格式
-
 第一行为**表头**（系列名称），第一列为**横坐标值**，支持逗号、制表符分隔：
 
 ```
@@ -63,55 +218,35 @@ B, 15, 25, 35
 C, 20, 30, 40
 ```
 
-### 示例数据
-
-**季度销售对比：**
-```
-产品, Q1, Q2, Q3, Q4
-手机, 1200, 1800, 2100, 2500
-平板, 800, 950, 1100, 1300
-笔记本, 600, 750, 900, 1050
-```
-
-**年度增长趋势：**
-```
-指标, 2020年, 2021年, 2022年, 2023年, 2024年
-营收(万), 500, 680, 820, 1050, 1380
-利润(万), 80, 120, 160, 230, 350
-用户(千), 50, 85, 130, 200, 320
-```
-
-## 🎯 使用场景
-
-| 场景 | 说明 |
-|------|------|
-| 销售数据分析 | 对比不同产品、不同季度的销售表现 |
-| 年度趋势展示 | 展示多年份的指标变化趋势 |
-| 方案对比评估 | 使用区域分割功能对比两个方案 |
-| 团队绩效展示 | 多团队、多指标的综合对比 |
-
 ## 🛠️ 技术栈
 
 - **ECharts 5.5.0** - 图表渲染引擎
-- **原生 HTML/CSS/JS** - 无框架依赖，轻量快速
+- **@napi-rs/canvas** - Node.js 服务端 Canvas 渲染
+- **Express** - Web 服务框架
+- **原生 HTML/CSS/JS** - 前端无框架依赖
 
 ## 📁 项目结构
 
 ```
 data-chart-tool/
-├── index.html    # 主页面
+├── server.js       # Node.js 后端（API 服务）
-├── style.css     # 样式文件
+├── app.js          # 前端核心逻辑
-├── app.js        # 核心逻辑
+├── index.html      # Web UI 主页面
-└── README.md     # 项目说明
+├── style.css       # 样式文件
+├── package.json    # 依赖管理
+└── README.md       # 项目说明
 ```
 
 ## 🔧 开发计划
 
+- [x] 支持 API 生成图表图片
+- [x] 支持表格图片生成
 - [ ] 支持饼图、雷达图等更多图表类型
 - [ ] 支持从 Excel/CSV 文件导入
 - [ ] 支持数据编辑和实时预览
 - [ ] 添加更多主题风格
 - [ ] 支持图表模板保存和分享
+- [ ] 支持 SVG 格式服务端导出
 
 ## 📄 License
 

app.js

@@ -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,153 @@ 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,
+        borderStyle: document.getElementById('borderStyle').value,
+        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();
+});

index.html

@@ -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,74 @@ 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 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 +178,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 +210,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="exportImage('png')">📥 导出PNG</button>
-                        <button class="btn btn-success" onclick="exportChart('svg')">📥 导出SVG</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 +226,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>

keepalive.sh

@@ -0,0 +1,45 @@
+#!/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"
+
+# 检查端口是否被占用
+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 服务
+echo "[$(date)] Starting data-chart-tool..."
+cd "$APP_DIR"
+nohup node 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

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "data-chart-tool",
+  "version": "1.1.0",
+  "description": "数据可视化图表生成器 - 支持 Web UI 和 API 生成图表图片",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "echarts": "^5.5.0",
+    "@napi-rs/canvas": "^0.1.58",
+    "cors": "^2.8.5"
+  }
+}

style.css

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