让路由标题、sourceScreen与实例ID各归其位
本页展示随包原生输入和验收参考。目标产品运行状态:未运行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| route | title | file | field | value |
|---|---|---|---|---|
| /settings/profile | 设置 | profile.html | ||
| /settings/billing | 设置 | billing.html | ||
| generated-by | stitch::extract-static-html |
设置上传标题
reference.csv:作者验收映射,不是目标API回包
| route | uploadTitle | selectionKeys | receipt |
|---|---|---|---|
| /settings/profile | /settings/profile | ||
| ["id", "sourceScreen"] | |||
| actual IDs only after upload |
规则与输入文件原文
{
"inputRows": [
{
"route": "/settings/profile",
"title": "设置",
"file": "profile.html"
},
{
"route": "/settings/billing",
"title": "设置",
"file": "billing.html"
},
{
"field": "generated-by",
"value": "stitch::extract-static-html"
}
],
"referenceRows": [
{
"route": "/settings/profile",
"uploadTitle": "/settings/profile"
},
{
"selectionKeys": [
"id",
"sourceScreen"
]
},
{
"receipt": "actual IDs only after upload"
}
],
"invalidRows": [
{
"id": "same-id-for-both",
"error": "two routes collapsed"
},
{
"selection": {
"id": "placeholder",
"sourceScreen": "placeholder",
"x": 100
},
"error": "extraneous request key"
}
],
"notes": [
"全部输入为作者自制教学资料,不含真实客户或账号。",
"referenceRows是校验基准,不是目标模型预测或识别结果;targetProduct=not_run。"
],
"files": {
"input.json": "[\n {\n \"route\": \"/settings/profile\",\n \"title\": \"设置\",\n \"file\": \"profile.html\"\n },\n {\n \"route\": \"/settings/billing\",\n \"title\": \"设置\",\n \"file\": \"billing.html\"\n },\n {\n \"field\": \"generated-by\",\n \"value\": \"stitch::extract-static-html\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"route\": \"/settings/profile\",\n \"uploadTitle\": \"/settings/profile\"\n },\n {\n \"selectionKeys\": [\n \"id\",\n \"sourceScreen\"\n ]\n },\n {\n \"receipt\": \"actual IDs only after upload\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"id\": \"same-id-for-both\",\n \"error\": \"two routes collapsed\"\n },\n {\n \"selection\": {\n \"id\": \"placeholder\",\n \"sourceScreen\": \"placeholder\",\n \"x\": 100\n },\n \"error\": \"extraneous request key\"\n }\n ]\n}\n",
"case.md": "# Stitch上传HTML:让路由标题、sourceScreen与实例ID各归其位\n\nStitch上传HTML用两个名称相近的设置页面做练习。上传后把路由、sourceScreen和screenInstance分开登记,防止给错误页面套用设计系统。\n\n## 准备两份页面\n\n保存/settings/profile和/settings/billing的独立HTML。\n\n两页都有“设置”标题,因此不能只按人类可见标题判断身份。\n\n## 锁定目标项目\n\n读取官方项目清单,选定实际projectId并写入台账。\n\n同名项目存在时核对创建记录,不凭列表第一项上传。\n\n## 设置上传标题\n\n按官方code-to-design约定将--title设为真实路由。\n\ngenerated-by注明生产工作流,不把它误当screenId。\n\n## 执行上传并保留返回\n\n在隔离练习项目上传单个HTML,记录原始sourceScreen和screenInstance。\n\n这两个ID用途不同,不能把一个复制到两个字段。\n\n## 建立路由映射\n\n把两个页面分别连到上传返回的资源身份,再查看实际缩略图。\n\n响应缺少一页时保留缺失状态,不使用另一页ID补齐。\n\n## 准备设计应用选择\n\n后续选择对象只带id和sourceScreen,从项目元数据读真实值。\n\n不要附带x、y、width、height等布局字段给apply_design_system。\n\n## 交付导入回执\n\n保存路由映射、实际返回和截图,标注执行日期。\n\n未上传时只交可编辑输入与待填台账,不伪造资源ID。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n",
"profile.html": "<!doctype html><html lang=\"zh-CN\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>个人资料设置</title><style>body{font:16px/1.6 Arial,sans-serif;background:#f7f4ec;color:#183b39;margin:32px;max-width:1100px}h1{font-size:32px}article{padding:24px;border:1px solid #cbd4cc;background:white;margin:16px 0}button{background:#184a45;color:white;padding:12px 20px;border:0;border-radius:8px}table{border-collapse:collapse;width:100%}th,td{padding:10px;border:1px solid #cbd4cc;text-align:left}pre{white-space:pre-wrap;overflow-wrap:anywhere}</style><h1>设置</h1><article><h2>个人资料</h2><label>昵称<input value=\"Field Student\"></label></article></html>",
"billing.html": "<!doctype html><html lang=\"zh-CN\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>账单设置</title><style>body{font:16px/1.6 Arial,sans-serif;background:#f7f4ec;color:#183b39;margin:32px;max-width:1100px}h1{font-size:32px}article{padding:24px;border:1px solid #cbd4cc;background:white;margin:16px 0}button{background:#184a45;color:white;padding:12px 20px;border:0;border-radius:8px}table{border-collapse:collapse;width:100%}th,td{padding:10px;border:1px solid #cbd4cc;text-align:left}pre{white-space:pre-wrap;overflow-wrap:anywhere}</style><h1>设置</h1><article><h2>账单</h2><p>教学账户,无真实付款</p></article></html>"
}
}应当保留的约束
| route | uploadTitle | selectionKeys | receipt |
|---|---|---|---|
| /settings/profile | /settings/profile | ||
| ["id", "sourceScreen"] | |||
| actual IDs only after upload |
故意构造的错误样例
| id | error | selection |
|---|---|---|
| same-id-for-both | two routes collapsed | |
| extraneous request key | {"id": "placeholder", "sourceScreen": "placeholder", "x": 100} |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。