一个轻量级的酒店房态管理与智能分配工具。无需后端，打开即用，适合小型酒店、民宿、公寓的前台快速管理入住状态。

✨ 功能特性

• 📋 多房型管理 – 支持小单间、窄大床、标准大床、豪华大床、双床房、三床房共6种房型，房间按楼层自动分组。
• 🔄 入住状态切换 – 点击房间卡片即可快速标记为“已入住”或“空闲”，已入住房间显示入住时间。
• 🤖 智能自动分配 – 根据选择的床型、人数、是否偏好大床等条件，自动推荐一个最优空闲房间。
• 🔍 实时搜索 – 按房间号实时筛选，跨房型统一过滤。
• 🔍 独立缩放（桌面端） – 每个房型模块可独立缩放 50%～150%，适应不同屏幕或视力需求。
• 💾 数据持久化 – 使用浏览器 localStorage 自动保存所有状态，刷新/关闭页面不丢失。
• 🧹 一键重置 – 快速清空所有入住记录，恢复全部房间为空闲。
• 📱 响应式设计 – 完美适配电脑端（双栏布局）和移动端（单列滚动）。

🖥 技术栈

• React 18 – Hooks 函数组件，无状态管理库，轻量高效。
• Tailwind CSS – 原子化 CSS，快速构建现代界面。
• Babel Standalone – 浏览器端实时编译 JSX，无需构建工具。
• localStorage – 本地数据持久化。
• SVG 图标 – 全自定义图标组件，无额外依赖。

🎮 使用指南

分配房间

1. 选择床型（单床 / 双床 / 三床）。
2. 若选择“单床”，可进一步选择单人/多人入住，以及是否偏好大床。
3. 点击 “自动分配” 按钮，系统会自动找出符合条件的第一个空闲房间并标记为已入住。
4. 分配成功后会有顶部提示。

手动修改状态

· 直接点击任意房间卡片，即可在“空闲/已入住”之间切换。 · 已入住卡片会显示入住时间，并带有红色背景和用户角标。

搜索房间

· 在顶部搜索框输入房间号（如 510），实时过滤显示匹配的房间。

重置所有数据

· 桌面端在左侧底部点击“清空所有数据”，移动端在页面底部的红色按钮处操作。

🧩 自定义配置

修改房型或房间号

打开 index.html，找到 INITIAL_CONFIG 数组，按以下格式修改：

const INITIAL_CONFIG = [
  {
    id: 'your_type_id',      // 唯一标识
    name: '房型名称',         // 显示名称
    desc: '简短描述',         // 辅助说明
    rooms: [101, 102, 103]   // 房间号数组（数字或字符串均可）
  },
  // ... 更多房型
];

系统会根据房间号的首位数字自动推断楼层（例如 510 → 5楼）。

修改默认缩放范围

在 HotelManager 组件中找到 handleZoom 函数，修改 Math.max/min 的参数即可调整缩放极限。

🗂 项目结构

.
├── index.html          # 完整单文件应用（包含样式、逻辑、组件）
└── README.md           # 项目说明文档

所有代码均在一个 HTML 文件中，便于分发和部署。