feat: 新增表格边框样式控制功能

支持10种边框样式：
- all: 全部边框（默认）
- none: 无边框
- no-outer: 无外边线
- no-horizontal: 无横线
- no-vertical: 无竖线
- no-inner: 无内部线
- no-inner-horizontal: 无内部横线
- no-inner-vertical: 无内部竖线
- outer-only: 仅外边框
- header-only: 仅表头分隔线

前端和API均已支持

app.js

@@ -673,6 +673,7 @@ function generateTable() {
         theme: document.getElementById('tableTheme').value,
         fontSize: parseInt(document.getElementById('tableFontSize').value) || 14,
         stripeRows: document.getElementById('stripeRows').checked,
+        borderStyle: document.getElementById('borderStyle').value,
         pixelRatio: 2
     };
 

index.html

@@ -81,6 +81,13 @@ C, 20, 30, 40</pre>
                             <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>
 
@@ -123,6 +130,13 @@ C, 20, 30, 40</pre>
                             <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>
 
@@ -137,6 +151,22 @@ C, 20, 30, 40</pre>
                             <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>
 
                 <!-- 系列配置区 -->
@@ -186,7 +216,7 @@ C, 20, 30, 40</pre>
                 </div>
             </div>
 
-            <!-- 右侧面板：图表预览 -->
+            <!-- 右侧面板：图表预览 + 风格切换 -->
             <div class="right-panel">
                 <div class="chart-container">
                     <div id="chartArea" class="chart-area">
@@ -196,9 +226,9 @@ C, 20, 30, 40</pre>
                         </div>
                     </div>
                 </div>
-                <!-- 风格快速切换按钮 -->
+                <!-- 风格快速切换按钮（放在图表右侧） -->
                 <div class="theme-buttons-section">
-                    <h3>🎨 快速切换风格</h3>
+                    <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>
@@ -260,6 +290,34 @@ C, 20, 30, 40</pre>
                             <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>

server.js

@@ -570,6 +570,70 @@ const tableThemes = {
         borderColor: '#80cbc4',
         stripeColor: '#e0f2f1',
         titleColor: '#004d40'
+    },
+    // 简约纯色风格
+    slate: {
+        bgColor: '#ffffff',
+        headerBg: '#475569',
+        headerColor: '#ffffff',
+        cellColor: '#334155',
+        borderColor: '#cbd5e1',
+        stripeColor: '#f8fafc',
+        titleColor: '#1e293b'
+    },
+    sky: {
+        bgColor: '#ffffff',
+        headerBg: '#0ea5e9',
+        headerColor: '#ffffff',
+        cellColor: '#0c4a6e',
+        borderColor: '#bae6fd',
+        stripeColor: '#f0f9ff',
+        titleColor: '#0c4a6e'
+    },
+    rose: {
+        bgColor: '#ffffff',
+        headerBg: '#e11d48',
+        headerColor: '#ffffff',
+        cellColor: '#881337',
+        borderColor: '#fecdd3',
+        stripeColor: '#fff1f2',
+        titleColor: '#881337'
+    },
+    amber: {
+        bgColor: '#ffffff',
+        headerBg: '#f59e0b',
+        headerColor: '#ffffff',
+        cellColor: '#78350f',
+        borderColor: '#fde68a',
+        stripeColor: '#fffbeb',
+        titleColor: '#78350f'
+    },
+    emerald: {
+        bgColor: '#ffffff',
+        headerBg: '#10b981',
+        headerColor: '#ffffff',
+        cellColor: '#064e3b',
+        borderColor: '#a7f3d0',
+        stripeColor: '#ecfdf5',
+        titleColor: '#064e3b'
+    },
+    indigo: {
+        bgColor: '#ffffff',
+        headerBg: '#6366f1',
+        headerColor: '#ffffff',
+        cellColor: '#312e81',
+        borderColor: '#c7d2fe',
+        stripeColor: '#eef2ff',
+        titleColor: '#312e81'
+    },
+    stone: {
+        bgColor: '#ffffff',
+        headerBg: '#78716c',
+        headerColor: '#ffffff',
+        cellColor: '#44403c',
+        borderColor: '#d6d3d1',
+        stripeColor: '#fafaf9',
+        titleColor: '#292524'
     }
 };
 
@@ -591,7 +655,8 @@ function generateTableImage(params) {
         borderWidth = 1,
         stripeRows = true,
         pixelRatio = 2,
-        maxWidth = 1200
+        maxWidth = 1200,
+        borderStyle = 'all' // all, none, no-outer, no-horizontal, no-vertical, no-inner, no-inner-horizontal, no-inner-vertical, outer-only, header-only
     } = params;
 
     const tableData = parseTableData(data);
@@ -630,7 +695,7 @@ function generateTableImage(params) {
     const headerHeight = fontSize * 2.5;
     const rowHeight = fontSize * 2.2;
     const titleHeight = title ? fontSize * 3 : 0;
-    const tableHeight = headerHeight + rows.length * rowHeight + borderWidth * 2;
+    const tableHeight = headerHeight + rows.length * rowHeight;
     const finalHeight = tableHeight + titleHeight;
 
     // 创建正式 canvas
@@ -699,34 +764,50 @@ function generateTableImage(params) {
     ctx.strokeStyle = themeConfig.borderColor;
     ctx.lineWidth = borderWidth;
 
+    // 边框样式控制
+    const drawOuter = !['none', 'no-outer', 'no-inner', 'no-inner-horizontal', 'no-inner-vertical', 'header-only'].includes(borderStyle);
+    const drawHorizontal = !['none', 'no-horizontal', 'no-inner', 'no-inner-horizontal', 'outer-only', 'header-only'].includes(borderStyle);
+    const drawVertical = !['none', 'no-vertical', 'no-inner', 'no-inner-vertical', 'outer-only'].includes(borderStyle);
+    const drawHeaderLine = !['none', 'no-horizontal', 'no-inner', 'no-inner-horizontal'].includes(borderStyle);
+
     // 外边框
-    ctx.strokeRect(0, startY, finalWidth, tableHeight);
+    if (drawOuter) {
+        const offset = borderWidth / 2;
+        ctx.strokeRect(offset, startY + offset, finalWidth - borderWidth, tableHeight - borderWidth);
+    }
 
-    // 横线
+    // 表头分隔线（横线）
-    ctx.beginPath();
+    if (drawHeaderLine) {
-    ctx.moveTo(0, startY + headerHeight);
-    ctx.lineTo(finalWidth, startY + headerHeight);
-    ctx.stroke();
-
-    rows.forEach((_, rowIdx) => {
-        const y = startY + headerHeight + (rowIdx + 1) * rowHeight;
         ctx.beginPath();
-        ctx.moveTo(0, y);
+        ctx.moveTo(0, startY + headerHeight);
-        ctx.lineTo(finalWidth, y);
+        ctx.lineTo(finalWidth, startY + headerHeight);
         ctx.stroke();
-    });
+    }
+
+    // 数据行横线
+    if (drawHorizontal) {
+        rows.forEach((_, rowIdx) => {
+            const y = startY + headerHeight + (rowIdx + 1) * rowHeight;
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(finalWidth, y);
+            ctx.stroke();
+        });
+    }
 
     // 竖线
-    x = 0;
+    if (drawVertical) {
-    colWidths.forEach((width, i) => {
+        x = 0;
-        if (i > 0) {
+        colWidths.forEach((width, i) => {
-            ctx.beginPath();
+            if (i > 0) {
-            ctx.moveTo(x, startY);
+                ctx.beginPath();
-            ctx.lineTo(x, startY + tableHeight);
+                ctx.moveTo(x, startY);
-            ctx.stroke();
+                ctx.lineTo(x, startY + tableHeight);
-        }
+                ctx.stroke();
-        x += width;
+            }
-    });
+            x += width;
+        });
+    }
 
     return canvas;
 }
@@ -768,7 +849,8 @@ app.get('/api/table', (req, res) => {
             borderWidth: parseInt(req.query.borderWidth) || 1,
             stripeRows: req.query.stripeRows !== 'false',
             pixelRatio: parseInt(req.query.pixelRatio) || 2,
-            maxWidth: parseInt(req.query.maxWidth) || 1200
+            maxWidth: parseInt(req.query.maxWidth) || 1200,
+            borderStyle: req.query.borderStyle || 'all'
         };
 
         if (!params.data) {
@@ -886,7 +968,8 @@ app.get('/api/docs', (req, res) => {
                     borderWidth: { type: 'number', default: 1, description: '边框宽度' },
                     stripeRows: { type: 'boolean', default: true, description: '是否斑马纹' },
                     pixelRatio: { type: 'number', default: 2, description: '像素倍率（清晰度）' },
-                    maxWidth: { type: 'number', default: 1200, description: '最大宽度(px)' }
+                    maxWidth: { type: 'number', default: 1200, description: '最大宽度(px)' },
+                    borderStyle: { type: 'string', default: 'all', options: ['all', 'none', 'no-outer', 'no-horizontal', 'no-vertical', 'no-inner', 'no-inner-horizontal', 'no-inner-vertical', 'outer-only', 'header-only'], description: '边框样式' }
                 },
                 returns: 'image/png',
                 example: {

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);
+    }
 }
 
 /* ===== 动画 ===== */
@@ -458,67 +477,67 @@ input[type="range"]::-moz-range-thumb {
     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
-/* ===== 风格快速切换按钮区 ===== */
+/* ===== 风格快速切换按钮区（右侧） ===== */
 .theme-buttons-section {
-    margin-top: 16px;
+    width: 160px;
+    flex-shrink: 0;
     background: var(--panel-bg);
     border-radius: var(--radius);
-    padding: 16px 20px;
+    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.95rem;
+    font-size: 0.9rem;
     margin-bottom: 12px;
     color: var(--text);
-    display: flex;
+    text-align: center;
-    align-items: center;
-    gap: 6px;
 }
 
 .theme-buttons-grid {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
+    gap: 8px;
 }
 
 .theme-btn {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 6px;
+    gap: 4px;
-    padding: 8px 12px;
+    padding: 6px 4px;
     border: 2px solid var(--border);
-    border-radius: 10px;
+    border-radius: 8px;
     background: white;
     cursor: pointer;
     transition: all 0.2s;
-    min-width: 72px;
 }
 
 .theme-btn:hover {
     border-color: var(--primary);
-    transform: translateY(-2px);
+    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 3px rgba(79, 70, 229, 0.15);
+    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
 }
 
 .theme-preview {
     display: block;
-    width: 40px;
+    width: 32px;
-    height: 28px;
+    height: 20px;
-    border-radius: 6px;
+    border-radius: 4px;
     box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
 }
 
 .theme-name {
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     color: var(--text-light);
     font-weight: 500;
 }
@@ -527,3 +546,17 @@ input[type="range"]::-moz-range-thumb {
     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;
+}