# 马金栋 · 高级前端工程师

> 把复杂的业务规则，做成可填写、可校验、可回归的界面。

北京 · 中国 ｜ 175 1620 9705 ｜ [extra9705@163.com](mailto:extra9705@163.com) ｜ [掘金主页](https://juejin.cn/user/1556564196998110)

---

## 简介

7 年前端，3 条业务线。做过电商交易、广告投放、ToB CRM 与 AI 产品。擅长在已经跑起来的复杂系统上做深：先画清对象与状态，把规则拆成可配置、可校验的段，再用 E2E 锁住高风险链路。把复杂的历史系统拆成可演进的模块，是我最熟练的事。

| 5,860 次提交 | 171 条 E2E | 71,550 次阅读 | 7 年 / 3 段经历 |
| --- | --- | --- | --- |
| 26 个仓库 · 2021—2026 | 5 个 spec · 客开户 | 20 篇文章 · 975 赞 | 3 条业务线 |

---

## 01 核心能力

**复杂业务建模**
四层对象依赖、巡检 5 层对象 × 25 指标、绑定规则 v1→v3；把字段、条件、动作、调度拆成可校验的模型。

**跨栈与跨仓交付**
React 17/19 · Vue 2/3 · TS · Umi · qiankun；主应用与子应用接入，跨 3 个仓库对齐字段、权限与版本契约。

**质量与 AI 工程**
Playwright 171 条 E2E；OpenSpec 规则先行；31 个自研 AI Skill，把规范、测试与协作变成可执行的东西。

---

## 02 代表项目

### U小店 · 把交易链路做厚，而不是重写

`2021.09—2024.06` ｜ 电商 SaaS · 前端核心 ｜ 13 仓库 / 3,504 次提交

- **B 端微前端主应用**（菜单、权限、登录、消息）158 次提交；新子应用接入从「改主站」变成「注册路由 + 配权限」。
- **大禹直播中控** 422 次提交 / 321 文件；订单中心 170 次；C 端 React 重构 372 次，主流程不停。
- **交易与履约**：店铺保证金、支付黑名单、订单流转、退货退款；把状态、异常分支与售后流程对齐。

**结果**：重构按模块灰度，主流程未中断；大促期间高频操作保持稳定。

### 超级账户 · 把四层对象收敛成配置驱动表单

`2024.04—2026.10` ｜ 广告投放 · 前端主力 ｜ 1,050 次提交 / 591 个文件

- 账户 → 项目 → 广告 → 创意四层依赖，用**配置驱动**承载账户类型、转化目标与鸿蒙扩展，避免每次改版重写页面。
- **账户设置与出价预算**核心文件改动 72 次；校验收敛到提交前，批量与单账户确认边界拆清。
- **鸿蒙投放 0→1**（商店直投、deeplink）跨 2 仓库 41 次提交；AIGC 素材库 2,400 行、AI 标题润色 1,470 行接进主流程。

**结果**：新增账户类型以配置接入，不再逐页改版；跨端投放复用同一套表单。

### 智汇星 + CRM · 把规则和质量写成可执行的东西

`2024.10—2026.11` ｜ ToB CRM / AI · 核心开发 ｜ 与广告线并行

- **巡检任务配置**：5 个对象层级、25 个指标、最多 3 个条件；122 次提交 / 19,500 行 / 21 条 E2E，核心表单 2,213 行。
- **客开质量攻坚**：5 个 Playwright spec / 171 条 E2E，覆盖资质、OCR、草稿、同名客户；9.7 验收 8 项通过。
- **客户工作台绑定规则 v1→v3**：从配置页走到版本化表单，跨 3 个仓库、26/26 回归；历史会话分组 0→1。

**结果**：关键链路纳入 E2E，跨 3 个仓库升级可回归；会话分组从 0 到 1 落地。

---

## 03 工作经历

**2024.04 — 2026.11 ｜ 超级汇川 · 超级账户 / 智汇星 / 客户工作台** ｜ 前端主力 / 质量攻坚

广告创编与 CRM 两条线并行：账户设置与出价预算 **1,050 次提交**，鸿蒙投放 0→1；巡检 **122 次 / 19,500 行**，客开 **171 条 E2E**。业务从电商切到广告与 ToB，复杂表单与规则建模是同一套方法。

`React 17/19 · Umi · Ant Design · TypeScript · Playwright · OpenSpec`

**2021.09 — 2024.06 ｜ U小店 · 电商 SaaS 交易链路** ｜ 前端核心开发

B/C 端交易与商家工具，**13 个仓库 / 3,504 次提交**。做过微前端主应用、大禹直播中控、订单中心、钱包与服务商；在别人搭好的架构上做深两年半，没有推翻重写。

`Vue 2/3 · React · qiankun · Element UI · Umi`

**2019.07 — 2021.07 ｜ 联合汇创 · 财务办公 / 电商软件** ｜ 前端开发工程师

财务办公中台 **23 个业务模块 / 175 个 Vue 文件**：审批流用动态组件做插拔式接入，按角色下发菜单与操作权限。电商后台沉淀动态表单、表格、上传与 Lodop 打印；uni-app 商城 **48 个页面目录 / 126 个页面组件**，覆盖直播、秒杀、拼团、会员储值、分销与售后。

`Vue 2 · Element UI · vxe-table · uni-app · 微信小程序`

---

## 04 教育与技术栈

**郑州大学** ｜ 计算机科学与技术 ｜ 本科

- **主力**：React 17/19 · Vue 2/3 · TypeScript · Umi · Next.js · Ant Design · Element UI
- **工程化**：qiankun · Webpack 3→5 · Vite · pnpm · dumi · Babel 6→7
- **质量与端**：Playwright · Vitest · ESLint · uni-app · 微信小程序 · Electron

> 技术栈按「在哪用、解决什么」来分；能讲清取舍和代价，才算真的会用。

---

## 05 工作方式

**先建模，再写界面**
对象、状态、权限先画清，再决定组件、路由与数据流；界面是模型的结果，不是起点。

**规则先成文，再改代码**
OpenSpec 与接口契约先行，变更可追溯；跨仓库的字段与版本，先对齐再动手。

**高风险链路先有测试**
钱、资质、履约先上 E2E，再谈重构与优化；测试是把质量变成可回归的能力。

---

## 06 公开输出

- **掘金 20 篇 / 71,550 阅读**，975 赞 · 269 关注 · Level 4；代表作《一份 AGENTS.md，让 AI 代码规范率从 60% 飙升到 95%》45,787 阅读。
- **31 个自研 AI Skill**（6 大领域），四层体系；《基于四层 Skill 体系的前端团队 AI 提效实践》14,193 阅读。
- **dumi React 组件库**（npm 发布）；统一团队 UI 与文档。
- **8 款离线游戏 + Electron 大厅**；状态机、离线存档与键盘操作。
- **7 个个人站点**：AI 工具、游戏与实验项目，持续更新。
- **20 组实验 / 8 个可运行 package**；AgentIM、AI 管家 Pro、Next 16 / TS 6 / Tailwind 4。

---

## 求职意向

- **岗位**：高级前端工程师 / 前端技术骨干，偏复杂业务、中后台与 ToB 产品。
- **城市与到岗**：北京 · 全职 · 一个月内。
- **联系**：extra9705@163.com · 175 1620 9705（微信同号）。

---

<sub>马金栋 · 高级前端工程师 · 2026 ｜ 本文与 HTML / PDF / DOCX 版本同步</sub>