Ashang的博客
Ashang's resume
导航

Hello, I'm Ashang

Life is sad at times, but it is up to you to make your own life happy

我叫Ashang

6年经验 · 前端开发工程师

头像

- 幸会，我是Ashang！
一名前端开发工程师。我相信打造一款成功的产品离不开持之以恒的匠心与优化，能成为您的搭档共同创造出优秀且别具一格的作品，我倍感荣幸。
- 我能效劳
主导中大型复杂系统（SaaS 中台、可视化大屏、CMS 等）的前端架构搭建，掌握微前端（Module Federation）开发模式；精通混合式移动端应用及微信跨端多平台小程序（Taro/uniapp）的敏捷研发、全流程打包与部署上线。
- 关于我
目前坐标武汉。拥有 6 年 Web 前端开发经验（2019 - 至今），历任前端开发组长，具备优秀的团队协作与工程化实践经验。深入理解 Vue2/3 全家桶、React、TypeScript 及其底层原理，编码规范严谨，拥有成熟的性能优化与用户体验调优经验。
自驱力强，对新技术保持浓厚兴趣，执行力高效，期待与您开启合作！

Skills:

  • 工程化
  • TS / JS
  • Vue 全家桶
  • Taro/小程序
  • HTML / CSS
  • AI Agent
工程化
TS / JS
Vue 全家桶
Taro/小程序
HTML / CSS
AI Agent

1. 热爱前端，写出高性能页面，能够兼容主流各种浏览器，如 IE8+、Chrome、Firefox等。

2. 熟练掌握各种 Web 前端技术，包括 HTML5、CSS3、JS/ES6+、TypeScript、WebSocket 等。

3. 熟练使用各种 CSS 布局及 Tailwind CSS 等 CSS 工具类，掌握 rem 响应式布局适配。

4. 熟悉 Vue 框架及微前端架构，对模块化开发、公用组件封装有着深入和独到的理解。

5. 精通 Vue2、Vue3 全家桶（Pinia、Vuex、Router、Axios），精通 Nuxt 服务端渲染与 SEO 优化。

6. 熟练使用 React 框架、Taro 及 uniapp 进行跨端跨平台项目（小程序、H5、Web）开发。

7. 熟练使用 Webpack/Vite 等构建工具，具备优秀的前端工程化开发与优化实践经验。

8. 熟悉版本管理工具（Git、Svn），掌握项目在 Linux 环境下的 Nginx 部署和静态资源配置。

9. 了解 Docker 容器化技术及 Jenkins CI/CD 自动化构建，能保障交付流程的高效顺畅。

10. 熟练将 AI Agent（如 Gemini、Claude、GPT 等大模型）深度融入日常开发与架构设计，擅长提示词工程与智能工作流构建，极大提升项目研发效率与交付质量。

2021.07 - 2024.04 上海杨邑咨询
2020.04 - 2021.07 慕渊智能科技
2019.04 - 2020.04 北京云视科技

上海杨邑咨询

前端开发组长 / 资深工程师 2021.07 - 2024.04

负责公司核心 SaaS 产品、中后台及跨端移动应用的研发，指导初中级工程师并进行前端工程化落地。

  • 某电动车集团用户运营中台 (微前端)

    主导该系统（Vue3 + TS + Element-Plus）从 0 到 1 的前端架构搭建。通过微前端（Module Federation）将活动、用户、积分等大子系统拆分为远程组件，实现了多团队并行开发与热部署，项目首屏渲染时间减少 45%，打包体积压缩 60%。

    Vue 3TypeScriptWebpack 5Module FederationPinia
  • 飞利浦健康生活Lab系统 & 微信小程序

    独立研发可视化活动装修系统（Vue2/uniapp），支持运营人员拖拽配置生成营销页面。重构智能健康问卷系统，利用策略模式实现动态题目渲染，大幅减少代码冗余。微信小程序上线后，DAU 突破 10W+，页面交互卡顿率降低 75%。

    uniappVue 2Canvas策略模式
  • 梦幻家 AI 绘图小程序 (AI 创作生态)

    采用 Taro + TS 架构进行微信生态 ToC 混合开发，配合 Tailwind CSS 进行极致还原。通过 Canvas/WebGL 实现精美流光背景与生成特效，利用 SSE / 长轮询实现绘图进度百分比实时反馈，大幅提升了用户的转化率与付费意愿。

    TaroTailwind CSSCanvasSSE
  • 擎朗智能官网 CMS 管理后台

    使用 Vue 3 搭建多语言内容发布系统，支持可视化静态页面预览、多语种翻译及国际化多级资源分流，完美保障了企业出海品牌营销的定制化扩展需求。

    Vue 3ViteI18n

慕渊（上海）智能科技有限公司

技术部 / 前端开发工程师 2020.04 - 2021.07

负责智慧会展、线上虚拟展会等核心 H5、小程序与后台系统的研发。

  • 展商秀-web & 展商秀-管理后台 (音视频会展)

    负责 PC 端与移动端 H5 核心开发。使用 WebSocket 编写音视频展台与在线直播互动。在展商秀-管理后台（Vue + iView）中，通过深度防抖/节流及虚拟列表优化大容量数据报表渲染，极大提升了展会现场数据流统计效率。

    Vue 2Vant UIWebSocketiView虚拟滚动
  • 展商秀 Web 官网 SEO 优化项目 (Nuxt)

    针对原有 SPA 官网 SEO 收录较差的问题，采用 Nuxt2.js 服务端渲染框架进行重构，并配合 Nginx 进行页面级 Redis 缓存分发。重构后百度/谷歌蜘蛛收录量激增 300%，页面首屏 TTI 优化至 1.2s 内。

    Nuxt.jsSSRSEONginx
  • Corrface 全瓦通 & 微信小程序

    使用 mpvue 重构了会展助理小程序，利用自定义分包及资源惰性加载解决了微信小程序 2MB 文件体积上限问题，支持了会展的多角色（展商、买家、观众）多视图切换。

    mpvue微信分包微信 API 适配

北京云视科技有限公司

技术部 / 前端工程师 2019.04 - 2020.04

负责智慧城市、大数据大屏及客流监控系统的前端应用开发。

  • 客流监控多维度数据大屏 (驾驶舱)

    利用 Vue + Echarts 独立开发大屏端，实现多路客流指标数据的高精度实时渲染与多级联动图表。针对多图表重绘导致的 CPU 过载问题，通过 `requestAnimationFrame` 和图表池复用机制，将大屏运行时占用帧率稳定在 55-60 FPS。

    VueEchartsCanvas性能优化
  • 客流轨迹热力图分析系统 (H5/Web)

    在移动端和后台系统集成 heatmap.js，根据室内蓝牙定位信标数据动态绘制客流量空间轨迹热力图。结合离屏渲染，解决了数万个客流轨迹坐标在低配置设备上绘制时卡死的问题。

    heatmap.js离屏渲染H5 地图

我的项目

用户运营中台

2022.04-2023.11
Vue3全家桶TypeScriptVite FederationOAuth2 SSOJenkins
项目概述：为某大型电动车集团定制开发用户运营中台，该系统旨在实现全流程的用户生命周期管理，包括线索收集、会员转换、数据监控、品牌商城、营销活动以及售后服务等关键环节。
个人职责：
  • 负责整个项目的大型框架搭建，确保系统的稳定性和可扩展性。
  • 针对客户和产品经理提出的需求进行深入分析，并优化实现方案，以确保产品质量和用户体验。
  • 负责代码分支维护，确保代码的版本控制和协作效率。同时，进行功能拆分和工时估算，以提高开发效率 and 项目管理能力。
  • 主导开发部分模块及子系统：如会员中心，电商中心、短信发送、统一认证平台、装修中心等。
业绩：
  • 使用 unplugin-vue-components 和 unplugin-auto-import 实现了按需导入和自动导入组件。
  • 配置 @originjs/vite-plugin-federation，实现了大型系统不同子系统间的模块联邦（远程组件）。
  • 设计并实施了基于 OAuth2 协议的统一认证中心单点登录系统，确保了不同子系统的用户体验。
  • 配置 Jenkins 和 Git，实现了提交 Git 自动化部署前端项目至服务器，简化部署流程。
  • 参与度 90% 以上。
90%+ 项目参与度
SSO OAuth2 单点登录
前端开发组长 / 架构设计 查看项目

飞利浦健康生活Lab管理系统

2021.09-2024.04
Vue2.x全家桶Element UIAxiosVuex动态组件
项目概述：参与飞利浦健康生活Lab管理系统的前端开发，目标是构建一个面向消费者的ToC内容管理平台，集成CEM系统和电商系统等多种功能。
个人职责：
  • 框架搭建：负责搭建前端开发框架，确保项目的技术基础和结构合理。
  • 可视化装修模块：开发可视化装修功能，使用户能够轻松定制和优化界面布局。
  • 权限管理模块：设计并实现权限管理系统，确保平台的安全性和用户访问控制。
  • 功能迭代：持续优化和更新平台功能，提升用户体验和系统性能。
业绩：
  • 封装各种通用组件及函数、自定义指令，上传组件、axios 请求、工具类函数、权限校验等。
  • 开发并封装了动态组件和可视化装修功能，为用户提供了更灵活的界面定制和交互体验。
  • 在线问卷模块功能，动态可视化配置问卷及展示。
  • 参与度95%以上，包括：商品模块、活动模块、订单模块、各类定制化活动功能开发。
95% 项目核心参与度
灵活定制 可视化装修与问卷
前端开发 查看项目

飞利浦健康生活Lab小程序

2021.09-2024.04
uniapp(vue2)vuexpixi.jsfabric.jsIntersectionObserver
项目概述：面向消费者的微信小程序项目，集成CEM系统和电商系统等多种功能。
个人职责：
  • 框架搭建：负责搭建前端开发框架，确保项目的技术基础和结构合理。
  • 提供有效的技术+业务解决方案，确保功能按期上线，为产品的持续迭代和优化做出了重要贡献。
  • 各种复杂活动开发，如：以旧换新、礼品卡、各类品牌联名活动、女神节画廊等、语音祝福、商品镭雕定制等活动。
  • 复杂效果实现，如：用户DIY宇航员、拼图游戏、抽奖翻牌效果、礼品卡自定义文案及海报生成、语音录制与播放效果。
  • 大部分模块独立负责，如：用户授权注册、订单相关、购物车、可视化装修效果（首页、商城首页、自定义活动页）等。
业绩：
  • 使用platformize-pixi、pixi-actions 集成至微信小程序实现飞利浦元宇宙活动（3D空间）。
  • 实现了模块曝光等埋点事件上报功能，通过 IntersectionObserver 最佳方案监测页面元素的可见性。
  • 使用正则搜索替换编辑器中部分标签，实现自定义编辑器小程序中展示，包括：视频、图片、跳转链接等效果。
  • eventBus方案实现全局公用注册组件展示。
  • 自定义tabbar实现带展开效果底部导航栏。
  • 使用fabric.js管理端配置定制位置并根据比例保存，以实现小程序镭雕定制所需定位信息。
  • 小程序手写放大、缩小、旋转、移动等交互效果，并按比例实现二倍放大编辑。
3D元宇宙 pixi 互动空间
镭雕定制 手势交互与定位
前端开发 查看项目

电商小程序（分包开发集成至主包）

2022.08-2023.11
TaroTypeScript微信原生Node.js fsIntersectionObserver
项目概述：为某大型电动车集团以分包形式定制开发品牌电商微信小程序，包含：可视化配置商城首页、商品、购物车、各类电商活动、下单、订单模块等。
个人职责：
  • 进行Taro分包模式调研并搭建项目结构。
  • 开发自定义装修模块呈现、购物车、分类等部分模块及子系统。
  • 分包打包及合并至主包文档梳理。
  • 负责分包打包并将其合并至主包，整理相关文档。
业绩：
  • 由于前期需求存在原生tabbar需使用商城首页，则使用原生微信小程序开发商城首页。
  • 实现多种热门自定义配置页面模块，包括图片热区、商品组件、视频、轮播视频、轮播图片等，以满足客户对个性化页面的需求。
  • 使用Node.js中的fs模块，实现自动化文件转移至对应文件夹，并将分包打包成zip文件，便于与对接方合并至主包，确保交付流程高效顺畅。
  • 使用 IntersectionObserver 技术，实现对数据埋点-曝光事件的监听及上报功能，为客户提供数据分析和用户行为跟踪的支持。
  • 根据环境变量配置basePage，解决开发环境下不同分包路径问题，提高开发效率，确保代码的可维护性和可移植性。
高效交付 Node.js fs 脚本
秒开 原生与Taro混合
前端开发 查看项目

梦幻家AI小程序

2023.11-2024.01
TaroTypeScriptTailwind CSSCSS动画智能轮询
项目概述：一款ToC面向儿童的AI绘画小程序，主要功能为文字/语音智能绘图，合作绘画，排行榜，绘画广场点赞、收藏、分享和评论等。
个人职责：
  • 负责整个项目的框架搭建，技术难点攻克，项目进度把控，工期预估与分配。
  • 针对项目需求，主导完成了多个核心模块的设计与开发，包括但不限于用户交互界面、数据处理模块等。
  • 在项目开发过程中，积极推动团队技术进步，定期组织技术分享会，提升团队整体技术实力。
  • 与产品、设计师共同探讨用户视觉体验、交互体验，提出可实行性方案。
业绩：
  • 使用css（伪元素+box-shadow+animation）实现动态星空背景，通过精确控制动画的细节 and 性能优化，成功在实现独特视觉效果的同时，确保了页面的快速渲染和较低的性能消耗。
  • 在同一页面中集成了多种业务功能，通过封装多类组件，显著提高了代码的复用率和可维护性。
  • 创新性地使用轮询技术，实现了对服务端AI绘画进度的实时监控，确保用户可以实时获取进度信息，极大地提升了用户体验。
低能耗 CSS 星空特效
实时 AI 绘画进度轮询
前端开发组长 查看项目

Keenon官网CMS系统

2023.08-2024.04
Vue3全家桶TypeScriptViteElement PlusI18n
项目概述：为擎朗智能公司定制开发cms系统，自定义官网页面所有模块并支持多国语言。
个人职责：
  • 可视化装修模块：开发可视化装修功能，使用户能够轻松定制和优化界面布局，并生成可直接拼接的html代码。
  • 27国多语言：数据/界面层隔离，n个国家语言文章、页面的配置及发布。
  • 功能迭代：持续优化和更新平台功能，提升用户体验和系统性能。
业绩：
  • 页面可视化功能开发，并根据配置项动态生成html代码片段，使运营人员可随意配置任何页面。（核心功能）
  • 使用OAuth2 协议的统一认证中心单点登录系统，确保了不同子系统的用户体验。
  • 在项目开发过程中，注重代码质量和系统性能的优化，多次发现并修复潜在的漏洞，增强了系统的稳定性和可靠性。
27国语言 多语种支持范围
高效发布 可视化生成HTML
前端组长 查看项目

展商秀-web & 管理后台

2020.04-2021.07
Vue 2Vant UIWebSocketiView虚拟列表
项目概述：会展直播与音视频在线展台管理系统，为参展商和观众提供实时的线上音视频会话、双通道实时聊天及直播会展服务。
个人职责：
  • 负责PC端与移动端H5核心模块的编写，确保跨端视觉体验的一致。
  • 独立开发会展直播与音视频展台系统，使用 WebSocket 建立双向实时聊天及直播通信。
  • 设计高复用的表单与组件系统，实现管理后台（Vue2 + iView）海量展商信息的录入与管理。
业绩：
  • 使用 WebSocket 自定义双通道协议，实现高并发、低延迟的会展现场互动与实时客服聊天。
  • 针对大数据量报表，引入虚拟列表与分批渲染机制，解决海量数据带来的DOM卡顿，首屏 FPS 稳定在 60 帧。
  • 针对音视频通话异常及网络抖动，设计了重连与心跳机制，确保网络状态异常时仍能自动复连。
60 FPS 虚拟表单帧率
实时 WebSocket 双通道
前端开发 查看项目

Corrface 全瓦通

2020.04-2021.07
mpvue微信小程序Webpack分包优化
项目概述：针对瓦楞纸箱包装行业的 B2B 撮合交易平台及微信小程序，提供跨角色的展商、买家、观众多视图切换和在线交易撮合。
个人职责：
  • 使用 mpvue 框架负责撮合交易平台小程序的开发与重构。
  • 负责微信小程序分包方案的引入与实施，解决 2MB 主包体积上限问题。
  • 进行静态资源按需加载与冗余依赖优化，保证低配置设备上的启动速度。
业绩：
  • 制定并落地小程序分包加载方案，成功将主包体积极致压缩在 2MB 以内，首包加载速度提效 40%。
  • 通过对全局静态资源进行阿里云 OSS 托管并开启 Gzip 压缩，显著减少小程序初始下载耗时。
  • 封装通用的跨端微信 API 适配器，统一了不同基础库版本下的原生接口调用逻辑，提高代码兼容度。
< 2MB 分包极致压缩
+40% 首包加载耗时
前端开发 查看项目

智慧客流监控大屏

2019.04-2020.04
VueEchartsheatmap.jsCanvas离屏渲染
项目概述：智慧城市与商超客流指标实时监控大屏及空间轨迹热力图分析系统，通过可视化技术展现多维度流量指标和定位轨迹。
个人职责：
  • 利用 Vue + Echarts 独立开发大数据驾驶舱多维度客流监控大屏。
  • 在移动端和后台系统集成 heatmap.js，根据室内蓝牙定位信标数据动态绘制客流量空间轨迹热力图。
  • 负责多图表高频刷新与重绘性能优化，解决 CPU 过载与浏览器假死问题。
业绩：
  • 通过 requestAnimationFrame 和图表池复用机制，实现万级多源数据高频重绘，将大屏运行时帧率稳定在 55-60 FPS。
  • 集成 HTML5 Canvas 离线缓冲与离屏渲染技术，有效解决了数万个轨迹热力图坐标在低配终端上绘制卡顿与浏览器过载问题。
  • 实现了多路图表联动与屏幕自适应适配方案，保障在不同分辨率 of 超宽拼墙大屏上完美无缝缩放展示。
60 FPS 图表重绘帧率
万级点位 热力图极速重绘
0 卡顿 低配设备流畅度
前端开发 查看项目

多人协同记账小程序

一周完成
微信小程序Cloudflare WorkersD1 SQLiteDurable ObjectsECharts
项目概述：面向线下多人娱乐对局（麻将、扑克、掼蛋等）场景的实时联机记分与对账全栈小程序。支持房间创建、扫码加入、多端即时记分、智能茶水费自动结算、局势趋势分析、对账单分享等核心功能，满足线下娱乐的快速记账与账目对齐需求。
个人职责：
  • 独立负责项目从 0 到 1 的全栈架构设计与前后端开发，包括后端 API 接口设计、数据库表结构优化、Durable Objects 长连接同步以及前端所有交互与 UI 设计。
  • 负责项目的云端部署与轻量化调优，基于 Cloudflare Serverless 架构实现零成本高并发运行环境。
业绩：
  • 基于 Cloudflare Durable Objects 构建了低延迟的 WebSocket 实时广播同步方案：实现了多人同时在房记分时，分数值与在线状态在多端屏幕上的 0 延迟同步渲染，提供极佳的协同体验。
  • 创新设计了“智能连接休眠与触屏唤醒”机制：针对 Serverless 长连接额度限制，实现了客户端 5 分钟无操作/无数据更新自动断开连接以节省资源，并利用事件冒泡机制实现点击屏幕/开始记分时瞬时无感重连，将计算开销（GB-s）降低了 80% 以上。
  • 实现基于版本号比对的低消耗轮询退避方案：通过在 D1 数据库层面进行版本戳（Version）对比，仅当本地版本落后时才执行完整的联表及流水查询，避免了传统轮询带来的无效数据库读取，将 D1 读取次数降低了 90% 左右。
  • 引入微信原生 ECharts 动态计算并渲染回合局势走势图：通过逆序时序算法，动态为流水记录分配 R1、R2、R3... 的局数编号，并与走势图的拐点进行 100% 对齐，提供直观的局势走向和资产起伏可视化分析。
  • 设计了严密的安全准入与转发验证机制：在 /api/room/join 接口层面，通过联合查询快速校验当前用户是否属于房间内成员，在已结算状态下实现“老玩家随时重进查看对账单，非成员新用户强制拦截”的权限闭环。
  • 优化弱网及熄屏生命周期交互：合理利用小程序 onShow/onHide 生命周期，实现熄屏自动断开连接、亮屏主动补齐数据并重连；设计并实现了包含 🟢已连接、🟡连接中、⚫已休眠 三色灯在内的连接状态条，提供直观的用户心理预期。
  • 打磨极致移动端交互与 CSS 布局调优：重构并精简了结算弹窗，采用 flex 弹性布局在单行内平铺展示功能按钮，解决由于 font-weight 状态改变导致文字宽度抖动的常见布局问题，提升了整体 UI 的精致度与流畅感。
0 延迟 WebSocket 实时广播
-80% 开销 休眠与无感唤醒
全栈开发（独立负责）
查看二维码
小程序二维码 微信扫码体验

CONTACT

FOR ME

灵感 代码 梦想 未来

学习是一个充实愉悦的过程
喜欢尝试，期待新鲜事物
前端即兴趣，兴趣即未来
行路有良友，便是捷径
期待有机会与您共事！

微信
© Ashang | 鄂ICP备19006107号-1
Ashang's resume

Hello, I'm Ashang

Life is sad at times, but it is up to you to make your own life happy

我叫 Ashang

6年经验 · 前端开发工程师

关于我

- 幸会，我是Ashang！
一名前端开发工程师。我相信打造一款成功的产品离不开持之以恒的匠心与优化，能成为您的搭档共同创造出优秀且别具一格的作品，我倍感荣幸。
- 我能效劳
主导中大型复杂系统（SaaS 中台、可视化大屏、CMS 等）的前端架构搭建，掌握微前端（Module Federation）开发模式；精通混合式移动端应用及微信跨端多平台小程序（Taro/uniapp）的敏捷研发、全流程打包与部署上线。
- 关于我
目前坐标武汉。拥有 6 年 Web 前端开发经验（2019 - 至今），历任前端开发组长，具备优秀的团队协作与工程化实践经验。深入理解 Vue2/3 全家桶、React、TypeScript 及其底层原理，编码规范严谨，拥有成熟的性能优化与用户体验调优经验。
自驱力强，对新技术保持浓厚兴趣，执行力高效，期待与您开启合作！

技能掌握

1. 热爱前端，写出高性能页面，能够兼容主流各种浏览器，如 IE8+、Chrome、Firefox等。
2. 熟练掌握各种 Web 前端技术，包括 HTML5、CSS3、JS/ES6+、TypeScript、WebSocket 等。
3. 熟练使用各种 CSS 布局及 Tailwind CSS 等 CSS 工具类，掌握 rem 响应式布局适配。
4. 熟悉 Vue 框架及微前端架构，对模块化开发、公用组件封装有着深入和独到的理解。
5. 精通 Vue2、Vue3 全家桶（Pinia、Vuex、Router、Axios），精通 Nuxt 服务端渲染与 SEO 优化。
6. 熟练使用 React 框架、Taro 及 uniapp 进行跨端跨平台项目（小程序、H5、Web）开发。
7. 熟练使用 Webpack/Vite 等构建工具，具备优秀的前端工程化开发与优化实践经验。
8. 熟悉版本管理工具（Git、Svn），掌握项目在 Linux 环境下的 Nginx 部署和静态资源配置。
9. 了解 Docker 容器化技术及 Jenkins CI/CD 自动化构建，能保障交付流程的高效顺畅。
10. 熟练将 AI Agent（如 Gemini、Claude、GPT 等大模型）深度融入日常开发与架构设计，擅长提示词工程与智能工作流构建，极大提升项目研发效率与交付质量。

工程化 65%
TS / JS 80%
Vue 全家桶 80%
Taro/小程序 75%
HTML / CSS 85%
AI Agent 90%

我的经历

  • 2021年/07月–2024年 /04月
    在上海杨邑咨询工作 前端开发组长 / 资深工程师

    1. 负责PC端、移动端Web应用及小程序的开发与维护。
    2. 参与大型子系统微前端（Module Federation）架构搭建。
    3. 负责电动车集团用户运营中台、飞利浦健康生活Lab系统/小程序、梦幻家AI绘图小程序、keenon官网CMS系统的设计与开发。

  • 2020年/04月–2021年 /07月
    在慕渊（上海）智能科技有限公司工作 技术部/前端工程师

    1. 负责PC、移动端Web应用及小程序的开发。
    2. 开发“展商秀-web”及“展商秀-管理后台”（WebSocket在线直播与视频通话功能）。
    3. 使用Nuxt2.js实现服务端渲染优化SEO。

  • 2019年/04月–2020年 /04月
    在北京云视科技有限公司工作 技术部/前端工程师

    1. 负责客流监控、智慧城市大屏的Web前端制作。
    2. 利用Vue、Echarts实现客流数据监控驾驶舱。
    3. 结合heatmap.js绘制客流轨迹热力图。

我的项目

用户运营中台

前端开发组长
Vue3全家桶TypeScriptVite FederationOAuth2 SSOJenkins2022.04-2023.11
项目概述：为某大型电动车集团定制开发用户运营中台，该系统旨在实现全流程的用户生命周期管理，包括线索收集、会员转换、数据监控、品牌商城、营销活动以及售后服务等关键环节。
个人职责：
  • 负责整个项目的大型框架搭建，确保系统的稳定性和可扩展性。
  • 针对客户和产品经理提出的需求进行深入分析，并优化实现方案，以确保产品质量和用户体验。
  • 负责代码分支维护，确保代码的版本控制和协作效率。同时，进行功能拆分 and 工时估算，以提高开发效率 和 项目管理能力。
  • 主导开发部分模块及子系统：如会员中心，电商中心、短信发送、统一认证平台、装修中心等。
业绩：
  • 使用 unplugin-vue-components 和 unplugin-auto-import 实现了按需导入和自动导入组件。
  • 配置 @originjs/vite-plugin-federation，实现了大型系统不同子系统间的模块联邦（远程组件）。
  • 设计并实施了基于 OAuth2 协议的统一认证中心单点登录系统，确保了不同子系统的用户体验。
  • 配置 Jenkins 和 Git，实现了提交 Git 自动化部署前端项目至服务器，简化部署流程。
  • 参与度 90% 以上。
参与度 90%+ 模块联邦 & SSO

飞利浦健康生活Lab管理系统

前端开发
Vue2.x全家桶2021.09-2024.04
项目概述：参与飞利浦健康生活Lab管理系统的前端开发，目标是构建一个面向消费者的ToC内容管理平台，集成CEM系统 and 电商系统等多种功能。
个人职责：
• 框架搭建：负责搭建前端开发框架，确保项目的技术基础和结构合理。
• 可视化装修模块：开发可视化装修功能，使用户能够轻松定制和优化界面布局。
• 权限管理模块：设计并实现权限管理系统，确保平台的安全性和用户访问控制。
• 功能迭代：持续优化和更新平台功能，提升用户体验和系统性能。
业绩成果：
• 1. 封装各种通用组件及函数、自定义指令，上传组件、axios 请求、工具类函数、权限校验等。
• 2. 开发并封装了动态组件和可视化装修功能，为用户提供了更灵活的界面定制和交互体验。
• 3. 在线问卷模块功能，动态可视化配置问卷及展示。
• 4. 参与度95%以上，包括：商品模块、活动模块、订单模块、各类定制化活动功能开发。
95%+ 参与度 可视化装修组件

飞利浦健康生活Lab小程序

前端开发
uniapp(vue2)2021.09-2024.04
项目概述：面向消费者的微信小程序项目，集成CEM系统和电商系统等多种功能。
个人职责：
• 框架搭建：负责搭建前端开发框架，确保项目的技术基础和结构合理。
• 提供有效的技术+业务解决方案，确保功能按期上线，为产品的持续迭代 and 优化做出了重要贡献。
• 各种复杂活动开发，如：以旧换新、礼品卡、各类品牌联名活动、女神节画廊、语音祝福、商品镭雕定制等。
• 复杂效果实现，如：用户DIY宇航员、拼图游戏、抽奖翻牌、礼品卡自定义文案及海报生成、语音录制与播放等。
• 大部分模块独立负责，如：用户授权注册、订单、购物车、可视化装修（首页、商城首页、自定义活动页）等。
业绩成果：
• 1. 使用platformize-pixi、pixi-actions 集成至微信小程序实现飞利浦元宇宙活动（3D空间）。
• 2. 实现了模块曝光等埋点事件上报功能，通过 IntersectionObserver 最佳方案监测页面元素的可见性。
• 3. 使用正则搜索替换编辑器中部分标签，实现自定义编辑器小程序中展示，包括：视频、图片、跳转链接等效果。
• 4. eventBus方案实现全局公用注册组件展示。
• 5. 自定义tabbar实现带展开效果底部导航栏。
• 6. 使用fabric.js管理端配置定制位置并根据比例保存，以实现小程序镭雕定制所需定位信息。
• 7. 小程序手写放大、缩小、旋转、移动等交互效果，并按比例实现二倍放大编辑。
3D元宇宙空间 手势交互镭雕定制

电商小程序（分包开发集成至主包）

前端开发
TaroTypeScript2022.08-2023.11
项目概述：为某大型电动车集团以分包形式定制开发品牌电商微信小程序，包含：可视化配置商城首页、商品、购物车、各类电商活动、下单、订单模块等。
个人职责：
• 进行Taro分包模式调研并搭建项目结构。
• 开发自定义装修模块呈现、购物车、分类等部分模块及子系统。
• 分包打包及合并至主包文档梳理。
• 负责分包打包并将其合并至主包，整理相关文档。
业绩成果：
• 1. 由于前期需求存在原生tabbar需使用商城首页，则使用原生微信小程序开发商城首页。
• 2. 实现多种热门自定义配置页面模块，包括图片热区、商品组件、视频、轮播视频、轮播图片等，以满足客户对个性化页面的需求。
• 3. 使用Node.js中的fs模块，实现自动化文件转移至对应文件夹，并将分包打包成zip文件，便于与对接方合并至主包，确保交付流程高效顺畅。
• 4. 使用 IntersectionObserver 技术，实现对数据埋点-曝光事件的监听及上报功能，为客户提供数据分析和用户行为跟踪的支持。
• 5. 根据环境变量配置basePage，解决开发环境下不同分包路径问题，提高开发效率，确保代码的可维护性和可移植性。
自动化合并部署 曝光事件上报

梦幻家AI小程序

前端开发组长
Taro + TS2023.11-2024.01
项目概述：一款ToC面向儿童的AI绘画小程序，主要功能为文字/语音智能绘图，合作绘画，排行榜，绘画广场点赞、收藏、分享和评论等。
个人职责：
• 负责整个项目的框架搭建，技术难点攻克，项目进度把控，工期预估与分配。
• 主导完成多个核心模块设计与开发，包括用户交互界面、数据处理模块等。
• 积极推动团队技术进步，定期组织技术分享，提升团队整体技术实力。
• 与产品、设计师共同探讨用户视觉体验、交互体验，提出可实行性方案。
业绩成果：
• 1. 使用css（伪元素+box-shadow+animation）实现动态星空背景，确保页面快速渲染和较低的性能消耗。
• 2. 在同一页面中集成多种业务功能，封装多类组件以提高代码复用率和可维护性。
• 3. 创新性地使用轮询技术，实现对服务端AI绘画进度的实时监控，提升用户体验。
星空动效优化 轮询进度实时监控

Keenon官网CMS系统

前端组长
Vue3全家桶 + TS2023.08-2024.04
项目概述：为擎朗智能公司定制开发cms系统，自定义官网页面所有模块并支持多国语言。
个人职责：
• 可视化装修：开发可视化装修功能，使用户能够轻松定制和优化界面布局，并生成可直接拼接的html代码。
• 27国多语言：数据/界面层隔离，n个国家语言文章、页面的配置及发布。
• 功能迭代：持续优化和更新平台功能，提升用户体验和系统性能。
业绩成果：
• 1. 页面可视化功能开发，并根据配置项动态生成html代码片段，使运营人员可随意配置任何页面。
• 2. 使用OAuth2 协议的统一认证中心单点登录系统，确保了不同子系统的用户体验。
• 3. 注重代码质量和系统性能的优化，多次发现并修复潜在漏洞，增强系统稳定性和可靠性。
27国语言配置 可视化页面配置

展商秀-web & 管理后台

前端开发
Vue 2 + WebSocket2020.04-2021.07
项目概述：会展直播与音视频在线展台管理系统，为参展商和观众提供实时的线上音视频会话、双通道实时聊天及直播会展服务。
个人职责：
• 负责PC与移动H5端核心开发，保障跨端一致性布局体验。
• 独立开发音视频展台模块，基于 WebSocket 编写实时双通道聊天与直播互动功能。
• 设计管理后台表单与组件系统，实现海量展商数据录入。
业绩成果：
• WebSocket 自定义双通道协议，实现低延迟高并发的即时客服通讯。
• 引入虚拟列表与分批渲染机制，突破大数据表单渲染的性能瓶颈，首屏重绘稳定在 60 FPS。
• 设计完善的自动重连与心跳保活逻辑，极大增强弱网环境下的网络鲁棒性。
60 FPS 稳定帧率 WebSocket 实时通信

Corrface 全瓦通

前端开发
mpvue + Webpack2020.04-2021.07
项目概述：瓦楞纸箱包装行业的 B2B 撮合交易平台及小程序，提供展商、买家、观众的多角色视图切换及撮合交易。
个人职责：
• 使用 mpvue 重构会展助理小程序，支持微信端多角色视图流畅切换。
• 引入小程序分包机制，深度拆分主包与子功能包，解决包大小受限问题。
• 进行资源惰性加载与体积压缩优化，确保低配设备上的快速启动速度。
业绩成果：
• 制定小程序分包加载策略，主包文件压缩至 2MB 以内，首包加载提升 40%。
• 对全局静态资源部署七牛云 CDN 缓存及 Gzip 配置，极大削减网络连接初始耗时。
• 封装统一微信 API 兼容适配层，兼容不同小程序基础库的原生调用。
包体积 < 2MB 冷启动提速 40%

智慧客流监控大屏

前端开发
Vue + Echarts2019.04-2020.04
项目概述：智慧商超与客流数据监控驾驶舱大屏及蓝牙空间轨迹热力图分析系统。
个人职责：
• 独立负责大屏端（Vue + Echarts）多维度实时指标的数据绑定与联动逻辑开发。
• 在移动与后台端引入 heatmap.js，根据信标定位信息实时渲染空间轨迹热力图。
• 主导多图表高频刷新的前端性能调优，避免页面卡顿与浏览器假死崩溃。
业绩成果：
• 利用 requestAnimationFrame 与图表对象复用，稳定保障 55-60 FPS 大屏高帧率重绘。
• 结合 Canvas 离线缓冲与离屏渲染，防止万级轨迹点在大屏和低配设备上重绘导致的渲染阻断。
• 实现了完善的多分辨率适配体系，在多种超宽大屏墙上无缝缩放呈现。
60 FPS 刷新帧率 离屏渲染 0 卡顿

多人协同记账小程序

全栈开发
微信小程序 + Hono一周完成
项目概述：面向线下多人娱乐对局（麻将、扑克、掼蛋等）场景的实时联机记分与对账全栈小程序。支持房间创建、扫码加入、多端即时记分、智能茶水费自动结算、局势趋势分析、对账单分享等核心功能。
个人职责：
• 独立负责项目从 0 到 1 的全栈架构设计与前后端开发，包括后端 API 接口设计、数据库表结构优化、Durable Objects 长连接同步以及前端所有交互与 UI 设计。
• 负责项目的云端部署与轻量化调优，基于 Cloudflare Serverless 架构实现零成本高并发运行环境。
业绩成果：
• 1. 基于 Cloudflare Durable Objects 构建了低延迟 WebSocket 实时端广播同步方案，实现多人同房分数值在多端屏幕上的 0 延迟同步。
• 2. 创新设计了“智能连接休眠与触屏唤醒”机制，实现 5 分钟无操作自动断连，以及点击屏幕瞬时无感重连，降低计算开销 80% 以上。
• 3. 实现基于版本号比对的低消耗轮询退避方案，对比版本戳判断是否查询联表流水，将 D1 数据库读取次数降低了 90% 左右。
• 4. 引入微信原生 ECharts 动态计算并渲染回合局势走势图，通过时序算法动态分配局数并与走势图拐点 100% 对齐。
• 5. 设计安全准入与转发验证机制，在 /api/room/join 校验成员权限，实现已结算对账单“老成员可查看、非成员拦截”的闭环。
• 6. 优化弱网及熄屏小程序生命周期（onShow/onHide）交互，设计“🟢已连接、🟡连接中、⚫已休眠”三色灯状态条，提供直观心理预期。
• 7. 打磨极致移动交互与 CSS flex 弹性布局，消除 font-weight 改变导致文字宽度抖动的布局缺陷，提升 UI 的精致度与流畅感。
Durable Objects WebSocket -80% 计算资源开销

联系我