AI Product Design · SaaS Calendar

Resource Calendar Drag & Drop Dark / Light Mode

资源日历
预约系统

Smart Resource Calendar · AI-Powered Booking Management

面向酒店、宠物寄养、场地管理等多类业务场景的智能资源日历预约系统。月视图日历网格，支持多楼层多房间管理、预约状态可视化、拖拽移动、深浅色主题切换与筛选搜索。全程 AI 辅助设计与 React 实现，完整落地可用。

场景 酒店 / 宠物寄养 / 场地预约
视图 月视图资源甘特图
技术栈 React · Tailwind · Drag & Drop
主题 深色 / 浅色双主题

Project Overview

项目背景

该系统为多资源类型业务提供统一的可视化预约管理界面。以「资源行 × 日期列」的甘特图形式，将所有预约在一屏内完整呈现，帮助运营人员快速感知当前资源占用状态，并支持拖拽移动来灵活调整预约安排，大幅降低管理成本。

2+
楼层 / 资源分组
20+
房间 / 资源单元
5
预约状态类型
2
深 / 浅色主题

Calendar Design

月视图日历甘特图

以日期为横轴、资源单元（房间/场地）为纵轴，预约以彩色条块跨列呈现，直观反映每个资源的占用情况。支持深色 / 浅色双主题，适配不同操作环境。

April 2026
Upstairs
Downstairs
☀ Light
⬛ Dark
ROOM
Tue
1
Wed
2
Thu
3
Fri
4
Sat
5
Sun
6
Mon
7
▾ Upstairs (U)
U 01
Bella · Confirmed
U 02
Rex · Pending Change
U 03
Kiki · Checked-in ✓
U 04
Poppy · Cancelled
▾ Downstairs (D)
D 01
Oreo · Confirmed
D 02
Luna · Pending
Confirmed
Checked-in
Pending / Change
Cancelled
Blocked

Core Features

核心功能特性

📅
月视图日历网格
以日期为横轴、资源为纵轴的甘特图布局，每格 44px，支持横向滚动，可视化全月预约分布。
🏠
多楼层资源管理
支持按楼层（分组）展开/折叠，每层最多 10+ 间资源，组头可独立控制显示。
🎯
拖拽移动预约
拖动预约条块到新位置，实时预览落点，释放时弹出二次确认对话框，防误操作。
🌙
深浅色主题切换
深色（暗蓝紫）与浅色（淡紫白）双主题，完整覆盖所有组件状态，一键切换。
🔍
搜索与筛选
按姓名、房号、状态快速搜索，支持显示/隐藏空房、屏蔽房，筛选面板可展开收起。
📋
预约详情抽屉
点击预约条块弹出详情抽屉，展示客户信息、标签、金额、联系方式，支持多 Tab 切换视图。
⚡
快速新建预约
在空白格拖拽选择日期范围即可快速开始新建预约，选区以半透明蓝色高亮标注。
🔔
Toast 操作反馈
每次移动、屏蔽、状态变更均触发 Toast 通知，明确告知操作结果，3秒自动消失。

AI Development Process

AI 辅助开发全流程

复杂状态管理和拖拽交互全程借助 AI 辅助拆解与实现，大幅降低开发难度。

💬
ChatGPT
需求拆解
分析日历预约系统的数据结构、状态机与用户交互流程，明确核心功能边界
🧩
Claude
数据建模
设计预约数据模型（group/room/start/end/status）与日历渲染算法（getRange/diffDays）
⚡
Cursor
拖拽实现
使用 Cursor 实现拖拽状态机（moving/hoverCell/dragGhost）与操作确认流程
🎨
v0 + AI
双主题设计
AI 辅助生成完整深浅色 token 系统，覆盖 Grid、Drawer、Toast、Filter 所有组件
✅
Review
性能优化
使用 useMemo 优化 bookingMap/filteredBookings，避免大数据量下的不必要重渲染

Tech Stack

技术栈

使用现代 React 生态，零依赖拖拽自实现，Tailwind 驱动双主题切换，追求轻量可嵌入。

React 18 TypeScript Tailwind CSS useRef · useMemo · useState Custom Drag & Drop CSS Grid Layout Dark / Light Theme Token Toast Notification Drawer / Modal Sticky Header

Resource Calendar

可配置资源类型、分组与状态体系，适配酒店、宠物寄养、场地预订等多种业务场景，AI 辅助从 0 到可运行产品。