昵称登录后显示

网龙网络控股有限公司 · 软件开发工程师（前端）· 厦门 · 2018.09 – 2025.05
Promethean World 海外 K-12 教育科技业务 · 2019.01 – 2025.05
Promethean World 是面向海外 K-12 学校与学区的教育科技公司，主营交互显示设备、教学软件及 SaaS 相关服务，覆盖 126 个国家、200 多万间教室。我主要深耕其中面向学校 / 学区管理与课堂教学支持的 SaaS 产品体系。项目早期，各业务应用以相对独立的产品形态推进，登录鉴权、组织上下文、通用 UI 与业务组件更多在业务交付中逐步沉淀；后续逐步演化为统一门户、中心化权限、设计系统与统一身份认证平台等平台化能力。

One Promethean 统一门户：多业务应用统一入口与微前端主门户
• 基于 Module Federation 模块联邦与 React Router 搭建微前端主门户，将原本分散的业务系统收敛到统一入口；支持业务子应用按路由按需加载，并为远程应用提供路由级错误兜底，提升门户整体稳定性
• 在门户主壳统一处理登录态、组织上下文、应用入口可见性、路由拦截、无权限回退和跨应用跳转，支撑不同组织、不同权限用户在统一入口下访问对应业务应用
• 交付个人中心模块，覆盖个人资料维护、安全配置、设备登录管理、云盘连接管理、面板偏好设置等账户核心能力，并接入全局状态、错误处理、埋点和多语言体系；沉淀为组件库，并适配 Promethean App 移动端场景
• 实现组织创建申请流程，打通门户端申请提交与客服运营后台审核链路，形成从用户自助申请到后台处理的业务闭环

Embers Design System：Promethean 企业级设计系统与 React 组件库
• 参与建设企业级设计系统，沉淀 50+ React/TypeScript 组件与页面模板，基于 MUI v5、Emotion、设计 Token 封装统一主题、组件 API、状态样式与响应式规范，支撑多产品线一致复用
• 将 WCAG 2.1 AA 合规要求组件化，完善键盘导航、ARIA 语义、焦点管理、aria-live 屏幕阅读器反馈与 RTL/国际化适配，并结合第三方审计整改，满足美国教育客户采购准入要求
• 建立组件库工程化交付体系，支持 ESM/CJS 类型产物、企业私有 npm 发布、SemVer/Changelog 管理、Storybook 文档与交互测试、axe-playwright 可访问性扫描、Chromatic 视觉回归，降低下游团队接入、升级与回归验证成本

OIDC 统一身份认证平台：Promethean 全产品体系统一登录与账号流程平台
• 在既有后端能力和约束的基础上，使用 Embers 设计系统构建与全产品体系一致体验的 React 多页应用，并通过 Webpack 在编译阶段将对应资源引用写入 EJS 模板，实现 React 页面与 Koa + EJS 渲染流程的对接
• 负责登录、注册、账号确认、密码重置、协议确认、账号匿名化等核心账号与身份相关场景的前端页面开发，完成页面渲染、表单交互与校验、异常处理，以及与中间层接口的页面流程联调，保障相关场景稳定运行
• 基于 Koa Router 开发 Node.js 中间层，负责账号与身份相关流程中的页面跳转、数据流转与异常处理，承接前端页面与下游微服务间的交互

Organization Support 组织管理后台：Promethean 内部多租户管理、客服排障与运营支持平台
• 负责组织/租户生命周期管理，覆盖组织查询、新建、维护、归档恢复、域名归属、管理员及第三方集成配置
• 建设组织创建申请审批功能，支持申请编辑、状态标记、审批/拒绝，处理域名冲突、组织重名、资料缺失等校验
• 开发 Masquerade 用户模拟排障能力，支持按组织选择用户、填写工单/备注、校验活跃会话，并记录会话日志与审计
• 构建 Panel Database 设备管理模块，实现序列号校验检索、设备入库、组织绑定/解绑、跨组织转移及设备信息维护
• 完善关键操作日志与回溯能力，支持全局/详情页日志、事件过滤、操作详情展示，覆盖组织、设备、集成与模拟会话
• 担任 Scrum Master，负责中美跨时区敏捷协作，推进需求澄清、任务拆解、进度同步、风险识别与交付协调

User Management 用户管理后台：面向学校 / 学区 IT 管理员的 SaaS 微前端用户治理平台
• 基于 React + TypeScript + Apollo GraphQL 开发组织用户管理微前端模块，支持用户检索筛选、分页排序、详情查看、RBAC 角色管理、账号启用/停用、组织成员移除及活动审计等核心管理流程
• 实现批量用户治理流程，支持 CSV 导入、前端格式校验/去重/预览编辑、预签名 URL 上传、异步 Job 创建/提交/取消、状态轮询及部分失败结果反馈，覆盖学校大规模账号初始化和日常批量运维场景
• 完善用户活动审计与可观测体验，支持按管理员、事件类型、时间范围检索审计记录，并处理批量操作、失败/部分失败、多语言文案和埋点统计等复杂前端状态

课堂互动应用：面向教师与学生的教育场景应用
• Promethean App：主导既有 React + Cordova 移动应用重构，复用 Web 账号中心能力，并完成面板登录、屏幕共享、面板管理等核心模块改造，支撑应用上架至 App Store 与 Google Play
• Engagement Apps 课堂互动应用：接手既有 React + Ionic 应用，梳理技术债务；以子应用形式接入 ActivSuite（Electron 桌面应用），完成接入所需的数据链路改造与跨仓库构建产物接入

Figma-to-Code 设计转代码预研
• 基于 VS Code Copilot Chat Extension 搭建设计转代码 PoC，清洗 Figma API 返回数据，将内部组件库文档、组件 API 与生成约束注入上下文，验证从 Figma 设计稿到基于自研组件库页面代码生成的可行链路，为后续进一步工程化提供实践基础

其他项目 · 2018.09 – 2018.12
• 参与“福建省学前教育发展规划与质量监测体系”平台开发，负责地图 SDK 驱动的 GIS 可视化与 B 端交互实现

个人项目

Hugo B2B SaaS 产品体系：https://hugohzxu.github.io/hugo-saas-system/
• 基于过往企业级 SaaS 后台治理经验，从零搭建覆盖后端服务、跨框架设计系统、Web 管理控制台、Electron 桌面工具的完整 B2B SaaS 产品套件，配套 VitePress 文档站统一展示项目架构与技术细节
• 后端采用 NestJS + Koa + Prisma + SQLite 搭建多服务本地运行环境，服务于组织管理、用户管理、产品授权等主要应用，支撑认证、组织 / 用户治理、产品授权与审计日志等核心场景
• 设计系统 Hugo UI 同时提供 React + MUI + Emotion 与 Vue 3 + shadcn-vue + Tailwind v4 两套组件实现，结合 Design Tokens、Storybook 与版本管理机制，统一管理跨技术栈产品的视觉规范和组件复用
• React 管理控制台基于 Module Federation 微前端架构，包含壳层与组织管理、用户管理两个子应用，实现组织/租户、用户、角色、权限等核心治理能力
• Vue 产品授权控制台基于 Pinia + TanStack Query 构建，覆盖产品目录、席位分配、审计日志等能力
• Electron 桌面批量导入工具支持 CSV 校验、AntV G2 图表分析、结果导出，满足运营人员大规模授权数据批量处理场景

Design Contract MCP：https://github.com/HugoHZXu/design-contract-mcp
• 作为 Figma-to-Code 的后续工程化实践，读取 Figma 设计上下文与既有 Code Connect 组件映射，在自定义 Hugo UI 组件契约约束下为页面或组件生成提供上下文，并支持 stdio 与 Streamable HTTP 接入