前端开发工程师 · 上海 · 3 年经验
linmo@example.com · 138 0000 0000 · github.com/linmo
个人优势
- 三年前端开发经验，主要做 B 端 SaaS，负责过看板、报表、权限和审批几个完整模块，能从需求评审跟到上线复盘
- 熟悉 Vue 3 响应式和编译期优化，参与并主导了 600 多个组件从 Vue 2 迁到 Vue 3，迁移期间业务正常发版
- TypeScript 用得比较深，给团队组件库写过泛型表格、泛型表单组件，类型提示能精确到列字段
- 做过大数据量图表的性能优化：把聚合计算挪到 Web Worker，维度切换不再卡顿
- 有表单引擎的实际经验，基于 JSON Schema 做过联动、校验和可视化配置，目前承载公司 60 多个审批表单
- 重视组件沉淀，封装的表格、筛选栏、弹窗表单配了 Storybook 文档，新做一个标准列表页从两三天缩到一天以内
- 能独立写 Node.js 小服务，用 Koa 写过 BFF 接口和文件上传服务，熟悉分片上传和断点续传
- 有线上问题的排查习惯：接入 Sentry 后按接口报错、白屏、JS 异常分类告警，大部分问题当天就能发现
- 做过 uni-app 小程序，熟悉分包、图片压缩和弱网下的离线提交
- 关注可用性细节，组件默认支持键盘操作和错误状态，低配笔记本上也会自测一遍
- 技术栈：Vue 3、Pinia、Element Plus、TypeScript、Sass、Vite、Webpack、Vitest、Storybook、ECharts、uni-app、Sentry
工作经历
星河数据 · 前端开发工程师
公司做企业级数据分析 SaaS，400 多家企业客户在用。我在 5 人前端组，负责看板、报表和权限三个模块。
- Vue 2 迁移 Vue 3：项目 600 多个组件，不能停下业务需求整体重写。先接入
@vue/compat让项目在 Vue 3 下跑起来，再按模块逐个消除兼容层警告，Vuex 逐步换成 Pinia；两个月迁完，期间正常发版。构建换成 Vite 后本地冷启动从 40 多秒降到 5 秒，热更新基本即时 - 业务组件沉淀：把表格（列配置、分页、批量操作）、筛选栏、弹窗表单等反复写的模式封装成组件，配 Storybook 文档和示例；新做一个标准列表页从两三天缩短到 一天以内
- 错误监控：接入 Sentry，按接口报错、白屏、JS 异常三类配置企业微信告警，并把用户 ID 和租户写进上下文；之前靠客户反馈才知道的问题，现在基本当天就能发现
- 权限改造：原来按钮级权限散落在各个页面的
v-if里，抽成v-permission指令和路由守卫统一处理，权限配置改为后端下发，新增角色不再需要发版
某零售 SaaS 公司 · 前端开发工程师
公司给连锁门店提供收银和巡店系统，我在 3 人前端组，负责门店后台和巡店小程序。
- 用 Vue 3 + Element Plus 开发门店后台的商品、库存和报表页面，独立负责了 20 多个页面的交付
- 报表导出原来是前端一次拉全量数据再拼 Excel，数据超过 5 万行浏览器直接卡死。和后端改成异步导出任务 + 下载链接，前端只负责发起和轮询进度
- 用 uni-app 开发巡店小程序（门店检查表、拍照上传、整改跟踪），门店地下室信号差，检查结果先存本地，联网后自动补交
项目经历
企业数据看板
Vue 3 / TypeScript / ECharts / Pinia / Web Worker
客户在页面上自由组合图表、筛选维度来搭建自己的分析看板，一个看板通常有 10 到 20 个图表，单个图表的原始数据可能上万行。
- 主线程卡顿：维度切换时前端要对原始数据重新聚合（分组、求和、同比），放在主线程里一次要算 1 秒多，页面会卡住。把聚合计算移到 Web Worker，用 Transferable 传 ArrayBuffer 避免拷贝，主线程只负责渲染，切换维度时页面不再卡顿
- 图表配置化：设计看板的 JSON 配置（数据源、指标、维度、图表类型、样式），运营在界面上配置后保存，渲染端按配置生成 ECharts option；常规的看板需求不再需要前端排期
- 自适应：大屏模式和嵌入第三方页面时容器尺寸会变，统一用 ResizeObserver 监听容器并节流调用
resize，修复了全屏切换后图表尺寸错乱的问题 - 按需加载：20 个图表同时请求会把接口打满，改为视口内的图表先加载，其余进入视口时再请求，首屏接口数从 20 个降到 6 个左右
审批表单引擎
Vue 3 / JSON Schema / Monaco Editor / AJV
公司内部 OA 的审批表单原来每个都手写页面，引擎上线后用配置生成，目前承载 60 多个审批表单。
- 基于 JSON Schema 扩展表单协议，加入
x-component、x-reactions字段描述组件类型和联动规则，联动按依赖图计算，避免循环触发 - 提供拖拽配置和源码编辑两种模式，源码模式用 Monaco Editor，接入 Schema 校验和字段名自动补全
- 校验规则前后端共用一份 Schema（前端 AJV、后端同样的 Schema 校验），避免前后端校验不一致
- 表单字段超过 100 个时输入明显卡顿，排查发现每次输入都触发整张表单的联动计算。改成只重算依赖当前字段的节点，输入恢复流畅
巡店小程序
uni-app / Vue 3 / IndexedDB 兼容层
覆盖 300 多家门店的店长和督导，每天提交检查表 2000 份左右。
- 离线提交：检查结果和照片先写本地队列，联网后按顺序补交，重复提交用检查单 ID 做幂等；上线后「提交失败」相关的反馈基本消失
- 图片处理：一份检查表最多 30 张照片，拍照后本地压缩并加水印（门店、时间、定位），单张从 4MB 左右降到 300KB，上传耗时缩短到原来的五分之一左右
- 分包：报表和历史记录页移出主包，主包控制在 1.2MB 以内，首次打开时间明显缩短