About Me
Experience
Frontend Engineer
某公司 - - Now
职位: Frontend Engineer | 项目: 项目名称：某某平台\n项目简介：大学监控室，通过每个教室的主屏及两个小组屏，可实现对老师线下授课进行巡课督导、日常巡检、巡课直播、巡课录播等多个巡检功能。在对巡视课程进行在线打分时可根据实际情况评为高分课堂、推荐课堂等。课程完成后，学生可通过系统自动生成的线上评价表，给任教老师及所授课程进行线上评价打分。\n技术栈：React、Tailwind、Zustand、Umi/Max、Antd Pro、Antd Pro Components、Ahooks、XgPlayer、WebStorageCache、Api-refs、Mpegts.js\n1.主导系统项目的从0到1建设，成功实现了平台的快速上线和平稳运行。\t\n2.使用Api-refs 插件，从 apifox软件自动生成 TS 类型接口文件到项目对应文件夹，提高开发效率，约束类型。\n3.全局使用 Zustand 来实现全局数据管理、数据持久化防止刷新丢失。\n4.核心模块巡课直播模块，实现使用Mpegts.js 实现三个视频流直播，动态进度条，一键点击进度条或切换录播。\n5.核心模块巡课录播模块，使用视频播放器完成录播播放，视频最后一个片段播放完成，展示对应播放完成状态。点击进度条任意位置，播放对应时间点录播。\n6.评课模块，给予评价表线上打分，不能超过总分限制， 对应大纲限制分数，输入后会有对应校验提醒等功能；\n\n\n项目名称：某某平台\n项目简介：主要服务于国内大学院校，配合智慧教学终端APP, 给智慧教学 app 提供用户登录、教室信号管控、实时画面等数据支撑，学校内部权限、部门、人员、权限、智能盒子管理、动态设备链接管理、教室设备管控、教师资料、卡片管理等。\n技术栈：React、Tailwind、Zustand、Umi/Max、Antd Pro、Antd Pro Components、Ahooks、Jsplumb、XgPlayer、WebStorageCache、Api-refs、Mpegts.js、xyflow/react\n1．主导系统项目的从0到1建设，成功实现了平台的快速上线和平稳运行。\n2．使用Api-refs 插件，从 apifox软件自动生成 TS 类型接口文件到项目对应文件夹，提高开发效率，约束类型。\n3．全局使用 Zustand 来实现数据传递、数据持久化防止刷新丢失。\n4．使用Jsplumb实现每间教室下，多个设备与多个盒子、以及音频、视频设备的链接，可展示所有正常链接、异常链接，以及异常信息报错提示等功能。\n5．实现多路视频直播流顺畅播放，全屏播放当前视频的4k 流，退出全屏播放720p 普清流。\n6．监控大屏支持直播同时播放无限制数量实时直播，使用Mpegts.js 实现。\n7．盒子版本管理模块，分片上传版本、可对盒子进行批量升级和单个盒子升级。\n8．教师资料模块，人脸录入识别、刷卡录入、微信扫码绑定来实现个人在智慧终端的多种登录方式。\n9．教室实时画面使用封装的 Xgplayer 进行flv 实时直播画面的播放，解决卡顿问题\n10．教室设备连接使用 xyflow 实现当前教室所有智能设备可视化连接，可新增、修改、删除、实时修改位置等功能操作。\n\n项目名称：某某终端 APP\n项目简介：教室讲台会有一台安卓系统终端 Pad, 上课后会自动打开智慧教学 APP，老师可以通过APP 实现登录、普通教学、智慧教学、连接多个教室实时宣讲、以及一个教室管控多个教室实时画面信号源切换和实时通话等；从而解决目前该行业，pad 只能用来上下课的行业解决方案，目前该方案已在多个一本、二本、大专院校落地实施运行。\n技术栈：React、Tailwind、Zustand、Umi4、Antd mobile、Ahooks、WebStorageCache、Api-refs、Vconsole、Postcss-Pxtorem、websocket\n1.主导系统项目的从0到1建设，成功实现了平台的快速上线和平稳运行。\n2.使用 postcss-pxtorem, 基于UI 实现自适应布局.\n3.信号拖拽功功能：功能区域有截图、教室信号区域、电脑画面信号区域、分屏区域（包含六个分屏模式切换），四个区域拖拽实时信号切换，数据同步；\n4.全局数据实时同步使用全局封装的原生websocket，心跳检测、断开自动重连、根据信 息类型，下发信息，所有模块根据下发信息进行实时画面、实时数据同步、以及登录状 \t\t 态、多端的实时路由地址的同步等.\n5.全局所有拖拽功能兼容 PC端，在管理平台以 iframe 形式、希沃多媒体电视会以桌面悬浮球形式，提供给老师使用。\n6.项目始终在内网环境运行，网络请求从刚开始的react-query 更换为 axios/useRequest、 断网环境下react-query不会\t继续发起请求。\n7.多端同步功能，根据 websokets实时下发的路由和数据，从而一端操作，在 pc端和电视端，或多个教室都会实时加载相同页面和功能数据.\n\n项目名称某某后台管理系统（PC端）\n项目简介： 基于Vue + Element ui + Typescript构建的运营后台管理网站，给某某app提供数据服务，对版本管理进行控制，实时上下线运营的活动H5、轮播图等。\n技术栈：Vue3、Typescript、Vuex、VueRouter、ElementUI、Axios、Echarts、Websocket、Lodash、MathJS、Sentry、Wangeditor、Captcha-mini\n个人职责： \n1. 从0搭建项目环境，并配置 CI/CD自动化测试和发布、Sentry 前端线上监控。\n2. 使用Vue、Vuex、Typescript、ElementUI、三方库完成UI和逻辑\n3. 基于Vue-router的addRoutes配合Vuex以及封装权限组件，完成角色权限功能\n4. 封装公用分页组件、上传组件、以及按钮权限组件、防抖和节流功能JS等提供给系统全局使用\n5. 使用CDN地址配合webpack打包Vue-router、Vuex、ElementUI等三方库的引入，减少打包体积\n6. 使用axios进行网络请求，基于axios进行网络请求拦截和响应封装，并全局封装post、get请求\n7. 使用webpack打包优化生成gzip文件，配合服务器开启Nginx的Gzip的功能，后台系统加载速度优化80%\n8. 使用Typescript进行类型检测和语法、实现Class方式继承组件和特殊化需求开发\n9. 使用Husky、lint-staged配合eslint，来触发Git Hook钩子实现提交代码的文件扫描、语法检测，提高了代码质量和团队效率，减少代码错误和冲突。\n10. 使用ES6、ES7中的 async + await 解决请求异步问题、解构赋值、Class等\n11. 使用Math.js 封装后，解决金额转换中的浮点数问题
