XX自动门企业品牌展示官网产品系统Vibe Coding

本项目面向中小实体制造企业打造，传统建站工期长、报价高，企业仅需线上品牌展示、产品宣传、客户线索收集能力。依托 AI 辅助编码大幅压缩开发周期，低成本搭建适配 PC 端的企业官方站点，解决中小企业无线上宣传门户、线下客户无法线上了解产品的业务痛点。

前台搭建 7 大核心访问页面，完整覆盖企业线上展示与客户线索收集全需求：首页呈现企业概况、核心优势数据与精选案例卡片；关于我们页面展示公司介绍、发展历程时间线以及企业资质荣誉；产品展示页支持多维度产品分类筛选，采用网格布局展示全部产品卡片；服务项目板块划分生产制造、安装调试、维修保养三大业务板块清晰呈现配套服务；工程案例页面提供图文混排的案例网格列表；新闻资讯模块包含资讯列表与独立文章详情阅读页；联系我们页面陈列企业地址、联系方式等基础信息，搭配可提交的在线留言表单，用户提交留言后自动同步推送至后台管理员。配套独立后台管理系统，支持在线图文可视化编辑、产品 / 案例 / 新闻内容新增上下线、客户留言表单数据导出、多账号分级权限管控。整套项目基于 React18+TypeScript 技术栈开发，依托 AI 生成基础页面与接口模板后人工重构标准化合规代码，打包输出纯静态资源包可直接部署至 Nginx、OSS 环境，架构轻量化易维护，支持后期页面改版、新增业务功能快速迭代适配。

1、本人独立负责本企业官网项目从 0 到 1 全流程开发，涵盖需求梳理、页面架构设计、前端编码、交互优化、打包部署全链路工作；完成 7 大核心页面（首页、关于我们、产品展示、服务项目、工程案例、新闻资讯、联系我们）的完整开发，搭建在线留言、产品筛选、资讯详情等全套业务交互逻辑，同时完成静态资源打包、线上部署配置与后期迭代适配工作。
2、技术栈采用 React 18 + TypeScript 搭建前端工程，依托 Vite 5 作为构建工具，借助其极速冷启动、按需编译特性大幅提升本地开发调试与打包构建效率；路由层选用 React Router v6 并采用 Hash 路由模式，规避静态部署下路径刷新 404 问题，完美适配纯静态站点部署场景；项目统一规范 TS 类型定义，对产品、新闻、留言表单等业务数据做完整类型约束，规避类型报错，提升代码可维护性。
3、整体工程输出纯静态 dist 资源包，部署阶段适配 Nginx 与对象存储 OSS 两种方案，完成 Nginx 静态资源缓存、gzip 压缩、路由重定向配置，保障页面访问速度与稳定性；项目亮点为全静态轻量化架构，无需后端服务即可完成企业展示类业务落地，打包产物体积小、加载速度快；开发难点在于 Hash 路由静态部署兼容性处理、海量产品 / 案例图片懒加载与分页渲染性能优化，通过图片分片懒加载、组件缓存、路由守卫封装等方案完成性能调优，整套代码分层解耦，支持后续页面改版、新增功能快速迭代扩展。