个人总结
6 年前端开发经验,持续参与并主导核心业务系统交付。擅长 React +
TypeScript + React Router 技术栈,在 AI Agent 交互界面、复杂中后台系统和国际化站点建设等方向有丰富实践。项目中不仅关注功能交付,也关注复杂业务流程梳理、性能与可维护性优化以及业务效率提升,能够独立承担方案设计、核心开发、联调上线与持续迭代。
专业技能
React
TypeScript
React Router
AI SDK
Node.js
Ice.js
Zustand
Module Federation
SCSS / CSS Modules
Fusion Design
Ant Design
性能优化
埋点体系
项目经历
React Router v7
React 19
RSC
Tailwind CSS
G2
AI SDK
国际化
-
从 0 到 1 搭建官网与用户控制台一体化应用,解决品牌展示、用户转化和后台使用割裂的问题,覆盖品牌介绍、模型说明、在线咨询、充值支付与用户后台等完整链路。
-
设计基于 URL 的中英文路由方案,统一处理 `/en` 前缀、语言切换、首访重定向及 canonical / alternate 输出,解决国际化站点常见的路由混乱和 SEO 收录问题。
-
负责 API Key 管理、用量日志、趋势分析、充值支付、支付记录和模型管理等核心模块,帮助用户完成接入、使用、计费和运维的闭环;同时通过服务层封装降低页面与接口耦合,便于后续扩展。
-
使用 G2 构建用量趋势和模型明细图表,解决用户难以直观看到调用与费用变化的问题;补充 robots、sitemap、结构化数据与 Open Graph 元信息,完善 SEO 基建和对外传播能力。
React Router v7
React 19
SSR
G2
Ant Design
Zustand
CodeMirror
ExcelJS
国际化
-
从 0 到 1 搭建 AI 平台管理后台,覆盖登录鉴权、分析看板、请求日志、审计日志、用户管理、账单告警、模型集成、AI Router 和插件管理等复杂模块,支撑平台运营和内部管理。
-
基于 React Router 组织多级路由与权限边界,结合通用布局、全局状态与接口层封装,解决复杂菜单和多角色后台容易失控的问题,提升系统可维护性与扩展性。
-
使用 Ant Design、CodeMirror、G2 等能力搭建表格、表单、代码配置与图表分析场景,解决配置编辑、日志排查和模型路由策略管理等高复杂度操作场景的交互问题。
-
实现账单导出、价格配置、告警配置等运营能力,并支持按模型、用户、状态码等维度聚合分析,帮助运营和技术团队快速定位问题并提升管理效率。
Docusaurus
React
TypeScript
本地搜索
中英文文档
-
基于 Docusaurus 搭建产品文档站,系统沉淀快速开始、模型能力、模型管理与第三方工具集成等内容,解决 AI 平台对外说明分散、开发者接入门槛高的问题。
-
维护中英文双语文档路由映射与页面结构,覆盖推理、流式响应、图像理解、图片生成、PDF、函数调用等能力说明,支撑海外与国内用户统一获取产品信息。
-
集成本地搜索和多语言文档产出能力,解决文档检索效率低和版本维护成本高的问题,提升开发者查阅效率与内容交付效率。
React
Ant Design
Konva.js
Zustand
Ice.js
Module Federation
-
参与智能图片生成与素材编辑平台前端建设,围绕 AI 问答、图片生成、格式转换、批注等核心能力完成页面交互与功能串联,支撑创意生产链路在线化。
-
负责编辑器相关页面与业务组件开发,处理图层、画布、操作面板、素材配置等复杂交互,解决编辑器场景下操作路径长、交互复杂的问题,提升工具可用性与操作效率。
-
与算法、后端及产品协作推进生成式能力接入,打通生成、编辑和导出流程,推动业务在创意生产、内容编辑与素材处理方向落地。
React
TypeScript
Ice.js
Module Federation
Fusion Design
@dnd-kit
-
负责面向淘宝服务商生态的 B2B 商家服务管理平台建设,覆盖服务发布、订单履约、结算财务、资质认证、内容案例库等全生命周期管理,承接 15 个核心模块。
-
采用 Module Federation 微前端方案实现模块独立开发与部署,解决多人并行开发和大体量系统持续迭代带来的协作成本问题;通过 24+ 条路由的 lazy() 动态导入完成代码分割,降低首屏加载体积。
-
封装统一的 MTOP 协议通信层,实现 API 版本管理与多环境自动切换,解决接口调用规范不统一和环境切换成本高的问题,提升稳定性与可维护性。
-
开发资质认证多步骤引导流程,集成 SOP 表单引擎与自定义 Schema,解决复杂表单动态渲染和校验问题,提升认证流程的可配置性与交付效率。
-
实现 16 个子模块的自营结算体系与税务报送能力,覆盖采购单管理、账单统计、多维查询、Excel 导出、图片裁剪和拖拽排序等复杂交互,支撑财务结算和税务报送等关键业务闭环。
React
TypeScript
Swiper
ICE Stark
Module Federation
ColorThief
-
负责淘宝主营与服务市场相关核心页面建设,涵盖标准首页、服务商工作台首页、服务商导航与统一详情页等多类入口和转化场景,服务于商家导购、内容运营与购买决策链路。
-
首页方向沉淀优惠展示、精选服务推荐、品牌案例、解决方案等模块化运营能力,解决活动与运营内容频繁调整下的复用问题;同时封装基于全局曝光管理器的 useExposure Hook,支持 threshold 曝光检测与埋点优化,覆盖 75+ 处理点。
-
详情页方向建设统一微应用架构,单页面支持 9 种服务类型的差异化展示,解决服务类型多、页面实现分散的问题,使用 PageContext + PageType 枚举驱动条件渲染,一套代码适配多业务类型的 UI 与数据流。
-
实现智能色彩适配、案例浏览组件与跨平台环境兼容,处理 ColorThief 主色提取、轮播懒加载、固定定位与路由差异等问题,提升详情页视觉一致性、信息表达能力和多端稳定性。
React
TypeScript
Ice.js
Fusion Design
MT2
-
负责千牛商家工作台服务市场 Tab 改版,承接服务卡片、智能服务、运营服务和商家工具等核心页面,提升推荐、搜索、导购与订阅续费链路。
-
实现 MT2 配置驱动的动态页面渲染方案,支持预发/正式环境双数据源切换与运营内容热更新,解决运营内容频繁变更依赖前端发版的问题。
-
封装高性能 useExposure Hook,基于全局 IntersectionObserver 管理器实现按 threshold 分组复用,支持 once 模式一次性曝光检测,解决多页面埋点逻辑重复和性能损耗问题,覆盖 75+ 处理点。
-
开发“我的工具”模块并通过 RemoteModule 动态加载远程模块,聚合 20+ 个 MTOP API,实现工具管理、评价提交、优惠券领取和续费提醒等完整闭环,提升商家使用与续费效率。