# 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/` 目錄

---

**祝您使用愉快！** 🎉