钮国伟    前端开发

邮箱：ngwszsd@qq.com   |   电话：13145668144

学历：本科   |   博客：https://garvin.netlify.app

工作经历

南京魔数团信息科技有限公司    前端 Team Leader    2025/05 - 至今

万辰集团控股（万丞）    好想来零食研发中心大前端团队工程师    2023/03 - 2025/05

金证股份南京科技有限公司    Web 前端工程师    2021/06 - 2023/02

个人优势

• AI 驱动工具： Claude Code、Codex快速开发，具备 AI Workflow 与工程化结合经验
• AI 工程与 Agent 系统： 主导企业级 AI Agent 构建平台（LLM + RAG + Workflow + MCP + 无限画布 UI 编排），已获字节 & 讯飞投资；落地 YOLO CV 训练推理平台与 AI 实时语音链路；熟练运用 Claude Code / Codex 进行 AI 驱动开发，具备 AI Workflow 与工程化深度结合经验
• 前端架构与工程化： Monorepo 架构设计与 SDK 化交付，引擎与业务壳解耦落地；熟悉 Rspack / Vite / Turbopack / Webpack 及 tsup/tsdown 构建工具链；主导 Vue2→Rspack 迁移（HMR 30x、构建 10x 提升）；CI/CD + pnpm Monorepo 工程化体系搭建
• 前端技术栈： 精通 React 生态（Rsbuild / Vite / Next.js / Umi）+ TypeScript，丰富 TSX 开发经验；熟悉 Vue2/3 全家桶；熟练 TailwindCSS
• 组件库与低代码： 从 0 构建 npm 组件库（TS 类型 + Dumi 文档 + CI/CD 自动发布），支撑 15+ 业务线成为公司 UI 标准；基于控制反转思想（rc-form / react-hook-form）实现高性能动态表单与中台低代码方案
• 微前端体系： 主导多次 wujie 微前端架构设计与落地，15+ 子应用独立开发部署稳定运行；自研跨应用通信工具，输出接入规范与团队推广
• 实时通信（RTC / IM）： 具备 WebRTC 远程协助及 IM 系统开发经验；设计统一 RTC SDK 抽象层对接声网/腾讯云/云屋，支持多 SDK 动态切换与降级，落地实时音视频与协同场景
• 跨端与全栈： 了解且具有经验Taro 多端小程序 / React Native / Flutter 跨端开发
• 技术探索： 关注桌面端 Tauri / Electron
• Vibe Coding： Flutter 跨端 AR 软件市场 + Python 全栈影院 AR 字幕项目

项目经历

企业级 AI Agent 构建平台    南京魔数团

对标 Dify / FastGPT 构建的平台化交付系统，在补齐传统 AI Agent 平台 Workflow 与知识库能力的基础上，首创性地加入了面向业务的 UI 搭建与前端交付层，打通"设计-预览-运行"全链路，为 AR 眼镜等复杂场景提供应用编排与开发基座。

React · @xyflow/react · Craft.js · Zustand · react-hook-form · react-zoom-pan-pinch

• 前端架构解耦与 SDK 化交付： 主导 Monorepo 工程架构，将"业务壳"与"平台引擎"深度解耦，拆分出 Workflow Engine、UI Studio Engine、预览运行时及组件库等独立子包，以 SDK 形式向业务侧输出规范化产品能力，杜绝代码级 Copy，大幅降低重复开发成本。
• 无限画布 UI 引擎从 0 到 1： 攻克复杂视口缩放、坐标系转换与多页面挂载等难题，基于 Craft.js + react-zoom-pan-pinch + Zustand 实现高性能无限画布。支持组件拖拽编排、属性配置与小地图聚焦；自研数据订阅机制与图层系统，优化大体量 DOM 渲染性能，通过本地持久化保障高可用性。
• 事件驱动闭环运行时： 构建统一 UI Runtime，支持通过页面/组件事件实时触发复杂工作流、变量更新及路由跳转，实现数据流与控制流无缝衔接，完成"拖拽设计态"到"预览运行态"的逻辑闭环。
• 高扩展 Workflow 引擎： 采用 @xyflow/react + react-hook-form 构建高性能 DAG 编排器。首创"宿主可注入模式"，支持 HTTP、LLM、MCP 服务、RAG 知识库检索等多样化节点；内置循环、分支等逻辑控制流，补齐自动布局、Lint 校验及执行历史追踪等企业级能力。
• 业务落地： 推动引擎在业务侧全面落地，打通草稿、版本管理、归档、发布全流程，形成面向 AI 原生应用（特别是 AR 场景）的端到端交付闭环。

YOLO CV 训练推理平台    https://yolofan.cn/

面向工业检测与 AR 眼镜等边缘终端部署场景，从 0 到 1 架构研发的一站式 YOLO 模型训练交付平台，作为 AR 业务体系的底层 AI 模型支撑基座，打通"数据标注-模型训练-端侧部署"的完整生命周期。

Next.js 16 · React 19 · TypeScript · WebSocket · Recharts · TailwindCSS

• 全生命周期 MLOps 与 AR 赋能： 统筹平台前端架构设计，整合传统割裂的 CV 工具链。深度联动 AR 业务场景，为 AR 眼镜提供定制化 CV 模型（手势交互识别、实景物体检测）训练支持，建立从云端算力调度到 AR 端侧应用的研发闭环。
• 高性能推理与部署验证： 研发多模态在线推理模块，支持流式（视频流/摄像头）推理验证，精准模拟 AR 眼镜第一视角实时识别效果。封装标准 API 并支持轻量化模型格式导出（适配边缘计算），打通模型向 AR 硬件侧部署的最后一公里。
• 实时训练看板： 针对模型训练"黑盒"痛点，基于 WebSocket + Recharts 搭建低延迟数据看板，实时可视化 mAP、Precision、Recall 等核心指标曲线，同步渲染流式训练日志，降低算法调优成本。
• 企业级能力： 面向 ToB 场景设计细粒度多用户 RBAC 鉴权；搭建模型中心沉淀企业级 AI 视觉资产；保障敏感工业数据集安全隔离，支撑全量本地私有化部署。

AI + AR 智能眼镜远程协助平台    https://ucenter.teamhelper.cn/

基于 Vue3 + TypeScript 构建远程协助平台，打通 Web 与 AR 智能眼镜端，实现实时音视频通信与远程协作。支持扫码入会、屏幕共享、协同标注、录屏上传等能力，应用于远程巡检、设备运维及现场专家指导场景。

Vue3 · TypeScript · WebRTC · WebSocket · Protobuf

• AI 实时语音链路： 负责会议内语音 AI 能力落地，完成音频采集 → PCM 编码 → 实时转写 → 翻译 → 字幕分发全链路打通。对接阿里云/讯飞语音服务，实现多语言实时字幕与翻译，支持会议内多端字幕同步。
• 信令体系封装： 基于 WebSocket + Protobuf 设计高效信令协议，实现会议状态、成员管理、协作指令（标注/控制）实时同步，优化数据体积与传输性能，提升弱网环境稳定性。
• 统一 RTC SDK 抽象层（核心亮点）： 设计并实现统一 RTC SDK，对接声网/腾讯云/云屋等多家音视频能力。对上提供一致 API（入会、推流、拉流、设备管理），屏蔽底层差异，支持多 SDK 动态切换与降级策略，显著降低业务层耦合度。
• 多端协同： 支持 Web 与 AR 眼镜端实时互动（音视频 + 标注协同），实现远程画面标注、指令同步，增强远程指导效果。

实现跨语言实时沟通 | 沉淀统一 RTC 抽象模型，具备多厂商 SDK 接入与替换能力

前端工程化性能重构（Vue2 → Rspack 迁移）    万辰集团

针对遗留 Vue2 + Vue CLI（Webpack）项目构建性能瓶颈（热更新 30s+、全量构建 2min+），主导工程化体系重构。

• 构建体系重构： 主导从 Webpack（Vue CLI）向 Rspack 迁移，基于 Rust 高性能编译能力搭建新一代构建体系，对构建流程进行模块化拆分，提升可维护性与可扩展性。
• 编译性能深度优化： 分析 Webpack 构建瓶颈（Loader 串行执行、依赖图过大等），精简 Loader/Plugin 执行链路，引入持久化缓存 + 增量编译，优化依赖解析与模块构建策略。
• HMR 热更新重构： 优化模块更新粒度，控制更新边界与依赖传播路径，减少无效刷新，将热更新从"秒级阻塞"优化为"接近实时响应"。
• 复杂遗留项目兼容治理： 系统性解决 Vue2 生态与 Rspack 在 Loader/Plugin 层的兼容问题，处理历史遗留依赖（polyfill、alias、全局注入等），建立兼容适配层保障业务零侵入迁移。
• 工程化沉淀： 抽象通用构建配置与迁移方案，形成可复用工程模板，输出 Vue2 → Rspack 迁移方法论与最佳实践，支持多项目复制落地。

HMR 30s+ → <1s（30x+） | 全量构建 2min+ → ~10s（10x+） | 可复用迁移方案沉淀

好想来新零帮 WEB 组件库（负责人）    https://xlb-component.xlbsoft.com/

基于公司 UI 统一规范采用 React18 + TypeScript 构建组件库 @xlb/components，涵盖基础组件、低代码组件（动态表单生成器、可视化编排面板、拖拽组件、高性能表格）、业务组件（与 CRM/ERP 等子系统深度集成），阿里 CI/CD 自动化发布至私有 NPM，jest 单元测试。

React 18 · TypeScript · Dumi · jest · AgGrid · rc-form

• 文档与体验： 使用 dumi 搭建组件文档和交互示例，提供清晰 API 文档、使用说明及 demo，方便团队快速上手。
• 控制反转设计： 使用 rc-form 的控制反转思想规范前端页面开发，极大减少页面代码量。npm link 支持业务项目与组件库联合调试。
• 核心组件： 基于 AgGrid 的高性能表格（全键盘操作）、拖拽计算组件、控制反转低代码后台配置、多端图表组件等。

组件库被 15+ 业务线（ERP/POS/WMS/CRM 等）采用，成为公司前端 UI 标准

微前端项目设计与实践部署（负责人/设计者）    万辰集团

公司所有业务线写在一个 Webpack4 项目中，页面膨胀、样式冲突严重，调研后采用 WebComponent 架构的 wujie 进行子应用拆分。

• 架构设计： 主导 wujie 微前端架构，提供 umi4 / vite 双模板供业务线选择，构建统一基座应用，实现多个子应用无缝集成与独立部署，天然支持样式隔离。
• 通信与性能： 设计 @xlb/micro 应用间通信工具，解决跨应用数据共享和状态同步。优化 wujie 沙箱预加载策略（权限分帧加载前两个，空闲加载其余），首屏加载 -40%。
• 缓存优化： 设计应用页面级 KeepAlive 缓存方案，二次访问加载速度 +100%。阿里 OSS 静态资源 + 哈希文件名 + Cache-Control 策略。
• 团队赋能： 编写完善的微前端架构文档和快速接入指南，各业务线可自主接入；组织全前端技术分享会。

15+ 子应用独立开发部署，大幅提升产品迭代速度

好想来品牌会员小程序    万辰集团

集团成立研发中心前由外部团队开发的遗留小程序，针对合同到期、功能维护难等问题进行自主开发。

Taro · NestJS · 微信/支付宝多端

• 多端开发： 基于 Taro 开发微信 + 支付宝多端小程序，开发高兼容性高性能组件（列表、表格），新增积分商城、会员成长体系等核心功能。
• 全栈能力： 后台框架使用 NestJS，开发线上线下订单、个人信息接口。
• 区域化方案： 实现华东/华南/华北全国区域成功上线，针对不同地区动态展示活动页面。

区域化上线 1万+ 门店，日均 UV 13万+

好想来加盟商 CRM 及品牌加盟小程序（Web 端负责人）    万辰集团

• 可视化拖拽系统： 开发拖拽组件系统，非技术人员通过拖拽表单、图片、轮播图、可选块容器等组件快速配置小程序页面。覆盖"页面搭建 → 客户留资 → 跟进转化"全流程。
• 客户管理后台： 使用统一组件库重构基座应用页面至加盟商管理子项目，独立发布部署，极大降低系统维护成本。

降低招商页面开发成本约 60%，覆盖 500+ 加盟商，助力招商团队季度业绩超额完成

MAAT 投资组合管理系统    https://inst.htsc.com/promote/    金证股份

30+ 人工程团队，负责 Web 研发设计、Wiki 文档编写、CodeReview。

React 16.14 · Umi 3 · Ant Design 4

• 组件库封装： 编写项目风格的低代码组件，含 UI 组件（标题/弹窗/日历/表格）和证券业务组件（产品/组合/股票/交易市场/持仓/资金等），所有表单需求传入配置对象即可生成，统一项目开发标准。
• 项目升级改造： 主导 React 16.6 → 16.14 + AntD 3 → 4 升级，编写 Wiki 升级文档。完成 UNSAFE 生命周期改造及 Form 重构，减少类模板代码，降低 10%-15% 内存消耗，为 React 18+ 铺路。
• Excel 工具： 基于 sheetjs 封装 Excel 导出/解析工具（所见即所得），为 table-xlsx 开源库贡献 PR。

INCOS 资产托管与运营服务平台    https://inst.htsc.com/incos/    金证股份

40+ 人工程团队，负责 Web / H5 研发与 CodeReview。

React 16.8.6 · Ant Design 3 · 微前端 bigbox-react

• 文档规范： 引入 Prop-type 标注类型及注释，编写技术方案文档并组内分享交流。
• 主题换肤： 调研落地 themes-switch 方案，统一基础色定义 + 动态切换打包后的颜色 CSS。
• 工程化推行： 接入 ESLint + Prettier + CommitLint 规范提交流程。

个人描述

• 教育：池州学院 · 计算机科学与技术 · 本科（2017 - 2021）
• 爱好：达芬奇调色、剪辑、Bilibili 创作