chrono-flow

# 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` | 覆盖时间线标题 | ### 字段说...