CargoTrace/pad_scanner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine boxing UI: restructure info bar, scan bar, and mode switch

Browse Source 
- Info bar: left-right layout with progress bar below, detail button on right
- Scan bar: remove '已识别' badge, show 工令号/总件数/已装X with larger font
- Mode switch: move to title right side, adopt rectangular style with 18px bold font

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Misaka_Company
2026-05-18 17:00:40 +08:00
parent 9e4667d68f
commit f60745607f
2 changed files with 215 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
docs/single-code-boxing-ui-v2.html
View File

@@ -189,7 +189,7 @@ body {
flex-shrink: 0;
}
.scan-code {
font-size: 13px;
font-size: 20px;
font-weight: 700;
color: var(--text);
flex: 1;
@@ -197,6 +197,14 @@ body {
text-overflow: ellipsis;
white-space: nowrap;
}
.scan-zongpai-extra {
font-size: 11px;
color: var(--text-2);
font-weight: 500;
flex-shrink: 0;
white-space: nowrap;
margin-right: 4px;
}
.scan-badge {
font-size: 10px;
font-weight: 700;
@@ -216,7 +224,7 @@ body {
display: flex;
flex-direction: column;
position: relative;
padding: 8px 86px 8px 12px;
padding: 8px 12px 8px 12px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
background: #fafafa;
@@ -248,13 +256,19 @@ body {
white-space: nowrap;
}
/* 进度条+详情同行 */
.progress-with-detail {
display: flex;
align-items: center;
gap: 8px;
}
/* 进度条 */
.progress-wrap {
flex: 1;
height: 3px;
background: #e0e0e0;
border-radius: 2px;
overflow: hidden;
margin: 2px 0;
}
.progress-fill {
height: 100%;
@@ -264,29 +278,13 @@ body {
}
.progress-fill.full { background: var(--green); }
.info-row2 {
display: flex;
align-items: center;
gap: 4px;
}
.info-meta-text {
font-size: 11px;
color: var(--text-3);
flex: 1;
}
.info-meta-text .hl { color: var(--amber); font-weight: 700; }
.info-meta-text .packed { color: var(--blue); font-weight: 600; }
.detail-link {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
height: 34px;
font-size: 12px;
justify-content: center;
height: 28px;
min-width: 48px;
font-size: 11px;
font-weight: 700;
color: var(--blue);
background: var(--blue-lt);
@@ -309,10 +307,21 @@ body {
cursor: default;
}
.info-row2 {
display: flex;
align-items: center;
gap: 4px;
}
.info-meta-text {
font-size: 11px;
color: var(--text-3);
flex: 1;
}
.info-meta-text .hl { color: var(--amber); font-weight: 700; }
.info-meta-text .packed { color: var(--blue); font-weight: 600; }
/* 空状态的 info-bar */
.info-bar.empty .info-paichan,
.info-bar.empty .info-wo,
.info-bar.empty .info-erp,
.info-bar.empty .info-meta-text { color: #ccc; }
/* ── 已分配列表区 (可滚动) ── */
@@ -661,15 +670,15 @@ body {
<div class="info-bar empty">
<div class="info-row1">
<span class="info-paichan">排产号 —</span>
<span class="info-wo">工单 —</span>
<span class="info-erp">— 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:0%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:0%"></div>
</div>
<button class="detail-link disabled">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 — 箱 · 最大箱号 —</span>
<button class="detail-link disabled">详情</button>
</div>
</div>
@@ -718,6 +727,7 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180001</span>
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
<span class="scan-badge">已识别</span>
</div>
@@ -725,15 +735,15 @@ body {
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-A101</span>
<span class="info-wo">WO-2026-0882</span>
<span class="info-erp">200 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:25%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:25%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span> · 已装 50/200</span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -781,21 +791,22 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180001</span>
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
<span class="scan-badge">已识别</span>
</div>
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-A101</span>
<span class="info-wo">WO-2026-0882</span>
<span class="info-erp">200 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:75%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:75%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -866,21 +877,22 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180001</span>
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
<span class="scan-badge">已识别</span>
</div>
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-A101</span>
<span class="info-wo">WO-2026-0882</span>
<span class="info-erp">200 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:75%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:75%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -951,21 +963,22 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180001</span>
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
<span class="scan-badge">已识别</span>
</div>
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-A101</span>
<span class="info-wo">WO-2026-0882</span>
<span class="info-erp">200 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:75%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:75%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span></span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -1041,21 +1054,22 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180001</span>
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
<span class="scan-badge">已识别</span>
</div>
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-A101</span>
<span class="info-wo">WO-2026-0882</span>
<span class="info-erp">200 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:25%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:25%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span></span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -1109,21 +1123,22 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180001</span>
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
<span class="scan-badge">已识别</span>
</div>
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-A101</span>
<span class="info-wo">WO-2026-0882</span>
<span class="info-erp">200 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:25%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:25%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">2 箱</span> · 最大箱号 <span class="hl">5</span></span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -1175,21 +1190,22 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180001</span>
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
<span class="scan-badge">已识别</span>
</div>
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-A101</span>
<span class="info-wo">WO-2026-0882</span>
<span class="info-erp">200 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:25%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:25%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">1 箱</span> · 最大箱号 <span class="hl">2</span> · 剩余可装 150</span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -1241,21 +1257,22 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180002</span>
<span class="scan-zongpai-extra">WO-2026-0901 / 100件</span>
<span class="scan-badge">已识别</span>
</div>
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-B202</span>
<span class="info-wo">WO-2026-0901</span>
<span class="info-erp">100 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill full" style="width:100%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill full" style="width:100%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">3</span> · <span style="color:var(--green);font-weight:700">100/100 已装完</span></span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -1347,21 +1364,22 @@ body {
<div class="scan-bar scanned">
<div class="scan-check">✓</div>
<span class="scan-code">ZP202605180001</span>
<span class="scan-zongpai-extra">WO-2026-0882 / 200件</span>
<span class="scan-badge">已识别</span>
</div>
<div class="info-bar">
<div class="info-row1">
<span class="info-paichan">PC-2605-A101</span>
<span class="info-wo">WO-2026-0882</span>
<span class="info-erp">200 件</span>
</div>
<div class="progress-wrap">
<div class="progress-fill" style="width:75%"></div>
<div class="progress-with-detail">
<div class="progress-wrap">
<div class="progress-fill" style="width:75%"></div>
</div>
<button class="detail-link">详情</button>
</div>
<div class="info-row2">
<span class="info-meta-text">已有 <span class="packed">3 箱</span> · 最大箱号 <span class="hl">7</span> · 已装 150/200</span>
<button class="detail-link">详情</button>
</div>
</div>
@@ -1456,10 +1474,10 @@ body {
│ "装箱编号" [⇄ 单码装箱 P2] │ AppBar
├──────────────────────────────────────────┤
│ [通知条] 可叠加显示，每条 ~30px │ 可选
├──────────────────────────────────────────┤ 38px
│ ✓ ZP202605180001 已识别 │ 扫码条
├──────────────────────────────────────────┤ ~52px
│ PC-2605-A101 WO-2026-0882 200件 [详情]│
├──────────────────────────────────────────┤ ~50px
│ ✓ ZP202605180001 WO-0882 / 200件 已识别 │ 扫码条
├──────────────────────────────────────────┤ ~45px
│ PC-2605-A101 [详情] │
│ ▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 进度条 │ info-bar
│ 已有 2箱 · 最大箱号 5 · 已装50/200 │
├──────────────────────────────────────────┤