Files

beabigegg 701bf2d438 修正 README.md：更新欄位說明與範例

主要變更：
- 修正資料格式說明，將 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>

2025-11-06 12:33:11 +08:00

3.7 KiB

Raw Permalink Blame History

📊 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	✅	事件唯一識別碼	P001
title	✅	事件標題	專案啟動會議
time	✅	事件時間	2024-01-02
group	❌	事件群組/分類	專案管理
description	❌	事件詳細描述	專案團隊首次會議，確認目標與時程
color	❌	事件顏色 (HEX)	#3B82F6

範例 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/ 目錄包含三個示範檔案：

template.csv - 空白模板
- 包含所有欄位標題
- 適合建立新時間軸
demo_project_timeline.csv - 專案開發時間軸
- 15 筆事件，完整開發週期
- 涵蓋：需求分析、研發、測試、部署
- 時間範圍：2024/01-02
demo_life_events.csv - 個人生活時間軸
- 11 筆事件，記錄 11 年生涯
- 涵蓋：教育、職涯、生活里程碑
- 時間範圍：2015-2026
demo_product_roadmap.csv - 產品路線圖
- 14 筆事件，季度規劃
- 涵蓋：募資、產品發布、市場擴展
- 時間範圍：2024-2025

2. 生成時間軸

點擊「生成時間軸」按鈕，系統將自動：

計算最佳時間刻度
處理重疊事件排版
渲染互動式時間軸

3. 匯出圖表

選擇匯出格式和解析度，點擊「匯出」按鈕：

PNG - 適合插入文件或簡報
PDF - 適合印刷和存檔
SVG - 適合進一步編輯

🐛 問題回報

如果您發現任何問題，請提供以下資訊：

作業系統與版本
Python 與 Node.js 版本
錯誤訊息或截圖
重現步驟

Version: 1.0.0

3.7 KiB Raw Permalink Blame History Unescape Escape