fuzhongyun
/
qr-scanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 调整UI展示

This commit is contained in:
fuzhongyun 2026-03-02 14:19:11 +08:00
parent dbd72287d4
commit fb4778faed
3 changed files with 86 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/app.js
View File

@ -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()
})()

58
static/index.html
View File

@ -8,7 +8,7 @@
<link href="/static/style.css" rel="stylesheet" />
</head>
<body class="bg-light">
<main class="container py-4" id="app">
<main class="container py-4 app-shell" id="app">
<header class="d-flex align-items-center justify-content-between mb-3">
<h1 class="h4 mb-0">二维码批量识别工具 v1.0</h1>
<div class="text-muted small" id="statusText">就绪</div>
@ -16,46 +16,56 @@
<section class="card mb-3" id="viewUpload">
<div class="card-body">
<details class="mb-3">
<summary class="fw-semibold">使用说明</summary>
<div class="small text-muted mt-2">
<div>1）选择文件（ZIP 或图片，可多选/拖拽）</div>
<div>2）按需设置并发数与单张超时</div>
<div>3）点击“开始处理”，等待完成</div>
<div>4）下载 Excel 结果，失败项可在页面查看原因</div>
</div>
</details>
<div class="mb-3">
<div id="dropzone" class="dropzone">
<div class="fw-semibold">拖拽压缩包或图片到此处</div>
<div class="text-muted small">或点击选择文件（ZIP / PNG / JPG / JPEG / BMP）</div>
<input id="fileInput" type="file" class="d-none" multiple accept=".zip,.png,.jpg,.jpeg,.bmp,image/png,image/jpeg,image/bmp" />
</div>
<div class="text-muted small mt-2">限制：ZIP≤100MB；图片≤10MB/张；非图片会被忽略</div>
</div>
<div class="row g-3">
<div class="col-12 col-lg-8">
<div class="border rounded-3 p-3 bg-white">
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="fw-semibold">上传的文件</div>
<button class="btn btn-sm btn-outline-secondary" id="btnClear">清空列表</button>
</div>
<div id="fileList" class="file-list text-muted">暂无文件</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="border rounded-3 p-3 bg-white">
<div class="fw-semibold mb-2">参数</div>
<div class="mb-2">
<label class="form-label small text-muted mb-1" for="concurrencyInput">并发数</label>
<input class="form-control form-control-sm" id="concurrencyInput" type="number" min="1" max="32" value="4" />
</div>
<div class="mb-3">
<label class="form-label small text-muted mb-1" for="timeoutInput">单张超时（秒）</label>
<input class="form-control form-control-sm" id="timeoutInput" type="number" min="1" max="60" value="30" />
</div>
<div class="text-muted small">ZIP≤100MB；图片≤10MB/张；非图片会被忽略</div>
</div>
<div class="border rounded-3 p-3 bg-white">
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="fw-semibold">上传的文件</div>
<button class="btn btn-sm btn-outline-secondary" id="btnClear">清空列表</button>
</div>
<div id="fileList" class="file-list text-muted">暂无文件</div>
</div>
</div>
<div class="card-footer d-flex gap-2 justify-content-end">
<button class="btn btn-sm btn-outline-secondary me-auto" id="btnSettings">设置</button>
<button class="btn btn-primary" id="btnStart" disabled>开始处理</button>
</div>
</section>
<div class="settings-overlay d-none" id="settingsOverlay" role="dialog" aria-modal="true">
<div class="settings-panel">
<div class="d-flex align-items-center justify-content-between mb-2">
<div class="fw-semibold">高级设置</div>
<button class="btn btn-sm btn-outline-secondary" id="btnSettingsClose">关闭</button>
</div>
<div class="mb-2">
<label class="form-label small text-muted mb-1" for="concurrencyInput">并发数</label>
<input class="form-control form-control-sm" id="concurrencyInput" type="number" min="1" max="32" value="4" />
</div>
<div class="mb-0">
<label class="form-label small text-muted mb-1" for="timeoutInput">单张超时（秒）</label>
<input class="form-control form-control-sm" id="timeoutInput" type="number" min="1" max="60" value="30" />
</div>
</div>
</div>
<section class="card mb-3 d-none" id="viewProgress">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">

34
static/style.css
View File

@ -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);
}