Lyang

计算机科学与技术

2017年09月 — 2021年06月

2022年05月 — 2023年07月

- 技术栈： React + Next + Mobx + Style-Component / TailwindCSS / Mantine - 访问地址： https://www.gate.com/zh/competition/f1rb/s2 - 该项目是 Gate 与 F1 红牛车队合作的落地页项目，面向全球 40+ 国家及地区，参赛人数累计超8W，用户规模超 20 万，主要玩法涵盖完成相应任务瓜分总奖池。项目属于高度定制化UI，需根据不同场景对 Web、HD、H5、App 进行适配，与其他团队配合，把控进度从而上线 总结：该项目UI风格较其他赛事差异较大，需对都语言的部分进行更细致的适配，对于人员进度也需要更紧密的协调与配合

2024年01月 — 2025年08月

- 技术栈： React + Next + Mobx + Style-Component / TailwindCSS / Mantine - 访问地址： WCTC: https://www.gate.com/zh/competition/wctc/s7 F1红牛巡回赛： https://www.gate.com/zh/competition/f1rb/s2 合约模拟盘：https://www.gate.com/zh/competition/simulation - 该项目面向全球 40+ 国家及地区，支持 14 种语言适配，用户规模 超 10 万，主要玩法涵盖 红包雨、团队赛、个人 PK 赛。项目对交互体验、性能优化及全球化适配提出了高标准要求，涉及从组件封装到状态管理的全链路开发工作。 - 赛事活动的 UI 及交互逻辑均为定制化需求，需要从零构建 一套完整的组件体系。设计并封装多个基础组件，如按钮、多层级弹窗、排行榜、进度条、倒计时、版距等，确保其可复用性、可拓展性，并适配不同赛事需求。 - 对红包雨的不同用户路径，封装游客模式、正常模式、游客跳转正常模式，确保逻辑清晰，减少维护成本，提升可拓展性。优化红包领取流程，确保用户交互顺畅，并减少因网络延迟导致的异常情况，提高领奖成功率。采用懒加载与资源预加载策略，降低初始加载时间，提高用户进入活动的体验流畅度。 - 赛事活动对动效有较高要求，用于 UI 交互较多的动态组件，使用 Lottie 实现提升视觉体验。对于赛事开场动画使用 Pag 动画，确保性能优化，减少 CPU/GPU 负载。 - 个人 PK 赛涉及多种状态流转，需确保 前端与后端状态的精准同步，避免 UI 与实际比赛状态不匹配的问题。设计状态机管理方案，确保不同阶段（如 匹配中、对战中、结果结算）的状态切换稳定，并能准确响应服务器的状态更新。 总结：该项目属于国际化的项目，需要对于不同的语种、主题进行适配，对组件的封装和项目进度管理有更高的要求

2022年07月 — 2023年09月

- 技术栈：React + Redux + Next + Sass + RxJS - 访问地址：https://pingcode.com/ - 该项目是 Pingcode 的官网介绍页，主要部分通过服务端渲染，结合组件内部的公共组件去实现对 PingCode 及子产品的介绍； - 主要负责 5.0 版本 AI 智能化部分的升级改造，对该模块以及子产品从属部分进行实现，确保高保真实现设计稿； 滚动位置使用 RxJS 事件实时监听滚动条的位置，通过渐入动画绑定滚动条位置实现指定位置触发动画的功能，最终将这部分抽象为 useScroll、useScrollY、useScrollPosition 等 Hook，并替换重复逻辑，使用 Scss 规范样式代码去兼容多种浏览器； - 响应式实现官网，整体使用栅格布局，官网中大部分通过弹性盒子去确保能够精确的兼容各种设备，而菜单或者少部分定制化内容，通过媒体查询自定义样式文件，从而移动端的正确展示； 总结：官网是一个公司的门面，需要兼容各个浏览器的各个版本，对于不同的差异需要做相应的取舍。

2022年07月 — 2023年09月

- 技术栈：Angular + RxJS + Ngx-tethys (开源组件库) + Ngx-styx (业务组件库) + Ngx-planet (开源微前端) - 该应用是基于微前端服务构建，通过基座 Portal 与子产品协作空间进行链接。负责 Teams 产品侧的研发工作，包括 OKR 目标、团队管理、勋章管理、工单管理、渠道管理等。 - 重构协作空间关于目标模块的所有代码及交互，将 OKR 的单条交互更改为批量进行 KR 的新增，对其中的竞态问题进行梳理并向上抽象，对所有涉及到 OKR 列表的状态应用 Dispatcher 及 Store 进行统一管理，确保组件树始终向下传递；与服务端配合，通过实体与引用到前端逻辑层，对 Store 进行预填充，在使用体验上会优先前端体验并及时与服务端交互，做到无感更新。 - 捕捉及优化 OKR 联动输入卡顿问题，由之上的状态管理后对其卡顿点进行插入测试，分析问题来源，对影响的代码段依次 Debug，找到问题由于竞争态的联动问题以及表格滚动滚动时的性能问题，对其进行依次修复。对详情页与列表页实时联动，优化上一条下一条性能并封装逻辑适配多种列表，封装评论组件并应用于讨论详情页，原生书写日历热力图组件到团队动态等，并成功交付上线。 总结：对用户故事做到高质量的交付，对用户体验有极致的追求，该软件需要在各个环境下保持兼容，细节决定成败；对接入测的功能需要做到细致与全面，对文档的编写应简洁完整清晰。

2021年07月 — 2022年06月

- 技术栈：React + Rematch + Antd + qiankun (微前端) - 这是一个服务于法院的 B 端系统，该项目包括四个子系统 (诉讼、调解、证据、权限)，通过哈雷 (微前端框架，底层基于 qiankun ) 基座进行组合，权限系统维护全局的各个角色、身份，并为其校验。 - 主要负责业务方需求研发，把控从需求评审、设计评审、用例评审到提测预演的各个阶段；对开发成本较高的可视化图表及 Table 进行二次封装，抽象公共属性及预留弹性配置空间，最终沉淀为低代码可视化物料； - 对阻塞性流程进行向上抽象并沉淀 crayon-pack 工具；持续优化用户体验，解决其中监控大屏适配展示的问题；应用墨子平台结合 HTTP-DNS，分析及跟进问题，降本40%以上。 - 对整体样式进行业务定制，复写 Antd 的基础 Less 样式文件，达到 UI 统一的目的，项目中使用 Less 及 Scss。 总结：理解业务研发，擅长进行多方协作，理解基础公共对于业务的局限性以及底层的重要性。

2020年03月 — 2022年03月

- 技术栈：React + Rematch + Antd + SchemaForm + qiankun (微前端) - 该平台是服务于业务系统的可视化搭建平台，包含低代码、无代码、物料、物料工具链、HTTP-DNS、Mozi 投放链路等部分，用户可以根据业务需求在编辑器进行拖拽配置即可快速搭建业务系统，并提供 Low-code 接入能力，确保敏捷高效完成迭代。 - 主要负责前端需求迭代，包括应用复制、单页面发布、全局搜索等需求开发，后期优化墨子物料及其配套开发工具链，其中使用数据视图分离的开发范式，并通过了所有测试用例以及代码评审，完善文档并成功服务于3条业务线。 总结：向上看齐，不仅仅服务于用户，更赋能与开发者，理解工具给业务带来的价值。