index.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Excel 自动填表工具</title>
  7. <style>
  8. * { margin: 0; padding: 0; box-sizing: border-box; }
  9. body {
  10. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  11. background: #f5f7fa;
  12. color: #333;
  13. padding: 20px;
  14. }
  15. .container {
  16. max-width: 1200px;
  17. margin: 0 auto;
  18. background: #fff;
  19. border-radius: 12px;
  20. box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  21. padding: 30px;
  22. }
  23. h1 {
  24. font-size: 24px;
  25. color: #1a1a2e;
  26. margin-bottom: 8px;
  27. display: flex;
  28. align-items: center;
  29. gap: 10px;
  30. }
  31. .subtitle {
  32. color: #888;
  33. font-size: 14px;
  34. margin-bottom: 24px;
  35. border-bottom: 1px solid #eee;
  36. padding-bottom: 16px;
  37. display: flex;
  38. justify-content: space-between;
  39. align-items: center;
  40. flex-wrap: wrap;
  41. gap: 10px;
  42. }
  43. .form-group {
  44. margin-bottom: 18px;
  45. }
  46. .form-group label {
  47. display: block;
  48. font-weight: 600;
  49. font-size: 14px;
  50. margin-bottom: 5px;
  51. color: #444;
  52. }
  53. .form-group .hint {
  54. font-size: 12px;
  55. color: #999;
  56. font-weight: 400;
  57. }
  58. .form-row {
  59. display: flex;
  60. gap: 20px;
  61. flex-wrap: wrap;
  62. }
  63. .form-row .form-group {
  64. flex: 1;
  65. min-width: 200px;
  66. }
  67. select, input[type="file"] {
  68. width: 100%;
  69. padding: 10px 12px;
  70. border: 1px solid #d1d5db;
  71. border-radius: 8px;
  72. font-size: 14px;
  73. background: #fafbfc;
  74. transition: border-color 0.2s;
  75. }
  76. select:focus, input:focus {
  77. border-color: #4f8cf7;
  78. outline: none;
  79. box-shadow: 0 0 0 3px rgba(79, 140, 247, 0.15);
  80. }
  81. .template-options {
  82. display: flex;
  83. gap: 12px;
  84. flex-wrap: wrap;
  85. }
  86. .template-option {
  87. flex: 1;
  88. min-width: 120px;
  89. padding: 14px 20px;
  90. border: 2px solid #e5e7eb;
  91. border-radius: 10px;
  92. cursor: pointer;
  93. text-align: center;
  94. font-weight: 600;
  95. font-size: 15px;
  96. transition: all 0.2s;
  97. background: #fafbfc;
  98. }
  99. .template-option:hover {
  100. border-color: #4f8cf7;
  101. background: #f0f4ff;
  102. }
  103. .template-option.active {
  104. border-color: #4f8cf7;
  105. background: #e8effe;
  106. box-shadow: 0 0 0 3px rgba(79, 140, 247, 0.2);
  107. }
  108. .template-option .badge {
  109. display: block;
  110. font-size: 11px;
  111. font-weight: 400;
  112. color: #888;
  113. margin-top: 4px;
  114. }
  115. .file-upload-wrapper {
  116. display: flex;
  117. align-items: center;
  118. gap: 12px;
  119. flex-wrap: wrap;
  120. }
  121. .file-upload-wrapper input[type="file"] {
  122. padding: 8px;
  123. flex: 1;
  124. min-width: 150px;
  125. }
  126. .file-name {
  127. font-size: 13px;
  128. color: #666;
  129. white-space: nowrap;
  130. overflow: hidden;
  131. text-overflow: ellipsis;
  132. max-width: 200px;
  133. }
  134. .btn {
  135. padding: 10px 28px;
  136. border: none;
  137. border-radius: 8px;
  138. font-size: 15px;
  139. font-weight: 600;
  140. cursor: pointer;
  141. transition: all 0.2s;
  142. display: inline-flex;
  143. align-items: center;
  144. gap: 8px;
  145. text-decoration: none;
  146. }
  147. .btn-primary { background: #4f8cf7; color: #fff; }
  148. .btn-primary:hover { background: #3a7ae8; transform: translateY(-1px); }
  149. .btn-primary:disabled { background: #b0c8f5; cursor: not-allowed; transform: none; }
  150. .btn-success { background: #34c759; color: #fff; }
  151. .btn-success:hover { background: #2db84e; }
  152. .btn-success:disabled { background: #9de0b2; cursor: not-allowed; }
  153. .btn-secondary { background: #e8ecf1; color: #444; }
  154. .btn-secondary:hover { background: #d5dbe3; }
  155. .btn-warning { background: #f59e0b; color: #fff; }
  156. .btn-warning:hover { background: #d97706; }
  157. .btn-danger { background: #ef4444; color: #fff; }
  158. .btn-danger:hover { background: #dc2626; }
  159. .btn-sm { padding: 6px 16px; font-size: 13px; }
  160. .actions {
  161. display: flex;
  162. gap: 12px;
  163. flex-wrap: wrap;
  164. margin: 20px 0 16px;
  165. padding: 16px 0;
  166. border-top: 1px solid #eee;
  167. border-bottom: 1px solid #eee;
  168. }
  169. .log-area {
  170. background: #1a1a2e;
  171. color: #e4e4e4;
  172. border-radius: 8px;
  173. padding: 16px 20px;
  174. font-family: 'Courier New', monospace;
  175. font-size: 12px;
  176. max-height: 500px;
  177. overflow-y: auto;
  178. white-space: pre-wrap;
  179. word-break: break-all;
  180. line-height: 1.6;
  181. margin-top: 16px;
  182. }
  183. .log-area .log-success { color: #4ade80; }
  184. .log-area .log-error { color: #f87171; }
  185. .log-area .log-warn { color: #fbbf24; }
  186. .log-area .log-info { color: #60a5fa; }
  187. .preview-table-wrapper {
  188. overflow-x: auto;
  189. margin-top: 16px;
  190. border-radius: 8px;
  191. border: 1px solid #e5e7eb;
  192. }
  193. .preview-table {
  194. width: 100%;
  195. border-collapse: collapse;
  196. font-size: 13px;
  197. min-width: 600px;
  198. }
  199. .preview-table th {
  200. background: #f3f4f6;
  201. padding: 10px 12px;
  202. text-align: left;
  203. font-weight: 600;
  204. border-bottom: 2px solid #e5e7eb;
  205. white-space: nowrap;
  206. position: sticky;
  207. top: 0;
  208. z-index: 1;
  209. }
  210. .preview-table td {
  211. padding: 8px 12px;
  212. border-bottom: 1px solid #e5e7eb;
  213. max-width: 200px;
  214. overflow: hidden;
  215. text-overflow: ellipsis;
  216. white-space: nowrap;
  217. }
  218. .preview-table tr:hover td { background: #f9fafb; }
  219. .status-badge {
  220. display: inline-block;
  221. padding: 4px 14px;
  222. border-radius: 20px;
  223. font-size: 13px;
  224. font-weight: 500;
  225. }
  226. .status-badge.idle { background: #e5e7eb; color: #6b7280; }
  227. .status-badge.loading { background: #fef3c7; color: #d97706; }
  228. .status-badge.success { background: #d1fae5; color: #065f46; }
  229. .status-badge.error { background: #fee2e2; color: #991b1b; }
  230. .flex { display: flex; align-items: center; gap: 12px; }
  231. .flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
  232. .mt-8 { margin-top: 8px; }
  233. .mt-12 { margin-top: 12px; }
  234. .text-sm { font-size: 13px; }
  235. .text-muted { color: #888; }
  236. .hidden { display: none !important; }
  237. .download-section {
  238. background: #ecfdf5;
  239. border: 1px solid #6ee7b7;
  240. border-radius: 8px;
  241. padding: 16px 20px;
  242. display: none;
  243. align-items: center;
  244. justify-content: space-between;
  245. flex-wrap: wrap;
  246. gap: 12px;
  247. margin-top: 12px;
  248. }
  249. .download-section.show { display: flex; }
  250. .config-info {
  251. font-size: 13px;
  252. color: #666;
  253. background: #f3f4f6;
  254. padding: 6px 14px;
  255. border-radius: 6px;
  256. display: inline-block;
  257. }
  258. .config-info span { font-weight: 600; }
  259. .example-download {
  260. margin-top: 8px;
  261. display: flex;
  262. gap: 12px;
  263. flex-wrap: wrap;
  264. align-items: center;
  265. }
  266. .example-download .btn { font-size: 12px; padding: 5px 14px; }
  267. #detailLogContainer {
  268. margin-top: 16px;
  269. border: 2px solid #e5e7eb;
  270. border-radius: 10px;
  271. padding: 16px;
  272. background: #fafbfc;
  273. }
  274. #detailLogContainer .log-header {
  275. display: flex;
  276. justify-content: space-between;
  277. align-items: center;
  278. margin-bottom: 10px;
  279. }
  280. #detailLogContainer .log-header span {
  281. font-weight: 700;
  282. font-size: 15px;
  283. color: #1a1a2e;
  284. }
  285. #detailLogArea {
  286. background: #1a1a2e;
  287. color: #e4e4e4;
  288. border-radius: 8px;
  289. padding: 14px 18px;
  290. font-family: 'Courier New', monospace;
  291. font-size: 12px;
  292. max-height: 500px;
  293. min-height: 120px;
  294. overflow-y: auto;
  295. white-space: pre-wrap;
  296. word-break: break-all;
  297. line-height: 1.7;
  298. }
  299. #detailLogArea .log-success { color: #4ade80; }
  300. #detailLogArea .log-error { color: #f87171; }
  301. #detailLogArea .log-warn { color: #fbbf24; }
  302. #detailLogArea .log-info { color: #60a5fa; }
  303. .checkbox-wrapper {
  304. display: flex;
  305. align-items: center;
  306. gap: 10px;
  307. padding: 8px 0;
  308. }
  309. .checkbox-wrapper input[type="checkbox"] {
  310. width: 18px;
  311. height: 18px;
  312. cursor: pointer;
  313. }
  314. .checkbox-wrapper label {
  315. font-weight: 600;
  316. font-size: 14px;
  317. cursor: pointer;
  318. }
  319. .log-count {
  320. font-size: 12px;
  321. color: #666;
  322. background: #e5e7eb;
  323. padding: 2px 10px;
  324. border-radius: 12px;
  325. }
  326. </style>
  327. <base target="_blank">
  328. </head>
  329. <body>
  330. <div class="container">
  331. <h1>📊 Excel 自动填表工具</h1>
  332. <div class="subtitle">
  333. <span>选择模板类型 → 上传模板文件 → 上传数据文件 → 生成</span>
  334. <span class="status-badge idle" id="statusBadge">就绪</span>
  335. </div>
  336. <div class="form-group">
  337. <label>📁 选择模板类型</label>
  338. <div class="template-options" id="templateOptions">
  339. <div class="template-option active" data-key="wayfair" onclick="selectTemplate('wayfair')">
  340. 🏢 Wayfair
  341. <span class="badge">表头: 第4行</span>
  342. </div>
  343. <div class="template-option" data-key="amazon" onclick="selectTemplate('amazon')">
  344. 🛒 亚马逊
  345. <span class="badge">表头: 第1行</span>
  346. </div>
  347. </div>
  348. <div class="mt-8" id="configInfo">
  349. <span class="config-info">✅ 已选择 <span>Wayfair</span> | 来源表头: 第 2 行 | 模板表头: 第 4 行</span>
  350. </div>
  351. </div>
  352. <div class="form-group">
  353. <label>📄 上传模板文件 <span class="hint">(.xlsx 格式)</span></label>
  354. <div class="file-upload-wrapper">
  355. <input type="file" id="templateFile" accept=".xlsx,.xls,.xlsm">
  356. <span class="file-name" id="templateFileName">未选择文件</span>
  357. </div>
  358. </div>
  359. <div class="form-group">
  360. <label>📊 上传数据文件 <span class="hint">(.xlsx 格式)</span></label>
  361. <div class="file-upload-wrapper">
  362. <input type="file" id="dataFile" accept=".xlsx,.xls,.xlsm">
  363. <span class="file-name" id="dataFileName">未选择文件</span>
  364. </div>
  365. </div>
  366. <div class="checkbox-wrapper">
  367. <input type="checkbox" id="useAI" checked>
  368. <label for="useAI">🤖 启用 AI 自动填写(识别产品主图,自动填充属性)</label>
  369. <span class="hint">(需要数据中有产品主图URL)</span>
  370. </div>
  371. <div class="actions">
  372. <button class="btn btn-primary" id="previewBtn" disabled>🔍 预览数据</button>
  373. <button class="btn btn-success" id="generateBtn" disabled>🚀 生成并下载</button>
  374. <button class="btn btn-secondary" id="clearLogBtn">🗑️ 清空日志</button>
  375. </div>
  376. <div class="flex-between">
  377. <span id="statusText" class="text-muted text-sm">请选择模板类型,上传模板和数据文件</span>
  378. <span id="rowCount" class="text-muted text-sm"></span>
  379. </div>
  380. <div id="previewContainer" class="hidden">
  381. <div class="flex-between mt-8">
  382. <span class="text-sm" style="font-weight:600;">📋 数据预览 (前10行)</span>
  383. </div>
  384. <div class="preview-table-wrapper">
  385. <table class="preview-table" id="previewTable">
  386. <thead id="previewHead"></thead>
  387. <tbody id="previewBody"></tbody>
  388. </table>
  389. </div>
  390. </div>
  391. <div class="download-section" id="downloadSection">
  392. <span style="font-weight:600;color:#065f46;">✅ 生成完成!</span>
  393. <span id="downloadInfo"></span>
  394. <a href="#" id="downloadLink" class="btn btn-success" style="text-decoration:none;">📥 下载文件</a>
  395. </div>
  396. <!-- 详细处理日志 -->
  397. <div id="detailLogContainer" class="hidden">
  398. <div class="log-header">
  399. <span>📋 详细处理日志</span>
  400. <span class="log-count" id="logCount">0 条</span>
  401. </div>
  402. <div id="detailLogArea">
  403. <span class="log-info">⏳ 等待处理开始...</span>
  404. </div>
  405. </div>
  406. <!-- 主日志 -->
  407. <div class="log-area" id="logArea">
  408. <span class="log-info">💡 系统就绪,请选择模板类型,上传模板和数据文件,然后点击"预览数据"</span>
  409. </div>
  410. </div>
  411. <script>
  412. const templateOptions = document.querySelectorAll('.template-option');
  413. const templateFile = document.getElementById('templateFile');
  414. const dataFile = document.getElementById('dataFile');
  415. const templateFileName = document.getElementById('templateFileName');
  416. const dataFileName = document.getElementById('dataFileName');
  417. const previewBtn = document.getElementById('previewBtn');
  418. const generateBtn = document.getElementById('generateBtn');
  419. const clearLogBtn = document.getElementById('clearLogBtn');
  420. const logArea = document.getElementById('logArea');
  421. const statusText = document.getElementById('statusText');
  422. const statusBadge = document.getElementById('statusBadge');
  423. const rowCount = document.getElementById('rowCount');
  424. const previewContainer = document.getElementById('previewContainer');
  425. const previewHead = document.getElementById('previewHead');
  426. const previewBody = document.getElementById('previewBody');
  427. const downloadSection = document.getElementById('downloadSection');
  428. const downloadLink = document.getElementById('downloadLink');
  429. const downloadInfo = document.getElementById('downloadInfo');
  430. const configInfo = document.getElementById('configInfo');
  431. const useAI = document.getElementById('useAI');
  432. const detailLogContainer = document.getElementById('detailLogContainer');
  433. const detailLogArea = document.getElementById('detailLogArea');
  434. const logCount = document.getElementById('logCount');
  435. let selectedTemplate = 'wayfair';
  436. let dataPath = null;
  437. let logInterval = null;
  438. const templateNames = { wayfair: 'Wayfair', amazon: '亚马逊' };
  439. function selectTemplate(key) {
  440. selectedTemplate = key;
  441. templateOptions.forEach(el => {
  442. el.classList.toggle('active', el.dataset.key === key);
  443. });
  444. fetch('/get_config')
  445. .then(res => res.json())
  446. .then(data => {
  447. const config = data.config[key];
  448. if (config) {
  449. configInfo.innerHTML = `
  450. <span class="config-info">
  451. ✅ 已选择 <span>${templateNames[key]}</span>
  452. | 来源表头: 第 ${config.source_header} 行
  453. | 模板表头: 第 ${config.template_header} 行
  454. </span>
  455. `;
  456. }
  457. });
  458. checkReady();
  459. log(`📁 选择模板类型: ${templateNames[key] || key}`, 'info');
  460. }
  461. templateFile.addEventListener('change', function() {
  462. if (this.files.length > 0) {
  463. templateFileName.textContent = this.files[0].name;
  464. log(`📄 选择模板文件: ${this.files[0].name}`, 'info');
  465. } else {
  466. templateFileName.textContent = '未选择文件';
  467. }
  468. checkReady();
  469. });
  470. dataFile.addEventListener('change', function() {
  471. if (this.files.length > 0) {
  472. dataFileName.textContent = this.files[0].name;
  473. log(`📊 选择数据文件: ${this.files[0].name}`, 'info');
  474. } else {
  475. dataFileName.textContent = '未选择文件';
  476. }
  477. checkReady();
  478. });
  479. function checkReady() {
  480. const hasTemplate = selectedTemplate !== null;
  481. const hasTemplateFile = templateFile.files.length > 0;
  482. const hasDataFile = dataFile.files.length > 0;
  483. previewBtn.disabled = !(hasTemplate && hasTemplateFile && hasDataFile);
  484. generateBtn.disabled = true;
  485. if (hasTemplate && hasTemplateFile && hasDataFile) {
  486. setStatus('已选择模板类型,已上传模板和数据文件,点击预览', 'idle');
  487. } else if (!hasTemplate) {
  488. setStatus('请选择模板类型', 'idle');
  489. } else if (!hasTemplateFile) {
  490. setStatus('请上传模板文件', 'idle');
  491. } else if (!hasDataFile) {
  492. setStatus('请上传数据文件', 'idle');
  493. }
  494. }
  495. function log(msg, type = 'info') {
  496. const colors = { info: 'log-info', success: 'log-success', error: 'log-error', warn: 'log-warn' };
  497. const prefix = { info: 'ℹ️', success: '✅', error: '❌', warn: '⚠️' };
  498. const timestamp = new Date().toLocaleTimeString();
  499. const line = document.createElement('div');
  500. line.innerHTML = `<span style="color:#888;">[${timestamp}]</span> <span class="${colors[type] || 'log-info'}">${prefix[type] || 'ℹ️'} ${msg}</span>`;
  501. logArea.appendChild(line);
  502. logArea.scrollTop = logArea.scrollHeight;
  503. }
  504. function setStatus(text, type = 'idle') {
  505. statusText.textContent = text;
  506. const labels = { idle: '就绪', loading: '处理中...', success: '成功', error: '失败' };
  507. statusBadge.textContent = labels[type] || '就绪';
  508. statusBadge.className = `status-badge ${type}`;
  509. }
  510. function clearLog() {
  511. logArea.innerHTML = '';
  512. detailLogArea.innerHTML = '<span class="log-info">💡 日志已清空</span>';
  513. logCount.textContent = '0 条';
  514. log('日志已清空', 'info');
  515. }
  516. clearLogBtn.addEventListener('click', clearLog);
  517. function updateDetailLogDisplay(logs) {
  518. if (!detailLogArea) return;
  519. const recentLogs = logs.slice(-100);
  520. detailLogArea.innerHTML = recentLogs.map(log => {
  521. const colors = { info: 'log-info', success: 'log-success', error: 'log-error', warn: 'log-warn' };
  522. const prefix = { info: 'ℹ️', success: '✅', error: '❌', warn: '⚠️' };
  523. const level = log.level || 'info';
  524. return `<div><span style="color:#888;">[${log.time}]</span> <span class="${colors[level] || 'log-info'}">${prefix[level] || 'ℹ️'} ${log.message}</span></div>`;
  525. }).join('');
  526. detailLogArea.scrollTop = detailLogArea.scrollHeight;
  527. logCount.textContent = `${logs.length} 条`;
  528. }
  529. function startLogPolling() {
  530. if (logInterval) clearInterval(logInterval);
  531. detailLogContainer.classList.remove('hidden');
  532. detailLogArea.innerHTML = '<span class="log-info">⏳ 处理中,正在获取详细日志...</span>';
  533. let pollCount = 0;
  534. const maxPolls = 600;
  535. logInterval = setInterval(async function() {
  536. pollCount++;
  537. try {
  538. const response = await fetch('/get_ai_logs');
  539. const data = await response.json();
  540. if (data.logs && data.logs.length > 0) {
  541. updateDetailLogDisplay(data.logs);
  542. }
  543. if (pollCount >= maxPolls) {
  544. clearInterval(logInterval);
  545. logInterval = null;
  546. }
  547. } catch (e) {}
  548. }, 1200);
  549. }
  550. function stopLogPolling() {
  551. if (logInterval) {
  552. clearInterval(logInterval);
  553. logInterval = null;
  554. }
  555. }
  556. previewBtn.addEventListener('click', async function() {
  557. const templateFileInput = templateFile.files[0];
  558. const dataFileInput = dataFile.files[0];
  559. if (!selectedTemplate || !templateFileInput || !dataFileInput) {
  560. log('请选择模板类型,上传模板和数据文件', 'warn');
  561. return;
  562. }
  563. this.disabled = true;
  564. setStatus('正在预览...', 'loading');
  565. log(`📖 预览数据: ${dataFileInput.name}`, 'info');
  566. const formData = new FormData();
  567. formData.append('data_file', dataFileInput);
  568. formData.append('template_key', selectedTemplate);
  569. try {
  570. const response = await fetch('/preview', { method: 'POST', body: formData });
  571. const result = await response.json();
  572. if (result.error) {
  573. log(`❌ 预览失败: ${result.error}`, 'error');
  574. setStatus('预览失败', 'error');
  575. previewContainer.classList.add('hidden');
  576. return;
  577. }
  578. dataPath = result.data_path;
  579. log(`✅ 成功读取 ${result.total_rows} 行数据`, 'success');
  580. setStatus(`预览成功,共 ${result.total_rows} 行`, 'success');
  581. rowCount.textContent = `共 ${result.total_rows} 行`;
  582. previewHead.innerHTML = `<tr>${result.columns.map(c => `<th>${escapeHtml(c)}</th>`).join('')}</tr>`;
  583. previewBody.innerHTML = result.data.map(row => {
  584. return `<tr>${result.columns.map(c => `<td title="${escapeHtml(String(row[c] || ''))}">${escapeHtml(String(row[c] || ''))}</td>`).join('')}</tr>`;
  585. }).join('');
  586. previewContainer.classList.remove('hidden');
  587. generateBtn.disabled = false;
  588. } catch (err) {
  589. log(`❌ 请求失败: ${err.message}`, 'error');
  590. setStatus('预览失败', 'error');
  591. } finally {
  592. this.disabled = false;
  593. }
  594. });
  595. function escapeHtml(text) {
  596. const div = document.createElement('div');
  597. div.textContent = text;
  598. return div.innerHTML;
  599. }
  600. generateBtn.addEventListener('click', async function() {
  601. if (!dataPath) {
  602. log('请先预览数据', 'warn');
  603. return;
  604. }
  605. const templateFileInput = templateFile.files[0];
  606. if (!templateFileInput) {
  607. log('请上传模板文件', 'warn');
  608. return;
  609. }
  610. this.disabled = true;
  611. previewBtn.disabled = true;
  612. setStatus('正在生成...', 'loading');
  613. log('🚀 开始生成并追加到模板...', 'info');
  614. // 始终显示详细日志区域并开始轮询
  615. startLogPolling();
  616. const formData = new FormData();
  617. formData.append('data_path', dataPath);
  618. formData.append('template_key', selectedTemplate);
  619. formData.append('template_file', templateFileInput);
  620. formData.append('use_ai', useAI.checked ? 'true' : 'false');
  621. try {
  622. const response = await fetch('/generate', { method: 'POST', body: formData });
  623. const result = await response.json();
  624. stopLogPolling();
  625. if (result.error) {
  626. log(`❌ 生成失败: ${result.error}`, 'error');
  627. setStatus('生成失败', 'error');
  628. if (result.logs) {
  629. updateDetailLogDisplay(result.logs);
  630. }
  631. return;
  632. }
  633. log(`✅ ${result.message}`, 'success');
  634. setStatus(`生成成功,追加 ${result.filled_count} 行`, 'success');
  635. downloadSection.classList.add('show');
  636. downloadLink.href = result.download_url;
  637. downloadInfo.textContent = `已追加 ${result.filled_count} 行数据`;
  638. if (result.logs) {
  639. updateDetailLogDisplay(result.logs);
  640. }
  641. } catch (err) {
  642. stopLogPolling();
  643. log(`❌ 请求失败: ${err.message}`, 'error');
  644. setStatus('生成失败', 'error');
  645. } finally {
  646. this.disabled = false;
  647. previewBtn.disabled = false;
  648. }
  649. });
  650. selectTemplate('wayfair');
  651. log('💡 请选择模板类型,上传模板和数据文件,然后点击"预览数据"', 'info');
  652. </script>
  653. </body>
  654. </html>