替换井号占位链接,让桌面端也能返回首页
本页展示随包原生输入和验收参考。目标产品运行状态:未运行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| element | href | target |
|---|---|---|
| logo | # | / |
| bottom list | # | /list |
| sidebar settings | # | /settings |
建立真实路由
reference.csv:作者验收映射,不是目标API回包
| viewport | navigation | activeState |
|---|---|---|
| 375 | bottom bar | |
| 1280 | sidebar + logo | |
| matches current route |
规则与输入文件原文
{
"inputRows": [
{
"element": "logo",
"href": "#",
"target": "/"
},
{
"element": "bottom list",
"href": "#",
"target": "/list"
},
{
"element": "sidebar settings",
"href": "#",
"target": "/settings"
}
],
"referenceRows": [
{
"viewport": 375,
"navigation": "bottom bar"
},
{
"viewport": 1280,
"navigation": "sidebar + logo"
},
{
"activeState": "matches current route"
}
],
"invalidRows": [
{
"element": "logo",
"href": "#",
"error": "no desktop home route"
},
{
"target": "/setting",
"configured": "/settings",
"error": "wrong path"
}
],
"notes": [
"全部输入为作者自制教学资料,不含真实客户或账号。",
"referenceRows是校验基准,不是目标模型预测或识别结果;targetProduct=not_run。"
],
"files": {
"input.json": "[\n {\n \"element\": \"logo\",\n \"href\": \"#\",\n \"target\": \"/\"\n },\n {\n \"element\": \"bottom list\",\n \"href\": \"#\",\n \"target\": \"/list\"\n },\n {\n \"element\": \"sidebar settings\",\n \"href\": \"#\",\n \"target\": \"/settings\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"viewport\": 375,\n \"navigation\": \"bottom bar\"\n },\n {\n \"viewport\": 1280,\n \"navigation\": \"sidebar + logo\"\n },\n {\n \"activeState\": \"matches current route\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"element\": \"logo\",\n \"href\": \"#\",\n \"error\": \"no desktop home route\"\n },\n {\n \"target\": \"/setting\",\n \"configured\": \"/settings\",\n \"error\": \"wrong path\"\n }\n ]\n}\n",
"case.md": "# Stitch转React导航:替换井号占位链接,让桌面端也能返回首页\n\nStitch转React导航聚焦导出HTML中的href=\"#\"占位。把移动底栏与桌面侧栏同时接到真实路由,并让Logo提供回首页入口,避免桌面端底栏隐藏后无路可退。\n\n## 读取实际导出页面\n\n按官方react-components流程取得每屏HTML与图像,记录路由映射。\n\n本地练习HTML若是作者材料,应标明不是官方实际导出。\n\n## 找出占位链接\n\n列出Logo、底栏、侧栏中的href=\"#\",对应首页、清单和设置。\n\n纯按钮操作不强改成导航链接,先判断动作语义。\n\n## 建立真实路由\n\n在React应用配置三条路径并给出可辨认页面标题。\n\n不存在的路径先补页面或明确禁用,不随意指向首页糊弄。\n\n## 替换导航组件\n\n依当前React Router用Link连接真实route,并用location设活动态。\n\n不要留下点击只滚到顶部的井号链接。\n\n## 补桌面回家入口\n\n让TopAppBar的Logo或标题指向/。\n\n官方指出移动底栏常用md:hidden,桌面不能依赖它返回。\n\n## 测试双端来回\n\n在窄屏用底栏切换,在宽屏用侧栏和Logo回首页。\n\n逐项检查活动态,避免正确导航但高亮仍停留旧页。\n\n## 交付导航矩阵\n\n保存链接表、路由源码和双端实际截图。\n\n编译成功与链接真正到达目标页分别记录。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n",
"navigation-source.html": "<!doctype html><html lang=\"zh-CN\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>Stitch导航输入</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><header><a href=\"#\">Field Kit</a></header><h1>活动清单</h1><nav><a href=\"#\">首页</a><a href=\"#\">清单</a><a href=\"#\">设置</a></nav><p>此为作者占位链接练习,不是目标产品导出。</p></html>"
}
}应当保留的约束
| viewport | navigation | activeState |
|---|---|---|
| 375 | bottom bar | |
| 1280 | sidebar + logo | |
| matches current route |
故意构造的错误样例
| element | href | error | target | configured |
|---|---|---|---|---|
| logo | # | no desktop home route | ||
| wrong path | /setting | /settings |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。