Files
xiaotutongxue/docs/prototype/admin-web.html
T
lovife 63aec55329 docs: 产品文档与交互原型(P1-P7 交付物)
一期范围:学校收集 + 自主认定(4 类材料全部有实测样本)
- 主 PRD 190KB:125 条 FR / 21 条 VAL / 20 张表 DDL / 121 个接口
- 功能逻辑卷 88KB:不含代码模块
- 接口设计 116KB:58 个错误码 / 12 个 VO
- 核心模块设计:M1 命名 / M2 压缩 / M3 识别 / M4 门禁 / M5 校验 / M6 导出
- 开发任务拆解:100 任务 / 387 人日 / 15 周
- 验收测试清单:36 条 Golden 断言 / 111 条功能验收
- PostgreSQL DDL:已在 PG 16.15 实测零错误
- 交互原型 31 屏:学生端 11 / 班主任端 9 / 管理端 11
2026-09-28 16:19:19 +08:00

1565 lines
114 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>填报通 · 管理端(PC)交互原型</title>
<style>
:root{
--ink:#1b2430; --ink2:#4a5768; --ink3:#8b95a3; --ink4:#b3b9c1;
--paper:#f4f1ea; --paper2:#fbfaf7; --card:#fff; --bg:#f7f6f2;
--line:#e0dbd0; --line2:#cfc8b8; --line3:#eceae4;
--seal:#c0392b; --seal-soft:#f9ece9;
--jade:#2f6b4f; --jade-soft:#e8f0eb;
--amber:#a9761f; --amber-soft:#f8f1de;
--slate:#5b6879; --slate-soft:#eceff3;
--font-display:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
--font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
--font-mono:"SF Mono","JetBrains Mono","Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font-body);color:var(--ink);background:var(--paper);
background-image:linear-gradient(rgba(207,200,184,.28) 1px,transparent 1px),
linear-gradient(90deg,rgba(207,200,184,.28) 1px,transparent 1px);
background-size:26px 26px;-webkit-font-smoothing:antialiased;padding:0 0 90px;
}
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* ── 页头 ── */
.masthead{padding:38px 44px 24px;border-bottom:1px solid var(--line2);background:linear-gradient(180deg,var(--paper2),transparent);position:relative}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--line)}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);font-family:var(--font-mono);margin-bottom:10px}
h1{font-family:var(--font-display);font-size:32px;font-weight:600;letter-spacing:.04em;line-height:1.25}
h1 em{font-style:normal;color:var(--seal)}
.sub{margin-top:10px;color:var(--ink2);font-size:13.5px;line-height:1.75;max-width:900px}
.sub code{font-family:var(--font-mono);font-size:12px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.zoom{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;color:var(--ink3)}
.zoom b{font-weight:500}
.zoom button{
font-family:var(--font-mono);font-size:11.5px;padding:5px 12px;border-radius:7px;cursor:pointer;
border:1px solid var(--line2);background:#fff;color:var(--ink2);transition:.18s;
}
.zoom button:hover{border-color:var(--ink3)}
.zoom button.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* ── 堆叠布局 ── */
.stack{display:flex;flex-direction:column;align-items:center;gap:52px;padding:48px 24px 0;max-width:1300px;margin:0 auto}
figure{margin:0;width:100%;display:flex;flex-direction:column;align-items:center}
.frame-wrap{width:100%;overflow-x:auto;padding-bottom:6px}
figcaption{
margin-top:20px;width:100%;max-width:1180px;font-size:13px;line-height:1.85;color:var(--ink2);
border-left:3px solid var(--line2);padding-left:16px;
}
figcaption b{color:var(--ink);font-weight:600}
figcaption .tag{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--seal);border:1px solid var(--seal);border-radius:3px;padding:1px 6px;margin-right:8px;opacity:.85;vertical-align:1px}
figcaption .title{display:block;font-family:var(--font-display);font-size:16px;color:var(--ink);letter-spacing:.03em;margin-bottom:7px;font-weight:600}
figcaption .note{display:block;margin-top:8px;color:var(--ink3);font-size:12px}
/* ── 浏览器窗口 ── */
.origin{transform-origin:top center}
.win{width:1180px;background:#0e1319;border-radius:12px;padding:8px;box-shadow:0 30px 56px -22px rgba(27,36,48,.44),0 2px 6px rgba(27,36,48,.14)}
.wbar{height:34px;display:flex;align-items:center;gap:12px;padding:0 12px}
.lights{display:flex;gap:7px;flex:none}
.lights i{width:11px;height:11px;border-radius:50%;display:block;background:#3c4653}
.lights i:nth-child(1){background:#5c4a3f}
.lights i:nth-child(2){background:#57503d}
.lights i:nth-child(3){background:#3f5245}
.url{
flex:1;height:23px;border-radius:6px;background:#1a2029;display:flex;align-items:center;gap:8px;
padding:0 11px;font-family:var(--font-mono);font-size:11px;color:#7d8894;max-width:520px;margin:0 auto;
}
.url .ico{font-size:12px;color:#5f6b78}
.view{background:var(--bg);border-radius:7px;overflow:hidden;display:flex;height:718px}
/* ── 应用内 ── */
.side{
width:186px;flex:none;background:var(--paper2);border-right:1px solid var(--line);
display:flex;flex-direction:column;padding:0 0 12px;
}
.brand{padding:17px 17px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.brand .mark{
width:28px;height:28px;border-radius:7px;background:var(--ink);color:#fff;flex:none;
display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:15px;font-weight:600;
}
.brand .bn{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.05em}
.brand .bs{font-size:9.5px;color:var(--ink4);font-family:var(--font-mono);letter-spacing:.08em;margin-top:2px}
.nav{padding:11px 9px;flex:1}
.nav a{
display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:7px;font-size:13px;
color:var(--ink2);text-decoration:none;cursor:pointer;transition:.16s;margin-bottom:2px;
}
.nav a:hover{background:var(--line3)}
.nav a.on{background:var(--ink);color:#fff}
.nav a .ico{font-size:15px;opacity:.85}
.nav a .nb{margin-left:auto;font-family:var(--font-mono);font-size:10px;background:var(--seal);color:#fff;padding:1px 5px;border-radius:8px}
.nav a.on .nb{background:rgba(255,255,255,.26)}
.nav .grp{font-size:10px;font-family:var(--font-mono);letter-spacing:.12em;color:var(--ink4);padding:14px 11px 6px}
.side .who{border-top:1px solid var(--line);padding:11px 14px;display:flex;align-items:center;gap:9px}
.side .who .av{width:28px;height:28px;border-radius:50%;background:var(--slate-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink2);flex:none}
.side .who .wn{font-size:12.5px;font-weight:600}
.side .who .wr{font-size:10px;color:var(--ink4);margin-top:2px}
/* 主区 */
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topbar{
height:52px;flex:none;background:var(--paper2);border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:14px;padding:0 20px;
}
.topbar h2{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:.04em}
.topbar .crumb{font-size:11.5px;color:var(--ink4);font-family:var(--font-mono)}
.topbar .sp{margin-left:auto;display:flex;align-items:center;gap:10px}
.scroll{flex:1;overflow-y:auto;padding:20px;scrollbar-width:thin}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px;border:2px solid var(--bg)}
/* 卡片 */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:16px}
.card>header{
padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
font-size:13.5px;font-weight:600;letter-spacing:.02em;
}
.card>header .sp{margin-left:auto;display:flex;align-items:center;gap:8px}
.card>header .hint{font-size:11px;color:var(--ink4);font-weight:400;font-family:var(--font-mono)}
.card .body{padding:16px}
/* 统计卡 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 16px}
.stat .lbl{font-size:11.5px;color:var(--ink3);letter-spacing:.03em;display:flex;align-items:center;gap:6px}
.stat .lbl .ico{font-size:13px}
.stat .num{font-family:var(--font-mono);font-size:27px;font-weight:700;margin-top:9px;line-height:1;letter-spacing:-.01em}
.stat .num small{font-size:13px;font-weight:500;color:var(--ink3);margin-left:3px}
.stat .foot{font-size:11px;color:var(--ink4);margin-top:7px;font-family:var(--font-mono)}
.stat.seal .num{color:var(--seal)} .stat.jade .num{color:var(--jade)} .stat.amber .num{color:var(--amber)}
/* 表格 */
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{
text-align:left;font-size:11px;font-family:var(--font-mono);letter-spacing:.06em;color:var(--ink3);
font-weight:500;padding:9px 12px;border-bottom:1px solid var(--line2);background:#faf9f6;white-space:nowrap;
}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line3);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fdfcfa}
td.mono,.mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.01em}
td.num{font-family:var(--font-mono);text-align:right}
/* 标签 */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2.5px 8px;border-radius:20px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.pill .ico{font-size:11px}
.pill.ok{background:var(--jade-soft);color:var(--jade)}
.pill.warn{background:var(--amber-soft);color:var(--amber)}
.pill.crit{background:var(--seal-soft);color:var(--seal)}
.pill.gray{background:var(--slate-soft);color:var(--slate)}
.pill.auto{background:#eef1f4;color:var(--ink2)}
/* 按钮 */
.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:8px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.03em;padding:9px 16px;cursor:pointer;transition:.18s;white-space:nowrap}
.btn .ico{font-size:14px}
.btn.primary{background:var(--ink);color:#fff} .btn.primary:hover{background:#2a3646}
.btn.seal{background:var(--seal);color:#fff} .btn.seal:hover{background:#a93022}
.btn.jade{background:var(--jade);color:#fff} .btn.jade:hover{background:#26563f}
.btn.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line2)} .btn.ghost:hover{background:#fff;color:var(--ink)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:6px}
.btn:disabled{background:#e4e1da;color:#a8adaf;cursor:not-allowed;border-color:transparent}
/* 步骤条 */
.steps{display:flex;align-items:center;gap:0;padding:14px 16px;background:var(--paper2);border-bottom:1px solid var(--line);overflow-x:auto}
.steps::-webkit-scrollbar{display:none}
.step{display:flex;align-items:center;gap:8px;flex:none;font-size:12px;color:var(--ink4);padding-right:10px}
.step .n{
width:21px;height:21px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:10.5px;border:1.5px solid var(--line2);color:var(--ink4);background:#fff;
}
.step.done{color:var(--jade)} .step.done .n{background:var(--jade-soft);border-color:#c3d8ca;color:var(--jade)}
.step.on{color:var(--ink);font-weight:600} .step.on .n{background:var(--ink);border-color:var(--ink);color:#fff}
.step .arw{color:var(--line2);margin:0 5px;font-size:11px}
/* 两栏 */
.cols{display:grid;grid-template-columns:376px 1fr;gap:16px;align-items:start}
/* 变量面板 */
.vars{display:flex;flex-wrap:wrap;gap:7px}
.vchip{
font-family:var(--font-mono);font-size:11.5px;padding:5px 10px;border-radius:6px;cursor:pointer;transition:.16s;
border:1px dashed var(--line2);background:#fff;color:var(--ink2);
}
.vchip:hover{border-style:solid;border-color:var(--ink);color:var(--ink)}
.tpl{
font-family:var(--font-mono);font-size:14px;line-height:1.9;padding:13px 14px;border-radius:9px;
border:1.5px solid var(--line2);background:#fff;margin:12px 0;word-break:break-all;
}
.tpl em{font-style:normal;background:var(--jade-soft);color:var(--jade);border-radius:4px;padding:1px 5px;font-weight:600}
.tpl .sep{color:var(--seal);font-weight:700}
/* 试跑 */
.ta{
width:100%;min-height:104px;border:1.5px solid var(--line2);border-radius:9px;padding:11px 13px;
font-family:var(--font-mono);font-size:11.5px;line-height:1.85;resize:vertical;color:var(--ink);background:#fff;
}
.ta:focus{outline:0;border-color:var(--ink)}
/* 差异高亮 */
.diff{background:rgba(192,57,43,.13);border-bottom:1.5px solid var(--seal);border-radius:2px;padding:0 1px}
.fixd{background:var(--jade-soft);border-bottom:1.5px solid var(--jade);border-radius:2px;padding:0 1px}
.strike{color:var(--ink4);text-decoration:line-through;text-decoration-color:var(--seal)}
/* 目录树 */
.tree{font-family:var(--font-mono);font-size:12px;line-height:2.05;color:var(--ink2)}
.tree .d{color:var(--ink);font-weight:600}
.tree .f{color:var(--jade)}
.tree .br{color:var(--line2)}
/* 提示条 */
.note{display:flex;gap:10px;padding:11px 14px;border-radius:9px;font-size:12.5px;line-height:1.7;align-items:flex-start}
.note .ico{font-size:15px;margin-top:1px;flex:none}
.note.info{background:var(--slate-soft);border:1px solid var(--line2);color:var(--ink2)}
.note.warn{background:var(--amber-soft);border:1px solid #e8d9b5;color:#7d5815}
.note.crit{background:var(--seal-soft);border:1px solid #eed5cf;color:#8e2d20}
.note.ok{background:var(--jade-soft);border:1px solid #cfe0d6;color:#245341}
.note b{font-weight:600}
/* 筛选行 */
.filters{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--line);background:#faf9f6}
.fchip{font-size:12px;padding:5px 12px;border-radius:20px;border:1px solid var(--line2);background:#fff;color:var(--ink2);cursor:pointer;transition:.16s;display:flex;align-items:center;gap:6px}
.fchip:hover{border-color:var(--ink3)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip .cnt{font-family:var(--font-mono);font-size:10.5px;opacity:.7}
/* ── 表单设计器 ── */
.fld{
display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;
background:#fff;font-size:12px;color:var(--ink2);cursor:grab;transition:.16s;
}
.fld:hover{border-color:var(--ink3);background:#fdfcfa}
.fld.hot{border-color:#cfe0d6;background:var(--jade-soft);color:#245341}
.fld .ico{font-size:13px;opacity:.8}
.frow{
display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
background:#fff;font-size:12.5px;margin-bottom:6px;cursor:grab;transition:.16s;
}
.frow:hover{border-color:var(--ink3)}
.frow.sel{border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,36,48,.06)}
.frow.lock{background:#faf9f6}
.frow .grip{color:var(--line2);font-size:11px;letter-spacing:-2px;cursor:grab}
.frow .fn{flex:1;font-weight:500}
.frow .ft{font-size:11px;color:var(--ink4);font-family:var(--font-mono)}
/* ── 条件规则行 ── */
.rule-row{
display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
background:#faf9f6;font-size:12px;margin-bottom:8px;flex-wrap:wrap;
}
.rule-row:last-child{margin-bottom:0}
.rule-row .mono{font-family:var(--font-mono);font-size:11.5px;color:var(--ink)}
.rule-row .op{color:var(--ink4)}
.rule-row .val{font-family:var(--font-mono);font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.rule-row .arrow{color:var(--line2);font-size:13px}
/* ── 材料清单侧栏 ── */
.mitem{
display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;
transition:.16s;font-size:12.5px;margin-bottom:3px;
}
.mitem:hover{background:var(--line3)}
.mitem.on{background:var(--ink);color:#fff}
.mitem.on .ms{color:rgba(255,255,255,.62)}
.mitem .ico{font-size:17px;flex:none;opacity:.85}
.mitem .mn{font-weight:600;letter-spacing:.01em}
.mitem .ms{font-size:10.5px;color:var(--ink4);font-family:var(--font-mono);margin-top:2px}
/* ── 字段标签 ── */
.f-label{font-size:11px;font-family:var(--font-mono);letter-spacing:.08em;color:var(--ink3);margin-bottom:7px}
/* 说明区 */
.apron{max-width:1300px;margin:0 auto;padding:0 24px}
.apron h3{font-family:var(--font-display);font-size:19px;letter-spacing:.05em;margin:56px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.aside-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.aside-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;font-size:12.5px;line-height:1.85;color:var(--ink2)}
.aside-card h4{font-size:13.5px;color:var(--ink);margin-bottom:9px;letter-spacing:.03em;display:flex;align-items:center;gap:8px;font-weight:600}
.aside-card h4 .n{font-family:var(--font-mono);font-size:10.5px;color:var(--seal);border:1px solid var(--seal);border-radius:3px;padding:0 5px}
.aside-card code{font-family:var(--font-mono);font-size:11px;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:1px 4px}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="4.5" y="10.5" width="15" height="10" rx="2.2"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3"/></symbol>
<symbol id="i-home" viewBox="0 0 24 24"><path d="M3.8 10.4L12 4l8.2 6.4v9.2a1.4 1.4 0 0 1-1.4 1.4H5.2a1.4 1.4 0 0 1-1.4-1.4z"/></symbol>
<symbol id="i-task" viewBox="0 0 24 24"><rect x="4.5" y="3.5" width="15" height="17" rx="2.2"/><path d="M8.5 8.5h7M8.5 12h7M8.5 15.5h4"/></symbol>
<symbol id="i-users" viewBox="0 0 24 24"><circle cx="9" cy="8.4" r="3.4"/><path d="M3 19.2c0-3.1 2.7-5.2 6-5.2s6 2.1 6 5.2"/><path d="M16.2 5.6a3.4 3.4 0 0 1 0 6.4M17.6 14.4c2 .6 3.4 2.3 3.4 4.8"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.6l4.5 4.5L19 7.4"/></symbol>
<symbol id="i-check-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M8.2 12.2l2.6 2.6 5-5.2"/></symbol>
<symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 4.3l8.8 15.2H3.2z"/><path d="M12 10v3.9M12 16.9v.5"/></symbol>
<symbol id="i-bulb" viewBox="0 0 24 24"><path d="M12 3.5a5.4 5.4 0 0 0-3.2 9.8c.5.4.8 1 .8 1.6v1.1h4.8v-1.1c0-.6.3-1.2.8-1.6A5.4 5.4 0 0 0 12 3.5z"/><path d="M9.8 18.6h4.4M10.4 21h3.2"/></symbol>
<symbol id="i-download" viewBox="0 0 24 24"><path d="M4.5 15.6v3a1.8 1.8 0 0 0 1.8 1.8h11.4a1.8 1.8 0 0 0 1.8-1.8v-3"/><path d="M12 3.9v11.5"/><path d="M7.9 11.3l4.1 4.1 4.1-4.1"/></symbol>
<symbol id="i-chart" viewBox="0 0 24 24"><path d="M4 20.4h16.2"/><path d="M7 20.4V12M12 20.4V5.4M17 20.4v-6"/></symbol>
<symbol id="i-play" viewBox="0 0 24 24"><path d="M7.4 4.8l11.4 7.2-11.4 7.2z"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3.5l7 2.8v5.4c0 4.2-2.9 7.6-7 8.8-4.1-1.2-7-4.6-7-8.8V6.3z"/></symbol>
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M17.4 16.4V11a5.4 5.4 0 0 0-10.8 0v5.4L5.2 18.4h13.6z"/><path d="M10 18.4a2 2 0 0 0 4 0"/></symbol>
<symbol id="i-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2.8v2.4M12 18.8v2.4M4.5 7.5l2 1.2M17.5 15.3l2 1.2M4.5 16.5l2-1.2M17.5 8.7l2-1.2"/></symbol>
<symbol id="i-wand" viewBox="0 0 24 24"><path d="M11 3.8l1.7 4.5 4.5 1.7-4.5 1.7L11 16.2 9.3 11.7 4.8 10l4.5-1.7z"/><path d="M18 15.4l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7z"/></symbol>
<symbol id="i-folder" viewBox="0 0 24 24"><path d="M3.5 6.6A1.9 1.9 0 0 1 5.4 4.7h3.3l2.1 2.6h8A1.9 1.9 0 0 1 20.7 9.2v8.4a1.9 1.9 0 0 1-1.9 1.9H5.4a1.9 1.9 0 0 1-1.9-1.9z"/></symbol>
<symbol id="i-pencil" viewBox="0 0 24 24"><path d="M4.5 19.5h3.2L18.4 8.8a2.3 2.3 0 0 0-3.2-3.2L4.5 16.3z"/><path d="M14.2 6.6l3.2 3.2"/></symbol>
<symbol id="i-image" viewBox="0 0 24 24"><rect x="3.5" y="4.5" width="17" height="15" rx="2.2"/><circle cx="8.8" cy="9.8" r="1.6"/><path d="M4 17.5l4.5-4.5 3.5 3.5 3-3 4.5 4.5"/></symbol>
<symbol id="i-idcard" viewBox="0 0 24 24"><rect x="2.5" y="5" width="19" height="14" rx="2.2"/><circle cx="8.5" cy="11.4" r="2.1"/><path d="M5.2 16.4c.6-1.5 1.8-2.3 3.3-2.3s2.7.8 3.3 2.3"/><path d="M14.5 10.2h4.3M14.5 13.6h4.3"/></symbol>
<symbol id="i-file" viewBox="0 0 24 24"><path d="M13.5 3.5H7A1.8 1.8 0 0 0 5.2 5.3v13.4A1.8 1.8 0 0 0 7 20.5h10a1.8 1.8 0 0 0 1.8-1.8V9z"/><path d="M13.5 3.5V9h5.3"/></symbol>
<symbol id="i-stamp" viewBox="0 0 24 24"><circle cx="12" cy="8.8" r="5.4"/><path d="M9.4 13.4L8 20.5h8l-1.4-7.1"/></symbol>
</svg>
<header class="masthead">
<div class="kicker">Prototype · 管理端 PC · V1.2</div>
<h1>填报通 · <em>管理端</em>交互原型</h1>
<p class="sub">
11 屏:<strong>工作台 → 任务向导(命名试跑) → 名单导入 → 报考范围 → 数据看板 → 终审 → 导出中心</strong>,加上 <strong>表单设计器 / 材料规则配置 / 历史数据整理器 / 名单加入申请审批</strong>。<br>
移动端是「档案室」,桌面端往「<strong>台账</strong>」方向走——表格、树形、批量操作。信息密度比手机端高一个量级,因为管理员是坐在电脑前做批量决策的人。<br>
<span style="font-size:12.5px;color:var(--ink3)">后三屏是**追溯矩阵审计后补的**:三者都是复杂交互,光靠文字描述开发会理解偏。</span>
</p>
<div class="zoom">
<b>缩放</b>
<button data-z="1" class="on">100%</button>
<button data-z="0.82">82%</button>
<button data-z="0.66">66%</button>
<span style="margin-left:6px">原型按 1180px 宽度绘制,屏幕窄时请选小缩放</span>
</div>
</header>
<div class="stack">
<!-- ① 工作台 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/tasks</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a class="on"><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
<div class="grp">系统</div>
<a><svg class="ico"><use href="#i-gear"/></svg>规则模板</a>
<a><svg class="ico"><use href="#i-lock"/></svg>权限与日志</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>工作台</h2><span class="crumb">江西省机电技师学院 · 2026年9月</span>
<span class="sp"><button class="btn ghost sm"><svg class="ico"><use href="#i-bell"/></svg>通知</button><button class="btn primary sm"><svg class="ico"><use href="#i-task"/></svg>新建收集任务</button></span>
</div>
<div class="scroll">
<div class="stats">
<div class="stat"><div class="lbl"><svg class="ico"><use href="#i-task"/></svg>进行中任务</div><div class="num">3</div><div class="foot">覆盖 6 个班级 / 168 人</div></div>
<div class="stat seal"><div class="lbl"><svg class="ico"><use href="#i-check-circle"/></svg>待我终审</div><div class="num">23</div><div class="foot">24中技数控1班 等 3 个班</div></div>
<div class="stat amber"><div class="lbl"><svg class="ico"><use href="#i-alert"/></svg>异常待处理</div><div class="num">7</div><div class="foot">证件号 3 · 低清 2 · 串档 1</div></div>
<div class="stat jade"><div class="lbl"><svg class="ico"><use href="#i-download"/></svg>本月导出</div><div class="num">4<small>次</small></div><div class="foot">最近 09-26 14:20</div></div>
</div>
<div class="card">
<header>进行中的收集任务<span class="sp"><span class="hint">按截止时间排序</span></span></header>
<table>
<thead><tr><th>任务名称</th><th>模式</th><th>覆盖班级</th><th>应填 / 已提交</th><th>进度</th><th>截止</th><th>状态</th></tr></thead>
<tbody>
<tr><td>2026年9月机电专业认定材料收集</td><td><span class="pill gray">学校收集</span></td><td>24中技数控1班</td><td class="num">28 / 23</td>
<td><div style="display:flex;align-items:center;gap:9px"><div style="flex:1;height:6px;border-radius:3px;background:#e8e4db;overflow:hidden;min-width:76px"><i style="display:block;height:100%;width:82%;background:var(--jade)"></i></div><span class="mono" style="font-size:11px">82%</span></div></td>
<td class="mono">10-15</td><td><span class="pill ok">收集中</span></td></tr>
<tr><td>2026年9月汽车维修工认定收集</td><td><span class="pill gray">学校收集</span></td><td>24中技汽修1班</td><td class="num">42 / 42</td>
<td><div style="display:flex;align-items:center;gap:9px"><div style="flex:1;height:6px;border-radius:3px;background:#e8e4db;overflow:hidden;min-width:76px"><i style="display:block;height:100%;width:100%;background:var(--jade)"></i></div><span class="mono" style="font-size:11px">100%</span></div></td>
<td class="mono">10-12</td><td><span class="pill warn">待终审</span></td></tr>
<tr><td>2026年秋季社会人员认定报名</td><td><span class="pill gray">社会收集</span></td><td>南昌报名点</td><td class="num">98 / 61</td>
<td><div style="display:flex;align-items:center;gap:9px"><div style="flex:1;height:6px;border-radius:3px;background:#e8e4db;overflow:hidden;min-width:76px"><i style="display:block;height:100%;width:62%;background:var(--jade)"></i></div><span class="mono" style="font-size:11px">62%</span></div></td>
<td class="mono">10-20</td><td><span class="pill ok">收集中</span></td></tr>
</tbody>
</table>
</div>
<div class="card">
<header>需要我处理的<span class="sp"><span class="hint">按紧急度排序</span></span></header>
<div class="body" style="padding:0">
<div class="note crit" style="margin:14px 16px">
<svg class="ico"><use href="#i-alert"/></svg>
<div><b>24中技数控1班 · 陈子文 疑似串档</b> 一寸照片的证件号与他其他材料不一致,且两个号码校验位都通过(是两个真实的人)。需管理员判断是否驳回。<br><span style="font-size:11.5px;opacity:.8">班主任已初审:标记为待管理员确认</span></div>
</div>
<div class="note warn" style="margin:0 16px 14px">
<svg class="ico"><use href="#i-alert"/></svg>
<div><b>24中技数控1班 · 报考范围发现异常项</b> 28 人中 27 人报「车工/数控车工/四级中级工」,1 人报「车工/普通车工/三级高级工」(占比 3.6%),疑似填写错误。</div>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 01</span>
<span class="title">工作台:先给结论,再给细节</span>
四张统计卡回答"现在什么状况",下面两张卡回答"我要做什么"。<b>异常按紧急度排在最上面</b>——串档(有红项)在范围异常(黄项)之上。
<span class="note">注意"异常待处理 7"下面标注了构成(证件号 3 · 低清 2 · 串档 1)——管理员不用点进去就知道是什么类型的问题。</span>
</figcaption>
</figure>
<!-- ② 任务向导 · 命名规则试跑 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/tasks/new?step=7</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a class="on"><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>新建收集任务</h2><span class="crumb">草稿已保存 · 09:38</span></div>
<div class="steps">
<div class="step done"><span class="n">1</span>基本信息</div><span class="arw">›</span>
<div class="step done"><span class="n">2</span>覆盖班级</div><span class="arw">›</span>
<div class="step done"><span class="n">3</span>名单</div><span class="arw">›</span>
<div class="step done"><span class="n">4</span>表单</div><span class="arw">›</span>
<div class="step done"><span class="n">5</span>材料</div><span class="arw">›</span>
<div class="step done"><span class="n">6</span>审核流</div><span class="arw">›</span>
<div class="step on"><span class="n">7</span>预览发布</div>
</div>
<div class="scroll">
<div class="note info" style="margin-bottom:16px">
<svg class="ico"><use href="#i-bulb"/></svg>
<div><b>发布前必须完成一次命名规则试跑。</b>粘贴几条学生可能交上来的原始文件名,确认系统改出来的结果符合机构要求——这是防止"规则配错导致全员改名错误"的唯一闸门。</div>
</div>
<div class="cols">
<div>
<div class="card">
<header>命名模板</header>
<div class="body">
<div class="vars">
<span class="vchip">{姓名}</span><span class="vchip">{证件号}</span><span class="vchip">{材料名}</span>
<span class="vchip">{班级}</span><span class="vchip">{工种}</span><span class="vchip">{序号}</span>
</div>
<div class="tpl">{<em>姓名</em>}<span class="sep">-</span>{<em>证件号</em>}<span class="sep">-</span>{<em>材料名</em>}.jpg</div>
<div style="font-size:11.5px;color:var(--ink3);line-height:1.75">
与机构模板一致。连接符为半角 <span class="mono">-</span>,大小写按名单原样。
</div>
</div>
</div>
<div class="card">
<header>纠错开关</header>
<div class="body" style="font-size:12.5px;line-height:2.3;color:var(--ink2)">
<label style="display:flex;align-items:center;gap:9px"><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px">自动修复多余扩展名</label>
<label style="display:flex;align-items:center;gap:9px"><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px">自动补齐缺失的连接符</label>
<label style="display:flex;align-items:center;gap:9px"><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px">证件号末位统一大写</label>
<label style="display:flex;align-items:center;gap:9px"><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px">形近字纠错(需学生确认)</label>
<label style="display:flex;align-items:center;gap:9px"><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px">校验位裁决 <span class="pill auto">推荐</span></label>
</div>
</div>
</div>
<div>
<div class="card">
<header>试跑<span class="sp"><span class="hint">粘贴任意条数,不影响真实数据</span></span></header>
<div class="body">
<textarea class="ta">曾伊豪-361029200907295110身份证.jpg.jpg
于豪-360103200805166169-身份证.jpg.jpg
扬晨-360825200904303215-一寸照片.jpg
陈子文-360122200902044232-一寸照片.jpg
曹文锋-36012120081211239-一寸照片.jpg
徐程宇360981200901292334-身份证.jpg.jpg</textarea>
<div style="display:flex;align-items:center;gap:10px;margin-top:12px">
<button class="btn primary"><svg class="ico"><use href="#i-play"/></svg>批量试跑(6 条)</button>
<button class="btn ghost sm">清空</button>
<span style="margin-left:auto;font-size:11.5px;color:var(--ink3)">数据来自真实批次样本</span>
</div>
</div>
</div>
<div class="card">
<header>试跑结果<span class="sp">
<span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>自动修复 4</span>
<span class="pill warn"><svg class="ico"><use href="#i-alert"/></svg>待确认 1</span>
<span class="pill crit"><svg class="ico"><use href="#i-alert"/></svg>需人工 1</span>
</span></header>
<table>
<thead><tr><th style="width:44%">原始文件名</th><th style="width:44%">规范后</th><th>判定</th></tr></thead>
<tbody>
<tr><td class="mono">曾伊豪-361029200907295110身份证<span class="diff">.jpg.jpg</span></td>
<td class="mono">曾伊豪-361029200907295110<span class="fixd">-</span>身份证.jpg</td>
<td><span class="pill auto">自动修复</span></td></tr>
<tr><td class="mono">于豪-3601032008<span class="diff">05166169</span>-身份证.jpg.jpg</td>
<td class="mono">于豪-3601032008<span class="fixd">05186619</span>-身份证.jpg</td>
<td><span class="pill auto">校验位裁决</span></td></tr>
<tr><td class="mono"><span class="strike">扬晨</span>-360825200904303215-一寸照片.jpg</td>
<td class="mono"><span class="fixd">杨晨</span>-360825200904303215-一寸照片.jpg</td>
<td><span class="pill warn">形近字待确认</span></td></tr>
<tr><td class="mono">曹文锋-3601212008<span class="diff">1211239</span>-一寸照片.jpg</td>
<td class="mono">曹文锋-3601212008<span class="fixd">12111239</span>-一寸照片.jpg</td>
<td><span class="pill warn">名册补齐</span></td></tr>
<tr><td class="mono">徐程宇<span class="diff">360981200901292334</span>-身份证.jpg.jpg</td>
<td class="mono">徐程宇<span class="fixd">-</span>360981200901292334-身份证.jpg</td>
<td><span class="pill auto">自动修复</span></td></tr>
<tr style="background:var(--seal-soft)"><td class="mono">陈子文-<span class="diff">360122200902044232</span>-一寸照片.jpg</td>
<td class="mono" style="color:var(--seal)">— 不予自动修改 —</td>
<td><span class="pill crit">疑似串档 · 转人工</span></td></tr>
</tbody>
</table>
<div class="body" style="border-top:1px solid var(--line);padding-top:14px">
<div class="note crit" style="margin-bottom:0">
<svg class="ico"><use href="#i-alert"/></svg>
<div><b>最后一条必须人工处理。</b>陈子文的照片证件号 <span class="mono">360122200902044232</span> 与名单 <span class="mono">36010520090817121X</span> 不一致,且<b>两个号码校验位都通过</b>——说明是<b>两个真实存在的人</b>,不是打字错误。系统不猜,交人工判断。</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="flex:none;padding:13px 20px;background:var(--paper2);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px">
<span style="font-size:12px;color:var(--ink3)">试跑通过率 <span class="mono" style="color:var(--jade);font-weight:600">83%</span>(5/6 可自动处理)</span>
<span style="margin-left:auto;display:flex;gap:10px">
<button class="btn ghost">上一步</button>
<button class="btn primary"><svg class="ico"><use href="#i-check"/></svg>确认并发布任务</button>
</span>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 02 · 最重要的一屏</span>
<span class="title">命名规则试跑:发布前的唯一闸门</span>
<b>没有这一屏,规则配错就会导致全员改名错误</b>——而且错到导出时才会发现,那时已无法挽回。所以它被设成<b>发布的前置条件</b>(未试跑不给发布)。
<span class="note">结果表用<b style="color:var(--seal)">红底高亮"改了什么"</b>、<b style="color:var(--jade)">绿底标"补了什么"</b>。最后一行陈子文的案例最有价值:系统明确说"两个号码校验位都通过 = 是两个真人,不是打字错误",并<b>拒绝自动修改</b>——把判断权交还给人。</span>
</figcaption>
</figure>
<!-- ③ 名单导入体检 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/tasks/1/roster/import</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a class="on"><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>导入名单</h2><span class="crumb">2026年9月机电专业认定材料收集</span></div>
<div class="scroll">
<div class="card">
<header>① 表头识别<span class="sp"><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>已自动定位</span></span></header>
<div class="body">
<div class="note info" style="margin-bottom:14px">
<svg class="ico"><use href="#i-bulb"/></svg>
<div>系统<b>没有假设"第一行是表头"</b>,而是在工作表中逐行查找同时包含「姓名」「身份证号」的行。
本次在<b>工作表「填表注意事项」的第 6 行</b>找到表头——该文件前 5 行是填表说明与示例。</div>
</div>
<div style="border:1px solid var(--line);border-radius:9px;overflow:hidden">
<table>
<thead><tr><th style="width:52px">行</th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>…</th><th style="width:104px">判定</th></tr></thead>
<tbody>
<tr style="color:var(--ink4)"><td class="num">1</td><td colspan="6" style="font-size:11.5px">特别注意:请勿调整模板!!!在第一个…</td><td><span class="pill gray">说明</span></td></tr>
<tr style="color:var(--ink4)"><td class="num">2</td><td colspan="6" style="font-size:11.5px">01、标题颜色:红色标题为必填项…</td><td><span class="pill gray">说明</span></td></tr>
<tr style="color:var(--ink4)"><td class="num">3</td><td colspan="6" style="font-size:11.5px">02、下拉选项:学历、报考等级…</td><td><span class="pill gray">说明</span></td></tr>
<tr style="color:var(--ink4)"><td class="num">4</td><td colspan="6" style="font-size:11.5px">…</td><td><span class="pill gray">说明</span></td></tr>
<tr style="color:var(--ink4)"><td class="num">5</td><td colspan="6" style="font-size:11.5px">…</td><td><span class="pill gray">说明</span></td></tr>
<tr style="background:var(--jade-soft);font-weight:600"><td class="num">6</td><td>序号</td><td>姓名</td><td>身份证号</td><td>学历</td><td>联系电话</td><td>…</td><td><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>表头</span></td></tr>
<tr><td class="num">7</td><td>1</td><td>熊宇豪</td><td class="mono">360981…4437</td><td>技工学校</td><td class="mono">199…0823</td><td>…</td><td><span class="pill auto">数据</span></td></tr>
<tr><td class="num">8</td><td>2</td><td>魏航</td><td class="mono">360427…3318</td><td>技工学校</td><td class="mono">178…3067</td><td>…</td><td><span class="pill auto">数据</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="cols" style="grid-template-columns:1fr 1fr">
<div class="card">
<header>② 字段映射<span class="sp"><span class="hint">21 列已自动匹配</span></span></header>
<div class="body" style="padding:0">
<table>
<thead><tr><th>Excel 列</th><th>系统字段</th><th style="width:88px">状态</th></tr></thead>
<tbody>
<tr><td class="mono">B · 姓名</td><td>姓名</td><td><span class="pill ok">已匹配</span></td></tr>
<tr><td class="mono">C · 身份证号</td><td>身份证号</td><td><span class="pill ok">已匹配</span></td></tr>
<tr><td class="mono">G · 报考职业</td><td>报考职业 <span class="pill crit" style="font-size:10px"><svg class="ico"><use href="#i-lock"/></svg>锁定</span></td><td><span class="pill ok">已匹配</span></td></tr>
<tr><td class="mono">H · 报考工种</td><td>报考工种 <span class="pill crit" style="font-size:10px"><svg class="ico"><use href="#i-lock"/></svg>锁定</span></td><td><span class="pill ok">已匹配</span></td></tr>
<tr><td class="mono">I · 报考等级</td><td>报考等级 <span class="pill crit" style="font-size:10px"><svg class="ico"><use href="#i-lock"/></svg>锁定</span></td><td><span class="pill ok">已匹配</span></td></tr>
<tr><td class="mono">D · 学历</td><td>学历 <span class="pill warn" style="font-size:10px">可改</span></td><td><span class="pill ok">已匹配</span></td></tr>
<tr><td class="mono">N · 是否在校生</td><td>是否在校生 <span class="pill warn" style="font-size:10px">可改</span></td><td><span class="pill ok">已匹配</span></td></tr>
<tr><td class="mono" style="color:var(--ink4)">— 未识别 —</td><td style="color:var(--ink4)">(其余 14 列)</td><td><span class="pill gray">忽略</span></td></tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<header>③ 导入体检<span class="sp"><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>可以导入</span></span></header>
<div class="body">
<div class="stats" style="grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px">
<div class="stat" style="padding:12px"><div class="lbl">总行数</div><div class="num" style="font-size:22px">28</div></div>
<div class="stat jade" style="padding:12px"><div class="lbl">通过</div><div class="num" style="font-size:22px">28</div></div>
<div class="stat amber" style="padding:12px"><div class="lbl">警告</div><div class="num" style="font-size:22px">1</div></div>
</div>
<div class="note warn" style="margin-bottom:12px">
<svg class="ico"><use href="#i-alert"/></svg>
<div><b>1 项需要注意(不阻断导入)</b><br>
「报考工种」出现 2 种写法:<span class="mono">数控车工</span>(27 人)与 <span class="mono">普通车工</span>(1 人)——见下一步的「报考范围确认」。</div>
</div>
<div class="note ok">
<svg class="ico"><use href="#i-check-circle"/></svg>
<div><b>身份证号 28/28 全部通过校验位</b>,无重复、无缺失。姓名列无重复。</div>
</div>
</div>
</div>
</div>
</div>
<div style="flex:none;padding:13px 20px;background:var(--paper2);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px">
<span style="font-size:12px;color:var(--ink3)">表头定位 + 字段映射已确认,可导入</span>
<span style="margin-left:auto;display:flex;gap:10px">
<button class="btn ghost">重新选择文件</button>
<button class="btn primary"><svg class="ico"><use href="#i-check"/></svg>确认导入 28 人</button>
</span>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 03</span>
<span class="title">名单导入:把"系统怎么认表头"摊开给人看</span>
实测两份真实文件,<b>表头一个在第 1 行、一个在第 6 行</b>,工作表名也不同。所以系统不猜、也不要求用户改文件,而是<b>把定位过程可视化</b>——说明行标灰、表头行标绿,让人一眼确认"认对了没有"。
<span class="note">第②栏的字段映射里,<b style="color:var(--seal)">报考三项带"锁定"标记</b>——这是在导入阶段就告诉管理员:这三项由你确定,学生端只读。第③栏的体检把"警告"和"通过"分开呈现,并明确写"不阻断导入"。</span>
</figcaption>
</figure>
<!-- ④ 报考范围确认 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/tasks/1/scope</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a class="on"><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>报考范围确认</h2><span class="crumb">2026年9月机电专业认定材料收集</span></div>
<div class="scroll">
<div class="note info" style="margin-bottom:16px">
<svg class="ico"><use href="#i-bulb"/></svg>
<div><b>本期报考范围由名单自动聚合而来。</b>系统不做更正,只做一致性体检——单看一行都合法,但"27 人报 A、1 人报 B"这种情况只有聚合后才能发现。</div>
</div>
<div class="card">
<header>聚合结果<span class="sp"><span class="hint">共 2 组 · 28 人</span></span></header>
<table>
<thead><tr><th>报考职业</th><th>报考工种</th><th>报考等级</th><th style="width:96px">人数</th><th style="width:110px">占比</th><th style="width:180px">判定</th></tr></thead>
<tbody>
<tr style="background:var(--jade-soft)">
<td>车工</td><td>数控车工</td><td>四级/中级工</td>
<td class="num" style="font-weight:600">27</td>
<td class="mono">96.4%</td>
<td><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>主体范围</span></td></tr>
<tr style="background:var(--amber-soft)">
<td>车工</td><td style="font-weight:600;color:var(--amber)">普通车工</td><td style="font-weight:600;color:var(--amber)">三级/高级工</td>
<td class="num" style="font-weight:600;color:var(--amber)">1</td>
<td class="mono" style="color:var(--amber)">3.6%</td>
<td><span class="pill warn"><svg class="ico"><use href="#i-alert"/></svg>疑似填错</span></td></tr>
</tbody>
</table>
<div class="body" style="border-top:1px solid var(--line)">
<div class="note warn" style="margin-bottom:0">
<svg class="ico"><use href="#i-alert"/></svg>
<div><b>「普通车工 / 三级高级工」仅 1 人,占比 3.6%,明显偏离主体范围。</b>
常见的三种可能:① 该生确实单独报考了另一个工种;② 老师录入时选错了;③ 该生是转班生,用的是上一批次的配置。<br>
请核对后再决定——<b>系统不会自动改名单</b>。</div>
</div>
</div>
</div>
<div class="cols" style="grid-template-columns:1fr 1fr">
<div class="card">
<header>定位到的人</header>
<div class="body" style="padding:0">
<table>
<thead><tr><th>姓名</th><th>身份证号</th><th>归属</th></tr></thead>
<tbody>
<tr><td>余饶平</td><td class="mono">360281…4035</td><td><span class="pill auto">24中技数控1班</span></td></tr>
</tbody>
</table>
<div class="body" style="border-top:1px solid var(--line);padding-top:12px;display:flex;gap:9px">
<button class="btn ghost sm">查看该生名单行</button>
<button class="btn ghost sm">通知班主任核对</button>
</div>
</div>
</div>
<div class="card">
<header>后续影响<span class="sp"><span class="hint">重要</span></span></header>
<div class="body" style="font-size:12.5px;line-height:1.9;color:var(--ink2)">
<b style="color:var(--ink)">· 学生端展示</b><br>
学生核验通过后会看到"你报考:车工 / 普通车工 / 三级高级工"——<b>如果这是错的,学生会发现并反馈</b>。<br>
<b style="color:var(--ink)">· 中途追加名单</b><br>
若之后补录的人报考项<b>超出已确认范围</b>,系统会告警并要求你确认后才接受。
</div>
</div>
</div>
</div>
<div style="flex:none;padding:13px 20px;background:var(--paper2);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px">
<span style="font-size:12px;color:var(--ink3)">确认后,学生端将按此范围展示报考信息</span>
<span style="margin-left:auto;display:flex;gap:10px">
<button class="btn ghost">去修改名单</button>
<button class="btn primary"><svg class="ico"><use href="#i-check"/></svg>确认范围无误</button>
</span>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 04 · 新概念</span>
<span class="title">报考范围确认:不做更正,只做体检</span>
「报考范围」这个实体<b>是我们拆解官方模板时才发现的</b>——模板规则 04/05/06 说"只能填当前评价计划中的职业/工种/等级",但实测确认<b>这个范围就藏在名单里</b>(老师导入时已填好),不存在独立的计划文件。
<span class="note">所以这里<b>不设计"约束"设计,而是"体检"设计</b>:系统把聚合结果摆出来,标出"少数派",给出三种常见原因,然后<b>把决定权交还给人</b>。这种"27 人一致、1 人例外"的问题,单看任何一行都合法,只有聚合后才能发现。</span>
</figcaption>
</figure>
<!-- ⑤ 数据看板 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/tasks/1/dashboard</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a class="on"><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>数据看板</h2><span class="crumb">24中技数控1班 · 实时</span>
<span class="sp"><button class="btn ghost sm"><svg class="ico"><use href="#i-download"/></svg>导出异常清单</button></span>
</div>
<div class="scroll">
<div class="stats">
<div class="stat"><div class="lbl">应填人数</div><div class="num">28</div><div class="foot">1 个班级</div></div>
<div class="stat jade"><div class="lbl">已终审通过</div><div class="num">15</div><div class="foot">53.6%</div></div>
<div class="stat amber"><div class="lbl">提交待处理</div><div class="num">8</div><div class="foot">初审 4 · 待核对 3 · 异常 1</div></div>
<div class="stat seal"><div class="lbl">未提交</div><div class="num">5</div><div class="foot">距截止 3 天</div></div>
</div>
<div class="cols" style="grid-template-columns:1fr 1fr">
<div class="card">
<header>按报考工种统计<span class="sp"><span class="hint">来自正式列,实时聚合</span></span></header>
<div class="body" style="padding:0">
<table>
<thead><tr><th>报考工种</th><th>等级</th><th style="width:70px">人数</th><th>占比</th></tr></thead>
<tbody>
<tr><td>数控车工</td><td>四级/中级工</td><td class="num">27</td>
<td><div style="display:flex;align-items:center;gap:9px"><div style="flex:1;height:6px;border-radius:3px;background:#e8e4db;overflow:hidden"><i style="display:block;height:100%;width:96%;background:var(--jade)"></i></div><span class="mono" style="font-size:11px">96.4%</span></div></td></tr>
<tr><td>普通车工</td><td>三级/高级工</td><td class="num">1</td>
<td><div style="display:flex;align-items:center;gap:9px"><div style="flex:1;height:6px;border-radius:3px;background:#e8e4db;overflow:hidden"><i style="display:block;height:100%;width:4%;background:var(--amber)"></i></div><span class="mono" style="font-size:11px">3.6%</span></div></td></tr>
</tbody>
</table>
<div class="body" style="border-top:1px solid var(--line);padding-top:12px">
<div class="note ok" style="margin-bottom:0">
<svg class="ico"><use href="#i-check-circle"/></svg>
<div><b>这类统计之所以能实时出,是因为 18 个业务字段建成了正式列,而不是塞进 JSON。</b>SQL 直接 <span class="mono">GROUP BY</span>,还能吃到索引。</div>
</div>
</div>
</div>
</div>
<div class="card">
<header>材料异常清单<span class="sp"><span class="pill crit">需处理 4</span></span></header>
<div class="body" style="padding:0">
<table>
<thead><tr><th>姓名</th><th>问题</th><th style="width:96px">级别</th></tr></thead>
<tbody>
<tr><td>陈子文</td><td style="font-size:11.5px">一寸照片证件号与其它材料不符</td><td><span class="pill crit">串档</span></td></tr>
<tr><td>杨晨</td><td style="font-size:11.5px">身份证图偏小 558×745</td><td><span class="pill warn">低清</span></td></tr>
<tr><td>曹文锋</td><td style="font-size:11.5px">证件号 17 位,已按名单补齐</td><td><span class="pill warn">待核对</span></td></tr>
<tr><td>黎思明</td><td style="font-size:11.5px">证件号 17 位,已按名单补齐</td><td><span class="pill warn">待核对</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card">
<header>处理进度<span class="sp"><span class="hint">按状态分布</span></span></header>
<div class="body">
<div style="display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--line)">
<i style="width:53.6%;background:var(--jade)"></i>
<i style="width:14.3%;background:var(--ink)"></i>
<i style="width:10.7%;background:var(--amber)"></i>
<i style="width:3.6%;background:var(--seal)"></i>
<i style="width:17.8%;background:#eceae4"></i>
</div>
<div style="display:flex;gap:22px;margin-top:13px;font-size:11.5px;color:var(--ink2);flex-wrap:wrap">
<span style="display:flex;align-items:center;gap:7px"><i style="width:9px;height:9px;border-radius:2px;background:var(--jade);display:block"></i>已通过 15</span>
<span style="display:flex;align-items:center;gap:7px"><i style="width:9px;height:9px;border-radius:2px;background:var(--ink);display:block"></i>待初审 4</span>
<span style="display:flex;align-items:center;gap:7px"><i style="width:9px;height:9px;border-radius:2px;background:var(--amber);display:block"></i>待核对 3</span>
<span style="display:flex;align-items:center;gap:7px"><i style="width:9px;height:9px;border-radius:2px;background:var(--seal);display:block"></i>异常 1</span>
<span style="display:flex;align-items:center;gap:7px"><i style="width:9px;height:9px;border-radius:2px;background:#eceae4;display:block"></i>未提交 5</span>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 05</span>
<span class="title">数据看板:把"为什么能实时统计"写出来</span>
这是当初<b>坚持把 18 个业务字段建成正式列、而不是塞进 JSON</b> 换来的能力——按工种统计、按学历筛选、按班级排名全部走 SQL 聚合 + 索引,实时出数。
<span class="note">看板上直接放了一句说明:"这类统计之所以能实时出,是因为字段建成了正式列。"——<b>把架构决策的收益摆在用户能看到的地方</b>,比写在技术文档里有用。</span>
</figcaption>
</figure>
<!-- ⑥ 终审 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/review?status=pending_final</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a class="on"><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>终审</h2><span class="crumb">仅显示班主任已初审通过的填报单</span>
<span class="sp"><button class="btn ghost sm">批量驳回</button><button class="btn jade sm"><svg class="ico"><use href="#i-check"/></svg>通过所选 12 人</button></span>
</div>
<div class="filters">
<span class="fchip on">全部 <span class="cnt">23</span></span>
<span class="fchip">无异常 <span class="cnt">22</span></span>
<span class="fchip">有异常 <span class="cnt">1</span></span>
<span style="margin-left:auto;font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:8px">
<svg class="ico" style="font-size:14px"><use href="#i-alert"/></svg>
<b style="color:var(--seal);font-weight:600">"一键全部通过"仅在零异常时可用</b>
</span>
</div>
<div class="scroll" style="padding:0">
<div style="background:var(--card);border:1px solid var(--line);border-radius:10px;margin:20px;overflow:hidden">
<table>
<thead><tr>
<th style="width:38px"><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px"></th>
<th>姓名</th><th>班级</th><th>初审人</th><th>材料</th><th>系统校验</th><th>提交时间</th><th style="width:130px">操作</th>
</tr></thead>
<tbody>
<tr><td><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px"></td>
<td>曾伊豪</td><td>24中技数控1班</td><td>李老师</td><td class="mono">4/4 · 2.9MB</td>
<td><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>无问题</span></td>
<td class="mono">09-28 09:41</td><td><button class="btn ghost sm">查看</button></td></tr>
<tr><td><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px"></td>
<td>李绍康</td><td>24中技数控1班</td><td>李老师</td><td class="mono">4/4 · 3.1MB</td>
<td><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>无问题</span></td>
<td class="mono">09-28 08:12</td><td><button class="btn ghost sm">查看</button></td></tr>
<tr><td><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px"></td>
<td>何天宇</td><td>24中技数控1班</td><td>李老师</td><td class="mono">4/4 · 2.6MB</td>
<td><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>无问题</span></td>
<td class="mono">09-27 21:03</td><td><button class="btn ghost sm">查看</button></td></tr>
<tr style="background:var(--seal-soft)"><td><input type="checkbox" style="accent-color:var(--jade);width:15px;height:15px"></td>
<td>陈子文</td><td>24中技数控1班</td><td>李老师</td><td class="mono">4/4 · 1.4MB</td>
<td><span class="pill crit"><svg class="ico"><use href="#i-alert"/></svg>疑似串档</span></td>
<td class="mono">09-27 16:55</td><td><button class="btn seal sm">处理</button></td></tr>
<tr><td><input type="checkbox" checked style="accent-color:var(--jade);width:15px;height:15px"></td>
<td>曾云天</td><td>24中技数控1班</td><td>李老师</td><td class="mono">4/4 · 2.2MB</td>
<td><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>无问题</span></td>
<td class="mono">09-27 15:20</td><td><button class="btn ghost sm">查看</button></td></tr>
</tbody>
</table>
</div>
<div class="note info" style="margin:0 20px 20px">
<svg class="ico"><use href="#i-shield"/></svg>
<div><b>"一键全部通过"按钮此刻是禁用状态</b>(因存在 1 条异常)。这是刻意的:防止管理员大而化之地放行。<b>只有整批零异常时才允许全通过。</b></div>
</div>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 06</span>
<span class="title">终审:把"全选"这条路堵掉一半</span>
终审是最容易出事的环节——管理员面对 23 条记录,天然想"全选通过"。所以设计上做了两层限制:<b>异常行默认不勾选且标红</b>,<b>"一键全部通过"在没有异常时才可用</b>。
<span class="note">表格里保留"初审人"一列——终审时能看到是谁初审判过的,出问题时可以回溯到人。<b>责任可见,是审核质量的前提。</b></span>
</figcaption>
</figure>
<!-- ⑦ 导出中心 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/export/new</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a class="on"><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>创建导出</h2><span class="crumb">2026年9月机电专业认定材料收集</span></div>
<div class="scroll">
<div class="note crit" style="margin-bottom:16px">
<svg class="ico"><use href="#i-alert"/></svg>
<div><b>前置检查未通过:1 份材料存在异常,无法打包。</b>
<br>陈子文的「一寸照片」疑似串档尚未处理。这是铁律——<b>不合格的文件不允许进入汇总包</b>。</div>
</div>
<div class="cols" style="grid-template-columns:1fr 1fr">
<div>
<div class="card">
<header>导出范围</header>
<div class="body" style="font-size:13px;line-height:2.2;color:var(--ink2)">
<label style="display:flex;align-items:center;gap:9px"><input type="radio" name="sc" style="accent-color:var(--ink)">全任务(23 人)</label>
<label style="display:flex;align-items:center;gap:9px"><input type="radio" name="sc" checked style="accent-color:var(--ink)">仅已终审通过(15 人)<span class="pill ok" style="font-size:10px">推荐</span></label>
<label style="display:flex;align-items:center;gap:9px"><input type="radio" name="sc" style="accent-color:var(--ink)">按班级选择</label>
<label style="display:flex;align-items:center;gap:9px"><input type="radio" name="sc" style="accent-color:var(--ink)">指定人员</label>
<div style="border-top:1px dashed var(--line);margin:12px 0;padding-top:12px">
<label style="display:flex;align-items:center;gap:9px"><input type="checkbox" style="accent-color:var(--ink)">同时包含原始文件(未经压缩)</label>
<label style="display:flex;align-items:center;gap:9px"><input type="checkbox" checked style="accent-color:var(--ink)">生成汇总 Excel</label>
<label style="display:flex;align-items:center;gap:9px"><input type="checkbox" style="accent-color:var(--ink)">证件号脱敏</label>
</div>
</div>
</div>
<div class="card">
<header>打包设置</header>
<div class="body" style="font-size:13px;line-height:2.2;color:var(--ink2)">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
<span style="width:88px">分卷大小</span>
<select style="padding:6px 10px;border:1.5px solid var(--line2);border-radius:7px;font-family:var(--font-body);font-size:12.5px;background:#fff">
<option>50 MB / 卷</option><option>100 MB / 卷</option><option>不分卷</option>
</select>
</div>
<div class="note info" style="margin-top:12px">
<svg class="ico"><use href="#i-bulb"/></svg>
<div>预计 <b>1 卷</b>,共 <b>约 37 MB</b>。对比原始文件总量 475 MB,<b>压缩率 92%</b>。</div>
</div>
</div>
</div>
</div>
<div class="card">
<header>目录结构预览<span class="sp"><span class="hint">按机构要求生成</span></span></header>
<div class="body" style="padding-top:14px">
<div class="tree">
<div class="d"><span class="br">├─ </span>202609机电认定-24中技数控1班/</div>
<div style="padding-left:20px"><span class="br">├─ </span><span class="d">一寸照片/</span></div>
<div style="padding-left:40px"><span class="br">│ └─ </span><span class="f">熊宇豪-360981200812084437-一寸照片.jpg</span> <span style="color:var(--ink4)">96KB</span></div>
<div style="padding-left:20px"><span class="br">├─ </span><span class="d">身份证/</span></div>
<div style="padding-left:40px"><span class="br">│ └─ </span><span class="f">熊宇豪-360981200812084437-身份证.jpg</span> <span style="color:var(--ink4)">810KB</span></div>
<div style="padding-left:20px"><span class="br">├─ </span><span class="d">学籍表/</span></div>
<div style="padding-left:40px"><span class="br">│ └─ </span><span class="f">熊宇豪-360981200812084437-学籍表.png</span> <span style="color:var(--ink4)">41KB</span></div>
<div style="padding-left:20px"><span class="br">├─ </span><span class="d">工作证明/</span></div>
<div style="padding-left:40px"><span class="br">│ └─ </span><span class="f">熊宇豪-360981200812084437-工作证明.jpg</span> <span style="color:var(--ink4)">806KB</span></div>
<div><span class="br">└─ </span><span class="f">考生线下报名信息导入模板(汇总).xlsx</span> <span style="color:var(--ink4)">18KB</span></div>
</div>
<div class="body" style="border-top:1px solid var(--line);padding:14px 0 0;margin-top:14px">
<div style="font-size:11.5px;color:var(--ink3);line-height:1.75">
共 <b style="color:var(--ink)">15 人 × 4 项 = 60 个文件</b>,已全部通过命名规范与体积校验。
</div>
</div>
</div>
</div>
</div>
</div>
<div style="flex:none;padding:13px 20px;background:var(--paper2);border-top:1px solid var(--line);display:flex;align-items:center;gap:10px">
<span style="font-size:12px;color:var(--ink3)">导出为异步任务,完成后微信通知你</span>
<span style="margin-left:auto;display:flex;gap:10px">
<button class="btn ghost">取消</button>
<button class="btn primary" disabled><svg class="ico"><use href="#i-download"/></svg>开始导出</button>
</span>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 07</span>
<span class="title">导出中心:把"不允许带问题打包"做成按钮禁用</span>
PRD 里的铁律 2 是「<b>没有规范文件名、没有压到 1M 内的文件,不得进入汇总包</b>」。这里不是弹个警告了事,而是<b>直接禁用"开始导出"按钮</b>,并指出是哪一个人的哪一项卡住了。
<span class="note">右侧的<b>目录树预览</b>是关键——管理员在点导出之前就能看到最终交付的文件长什么样、名字对不对、体积标没标。不用等打完包再解压检查。<br>
底部还报了一个容易被忽略的数字:<b>原始 475MB → 最终 37MB,压缩率 92%</b>。</span>
</figcaption>
</figure>
<!-- ⑧ 表单设计器 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/tasks/new?step=4</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a class="on"><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>新建收集任务</h2><span class="crumb">第 4 步 · 表单设计</span></div>
<div class="steps">
<div class="step done"><span class="n">1</span>基本信息</div><span class="arw">›</span>
<div class="step done"><span class="n">2</span>覆盖班级</div><span class="arw">›</span>
<div class="step done"><span class="n">3</span>名单</div><span class="arw">›</span>
<div class="step on"><span class="n">4</span>表单</div><span class="arw">›</span>
<div class="step"><span class="n">5</span>材料</div><span class="arw">›</span>
<div class="step"><span class="n">6</span>审核流</div><span class="arw">›</span>
<div class="step"><span class="n">7</span>预览发布</div>
</div>
<div class="scroll" style="padding:16px">
<div class="note info" style="margin-bottom:14px">
<svg class="ico"><use href="#i-bulb"/></svg>
<div><b>表单分两层:内置字段(来自官方模板,存正式列、可统计)+ 扩展字段(机构额外要求,存 JSON)。</b>内置字段的标签可改、顺序可调,但<b>不能删除</b>——它们是导出模板的固定列。</div>
</div>
<div style="display:grid;grid-template-columns:190px 1fr 268px;gap:14px;align-items:start">
<!-- 左:字段库 -->
<div class="card" style="margin:0">
<header style="font-size:12.5px;padding:11px 13px">字段库</header>
<div class="body" style="padding:11px 13px">
<div style="font-size:10px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--ink4);margin-bottom:8px">基础</div>
<div style="display:flex;flex-direction:column;gap:6px;margin-bottom:14px">
<div class="fld"><svg class="ico"><use href="#i-file"/></svg>单行文本</div>
<div class="fld"><svg class="ico"><use href="#i-file"/></svg>数字</div>
<div class="fld"><svg class="ico"><use href="#i-file"/></svg>单选 / 多选</div>
<div class="fld"><svg class="ico"><use href="#i-file"/></svg>日期</div>
<div class="fld"><svg class="ico"><use href="#i-file"/></svg>下拉字典</div>
</div>
<div style="font-size:10px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--ink4);margin-bottom:8px">专用</div>
<div style="display:flex;flex-direction:column;gap:6px">
<div class="fld hot"><svg class="ico"><use href="#i-idcard"/></svg>身份证号</div>
<div class="fld hot"><svg class="ico"><use href="#i-file"/></svg>手机号</div>
<div class="fld hot"><svg class="ico"><use href="#i-lock"/></svg>职业工种级联</div>
</div>
<div style="font-size:11px;color:var(--ink4);margin-top:12px;line-height:1.6">拖到右侧画布即可添加</div>
</div>
</div>
<!-- 中:画布 -->
<div class="card" style="margin:0">
<header style="font-size:12.5px;padding:11px 13px">表单画布<span class="sp"><span class="pill auto">21 内置 + 0 扩展</span></span></header>
<div class="body" style="padding:11px 13px;max-height:396px;overflow-y:auto">
<div style="font-size:10px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--ink4);margin-bottom:8px">内置字段 · 来自官方模板</div>
<div class="frow lock"><span class="grip">⋮⋮</span><span class="fn">姓名</span><span class="ft">文本</span><span class="pill crit" style="font-size:10px"><svg class="ico"><use href="#i-lock"/></svg>锁定</span></div>
<div class="frow lock"><span class="grip">⋮⋮</span><span class="fn">身份证号</span><span class="ft">身份证</span><span class="pill crit" style="font-size:10px"><svg class="ico"><use href="#i-lock"/></svg>锁定</span></div>
<div class="frow lock"><span class="grip">⋮⋮</span><span class="fn">报考职业 / 工种 / 等级</span><span class="ft">级联</span><span class="pill crit" style="font-size:10px"><svg class="ico"><use href="#i-lock"/></svg>锁定</span></div>
<div class="frow sel"><span class="grip">⋮⋮</span><span class="fn">学历</span><span class="ft">下拉 11 项</span><span class="pill warn" style="font-size:10px">可改</span></div>
<div class="frow"><span class="grip">⋮⋮</span><span class="fn">联系电话</span><span class="ft">手机号</span></div>
<div class="frow"><span class="grip">⋮⋮</span><span class="fn">工作单位</span><span class="ft">文本</span></div>
<div class="frow"><span class="grip">⋮⋮</span><span class="fn">是否补考</span><span class="ft">是/否</span></div>
<div class="frow" style="padding-left:26px;border-left:3px solid var(--jade-soft)"><span class="grip">⋮⋮</span><span class="fn">补考理论 / 实操 / 综合</span><span class="ft">级联</span><span class="pill ok" style="font-size:10px">条件显示</span></div>
<div class="frow"><span class="grip">⋮⋮</span><span class="fn">是否在校生</span><span class="ft">是/否</span></div>
<div class="frow" style="padding-left:26px;border-left:3px solid var(--jade-soft)"><span class="grip">⋮⋮</span><span class="fn">在读学校 / 所学专业 / 入学时间</span><span class="ft">级联</span><span class="pill ok" style="font-size:10px">条件显示</span></div>
<div class="frow"><span class="grip">⋮⋮</span><span class="fn">本职业工作年限</span><span class="ft">数字</span></div>
<div class="frow"><span class="grip">⋮⋮</span><span class="fn">已获证书职业工种 / 等级 / 编号</span><span class="ft">文本</span></div>
<div style="font-size:10px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--ink4);margin:14px 0 8px">扩展字段 · 存 JSON,不参与核心统计</div>
<div style="border:1.5px dashed var(--line2);border-radius:8px;padding:16px;text-align:center;font-size:11.5px;color:var(--ink4)">从左侧拖字段到这里</div>
</div>
</div>
<!-- 右:属性 -->
<div class="card" style="margin:0">
<header style="font-size:12.5px;padding:11px 13px">字段属性<span class="sp"><span class="hint">学历</span></span></header>
<div class="body" style="padding:13px">
<div style="font-size:11.5px;color:var(--ink3);margin-bottom:6px">标签</div>
<input value="学历" style="width:100%;height:32px;border:1.5px solid var(--line2);border-radius:7px;padding:0 10px;font-family:var(--font-body);font-size:12.5px;margin-bottom:12px">
<div style="font-size:11.5px;color:var(--ink3);margin-bottom:6px">选项来源</div>
<select style="width:100%;height:32px;border:1.5px solid var(--line2);border-radius:7px;padding:0 8px;font-family:var(--font-body);font-size:12.5px;background:#fff;margin-bottom:12px">
<option>字典 · 学历(11 项)</option>
<option>手动输入选项</option>
</select>
<div style="font-size:11.5px;color:var(--ink3);margin-bottom:8px">校验</div>
<label style="display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:7px"><input type="checkbox" checked style="accent-color:var(--jade);width:14px;height:14px">必填</label>
<label style="display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:12px"><input type="checkbox" style="accent-color:var(--jade);width:14px;height:14px">严格值匹配(禁止手填)</label>
<div style="font-size:11.5px;color:var(--ink3);margin-bottom:6px">学生端行为</div>
<div class="note warn" style="padding:9px 11px;font-size:11.5px;line-height:1.6">
<svg class="ico" style="font-size:13px"><use href="#i-pencil"/></svg>
<div><b>预填可改</b><br>名单有值则预填并标注"老师已填,请核对"</div>
</div>
</div>
</div>
</div>
<div class="card" style="margin-top:14px">
<header>条件显示规则<span class="sp"><span class="hint">官方模板用绿色标题标识的级联列</span></span></header>
<div class="body" style="padding:13px 16px">
<div class="rule-row">
<span class="pill gray">当</span><span class="mono">是否补考</span><span class="op">=</span><span class="val">是</span>
<span class="arrow">→</span><span class="pill ok">显示</span><span class="mono">补考理论 / 补考实操 / 补考综合</span>
<span class="pill warn" style="margin-left:auto">并校验:科目数受等级约束</span>
</div>
<div class="rule-row">
<span class="pill gray">当</span><span class="mono">是否在校生</span><span class="op">=</span><span class="val">是</span>
<span class="arrow">→</span><span class="pill ok">显示且必填</span><span class="mono">在读学校 / 所学专业 / 入学时间</span>
<span class="pill warn" style="margin-left:auto">入学时间格式 YYYY-MM-DD</span>
</div>
<div class="rule-row">
<span class="pill gray">当</span><span class="mono">认定类型</span><span class="op">=</span><span class="val">专项职业能力</span>
<span class="arrow">→</span><span class="pill crit">隐藏</span><span class="mono">报考工种 / 报考等级 / 全部补考科目</span>
<span class="pill crit" style="margin-left:auto">整组跳过校验</span>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 08</span>
<span class="title">表单设计器:内置字段锁定,扩展字段自由</span>
左中右三栏是老配方(字段库 / 画布 / 属性),但有一个关键约束:<b style="color:var(--seal)">内置的 21 个字段带锁标记,可改标签、可调顺序,但不能删除</b>——它们是导出模板的固定列,删了就无法写回官方 Excel。
<span class="note">底部那三条<b>条件显示规则</b>直接对应官方模板的"绿色标题 = 级联选项"。第三条(专项职业能力 → 整组隐藏并跳过校验)最容易被漏做,单独列出来。<br>
"扩展字段"区域用虚线框标注<b>存 JSON、不参与核心统计</b>——把之前那个架构取舍摆在配置界面上,管理员就知道为什么有些字段能统计、有些不能。</span>
</figcaption>
</figure>
<!-- ⑨ 材料规则配置 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/tasks/new?step=5</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a class="on"><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>新建收集任务</h2><span class="crumb">第 5 步 · 材料规则</span>
<span class="sp"><button class="btn ghost sm">从规则模板导入</button><button class="btn primary sm">保存为模板</button></span>
</div>
<div class="steps">
<div class="step done"><span class="n">1</span>基本信息</div><span class="arw">›</span>
<div class="step done"><span class="n">2</span>覆盖班级</div><span class="arw">›</span>
<div class="step done"><span class="n">3</span>名单</div><span class="arw">›</span>
<div class="step done"><span class="n">4</span>表单</div><span class="arw">›</span>
<div class="step on"><span class="n">5</span>材料</div><span class="arw">›</span>
<div class="step"><span class="n">6</span>审核流</div><span class="arw">›</span>
<div class="step"><span class="n">7</span>预览发布</div>
</div>
<div class="scroll" style="padding:16px">
<div style="display:grid;grid-template-columns:206px 1fr;gap:14px;align-items:start">
<div class="card" style="margin:0">
<header style="font-size:12.5px;padding:11px 13px">材料清单<span class="sp"><span class="hint">4 项</span></span></header>
<div class="body" style="padding:8px">
<div class="mitem on"><svg class="ico"><use href="#i-image"/></svg><div><div class="mn">一寸照片</div><div class="ms">P1 证件照 · ≤0.3M</div></div></div>
<div class="mitem"><svg class="ico"><use href="#i-idcard"/></svg><div><div class="mn">身份证</div><div class="ms">P2 证件翻拍 · ≤1M</div></div></div>
<div class="mitem"><svg class="ico"><use href="#i-file"/></svg><div><div class="mn">学籍表</div><div class="ms">P4 截图 · ≤1M</div></div></div>
<div class="mitem"><svg class="ico"><use href="#i-stamp"/></svg><div><div class="mn">工作证明</div><div class="ms">P3 扫描件 · ≤1M</div></div></div>
<button class="btn ghost sm" style="width:100%;justify-content:center;margin-top:8px">+ 添加材料项</button>
</div>
</div>
<div class="card" style="margin:0">
<header>「一寸照片」的规则<span class="sp"><span class="pill auto">实测 984×1378 → 规格化 295×413</span></span></header>
<div class="body" style="padding:16px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:18px">
<div>
<div class="f-label">命名模板</div>
<div class="tpl" style="margin:0 0 8px;font-size:13px">{<em>姓名</em>}<span class="sep">-</span>{<em>证件号</em>}<span class="sep">-</span>{<em>材料名</em>}.jpg</div>
<div class="vars" style="margin-bottom:14px">
<span class="vchip">{姓名}</span><span class="vchip">{证件号}</span><span class="vchip">{班级}</span><span class="vchip">{序号}</span>
</div>
<div class="f-label">别名(用于识别历史文件名)</div>
<div style="font-size:12px;color:var(--ink2);line-height:1.9;background:#faf9f6;border:1px solid var(--line);border-radius:7px;padding:9px 11px">
1寸照片 · 一寸电子照片 · 证件照 · 免冠照
</div>
</div>
<div>
<div class="f-label">格式与体积</div>
<div style="display:flex;gap:8px;margin-bottom:12px">
<span class="pill ok">jpg</span><span class="pill ok">png</span><span class="pill gray">pdf</span><span class="pill gray">heic</span>
</div>
<div style="display:flex;align-items:center;gap:9px;font-size:12.5px;margin-bottom:12px">
<span style="color:var(--ink3)">体积上限</span>
<input value="300" style="width:62px;height:29px;border:1.5px solid var(--line2);border-radius:6px;padding:0 8px;font-family:var(--font-mono);font-size:12px;text-align:right">
<span class="mono" style="color:var(--ink3)">KB</span>
<span class="pill warn" style="margin-left:4px">含下限保护</span>
</div>
<div class="f-label">压缩档位</div>
<select style="width:100%;height:32px;border:1.5px solid var(--line2);border-radius:7px;padding:0 8px;font-family:var(--font-body);font-size:12.5px;background:#fff">
<option>P1 证件照(固定 295×413 @300dpi)</option>
<option>P2 证件翻拍</option><option>P3 A4 扫描件</option><option>P4 截图</option>
</select>
<div class="note ok" style="margin-top:12px;padding:9px 11px;font-size:11.5px">
<svg class="ico" style="font-size:13px"><use href="#i-check-circle"/></svg>
<div>本项有专属规则:<b>证件照规格化</b>会裁切并写入 300dpi</div>
</div>
</div>
</div>
<div style="border-top:1px solid var(--line);margin-top:16px;padding-top:14px">
<div class="f-label">来源引导语(显示在学生端)</div>
<input value="照相馆给过你电子版吗?在微信聊天记录里搜一下" style="width:100%;height:34px;border:1.5px solid var(--line2);border-radius:7px;padding:0 11px;font-family:var(--font-body);font-size:12.5px">
<div style="display:flex;gap:20px;margin-top:12px;font-size:12.5px;color:var(--ink2)">
<label style="display:flex;align-items:center;gap:8px"><input type="checkbox" checked style="accent-color:var(--jade);width:14px;height:14px">必传</label>
<label style="display:flex;align-items:center;gap:8px"><input type="checkbox" checked style="accent-color:var(--jade);width:14px;height:14px">允许一次多选</label>
<label style="display:flex;align-items:center;gap:8px"><input type="checkbox" style="accent-color:var(--jade);width:14px;height:14px">开启拍照入口<span class="pill gray" style="font-size:10px">默认关闭</span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 09</span>
<span class="title">材料规则配置:把"压缩档位"做成可解释的选择</span>
每个材料项独立配置命名模板、别名、格式白名单、体积上限、压缩档位、来源引导语。左侧列表直接显示每项的档位与上限——<b>管理员一眼能看出四项材料用了四套不同规则</b>。
<span class="note">三个细节:① 体积上限旁标"<b>含下限保护</b>"(防止过度压缩,实测有一张身份证只有 0.08MB);② 压缩档位下拉里写明每档的适用条件("P1 证件照(固定 295×413)"),不是让管理员去猜 "P1" 是什么;③ "<b>开启拍照入口</b>"默认不勾——因为实测 4 类材料无一来自现场拍照。</span>
</figcaption>
</figure>
<!-- ⑩ 历史数据整理器 -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/cleanup</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a><svg class="ico"><use href="#i-users"/></svg>名单管理</a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
<div class="grp">工具</div>
<a class="on"><svg class="ico"><use href="#i-wand"/></svg>历史数据整理</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar"><h2>历史数据整理</h2><span class="crumb">把已有的乱文件夹,一键变成规范包</span></div>
<div class="scroll">
<div class="note info" style="margin-bottom:16px">
<svg class="ico"><use href="#i-bulb"/></svg>
<div><b>不需要重新收集。</b>把手上已有的压缩包或文件夹传上来,系统会用与正式收集<b>完全相同的规则</b>改名、压缩、体检,输出一份可直接上报的规范包 + 一份问题清单。</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start">
<div class="card">
<header>① 上传<span class="sp"><span class="pill ok"><svg class="ico"><use href="#i-check"/></svg>已解析</span></span></header>
<div class="body">
<div style="display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:9px;background:#faf9f6;margin-bottom:12px">
<svg class="ico" style="font-size:24px;color:var(--ink4)"><use href="#i-folder"/></svg>
<div style="flex:1">
<div style="font-size:13px;font-weight:600;font-family:var(--font-mono)">24中技数控1班.rar</div>
<div style="font-size:11px;color:var(--ink3);margin-top:3px;font-family:var(--font-mono)">436 MB · 4 个目录 · 112 个文件</div>
</div>
</div>
<div class="note ok" style="margin-bottom:0">
<svg class="ico"><use href="#i-check-circle"/></svg>
<div>已按<b>「姓名-证件号-材料名」</b>解析出 28 名学生的 4 类材料,无需命名规范即可识别。</div>
</div>
</div>
</div>
<div class="card">
<header>② 定期体检报告<span class="sp"><span class="hint">用真实数据实测得出</span></span></header>
<div class="body" style="padding:0">
<table>
<thead><tr><th>问题类型</th><th style="width:70px">数量</th><th style="width:96px">占比</th><th style="width:100px">处理</th></tr></thead>
<tbody>
<tr><td>命名违规</td><td class="num" style="font-weight:600">59</td><td class="mono">52.7%</td><td><span class="pill auto">自动修复</span></td></tr>
<tr><td>体积超标(&gt;1M)</td><td class="num" style="font-weight:600">31</td><td class="mono">27.7%</td><td><span class="pill auto">自动压缩</span></td></tr>
<tr><td>证件号与名单不符</td><td class="num" style="font-weight:600;color:var(--seal)">5</td><td class="mono">17.9%</td><td><span class="pill warn">3 自动 · 2 待确认</span></td></tr>
<tr style="background:var(--seal-soft)"><td>疑似串档</td><td class="num" style="font-weight:600;color:var(--seal)">1</td><td class="mono">3.6%</td><td><span class="pill crit">必须人工</span></td></tr>
<tr><td>分辨率不足</td><td class="num">1</td><td class="mono">3.6%</td><td><span class="pill warn">提示重传</span></td></tr>
<tr><td>散图待归属</td><td class="num">0</td><td class="mono">—</td><td><span class="pill gray">—</span></td></tr>
</tbody>
</table>
<div class="body" style="border-top:1px solid var(--line);padding-top:13px">
<div class="note info" style="margin-bottom:0">
<svg class="ico"><use href="#i-bulb"/></svg>
<div><b>112 个文件里 59 个需要改名、31 个需要压缩,但只有 1 个必须你亲自判断。</b>其余 90 个系统全自动处理。</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<header>③ 输出结果<span class="sp"><span class="pill jade" style="background:var(--jade);color:#fff">规范化包已生成</span></span></header>
<div class="body">
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px">
<div class="stat" style="border-color:#cfe0d6;background:var(--jade-soft)"><div class="lbl">原始总量</div><div class="num" style="font-size:22px;color:var(--ink2)">475 MB</div></div>
<div class="stat" style="border-color:#cfe0d6;background:var(--jade-soft)"><div class="lbl">规范化后</div><div class="num" style="font-size:22px;color:var(--jade)">37 MB</div></div>
<div class="stat" style="border-color:#cfe0d6;background:var(--jade-soft)"><div class="lbl">压缩率</div><div class="num" style="font-size:22px;color:var(--jade)">92%</div></div>
</div>
<div style="display:flex;gap:10px">
<button class="btn jade"><svg class="ico"><use href="#i-download"/></svg>下载规范化包</button>
<button class="btn ghost"><svg class="ico"><use href="#i-download"/></svg>下载体检报告(Excel)</button>
<button class="btn ghost"><svg class="ico"><use href="#i-check"/></svg>把结果导入为正式任务</button>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 10 · 差异化获客功能</span>
<span class="title">历史数据整理器:让老师先看到价值,再谈上线</span>
客户手里往往已经有一堆历史乱数据(本例是 <b style="font-family:var(--font-mono)">436MB</b> 的 rar)。<b>不需要重新收集</b>,直接传上来就能产出规范包和问题清单——这是最有力的演示,也是最有效的获客入口。
<span class="note">报告里的数字<b>全部来自真实实测</b>:命名违规 59、体积超标 31、证件号异常 5(其中 3 个可自动、2 个待确认)、疑似串档 1、分辨率不足 1。最后那句"<b>90 个系统全自动处理,只有 1 个必须你亲自判断</b>",比任何功能列表都有说服力。</span>
</figcaption>
</figure>
<!-- ⑪ 名单加入申请审批(客户确认新增) -->
<figure>
<div class="frame-wrap"><div class="origin">
<div class="win"><div class="wbar">
<div class="lights"><i></i><i></i><i></i></div>
<div class="url"><svg class="ico"><use href="#i-shield"/></svg>https://admin.tianbaotong.cn/roster/join-requests</div>
</div><div class="view">
<aside class="side">
<div class="brand"><div class="mark">填</div><div><div class="bn">填报通</div><div class="bs">ADMIN CONSOLE</div></div></div>
<nav class="nav">
<a><svg class="ico"><use href="#i-home"/></svg>工作台</a>
<div class="grp">收集管理</div>
<a><svg class="ico"><use href="#i-task"/></svg>收集任务</a>
<a class="on"><svg class="ico"><use href="#i-users"/></svg>名单管理<span class="nb">5</span></a>
<a><svg class="ico"><use href="#i-check-circle"/></svg>终审<span class="nb">23</span></a>
<a><svg class="ico"><use href="#i-chart"/></svg>数据看板</a>
<a><svg class="ico"><use href="#i-download"/></svg>导出中心</a>
<div class="grp">工具</div>
<a><svg class="ico"><use href="#i-wand"/></svg>历史数据整理</a>
</nav>
<div class="who"><div class="av">王</div><div><div class="wn">王老师</div><div class="wr">学校管理员</div></div></div>
</aside>
<div class="main">
<div class="topbar">
<h2>名单加入申请</h2><span class="crumb">24中技数控1班 · 2026年9月认定</span>
<span class="sp"><button class="btn ghost sm">导出申请清单</button></span>
</div>
<div class="scroll">
<div class="note info" style="margin-bottom:16px">
<svg class="ico"><use href="#i-bulb"/></svg>
<div><b>这些人在门禁没匹配上,主动申请加入名单。</b>通过后会<b>自动建成名册项</b>,该学生凭微信再次进入即可直接填报,不用重输。<br>
<span style="font-size:11.5px;color:var(--ink3)">申请本身<b>不能填报</b>——通道只解决"进名单",不绕过门禁。</span></div>
</div>
<div style="display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start">
<div class="card" style="margin:0">
<header>待审申请<span class="sp"><span class="pill warn">5 条待处理</span></span></header>
<div class="body" style="padding:0">
<table>
<thead><tr>
<th style="width:26px"><input type="checkbox" style="accent-color:var(--jade);width:14px;height:14px"></th>
<th>申请人</th><th>身份证号</th><th>手机号</th><th>自述班级 / 说明</th><th style="width:74px">等待</th><th style="width:132px">操作</th>
</tr></thead>
<tbody>
<tr>
<td><input type="checkbox" style="accent-color:var(--jade);width:14px;height:14px"></td>
<td><b>李四</b></td>
<td class="mono">361004********3318</td>
<td class="mono">138****8888</td>
<td><span style="font-size:11.5px">24中技数控2班</span><br><span style="font-size:11px;color:var(--ink3)">我是这学期转到2班的</span></td>
<td class="mono">2.5h</td>
<td><button class="btn jade sm">通过</button> <button class="btn ghost sm">驳回</button></td>
</tr>
<tr>
<td><input type="checkbox" style="accent-color:var(--jade);width:14px;height:14px"></td>
<td><b>王芳</b> <span class="pill auto" style="font-size:10px">他任务已有</span></td>
<td class="mono">360105********1628</td>
<td class="mono">139****2233</td>
<td><span style="font-size:11.5px">—</span><br><span style="font-size:11px;color:var(--jade)">2026年3月认定 已在本校名单</span></td>
<td class="mono">5.1h</td>
<td><button class="btn jade sm">通过</button> <button class="btn ghost sm">驳回</button></td>
</tr>
<tr>
<td><input type="checkbox" style="accent-color:var(--jade);width:14px;height:14px"></td>
<td><b>赵敏</b></td>
<td class="mono">361029********4021</td>
<td class="mono">137****9012</td>
<td><span style="font-size:11.5px">24中技数控1班</span><br><span style="font-size:11px;color:var(--ink3)">名单上把我的名字写错了</span></td>
<td class="mono">7.8h</td>
<td><button class="btn jade sm">通过</button> <button class="btn ghost sm">驳回</button></td>
</tr>
<tr>
<td><input type="checkbox" style="accent-color:var(--jade);width:14px;height:14px"></td>
<td><b>陈强</b></td>
<td class="mono">362502********1830</td>
<td class="mono">135****6677</td>
<td><span style="font-size:11.5px">—</span><br><span style="font-size:11px;color:var(--ink3)">朋友说这里可以报名</span></td>
<td class="mono">21.3h</td>
<td><button class="btn jade sm">通过</button> <button class="btn ghost sm">驳回</button></td>
</tr>
<tr>
<td><input type="checkbox" style="accent-color:var(--jade);width:14px;height:14px"></td>
<td><b>孙悦</b> <span class="pill crit" style="font-size:10px">第 2 次申请</span></td>
<td class="mono">361024********0917</td>
<td class="mono">136****3344</td>
<td><span style="font-size:11.5px">24中技数控2班</span><br><span style="font-size:11px;color:var(--seal)">上次被驳回:班级不在本次范围</span></td>
<td class="mono">26.5h</td>
<td><button class="btn jade sm">通过</button> <button class="btn ghost sm">驳回</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:14px">
<div class="card" style="margin:0">
<header style="font-size:12.5px;padding:11px 13px">批量处理</header>
<div class="body" style="padding:13px">
<button class="btn jade" style="width:100%;justify-content:center;margin-bottom:9px">通过已选(2 条)</button>
<div class="note warn" style="padding:9px 11px;font-size:11.5px;line-height:1.65;margin-bottom:9px">
<svg class="ico" style="font-size:13px"><use href="#i-alert"/></svg>
<div><b>驳回必须逐条填原因</b>,不支持批量驳回</div>
</div>
<div style="font-size:11px;color:var(--ink3);line-height:1.7">
批量通过时会弹出确认框,逐条列出将建册的人员,<b>不提供"全选"快捷键</b>。
</div>
</div>
</div>
<div class="card" style="margin:0">
<header style="font-size:12.5px;padding:11px 13px">本任务申请统计</header>
<div class="body" style="padding:13px">
<div class="row" style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12.5px"><span style="color:var(--ink2)">待审核</span><b>5</b></div>
<div class="row" style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12.5px"><span style="color:var(--ink2)">已通过</span><b style="color:var(--jade)">12</b></div>
<div class="row" style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12.5px"><span style="color:var(--ink2)">已驳回</span><b>3</b></div>
<div class="row" style="display:flex;justify-content:space-between;padding:7px 0;font-size:12.5px"><span style="color:var(--ink2)">通过率</span><b>80%</b></div>
<div class="note info" style="margin-top:11px;padding:9px 11px;font-size:11.5px;line-height:1.6">
<svg class="ico" style="font-size:13px"><use href="#i-check-circle"/></svg>
<div>12 人已通过并自动入册</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div>
<figcaption>
<span class="tag">STEP 11 · 客户确认新增</span>
<span class="title">名单加入申请:给门禁一条受控的出口,而不是开后门</span>
门禁不通过的人原先只能"联系老师",老师再手工加名单。<b>几百人的社会收集场景下,老师会被拖垮</b>。这一屏把加人这件事从"老师手工"变成"学生自助 + 老师逐条裁决"。
<span class="note">四个细节:<br>
① <b>「他任务已有」标记</b>——王芳的证件号在「2026年3月认定」的名册里匹配上了,系统主动提示"这可能是本校学生",帮管理员判断;<br>
② <b>「第 2 次申请」标记</b>——孙悦上次被驳回,管理员能看到上次的驳回原因,避免重复纠结;<br>
③ <b>「驳回必须逐条填原因」</b>且批量通过不提供全选——身份认定环节的误操作代价极高,与"批量通过只带绿色项"同源;<br>
④ 顶部那句<b>「申请本身不能填报」</b>是设计边界:通道只解决"进名单",不绕过门禁。</span>
</figcaption>
</figure>
</div>
<section class="apron">
<h3>设计依据 · 桌面端与移动端的分工</h3>
<div class="aside-grid">
<div class="aside-card">
<h4><span class="n">01</span>为什么管理端必须做在 PC</h4>
任务向导 7 步、21 列字段映射、目录树预览、批量终审——<b>这些都需要足够大的画布和多列信息并置</b>。PRD 里明确"管理员在 PC 上操作",正是因为手机屏幕放不下这些决策所需的信息密度。
</div>
<div class="aside-card">
<h4><span class="n">02</span>为什么"命名规则试跑"是最重要的一屏</h4>
规则配错的代价是<b>全员改名错误</b>,而且<b>错到导出时才会发现</b>——那时学生早就交完材料了。所以它被设成发布的前置条件(未试跑不给发布),而不是一个可选功能。
</div>
<div class="aside-card">
<h4><span class="n">03</span>为什么表头识别要可视化</h4>
实测两份真实文件:一份表头在<b>第 1 行</b>、一份在<b>第 6 行</b>,工作表名还不同。系统自动定位之后,<b>必须让人确认"认对了没有"</b>——默默猜对是运气,猜错了没人知道。
</div>
<div class="aside-card">
<h4><span class="n">04</span>为什么"报考范围"只做体检不做更正</h4>
范围来自名单(老师已填好),系统<b>没有立场去改它</b>。但"27 人一致、1 人例外"这类问题单看任何一行都合法,只有聚合后才能发现——所以给出数据、给出三种常见原因,<b>把判断权交还给人</b>。
</div>
<div class="aside-card">
<h4><span class="n">05</span>为什么导出要禁用按钮而不是弹警告</h4>
警告可以点"我知道了"绕过,禁用不能。铁律必须体现在<b>交互层面</b>而非提示层面。同时明确告知"卡在谁身上、卡在哪一项",让管理员知道去哪儿解决。
</div>
<div class="aside-card">
<h4><span class="n">06</span>为什么数据看板要标注"来自正式列"</h4>
这是把架构决策的收益摆到用户能看到的地方。当初为"存 JSON 还是建列"争论过一轮,最终选择建 <b>18 个正式列</b>——代价是 DDL 长一点,收益是<b>按工种统计、按学历筛选、按班级排名全部实时且走索引</b>。
</div>
<div class="aside-card">
<h4><span class="n">07</span>为什么内置字段要"锁"</h4>
21 个内置字段来自官方模板,机构明确"请勿调整模板"。它们既是导出 Excel 的固定列,又是统计的正式列。所以设计器里**可改标签、可调顺序,但不能删除**——删了就无法写回官方模板。
</div>
<div class="aside-card">
<h4><span class="n">08</span>为什么压缩档位要写成"P1 证件照(固定 295×413)"</h4>
如果下拉里只写"P1 / P2 / P3",管理员必须去翻文档才知道选哪个。**把档位的适用条件直接写在选项里**,配置界面本身就变成说明书。
</div>
<div class="aside-card">
<h4><span class="n">09</span>为什么整理器是获客利器</h4>
客户手里普遍已有历史乱数据(本例 436MB 的 rar)。让他们**先看到价值再谈上线**:不重新收集,30 秒内出一份体检报告和规范包。报告里"<b>90 个系统全自动处理,只有 1 个必须你亲自判断</b>"这句话,比任何功能列表都有说服力。
</div>
</div>
</section>
<script>
// 缩放
document.querySelectorAll('.zoom button').forEach(b=>{
b.addEventListener('click',()=>{
document.querySelectorAll('.zoom button').forEach(x=>x.classList.remove('on'));
b.classList.add('on');
const z=parseFloat(b.dataset.z);
document.querySelectorAll('.origin').forEach(o=>{
o.style.transform=`scale(${z})`;
const h=o.querySelector('.win').getBoundingClientRect().height;
o.parentElement.style.height=(h)+'px';
});
});
});
// 进入视口浮现
const figs=[...document.querySelectorAll('figure')];
figs.forEach(f=>{f.style.opacity='0';f.style.transform='translateY(24px)';
f.style.transition='opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)';});
const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){
e.target.style.opacity='1';e.target.style.transform='translateY(0)';io.unobserve(e.target);}});},{threshold:.06});
figs.forEach(f=>io.observe(f));
// 筛选芯片
document.querySelectorAll('.fchip').forEach(c=>c.addEventListener('click',()=>{
c.parentElement.querySelectorAll('.fchip').forEach(x=>x.classList.remove('on'));c.classList.add('on');}));
</script>
</body>
</html>