701bf2d438
主要變更： - 修正資料格式說明，將 start/end 改為實際使用的 time 欄位 - 更新 CSV 範例，移除不存在的 end 欄位 - 使用 demo_project_timeline.csv 的真實資料作為範例 - 欄位範例更貼近實際使用情境 修正內容： - id: evt-001 → P001 - title: 專案啟動 → 專案啟動會議 - start/end → time (單一時間欄位) - 範例資料來自實際 demo 檔案 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
138 lines
3.7 KiB
Markdown
138 lines
3.7 KiB
Markdown
# 📊 TimeLine Designer
|
||
|
||
> 輕鬆建立專業的時間軸圖表
|
||
|
||
TimeLine Designer 是一款時間軸生成工具，讓您能夠輕鬆匯入事件資料並生成高品質的時間軸圖表。支援 CSV/XLSX 匯入，可匯出為 PNG、PDF、SVG 等多種格式。
|
||
|
||
## ✨ 主要特性
|
||
|
||
- **零程式門檻** - 直覺的 Web 操作介面
|
||
- **快速渲染** - 快速生成時間軸圖表
|
||
- **高解析輸出** - 支援 300 DPI 印刷品質
|
||
- **多格式匯出** - PNG / PDF / SVG
|
||
- **互動式操作** - 支援縮放、拖曳、懸停查看詳情
|
||
|
||
## 🚀 快速開始
|
||
|
||
### 環境需求
|
||
|
||
- Python 3.8 或以上版本
|
||
- Node.js 16 或以上版本（前端需要）
|
||
- Windows 10/11 或 macOS 10.14+
|
||
|
||
### 啟動應用程式
|
||
|
||
**方法 1：使用啟動腳本（推薦）**
|
||
```bash
|
||
# Windows
|
||
start_dev.bat
|
||
|
||
# 系統會自動啟動：
|
||
# - 後端 API: http://localhost:8000
|
||
# - 前端介面: http://localhost:12010
|
||
```
|
||
|
||
**方法 2：手動啟動**
|
||
```bash
|
||
# 1. 安裝 Python 依賴
|
||
pip install -r requirements.txt
|
||
|
||
# 2. 啟動後端 (終端 1)
|
||
uvicorn backend.main:app --reload --port 8000
|
||
|
||
# 3. 啟動前端 (終端 2)
|
||
cd frontend-react
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
啟動後，在瀏覽器打開 `http://localhost:12010` 即可使用
|
||
|
||
## 📖 使用說明
|
||
|
||
### 1. 匯入資料
|
||
|
||
準備一個 CSV 或 XLSX 檔案，包含以下欄位：
|
||
|
||
| 欄位名稱 | 必填 | 說明 | 範例 |
|
||
|---------|------|------|------|
|
||
| id | ✅ | 事件唯一識別碼 | P001 |
|
||
| title | ✅ | 事件標題 | 專案啟動會議 |
|
||
| time | ✅ | 事件時間 | 2024-01-02 |
|
||
| group | ❌ | 事件群組/分類 | 專案管理 |
|
||
| description | ❌ | 事件詳細描述 | 專案團隊首次會議，確認目標與時程 |
|
||
| color | ❌ | 事件顏色 (HEX) | #3B82F6 |
|
||
|
||
**範例 CSV 檔案：**
|
||
```csv
|
||
id,title,time,group,description,color
|
||
P001,專案啟動會議,2024-01-02,專案管理,專案團隊首次會議，確認目標與時程,#667EEA
|
||
P002,需求收集,2024-01-03,需求分析,與客戶進行需求訪談與調研,#3B82F6
|
||
```
|
||
|
||
#### 常用顏色代碼
|
||
|
||
| 顏色 | 色碼 | 適用情境 |
|
||
|------|------|---------|
|
||
| 藍色 | `#3B82F6` | 一般事件、資訊類 |
|
||
| 綠色 | `#10B981` | 完成、成功、正面事件 |
|
||
| 黃色 | `#F59E0B` | 警告、待處理、重要提醒 |
|
||
| 紅色 | `#EF4444` | 緊急、錯誤、負面事件 |
|
||
| 紫色 | `#8B5CF6` | 特殊事件、里程碑 |
|
||
| 粉色 | `#EC4899` | 個人事件、慶祝活動 |
|
||
| 靛藍色 | `#6366F1` | 專業、企業 |
|
||
| 青色 | `#06B6D4` | 清新、創新 |
|
||
| 橙色 | `#F97316` | 活力、創意 |
|
||
|
||
#### 示範檔案說明
|
||
|
||
`examples/` 目錄包含三個示範檔案：
|
||
|
||
1. **template.csv** - 空白模板
|
||
- 包含所有欄位標題
|
||
- 適合建立新時間軸
|
||
|
||
2. **demo_project_timeline.csv** - 專案開發時間軸
|
||
- 15 筆事件，完整開發週期
|
||
- 涵蓋：需求分析、研發、測試、部署
|
||
- 時間範圍：2024/01-02
|
||
|
||
3. **demo_life_events.csv** - 個人生活時間軸
|
||
- 11 筆事件，記錄 11 年生涯
|
||
- 涵蓋：教育、職涯、生活里程碑
|
||
- 時間範圍：2015-2026
|
||
|
||
4. **demo_product_roadmap.csv** - 產品路線圖
|
||
- 14 筆事件，季度規劃
|
||
- 涵蓋：募資、產品發布、市場擴展
|
||
- 時間範圍：2024-2025
|
||
|
||
### 2. 生成時間軸
|
||
|
||
點擊「生成時間軸」按鈕，系統將自動：
|
||
- 計算最佳時間刻度
|
||
- 處理重疊事件排版
|
||
- 渲染互動式時間軸
|
||
|
||
### 3. 匯出圖表
|
||
|
||
選擇匯出格式和解析度，點擊「匯出」按鈕：
|
||
|
||
- **PNG** - 適合插入文件或簡報
|
||
- **PDF** - 適合印刷和存檔
|
||
- **SVG** - 適合進一步編輯
|
||
|
||
|
||
## 🐛 問題回報
|
||
|
||
如果您發現任何問題，請提供以下資訊：
|
||
|
||
1. 作業系統與版本
|
||
2. Python 與 Node.js 版本
|
||
3. 錯誤訊息或截圖
|
||
4. 重現步驟
|
||
|
||
---
|
||
|
||
**Version:** 1.0.0
|