熟练使用 Html5、Css3 、sass 、less页面布局,能够根据 UI 设计图实现网页效果;
熟练掌握 vue、 React 、hooks、antd、typescript、ice、fusion等。具备从零到一搭建 React 中台的能力;阅读过部分源码,理解 一定底层原理。
熟悉JavaScript、熟悉 ES6,基础扎实;
熟练掌握Vite、Webpack等打包工具的基础配置。将第三方库统一打包amd,后续不需要重复打包等;
熟练使用git。
Ai Studio
项目描述:一个基于ai模型提供ai服务的平台。包括Explore(Ai studio 首页)、idealTalk页面可与模型、应用对话、查看对话记录等。Workspace页面上传文件到知识库,创建ideas应用等。
技术栈 :react+hooks+typescript+sass+ice
主要工作:
职责:完成产品需求包括ideaTalk侧边栏改版、隐私模式、Workspace中知识库、ideas创建等优化改版。已经一些日常的维护。
无痕模式:支持用户开启无痕模式后前端不保存对话的相关信息、包括问答、文件等,前端主要负责全局的调整、模型问答的数据拼接、已经涉及文件的问答处理。
ideaTalk侧边栏改版:原侧边栏无论是ui还是功能及展示信息都已经不满足用户和产品需求。重构侧边栏的代码,优化侧边栏展开收起和菜单栏展开收起的动画、和其他的一些业务需求。改变后的侧边栏前端交互明显得到了改善。
ideaTalk文件上传:用户在与模型对话时可上传给模型。前端负责文件上传逻辑,判断文件上传状态和一次问答多次上传文件删除文件操作的处理与兜底,并且在隐私模式前端需要将文件内容拼接成特色格式传给后端。
workspace页面中的ideas、工具等模块因为业务需求和ui更改。将ideas创建时可选的工具、知识库等模块样式和交互同一进行了修改。前端主要工作是封装组件使各个模块的样式和交互同一并且保证给后端的数据不变。
蜂鸟实时视频分析系统
项目描述:通过视频分析实现安全掌控,有全域检索、摄像头管理等多个模块。
技术栈 :react+hooks+typescript+sass+webpack+react-router
主要工作:
职责:
全域检索、预案等页面开发,封装树组件。
地图摄像头点位聚合、围栏、框选等;
单点登录。
umi-request封装、请求拦截、响应对返回状态的统一处理。
原grpc-web接口ts类型缺失,编译.proto文件导出对应的ts类型,减少接口类型定义时间。
构建
将第三方包如react、lodash、dayjs等打包为amd格式,减少构建时间。
将包管理工具又yarn换成pnpm提高安全性。
使用.npmrc文件配置npm私服包源,解决私服无法下载其它包问题。
完成前端脚手架。
使用pnpm搭建monorepo项目。分为两个子项目,分别封装webpack、vite通用配置如路径别名等。
利用cac包配置命令行参数,包括设置 被合并的外部配置文件名、host、port、是否移除console、开启性能分析、esbuild压缩等选项。
读取外部文件,并合并到当前配置,根据外部配置文件返回值决定使用合并方式。
配置css module,解决类名冲突。减少使用自定义类名命名空间带来的开发工作量。优化css module类名。
添加前端项目模板,集成项目配置,为团队成员提供高效的开发起点,节约项目开发时间。
优化
减少相同接口重复发送;针对context导致的渲染问题使用useMemo缓存组件jsx,减少刷新次数;
记录树组件当前展开节点,只对展开节点进行计算,减少计算量;
webapck优化、组件大小优 化、缓存、懒加载、空闲时间加载等、防抖、节流、骨架屏...