绽放优雅

概述

Bloom Grace 是一个使用 React 和 Vite 构建的单页花店 Web 应用。它是一个关于两件事的学习练习：从一开始就正确地实现可访问性（而不是在最后才补上），以及在拥有真实图片和交互的 Vite 优先项目上进行性能调优。最终成果是一个响应式、对屏幕阅读器友好的店面，拥有流畅的导航和优雅的浏览体验。

功能

• 产品展示 — 带有高质量图片和描述的花卉布置，按不同场合（婚礼、花束、节日布置）分类展示。
• 搜索 — 快速筛选整个目录，让用户能找到特定的花卉。
• 个人资料设置 — 在本地编辑基本的用户信息。
• 订阅弹窗 — 用于新闻通讯/促销活动注册的弹出窗口，具有正确的焦点捕获行为。
• 购物车（部分实现） — 添加/编辑/删除商品；结账功能在此次练习中被视为超出范围。
• 响应式设计 — 从 360px 的手机到宽屏桌面都能清晰运行。

可访问性优先

这是我最自豪的部分。没有在视觉设计完成后才补上可访问性，而是将之作为首要约束来构建每个组件：

• ARIA 角色 用于交互式部件（对话框、菜单、切换开关），以便屏幕阅读器能正确播报它们。
• 全程键盘导航 — 每个按钮、链接和表单字段都可以通过 Tab 键访问，并通过空格键/回车键激活。弹窗在打开时捕获焦点，关闭时恢复焦点。
• 语义化 HTML — 使用 <nav>、<main>、<article>、<button> 等标签的实际语义含义，而不是到处使用样式化的 <div>。
• 高对比度和系统偏好感知 — 颜色选择经过 WCAG 对比度比率的检查。

技术栈

• React — 基于组件的 UI。
• Vite — 开发服务器 + 构建工具。选择 Vite 而非 CRA 是因为其速度和现代化的工具链。
• CSS / styled components — 自定义的响应式布局，没有使用 UI 库。
• React Router（部分连接） — 页面间流畅的客户端导航。

值得注意的点

• 将可访问性作为设计约束 — 迫使每个组件使用真正的语义化元素而非 div，这最终使代码更清晰且更易于维护。这是本次练习最好的副作用。
• Vite 的开发者体验 — 从 Create-React-App 转过来，仅仅是启动时间的差异就让人觉得用 Vite 构建这个项目是值得的。
• 限定学习范围 — 我特意将购物车结账和真实后端集成排除在范围之外，以便专注于前端工艺部分。