校园膳安心系统(Uniapp 小程序 + Vue3 管理后台)
技术栈:Uniapp、Vue3、TypeScript、Element-Plus、Pinia、Vite
我独立主导了小程序端与后台管理系统的前端全流程开发。在小程序端,我利用 Uniapp 的条件编译与自定义导航栏,解决了微信/支付宝等多端支付组件差异、拍照上传兼容性等难题,实现了一套代码多端投放。针对点餐高峰的秒杀场景,我设计了乐观锁更新的前端交互机制,有效避免了超卖体验;同时通过虚拟列表优化菜品列表,确保2000+商品滑动帧率稳定在60fps,保障了用户操作的丝滑流畅。
后台管理端,我从零搭建了基于 Vue3 + TypeScript 的标准化工程架构。全面引入 Pinia 进行模块化状态管理,设计了按钮级的 RBAC 动态权限控制方案。为提升团队效率,我封装了动态表单生成器、拖拽式数据看板等30余个高复用业务组件。利用 TypeScript 的严格类型校验,在编译阶段即可拦截大部分潜在错误,代码可维护性得到质的提升。
云平台后台管理(Vue2 + Element-UI)
技术栈:Vue2、Vuex、Element-UI、ECharts、Webpack
作为前端负责人,我主导了该大型 SaaS 云平台中后台的架构与性能优化。系统支撑多租户隔离,面对万级企业数据的管理需求,我封装了一套基于 JSON 配置驱动的通用 CRUD 高阶组件,能一键生成列表、表单、搜索页,使中后台页面开发效率提升了60%。为应对海量数据展示,我独立实现了支持10万级数据流畅滚动的虚拟表格,以及复杂数据可视化看板。通过 Webpack 配置分析,进行精细的路由懒加载与静态资源分包,将首屏加载时间从4.2秒优化至1.8秒以内,显著提升了用户留存率。
安智云校 / 校智付(Uniapp 商业支付小程序)
技术栈:Uniapp、Vuex
我独立完成了这两款集缴费、生活服务于一体的校园商业小程序的全部前端开发。核心难点在于支付状态的准确同步与弱网环境下的体验优化。我通过封装高可靠的异步轮询与页面栈状态管理机制,确保支付结果在各页面间都能秒级反馈,杜绝了“付款成功、状态未更新”的体验问题。在项目体积控制上,我运用分包、公共模块提取及静态资源云端化等策略,将主包体积严格控制在1.5MB以内,保证了秒开体验。目前两款小程序已稳定服务超过500所学校,日均交易2万余笔,充分验证了 Uniapp 在高频、高可靠性商业场景下的前端架构能力。