chore: flatten web project structure
This commit is contained in:
@@ -44,24 +44,24 @@
|
||||
|
||||
### 高风险 uni 能力
|
||||
|
||||
| 当前能力 | 使用场景 | Web 改造方向 | 风险 |
|
||||
| --- | --- | --- | --- |
|
||||
| `uni.navigateTo/reLaunch/navigateBack` | 页面跳转 | Vue Router 服务封装 | 中 |
|
||||
| `uni.request/uploadFile` | HTTP 请求、文件上传 | `fetch` 或 Axios + 上传封装 | 中 |
|
||||
| `uni.$emit/$on/$off` | 跨组件事件 | `mitt` 或 typed event bus | 中 |
|
||||
| `uni.showToast/showModal/showLoading` | 用户反馈 | UI 组件库或自研反馈服务 | 低 |
|
||||
| `uni.connectSocket` | AI 聊天实时通信 | 浏览器原生 `WebSocket` | 高 |
|
||||
| `uni.request enableChunked` | AI 流式回复 | `fetch + ReadableStream` 或 SSE | 高 |
|
||||
| `uni.login` | 微信登录 | 微信 Web 授权或后端 H5 登录方案 | 高 |
|
||||
| `uni.requestPayment` | 支付 | 微信 JS-SDK/H5 支付/后端支付跳转 | 高 |
|
||||
| `uni.chooseImage` | 图片选择上传 | `<input type="file">` + 上传服务 | 中 |
|
||||
| `uni.saveImageToPhotosAlbum` | 保存图片 | 浏览器下载能力,移动端受限 | 中 |
|
||||
| `uni.getLocation/openLocation` | 定位和地图 | Geolocation API + 地图 URL/SDK | 中 |
|
||||
| `uni.createSelectorQuery` | 尺寸测量 | DOM API、ResizeObserver | 中 |
|
||||
| `uni.onKeyboardHeightChange` | 输入框键盘适配 | 视口监听、CSS env、安全区适配 | 高 |
|
||||
| `<view>/<text>/<image>/<scroll-view>` | 页面模板 | HTML 标签或基础组件替换 | 中 |
|
||||
| `<web-view>` | 内嵌页面 | `iframe` + `postMessage` 协议 | 中 |
|
||||
| `<canvas>` + uni canvas API | 二维码/图片 | 浏览器 Canvas 或第三方库 | 中 |
|
||||
| 当前能力 | 使用场景 | Web 改造方向 | 风险 |
|
||||
| -------------------------------------- | ------------------- | -------------------------------- | ---- |
|
||||
| `uni.navigateTo/reLaunch/navigateBack` | 页面跳转 | Vue Router 服务封装 | 中 |
|
||||
| `uni.request/uploadFile` | HTTP 请求、文件上传 | `fetch` 或 Axios + 上传封装 | 中 |
|
||||
| `uni.$emit/$on/$off` | 跨组件事件 | `mitt` 或 typed event bus | 中 |
|
||||
| `uni.showToast/showModal/showLoading` | 用户反馈 | UI 组件库或自研反馈服务 | 低 |
|
||||
| `uni.connectSocket` | AI 聊天实时通信 | 浏览器原生 `WebSocket` | 高 |
|
||||
| `uni.request enableChunked` | AI 流式回复 | `fetch + ReadableStream` 或 SSE | 高 |
|
||||
| `uni.login` | 微信登录 | 微信 Web 授权或后端 H5 登录方案 | 高 |
|
||||
| `uni.requestPayment` | 支付 | 微信 JS-SDK/H5 支付/后端支付跳转 | 高 |
|
||||
| `uni.chooseImage` | 图片选择上传 | `<input type="file">` + 上传服务 | 中 |
|
||||
| `uni.saveImageToPhotosAlbum` | 保存图片 | 浏览器下载能力,移动端受限 | 中 |
|
||||
| `uni.getLocation/openLocation` | 定位和地图 | Geolocation API + 地图 URL/SDK | 中 |
|
||||
| `uni.createSelectorQuery` | 尺寸测量 | DOM API、ResizeObserver | 中 |
|
||||
| `uni.onKeyboardHeightChange` | 输入框键盘适配 | 视口监听、CSS env、安全区适配 | 高 |
|
||||
| `<view>/<text>/<image>/<scroll-view>` | 页面模板 | HTML 标签或基础组件替换 | 中 |
|
||||
| `<web-view>` | 内嵌页面 | `iframe` + `postMessage` 协议 | 中 |
|
||||
| `<canvas>` + uni canvas API | 二维码/图片 | 浏览器 Canvas 或第三方库 | 中 |
|
||||
|
||||
## 目标架构
|
||||
|
||||
@@ -104,20 +104,20 @@ web/
|
||||
|
||||
### 基础技术选型
|
||||
|
||||
| 能力 | 建议方案 |
|
||||
| --- | --- |
|
||||
| 框架 | Vue 3 + Composition API |
|
||||
| 类型 | TypeScript,严格模式分阶段开启 |
|
||||
| 状态管理 | Pinia |
|
||||
| 能力 | 建议方案 |
|
||||
| ---------- | --------------------------------------------------- |
|
||||
| 框架 | Vue 3 + Composition API |
|
||||
| 类型 | TypeScript,严格模式分阶段开启 |
|
||||
| 状态管理 | Pinia |
|
||||
| 状态持久化 | `pinia-plugin-persistedstate` 或自研 storage plugin |
|
||||
| 路由 | Vue Router |
|
||||
| 样式 | Tailwind CSS + 少量全局 CSS 变量 |
|
||||
| 请求 | Axios 或标准 `fetch` 封装,二选一后统一使用 |
|
||||
| 事件总线 | `mitt`,建议加类型约束 |
|
||||
| WebSocket | 浏览器原生 `WebSocket` |
|
||||
| 流式响应 | `fetch + ReadableStream`,必要时兼容 SSE |
|
||||
| 构建 | Vite |
|
||||
| 测试 | Vitest + Vue Test Utils,关键流程补 Playwright |
|
||||
| 路由 | Vue Router |
|
||||
| 样式 | Tailwind CSS + 少量全局 CSS 变量 |
|
||||
| 请求 | Axios 或标准 `fetch` 封装,二选一后统一使用 |
|
||||
| 事件总线 | `mitt`,建议加类型约束 |
|
||||
| WebSocket | 浏览器原生 `WebSocket` |
|
||||
| 流式响应 | `fetch + ReadableStream`,必要时兼容 SSE |
|
||||
| 构建 | Vite |
|
||||
| 测试 | Vitest + Vue Test Utils,关键流程补 Playwright |
|
||||
|
||||
## 分阶段改造计划
|
||||
|
||||
@@ -188,8 +188,6 @@ web/
|
||||
- 迁移 `client-configs.json` 和当前客户端配置读取逻辑。
|
||||
- 迁移 Pinia store:`app`、`location`、`picture`、`selectedDate`。
|
||||
- 替换 `pinia-plugin-unistorage` 为 Web 持久化方案。
|
||||
- 迁移 `src/request/api/`,统一改用新 `http` 服务。
|
||||
- 为主要 API 响应定义基础类型,优先覆盖登录、首页、会话、商品、订单。
|
||||
|
||||
验收标准:
|
||||
|
||||
@@ -319,38 +317,38 @@ web/
|
||||
|
||||
## 建议迁移优先级
|
||||
|
||||
| 优先级 | 模块 | 原因 |
|
||||
| --- | --- | --- |
|
||||
| P0 | 平台适配层、配置、请求、token | 所有业务依赖,必须先稳定 |
|
||||
| P0 | AI 聊天主链路 | 产品核心价值,风险最高 |
|
||||
| P1 | 首页、发现、快捷问题 | 用户入口和聊天联动 |
|
||||
| P1 | 商品详情、预订、订单 | 核心商业闭环 |
|
||||
| P2 | 工单、反馈、快捷入口 | 重要但可后续分批迁移 |
|
||||
| P2 | WebView 桥接、图片保存 | 依赖外部页面和浏览器兼容 |
|
||||
| P3 | 非核心 demo、README 示例、废弃组件 | 最后清理 |
|
||||
| 优先级 | 模块 | 原因 |
|
||||
| ------ | ---------------------------------- | ------------------------ |
|
||||
| P0 | 平台适配层、配置、请求、token | 所有业务依赖,必须先稳定 |
|
||||
| P0 | AI 聊天主链路 | 产品核心价值,风险最高 |
|
||||
| P1 | 首页、发现、快捷问题 | 用户入口和聊天联动 |
|
||||
| P1 | 商品详情、预订、订单 | 核心商业闭环 |
|
||||
| P2 | 工单、反馈、快捷入口 | 重要但可后续分批迁移 |
|
||||
| P2 | WebView 桥接、图片保存 | 依赖外部页面和浏览器兼容 |
|
||||
| P3 | 非核心 demo、README 示例、废弃组件 | 最后清理 |
|
||||
|
||||
## 路由迁移初稿
|
||||
|
||||
| uni-app 路由 | Vue Router 建议路由 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| `/pages/index/index` | `/` | 首页和聊天主入口 |
|
||||
| `/pages/login/index` | `/login` | 登录页 |
|
||||
| `/pages/goods/index` | `/goods/:commodityId?` | 商品/房型详情 |
|
||||
| `/pages/goods/album/index` | `/goods/album` | 商品相册 |
|
||||
| `/pages/webview/index` | `/bridge/webview` | iframe 或外链桥接 |
|
||||
| `/pages/ChatMain/ChatLongAnswer/index` | `/chat/long-answer` | 长回答页 |
|
||||
| `/pages/ChatModule/LongTextGuideCardPreview/guide` | `/chat/guide/guide` | 长文本 guide 详情 |
|
||||
| `/pages/ChatModule/LongTextGuideCardPreview/poi` | `/chat/guide/poi` | 长文本 poi 详情 |
|
||||
| `/pages/ChatModule/LongTextGuideCardPreview/route` | `/chat/guide/route` | 长文本 route 详情 |
|
||||
| `/pages/ChatModule/LongTextGuideCardPreview/photo` | `/chat/guide/photo` | 长文本 photo 详情 |
|
||||
| `/pages/ChatMain/NoticeMessage/detail` | `/notice/:id?` | 通知详情 |
|
||||
| `/pages-order/order/list` | `/orders` | 订单列表 |
|
||||
| `/pages-order/order/detail` | `/orders/:orderId` | 订单详情 |
|
||||
| `/pages-service/order/list` | `/service-orders` | 工单列表 |
|
||||
| `/pages-quick/list` | `/quick` | 快捷入口 |
|
||||
| `/pages-booking/index` | `/booking` | 预订确认 |
|
||||
| `/pages-bridge/UploadImage` | `/bridge/upload-image` | 图片上传桥接,可被新协议替代 |
|
||||
| `/pages-bridge/SaveImage` | `/bridge/save-image` | 保存图片桥接,可被下载能力替代 |
|
||||
| uni-app 路由 | Vue Router 建议路由 | 说明 |
|
||||
| -------------------------------------------------- | ---------------------- | ------------------------------ |
|
||||
| `/pages/index/index` | `/` | 首页和聊天主入口 |
|
||||
| `/pages/login/index` | `/login` | 登录页 |
|
||||
| `/pages/goods/index` | `/goods/:commodityId?` | 商品/房型详情 |
|
||||
| `/pages/goods/album/index` | `/goods/album` | 商品相册 |
|
||||
| `/pages/webview/index` | `/bridge/webview` | iframe 或外链桥接 |
|
||||
| `/pages/ChatMain/ChatLongAnswer/index` | `/chat/long-answer` | 长回答页 |
|
||||
| `/pages/ChatModule/LongTextGuideCardPreview/guide` | `/chat/guide/guide` | 长文本 guide 详情 |
|
||||
| `/pages/ChatModule/LongTextGuideCardPreview/poi` | `/chat/guide/poi` | 长文本 poi 详情 |
|
||||
| `/pages/ChatModule/LongTextGuideCardPreview/route` | `/chat/guide/route` | 长文本 route 详情 |
|
||||
| `/pages/ChatModule/LongTextGuideCardPreview/photo` | `/chat/guide/photo` | 长文本 photo 详情 |
|
||||
| `/pages/ChatMain/NoticeMessage/detail` | `/notice/:id?` | 通知详情 |
|
||||
| `/pages-order/order/list` | `/orders` | 订单列表 |
|
||||
| `/pages-order/order/detail` | `/orders/:orderId` | 订单详情 |
|
||||
| `/pages-service/order/list` | `/service-orders` | 工单列表 |
|
||||
| `/pages-quick/list` | `/quick` | 快捷入口 |
|
||||
| `/pages-booking/index` | `/booking` | 预订确认 |
|
||||
| `/pages-bridge/UploadImage` | `/bridge/upload-image` | 图片上传桥接,可被新协议替代 |
|
||||
| `/pages-bridge/SaveImage` | `/bridge/save-image` | 保存图片桥接,可被下载能力替代 |
|
||||
|
||||
## 关键验收清单
|
||||
|
||||
@@ -396,16 +394,16 @@ web/
|
||||
|
||||
## 风险和缓解措施
|
||||
|
||||
| 风险 | 影响 | 缓解措施 |
|
||||
| --- | --- | --- |
|
||||
| 一次性替换导致功能缺失 | 高 | 新旧并行,按业务闭环迁移 |
|
||||
| 聊天流式协议在 Web 不兼容 | 高 | 优先做流式原型,确认后端支持 `ReadableStream` 或 SSE |
|
||||
| 微信登录/支付无法等价迁移 | 高 | 提前确认目标是 H5、公众号、企业微信还是普通浏览器 |
|
||||
| 键盘和滚动体验退化 | 高 | 聊天页单独验收移动端视口和输入行为 |
|
||||
| Tailwind 全量替换成本过高 | 中 | 页面迁移时渐进替换,不做纯样式大爆炸 |
|
||||
| 旧 SCSS 工具类和 Tailwind 混用混乱 | 中 | 建立映射规则和废弃清单 |
|
||||
| JS 改 TS 产生大量类型债 | 中 | 按模块补类型,优先 API、store、消息模型 |
|
||||
| 外部 H5 桥接协议变化影响存量页面 | 中 | 保留兼容层,先支持旧 query/token 方式 |
|
||||
| 风险 | 影响 | 缓解措施 |
|
||||
| ---------------------------------- | ---- | ---------------------------------------------------- |
|
||||
| 一次性替换导致功能缺失 | 高 | 新旧并行,按业务闭环迁移 |
|
||||
| 聊天流式协议在 Web 不兼容 | 高 | 优先做流式原型,确认后端支持 `ReadableStream` 或 SSE |
|
||||
| 微信登录/支付无法等价迁移 | 高 | 提前确认目标是 H5、公众号、企业微信还是普通浏览器 |
|
||||
| 键盘和滚动体验退化 | 高 | 聊天页单独验收移动端视口和输入行为 |
|
||||
| Tailwind 全量替换成本过高 | 中 | 页面迁移时渐进替换,不做纯样式大爆炸 |
|
||||
| 旧 SCSS 工具类和 Tailwind 混用混乱 | 中 | 建立映射规则和废弃清单 |
|
||||
| JS 改 TS 产生大量类型债 | 中 | 按模块补类型,优先 API、store、消息模型 |
|
||||
| 外部 H5 桥接协议变化影响存量页面 | 中 | 保留兼容层,先支持旧 query/token 方式 |
|
||||
|
||||
## 不建议的做法
|
||||
|
||||
|
||||
Reference in New Issue
Block a user