⚡

展示时间线与活动组件Skill displaying-timelines

该技能用于系统化地创建和展示时间线、活动组件、甘特图、日历接口等，适用于显示事件、活动、项目计划、历史数据、社交源、通知和审计日志。提供基于用例的决策框架、实现模式、性能优化、可访问性要求和响应式设计，支持实时更新。关键词：时间线、活动组件、甘特图、日历、前端开发、数据可视化、实时更新、可访问性、响应式设计。

前端开发 0 次安装 0 次浏览 更新于 3/23/2026

名称: 展示时间线与活动组件 描述: 通过时间线、活动源、甘特图和日历界面显示按时间顺序排列的事件和活动。用于显示历史事件、项目进度、社交源、通知、审计日志或基于时间的数据。提供垂直/水平时间线、交互式可视化、实时更新和响应式设计的实现模式，并确保可访问性（WCAG/ARIA）。

展示时间线与活动组件

目的

此技能系统化地创建时间线和活动组件，从简单垂直时间线到复杂交互式甘特图。它提供基于用例和数据特征的清晰决策框架，确保最佳性能、实时更新和可访问实现。

何时使用

在以下情况下激活此技能：

  • 创建活动源（社交、通知、审计日志）
  • 显示时间线（垂直、水平、交互式）
  • 构建甘特图或项目进度
  • 实现日历界面（月、周、日视图）
  • 显示按时间顺序排列的事件或历史数据
  • 处理实时活动更新
  • 需要时间戳格式化（相对、绝对）
  • 确保时间线可访问性或响应行为

快速决策框架

根据用例选择组件类型：

社交活动        → 活动源（无限滚动、反应）
系统事件        → 审计日志（可搜索、可导出、精确时间戳）
用户通知        → 通知源（按日期分组、已读/未读状态）
历史事件        → 垂直时间线（里程碑、交替侧面）
项目规划        → 甘特图（依赖关系、拖拽重新安排）
调度            → 日历界面（月/周/日视图）
交互式路线图    → 水平时间线（缩放、平移、过滤）

有关详细选择标准，参考 references/component-selection.md。

核心实现模式

活动源

社交源模式：

  • 用户头像 + 姓名 + 操作描述
  • 相对时间戳（如“2小时前”）
  • 反应和评论
  • 无限滚动与分页
  • 通过WebSocket实时更新
  • 参考 references/activity-feeds.md

通知源模式：

  • 按日期部分分组
  • 已读/未读状态与指示器
  • 标记所有为已读功能
  • 按通知类型过滤
  • 操作按钮（查看、关闭）
  • 参考 references/notification-feeds.md

审计日志模式：

  • 系统事件与精确时间戳
  • 用户操作跟踪
  • 可搜索与高级过滤器
  • 可导出（CSV、JSON）
  • 安全重点显示
  • 参考 references/audit-logs.md

示例： examples/social-activity-feed.tsx

时间线可视化

垂直时间线：

  • 事件按时间顺序堆叠
  • 连接线与标记点
  • 日期标记和事件卡片
  • 可选交替侧面
  • 最佳用于：历史事件、项目里程碑
  • 参考 references/vertical-timelines.md

水平时间线：

  • 事件沿水平轴排列
  • 滚动或缩放导航
  • 密度随缩放级别变化
  • 最佳用于：项目时间线、路线图
  • 参考 references/horizontal-timelines.md

交互式时间线：

  • 点击事件查看详情
  • 按类别/类型过滤
  • 缩放控制
  • 平移和滚动导航
  • 最佳用于：数据探索、丰富交互性
  • 参考 references/interactive-timelines.md

示例： examples/milestone-timeline.tsx

甘特图

项目规划功能：

  • 任务为水平条
  • 依赖关系箭头
  • 关键路径高亮
  • 拖拽重新安排
  • 进度指示器
  • 里程碑标记（菱形）
  • 资源分配
  • 今天标记线
  • 缩放级别（日/周/月/年）

生成甘特图数据：

python scripts/generate_gantt_data.py --tasks 50 --dependencies auto

参考 references/gantt-patterns.md 获取实现细节。

示例： examples/project-gantt.tsx

日历界面

月视图：

  • 传统日历网格
  • 事件在日期单元格中
  • 点击创建/编辑
  • 颜色编码类别
  • 多日历叠加

周视图：

  • 时间槽（每小时）
  • 事件为可拖动块
  • 调整大小以改变时长
  • 多日历叠加

日/议程视图：

  • 详细每日日程
  • 列表格式带时间时长
  • 位置和参与者
  • 可滚动时间线

参考 references/calendar-patterns.md 获取所有视图。

示例： examples/calendar-scheduler.tsx

时间戳格式化

基本时间戳模式：

相对（近期事件）：

  • “刚刚”（<1分钟）
  • “5分钟前”
  • “3小时前”
  • “昨天下午3:42”

绝对（较旧事件）：

  • “2025年1月15日”
  • “2025年1月15日下午3:42”
  • API使用ISO 8601

实现注意事项：

  • 时区处理（显示用户本地时间）
  • 区域感知格式化
  • 悬停显示精确时间戳
  • 自动更新相对时间

一致格式化时间戳：

node scripts/format_timestamps.js --locale en-US --timezone auto

参考 references/timestamp-formatting.md 获取完整模式。

实时更新

实时活动源：

  • WebSocket或SSE用于新事件
  • 平滑插入动画
  • “X个新项”通知横幅
  • 点击加载新项
  • 用户操作的乐观更新

实现模式：

  1. 立即显示用户操作
  2. 更新时间戳为“刚刚”
  3. 后台发送到服务器
  4. 错误时回滚

参考 references/real-time-updates.md 获取WebSocket模式。

示例： examples/realtime-activity.tsx

性能优化

关键性能阈值：

<100事件       → 客户端渲染，无虚拟化
100-1,000事件  → 推荐虚拟滚动
1,000+事件     → 虚拟滚动 + 服务器分页
实时           → 防抖更新，批量插入

优化策略：

  • 记忆化时间线项组件
  • 延迟加载事件详情
  • 长时间线虚拟滚动
  • 防抖实时更新（每500ms批量）
  • 优化时间戳计算

基准测试性能：

node scripts/benchmark_timeline.js --events 10000

参考 references/performance-optimization.md 获取细节。

可访问性要求

基本WCAG合规：

语义HTML：

  • 使用 <ol> 或 <ul> 用于时间线
  • 正确标题层次结构
  • 语义时间元素

ARIA模式：

  • role="feed" 用于活动源
  • role="article" 用于时间线项
  • aria-label 用于时间戳
  • aria-busy 用于加载期间

键盘导航：

  • Tab键遍历交互项
  • 箭头键用于时间线导航
  • Enter/Space键展开项
  • 跳转到最新/最旧控件

屏幕阅读器支持：

  • 宣布源中新项
  • 描述性时间戳标签
  • 甘特图进度更新

验证可访问性：

node scripts/validate_timeline_accessibility.js

参考 references/accessibility-patterns.md 获取完整要求。

响应式设计

三种验证策略：

1. 垂直堆叠（移动端）

  • 将水平转换为垂直
  • 保持时间顺序
  • 调整间距和字体大小

2. 简化显示

  • 仅显示必要信息
  • 展开查看详情
  • 减少视觉复杂性

3. 水平滚动

  • 保持布局完整
  • 启用触摸滚动
  • 添加滚动指示器

参考 references/responsive-strategies.md 获取实现。

示例： examples/responsive-timeline.tsx

库推荐

时间线：react-chrono（灵活）

最佳用于丰富内容的时间线可视化：

  • 水平、垂直、交替布局
  • 图像和视频支持
  • 自定义项渲染
  • TypeScript支持
  • 开箱即用响应式
npm install react-chrono

参见 examples/react-chrono-timeline.tsx 进行设置。

替代：react-vertical-timeline-component

  • 简单、干净的垂直时间线
  • 轻量级（约10KB）
  • 图标支持
  • 适用于基本时间线

甘特图：SVAR React Gantt

最佳用于项目管理：

  • 现代、无依赖
  • 拖放任务
  • 依赖关系和里程碑
  • 可自定义外观
  • TypeScript就绪
npm install @svar/gantt

企业替代：Bryntum Gantt

  • 功能完整解决方案
  • 需要商业许可
  • 处理复杂项目
  • 高级资源管理

日历：react-big-calendar

最佳用于调度界面：

  • 月、周、日、议程视图
  • 拖放事件
  • 可自定义样式
  • 大型社区支持
npm install react-big-calendar

替代：FullCalendar

  • 可用高级功能
  • 优秀文档
  • 多框架支持

详细比较，参考 references/library-comparison.md。

设计令牌集成

时间线使用设计令牌技能进行一致主题化：

时间线特定令牌：

  • --timeline-line-color - 连接线颜色
  • --timeline-dot-color - 事件标记颜色
  • --timeline-dot-active-color - 当前/活跃事件
  • --event-card-bg - 事件卡片背景
  • --timestamp-color - 时间戳文本

标准令牌类别：

  • 颜色令牌用于背景和状态
  • 间距令牌用于间隙和内边距
  • 排版令牌用于文本层次结构
  • 阴影令牌用于卡片高程
  • 运动令牌用于动画

支持浅色、深色、高对比度和自定义主题。 参考设计令牌技能进行主题切换。

工作示例

从匹配要求的示例开始：

social-activity-feed.tsx       # 带反应的社交源
notification-center.tsx        # 带过滤器的通知系统
audit-log-viewer.tsx           # 系统审计日志
milestone-timeline.tsx         # 带里程碑的垂直时间线
project-gantt.tsx              # 带依赖的甘特图
calendar-scheduler.tsx         # 全视图日历
realtime-activity.tsx          # 通过WebSocket实时更新
responsive-timeline.tsx        # 移动优化时间线

测试工具

生成模拟时间线数据：

python scripts/generate_timeline_data.py --events 500 --realtime

测试实时更新：

node scripts/simulate_realtime.js --rate 5/sec --duration 60s

验证可访问性：

node scripts/validate_timeline_accessibility.js

基准测试性能：

node scripts/benchmark_timeline.js --events 10000 --virtual

后续步骤

  1. 识别时间线用例（活动、事件、进度）
  2. 选择适当的组件类型
  3. 选择库或使用令牌构建自定义
  4. 从匹配的示例文件开始
  5. 实现核心功能
  6. 添加实时更新（如需要）
  7. 用大型数据集测试性能
  8. 验证可访问性合规
  9. 应用移动端响应策略