2d37d23bcf
- 新增 _calculate_lane_conflicts_v2() 分開返回標籤重疊和線穿框分數 - 修改泳道選擇算法，優先選擇無標籤重疊的泳道 - 兩階段搜尋：優先側別無可用泳道則嘗試另一側 - 增強日誌輸出，顯示標籤範圍和詳細衝突分數 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
188 lines
3.7 KiB
Markdown
188 lines
3.7 KiB
Markdown
# TimeLine Designer - 快速入門
|
||
|
||
## 🚀 5 分鐘快速上手
|
||
|
||
### 步驟 1: 啟動系統 (30 秒)
|
||
```batch
|
||
# Windows 雙擊執行
|
||
start_dev.bat
|
||
```
|
||
|
||
等待看到以下訊息：
|
||
```
|
||
Backend: http://localhost:8000 ✅
|
||
Frontend: http://localhost:12010 ✅
|
||
```
|
||
|
||
---
|
||
|
||
### 步驟 2: 開啟瀏覽器 (10 秒)
|
||
訪問: **http://localhost:12010**
|
||
|
||
---
|
||
|
||
### 步驟 3: 匯入示範檔案 (30 秒)
|
||
1. 拖曳 `examples/demo_project_timeline.csv` 到上傳區
|
||
2. 看到 "✅ 成功匯入 15 筆事件！"
|
||
|
||
---
|
||
|
||
### 步驟 4: 生成時間軸 (10 秒)
|
||
1. 點擊 **「生成時間軸」** 按鈕
|
||
2. 等待 1-2 秒渲染完成
|
||
|
||
---
|
||
|
||
### 步驟 5: 互動與匯出 (1 分鐘)
|
||
- 🖱️ **滑鼠滾輪**：縮放
|
||
- 🖱️ **拖曳**：平移
|
||
- 🎯 **懸停**：查看詳情
|
||
- 💾 **匯出**：選擇格式 (PDF/PNG/SVG) 和 DPI，點擊匯出
|
||
|
||
---
|
||
|
||
## 📋 三個示範檔案
|
||
|
||
### 1️⃣ `template.csv` - 空白模板
|
||
**用途**: 建立您自己的時間軸
|
||
**內容**: 只有欄位標題 + 1 行範例
|
||
|
||
### 2️⃣ `demo_project_timeline.csv` - 專案開發
|
||
**事件**: 15 筆（專案管理、需求、開發、測試、部署）
|
||
**時間**: 2024/01-02 (2 個月)
|
||
|
||
### 3️⃣ `demo_life_events.csv` - 個人履歷
|
||
**事件**: 11 筆（教育、職涯、生活里程碑）
|
||
**時間**: 2015-2026 (11 年)
|
||
|
||
### 4️⃣ `demo_product_roadmap.csv` - 產品路線圖
|
||
**事件**: 14 筆（季度規劃、募資、產品發布）
|
||
**時間**: 2024-2025 (1.5 年)
|
||
|
||
---
|
||
|
||
## 🎯 核心功能
|
||
|
||
| 功能 | 操作 |
|
||
|-----|-----|
|
||
| 📁 **匯入資料** | 拖放 CSV/XLSX 到上傳區 |
|
||
| 🎨 **生成圖表** | 點擊「生成時間軸」 |
|
||
| 🔍 **縮放** | 滑鼠滾輪 |
|
||
| 🖱️ **平移** | 拖曳圖表 |
|
||
| 💾 **匯出** | 選擇格式 + DPI，點擊匯出 |
|
||
| 🗑️ **清空** | 點擊「清空事件」 |
|
||
|
||
---
|
||
|
||
## 📊 CSV 格式速查
|
||
|
||
### 必填欄位
|
||
```csv
|
||
id,title,start
|
||
event-001,事件標題,2024-01-01
|
||
```
|
||
|
||
### 完整欄位
|
||
```csv
|
||
id,title,start,end,group,description,color
|
||
event-001,事件標題,2024-01-01,2024-01-05,分組A,描述文字,#3B82F6
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 常用色碼
|
||
|
||
```
|
||
#3B82F6 藍色 (科技、信任)
|
||
#10B981 綠色 (成功、成長)
|
||
#F59E0B 黃色 (警示、重要)
|
||
#EF4444 紅色 (緊急、里程碑)
|
||
#8B5CF6 紫色 (創新、高級)
|
||
#EC4899 粉色 (溫馨、生活)
|
||
```
|
||
|
||
---
|
||
|
||
## 💡 快速技巧
|
||
|
||
### 建立單日事件
|
||
留空 `end` 欄位：
|
||
```csv
|
||
id,title,start,end
|
||
M001,里程碑,2024-01-15,
|
||
```
|
||
|
||
### 使用群組分類
|
||
同一群組會自動上下排列：
|
||
```csv
|
||
id,title,start,end,group
|
||
E001,事件A,2024-01-01,2024-01-05,開發階段
|
||
E002,事件B,2024-01-03,2024-01-07,開發階段
|
||
E003,事件C,2024-01-06,2024-01-10,測試階段
|
||
```
|
||
|
||
### Excel 快速填充
|
||
- **ID 序列**: 使用公式 `=TEXT(ROW()-1,"event-000")`
|
||
- **日期序列**: 選取起始日期，拖曳填充把手
|
||
|
||
---
|
||
|
||
## ❓ 常見問題速解
|
||
|
||
### Q: 中文亂碼？
|
||
**A**: Excel → 另存新檔 → **CSV UTF-8 (逗號分隔)**
|
||
|
||
### Q: 日期錯誤？
|
||
**A**: 使用格式 `2024-01-01` (YYYY-MM-DD)
|
||
|
||
### Q: 圖表沒顯示？
|
||
**A**:
|
||
1. 確認已點擊「生成時間軸」
|
||
2. 檢查瀏覽器 Console (F12) 是否有錯誤
|
||
|
||
### Q: 匯出失敗？
|
||
**A**: 必須先生成時間軸才能匯出
|
||
|
||
---
|
||
|
||
## 🔧 故障排除
|
||
|
||
### 後端無法啟動
|
||
```bash
|
||
# 檢查環境
|
||
conda activate timeline_designer
|
||
conda list | grep fastapi
|
||
|
||
# 重新安裝依賴
|
||
pip install -r requirements.txt
|
||
```
|
||
|
||
### 前端無法啟動
|
||
```bash
|
||
cd frontend-react
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
### 端口被佔用
|
||
```bash
|
||
# Windows
|
||
netstat -ano | findstr :8000
|
||
netstat -ano | findstr :12010
|
||
|
||
# 終止進程
|
||
taskkill /PID <PID> /F
|
||
```
|
||
|
||
---
|
||
|
||
## 📞 需要更多幫助？
|
||
|
||
- 📖 **完整文檔**: `examples/README.md`
|
||
- 🔧 **API 文檔**: http://localhost:8000/api/docs
|
||
- 📁 **專案文檔**: `docs/` 目錄
|
||
|
||
---
|
||
|
||
**祝您使用愉快！** 🎉
|