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 到可运行产品。