# 缘起到照命：前端路由流程

> 更新时间：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. 铸身到照命必须保留游客和登录分身两条分支。