牙模具订单管理系统产品系统

面向齿科数字化诊疗的订单管理平台，支持3D牙模模型的订单创建、流转、发货及状态跟踪。系统采用微前端架构，集成多个子应用，通过服务端渲染优化SEO及首屏性能，为诊所、工厂等多角色用户提供高效协同的订单处理体验。

面向齿科数字化诊疗的订单管理平台，支持3D牙模模型的订单创建、流转、发货及状态跟踪。系统采用微前端架构，集成多个子应用，通过服务端渲染优化SEO及首屏性能，为诊所、工厂等多角色用户提供高效协同的订单处理体验。

技术栈：React, Next.js, TypeScript, Redux Toolkit, React Query, WebSocket, Vite, qiankun, Ant Design, Tailwind Css。

工作内容：
1、全栈技术架构升级与工程化重构：
1.1、主导项目从Webpack到Vite的构建工具迁移，重新设计入口与插件体系，将开发服务器启动时间从30秒以上压缩至3秒，生产构建耗时由75秒降至15秒，热更新响应速度提升90%以上，显著改善开发体验与CI/CD效率；
1.2、推动状态管理从Context向Redux Toolkit重构，创建标准化的Slice模块，统一store配置，移除冗余Context代码，使状态流可追溯，排查因状态变化引发的bug效率提升60%；
对核心业务模块进行渐进式TypeScript迁移，设计强类型接口与工具类型，确保关键数据流类型安全，将运行时错误降低30%；
1.3、引入Monorepo架构（pnpm workspaces + Turborepo）：将公共业务组件、工具函数库、TypeScript基础配置、ESLint规则集等拆分为独立包，实现Web管理端与移动端H5的代码共享与统一依赖管理。通过Turborepo的任务编排与远程缓存，全量构建时间从8分钟压缩至3分钟，增量构建仅需30秒；统一版本控制后，跨项目组件复用率提升50%，新项目初始化成本降低60%，有效支撑了多端业务的快速迭代。

2、服务端渲染与SEO性能攻坚：
2.1、基于 Next.js 重构订单详情、商品列表等核心页面，实现 SSR 与 ISR 混合渲染模式，利用动态路由与 getServerSideProps 优化数据预取，首屏加载时间（FCP/LCP）分别提升 40% 和 35%；
2.2、针对行业特性优化SEO：重构页面标题、元标签及HTML层级结构，部署主题集群策略，结合 Next.js 的 next/head 动态注入结构化数据，使站点在谷歌搜索的牙模相关关键词排名进入前3页；
2.3、引入 React Query 管理服务端状态，设计统一缓存策略，避免重复请求，结合持久化缓存减少 80% 的无效 API 调用，并实现数据预加载提升页面切换流畅度。

3、微前端架构设计与落地：
3.1、参与基于 qiankun 框架搭建的主应用基座，完成订单管理、3D模型预览、报表分析等子应用的独立接入与部署，解决样式隔离、公共依赖共享、应用间通信等核心问题，支撑多团队并行开发，迭代效率提升50%；
3.2、基于 initGlobalState 实现主子应用状态同步，封装通信SDK，确保订单状态、用户权限等关键信息在微应用间实时一致。

4、高复用组件库与业务抽象：
4.1、基于Ant Design二次封装10+个业务通用组件，包括支持多维度筛选、条件组合、清空重置的复杂日期选择器，以及订单状态流转卡片、模型预览占位等，统一视觉规范与交互体验，使同类需求开发周期缩短40%；
4.2、建立组件文档与示例，推动团队复用已有组件，减少重复代码，提升代码库可维护性。

5、实时通信与多标签页协同
基于WebSocket实现订单状态实时推送与多标签页同步，设计客户端自动重连机制，结合心跳保活保障长连接稳定性；Node.js层使用ws库处理WebSocket服务，支撑日均百万级消息推送。

6、前沿技术探索与效率提升
研究并引入AI辅助开发工作流：利用Cursor、Gemini等工具将设计稿快速生成组件代码，辅助动画调试与响应式布局，使原型开发效率提升约30%；同时建立代码审查机制，确保AI生成内容的质量与可维护性，为团队积累了AI赋能前端开发的实践经验。