106 lines
7.0 KiB
Markdown
106 lines
7.0 KiB
Markdown
# YGChatCS 路由迁移映射
|
||
|
||
## 文档状态
|
||
|
||
- 状态：阶段 0 盘点产物
|
||
- 日期：2026-05-25
|
||
- 来源：`src/pages.json`
|
||
- 目标：将 uni-app 页面和分包路由迁移为 Vue Router 路由
|
||
|
||
## 迁移原则
|
||
|
||
1. 保留业务语义，不照搬 uni-app 目录结构到 URL。
|
||
2. 旧路由参数通过 Vue Router `params` 或 `query` 明确承接。
|
||
3. 分包概念在 Web 端取消，改由路由懒加载和业务模块拆包承担。
|
||
4. `navigationStyle: "custom"` 对应 Web 端页面自定义顶部栏，不再依赖小程序导航配置。
|
||
5. 旧项目路由在迁移期作为兼容入口保留映射表，便于 WebView、外链和历史跳转逐步改造。
|
||
|
||
## 路由映射总表
|
||
|
||
| 优先级 | uni-app 路由 | Vue Router 路由 | 目标模块 | 迁移策略 | 备注 |
|
||
| --- | --- | --- | --- | --- | --- |
|
||
| P0 | `/pages/index/index` | `/` | `features/chat` | 重写页面壳，复用可迁移业务逻辑 | 首页、发现、聊天主入口；旧页面禁用页面滚动 |
|
||
| P0 | `/pages/login/index` | `/login` | `features/auth` | 重写 | 登录方式需按 Web/H5 重新确认 |
|
||
| P1 | `/pages/goods/index` | `/goods/:commodityId?` | `features/goods` | 迁移并类型化 | 旧默认 `commodityId` 仅可作为开发兜底 |
|
||
| P1 | `/pages/goods/album/index` | `/goods/album` | `features/goods` | 迁移 | 图片数据建议通过 store 或 query id 获取 |
|
||
| P2 | `/pages/webview/index` | `/bridge/webview` | `features/bridge` | 重建桥接 | `<web-view>` 改为 iframe 或外链跳转 |
|
||
| P0 | `/pages/ChatMain/ChatLongAnswer/index` | `/chat/long-answer` | `features/chat` | 迁移并拆分 | 接收 `message`、`streamId`、`finished` 等 query |
|
||
| P0 | `/pages/ChatModule/LongTextGuideCardPreview/guide` | `/chat/guide/guide` | `features/chat` | 迁移 | 长文本 guide 预览 |
|
||
| P0 | `/pages/ChatModule/LongTextGuideCardPreview/poi` | `/chat/guide/poi` | `features/chat` | 迁移 | 长文本 poi 预览 |
|
||
| P0 | `/pages/ChatModule/LongTextGuideCardPreview/route` | `/chat/guide/route` | `features/chat` | 迁移 | 长文本 route 预览 |
|
||
| P0 | `/pages/ChatModule/LongTextGuideCardPreview/photo` | `/chat/guide/photo` | `features/chat` | 迁移 | 长文本 photo 预览 |
|
||
| P1 | `/pages/ChatMain/NoticeMessage/detail` | `/notice/:id?` | `features/notice` | 迁移 | 当前通过 query 传参，Web 端建议兼容 query |
|
||
| P3 | `/pages/test/index` | `/dev/test` | `features/dev` | 延后或废弃 | 仅开发测试入口，默认不进入首批迁移 |
|
||
| P1 | `/pages-order/order/list` | `/orders` | `features/order` | 迁移 | 订单列表，原 pages-order 分包取消 |
|
||
| P1 | `/pages-order/order/detail` | `/orders/:orderId` | `features/order` | 迁移 | 兼容 `?orderId=` 历史跳转 |
|
||
| P2 | `/pages-service/order/list` | `/service-orders` | `features/service` | 迁移 | 工单/服务订单列表 |
|
||
| P2 | `/pages-quick/list` | `/quick` | `features/quick` | 迁移 | 快捷入口列表 |
|
||
| P1 | `/pages-booking/index` | `/booking` | `features/booking` | 迁移 | 预订确认；参数来源需从 query/store 明确化 |
|
||
| P2 | `/pages-bridge/UploadImage` | `/bridge/upload-image` | `features/bridge` | 兼容后废弃 | 优先改为统一上传服务和 postMessage 回传 |
|
||
| P2 | `/pages-bridge/SaveImage` | `/bridge/save-image` | `features/bridge` | 兼容后废弃 | 浏览器保存图片能力受限制 |
|
||
|
||
## Vue Router 初稿
|
||
|
||
```ts
|
||
export const routes = [
|
||
{ path: "/", name: "home", component: () => import("@/features/chat/pages/HomePage.vue") },
|
||
{ path: "/login", name: "login", component: () => import("@/features/auth/pages/LoginPage.vue") },
|
||
{ path: "/goods/:commodityId?", name: "goods-detail", component: () => import("@/features/goods/pages/GoodsDetailPage.vue") },
|
||
{ path: "/goods/album", name: "goods-album", component: () => import("@/features/goods/pages/GoodsAlbumPage.vue") },
|
||
{ path: "/booking", name: "booking", component: () => import("@/features/booking/pages/BookingPage.vue") },
|
||
{ path: "/orders", name: "orders", component: () => import("@/features/order/pages/OrderListPage.vue") },
|
||
{ path: "/orders/:orderId", name: "order-detail", component: () => import("@/features/order/pages/OrderDetailPage.vue") },
|
||
{ path: "/service-orders", name: "service-orders", component: () => import("@/features/service/pages/ServiceOrderListPage.vue") },
|
||
{ path: "/quick", name: "quick", component: () => import("@/features/quick/pages/QuickListPage.vue") },
|
||
{ path: "/notice/:id?", name: "notice-detail", component: () => import("@/features/notice/pages/NoticeDetailPage.vue") },
|
||
{ path: "/chat/long-answer", name: "chat-long-answer", component: () => import("@/features/chat/pages/LongAnswerPage.vue") },
|
||
{ path: "/chat/guide/:type", name: "chat-guide-preview", component: () => import("@/features/chat/pages/GuidePreviewPage.vue") },
|
||
{ path: "/bridge/webview", name: "bridge-webview", component: () => import("@/features/bridge/pages/WebviewBridgePage.vue") },
|
||
{ path: "/bridge/upload-image", name: "bridge-upload-image", component: () => import("@/features/bridge/pages/UploadImageBridgePage.vue") },
|
||
{ path: "/bridge/save-image", name: "bridge-save-image", component: () => import("@/features/bridge/pages/SaveImageBridgePage.vue") },
|
||
{ path: "/dev/test", name: "dev-test", component: () => import("@/features/dev/pages/TestPage.vue") },
|
||
]
|
||
```
|
||
|
||
## 旧路由兼容策略
|
||
|
||
迁移期间建议保留一个旧路由转换函数，用于处理旧代码、外部 H5、历史分享链接中的 uni-app path：
|
||
|
||
| 输入 | 输出 |
|
||
| --- | --- |
|
||
| `/pages/index/index` | `/` |
|
||
| `/pages/goods/index?commodityId=123` | `/goods/123` |
|
||
| `/pages-order/order/detail?orderId=123` | `/orders/123` |
|
||
| `/pages/webview/index?url=...` | `/bridge/webview?url=...` |
|
||
| `/pages/ChatModule/LongTextGuideCardPreview/poi` | `/chat/guide/poi` |
|
||
|
||
兼容层只在迁移期使用。新 Web 代码应直接使用 Vue Router route name 或封装后的 `routerService`。
|
||
|
||
## 参数迁移规则
|
||
|
||
| 参数来源 | uni-app 写法 | Web 目标写法 |
|
||
| --- | --- | --- |
|
||
| 页面参数 | `onLoad((query) => {})` | `useRoute().query` 或 `useRoute().params` |
|
||
| 商品 id | `commodityId` query | `/goods/:commodityId`，同时兼容 query |
|
||
| 订单 id | `orderId` query | `/orders/:orderId`，同时兼容 query |
|
||
| WebView URL | `url` query | `/bridge/webview?url=`，进入前校验和编码 |
|
||
| 长回答内容 | `message/streamId/finished` query | query 保留，后续可改为 store/session id |
|
||
|
||
## 迁移顺序
|
||
|
||
1. 建立 Vue Router 和 `routerService`。
|
||
2. 添加旧路由到新路由的转换表。
|
||
3. 迁移首页、登录、聊天详情等 P0 路由。
|
||
4. 迁移商品、预订、订单等 P1 路由。
|
||
5. 迁移工单、快捷入口、桥接等 P2 路由。
|
||
6. 确认没有旧路由调用后，删除兼容转换表。
|
||
|
||
## 验收清单
|
||
|
||
- [ ] Vue Router 中存在所有 P0/P1 路由。
|
||
- [ ] 旧 `navigateTo` 参数能正确映射到新路由。
|
||
- [ ] 页面刷新后能从 URL 恢复必要参数。
|
||
- [ ] 登录拦截、424 登出跳转和返回上一页逻辑可用。
|
||
- [ ] WebView/iframe URL 参数经过编码和安全校验。
|
||
- [ ] 分包页面迁移后不再依赖 uni-app subPackages。
|