From de036639da39df4716061748f44d5365142cc6df Mon Sep 17 00:00:00 2001
From: rhettclaw <rhettclaw@126.com>
Date: Mon, 1 Jun 2026 15:51:03 +0000
Subject: [PATCH] Update: support direct table paste from Excel

---
 tools/excel-to-markdown/index.html | 552 ++++++++---------------------
 1 file changed, 139 insertions(+), 413 deletions(-)
diff --git a/tools/excel-to-markdown/index.html b/tools/excel-to-markdown/index.html
index 2ad846d..5a9f3d7 100644
--- a/tools/excel-to-markdown/index.html
+++ b/tools/excel-to-markdown/index.html
@@ -1,441 +1,167 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Excel → Markdown 转换器</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg: #0f0f0f;
-      --surface: #1a1a1a;
-      --surface2: #252525;
-      --border: #333;
-      --text: #e0e0e0;
-      --text-dim: #888;
-      --accent: #3b82f6;
-      --accent-hover: #60a5fa;
-      --success: #22c55e;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    header {
-      padding: 14px 24px;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      background: var(--surface);
-    }
-
-    header h1 {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--text);
-    }
-
-    header p {
-      font-size: 13px;
-      color: var(--text-dim);
-    }
-
-    .toolbar {
-      margin-left: auto;
-      display: flex;
-      gap: 8px;
-    }
-
-    .btn {
-      padding: 6px 14px;
-      border-radius: 6px;
-      border: none;
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-
-    .btn-primary {
-      background: var(--accent);
-      color: #fff;
-    }
-
-    .btn-primary:hover { background: var(--accent-hover); }
-
-    .btn-ghost {
-      background: transparent;
-      color: var(--text-dim);
-      border: 1px solid var(--border);
-    }
-
-    .btn-ghost:hover { background: var(--surface2); color: var(--text); }
-
-    main {
-      flex: 1;
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 0;
-      overflow: hidden;
-    }
-
-    .panel {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .panel-left {
-      border-right: 1px solid var(--border);
-    }
-
-    .panel-header {
-      padding: 10px 16px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      font-size: 12px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--text-dim);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .panel-header .dot {
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: var(--accent);
-    }
-
-    textarea {
-      flex: 1;
-      background: var(--surface);
-      color: var(--text);
-      border: none;
-      outline: none;
-      resize: none;
-      padding: 16px;
-      font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
-      font-size: 13px;
-      line-height: 1.6;
-    }
-
-    textarea::placeholder { color: var(--text-dim); }
-
-    .panel-right {
-      background: var(--surface);
-    }
-
-    .output-wrap {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-    }
-
-    #output {
-      font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
-      font-size: 13px;
-      line-height: 1.7;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    .preview-toggle {
-      display: flex;
-      gap: 4px;
-    }
-
-    .preview-toggle button {
-      padding: 4px 10px;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-      background: transparent;
-      color: var(--text-dim);
-      font-size: 12px;
-      cursor: pointer;
-    }
-
-    .preview-toggle button.active {
-      background: var(--accent);
-      color: #fff;
-      border-color: var(--accent);
-    }
-
-    .md-preview {
-      display: none;
-    }
-
-    .md-preview.active { display: block; }
-
-    table.md-table {
-      border-collapse: collapse;
-      width: 100%;
-      font-size: 13px;
-    }
-
-    table.md-table th,
-    table.md-table td {
-      border: 1px solid var(--border);
-      padding: 6px 12px;
-      text-align: left;
-    }
-
-    table.md-table th {
-      background: var(--surface2);
-      font-weight: 600;
-    }
-
-    table.md-table tr:nth-child(even) td {
-      background: var(--bg);
-    }
-
-    .status {
-      font-size: 11px;
-      color: var(--text-dim);
-      margin-left: auto;
-    }
-
-    .status.success { color: var(--success); }
-  </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Excel 转 Markdown 表格</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#165DFF',
+                        secondary: '#64748b',
+                    },
+                }
+            }
+        }
+    </script>
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .table-fixed-layout {
+                table-layout: fixed;
+            }
+            .paste-area table {
+                border-collapse: collapse;
+                width: 100%;
+            }
+            .paste-area td, .paste-area th {
+                border: 1px solid #cbd5e1;
+                padding: 6px 10px;
+                min-width: 80px;
+            }
+            .paste-area th {
+                background-color: #f1f5f9;
+            }
+        }
+    </style>
 </head>
-<body>
+<body class="bg-slate-50 min-h-screen">
+<div class="container mx-auto px-4 py-8 max-w-7xl">
+    <header class="text-center mb-8">
+        <h1 class="text-3xl font-bold text-slate-800 mb-2">
+            <i class="fa-solid fa-table text-primary mr-2"></i>Excel → Markdown 表格转换
+        </h1>
+        <p class="text-secondary">直接粘贴 Excel / 网页表格，左侧实时预览，右侧自动生成 Markdown</p>
+    </header>
 
-<header>
-  <div>
-    <h1>Excel → Markdown 转换器</h1>
-    <p>粘贴 Excel 表格内容，自动生成 Markdown 表格</p>
-  </div>
-  <div class="toolbar">
-    <div class="preview-toggle">
-      <button id="btn-markdown" class="active">Markdown</button>
-      <button id="btn-preview">预览</button>
-    </div>
-    <button class="btn btn-ghost" id="btn-copy">复制 Markdown</button>
-    <button class="btn btn-primary" id="btn-convert">转换</button>
-  </div>
-</header>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- 左侧：可粘贴表格区域 -->
+        <div class="bg-white rounded-lg shadow p-5">
+            <div class="flex justify-between items-center mb-3">
+                <h2 class="text-xl font-semibold">表格预览</h2>
+                <button id="clearLeft" class="px-3 py-1.5 bg-slate-200 rounded hover:bg-slate-300 transition">
+                    <i class="fa-solid fa-trash mr-1"></i>清空
+                </button>
+            </div>
+            <div id="pasteArea" class="paste-area border border-slate-300 rounded p-3 h-[calc(100vh-240px)] overflow-auto bg-white">
+                <div class="text-slate-400 text-center py-10">在此粘贴 Excel 或网页表格内容</div>
+            </div>
+        </div>
 
-<main>
-  <div class="panel panel-left">
-    <div class="panel-header">
-      <span class="dot"></span>
-      Excel / CSV 内容
-      <span class="status" id="status-left"></span>
+        <!-- 右侧：Markdown 输出 -->
+        <div class="bg-white rounded-lg shadow p-5">
+            <div class="flex justify-between items-center mb-3">
+                <h2 class="text-xl font-semibold">Markdown 输出</h2>
+                <button id="copyMd" class="px-3 py-1.5 bg-primary text-white rounded hover:opacity-90 transition">
+                    <i class="fa-solid fa-copy mr-1"></i>复制
+                </button>
+            </div>
+            <pre id="mdOutput" class="border border-slate-300 rounded p-3 h-[calc(100vh-240px)] overflow-auto bg-slate-50 whitespace-pre-wrap"></pre>
+        </div>
     </div>
-    <textarea
-      id="input"
-      placeholder="在这里粘贴 Excel 表格内容（支持从 Excel、Numbers、Google Sheets 直接粘贴）
 
-💡 粘贴后会自动转换，也可以点击「转换」按钮手动触发"
-    ></textarea>
-  </div>
-
-  <div class="panel panel-right">
-    <div class="panel-header">
-      <span class="dot" style="background: var(--success)"></span>
-      Markdown 输出
-      <span class="status" id="status-right"></span>
+    <div class="mt-6 p-4 bg-white rounded shadow text-secondary">
+        <h3 class="font-semibold mb-2"><i class="fa-solid fa-circle-info text-primary mr-1"></i>使用说明</h3>
+        <ul class="list-disc pl-5 space-y-1">
+            <li>直接复制 Excel 或网页里的表格，粘贴到左侧区域</li>
+            <li>左侧会自动渲染成可视化表格，格式不会丢失</li>
+            <li>右侧实时生成标准 Markdown 表格</li>
+            <li>一键复制，可直接用于 Notion、GitHub、语雀、Obsidian</li>
+        </ul>
     </div>
-    <div class="output-wrap">
-      <div id="output-raw" class="md-preview"></div>
-      <div id="output" class="md-preview active"></div>
-    </div>
-  </div>
-</main>
+</div>
 
 <script>
-  const $ = id => document.getElementById(id);
-  const input = $('input');
-  const outputRaw = $('output-raw');
-  const output = $('output');
-  const statusLeft = $('status-left');
-  const statusRight = $('status-right');
+    const pasteArea = document.getElementById('pasteArea');
+    const mdOutput = document.getElementById('mdOutput');
+    const clearLeft = document.getElementById('clearLeft');
+    const copyMd = document.getElementById('copyMd');
 
-  let convertMode = 'markdown'; // 'markdown' or 'preview'
+    // 粘贴监听（核心）
+    pasteArea.addEventListener('paste', (e) => {
+        e.preventDefault();
+        const html = e.clipboardData.getData('text/html');
+        const text = e.clipboardData.getData('text');
 
-  function excelToMarkdown(text) {
-    const lines = text.trim().split('\n');
-    if (lines.length === 0) return '';
-
-    const rows = lines.map(line => {
-      // Split by tab, handling quoted fields
-      const cells = [];
-      let current = '';
-      let inQuotes = false;
-
-      for (let i = 0; i < line.length; i++) {
-        const ch = line[i];
-        if (ch === '"') {
-          inQuotes = !inQuotes;
-        } else if (ch === '\t' && !inQuotes) {
-          cells.push(current.trim());
-          current = '';
+        if (html && html.includes('<table')) {
+            pasteArea.innerHTML = html;
         } else {
-          current += ch;
+            pasteArea.innerHTML = textToTable(text);
         }
-      }
-      cells.push(current.trim());
-      return cells;
+
+        setTimeout(renderMarkdown, 10);
     });
 
-    if (rows.length === 0) return '';
-
-    // Detect delimiter: try tab first, fall back to comma or semicolon
-    const firstRow = rows[0];
-    const allTabs = rows.every(r => r.length === firstRow.length && firstRow.every(c => c.includes('\t') || c.trim() === ''));
-
-    // Normalize: handle if the split by tab didn't work well
-    // Fallback: split by comma if no tabs found
-    const normalizedRows = firstRow.length <= 1 && lines[0].includes(',')
-      ? lines.map(line => line.split(',').map(c => c.trim().replace(/^"|"$/g, '')))
-      : rows;
-
-    const colCount = normalizedRows[0].length;
-    const justified = normalizedRows.map(row => {
-      while (row.length < colCount) row.push('');
-      return row.slice(0, colCount);
-    });
-
-    // Build markdown
-    const header = justified[0];
-    const separator = header.map(() => '---');
-
-    const mdRows = [header, separator, ...justified.slice(1)];
-
-    // Find max width per column
-    const colWidths = [];
-    for (let c = 0; c < colCount; c++) {
-      let max = 0;
-      for (let r = 0; r < mdRows.length; r++) {
-        const cell = mdRows[r][c] || '';
-        const len = cell.replace(/\|/g, '\\|').length;
-        if (len > max) max = len;
-      }
-      colWidths.push(max);
+    // 纯文本转表格（Excel 粘贴纯文本也能识别）
+    function textToTable(text) {
+        const rows = text.trim().split(/\r?\n/).filter(i => i);
+        let html = '<table>';
+        rows.forEach(row => {
+            html += '<tr>';
+            row.split('\t').forEach(cell => {
+                html += '<td>' + cell + '</td>';
+            });
+            html += '</tr>';
+        });
+        html += '</table>';
+        return html;
     }
 
-    // Build the table string
-    const separatorRow = '| ' + colWidths.map(w => '-'.repeat(w)).join(' | ') + ' |';
-
-    const lines_out = mdRows.map((row, ri) => {
-      const cells = row.map((cell, ci) => {
-        const cleaned = cell.replace(/\|/g, '\\|');
-        const padded = ri === 1 ? separatorRow : (cleaned + ' '.repeat(colWidths[ci] - cleaned.replace(/\|/g, '\\|').length));
-        return padded;
-      });
-      return '| ' + cells.join(' | ') + ' |';
-    });
-
-    return lines_out.join('\n');
-  }
-
-  function renderMarkdownTable(markdown) {
-    const lines = markdown.split('\n').filter(l => l.trim());
-    if (lines.length < 2) return markdown;
-
-    // Simple markdown table renderer
-    const rows = [];
-    let header = [];
-    let inBody = false;
-
-    for (const line of lines) {
-      if (line.startsWith('|') && line.endsWith('|')) {
-        const cells = line.split('|').slice(1, -1).map(c => c.trim());
-        if (cells.every(c => c.match(/^-+$/))) {
-          inBody = true;
-          continue;
+    // 把左侧表格转成 Markdown
+    function renderMarkdown() {
+        const table = pasteArea.querySelector('table');
+        if (!table) {
+            mdOutput.textContent = '请粘贴表格内容';
+            return;
         }
-        if (!inBody) {
-          header = cells;
-        } else {
-          rows.push(cells);
-        }
-      }
+
+        let md = '';
+        const rows = table.querySelectorAll('tr');
+
+        rows.forEach((tr, idx) => {
+            const cells = tr.querySelectorAll('td, th');
+            const rowContent = Array.from(cells).map(c => c.innerText.trim());
+
+            md += '| ' + rowContent.join(' | ') + ' |\n';
+
+            // 表头分隔线
+            if (idx === 0) {
+                md += '| ' + rowContent.map(() => '---').join(' | ') + ' |\n';
+            }
+        });
+
+        mdOutput.textContent = md;
     }
 
-    if (header.length === 0) return markdown;
-
-    let html = '<table class="md-table"><thead><tr>';
-    header.forEach(h => html += `<th>${escapeHtml(h)}</th>`);
-    html += '</tr></thead><tbody>';
-    rows.forEach(row => {
-      html += '<tr>';
-      row.forEach(cell => html += `<td>${escapeHtml(cell)}</td>`);
-      html += '</tr>';
+    // 清空
+    clearLeft.addEventListener('click', () => {
+        pasteArea.innerHTML = '<div class="text-slate-400 text-center py-10">在此粘贴 Excel 或网页表格内容</div>';
+        mdOutput.textContent = '';
     });
-    html += '</tbody></table>';
-    return html;
-  }
 
-  function escapeHtml(str) {
-    return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-  }
-
-  function convert() {
-    const text = input.value;
-    if (!text.trim()) {
-      output.textContent = '';
-      outputRaw.textContent = '';
-      statusRight.textContent = '';
-      return;
-    }
-
-    const markdown = excelToMarkdown(text);
-    outputRaw.textContent = markdown;
-    output.innerHTML = renderMarkdownTable(markdown);
-    statusRight.textContent = '已转换';
-    statusRight.className = 'status success';
-    setTimeout(() => { statusRight.textContent = ''; statusRight.className = 'status'; }, 2000);
-  }
-
-  // Auto-convert on paste
-  input.addEventListener('input', () => {
-    statusLeft.textContent = input.value.split('\n').length + ' 行';
-    convert();
-  });
-
-  // Manual convert
-  $('btn-convert').addEventListener('click', convert);
-
-  // Copy
-  $('btn-copy').addEventListener('click', () => {
-    const text = outputRaw.textContent || output.textContent;
-    if (!text) return;
-    navigator.clipboard.writeText(text).then(() => {
-      const btn = $('btn-copy');
-      const orig = btn.textContent;
-      btn.textContent = '已复制!';
-      setTimeout(() => btn.textContent = orig, 1500);
+    // 复制
+    copyMd.addEventListener('click', async () => {
+        const content = mdOutput.textContent;
+        if (!content.trim()) return alert('无内容可复制');
+        await navigator.clipboard.writeText(content);
+        copyMd.innerHTML = '<i class="fa-solid fa-check mr-1"></i>已复制';
+        setTimeout(() => {
+            copyMd.innerHTML = '<i class="fa-solid fa-copy mr-1"></i>复制';
+        }, 1500);
     });
-  });
-
-  // Toggle preview
-  $('btn-markdown').addEventListener('click', () => {
-    convertMode = 'markdown';
-    $('btn-markdown').classList.add('active');
-    $('btn-preview').classList.remove('active');
-    outputRaw.classList.add('active');
-    output.classList.remove('active');
-  });
-
-  $('btn-preview').addEventListener('click', () => {
-    convertMode = 'preview';
-    $('btn-preview').classList.add('active');
-    $('btn-markdown').classList.remove('active');
-    output.classList.add('active');
-    outputRaw.classList.remove('active');
-  });
 </script>
-
 </body>
 </html>
\ No newline at end of file
