山隐餐厅产品系统

山隐餐厅
立项原因：高端餐饮品牌普遍缺乏有效展示氛围与品质的线上窗口，传统的电话预约方式流程繁琐、效率低下。本项目为餐厅提供品牌展示与在线预约一体化方案，降低客户流失率。
行业场景：高端日料面向注重用餐体验的品质消费群体，需要通过极简美学设计传达匠心精神与品牌格调。同时内置预约表单替代人工接听，让商户高效管理席位，适用于餐饮、酒店、民宿等生活旅游类商家。

功能模块包括：品牌导航栏（映像/菜品/关于/预约锚点定位 +订位快捷按钮）、全屏品牌首屏（餐厅名称、日文标语、营业信息、预约入口）、关于我们（品牌故事 +数据统计展示）、视频展示区（主视频播放器 + 三栏视频缩略图列表 + 弹窗播放）、菜单展示（前菜/主菜/甜品三大分类，菜品名称、描述、价格、标签）、在线预约表单（姓名/电话/日期/时间/人数，含表单验证）、食客评价（星级评分 + 来源平台标签）、页脚信息（营业时间/地址/联系方式）。
主要功能：为高端日料品牌提供完整的线上展示与预约解决方案，用户可浏览本季菜单、观看后厨故事视频、在线预约席位。表单内置验证逻辑，提交后弹窗确认订单信息，满足餐饮品牌展示格调与高效获客的双重需求。

我负责页面整体架构设计、组件开发、样式编写与交互逻辑实现。项目基于 React+Vite 技术栈，采用函数组件+Hooks（useState/useEffect）进行状态管理，CSS Grid/Flexbox实现响应式布局。实现要点：将产品数据（配色、功能点、评价）抽取为数据数组，通过 map循环渲染实现数据驱动视图，便于后续维护和内容替换。
难点：CSS 耳机图形需要纯代码绘制，使用 border/box-shadow 等属性模拟耳罩、头梁结构并叠加脉冲光晕动画；颜色切换需同时联动产品展示区背景渐变和耳机图，通过 useState管理选中态实现多组件同步更新。购物车加减操作需处理边界条件（数量不能为负），并使用 useEffect监听数量变化触发"已加入购物车"提示的定时消失动画。