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