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
This commit is contained in:
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>填报通 · 原型索引</title>
|
||||
<style>
|
||||
:root{
|
||||
--ink:#1b2430; --ink2:#4a5768; --ink3:#8b95a3;
|
||||
--paper:#f4f1ea; --paper2:#fbfaf7; --card:#fff;
|
||||
--line:#e0dbd0; --line2:#cfc8b8;
|
||||
--seal:#c0392b; --seal-soft:#f9ece9;
|
||||
--jade:#2f6b4f; --jade-soft:#e8f0eb;
|
||||
--font-display:"Songti SC","STSong","SimSun",serif;
|
||||
--font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
|
||||
--font-mono:"SF Mono","JetBrains Mono",Consolas,monospace;
|
||||
}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
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;
|
||||
display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:48px 24px;
|
||||
}
|
||||
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
|
||||
.head{text-align:center;margin-bottom:38px}
|
||||
.kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);font-family:var(--font-mono);margin-bottom:12px}
|
||||
h1{font-family:var(--font-display);font-size:36px;font-weight:600;letter-spacing:.05em}
|
||||
h1 em{font-style:normal;color:var(--seal)}
|
||||
.head p{font-size:13.5px;color:var(--ink2);line-height:1.8;margin-top:12px}
|
||||
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;max-width:1040px;width:100%}
|
||||
a.card{
|
||||
display:block;text-decoration:none;color:inherit;background:var(--card);
|
||||
border:1px solid var(--line);border-radius:16px;padding:24px;transition:.26s;position:relative;overflow:hidden;
|
||||
}
|
||||
a.card::before{
|
||||
content:"";position:absolute;inset:0;opacity:0;transition:.26s;
|
||||
background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(192,57,43,.03) 9px,rgba(192,57,43,.03) 18px);
|
||||
}
|
||||
a.card:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 22px 40px -18px rgba(27,36,48,.34)}
|
||||
a.card:hover::before{opacity:1}
|
||||
a.card .ic{
|
||||
width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:23px;
|
||||
background:var(--paper);border:1px solid var(--line);color:var(--ink2);margin-bottom:16px;position:relative;
|
||||
}
|
||||
a.card.tch .ic{background:#eef1f4;border-color:var(--line2);color:var(--ink)}
|
||||
a.card.adm .ic{background:var(--jade-soft);border-color:#cfe0d6;color:var(--jade)}
|
||||
a.card h2{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.04em;position:relative}
|
||||
a.card .meta{font-size:11.5px;font-family:var(--font-mono);color:var(--seal);letter-spacing:.06em;margin-top:7px;position:relative}
|
||||
a.card ul{list-style:none;margin-top:14px;position:relative}
|
||||
a.card li{font-size:12.5px;color:var(--ink2);line-height:1.75;padding-left:15px;position:relative}
|
||||
a.card li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--line2)}
|
||||
a.card .go{
|
||||
display:flex;align-items:center;gap:6px;margin-top:18px;font-size:12.5px;color:var(--ink3);position:relative;
|
||||
}
|
||||
a.card:hover .go{color:var(--seal)}
|
||||
.foot{margin-top:40px;font-size:11.5px;color:var(--ink3);text-align:center;line-height:1.9;font-family:var(--font-mono)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8.4" r="3.6"/><path d="M5 19.6c0-3.4 3.1-5.6 7-5.6s7 2.2 7 5.6"/></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-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13.5 7.5L18 12l-4.5 4.5"/></symbol>
|
||||
<symbol id="i-desktop" viewBox="0 0 24 24"><rect x="2.8" y="4.2" width="18.4" height="12.4" rx="1.8"/><path d="M8.5 20.2h7M12 16.6v3.6"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div class="head">
|
||||
<div class="kicker">Prototype Index · V1.0</div>
|
||||
<h1>填报通 · <em>交互原型</em></h1>
|
||||
<p>职业技能等级认定报名材料收集系统 · 两端原型<br>设计语言：「档案室 / 电子卷宗」</p>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<a class="card" href="student-app.html">
|
||||
<div class="ic"><svg class="ico"><use href="#i-user"/></svg></div>
|
||||
<h2>学生填报端</h2>
|
||||
<div class="meta">11 SCREENS</div>
|
||||
<ul>
|
||||
<li>门禁核验 · 形近字确认 · 统一失败提示</li>
|
||||
<li><b>申请加入名单</b>（门禁失败后的受控出口）</li>
|
||||
<li>填报主页（字段三类规则：锁定／可改／材料）</li>
|
||||
<li>材料来源三通道（聊天记录／相册／文件，无拍照）</li>
|
||||
<li>上传即规范化 · 压缩率可视化 · 传错位置提示</li>
|
||||
<li>提交汇总 · 审核进度时间轴</li>
|
||||
</ul>
|
||||
<div class="go">打开原型 <svg class="ico"><use href="#i-arrow"/></svg></div>
|
||||
</a>
|
||||
|
||||
<a class="card tch" href="teacher-app.html">
|
||||
<div class="ic"><svg class="ico"><use href="#i-users"/></svg></div>
|
||||
<h2>班主任端</h2>
|
||||
<div class="meta">9 SCREENS</div>
|
||||
<ul>
|
||||
<li>电子花名册看板（一屏扫完 28 人）</li>
|
||||
<li>待审列表 · 异常优先 · 材料状态缩略条</li>
|
||||
<li>学生详情（给出判断依据）</li>
|
||||
<li>批量通过（红黄一律排除并展示）</li>
|
||||
<li><b>右滑通过 + 二次确认</b>（驳回须点按钮）</li>
|
||||
<li>催报（额度透明）· 消息 · 代传材料</li>
|
||||
</ul>
|
||||
<div class="go">打开原型 <svg class="ico"><use href="#i-arrow"/></svg></div>
|
||||
</a>
|
||||
|
||||
<a class="card adm" href="admin-web.html">
|
||||
<div class="ic"><svg class="ico"><use href="#i-desktop"/></svg></div>
|
||||
<h2>管理端（PC）</h2>
|
||||
<div class="meta">11 SCREENS · 1180px</div>
|
||||
<ul>
|
||||
<li>工作台（结论优先 + 待办排序）</li>
|
||||
<li><b>命名规则试跑</b>——发布前的唯一闸门</li>
|
||||
<li>名单导入（表头定位可视化）</li>
|
||||
<li>报考范围确认（聚合 + 一致性体检）</li>
|
||||
<li>数据看板 · 终审 · 导出中心（目录树预览）</li>
|
||||
<li><b>表单设计器 · 材料规则配置 · 历史数据整理器</b></li>
|
||||
<li><b>名单加入申请审批</b>（客户确认新增）</li>
|
||||
<li>支持 100% / 82% / 66% 缩放查看</li>
|
||||
</ul>
|
||||
<div class="go">打开原型 <svg class="ico"><use href="#i-arrow"/></svg></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
docs/prototype/ · 单文件自包含 · 零外部依赖 · 无 emoji<br>
|
||||
数据取自真实批次「24中技数控1班」28 名学生
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user