chrono-flowlisted
Install: claude install-skill serejaris/kimi-skills
# Timeline Designer
根据 JSON 配置数据生成精美的交互式时间线 HTML 页面，支持三种布局模式：
1. **垂直布局（vertical）** — 经典纵向时间线，事件卡片交替分布在轴线两侧
2. **水平布局（horizontal）** — 横向滚动时间线，适合展示较少事件
3. **双侧布局（dual-side）** — 根据 `side` 字段将事件分配到左右两侧，适合对比展示
所有布局均支持：
- 点击展开/收起事件详情
- 移动端自适应（响应式设计）
- 自定义主题色、图标、分类标签
- 纯静态 HTML，零依赖，可直接用浏览器打开
## 使用方式
### 基础用法：从 JSON 配置生成
```bash
python3 scripts/generate_timeline.py --config timeline_data.json --output timeline.html
```
### 从标准输入读取 JSON
```bash
cat timeline_data.json | python3 scripts/generate_timeline.py --stdin --output timeline.html
```
### 指定布局模式（覆盖配置文件中的设置）
```bash
python3 scripts/generate_timeline.py --config data.json --layout horizontal --output timeline.html
```
### JSON 配置格式
```json
{
"title": "项目里程碑",
"layout": "vertical",
"theme": {
"primaryColor": "#2563eb",
"secondaryColor": "#7c3aed",
"backgroundColor": "#ffffff",
"textColor": "#1f2937",
"lineColor": "#d1d5db",
"fontFamily": "system-ui, -apple-system, sans-serif"
},
"events": [
{
"date": "2024-01-15",
"title": "项目启动",
"summary": "完成立项审批，组建核心团队",
"details": "详细说明文字，点击卡片后展开显示...",
"icon": "🚀",
"category": "里程碑",
"color": "#10b981",
"side": "left"
}
]
}
```
### 参数说明
| 参数 | 说明 |
|------|------|
| `--config, -c` | JSON 配置文件路径（与 `--stdin` 二选一） |
| `--stdin` | 从标准输入读取 JSON |
| `--output, -o` | 输出 HTML 文件路径（默认输出到 stdout） |
| `--layout, -l` | 覆盖布局模式：`vertical`、`horizontal`、`dual-side` |
| `--title, -t` | 覆盖时间线标题 |
### 字段说