维修助手产品系统Vibe Coding

项目介绍：该项目为 APP 内嵌的 H5 应用，基于 React + UmiJS + TypeScript 开发，实现案例、代码、资料管理及 AI 智能问答等功能。项目基于 Monorepo 架构维护，
负责 client 子应用的开发、构建与多环境部署适配；因架构非完全前后端分离，需依赖同仓库 server 子项目的 Node 环境变量、埋点 SDK 及服务端配置运行

项目难点：
1. 维修助手 H5 客户端解耦与独立部署
**项目背景：** 原项目采用服务端渲染（SSR）架构，前端模块与后端服务深度耦合，导致前端迭代受限于后端部署流程，静态资源、埋点上报等功能依赖服务端环境，
开发与排障效率低下。为提升前端独立迭代能力，将 H5 客户端从服务端项目中解耦，重构为基于 Umi + React 的纯前端单页应用。
**静态资源异常：** 页签图标框架默认图标覆盖，浏览器强缓存不更新，埋点 SDK 404 与语法解析报错等问题。
通过规范 public 目录引用与手动接管 HTML 头部保证资源稳定加载。
**埋点请求异常：** 从 SDK 加载、执行时机到参数类型不匹配，一步步排查后才恢复正常上报。
**环境兼容问题：** 适配内嵌 APP 环境，处理路由模式、全局变量挂载、环境变量注入等兼容性问题，保证解耦后业务逻辑完全对齐原有功能，上线无异常。
2. 海外进入页面白屏优化
**项目背景：** 运维没有单独部署到海外服务器，加上 印度尼西亚 网络慢，导致资源请求速度慢，短时间无法渲染页面。
**方案：** 将项目打成离线包嵌入到 APP 内部，将服务端资源变成本地资源。
**难点1：** 本地运行dist文件失败
**解决：** 通过检查，定位到路由问题，umi默认history模式，需要改成 hash 模式
**难点2：** PDF 渲染 404
**解决：** 定位到生产环境下react-pdf的 Worker 文件路径失效问题，先后排除了 CDN 加载失败、公共目录文件拷贝等方案，最终采用

项目亮点：
1. AI智能问答功能
**SSE通信封装：** 基于XMLHttpRequest实现SSE工具类，支持连接状态管理（初始化、连接中、已打开、已关闭）、事件监听（open、message、error、abort）、
流式数据解析与事件触发，确保实时消息传输稳定。
**流式消息处理：** 通过sendStream函数封装请求逻辑，实现流式内容累加、消息类型（stream/think/end/error）判断，回调函数按需返回结果，支持会话续连与异常拦截。
**Markdown渲染：** 集成react-markdown与remark-gfm插件，配置代码高亮（githubDark风格），支持行内代码与代码块的差异化渲染，提升技术类问答内容的展示效果。
2. pc端实现看板功能：用 react-beautiful-dnd 实现了左右拖列表、上下拖卡片的功能，卡片既能在同一个列表里调整顺序，也能直接拖到别的列表里，列表也能整体拖动换位置。
1.先判断有没有拖到有效位置，如果拖到空白地方就直接不处理，避免报错；
2.判断拖的是什么：拖的是整个列表，就只调整列表的顺序；拖的是卡片，再继续往下判断；
3.判断卡片是不是在同一个列表里拖动：如果是，就只更新这个列表里的卡片顺序；
4.判断是不是跨列表拖卡片：如果是，就从原来的列表里删掉这张卡片，加到目标列表里；
5.所有操作都只改数据、不直接操作页面，保证拖动流畅、数据同步不出错，不会出现卡死、位置错乱的问题。