AI Product Design · Pisell SaaS · Australia

真实上线 · Australia Vite + React Pisell 集成

Rainbow Town
Play Centre

儿童游乐场预约系统 · VIP Birthday Party · Pisell Booking Demo

面向澳洲室内儿童游乐场 Rainbow Town Play Centre 打造的 Pisell 预约管理系统 Demo。支持 VIP 生日包房（D01-D05）与标准场票务管理，以 ChessboardLayout 为核心布局层，实时映射 Pisell 真实预约数据，全程 AI 辅助设计与开发。

客户 Rainbow Town Play Centre

地区澳大利亚

平台 Pisell SaaS

核心组件 ChessboardLayout v2.0

Project Overview

项目背景

Rainbow Town Play Centre 是澳洲的一家室内儿童游乐场，同时运营 VIP 生日包房与标准票务业务。该 Demo 基于 Pisell SaaS 平台的真实预约数据，展示如何用 ChessboardLayout 组件快速交付一套面向游乐场运营团队的可视化预约管理界面。系统动态生成约 7 周的模拟预约数据，模拟真实运营场景。

VIP 生日包房 D01–D05

标准场区（T1/T2/T3/楼层）

票务产品类型

7周

动态 Demo 数据覆盖

Product Types

票务与包房产品体系

覆盖从儿童单人票到全场 VIP 包场的完整产品矩阵，支持按房间类型（VIP / Standard）独立管理。

🏆 VIP 包房产品

🎂 COCO Birthday Party D01~D03 A$388

🎪 Private Venue Hire A$450

🌟 VIP Lucky Package A$288

🌊 Pisell Oceania Package A$328

🎉 COCO Party A$268

🏰 Whole Venue Hire A$1,200

🎫 标准票务产品

👧 2h Kid Ticket A$28

👧 4h Kid Ticket A$45

🧑 Adult Ticket A$18

⚽ Casual Play A$18

🎮 Pisell Playground Package A$25

👨‍👩‍👧‍👦 Group Booking (10+ kids) A$220

Room Configuration

D01 · VIP

D02 · VIP

D03 · VIP

D04 · VIP

D05 · VIP

T1+T3 · Standard

T1+T2+T3 · Standard

T2+T3 · Standard

一层 · Standard

二层 · Standard

Live Demo

预约管理系统 Demo

以下为基于 Pisell 真实数据结构生成的 Demo 版本。使用 seededRng 算法动态生成约 7 周相对当日的模拟预约，覆盖 50 位客户、14 种产品类型。

Rainbow Town Play Centre · Booking Calendar

Demo · ChessboardLayout v2.0

ℹ️

Demo 说明

以上为 Demo 版本，使用模拟数据演示系统功能，不连接真实 Pisell 后端。真实生产版本已为 Rainbow Town Play Centre 运营团队部署上线。

System Features

系统功能

📅

预约日历视图

基于 ChessboardLayout timeY 模式，以房间为列、时间为纵轴展示当日所有预约，实时红线标注当前时间。

🏆

VIP 包房管理

D01~D05 VIP 房间独立管理，区分生日包场、私人包场、全场包场等不同产品类型，金色主题视觉区分。

🎫

标准票务管理

T1/T2/T3 场区与楼层独立管理，支持 2h/4h 儿童票、成人票、团体票等多票种，蓝色主题视觉区分。

📋

预约详情侧栏

点击预约块展开客户详情侧栏，显示客户姓名、电话、预约产品、金额、状态及备注，支持多 Tab 信息展示。

🔗

Pisell 数据对接

通过数据适配器（DataAdapter）将 Pisell 预约数据映射为组件内部格式，支持 appointmentStatus 状态转换。

⚙️

房间配置管理

支持通过 localStorage 持久化自定义房间配置，运营团队可灵活添加/排序/调整房间显示顺序与类型。

AI Development Process

AI 辅助开发全流程

💬

ChatGPT

需求调研

分析游乐场运营场景，梳理 VIP 包房 vs 标准票务双业务线需求，明确日历视图数据模型

🧩

Claude

数据适配

设计 Pisell API → ChessboardLayout 数据映射层，处理 appointmentStatus 状态枚举转换逻辑

⚡

Cursor

Demo 实现

使用 Cursor 实现 seededRng 动态数据生成、localStorage 房间持久化与完整 UI 交互逻辑

🎨

v0 + AI

UI 精调

AI 辅助设计金/蓝双色系 VIP vs 标准区分视觉，侧栏详情抽屉与状态颜色 token 体系

🚀

Vite Build

打包部署

Vite 生产打包，独立 dist 可直接嵌入 Pisell 后台或部署为独立 Demo 页面交付客户验收

Tech Stack

React 18 TypeScript Vite 5 ChessboardLayout v2.0 Framer Motion Tailwind CSS Lucide Icons seededRng Demo Data localStorage 持久化 Pisell API Adapter