Timeline 场景示例
这页不重复 xy-timeline / xy-timeline-group / xy-timeline-item 的基础 API，而是直接看它在真实后台页面里怎样承接操作审计、项目里程碑和侧栏详情页。当前这三类场景都统一建立在 Group + state + structured slots + compact 这套核心能力上，而不是继续靠 demo 自己拼一套内容骨架；默认起点仍然是左侧单线的 mode='start'。
推荐阅读路径
- 先看操作审计，确认
Group + compact + actions是否足够承接活动流。 - 再看项目里程碑，判断
state和alternate是否足够承接阶段流。 - 最后看侧栏详情页，确认紧凑模式下结构化区域是否仍然稳定。
操作审计后台操作记录 / 审批流转 / 发布日志
项目里程碑版本节点 / 排期里程碑 / 交付阶段
侧栏详情页最近动态 / 备注 / 处理记录
适合什么
- 审计日志、审批链路、发布流水这类天然按时间顺序阅读的后台页面。
- 里程碑总览、阶段复盘、版本节奏同步这类需要双侧布局承载说明的页面。
- 抽屉、侧栏和详情页中的最近动态、处理记录和补充备注区块。
不适合什么
- 需要完整泳道、依赖关系和资源排布的甘特图或排期视图。
- 需要并列比较多条流程、而不是阅读单条事件链路的复杂流程编排页面。
- 只想做轻量状态摘要、不需要明确时间顺序的统计卡片或概览面板。
操作审计
这个场景把后台操作记录、审批流转和发布日志收口到同一条时间线上，适合管理台、运营台和变更中心。
操作审计 / 审批流 / 发布日志
把“谁在什么时候做了什么”收口到一条连续时间线上，方便审计和复盘。
活动流 / 操作审计最近 24 小时
今天
后台操作记录 / 审批流转 / 发布日志
3 条
字段变更
运营在发布面板修改了展示优先级，并同步到活动中心。
审批流转
审批单进入财务复核，等待确认预算编号与合同主体。
发布日志
灰度批次 2 已完成，发布范围扩大到华东区域租户。
项目里程碑
交替布局更适合承接版本节点、阶段目标和交付说明，阅读时不容易把每一项都挤在同一侧。
项目里程碑 / 阶段流和活动流共用同一套 Group + state + 结构化区域
Q2 版本节奏
计划时间 / 当前阶段 / 风险提醒
版本 2.4
M1 需求冻结
确认接口、字段、权限和上线窗口。
M2 核心功能完成
交付首轮联调包，并把异常链路接入埋点。
M3 验收与培训
准备演示环境、培训材料和上线 checklist。
M4 正式发布
按租户批次切流，并在稳定后关闭兼容分支。
侧栏详情页
窄侧栏里最常见的就是最近动态、备注和处理记录；这里展示时间线在右侧详情面板里的收口方式。
侧栏详情页 / 最近动态 / 处理记录compact + 结构化插槽
今天
右侧面板常见布局
客户补充备注
补充了线下合同扫描件，等待法务复核。
处理人已变更
由售前支持转交给交付经理继续跟进。
状态更新为已解决
问题定位完成，修复已推送到客户专属分支。
数据流说明
- 页面层维护真实事件数组，并决定每个节点属于哪个
group、使用什么state、是否切到compact。 xy-timeline负责布局模式、渲染顺序和密度；xy-timeline-group负责分段标题；xy-timeline-item负责节点内容区域。- 业务字段仍然应该在页面层组织成
title / meta / actions / default / extra这几个区域，而不是继续把整块业务卡片塞进一个默认插槽。
可复用模块总结
- 分组流模板：
Timeline + TimelineGroup，适合按日期、版本、阶段分段。 - 流程态模板：
state + type，适合同时表达当前阶段和视觉语义。 - 紧凑模板：
density='compact' + structured slots，适合侧栏、抽屉和详情面板。