海南航空金鹏专区项目产品系统

项目简介：该项目为海南航空 App 中的金鹏会员专区，聚焦于会员等级、特权权益、精选活动、生活联盟与
商城模块，面向 B 端用户提供多维可视化配置与用户运营平台，支持灵活内容分发与运营管理。
 技术栈：Vue3、Vite、Pinia、Vue-Router、Vant、ECharts、Vue-Persist、Element Plus、CDN
1. 架构搭建：从 0 到 1 进行架构设计与技术选型，采用 Vue3 + Vite + Pinia 构建现代化项目架构，集成
持久化与按需加载
2. 权限体系设计：基于 RBAC 权限模型，结合动态 add-Routers 实现模块级与按钮级权限控制，封装权
限 指令与校验逻辑
3. 表单分步拆解：对缴费预算与订单类复杂表单进行分步优化，提升用户体验与表单填写成功率
4. 核心功能抽象：对 Excel 批量导出、ECharts 图表、上传列表等进行二次封装，实现模块复用与快速接
入
5. 枚举抽离 + Hook 化：封装常用逻辑为组合式函数（hook），实现枚举/字典项动态注入，减少约 15%
冗余代码
6. 页面性能优化：集成 Vue-lazyload 图片懒加载，采用 CDN 资源预加载等方式将首屏加载速度从 3.79s
优化至 1.2s
7. 公共组件沉淀：基于 Element Plus 封装通用弹窗、表格、筛选面板组件，统一 UI 交互体验
项目成果：
 核心模块重用率提升 40%，整体交付周期缩短约 2 周
 页面加载性能大幅提升，App 内访问频次同比增长 32%
 权限体系方案被纳入团队前端基础方案复用至多个新项目中