7.8 KiB
7.8 KiB
缘起到照命：前端路由流程
更新时间：2026-08-28
范围：完整项目入口、第一章「缘起」、第二章「铸身」、第三章「照命」
权威配置：src/router.ts
这三个新页面不是独立项目，也没有另起一套路由；它们直接接替 digitme.cn 原项目中缘起、铸身、照命的正式位置。
1. 当前主流程
打开完整项目
/
│
└─ 六章总入口
│
└─ 进入第一章
/menmian?start=1
第一章 · 缘起
│
├─ 选择主业、第二擅长、性情
├─ 推演历朝结果
└─ 继续这一生 · 把我铸完整
/shishi/zhushen
第二章 · 铸身
│
├─ 本事
├─ 性情
├─ 分量
├─ 来处
└─ 持此身，进入照命
├─ 游客：/shishi/zhaoming
└─ 已登录分身：/twin/:id/verdict
第三章 · 照命
2. 路由总表
| 阶段 | 地址 | 路由名 | 页面组件 | 说明 |
|---|---|---|---|---|
| 完整项目首页 | / |
shishi |
src/views/ShishiHome.vue |
六章总入口，不被本分支替换 |
| 缘起 | /menmian |
menmian |
src/views/Menmian.vue |
第一章正文；加 ?start=1 时先显示无字卷序幕 |
| 旧六章目录地址 | /shishi |
无 | 无 | 兼容地址，重定向到 / |
| 铸身 | /shishi/zhushen |
shishi-zhushen |
src/views/shishi/Zhushen.vue |
第二章；游客和登录用户共用 |
| 游客照命 | /shishi/zhaoming/:dynasty? |
zhaoming-guest |
src/views/Verdict.vue |
第三章；无分身也可进入 |
| 分身照命 | /twin/:id/verdict/:dynasty? |
verdict |
src/views/Verdict.vue |
登录分身使用，带分身 ID |
3. 完整项目首页与分支入口
地址
/
当前行为
根地址继续渲染完整项目原有的六章总入口：
/
我们的新流程不占用根地址。从总入口选择第一章「缘起」后才进入：
/menmian?start=1
旧六章目录地址继续兼容：
/shishi → /
4. 第一章：缘起
标准入口
/menmian?start=1
可用查询参数
| 参数 | 示例 | 作用 |
|---|---|---|
start |
?start=1 |
先显示无字卷序幕；用户点击后进入缘起正文 |
q |
?q=医生 |
预填当前职业，并尝试映射职业签 |
可以组合：
/menmian?start=1&q=医生
页面内流程
- 进入无字卷序幕。
- 点击继续，隐藏序幕并回到缘起正文顶部。
- 选择主业。
- 可补充第二擅长和性情。
- 点击推演，生成历朝身份对照。
- 推演成功后调用
shishi.markYuanqi()，标记缘起已阅。 - 把以下草稿写入本机
localStorage：
key: yuanqi_draft
profId 主业 ID
profName 主业名称
portraitDynasty 缘起题像朝代
chipTalents 第二擅长
chipTraits 性情
- 点击“继续这一生 · 把我铸完整”进入：
/shishi/zhushen
顶部导航
一 · 缘起 当前页
二 · 铸身 /shishi/zhushen
三 · 照命 /shishi/zhaoming
四 · 入局 /shishi/ruju
六 · 传世 /shishi/chuanshi
5. 第二章：铸身
地址
/shishi/zhushen
数据承接
铸身页会读取缘起写下的 yuanqi_draft，用于回显或补齐：
- 主业
- 第二擅长
- 性情
- 缘起题像朝代
游客铸身的稳定本地状态写入：
key: shishi.guest.zhushen
页面内四步
1 · 本事
2 · 性情
3 · 分量
4 · 来处
四步完成后合炉定身，显示人物名帖。
进入照命的分支
铸身页根据是否存在当前分身 ID 生成不同目标地址。
游客
/shishi/zhaoming
已登录且有分身
/twin/:id/verdict
例如：
/twin/abc123/verdict
顶部导航
一 · 缘起 /menmian?start=1
二 · 铸身 当前页
三 · 照命 /shishi/zhaoming
四 · 入局 /shishi/ruju
六 · 传世 /shishi/chuanshi
6. 第三章：照命
照命的游客版和分身版都复用：
src/views/Verdict.vue
游客地址
/shishi/zhaoming
可选 path 参数：
/shishi/zhaoming/:dynasty?
例如：
/shishi/zhaoming/nanchao
分身地址
/twin/:id/verdict
可选朝代 path 参数：
/twin/:id/verdict/:dynasty?
例如：
/twin/abc123/verdict/nanchao
正式朝代参数
朝代沿用原项目的 path 参数：
/shishi/zhaoming/:dynasty?
/twin/:id/verdict/:dynasty?
例如：
/shishi/zhaoming/nanchao
/twin/abc123/verdict/nanchao
命盘连续切换朝代时使用 router.replace() 更新 path 参数：
- 保留原项目可复制、可回退的正式地址
App.vue对同一游客照命或同一分身照命使用稳定RouterView key，不重新挂载整个页面- 不制造大量浏览器历史记录
router.ts对同一照命页的朝代切换保持滚动位置
此前短暂生成过的 ?dyn=朝代ID 链接只作为兼容入口；页面打开后会自动归一到正式 path，不再继续生成 query 形式的新链接。
其他查询参数
照命页会保留并向后传递现有 query，例如：
| 参数 | 作用 |
|---|---|
tier |
当前位阶 |
twin |
当前分身 ID |
chushen |
选定的出身分支 |
从照命返回
返回缘起：/menmian?start=1
返回铸身：/shishi/zhushen
从照命继续
游客点击“展开这朝命局”后，进入入局流程：
/ruju/:code/:year?tier=...&dyn=...
登录分身点击后，先创建或续接一部传，再进入：
/twin/:id/lineage/:lid
如果创建时已经直接成传，则进入：
/twin/:id/zhuan/:lid
7. 游客与登录分身的区别
| 环节 | 游客 | 登录分身 |
|---|---|---|
| 缘起 | /menmian?start=1 |
/menmian?start=1 |
| 铸身 | /shishi/zhushen |
/shishi/zhushen |
| 铸身数据 | localStorage |
分身数据与接口 |
| 照命 | /shishi/zhaoming |
/twin/:id/verdict |
| 照命计算 | 游客铸身预览数据 | 当前分身画像 |
| 展开命局 | 进入游客入局 | 创建或续接一部传 |
8. 推荐验收地址
# 完整项目首页，应该显示六章总入口
http://127.0.0.1:5173/
# 我们分支的正式起点：缘起无字卷序幕
http://127.0.0.1:5173/menmian?start=1
# 带职业预填的缘起入口
http://127.0.0.1:5173/menmian?start=1&q=医生
# 铸身
http://127.0.0.1:5173/shishi/zhushen
# 照命
http://127.0.0.1:5173/shishi/zhaoming
# 指定朝代的照命
http://127.0.0.1:5173/shishi/zhaoming/nanchao
# 旧六章目录兼容地址，应该回到完整项目首页
http://127.0.0.1:5173/shishi
9. 相关代码
src/router.ts
src/views/Menmian.vue
src/views/shishi/Zhushen.vue
src/views/Verdict.vue
src/components/shishi/ZhushenForgeBoard.vue
src/components/shishi/ZhaomingWheelBoard.vue
src/lib/shishi.ts
10. 路由修改原则
后续调整这段流程时应保持：
/始终保留完整项目的六章总入口，不能被本分支覆盖。/menmian?start=1始终是「缘起 → 铸身 → 照命」分支的正式起点。/shishi作为旧目录兼容地址回到/。- 游客照命继续使用
/shishi/zhaoming。 - 分身照命继续使用
/twin/:id/verdict。 - 朝代始终使用
/:dynastypath；通过稳定RouterView key避免同一照命页重挂。 - 缘起写入的
yuanqi_draft必须继续被铸身读取。 - 铸身到照命必须保留游客和登录分身两条分支。