From fb4778faed42fcec70418f871709e39b2c8fde3b Mon Sep 17 00:00:00 2001 From: fuzhongyun <15339891972@163.com> Date: Mon, 2 Mar 2026 14:19:11 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4UI=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/app.js | 19 +++++++++++++++- static/index.html | 58 +++++++++++++++++++++++++++-------------------- static/style.css | 34 +++++++++++++++++++++++++++ 3 files changed, 86 insertions(+), 25 deletions(-) diff --git a/static/app.js b/static/app.js index c8e9619..5c132c8 100644 --- a/static/app.js +++ b/static/app.js @@ -9,6 +9,9 @@ fileList: document.getElementById('fileList'), btnClear: document.getElementById('btnClear'), btnStart: document.getElementById('btnStart'), + btnSettings: document.getElementById('btnSettings'), + settingsOverlay: document.getElementById('settingsOverlay'), + btnSettingsClose: document.getElementById('btnSettingsClose'), concurrencyInput: document.getElementById('concurrencyInput'), timeoutInput: document.getElementById('timeoutInput'), progressPercent: document.getElementById('progressPercent'), @@ -255,6 +258,14 @@ setStatus('就绪') } + function openSettings() { + el.settingsOverlay.classList.remove('d-none') + } + + function closeSettings() { + el.settingsOverlay.classList.add('d-none') + } + function setupDropzone() { el.dropzone.addEventListener('click', () => el.fileInput.click()) @@ -285,6 +296,12 @@ renderFileList() }) + el.btnSettings.addEventListener('click', () => openSettings()) + el.btnSettingsClose.addEventListener('click', () => closeSettings()) + el.settingsOverlay.addEventListener('click', (e) => { + if (e.target === el.settingsOverlay) closeSettings() + }) + el.btnStart.addEventListener('click', async () => { clearError() if (!state.files.length) return @@ -304,6 +321,7 @@ setView('progress') setStatus('处理中') openSSE(state.taskID) + closeSettings() } catch (e) { showError(e.message || '处理失败') setStatus('出错') @@ -366,4 +384,3 @@ setupDropzone() resetAll() })() - diff --git a/static/index.html b/static/index.html index de03955..65aa836 100644 --- a/static/index.html +++ b/static/index.html @@ -8,7 +8,7 @@ -
+

二维码批量识别工具 v1.0

就绪
@@ -16,46 +16,56 @@
+
+ 使用说明 +
+
1）选择文件（ZIP 或图片，可多选/拖拽）
+
2）按需设置并发数与单张超时
+
3）点击“开始处理”，等待完成
+
4）下载 Excel 结果，失败项可在页面查看原因
+
+
拖拽压缩包或图片到此处
或点击选择文件（ZIP / PNG / JPG / JPEG / BMP）
+
限制：ZIP≤100MB；图片≤10MB/张；非图片会被忽略
-
-
-
-
-
上传的文件
- -
-
暂无文件
-
-
-
-
-
参数
-
- - -
-
- - -
-
ZIP≤100MB；图片≤10MB/张；非图片会被忽略
-
+
+
+
上传的文件
+
+
暂无文件
+
+ +
diff --git a/static/style.css b/static/style.css index b74ce71..3a3e4d9 100644 --- a/static/style.css +++ b/static/style.css @@ -4,6 +4,20 @@ --app-bg: #f9fafb; } +.app-shell { + max-width: 1080px; +} + +.card { + border-radius: 14px; + border-color: var(--app-border); +} + +.card-header, +.card-footer { + background: #fff; +} + .dropzone { border: 2px dashed var(--app-border); border-radius: 12px; @@ -58,3 +72,23 @@ font-variant-numeric: tabular-nums; color: #111827; } + +.settings-overlay { + position: fixed; + inset: 0; + background: rgba(17, 24, 39, 0.35); + display: flex; + align-items: flex-end; + justify-content: flex-end; + padding: 16px; + z-index: 1050; +} + +.settings-panel { + width: min(360px, calc(100vw - 32px)); + background: #fff; + border: 1px solid var(--app-border); + border-radius: 14px; + padding: 14px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); +}