CabinFy

实现房源、预订、评价和设置分别通过 Query Hook 获取，新增、修改和删除由 Mutation Hook 承担；页面消费统一的加载、错误和更新状态。

价值将服务端数据与本地 UI 状态分离，避免把请求结果、表单输入和弹窗状态耦合到一个全局状态容器中。

实现features 目录按 authentication、bookings、cabins、check-in-out、dashboard、guests 和 settings 拆分，每个模块组合页面组件、表单和数据 Hook。

价值业务规则和交互入口更容易定位，列表、表单、弹窗和数据请求也能在同一领域内复用。

实现React Router 将 /admin/* 与游客端页面分开，管理后台使用独立布局和 ProtectedRoute，游客端则围绕房源浏览、详情和预订组织导航。

价值两类用户拥有不同的信息层级和操作边界，同时保留一套可复用的 API 和领域数据。

实现Dashboard、Bookings、Cabins、Home 和 Cabin 等页面通过 React.lazy 与 Suspense 按路由加载，并为房源列表和详情页提供专用 Skeleton。

价值减少初始 JavaScript 负担，并用稳定的布局占位降低异步请求带来的空白和跳动。

实现React Hook Form 管理表单状态，Zod 负责运行时校验，Table、Dialog、Select、Form、Sheet 等组件为游客端和后台提供统一交互基础。

价值减少重复表单逻辑，让房源、预订、登录和设置等不同业务流程拥有一致的错误反馈和交互习惯。

实现react-i18next 通过浏览器语言检测和 JSON locale 文件加载中英文文案；Tailwind 响应式样式、DarkModeProvider 和移动端布局共同覆盖不同设备与偏好。

价值国际化和可访问的视觉体验不再是页面完成后的补丁，而是贯穿游客端与管理端的界面基础。