SuperAPI AI 工具集

calendar

办公与效率

查看项目

更新于 10-16 04:31

技能介绍

用途:Calendar View 模式用于把基于时间的信息以网格形式呈现,帮助用户一眼比较天、周或月,最适用于预约与排期类需求。

主要能力与适用场景:适合预约与排期、团队可用性查看、活动与发布规划。当用户只需一两个值而非完整布局时,应改用更简单的视图;当任务是创建或编辑而非解读信息时,不宜使用该模式;移动端若其他呈现方式更清晰,不要强行套用同一视图。

使用方式:先确认模式与问题及约束匹配,再复制示例。从 references/pattern.md 中的结构与示例入手,选择最小可行变体;在叠加视觉打磨前先落实无障碍、性能与交互护栏;用测试指引验证键盘、屏幕阅读器、响应式与失败场景下的行为。

无障碍要点:确保仅用键盘即可完成日历视图操作,焦点顺序在打开、更新或展开额外 UI 时保持合理,并保留在高倍缩放下仍可读的可见焦点状态。优先使用语义元素,仅在语义不足时补充 ARIA;在合适位置以恰当礼貌级别播报错误、加载或完成等状态变化;必要时用 aria-describedby 或结构化标题关联标签、提示与状态文本。不要仅靠颜色传达严重程度、完成或选中状态。

性能要点:在添加嵌套操作、图表或内联筛选等丰富装饰前,先测量默认视图的渲染成本;当布局会一次渲染过多条目时,使用分页、窗口化或渐进披露;稳定高度与占位几何,避免加载和数据刷新造成大幅布局偏移。

常见错误:未确认用户需要比较、探索还是扫描就先选布局;忽略加载、空、错误等非理想状态;只做桌面端密度模型,导致小屏上大表格、密集仪表盘和重卡片迅速崩塌。应先从用户任务出发映射布局,提前设计数据生命周期(空、部分、过期、失败),并在实现前定义移动端策略,如堆叠卡片、渐进披露或替代摘要。

相关模式:filter-panel、list-view、timeline。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/data-display/calendar。