时间轴设计文档

一、功能概述

时间轴插件是基于 NocoBase 2.0 开发的可视化扩展插件，为用户提供以时间维度展示数据记录的能力。通过直观的时间轴视图，帮助用户清晰地梳理事件脉络、追踪数据变化。

---

二、核心功能设计

2.1 数据展示

• 数据绑定模式：选择数据表字段，自动生成时间轴
• 支持按时间正序/倒序排列
• 大数据量场景下支持懒加载

2.2 视图模式

• 方向布局：适合展示历史记录、操作日志
• 水平时间轴：适合展示项目阶段、里程碑

说明：在当前版本antd暂不支持水平布局,目前版本是5.24.2, 6.3.1才支持水平布局。
参考链接 https://ant-design.antgroup.com/components/timeline-cn#timeline-demo-horizontal

2.3 内容配置

• 节点图标、轴线颜色可自定义
• 支持配置节点在左右两侧的展示方式（交替展示 / 单侧展示）

2.4 交互

• 点击节点可跳转详情页或弹出详情卡片
• 支持筛选、搜索，快速定位特定时间段内的记录

2.5 插件配置项设计（Schema 映射）

基于区块配置流程（registerFlow），时间轴设置面板包含以下配置项：

字段映射 (Field Mapping)
通过引入增强的 NocoBase 变量选择器（FilterGroup），支持用户将集合字段映射至时间轴 UI：

分组	字段	类型	说明
样式配置	color	ColorPicker	轴线与默认节点的颜色（默认：#1890ff）
	lineWidth	Number	轴线的粗细（默认：2px）
	nodeSize	Number	节点圆圈/图标的大小（默认：12px）
	nodePadding	Number	节点位置的视觉偏移微调（默认：-4px）
	titlePadding	Number	调整标题字段的上下边距（默认：-7px）
	timePadding	Number	调整时间字段的上下边距（默认：-6px）
基础字段	titleField	选择器	标题内容字段
	titleImageField	选择器	标题对应的图片资源字段
	summaryField	选择器	摘要文本字段
	contentField	选择器	正文内容/富文本字段
	nodeField	选择器	节点图标/自定义节点字段
	attachmentField	选择器	附件展示字段
时间字段	startTimeField	选择器	节点的起始时间
	endTimeField	选择器	节点的结束时间（可选）
	timeFormat	Input	时间格式化模板（默认：YYYY-MM-DD）

样式设置 (Appearance)

配置项	类型	默认值	说明
color	ColorPicker	#1890ff	轴线与默认节点的颜色
lineWidth	Number	2px	轴线的粗细
nodeSize	Number	12px	节点圆圈/图标的大小
nodePadding	Number	-4px	节点位置的视觉偏移微调
titlePadding	Number	-7px	调整标题字段的上下边距
timePadding	Number	-6px	调整时间字段的上下边距

---

三、开发方案

3.1 产品边界

• 支持单轴线展示
• 支持导出(图片/pdf)
• 暂不支持多轴线并列展示

3.2 设计原则

• 简单易用：通过可视化字段映射配置，无需编码即可完成时间轴搭建
• 直观清晰：时间轴直观反映数据变化和时间脉络，节点颜色与字典状态联动

3.3 实现细节

入口与初始化

• 入口位于数据区块配置中
• 在数据区块配置中找到时间轴插件,选择要展示的数据表,时间轴会展示在区块中

---

数据绑定模式

1. 用户选择区块右上角的配置 点击字段映射：
   • 标题字段
   • 标题图片字段
   • 简介字段
   • 内容字段
   • 节点字段
   • 附件字段
   • 时间字段（用于排序和定位）
   • 时间格式(dayjs格式)
2. 系统根据配置自动生成时间轴
3. 数据变化时，时间轴自动更新

配置与编辑

• 区块右上角”配置”按钮可设置：
  • 轴线方向（垂直/水平）
  • 排序方式（正序/倒序）
  • 轴线颜色
  • 节点大小
  • 时间轴展示形式 （交替展现/单行展示）等配置项

3.4 实现计划

阶段	里程碑	交付物
1	核心功能开发	用户可正常配置时间轴，基础交互完整可用
2	增强功能实现	完成导出、懒加载、时间锚点等功能
3	迭代优化	交互优化 + 用户体验