翁焕佳

软件技术

2016年09月 — 2018年09月

2023年06月 — 2024年09月

Vue3 Pinia vue-router AI集成 Docker lodash ElementPlus 项目描述: 作为前端开发负责人,设计并开发文明底蕴开放平台。与后端协商并在项目中集成AI,实现自动生成相关数据 功能。做到与企业级演示软件管理平台软件进行互通,并利用Node进行业务效率提效,减少加班情况。 工作内容: 通过EditorConfig, Prettier, ESLint, Commitizen, Commitlint, husky制定统一代码规范,提高代码质量。 作为前端负责人,负责设计和实施了一套多功能的后台管理系统。这套系统不仅服务于单一项目,更为 公司提供了一套通用的、高效的后台管理平台开发解决方案。通过封装通用UI组件,前端团队能迅速开 发新的后台系统,并有效维护现有4+个管理系统。 对ElementPlus进行深度定制和封装,开发企业级UI组件库,灵活应用于多个后台管理系统,提升开发 和维护效率。 优化效果: 组件库和Node工具的使用使前端团队效率提升2倍,减少20%加班需求,降低项目开发成本。 通过AI集成,并进行用户反馈和行为分析不断优化用户界面和交互流程,用户满意度提升20%。 通过优化用户界面和个性化功能,显著提升用户参与度和用户粘性。 采用防抖节流优化搜索框和滚动监听,使用ElementPlus虚拟表格和懒加载技术进行表格优化,加快长 表格加载速度,优化页面卡顿效果。

2024年01月 — 2024年06月

Vue3 Uniapp Pinia WX-SDK 微信支付 微信授权 项目描述: 责设计和实现该系统的前端界面,确保用户体验直观流畅,方便用户学习和成长。 工作内容: 用Vue3/Uniapp构建高性能SPA,实现流畅用户体验和即时页面响应。 进行详尽的响应式设计和测试,确保在不同设备上页面的一致性和适配。 封装复用组件和内部Hooks工具库(如useAuth, useFormData, useDebounce),提升开发效率和代码 质量。 优化效果: 通过用户反馈和行为分析不断优化用户界面和交互流程,用户满意度提升20%。 通过优化前端性能和改进用户交互设计,首屏加载时间减少20%,用户操作响应时间优化30%。并增加 骨架屏效果,提升用户体验。 负责前端代码优化,实现懒加载和代码拆分, CDN、浏览器缓存策略等,减少加载时间和运行资源消 耗。

2022年10月 — 2023年10月

vue vuex vue-router html2canvas 导入导出 docxtemplater Element Plus Echarts 项目描述: 作为项目总负责人,设计并指导后端设计数据模型。利用Vue3等周边工具开发企业级演示软件管理平台。封 装通用UI组件,开发脚手架进行效能提升。 工作内容: 作为项目负责人,负责技术决策,包括选型、架构设计,确保按时高质量完成。 对ElementPlus进行深度定制和二次封装,开发企业级UI组件,灵活运用于后续多余基于Vue3的后台管 理系统,提升开发和维护效率。 开发基于配置的动态构建系统,通过多次版本的更新迭代,达到快速生成后台管理系统UI界面功能,包 括表格、查询、文件上传等,缩短开发周期,提高开发效率。 开发dvip CLI工具,支持命令行分步骤进行系统创建。单个系统创建、系统批量创建、数据导入、模板 生成等功能,大幅减少手动操作,缩短时间。 利用Node作为中间层,为业务功能进行提效,简化了前端的业务逻辑实现,并减少人工操作,提升企业 盈利可达3~4倍收入。 优化效果: 通过部署CLI工具和UI组件的封装,显著降低项目开发和维护成本,提升决策速度。 组件库和CLI工具的使用,使得开发效率提升多倍,并且减少加班需求,降低项目开发成本,减少人员调 配。 由原先的人工手动书写操作手册,每一份操作手册的编写大概需要一个小时到一个半小时之间。经过代 码编写以及优化后,形成系统自动生成操作手册,花费的时间只需要几分钟。 利用Node为业务功能进行提效,降低项目维护成本,提升业务产出量,提升人员收入,并减少加班需 求,减少招聘新员工的需求,为企业控制成本。

2022年11月 — 2023年06月

react18 webpack @reduxjs/tootik typescript next Echarts antd ahooks 项目描述: 那米低代码平台是一个为企业快速定制H5问卷调查/H5展示系统的前端开发平台。该平台通过预定义的组件, 使产品团队能够自主设计和部署应用,极大减少了开发和沟通成功。通过这种方式,企业能够在短时间为客户 提供定制化的应用,同时保持高度的灵活性和可扩展性。 工作内容: 制定严格的React代码规范和最佳实践,包括组件规范、数据请求统一管理,确保团队高效协作。 与设计师、产品经理及后端团队紧密合作,确保前端实现符合公司目标和用户需求。 封装复用组件和内部Hooks工具库(如useAuth, useFormData, useDebounce),提升开发效率和代码 质量。 设计灵活的组件库满足不同客户需求,适用于多种场景。确保页面直观易用,使非技术人员能够轻松操 作,快速生成页面,减低开发周期,提升开发效率。 组件存储数据结构设计,并指导后端设计相应的数据结构,按时高质量完成项目开发。 优化效果: 配置路由懒加载,优化代码体积,加快首屏渲染速度,将主包的大小从1.7M优化到34.1KB。 抽离公共代码,利用页面缓存,加快请求响应速度。 实施SSR(Next.js)优化SEO和页面加载速度,显著提升网站排名和访问速度。 封装上传组件,支持图片等资源统一上传到七牛云图床,并利用 CDN 加速,加快资源响应速度。 通过低代码平台,产品团队无需开发人员介入即可设计相关系统,减少开发时间和沟通成本50%。

2022年11月 — 2023年06月

vue3 vuex vue-router vite axios element-plus less qrcode.vue eslint 项目描述: 那米低代码平台是一个为企业快速定制H5问卷调查/H5展示系统的前端开发平台。该平台通过预定义的组件, 使产品团队能够自主设计和部署应用,极大减少了开发和沟通成功。通过这种方式,企业能够在短时间为客户 提供定制化的应用,同时保持高度的灵活性和可扩展性。 工作内容: 使用Vue3和ElementPlus构建可交互的用户界面。允许用户自定义页面布局和组件相关基础配置信息。 设计灵活的组件库满足不同客户需求,适用于多种场景。确保页面直观易用,使非技术人员能够轻松操 作,快速生成页面,减低开发周期,提升开发效率。 开发和维护系统核心功能的相关组件,如图片组件、富文本、单选/多选组件、城市选择组件等十多个通 用组件。并提高后续增加组件的灵活性与可扩展性做出相关设计。 组件存储数据结构设计,并指导后端设计相应的数据结构,按时高质量完成项目开发。 优化效果: 通过低代码平台,产品团队无需开发人员介入即可设计相关系统,减少开发时间和沟通成本50%。 通过可视化配置简化客户、产品和开发之间的沟通,减少需求误差和频繁变更。 配置路由懒加载,优化代码体积,加快首屏渲染速度。保持系统即使在复杂布局和大量组件的情况下也 能保持良好的性能和响应速度。 封装上传组件,支持图片等资源统一上传到七牛云图床,并利用 CDN 加速,加快资源响应速度。

2021年10月 — 2022年12月

uniapp websocket vuex 多端 uniCloud 项目描述: 作为前端开发负责人,负责项目的整体开发,把控进度。采用uniapp进行多端开发。实现一个集成用户注册, 新闻发布,职位发布,包含个人聊天,群聊,社区等功能的社交系统。 工作内容: 负责聊天的核心功能开发,提供多种格式支持。如:支持文本、图片、文件等信息格式。 进行详尽的响应式设计和测试,确保在APP和Web等设备上页面的一致性和适配。 组织小组内部技术培训,确保团队成员能够快速掌握新技术并应用于项目开发。并提升成员在uniapp、 Vue等技术的技能和协作效率。 负责前端代码优化,实现懒加载和代码拆分, CDN、浏览器缓存策略等,减少加载时间和运行资源消 耗。 支持一键登录,无需等待和复制短信验证码,能有效降低用户流失率,提升用户注册量在App激活量中 的转换率。 优化效果: APP 端利用一键登录,简化注册流程,降低用户的流失率,提高应用的留存率。 利用 CDN 加速,减少页面加载时间,提高用户体验。 利用缓存,减少页面资源请求次数,降低网络延迟,提高页面加载速度。 通过用户反馈和行为分析不断优化用户界面和交互流程,用户满意度提升30%。

2020年10月 — 2022年02月

vue vuex vue-roter axios element-ui Less Echarts webpack 项目描述: 作为项目开发负责人,负责开发和优化业务流程。该项目是用于管理企业资源和业务流程的网页应用程序。该 项目在实现过程中产出了公司N个后台管理项目通用的UI组件,包括表格,查询、文件上传等。通过封装通用 的UI组件,能够快速开发新的后台系统,并作用于5+个后台管理系统中。 工作内容: 作为前端开发负责人,负责技术决策,包括选型、项目优化设计,项目进度监控,确保按时高质量完 成。 基于第三方开源后台管理系统修改并进行二次开发,优化路由等内容,重新定义适合公司的开发规范。 对ElementUI进行深度定制和二次封装,开发企业级UI组件,灵活应用于多个后台管理系统,提升开发 和维护效率。 支持角色定义和权限分配,动态控制角色与页面元素、操作权限之间的关系,增加系统安全性。 动态系统构建,利用配置的形式,快速生成后台管理系统UI界面,包括表格、查询、文件上传(支持七牛云和本地服务器)等,缩短开发周期,减少加班,减低项目开发成本。 优化效果: 通过优化用户界面和个性化功能,完善流程,显著提示用户参与度和用户粘性。 利用本地存储功能,记录临时信息,保持用户上次操作,页面更加流程,提升用户留存率。 ElementUI组件库表格二次封装,减少冗余代码,增加代码复用性,提高代码可维护性; 优化webpack配置,自定义webpack插件,打包自动上传到服务器,减少重复工作,提高开发效率。

2021年02月 — 2021年06月

微信小程序 ES6+ 微信支付分 项目描述: 作为项目技术指导,负责设计并指导其他人员开发炳联零售货柜小程序。用于管理零售货柜,包括货柜状态、 库存、销售和用户信息等。利用微信支付分进行支付,购物更加便捷。 工作内容: 微信支付分支付部分的页面搭建,逻辑判断处理;微信支付分的整个流程。 基于Proxy和Reflect,通过观察者模式和订阅者模式开发数据的响应式和数据的统一管理。 优化效果: 通过代码包体积优化、代码注入优化、首屏渲染优化,降低首次加载和启动时间。 合理使用setData、进行渲染性能优化、页面切换优化、资源加载优化、内存优化和防抖节流优化,使 页面更加流程,提升用户留存率。 通过优化用户界面和个性化功能,显著提升用户参与度和用户粘性。 通过状态管理工具封装提升小程序类型项目的开发效率。

2019年10月 — 2020年08月

vue uniapp vuex vue-router App扫码 Echart 项目描述: 作为前端负责人,负责设计和实现“宋凰图书”管理系统的App端、Web端以及后台管理系统。这个项目的目的 是提供一个直观、支持多设备的用户界面,使用户能够轻松应对图书的收藏、借阅等各项操作。 工作内容: 通过EditorConfig、Prettier、ESLint、Commitizen、Commitlint、husky制定前端统一开发规范,提高 代码质量。 利用Vue2构建高性能SPA,实现流畅用户体验和即时页面响应。 对组件进行深度定制和封装,灵活应用于多个uniapp项目,提升开发和维护效率。 整合Echarts进行数据可视化,提供数据报表,分析用户的喜好,并进行喜好推荐,增强用户满意度。 界面适配优化:进行响应式设计和测试,确保在App和Web不同设备上页面的一致性和适配度。 优化效果: 通过用户反馈不断优化用户界面和交互流程,用户满意度提升30%以上。 前端切割后端一次性返回所有数据,通过分页效果,加快首屏响应速度,提升用户体验,提高数据加载 效率;减少网络资源的消耗,提高整体的访问速度和性能; 优化图片加载,通过图片懒加载的形式减少页面加载响应时间,并配合骨架屏,提升用户体验。