📊 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：使用啟動腳本（推薦）

# Windows
start_dev.bat

# 系統會自動啟動：
# - 後端 API: http://localhost:8000
# - 前端介面: http://localhost:12010

方法 2：手動啟動

# 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	✅	事件唯一識別碼	evt-001
title	✅	事件標題	專案啟動
start	✅	開始時間	2024-01-01 09:00:00
end	❌	結束時間	2024-01-01 17:00:00
group	❌	事件群組/分類	Phase 1
description	❌	事件詳細描述	專案正式啟動會議
color	❌	事件顏色 (HEX)	#3B82F6

範例 CSV 檔案：

id,title,start,end,group,description,color
evt-001,專案啟動,2024-01-01 09:00:00,2024-01-01 17:00:00,Phase 1,專案正式啟動會議,#3B82F6
evt-002,需求分析,2024-01-02 09:00:00,2024-01-05 18:00:00,Phase 1,收集並分析系統需求,#10B981

常用顏色代碼

顏色	色碼	適用情境
藍色	#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