宠物养育网

生活消费分类信息案例ID：242507

动动

15 年经验· 中国银联股份有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

这是一个我主导开发的宠物品种全生命周期信息平台，核心目标是为养宠家庭和专业人士提供一站式的品种数据、健康风险与科学喂养指南，我负责从架构设计到核心功能实现的全流程前端开发工作。
项目采用 React + TypeScript 构建，结合 Ant Design 组件库与 Tailwind CSS 实现了响应式、易维护的界面体系。为了高效展示 244 个犬猫品种数据，我设计了多维度筛选与排序系统，支持按被毛类型、体型、原产地快速过滤，并实现了虚拟列表懒加载，让用户在海量数据中也能流畅浏览。同时，我开发了 “品种对比”“收藏夹” 等功能模块，方便用户横向对比不同品种的健康特性、饲养难度，快速锁定心仪的宠物。
针对项目中的数据可视化与交互体验需求，我用 ECharts 实现了品种常见疾病发病率统计、不同体型犬猫的寿命分布等图表；为了保障数据的准确性与专业性，前端实现了严格的数据校验与权限控制，对接后端安全接口，实现了敏感数据脱敏与请求拦截。
在性能优化方面，我对图片资源进行了 WebP 格式转换与 CDN 分发，配合骨架屏、预加载等策略，大幅提升了页面加载速度；并通过代码分割、Tree Shaking 等工程化手段，将首屏加载时间压缩了 40% 以上。平台上线后，已收录 179 种犬、65 种猫的完整信息，为用户提供了从品种选择到健康管理的全链路支持。