v9.5: 實作標籤完全不重疊算法
- 新增 _calculate_lane_conflicts_v2() 分開返回標籤重疊和線穿框分數 - 修改泳道選擇算法，優先選擇無標籤重疊的泳道 - 兩階段搜尋：優先側別無可用泳道則嘗試另一側 - 增強日誌輸出，顯示標籤範圍和詳細衝突分數 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
beabigegg
187
examples/QUICK_START.md
Normal file
187
examples/QUICK_START.md
Normal file
@@ -0,0 +1,187 @@
|
||||
# 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/` 目錄
|
||||
|
||||
---
|
||||
|
||||
**祝您使用愉快！** 🎉
|
||||
Reference in New Issue
Block a user