资源类型不同，但调度判断相似
会议室、场地、服务人员和寄养房间都需要回答“谁、何时、什么状态”。我负责抽取共用模型、双轴显示与新建预约流程。
Design System · Scheduling Component
通用「资源 × 时间」二维棋盘布局组件 · Universal Resource × Time Scheduler
一个不绑定具体业务的 React 调度布局组件，支持时间纵轴 timeY 与时间横轴 timeX，可用于场地预订、宠物寄养、美发预约、会议室和医疗排班。组件提供 TypeScript 类型、Render Props 与交互回调，方便接入不同产品。
Design Philosophy
调度页面经常重复处理资源、时间、事件重叠、状态和拖拽。ChessboardLayout 将这些布局与交互能力抽成可配置组件，上层产品只需要传入数据并处理自己的业务规则。
Axis Modes
通过 axisMode 切换时间方向：日内精细排期使用纵轴，多日资源排期使用横轴。
Time Granularity
Built-in Scenarios
三套预设分别检查按小时、按天和高密度预约的布局表现，并展示资源、事件、状态与配置项如何组合。
Component Architecture
组件负责布局、状态显示和交互事件，业务层负责数据来源、权限和规则判断。四个核心类型定义了两者之间的接口。
Configuration System
ChessboardConfig 包含 20+ 个配置项，按轴方向、时间范围、尺寸、显示、事件样式、交互、分组和主题进行分类，并补充 JSDoc 说明。
Tech Stack
组件读取 Ant Design ConfigProvider 中的颜色、圆角和间距 Token，并跟随产品主题变化。
Case evidence / scheduling pattern
我的角色是梳理双轴布局、事件状态、配置边界和交互反馈，并用独立 Demo 验证组件模式。当前案例呈现的是可运行原型与规则证据，不声称已发布为公共 npm 包。
会议室、场地、服务人员和寄养房间都需要回答“谁、何时、什么状态”。我负责抽取共用模型、双轴显示与新建预约流程。
空格点击进入新建表单；表单检查营业时间、不可用区间与冲突；选中已有事件后提供确认、取消和删除，而不是只显示一个 Toast。
场景只提供资源、时间粒度、事件与不可用数据；按钮组、选择器、Modal、错误提示、Toast 和 Focus Ring 复用同一基础状态。
交付证明了双轴显示与事件操作可以共享一套数据结构。这里不使用未经验证的性能提升、组件下载量或线上业务指标。
面向多类资源调度场景的可配置组件，可作为内部包接入产品。