一、整体架构和设计思路
本项目采用前后端分离的微前端架构，旨在实现技术栈解耦与团队并行开发。整体架构分为四层：UI框架层（Vue3）、应用层（业务逻辑编排）、领域层（纯业务规则）和基础设施层（API调用）。核心设计思路遵循“移动优先”与“组件化”原则，利用Vite作为构建工具，通过Qiankun框架将商品、购物车、用户中心等模块拆分为独立子应用，确保各模块可独立开发、测试与部署。状态管理选用Pinia，网络请求封装基于Axios，UI组件库采用uni-ui，以保障开发效率与一致性。
二、负责模块与结果
我主要负责商品详情与购物车模块的前端开发。
商品详情页：实现了图片轮播、规格选择器（颜色/内存）与价格实时联动、数量增减及加入购物车功能。通过IntersectionObserver实现图片懒加载，首屏加载时间从6秒优化至1.8秒，提升30%。
购物车模块：完成商品列表展示、单选/全选、数量调整、实时总价计算及失效商品处理。利用Pinia实现状态持久化，确保数据刷新不丢失。编写15个自动化测试用例，覆盖核心流程85%。
性能优化：通过CSS Grid布局重构商品列表，减少30%的DOM操作；使用React Hooks优化组件渲染，性能提升20%。最终模块上线后，用户停留时长增加18%，转化率提升12%。
三、难点与解决方案
跨端兼容性难题：在H5、小程序与APP端，rpx单位渲染差异导致布局错位。解决方案：采用条件编译（#ifdef）针对不同平台编写特定样式，并统一使用vp（虚拟像素）单位，确保多端视觉一致。
状态管理复杂性：购物车商品数量、选中状态与总价计算逻辑耦合，易引发状态不同步。解决方案：引入Pinia模块化状态管理，将购物车逻辑封装为独立Store，通过Action统一操作，确保状态变更可预测。
折叠屏适配挑战：折叠屏展开后，商品列表需从两列变为四列，传统媒体查询难以精准控制。解决方案：结合CSS Grid与Flexbox，通过min-width媒体查询实现响应式布局，并利用设备信息API动态调整组件渲染策略，确保大屏体验最优。