• Vue技术栈(Vue3/2、Vuex、Vue-Router、Vite等)
• React技术栈(React、Redux、 Zustand、React-Router等)
• TypeScript
• UniApp, Taro,微信原生小程序
• Pre-CSS: Sass,Less,Tailwind CSS
• 图表类: ECharts
• SSR: Next.js,Nuxt.js
科探实时数据监控系统
技术栈: React18、Vite、ECharts、SocketJS 项目职责:
• 基于ECharts的柱状、折线、雷达图等图表,展示探索奖各领域获奖人数量,年龄分布,高校占比,历年获奖人数等信 息。
• 对自定义图表进行二次样式开发,定制各图表UI和交互效果,并适配大屏显示器,提升用户体验。
• 接入WebSocket实现图表实时更新,并将各状态更新函数封装为哈希表,根据Action区分各图表更新逻辑。
• 实现WebSocket心跳机制,确保连接稳定性,节省服务器资源。
• 解决ECharts的UI兼容性问题,优化图表渲染性能。
HJ视听中心后台
项目介绍: 是HJ直播内容实时沉淀,视频图文聚合的“乐高式”搭建内容聚合系统。分为视听中心配置后台与视听中心H5。配置后台实现了轮播、导航、公告、直播间、视频、产品卡片,文件等页面配置组件,且能够实时预览配置组件后的 页面效果。可生成视听中心H5,查看配置好的H5页面。
技术栈: Vue2.6、Vue-Router、Vuex3、Element-UI、ECharts、video.js、vue-cropper
项目职责:
• 负责项目工作台、模板中心、素材库、组织架构管理等模块的开发,解决实际业务场景问题和日常Bug。
• 封装getVideoFrame组件,获取视频第一帧图片并通过鉴黄API检测,并最终上传到腾讯云COS,增加了组内的开发效
率。
• 封装SVG组件,并将icon文件转移到iconfont,改善了以往使用静态图片导致包体积增大,命名不规范,跨组ICON使
用重复等问题。
• 二次封装了图片剪裁工具vue-cropper,并定制其UI符合公司设计规范,并保留用户历史选取记录。
• 使用Mediainfo.js获取视频文件的Format Profile与Format Level,针对需要高解码器性能强度的视频打上转码标签,
交由后端转码。
• 使用crypto.js对敏感API数据做加密处理。
本人实现的仿Notion的笔记知识类工具,能够快速创建笔记并预览,支持笔记公开分享与多层级创建,全局搜索等。
动态ECharts的柱状、折线、雷达图等图表等的大屏监控系统等 。