| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Excel 自动填表工具</title>
- <style>
- * { margin: 0; padding: 0; box-sizing: border-box; }
- body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
- background: #f5f7fa;
- color: #333;
- padding: 20px;
- }
- .container {
- max-width: 1200px;
- margin: 0 auto;
- background: #fff;
- border-radius: 12px;
- box-shadow: 0 2px 12px rgba(0,0,0,0.08);
- padding: 30px;
- }
- h1 {
- font-size: 24px;
- color: #1a1a2e;
- margin-bottom: 8px;
- display: flex;
- align-items: center;
- gap: 10px;
- }
- .subtitle {
- color: #888;
- font-size: 14px;
- margin-bottom: 24px;
- border-bottom: 1px solid #eee;
- padding-bottom: 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- gap: 10px;
- }
- .form-group {
- margin-bottom: 18px;
- }
- .form-group label {
- display: block;
- font-weight: 600;
- font-size: 14px;
- margin-bottom: 5px;
- color: #444;
- }
- .form-group .hint {
- font-size: 12px;
- color: #999;
- font-weight: 400;
- }
- .form-row {
- display: flex;
- gap: 20px;
- flex-wrap: wrap;
- }
- .form-row .form-group {
- flex: 1;
- min-width: 200px;
- }
- select, input[type="file"] {
- width: 100%;
- padding: 10px 12px;
- border: 1px solid #d1d5db;
- border-radius: 8px;
- font-size: 14px;
- background: #fafbfc;
- transition: border-color 0.2s;
- }
- select:focus, input:focus {
- border-color: #4f8cf7;
- outline: none;
- box-shadow: 0 0 0 3px rgba(79, 140, 247, 0.15);
- }
- .template-options {
- display: flex;
- gap: 12px;
- flex-wrap: wrap;
- }
- .template-option {
- flex: 1;
- min-width: 120px;
- padding: 14px 20px;
- border: 2px solid #e5e7eb;
- border-radius: 10px;
- cursor: pointer;
- text-align: center;
- font-weight: 600;
- font-size: 15px;
- transition: all 0.2s;
- background: #fafbfc;
- }
- .template-option:hover {
- border-color: #4f8cf7;
- background: #f0f4ff;
- }
- .template-option.active {
- border-color: #4f8cf7;
- background: #e8effe;
- box-shadow: 0 0 0 3px rgba(79, 140, 247, 0.2);
- }
- .template-option .badge {
- display: block;
- font-size: 11px;
- font-weight: 400;
- color: #888;
- margin-top: 4px;
- }
- .file-upload-wrapper {
- display: flex;
- align-items: center;
- gap: 12px;
- flex-wrap: wrap;
- }
- .file-upload-wrapper input[type="file"] {
- padding: 8px;
- flex: 1;
- min-width: 150px;
- }
- .file-name {
- font-size: 13px;
- color: #666;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 200px;
- }
- .btn {
- padding: 10px 28px;
- border: none;
- border-radius: 8px;
- font-size: 15px;
- font-weight: 600;
- cursor: pointer;
- transition: all 0.2s;
- display: inline-flex;
- align-items: center;
- gap: 8px;
- text-decoration: none;
- }
- .btn-primary { background: #4f8cf7; color: #fff; }
- .btn-primary:hover { background: #3a7ae8; transform: translateY(-1px); }
- .btn-primary:disabled { background: #b0c8f5; cursor: not-allowed; transform: none; }
- .btn-success { background: #34c759; color: #fff; }
- .btn-success:hover { background: #2db84e; }
- .btn-success:disabled { background: #9de0b2; cursor: not-allowed; }
- .btn-secondary { background: #e8ecf1; color: #444; }
- .btn-secondary:hover { background: #d5dbe3; }
- .btn-warning { background: #f59e0b; color: #fff; }
- .btn-warning:hover { background: #d97706; }
- .btn-danger { background: #ef4444; color: #fff; }
- .btn-danger:hover { background: #dc2626; }
- .btn-sm { padding: 6px 16px; font-size: 13px; }
- .actions {
- display: flex;
- gap: 12px;
- flex-wrap: wrap;
- margin: 20px 0 16px;
- padding: 16px 0;
- border-top: 1px solid #eee;
- border-bottom: 1px solid #eee;
- }
- .log-area {
- background: #1a1a2e;
- color: #e4e4e4;
- border-radius: 8px;
- padding: 16px 20px;
- font-family: 'Courier New', monospace;
- font-size: 12px;
- max-height: 500px;
- overflow-y: auto;
- white-space: pre-wrap;
- word-break: break-all;
- line-height: 1.6;
- margin-top: 16px;
- }
- .log-area .log-success { color: #4ade80; }
- .log-area .log-error { color: #f87171; }
- .log-area .log-warn { color: #fbbf24; }
- .log-area .log-info { color: #60a5fa; }
- .preview-table-wrapper {
- overflow-x: auto;
- margin-top: 16px;
- border-radius: 8px;
- border: 1px solid #e5e7eb;
- }
- .preview-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 13px;
- min-width: 600px;
- }
- .preview-table th {
- background: #f3f4f6;
- padding: 10px 12px;
- text-align: left;
- font-weight: 600;
- border-bottom: 2px solid #e5e7eb;
- white-space: nowrap;
- position: sticky;
- top: 0;
- z-index: 1;
- }
- .preview-table td {
- padding: 8px 12px;
- border-bottom: 1px solid #e5e7eb;
- max-width: 200px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .preview-table tr:hover td { background: #f9fafb; }
- .status-badge {
- display: inline-block;
- padding: 4px 14px;
- border-radius: 20px;
- font-size: 13px;
- font-weight: 500;
- }
- .status-badge.idle { background: #e5e7eb; color: #6b7280; }
- .status-badge.loading { background: #fef3c7; color: #d97706; }
- .status-badge.success { background: #d1fae5; color: #065f46; }
- .status-badge.error { background: #fee2e2; color: #991b1b; }
- .flex { display: flex; align-items: center; gap: 12px; }
- .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
- .mt-8 { margin-top: 8px; }
- .mt-12 { margin-top: 12px; }
- .text-sm { font-size: 13px; }
- .text-muted { color: #888; }
- .hidden { display: none !important; }
- .download-section {
- background: #ecfdf5;
- border: 1px solid #6ee7b7;
- border-radius: 8px;
- padding: 16px 20px;
- display: none;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
- gap: 12px;
- margin-top: 12px;
- }
- .download-section.show { display: flex; }
- .config-info {
- font-size: 13px;
- color: #666;
- background: #f3f4f6;
- padding: 6px 14px;
- border-radius: 6px;
- display: inline-block;
- }
- .config-info span { font-weight: 600; }
- .example-download {
- margin-top: 8px;
- display: flex;
- gap: 12px;
- flex-wrap: wrap;
- align-items: center;
- }
- .example-download .btn { font-size: 12px; padding: 5px 14px; }
- #detailLogContainer {
- margin-top: 16px;
- border: 2px solid #e5e7eb;
- border-radius: 10px;
- padding: 16px;
- background: #fafbfc;
- }
- #detailLogContainer .log-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 10px;
- }
- #detailLogContainer .log-header span {
- font-weight: 700;
- font-size: 15px;
- color: #1a1a2e;
- }
- #detailLogArea {
- background: #1a1a2e;
- color: #e4e4e4;
- border-radius: 8px;
- padding: 14px 18px;
- font-family: 'Courier New', monospace;
- font-size: 12px;
- max-height: 500px;
- min-height: 120px;
- overflow-y: auto;
- white-space: pre-wrap;
- word-break: break-all;
- line-height: 1.7;
- }
- #detailLogArea .log-success { color: #4ade80; }
- #detailLogArea .log-error { color: #f87171; }
- #detailLogArea .log-warn { color: #fbbf24; }
- #detailLogArea .log-info { color: #60a5fa; }
- .checkbox-wrapper {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 8px 0;
- }
- .checkbox-wrapper input[type="checkbox"] {
- width: 18px;
- height: 18px;
- cursor: pointer;
- }
- .checkbox-wrapper label {
- font-weight: 600;
- font-size: 14px;
- cursor: pointer;
- }
- .log-count {
- font-size: 12px;
- color: #666;
- background: #e5e7eb;
- padding: 2px 10px;
- border-radius: 12px;
- }
- </style>
- <base target="_blank">
- </head>
- <body>
- <div class="container">
- <h1>📊 Excel 自动填表工具</h1>
- <div class="subtitle">
- <span>选择模板类型 → 上传模板文件 → 上传数据文件 → 生成</span>
- <span class="status-badge idle" id="statusBadge">就绪</span>
- </div>
- <div class="form-group">
- <label>📁 选择模板类型</label>
- <div class="template-options" id="templateOptions">
- <div class="template-option active" data-key="wayfair" onclick="selectTemplate('wayfair')">
- 🏢 Wayfair
- <span class="badge">表头: 第4行</span>
- </div>
- <div class="template-option" data-key="amazon" onclick="selectTemplate('amazon')">
- 🛒 亚马逊
- <span class="badge">表头: 第1行</span>
- </div>
- </div>
- <div class="mt-8" id="configInfo">
- <span class="config-info">✅ 已选择 <span>Wayfair</span> | 来源表头: 第 2 行 | 模板表头: 第 4 行</span>
- </div>
- </div>
- <div class="form-group">
- <label>📄 上传模板文件 <span class="hint">(.xlsx 格式)</span></label>
- <div class="file-upload-wrapper">
- <input type="file" id="templateFile" accept=".xlsx,.xls,.xlsm">
- <span class="file-name" id="templateFileName">未选择文件</span>
- </div>
- </div>
- <div class="form-group">
- <label>📊 上传数据文件 <span class="hint">(.xlsx 格式)</span></label>
- <div class="file-upload-wrapper">
- <input type="file" id="dataFile" accept=".xlsx,.xls,.xlsm">
- <span class="file-name" id="dataFileName">未选择文件</span>
- </div>
- </div>
- <div class="checkbox-wrapper">
- <input type="checkbox" id="useAI" checked>
- <label for="useAI">🤖 启用 AI 自动填写(识别产品主图,自动填充属性)</label>
- <span class="hint">(需要数据中有产品主图URL)</span>
- </div>
- <div class="actions">
- <button class="btn btn-primary" id="previewBtn" disabled>🔍 预览数据</button>
- <button class="btn btn-success" id="generateBtn" disabled>🚀 生成并下载</button>
- <button class="btn btn-secondary" id="clearLogBtn">🗑️ 清空日志</button>
- </div>
- <div class="flex-between">
- <span id="statusText" class="text-muted text-sm">请选择模板类型,上传模板和数据文件</span>
- <span id="rowCount" class="text-muted text-sm"></span>
- </div>
- <div id="previewContainer" class="hidden">
- <div class="flex-between mt-8">
- <span class="text-sm" style="font-weight:600;">📋 数据预览 (前10行)</span>
- </div>
- <div class="preview-table-wrapper">
- <table class="preview-table" id="previewTable">
- <thead id="previewHead"></thead>
- <tbody id="previewBody"></tbody>
- </table>
- </div>
- </div>
- <div class="download-section" id="downloadSection">
- <span style="font-weight:600;color:#065f46;">✅ 生成完成!</span>
- <span id="downloadInfo"></span>
- <a href="#" id="downloadLink" class="btn btn-success" style="text-decoration:none;">📥 下载文件</a>
- </div>
- <!-- 详细处理日志 -->
- <div id="detailLogContainer" class="hidden">
- <div class="log-header">
- <span>📋 详细处理日志</span>
- <span class="log-count" id="logCount">0 条</span>
- </div>
- <div id="detailLogArea">
- <span class="log-info">⏳ 等待处理开始...</span>
- </div>
- </div>
- <!-- 主日志 -->
- <div class="log-area" id="logArea">
- <span class="log-info">💡 系统就绪,请选择模板类型,上传模板和数据文件,然后点击"预览数据"</span>
- </div>
- </div>
- <script>
- const templateOptions = document.querySelectorAll('.template-option');
- const templateFile = document.getElementById('templateFile');
- const dataFile = document.getElementById('dataFile');
- const templateFileName = document.getElementById('templateFileName');
- const dataFileName = document.getElementById('dataFileName');
- const previewBtn = document.getElementById('previewBtn');
- const generateBtn = document.getElementById('generateBtn');
- const clearLogBtn = document.getElementById('clearLogBtn');
- const logArea = document.getElementById('logArea');
- const statusText = document.getElementById('statusText');
- const statusBadge = document.getElementById('statusBadge');
- const rowCount = document.getElementById('rowCount');
- const previewContainer = document.getElementById('previewContainer');
- const previewHead = document.getElementById('previewHead');
- const previewBody = document.getElementById('previewBody');
- const downloadSection = document.getElementById('downloadSection');
- const downloadLink = document.getElementById('downloadLink');
- const downloadInfo = document.getElementById('downloadInfo');
- const configInfo = document.getElementById('configInfo');
- const useAI = document.getElementById('useAI');
- const detailLogContainer = document.getElementById('detailLogContainer');
- const detailLogArea = document.getElementById('detailLogArea');
- const logCount = document.getElementById('logCount');
- let selectedTemplate = 'wayfair';
- let dataPath = null;
- let logInterval = null;
- const templateNames = { wayfair: 'Wayfair', amazon: '亚马逊' };
- function selectTemplate(key) {
- selectedTemplate = key;
- templateOptions.forEach(el => {
- el.classList.toggle('active', el.dataset.key === key);
- });
- fetch('/get_config')
- .then(res => res.json())
- .then(data => {
- const config = data.config[key];
- if (config) {
- configInfo.innerHTML = `
- <span class="config-info">
- ✅ 已选择 <span>${templateNames[key]}</span>
- | 来源表头: 第 ${config.source_header} 行
- | 模板表头: 第 ${config.template_header} 行
- </span>
- `;
- }
- });
- checkReady();
- log(`📁 选择模板类型: ${templateNames[key] || key}`, 'info');
- }
- templateFile.addEventListener('change', function() {
- if (this.files.length > 0) {
- templateFileName.textContent = this.files[0].name;
- log(`📄 选择模板文件: ${this.files[0].name}`, 'info');
- } else {
- templateFileName.textContent = '未选择文件';
- }
- checkReady();
- });
- dataFile.addEventListener('change', function() {
- if (this.files.length > 0) {
- dataFileName.textContent = this.files[0].name;
- log(`📊 选择数据文件: ${this.files[0].name}`, 'info');
- } else {
- dataFileName.textContent = '未选择文件';
- }
- checkReady();
- });
- function checkReady() {
- const hasTemplate = selectedTemplate !== null;
- const hasTemplateFile = templateFile.files.length > 0;
- const hasDataFile = dataFile.files.length > 0;
- previewBtn.disabled = !(hasTemplate && hasTemplateFile && hasDataFile);
- generateBtn.disabled = true;
- if (hasTemplate && hasTemplateFile && hasDataFile) {
- setStatus('已选择模板类型,已上传模板和数据文件,点击预览', 'idle');
- } else if (!hasTemplate) {
- setStatus('请选择模板类型', 'idle');
- } else if (!hasTemplateFile) {
- setStatus('请上传模板文件', 'idle');
- } else if (!hasDataFile) {
- setStatus('请上传数据文件', 'idle');
- }
- }
- function log(msg, type = 'info') {
- const colors = { info: 'log-info', success: 'log-success', error: 'log-error', warn: 'log-warn' };
- const prefix = { info: 'ℹ️', success: '✅', error: '❌', warn: '⚠️' };
- const timestamp = new Date().toLocaleTimeString();
- const line = document.createElement('div');
- line.innerHTML = `<span style="color:#888;">[${timestamp}]</span> <span class="${colors[type] || 'log-info'}">${prefix[type] || 'ℹ️'} ${msg}</span>`;
- logArea.appendChild(line);
- logArea.scrollTop = logArea.scrollHeight;
- }
- function setStatus(text, type = 'idle') {
- statusText.textContent = text;
- const labels = { idle: '就绪', loading: '处理中...', success: '成功', error: '失败' };
- statusBadge.textContent = labels[type] || '就绪';
- statusBadge.className = `status-badge ${type}`;
- }
- function clearLog() {
- logArea.innerHTML = '';
- detailLogArea.innerHTML = '<span class="log-info">💡 日志已清空</span>';
- logCount.textContent = '0 条';
- log('日志已清空', 'info');
- }
- clearLogBtn.addEventListener('click', clearLog);
- function updateDetailLogDisplay(logs) {
- if (!detailLogArea) return;
- const recentLogs = logs.slice(-100);
- detailLogArea.innerHTML = recentLogs.map(log => {
- const colors = { info: 'log-info', success: 'log-success', error: 'log-error', warn: 'log-warn' };
- const prefix = { info: 'ℹ️', success: '✅', error: '❌', warn: '⚠️' };
- const level = log.level || 'info';
- return `<div><span style="color:#888;">[${log.time}]</span> <span class="${colors[level] || 'log-info'}">${prefix[level] || 'ℹ️'} ${log.message}</span></div>`;
- }).join('');
- detailLogArea.scrollTop = detailLogArea.scrollHeight;
- logCount.textContent = `${logs.length} 条`;
- }
- function startLogPolling() {
- if (logInterval) clearInterval(logInterval);
- detailLogContainer.classList.remove('hidden');
- detailLogArea.innerHTML = '<span class="log-info">⏳ 处理中,正在获取详细日志...</span>';
- let pollCount = 0;
- const maxPolls = 600;
- logInterval = setInterval(async function() {
- pollCount++;
- try {
- const response = await fetch('/get_ai_logs');
- const data = await response.json();
- if (data.logs && data.logs.length > 0) {
- updateDetailLogDisplay(data.logs);
- }
- if (pollCount >= maxPolls) {
- clearInterval(logInterval);
- logInterval = null;
- }
- } catch (e) {}
- }, 1200);
- }
- function stopLogPolling() {
- if (logInterval) {
- clearInterval(logInterval);
- logInterval = null;
- }
- }
- previewBtn.addEventListener('click', async function() {
- const templateFileInput = templateFile.files[0];
- const dataFileInput = dataFile.files[0];
- if (!selectedTemplate || !templateFileInput || !dataFileInput) {
- log('请选择模板类型,上传模板和数据文件', 'warn');
- return;
- }
- this.disabled = true;
- setStatus('正在预览...', 'loading');
- log(`📖 预览数据: ${dataFileInput.name}`, 'info');
- const formData = new FormData();
- formData.append('data_file', dataFileInput);
- formData.append('template_key', selectedTemplate);
- try {
- const response = await fetch('/preview', { method: 'POST', body: formData });
- const result = await response.json();
- if (result.error) {
- log(`❌ 预览失败: ${result.error}`, 'error');
- setStatus('预览失败', 'error');
- previewContainer.classList.add('hidden');
- return;
- }
- dataPath = result.data_path;
- log(`✅ 成功读取 ${result.total_rows} 行数据`, 'success');
- setStatus(`预览成功,共 ${result.total_rows} 行`, 'success');
- rowCount.textContent = `共 ${result.total_rows} 行`;
- previewHead.innerHTML = `<tr>${result.columns.map(c => `<th>${escapeHtml(c)}</th>`).join('')}</tr>`;
- previewBody.innerHTML = result.data.map(row => {
- return `<tr>${result.columns.map(c => `<td title="${escapeHtml(String(row[c] || ''))}">${escapeHtml(String(row[c] || ''))}</td>`).join('')}</tr>`;
- }).join('');
- previewContainer.classList.remove('hidden');
- generateBtn.disabled = false;
- } catch (err) {
- log(`❌ 请求失败: ${err.message}`, 'error');
- setStatus('预览失败', 'error');
- } finally {
- this.disabled = false;
- }
- });
- function escapeHtml(text) {
- const div = document.createElement('div');
- div.textContent = text;
- return div.innerHTML;
- }
- generateBtn.addEventListener('click', async function() {
- if (!dataPath) {
- log('请先预览数据', 'warn');
- return;
- }
- const templateFileInput = templateFile.files[0];
- if (!templateFileInput) {
- log('请上传模板文件', 'warn');
- return;
- }
- this.disabled = true;
- previewBtn.disabled = true;
- setStatus('正在生成...', 'loading');
- log('🚀 开始生成并追加到模板...', 'info');
- // 始终显示详细日志区域并开始轮询
- startLogPolling();
- const formData = new FormData();
- formData.append('data_path', dataPath);
- formData.append('template_key', selectedTemplate);
- formData.append('template_file', templateFileInput);
- formData.append('use_ai', useAI.checked ? 'true' : 'false');
- try {
- const response = await fetch('/generate', { method: 'POST', body: formData });
- const result = await response.json();
- stopLogPolling();
- if (result.error) {
- log(`❌ 生成失败: ${result.error}`, 'error');
- setStatus('生成失败', 'error');
- if (result.logs) {
- updateDetailLogDisplay(result.logs);
- }
- return;
- }
- log(`✅ ${result.message}`, 'success');
- setStatus(`生成成功,追加 ${result.filled_count} 行`, 'success');
- downloadSection.classList.add('show');
- downloadLink.href = result.download_url;
- downloadInfo.textContent = `已追加 ${result.filled_count} 行数据`;
- if (result.logs) {
- updateDetailLogDisplay(result.logs);
- }
- } catch (err) {
- stopLogPolling();
- log(`❌ 请求失败: ${err.message}`, 'error');
- setStatus('生成失败', 'error');
- } finally {
- this.disabled = false;
- previewBtn.disabled = false;
- }
- });
- selectTemplate('wayfair');
- log('💡 请选择模板类型,上传模板和数据文件,然后点击"预览数据"', 'info');
- </script>
- </body>
- </html>
|