4 年前端经验 坐标 · 郑州 Vue / React / Three.js

把复杂的业务
做成顺手的界面
— AI 短剧 · 工业 · 政务

我是酒歌,前端开发工程师。 从药品监管平台到工控系统,再到 AI 短剧平台,在政务、工业、AI 三大领域积累了扎实的前端工程能力。 主导过豫药办 OA 平台、安控 APP(H5 嵌入)、AI 短剧无限画布平台等多个复杂项目的前端架构设计与落地。 擅长 Vue/React 生态、微信小程序、移动端 H5、无限画布编辑器与工程化实践。

4
年前端经验
10+
核心项目主导
3
套设计系统搭建
6
人团队管理
~/about-me.ts
1// 前端工程师 · 4 年经验
2const me = {
3  name: '酒歌',
4  role: 'Senior Frontend Engineer',
5  stack: ['Vue 3', 'React', 'TS', 'Three.js'],
6  focus: ['画布编辑器', '3D 可视化', '设计系统'],
7  projects: 10+,
8}
9
10export default me
Vue 3ReactTypeScriptThree.jsCesiumEchartsAI 短剧画布编辑器微前端工业数字化政务系统实时协作 Vue 3ReactTypeScriptThree.jsCesiumEchartsAI 短剧画布编辑器微前端工业数字化政务系统实时协作
02 · About Me

从成熟团队到敏捷项目,沉淀下来的前端工程能力与架构思维。

4 年前端开发经验,经历过百万级用户产品的性能优化与架构升级,也主导过多个从 0 到 1 的前端项目搭建。擅长 Vue/React 生态、复杂交互实现、性能优化与工程化实践,注重代码质量与团队协作效率。

专业领域

深耕政务、工业、AI 三大领域,每个方向都有完整的项目落地经验。

微信小程序开发 移动端 H5 嵌入开发 无限画布 / 节点流程图 数据可视化大屏 · Echarts AI 多模态功能集成 权限系统 / 双 Token 3D 场景可视化 · Three.js 国际化多语言
技术栈

日常主力工具链,可按项目灵活搭配小程序 / H5 / 大屏。

🅥
Vue 3
⚛️
React
🇼
微信小程序
📱
移动端 H5
𝗧𝗦
TypeScript
Vite
📊
Echarts
🌀
Three.js
Element UI
项目经验

主导过的核心项目,覆盖政务、工业、AI 三大领域。

豫药办(OA 平台) 安控 APP(H5 嵌入) AI 短剧无限画布平台 工控系统智能体平台 数字园区可视化大屏 微信小程序开发
核心能力

从架构设计到细节落地,全链路把控能力。

前端架构设计 性能优化 小程序 / H5 开发 组件库封装 工程化实践 国际化
年前端经验
+
版本迭代
+
通用业务组件
%
组件复用率
03 · Skills & AI Toolchain

不止会用框架,更懂得把 AI 变成生产力。

4 年一线沉淀下的技术能力矩阵,以及我在日常开发中如何借助 AI 工具链提效——这是这个时代前端工程师的必修课。

前端基础与工程化

扎实的 HTML / CSS / JS 底层功底,熟悉浏览器渲染与性能原理;熟练 Webpack / Vite / pnpm + Turborepo,擅长卡顿、内存泄漏、首屏慢等问题的排查与优化。

ES6+ / 浏览器渲染 Vite / Webpack 虚拟滚动 / 防抖节流 资源压缩 / 代码分割

主流框架

精通 Vue 3 与 React(Hooks)全家桶,熟练使用 Umi / Dva / Ant Design Pro 等企业级框架,具备多框架大型项目从 0 到 1 落地经验。

Vue 3 / Composition React / Hooks Umi / Dva Ant Design Pro

可视化与 3D

熟练运用 Echarts / AntV 实现数据可视化大屏,掌握 Three.js / Cesium / WebGL 三维开发,支持多格式模型导入、机位控制与场景交互。

Echarts / AntV Three.js Cesium / WebGL 模型导入 / 机位控制

核心业务能力

精通无限画布、节点流程图、资源管理、权限系统研发;熟悉 AI 多模态功能集成,具备政务 OA、工控系统、AI 平台等复杂业务系统开发经验。

无限画布 / 节点流 政务 OA 平台 工控系统智能体 AI 多模态集成

多端适配

具备 PC 端、移动端 H5(嵌入第三方 APP)、微信小程序多终端开发经验,熟练处理设备适配、浏览器兼容性与嵌入通信问题,覆盖真实业务全场景。

PC / 移动端 H5 微信小程序 H5 嵌入 APP 浏览器兼容

工程与协作

掌握微前端、Token 无感刷新、双 Token 权限机制与路由守卫;熟练使用 Git 版本管控、Chrome 性能调试,了解 Nginx、MySQL、MongoDB 与 Node.js。

微前端 / micro-app 双 Token 无感刷新 路由守卫 Git / Nginx / Node
🤖

编程提效

用 Cursor / GitHub Copilot 辅助编码、代码审查与单测生成,把重复劳动交给 AI,把精力留给架构与体验。

🎨

多模态集成

接入豆包 seedream / seedance、通义等文生图 / 文生视频 API,把 AIGC 能力真正落到业务生产链路里。

🧩

智能体搭建

用 Coze 搭建业务智能体,主导"园宝 AI 助手"前端,集成多类运维 Agent,让系统会"主动思考"。

📝

内容生产

AI 辅助生成技术文档与多语言翻译(如豆包生成翻译文档),加速团队协作与知识沉淀。

Field Notes · 真实踩坑

问题不是终点,而是能力的刻度。

Canvas
Canvas 游标错位:绘制位置与鼠标位置不一致
根因是 canvas 用了 CSS transform 缩放 / 平移,但坐标计算未计入该变换。遵循"像素尺寸 = 显示尺寸"原则,让像素尺寸与显示尺寸保持一致,从根上消除视差。
性能
上万条图片 / 视频资源列表滚动卡顿
虚拟滚动只渲染可视区少量 DOM,配合 Canvas 截取视频首帧IntersectionObserver + 防抖与缓存上限(150 条),彻底解决 DOM 爆炸与内存泄漏。
实时通信
1V1 实时语音通话的稳定性与边界
基于 WebSocket 文本信令集成 Agora 音频,处理忙线、超时(30s)、UID 冲突重试、通话与 UI 解耦等边界,保证 1:1 行为正确。
跨域
Canvas 跨域污染导致 toDataURL 失败
在 crossOrigin 与 toDataURL 之间找平衡,并结合 OSS 缩略图后缀(如 ?x-oss-process=video/snapshot)在服务端产出首帧,规避前端污染。
04 · Selected Works

几个最近在做的真实业务系统

挑选了 8 个代表性的项目,覆盖 AI 短剧画布、3D 导演台、园区智能体、工业安全管控、政务 SAAS 与组件库。点击卡片可进入项目详情页,查看技术栈与真实踩坑。

View Case Study
Vue 3Vue FlowThree.js

AI 短剧智能生成平台(自研)

无限画布节点编辑器 + 3D 导演台 + 资源库 + 9 角色权限 + 1V1 语音通话 + 工作流引擎,支撑短剧从素材到成片的协同生产。

2026 · 星河万象(自研)
巡检
隐患上报
整改跟踪
View Case Study
Vue 3EchartsH5 嵌入

安控 APP(H5 嵌入)

安全生产巡检、隐患上报、整改跟踪与数据可视化,H5 嵌入第三方 APP 壳子,适配移动端交互。

2024 · 中软国际
A
🏢📷💡🌡🚗
3 号楼 B 区会议室今天还有空闲吗?
14:00-16:00 空闲,已为你预订。需要顺手开启空调和灯光吗?
✓ 一键开启 通知与会人 查看路线
View Case Study
ReactCesiumAI 智能体

数字园区可视化平台 + 园宝 AI 助手

基于 Cesium / WebGL 的 3D 园区场景交互,集成多类 AI 智能 Agent 运维助手,实时数据动态展示。

2024 — 2026 · 中软国际
Vue 3微前端权限系统

政务一体化服务平台

多租户权限体系、双 Token 认证、微前端架构,支撑 20+ 政务服务应用统一接入,服务百万级用户。

2024 · 中软国际
画布数
128
图片消耗
+12%
视频时长
02:48:12
ECharts数据

画布消耗数据看板 · CanvasInsight

实时聚合每位成员每集的画布消耗,做 B 端运营决策支持。

2024 → 2025
审批流转
多级
公文在线
OA
移动协同
实时
ReactUmi小程序

豫药办(OA 平台)

河南省药品监管局 OA 协同办公:公文流转、多级审批、资产管理、在线文档编辑盖章、微信小程序与移动端协同。

2021 — 2024 · 河南明道优术
2026.04 — 至今 现在
AI 短剧无限画布平台 | 前端开发 | 项目制
短剧行业 · 郑州

面向短剧创作者的 AI 辅助创作平台,集成可视化画布编排、3D 场景编辑、AI 多模态生成与团队协作能力。独立交付 14000+ 行代码、50+ 组件、60+ API 接口。主导无限画布节点编辑器、3D 导演台等核心模块。

Vue 3Vue FlowThree.jsAI 集成
2024.05 — 2026.04
工控系统与智能体平台 | 前端开发 | 驻场制
中软国际(驻场中控科技)· 杭州

负责工装夹具、小工单、工作台等 PC 端及移动端项目开发与国际化翻译工作。参与数字园区平台驾舱及大屏驾舱功能开发,使用 ECharts 实现主界面可视化大屏。主导安控 APP(H5 嵌入第三方壳子)开发,参与园宝 AI 智能体开发与接口调试。

Vue 3EChartsH5 嵌入智能体
2021.09 — 2024.05
豫药办(OA 平台) | 前端开发 | 自研
河南明道优术智能科技有限公司 · 郑州

负责河南省药品监督管理局一体化药品监管平台(豫药办 OA)的 PC、移动端前端开发与维护,包括微信小程序开发。参与需求讨论、技术方案设计、UI 界面设计、业务需求文档编写。主导通用组件封装与系统优化。

Vue 2/3Element UI微信小程序组件封装
06 · Testimonials

合作过的人怎么说

摘选 3 段真实合作反馈,更多评价可以聊的时候再发给你。

酒歌主导了我们 AI 短剧平台的前端架构,从无限画布到 3D 导演台,每个模块都考虑得很周全。她不仅技术扎实,对产品体验也有很深的理解。

L
王总
技术负责人

在中控科技共事期间,酒歌负责园区安全管控平台的前端开发,技术能力和责任心都很强。能独立承担复杂模块的开发,是团队的核心骨干。

Z
吴经理
项目经理

酒歌封装的组件和开发规范让我们团队的开发效率提升了 30%,组件复用率很高,文档也很完善。新人接手项目时上手非常快。

W
王主管
前端主管
07 · Notes & Thoughts

最近在想的事,顺手写下来。

查看全部 →
08 · FAQ

你可能想问的几个问题

还有更多没回答到的,直接发邮件或微信问我都行。

你目前在寻找什么样的机会?
我正在寻找能发挥技术专长的全职岗位,优先考虑 AIGC、工业数字化、政务系统等领域。希望团队重视产品体验和技术沉淀,有良好的工程实践氛围。
你的核心竞争力是什么?
扎实的工程能力 + 产品思维。既能主导复杂前端架构设计,也能亲自落地细节到像素级。擅长把混乱的业务梳理成清晰的产品体验,同时保证代码的可维护性和扩展性。
你过往最有代表性的项目是什么?
AI 短剧智能生成平台。负责核心前端模块开发,包括无限画布节点编辑器、实时语音通话、海量素材库虚拟滚动、权限管理系统等,支撑短剧从素材到成片的全流程协同生产,在复杂交互和性能优化方面积累了丰富经验。
你在团队中通常扮演什么角色?
核心开发者 + 技术攻坚者。专注于复杂前端功能的实现与优化,善于拆解技术难点,提供可落地的解决方案。在团队中积极分享技术经验,协助同事解决问题,推动项目高质量交付。
你对未来的技术规划是什么?
持续深耕 AI 应用前端、3D 可视化和设计系统领域。希望能在团队中建立完善的前端工程体系,推动技术创新,同时帮助团队成员成长。
如何获取你的完整简历?
点击上方的"下载完整简历 PDF"按钮即可获取。也可以通过邮件或微信联系我,我会根据你的需求提供更详细的项目案例和技术文档。
09 · Let's Build Together

期待加入
优秀的团队

我正在寻找新的职业机会,希望加入重视产品体验、技术氛围浓厚的团队,一起打造有影响力的产品。欢迎来聊!

AIGC2026-06-27· 12 min

标题

摘要