pkupuk
f6b806617e
Include supplementary documentation, research notes on Lexical/UX, and setup guides.
2522 lines
57 KiB
Markdown
2522 lines
57 KiB
Markdown
# Epic 1: 完整任務定義 (Story 1.3-1.17)
|
||
|
||
**建立日期：** 2025-01-30
|
||
**適用於：** Webflow to Payload CMS + Astro Migration 專案
|
||
|
||
---
|
||
|
||
## 📋 專案全貌
|
||
|
||
### Epic 結構
|
||
|
||
```
|
||
Epic 1: Webflow to Payload CMS + Astro Migration
|
||
├── Story 1.1: Project Infrastructure Setup ✅ 85%
|
||
├── Story 1.2: Payload CMS Collections Definition ⚠️ 43%
|
||
├── Story 1.3: Content Migration Script ⏸️ 0%
|
||
├── Story 1.4: Global Layout Components ⏸️ 0%
|
||
├── Story 1.5: Homepage Implementation ⏸️ 0%
|
||
├── Story 1.6: About Page Implementation ⏸️ 0%
|
||
├── Story 1.7: Solutions Page Implementation ⏸️ 0%
|
||
├── Story 1.8: Contact Page with Form ⏸️ 0%
|
||
├── Story 1.9: Blog System Implementation ⏸️ 0%
|
||
├── Story 1.10: Portfolio Implementation ⏸️ 0%
|
||
├── Story 1.11: Teams Page Implementation ⏸️ 0%
|
||
├── Story 1.12: Authentication System Implementation ⏸️ 0%
|
||
├── Story 1.13: Admin Dashboard ⏸️ 0%
|
||
├── Story 1.14: SEO Implementation ⏸️ 0%
|
||
├── Story 1.15: Performance Optimization ⏸️ 0%
|
||
├── Story 1.16: Deployment to Cloudflare ⏸️ 0%
|
||
└── Story 1.17: Testing and Quality Assurance ⏸️ 0%
|
||
|
||
Total: 1 Epic, 17 Stories
|
||
```
|
||
|
||
### Story 分類
|
||
|
||
**基礎設施 (Infrastructure):**
|
||
- Story 1.1: Project Infrastructure Setup
|
||
- Story 1.2: Payload CMS Collections Definition
|
||
- Story 1.3: Content Migration Script
|
||
|
||
**前端組件 (Frontend Components):**
|
||
- Story 1.4: Global Layout Components (Header/Footer)
|
||
|
||
**頁面實作 (Page Implementation):**
|
||
- Story 1.5: Homepage
|
||
- Story 1.6: About Page
|
||
- Story 1.7: Solutions Page
|
||
- Story 1.8: Contact Page
|
||
|
||
**內容系統 (Content Systems):**
|
||
- Story 1.9: Blog System
|
||
- Story 1.10: Portfolio
|
||
- Story 1.11: Teams Page
|
||
|
||
**後台系統 (Admin System):**
|
||
- Story 1.12: Authentication System
|
||
- Story 1.13: Admin Dashboard
|
||
|
||
**上線準備 (Production Readiness):**
|
||
- Story 1.14: SEO Implementation
|
||
- Story 1.15: Performance Optimization
|
||
- Story 1.16: Deployment to Cloudflare
|
||
- Story 1.17: Testing and Quality Assurance
|
||
|
||
---
|
||
|
||
## 📊 Story 依賴關係矩陣
|
||
|
||
```
|
||
1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10 1.11 1.12 1.13 1.14 1.15 1.16 1.17
|
||
1.1 ✓ ⬆︎
|
||
1.2 ✓ ⬆︎
|
||
1.3 ⬎︎
|
||
1.4 ✓ ⬆︎
|
||
1.5 ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.6 ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.7 ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.8 ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.9 ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.10 ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.11 ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.12 ⬎︎ ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.13 ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.14 ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.15 ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.16 ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
1.17 ⬎︎ ✓ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎ ⬎︎
|
||
|
||
Legend:
|
||
✓ = 直接依賴 (必須先完成)
|
||
⬆︎ = 強烈建議順序
|
||
⬎︎ = 可並行開發
|
||
```
|
||
|
||
---
|
||
|
||
## Story 1.3: Content Migration Script
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Developer,
|
||
I want to create a migration script that imports Webflow content to Payload CMS,
|
||
So that I can automate content transfer and reduce manual errors.
|
||
```
|
||
|
||
### Overall Goal
|
||
建立自動化工具，將 Webflow CMS 導出的內容轉換並匯入到 Payload CMS，確保：
|
||
- 35+ 篇文章完整遷移
|
||
- 4 個分類保留
|
||
- 所有 Portfolio 項目遷移
|
||
- 媒體檔案上傳到 R2
|
||
- SEO 屬性（slugs, meta tags）保留
|
||
- 可重複執行，不產生重複資料
|
||
|
||
### Estimated Effort
|
||
12-16 小時（含測試和除錯）
|
||
|
||
---
|
||
|
||
### Task 1.3.1: Research Webflow Export Format
|
||
|
||
**Description:**
|
||
研究 Webflow CMS 導出的資料格式，建立欄位對應表
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 下載或取得 Webflow JSON/CSV 範例檔案
|
||
- [ ] 分析 Posts 集合的欄位結構
|
||
- [ ] 分析 Categories 集合的欄位結構
|
||
- [ ] 分析 Portfolio 集合的欄位結構
|
||
- [ ] 建立 Webflow → Payload 欄位對應表
|
||
- [ ] 識別資料型別轉換需求
|
||
- [ ] 識別特殊欄位處理需求（richtext, 圖片, 關聯）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 欄位對應表文檔完成 (`docs/migration-field-mapping.md`)
|
||
- [ ] 包含所有 3 個主要集合的對應
|
||
- [ ] 標注資料型別轉換規則
|
||
- [ ] 標注特殊處理需求
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.3.2: Create Migration Script Foundation
|
||
|
||
**Description:**
|
||
建立遷移腳本的基礎架構和配置
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立專案目錄 `apps/backend/scripts/migration/`
|
||
- [ ] 建立 `migrate.ts` 主程式檔案
|
||
- [ ] 建立環境變數配置檔案 `.env.migration`
|
||
- [ ] 實作 Payload CMS API 客戶端
|
||
- [ ] 實作日誌系統（記錄遷移過程）
|
||
- [ ] 實作進度顯示功能
|
||
- [ ] 支援命令列參數（dry-run, verbose, collection filter）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 腳本結構清晰
|
||
- [ ] 可執行 `pnpm tsx scripts/migration/migrate.ts --help`
|
||
- [ ] 支援 `--dry-run` 模式（只驗證不寫入）
|
||
- [ ] 支援 `--collection` 參數（指定遷移哪個集合）
|
||
- [ ] 連接到 Payload CMS API 成功
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.3.3: Implement Posts Migration Logic
|
||
|
||
**Description:**
|
||
實作文章（行銷放大鏡）的遷移邏輯
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 解析 Webflow Posts JSON/CSV
|
||
- [ ] 轉換欄位對應：
|
||
- title → title
|
||
- slug → slug (保留原始值)
|
||
- body → content (richtext → Lexical format)
|
||
- published-date → publishedAt
|
||
- post-category → categories (relationship)
|
||
- featured-image → heroImage (上傳到 R2)
|
||
- seo-title → meta.title
|
||
- seo-description → meta.description
|
||
- [ ] 處理 richtext 內容格式轉換
|
||
- [ ] 處理圖片下載和上傳到 R2
|
||
- [ ] 處理分類關聯（需先遷移 Categories）
|
||
- [ ] 保留原始 publishedDate
|
||
- [ ] 設定狀態為 published
|
||
|
||
**Definition of Done:**
|
||
- [ ] 成功遷移測試資料（5 篇文章）
|
||
- [ ] 圖片成功上傳到 R2
|
||
- [ ] Richtext 格式正確轉換
|
||
- [ ] 分類關聯正確建立
|
||
- [ ] Slug 保留原始值
|
||
- [ ] 可重複執行（檢查重複）
|
||
|
||
**預估時間：** 3 小時
|
||
|
||
---
|
||
|
||
### Task 1.3.4: Implement Categories Migration Logic
|
||
|
||
**Description:**
|
||
實作分類（文章分類）的遷移邏輯
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 解析 Webflow Categories JSON/CSV
|
||
- [ ] 轉換欄位對應：
|
||
- name → title
|
||
- slug → slug
|
||
- 顏色欄位 → textColor, backgroundColor
|
||
- 排序欄位 → order
|
||
- [ ] 處理巢狀結構（如果有）
|
||
- [ ] 設定預設值（order: 0）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 成功遷移所有 4 個分類
|
||
- [ ] 顏色欄位正確轉換
|
||
- [ ] Order 欄位正確設定
|
||
- [ ] 可重複執行
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.3.5: Implement Portfolio Migration Logic
|
||
|
||
**Description:**
|
||
實作作品集（網站設計範本）的遷移邏輯
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 解析 Webflow Portfolio JSON/CSV
|
||
- [ ] 轉換欄位對應：
|
||
- Name → title
|
||
- Slug → slug
|
||
- website-link → url
|
||
- preview-image → image (上傳到 R2)
|
||
- description → description
|
||
- website-type → websiteType
|
||
- tags → tags (array)
|
||
- [ ] 處理圖片下載和上傳到 R2
|
||
- [ ] 處理標籤（字串轉陣列）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 成功遷移測試資料（3 個項目）
|
||
- [ ] 圖片成功上傳到 R2
|
||
- [ ] 標籤正確解析為陣列
|
||
- [ ] 外部連結正確設定
|
||
- [ ] 可重複執行
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.3.6: Implement Media Migration Module
|
||
|
||
**Description:**
|
||
實作媒體檔案遷移模組（下載 + 上傳 R2）
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 從 Webflow 匯出取得所有媒體 URL 清單
|
||
- [ ] 下載圖片到本地臨時目錄
|
||
- [ ] 上傳到 Cloudflare R2
|
||
- [ ] 取得 R2 URL
|
||
- [ ] 更新 Payload 中的媒體引用
|
||
- [ ] 支援批次上傳（並行處理）
|
||
- [ ] 錯誤處理和重試機制
|
||
- [ ] 進度顯示（已處理 x / 總數 y）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 成功下載測試圖片
|
||
- [ ] 成功上傳到 R2
|
||
- [ ] 取得正確的 R2 URL
|
||
- [ ] 支援常見圖片格式（jpg, png, webp）
|
||
- [ ] 支援批次上傳（5 並行）
|
||
- [ ] 錯誤時自動重試（3 次）
|
||
- [ ] 清理本地臨時檔案
|
||
|
||
**預估時間：** 3 小時
|
||
|
||
---
|
||
|
||
### Task 1.3.7: Implement Deduplication Logic
|
||
|
||
**Description:**
|
||
實作重複資料檢查機制，支援安全重複執行
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 根據 slug 檢查是否已存在
|
||
- [ ] Posts: 檢查 slug + publishedDate 組合
|
||
- [ ] Categories: 檢查 slug
|
||
- [ ] Portfolio: 檢查 slug
|
||
- [ ] Media: 根據檔名或 hash 檢查
|
||
- [ ] 支援 `--force` 參數強制覆蓋
|
||
- [ ] 記錄跳過的項目
|
||
- [ ] Dry-run 模式只顯示不執行
|
||
|
||
**Definition of Done:**
|
||
- [ ] 重複執行腳本不產生重複資料
|
||
- [ ] 記錄每次執行的統計：
|
||
- 新增數量
|
||
- 跳過數量（重複）
|
||
- 錯誤數量
|
||
- [ ] Dry-run 模式正確預覽結果
|
||
- [ ] Force 模式可正確覆蓋
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.3.8: Generate Migration Report
|
||
|
||
**Description:**
|
||
產生詳細的遷移報告，供驗證使用
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 生成 JSON 報告檔案
|
||
- [ ] 報告包含：
|
||
- 遷移時間戳
|
||
- 成功遷移清單（ids, slugs）
|
||
- 失敗清單（錯誤原因）
|
||
- 跳過清單（重複項目）
|
||
- 統計摘要
|
||
- [ ] 生成可讀的 Markdown 報告
|
||
- [ ] 儲存到 `reports/migration-{timestamp}.md`
|
||
|
||
**Definition of Done:**
|
||
- [ ] 報告檔案格式清晰易讀
|
||
- [ ] 包含所有關鍵資訊
|
||
- [ ] Markdown 報告可直接分享
|
||
- [ ] 統計資訊準確無誤
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.3.9: Testing and Validation
|
||
|
||
**Description:**
|
||
測試遷移腳本，確保資料正確性
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 測試資料遷移（5 篇文章, 2 分類, 3 個項目）
|
||
- [ ] 驗證 Payload CMS admin 中的內容
|
||
- [ ] 驗證圖片可正常顯示
|
||
- [ ] 驗證 Richtext 格式正確
|
||
- [ ] 驗證關聯關係正確
|
||
- [ ] 測試 Dry-run 模式
|
||
- [ ] 測試重複執行（不產生重複）
|
||
- [ ] 測試 Force 模式（可覆蓋）
|
||
- [ ] 測試錯誤處理（無效資料）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 所有測試案例通過
|
||
- [ ] 手動驗證 10 筆資料正確性
|
||
- [ ] 無資料損壞或格式錯誤
|
||
- [ ] 報告準確反映遷移結果
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
## Story 1.4: Global Layout Components
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Developer,
|
||
I want to create Header and Footer components matching Webflow design,
|
||
So that all pages have consistent navigation and branding.
|
||
```
|
||
|
||
### Overall Goal
|
||
建立全站共用的 Header 和 Footer 組件，實現：
|
||
- 響應式導航選單（桌面/手機）
|
||
- 動態從 Payload CMS 載入導航項目
|
||
- 一致的 Enchun 品牌展示
|
||
- 頁腳動態分類連結
|
||
|
||
### Estimated Effort
|
||
8-10 小時
|
||
|
||
---
|
||
|
||
### Task 1.4.1: Design Component Architecture
|
||
|
||
**Description:**
|
||
規劃 Header 和 Footer 組件的架構和 API
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 定義 Header 組件 Props 介面
|
||
- [ ] 定義 Footer 組件 Props 介面
|
||
- [ ] 規劃 Payload CMS Globals 結構
|
||
- Header global (navItems array)
|
||
- Footer global (company info, social links)
|
||
- [ ] 設計狀態管理（手機選單開闔）
|
||
- [ ] 規劃響應式斷點（991px, 768px, 479px）
|
||
- [ ] 設計顏色系統對應 Webflow
|
||
|
||
**Definition of Done:**
|
||
- [ ] 組件架構文檔完成
|
||
- [ ] Props 型別定義完成
|
||
- [ ] Payload Globals schema 規劃完成
|
||
- [ ] 響應式設計策略文檔完成
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.4.2: Create Header Global in Payload CMS
|
||
|
||
**Description:**
|
||
在 Payload CMS 建立 Header global，管理導航選單
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `globals/Header.ts` 檔案
|
||
- [ ] 定義 navItems 欄位（array）：
|
||
- label (顯示文字)
|
||
- type (link / dropdown / button)
|
||
- url (連結位址)
|
||
- items (子選單 array)
|
||
- badge (Hot / New / none)
|
||
- openInNewTab (boolean)
|
||
- [ ] Admin UI 配置（群組編輯）
|
||
- [ ] 預設導航項目：
|
||
- 關於恩群
|
||
- 行銷方案 (Hot badge)
|
||
- 行銷放大鏡 (New badge)
|
||
- 網站作品
|
||
- 團隊介紹
|
||
- 聯絡我們
|
||
- [ ] 設定 access control
|
||
|
||
**Definition of Done:**
|
||
- [ ] Header global 在 Payload admin 可見
|
||
- [ ] 可編輯所有導航項目
|
||
- [ ] 支援多層下拉選單
|
||
- [ ] Badge 顯示正確
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.4.3: Create Footer Global in Payload CMS
|
||
|
||
**Description:**
|
||
在 Payload CMS 建立 Footer global，管理頁腳內容
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `globals/Footer.ts` 檔案
|
||
- [ ] 定義欄位：
|
||
- companyInfo (object: logo, description, phone, email)
|
||
- socialLinks (array: platform, url)
|
||
- marketingLinks (static array)
|
||
- categoryLinks (dynamic: 關聯 Categories collection)
|
||
- copyrightText (text)
|
||
- [ ] Admin UI 配置（分區編輯）
|
||
- [ ] 預設資料填入
|
||
|
||
**Definition of Done:**
|
||
- [ ] Footer global 在 Payload admin 可見
|
||
- [ ] 可編輯所有頁腳區塊
|
||
- [ ] Category links 動態載入
|
||
- [ ] 預設資料完整
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.4.4: Implement Header.astro Component
|
||
|
||
**Description:**
|
||
實作 Header 組件，包含導航選單和手機選單
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Header 固定在頂部（sticky）
|
||
- [ ] 顯示 Enchun logo（連結到首頁）
|
||
- [ ] 桌面導航選單（從 Payload CMS）
|
||
- [ ] Badge 標籤（Hot/New）
|
||
- [ ] 手機版漢堡選單按鈕
|
||
- [ ] 手機選單全螢幕覆蓋
|
||
- [ ] 手機選單項目點擊後關閉
|
||
- [ ] Scroll 時 Header 背景變化
|
||
|
||
**Definition of Done:**
|
||
- [ ] Header.astro 組件完成
|
||
- [ ] 從 Payload CMS 載入導航資料
|
||
- [ ] 桌面版導航正常顯示
|
||
- [ ] 手機版漢堡選單正常運作
|
||
- [ ] Badge 顯示正確（Hot 紅色, New 綠色）
|
||
- [ ] Responsive 斷點正確
|
||
- [ ] Scroll 行為實作
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.4.5: Implement Footer.astro Component
|
||
|
||
**Description:**
|
||
實作 Footer 組件，包含公司資訊和連結
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 顯示 Enchun logo
|
||
- [ ] 公司描述文字
|
||
- [ ] 聯絡資訊（電話, Email）
|
||
- [ ] 社群媒體連結（Facebook）
|
||
- [ ] 行銷方案連結（靜態）
|
||
- [ ] 行銷放大鏡分類連結（動態從 CMS）
|
||
- [ ] Copyright 顯示（2018 - 2024）
|
||
- [ ] 響應式佈局（桌面 3 欄，手機 1 欄）
|
||
|
||
**Definition of Done:**
|
||
- [ ] Footer.astro 組件完成
|
||
- [ ] 從 Payload CMS 載入資料
|
||
- [ ] 所有區塊正常顯示
|
||
- [ ] Category links 動態載入
|
||
- [ ] 社群連結可點擊
|
||
- [ ] Responsive 佈局正確
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.4.6: Integration with MainLayout
|
||
|
||
**Description:**
|
||
將 Header 和 Footer 整合到 MainLayout.astro
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 更新 `layouts/Layout.astro`
|
||
- [ ] 整合 Header 組件
|
||
- [ ] 整合 Footer 組件
|
||
- [ ] 設定頁面容器樣式
|
||
- [ ] 確保所有頁面使用此 Layout
|
||
- [ ] 測試不同頁面的 Header/Footer 顯示
|
||
|
||
**Definition of Done:**
|
||
- [ ] Layout.astro 更新完成
|
||
- [ ] Header 和 Footer 正確顯示
|
||
- [ ] 所有頁面繼承 Layout
|
||
- [ ] 無視覺問題
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
## Story 1.5: Homepage Implementation
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Visitor,
|
||
I want to view the homepage with hero section and service features,
|
||
So that I can understand what Enchun Digital offers.
|
||
```
|
||
|
||
### Overall Goal
|
||
實作首頁，包含 Hero section、服務特色、Portfolio 預覽、CTA 區塊，視覺保真度 95%+。
|
||
|
||
### Estimated Effort
|
||
6-8 小時
|
||
|
||
---
|
||
|
||
### Task 1.5.1: Create Homepage in Payload CMS
|
||
|
||
**Description:**
|
||
在 Payload CMS 建立首頁內容
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 在 Pages collection 建立 homepage
|
||
- [ ] Slug: `index`
|
||
- [ ] Hero section blocks:
|
||
- Headline
|
||
- Subheadline
|
||
- CTA button text and link
|
||
- [ ] Service features section:
|
||
- 4 個服務特色卡片
|
||
- Icon + title + description
|
||
- [ ] Portfolio preview section
|
||
- [ ] Final CTA section
|
||
- [ ] SEO meta data
|
||
|
||
**Definition of Done:**
|
||
- [ ] Homepage 在 Payload admin 可編輯
|
||
- [ ] 所有 sections 可編輯
|
||
- [ ] Preview 功能正常
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.5.2: Create index.astro Route
|
||
|
||
**Description:**
|
||
建立首頁路由和頁面結構
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/index.astro`
|
||
- [ ] 使用 MainLayout
|
||
- [ ] 從 Payload API 載入首頁內容
|
||
- [ ] 實作各 section 組件：
|
||
- Hero section
|
||
- Service features grid
|
||
- Portfolio preview
|
||
- CTA section
|
||
- [ ] 錯誤處理（404 或 API 失敗）
|
||
|
||
**Definition of Done:**
|
||
- [ ] index.astro 路由建立
|
||
- [ ] 從 Payload API 成功載入資料
|
||
- [ ] 所有 sections 正確顯示
|
||
- [ ] 錯誤處理正常
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.5.3: Implement Hero Section
|
||
|
||
**Description:**
|
||
實作首頁 Hero 區塊
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 全背景圖片/影片
|
||
- [ ] 標題文字（headline）
|
||
- [ ] 副標題（subheadline）
|
||
- [ ] CTA 按鈕（樣式、動畫）
|
||
- [ ] 覆蓋層（深色遮罩）
|
||
- [ ] 響應式對齊（桌面置中，手機置中）
|
||
- [ ] 動畫效果（淡入、滑入）
|
||
|
||
**Definition of Done:**
|
||
- [ ] Hero.astro 組件完成
|
||
- [ ] 視覺符合 Webflow 設計
|
||
- [ ] 響應式斷點正確
|
||
- [ ] CTA 按鈕可點擊
|
||
- [ ] 動畫流暢
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.5.4: Implement Service Features Grid
|
||
|
||
**Description:**
|
||
實作服務特色展示區塊
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 4 個服務特色卡片
|
||
- [ ] 每個卡片包含：
|
||
- Icon (使用 Iconify 或 SVG)
|
||
- 標題（中文）
|
||
- 描述文字
|
||
- [ ] Grid 佈局（桌面 2x2，手機 1x4）
|
||
- [ ] Hover 效果（陰影、上移）
|
||
- [ ] 卡片間距一致
|
||
|
||
**Definition of Done:**
|
||
- [ ] ServiceFeatures.astro 組件完成
|
||
- [ ] 從 Payload CMS 載入資料
|
||
- [ ] 視覺符合 Webflow 設計
|
||
- [ ] Grid 佈局響應式
|
||
- [ ] Hover 效果流暢
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.5.5: Implement Portfolio Preview Section
|
||
|
||
**Description:**
|
||
實作作品集預覽區塊
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 顯示 3-4 個精選作品
|
||
- [ ] 每個項目卡片：
|
||
- 項目圖片
|
||
- 項目標題
|
||
- 簡短描述
|
||
- "查看作品" 按鈕
|
||
- [ ] Grid 佈局（桌面 3-4 欄，手機 1-2 欄）
|
||
- [ ] 連結到 Portfolio 頁面
|
||
|
||
**Definition of Done:**
|
||
- [ ] PortfolioPreview.astro 組件完成
|
||
- [ ] 從 Payload CMS 載入精選作品
|
||
- [ ] 卡片設計符合 Webflow
|
||
- [ ] 連結正確指向 Portfolio
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.5.6: Implement CTA Section
|
||
|
||
**Description:**
|
||
實作最終行動呼籲區塊
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 標題：「準備好開始新的旅程了嗎？」
|
||
- [ ] 副標題文字
|
||
- [ ] 主要 CTA 按鈕（聯絡我們）
|
||
- [ ] 次要 CTA 按鈕（查看案例）
|
||
- [ ] 背景色區塊（品牌色）
|
||
- [ ] 按鈕樣式（主色、次色）
|
||
- [ ] 居中對齊
|
||
|
||
**Definition of Done:**
|
||
- [ ] CTASection.astro 組件完成
|
||
- [ ] 從 Payload CMS 載入內容
|
||
- [ ] 兩個按鈕功能正常
|
||
- [ ] 視覺突出吸引注意
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.5.7: Performance Optimization and Testing
|
||
|
||
**Description:**
|
||
優化首頁效能並測試
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 圖片優化（WebP, responsive sizes）
|
||
- [ ] 懶加載首屏內容
|
||
- [ ] Lighthouse Performance audit ≥ 90
|
||
- [ ] FCP < 1.5s
|
||
- [ ] LCP < 2.5s
|
||
- [ ] CLS < 0.1
|
||
- [ ] 視覺保真度測試（對比 Webflow）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 所有效能指標達標
|
||
- [ ] 視覺保真度 ≥ 95%
|
||
- [ ] 所有瀏覽器測試通過
|
||
- [ ] 移動版測試通過
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
## Story 1.6: About Page Implementation
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Visitor,
|
||
I want to learn about Enchun Digital's values and differences,
|
||
So that I can trust them as my digital marketing partner.
|
||
```
|
||
|
||
### Estimated Effort
|
||
6-8 小時
|
||
|
||
---
|
||
|
||
### Task 1.6.1: Create About Page in Payload CMS
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 about-enchun 頁面（slug: about-enchun）
|
||
- [ ] Hero section:
|
||
- Title: "關於恩群數位"
|
||
- [ ] Service features section:
|
||
- 4 個特色卡片
|
||
- 在地化優先
|
||
- 高投資轉換率
|
||
- 數據優先
|
||
- 關係優於銷售
|
||
- [ ] Comparison table:
|
||
- 恩群數位 vs 其他行銷公司
|
||
- 多行對比
|
||
- [ ] CTA section:
|
||
- Title: "跟行銷顧問聊聊"
|
||
- 按鈕連結到聯絡頁面
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.6.2: Create about-enchun.astro Route
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立路由檔案
|
||
- [ ] 使用 MainLayout
|
||
- [ ] 從 Payload API 載入內容
|
||
- [ ] 實作各 section 組件
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.6.3: Implement Hero Section
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 背景圖片
|
||
- [ ] Title: "關於恩群數位"
|
||
- [ ] 副標題（如有）
|
||
- [ ] 覆蓋層
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.6.4: Implement Service Features Section
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 4 個特色卡片
|
||
- [ ] Icon + Title + Description
|
||
- [ ] Grid 佈局
|
||
- [ ] Hover 效果
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.6.5: Implement Comparison Table
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Table 結構：
|
||
- 左欄：恩群數位
|
||
- 右欄：其他行銷公司
|
||
- [ ] 多行對比項目
|
||
- [ ] 表格樣式（邊框、間距）
|
||
- [ ] 響應式（手機可水平滾動）
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.6.6: Implement CTA Section
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Title: "跟行銷顧問聊聊"
|
||
- [ ] CTA 按鈕
|
||
- [ ] 連結到 contact-us 或直接 mailto
|
||
|
||
**預估時間：** 0.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.6.7: Performance and Visual Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Lighthouse Performance ≥ 90
|
||
- [ ] 視覺保真度 ≥ 95%
|
||
- [ ] Responsive 測試
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
## Story 1.7: Solutions Page Implementation
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Visitor,
|
||
I want to see the marketing services offered,
|
||
So that I can understand how Enchun can help my business.
|
||
```
|
||
|
||
### Estimated Effort
|
||
4-6 小時
|
||
|
||
---
|
||
|
||
### Task 1.7.1: Create Solutions Page in Payload CMS
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 marketing-solutions 頁面（slug: marketing-solutions）
|
||
- [ ] Hero section:
|
||
- Title: "行銷方案"
|
||
- [ ] Services list:
|
||
- Google 商家關鍵字
|
||
- Google Ads
|
||
- 社群代操
|
||
- 論壇行銷
|
||
- 網紅行銷
|
||
- 形象影片
|
||
- [ ] 每個服務包含：
|
||
- Title
|
||
- Description
|
||
- 詳細資訊（可選）
|
||
- [ ] Service badges:
|
||
- "Hot" badge（熱門服務）
|
||
- "New" badge（新服務）
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.7.2: Create marketing-solutions.astro Route
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立路由檔案
|
||
- [ ] 使用 MainLayout
|
||
- [ ] 從 Payload API 載入內容
|
||
- [ ] 實作 services list 組件
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.7.3: Implement Hero Section
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 背景圖片
|
||
- [ ] Title: "行銷方案"
|
||
- [ ] 副標題（如有）
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.7.4: Implement Services List Component
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 6 個服務項目卡片
|
||
- [ ] 每個卡片包含：
|
||
- Icon
|
||
- Service title
|
||
- Description
|
||
- "Hot" badge（如有）
|
||
- "New" badge（如有）
|
||
- [ ] Grid 或 List 佈局
|
||
- [ ] Hover 效果
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.7.5: Performance and Visual Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Lighthouse Performance ≥ 90
|
||
- [ ] 視覺保真度 ≥ 95%
|
||
- [ ] Responsive 測試
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
## Story 1.8: Contact Page with Form
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Potential Client,
|
||
I want to contact Enchun Digital through a form,
|
||
So that I can inquire about their services.
|
||
```
|
||
|
||
### Estimated Effort
|
||
6-8 小時
|
||
|
||
---
|
||
|
||
### Task 1.8.1: Create Contact Page in Payload CMS
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 contact-us 頁面（slug: contact-us）
|
||
- [ ] Hero section:
|
||
- Title: "聯絡我們"
|
||
- Description
|
||
- [ ] Contact form section:
|
||
- 表單標題
|
||
- 表單說明
|
||
- [ ] Contact info section:
|
||
- Phone: 02-55700527
|
||
- Email: enchuntaiwan@gmail.com
|
||
- Facebook link
|
||
- [ ] CTA section
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.8.2: Create contact-us.astro Route
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立路由檔案
|
||
- [ ] 使用 MainLayout
|
||
- [ ] 從 Payload API 載入內容
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.8.3: Implement Contact Form
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 表單欄位：
|
||
- Name (required)
|
||
- Email (required, email validation)
|
||
- Phone (optional)
|
||
- Message (required, textarea)
|
||
- Service interest (dropdown/select)
|
||
- [ ] Client-side validation
|
||
- [ ] Submit 按鈕（樣式、loading state）
|
||
- [ ] Success message display
|
||
- [ ] Error message display
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.8.4: Implement Form Submission Logic
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 API route `/api/contact`
|
||
- [ ] Cloudflare Worker 處理表單提交
|
||
- [ ] Email 發送（使用 Resend）
|
||
- [ ] Spam protection:
|
||
- Honeypot field
|
||
- Rate limiting
|
||
- [ ] 表單資料儲存（可選）
|
||
- [ ] 錯誤處理
|
||
|
||
**Definition of Done:**
|
||
- [ ] 表單提交成功
|
||
- [ ] Email 正確發送
|
||
- [ ] Spam protection 正常運作
|
||
- [ ] 錯誤處理完善
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.8.5: Implement Contact Info Display
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Phone number顯示
|
||
- [ ] Email 顯示（可點擊 mailto）
|
||
- [ ] Facebook link（可點擊）
|
||
- [ ] Icon 或文字標籤
|
||
|
||
**預估時間：** 0.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.8.6: Implement CTA Section
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 標題和描述
|
||
- [ ] CTA 按鈕
|
||
|
||
**預估時間：** 0.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.8.7: Testing and Validation
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 表單驗證測試
|
||
- [ ] 表單提交測試
|
||
- [ ] Email 接收測試
|
||
- [ ] Spam protection 測試
|
||
- [ ] 視覺保真度 ≥ 95%
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
## Story 1.9: Blog System Implementation
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Visitor,
|
||
I want to browse marketing articles and insights,
|
||
So that I can learn from Enchun's expertise.
|
||
```
|
||
|
||
### Overall Goal
|
||
建立完整的部落格系統，包含文章列表、文章詳情、分類頁面，支援分類篩選和搜尋。
|
||
|
||
### Estimated Effort
|
||
12-16 小時
|
||
|
||
---
|
||
|
||
### Task 1.9.1: Design Blog Architecture
|
||
|
||
**Description:**
|
||
規劃部落格系統的架構和路由
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 定義路由結構：
|
||
- `/blog` - 文章列表
|
||
- `/blog/[slug]` - 文章詳情
|
||
- `/blog/category/[slug]` - 分類頁面
|
||
- [ ] 設計 Payload CMS Posts collection 擴展
|
||
- [ ] 設計分類篩選機制
|
||
- [ ] 規劃 SEO 策略（每頁獨特 meta tags）
|
||
- [ ] 設計分頁機制
|
||
|
||
**Definition of Done:**
|
||
- [ ] 路由架構文檔完成
|
||
- [ ] Posts collection 擴展計劃完成
|
||
- [ ] 分類篩選策略定義
|
||
- [ ] SEO 實作計劃完成
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.9.2: Implement Blog Listing Page
|
||
|
||
**Description:**
|
||
實作文章列表頁面
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/blog/index.astro`
|
||
- [ ] 從 Payload API 載入已發布文章（status: published）
|
||
- [ ] 預設排序：publishedDate 降序
|
||
- [ ] 分類篩選 UI：
|
||
- 分類標籤（從 Categories collection）
|
||
- 點擊後過濾文章
|
||
- "全部" 選項
|
||
- [ ] 文章卡片顯示：
|
||
- Featured image
|
||
- Title
|
||
- Excerpt (從 Posts.excerpt)
|
||
- Category badge
|
||
- Published date
|
||
- [ ] 分頁或無限滾動
|
||
- [ ] SEO meta tags
|
||
|
||
**Definition of Done:**
|
||
- [ ] /blog 頁面正常顯示
|
||
- [ ] 文章列表正確載入
|
||
- [ ] 分類篩選功能正常
|
||
- [ ] 分頁功能正常（或無限滾動）
|
||
- [ ] SEO meta 正確
|
||
|
||
**預估時間：** 2.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.9.3: Implement Article Detail Page
|
||
|
||
**Description:**
|
||
實作文章詳情頁面
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/blog/[slug].astro`
|
||
- [ ] 從 Payload API 載入文章（根據 slug）
|
||
- [ ] Hero section:
|
||
- Category badge
|
||
- Title
|
||
- Published date
|
||
- Author（如有）
|
||
- [ ] 文章內容區塊：
|
||
- Rich text 渲染（Lexical format）
|
||
- 圖片顯示
|
||
- 程式碼區塊（如有）
|
||
- [ ] Related articles section:
|
||
- 同分類文章
|
||
- 3-5 篇
|
||
- 卡片式顯示
|
||
- [ ] Social sharing buttons:
|
||
- Facebook share
|
||
- LINE share
|
||
- Copy link
|
||
- [ ] OG tags 配置（動態從 article.ogImage）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 文章詳情頁正常顯示
|
||
- [ ] Rich text 格式正確
|
||
- [ ] Related articles 相關且正確
|
||
- [ ] Social sharing 功能正常
|
||
- [ ] SEO 和 OG tags 正確
|
||
|
||
**預估時間：** 3 小時
|
||
|
||
---
|
||
|
||
### Task 1.9.4: Implement Category Page
|
||
|
||
**Description:**
|
||
實作分類頁面
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/blog/category/[slug].astro`
|
||
- [ ] 從 Payload API 載入分類資訊
|
||
- [ ] 顯示分類名稱和描述
|
||
- [ ] 該分類文章列表
|
||
- [ ] 分類顏色主題：
|
||
- 使用 Categories.textColor
|
||
- 使用 Categories.backgroundColor
|
||
- Badge 使用分類顏色
|
||
- [ ] SEO meta tags（動態）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 分類頁面正常顯示
|
||
- [ ] 文章列表正確過濾
|
||
- [ ] 顏色主題套用
|
||
- [ ] SEO tags 正確
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.9.5: Extend Posts Collection for Blog Features
|
||
|
||
**Description:**
|
||
擴展 Posts collection 以支援部落格功能
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 添加 `excerpt` 欄位（已包含在 Story 1.2）
|
||
- [ ] 添加 `ogImage` 欄位（已包含在 Story 1.2）
|
||
- [ ] 添加 `showInFooter` 欄位（已包含在 Story 1.2）
|
||
- [ ] 添加 `relatedPosts` 欄位（關聯同分類文章）
|
||
- [ ] 添加 `readingTime` 欄位（計算閱讀時間）
|
||
- [ ] 更新 admin UI 配置
|
||
|
||
**Definition of Done:**
|
||
- [ ] 所有新欄位可編輯
|
||
- [ ] relatedPosts 可選擇多個文章
|
||
- [ ] readingTime 自動計算（字數 / 200）
|
||
- [ ] Types regenerated
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.9.6: Implement Search/Filter Functionality (Optional)
|
||
|
||
**Description:**
|
||
實作文章搜尋功能（可選）
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 搜尋框 UI
|
||
- [ ] Payload API `_q` 參數搜尋
|
||
- [ ] 即時搜尋（debounce）
|
||
- [ ] 搜尋結果頁面
|
||
|
||
**Definition of Done:**
|
||
- [ ] 搜尋功能正常
|
||
- [ ] 即時搜尋流暢
|
||
- [ ] 搜尋結果準確
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.9.7: Performance Optimization and Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Lighthouse Performance ≥ 90 (所有頁面)
|
||
- [ ] 圖片懶加載
|
||
- [ ] 程式碼 syntax highlighting
|
||
- [ ] 視覺保真度 ≥ 95%
|
||
- [ ] 分頁效能測試
|
||
- [ ] 跨瀏覽器測試
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
## Story 1.10: Portfolio Implementation
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Potential Client,
|
||
I want to see Enchun's past website projects,
|
||
So that I can evaluate their design capabilities.
|
||
```
|
||
|
||
### Estimated Effort
|
||
6-8 小時
|
||
|
||
---
|
||
|
||
### Task 1.10.1: Design Portfolio Architecture
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 定義路由結構：
|
||
- `/website-portfolio` - 列表頁
|
||
- `/webdesign-profolio/[slug]` - 詳情頁
|
||
- [ ] 設計 Portfolio collection 擴展
|
||
- [ ] 設計篩選機制（按類型、標籤）
|
||
- [ ] SEO 策略
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.10.2: Implement Portfolio Listing Page
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/website-portfolio.astro`
|
||
- [ ] 2-column grid 佈局
|
||
- [ ] Portfolio card 顯示：
|
||
- Project image
|
||
- Project title
|
||
- Description
|
||
- Tags (e.g., "一頁式銷售", "客戶預約")
|
||
- [ ] 從 Payload API 載入所有 portfolio
|
||
- [ ] Hover 效果（顯示更多資訊）
|
||
- [ ] SEO meta tags
|
||
|
||
**Definition of Done:**
|
||
- [ ] Portfolio 列表頁正常顯示
|
||
- [ ] 所有項目正確載入
|
||
- [ ] Grid 佈局響應式
|
||
- [ ] Hover 效果流暢
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.10.3: Implement Portfolio Detail Page
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/webdesign-profolio/[slug].astro`
|
||
- [ ] 從 Payload API 載入專案資料
|
||
- [ ] Hero section:
|
||
- Project image
|
||
- Project title
|
||
- Tags
|
||
- [ ] 專案描述區塊
|
||
- [ ] "前往網站" 按鈕（外部連結 url）
|
||
- [ ] Image gallery（多圖片輪播）
|
||
- [ ] Case study 內容（如有）
|
||
- [ ] 相關專案推薦
|
||
|
||
**Definition of Done:**
|
||
- [ ] 專案詳情頁正常顯示
|
||
- [ ] 外部連結正確
|
||
- [ ] Gallery 功能正常
|
||
- [ ] SEO tags 正確
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.10.4: Implement Portfolio Filter (Optional)
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 篩選 UI（按 websiteType 或 tags）
|
||
- [ ] 即時篩選
|
||
- [ ] 篩選結果計數顯示
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.10.5: Performance and Visual Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Lighthouse Performance ≥ 90
|
||
- [ ] 視覺保真度 ≥ 95%
|
||
- [ ] 圖片優化（WebP, lazy loading）
|
||
- [ ] Gallery 載入效能
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
## Story 1.11: Teams Page Implementation
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Visitor,
|
||
I want to see the Enchun team members,
|
||
So that I can know who will be working on my project.
|
||
```
|
||
|
||
### Estimated Effort
|
||
4-6 小時
|
||
|
||
---
|
||
|
||
### Task 1.11.1: Design Teams Architecture
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 決定是否使用 Payload CMS collection
|
||
- 選項 A: 建立 Teams collection（可編輯）
|
||
- 選項 B: 硬編碼（資料量少）
|
||
- [ ] 路由：`/teams`
|
||
- [ ] SEO 策略
|
||
|
||
**建議：** 使用 Teams collection 以保持一致性
|
||
|
||
**預估時間：** 0.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.11.2: Create Teams Collection (if using CMS)
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `collections/Teams/index.ts`
|
||
- [ ] Slug: `teams`
|
||
- [ ] 欄位：
|
||
- name (成員姓名)
|
||
- role (職稱)
|
||
- photo (upload to media)
|
||
- bio (簡介, richtext)
|
||
- order (排序)
|
||
- email (email, 可選)
|
||
- [ ] Access control
|
||
- [ ] Admin UI 配置
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.11.3: Implement Teams Page
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/teams.astro`
|
||
- [ ] 從 Payload API 載入團隊成員
|
||
- [ ] Grid 佈局（桌面 3-4 欄，手機 2 欄）
|
||
- [ ] Team member card:
|
||
- Photo (圓形裁切)
|
||
- Name
|
||
- Role/title
|
||
- Bio（截斷顯示或展開）
|
||
- [ ] Order 排序顯示
|
||
- [ ] SEO meta tags
|
||
|
||
**Definition of Done:**
|
||
- [ ] Teams 頁面正常顯示
|
||
- [ ] 所有成員正確載入
|
||
- [ ] 圓形照片裁切正確
|
||
- [ ] 響應式佈局
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.11.4: Performance and Visual Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Lighthouse Performance ≥ 90
|
||
- [ ] 視覺保真度 ≥ 95%
|
||
- [ ] 圓形照片效能最佳化
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
## Story 1.12: Authentication System Implementation
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Content Editor or Admin,
|
||
I want to securely log in to the admin area,
|
||
So that I can manage website content.
|
||
```
|
||
|
||
### Estimated Effort
|
||
8-10 小時
|
||
|
||
---
|
||
|
||
### Task 1.12.1: Design Authentication Architecture
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 選擇認證方案：
|
||
- Payload CMS built-in JWT ✅ (已決定)
|
||
- Session management via HTTP-only cookies
|
||
- [ ] 定義路由保護策略：
|
||
- `/admin/*` 需要認證
|
||
- `/api/*` 部分需要認證
|
||
- [ ] 定義角色權限：
|
||
- Admin: 完整權限
|
||
- Editor: 僅內容管理
|
||
- [ ] 設計登入流程：
|
||
- 登入頁面
|
||
- 忘記密碼流程
|
||
- Email 驗證
|
||
|
||
**Definition of Done:**
|
||
- [ ] 認證架構文檔完成
|
||
- [ ] 角色權限矩陣完成
|
||
- [ ] 流程圖完成
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.12.2: Implement Login Page
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/admin/login.astro`
|
||
- [ ] Login form:
|
||
- Email input
|
||
- Password input
|
||
- "Remember me" checkbox
|
||
- Login button
|
||
- Forgot password link
|
||
- [ ] Client-side validation
|
||
- [ ] Error message display
|
||
- [ ] Loading state
|
||
- [ ] 連結到 Payload CMS `/api/users/login`
|
||
- [ ] 成功後重定向到 `/admin/dashboard`
|
||
|
||
**Definition of Done:**
|
||
- [ ] 登入頁面設計完整
|
||
- [ ] 表單驗證正常
|
||
- [ ] API 整合完成
|
||
- [ ] 重定向正確
|
||
- [ ] 錯誤處理完善
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.12.3: Implement Payload Authentication Middleware
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Payload CMS 已配置 built-in auth (✅ 完成)
|
||
- [ ] 設定 HTTP-only cookies
|
||
- [ ] JWT token 管理
|
||
- [ ] Token refresh mechanism
|
||
- [ ] Session timeout 配置
|
||
|
||
**定義 of Done:**
|
||
- [ ] Payload auth 配置正確
|
||
- [ ] Cookies 安全（HTTP-only, secure, sameSite）
|
||
- [ ] Token 自動刷新
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.12.4: Implement Route Protection
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `src/middleware.ts`
|
||
- [ ] 保護所有 `/admin/*` 路由
|
||
- [ ] 未認證重定向到 `/admin/login`
|
||
- [ ] 已認證允許通過
|
||
- [ ] Payload session verification
|
||
|
||
**Definition of Done:**
|
||
- [ ] Middleware 正確攔截未認證請求
|
||
- [ ] 重定向正常運作
|
||
- [ ] Payload session 驗證正確
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.12.5: Implement Role-Based Access Control
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Users collection 添加 `role` 欄位 (admin, editor)
|
||
- [ ] 建立 `access/adminOnly.ts`
|
||
- [ ] 建立 `access/adminOrEditor.ts`
|
||
- [ ] 更新 Users collection access:
|
||
- delete: adminOnly
|
||
- [ ] 更新 Posts/Pages access:
|
||
- create/update/delete: adminOrEditor
|
||
- [ ] 更新 Settings access:
|
||
- all: adminOnly
|
||
- [ ] 重新生成型別
|
||
|
||
**Definition of Done:**
|
||
- [ ] Role 欄位可編輯
|
||
- [ ] Access functions 正確執行
|
||
- [ ] Admin 可完整權限
|
||
- [ ] Editor 僅內容管理權限
|
||
- [ ] 測試兩種角色權限
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.12.6: Implement Password Reset Flow
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] "Forgot password" 連結
|
||
- [ ] 輸入 email 頁面
|
||
- [ ] Payload forgot password API
|
||
- [ ] Resend email 發送重設連結
|
||
- [ ] 重設密碼頁面
|
||
- [ ] Email 驗證 token
|
||
- [ ] 更新密碼
|
||
- [ ] 成功訊息
|
||
|
||
**Definition of Done:**
|
||
- [ ] 忘記密碼流程完整
|
||
- [ ] Email 正確發送
|
||
- [ ] Token 驗證正常
|
||
- [ ] 密碼更新成功
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.12.7: Implement Logout Functionality
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] "登出" 按鈕（在 Header 或 Dashboard）
|
||
- [ ] 呼叫 Payload `/api/users/logout`
|
||
- [ ] 清除本地 session
|
||
- [ ] 重定向到首頁或登入頁
|
||
|
||
**預估時間：** 0.5 小時
|
||
|
||
---
|
||
|
||
## Story 1.13: Admin Dashboard
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As an Authenticated User,
|
||
I want to see a dashboard after logging in,
|
||
So that I can access key features quickly.
|
||
```
|
||
|
||
### Estimated Effort
|
||
4-6 小時
|
||
|
||
---
|
||
|
||
### Task 1.13.1: Design Dashboard Layout
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Dashboard layout 結構
|
||
- [ ] Sidebar navigation:
|
||
- Dashboard
|
||
- Content (Posts, Pages, Portfolio, Teams)
|
||
- Media
|
||
- Settings
|
||
- Logout
|
||
- [ ] Main content area
|
||
- [ ] User profile header
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.13.2: Create Dashboard Route
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `apps/frontend/src/pages/admin/dashboard.astro`
|
||
- [ ] 使用 AdminLayout（不同於 MainLayout）
|
||
- [ ] Route protection via middleware
|
||
- [ ] 從 Payload API 載入統計資料
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.13.3: Implement Quick Stats Section
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 統計卡片：
|
||
- Total posts
|
||
- Published posts
|
||
- Draft posts
|
||
- Total portfolio items
|
||
- Total categories
|
||
- Total team members
|
||
- [ ] 從 Payload API 計算統計：
|
||
- `/api/posts?where[status][equals]=published&limit=0`
|
||
- `/api/posts?where[status][equals]=draft&limit=0`
|
||
- `/api/portfolio?limit=0`
|
||
- [ ] 即時載入
|
||
- [ ] Loading states
|
||
|
||
**Definition of Done:**
|
||
- [ ] 統計資料準確
|
||
- [ ] Loading states 正確
|
||
- [ ] 數據即時更新（可選）
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.13.4: Implement Quick Actions
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Quick action 按鈕：
|
||
- "新增文章" → `/admin/collection/posts/create`
|
||
- "新增作品" → `/admin/collection/portfolio/create`
|
||
- "前往 CMS" → `/admin/collections`
|
||
- [ ] Button 設計一致
|
||
- [ ] Hover 效果
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.13.5: Implement Recent Activity List
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 顯示最近 5 筆內容變更
|
||
- [ ] Activity type:
|
||
- Created post
|
||
- Updated post
|
||
- Published post
|
||
- Created portfolio
|
||
- [ ] 顯示標題和時間
|
||
- [ ] 連結到編輯頁面
|
||
- [ ] 從 Payload API 查詢：
|
||
- `/api/posts?sort=-updatedAt&limit=5`
|
||
- `/api/portfolio?sort=-updatedAt&limit=5`
|
||
|
||
**定義 of Done:**
|
||
- [ ] 最近活動列表正確
|
||
- [ ] 時間戳格式易讀
|
||
- [ ] 連結正確
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.13.6: Implement User Profile Section
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 顯示用戶資訊：
|
||
- Name
|
||
- Email
|
||
- Role
|
||
- Avatar (如有)
|
||
- [ ] "登出" 按鈕
|
||
- [ ] "個人設定" 按鈕（可選）
|
||
|
||
**預估時間：** 0.5 小時
|
||
|
||
---
|
||
|
||
## Story 1.14: SEO Implementation
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Marketing Manager,
|
||
I want to maintain SEO rankings after migration,
|
||
So that organic traffic is not lost.
|
||
```
|
||
|
||
### Estimated Effort
|
||
8-10 小時
|
||
|
||
---
|
||
|
||
### Task 1.14.1: Generate Dynamic Sitemap
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 建立 `/sitemap.xml` 動態生成
|
||
- [ ] 包含所有公開頁面：
|
||
- Homepage
|
||
- Pages (所有 published)
|
||
- Posts (所有 published)
|
||
- Portfolio items
|
||
- Categories
|
||
- Teams
|
||
- [ ] 使用 `next-sitemap` 套件（已配置）
|
||
- [ ] 自動更新（內容變更時）
|
||
- [ ] Sitemap 提交到 Google Search Console
|
||
|
||
**Definition of Done:**
|
||
- [ ] `/sitemap.xml` 可訪問
|
||
- [ ] 包含所有必要 URL
|
||
- [ ] XML 格式正確
|
||
- [ ] 自動更新機制運作
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.14.2: Implement Meta Tags System
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 所有頁面包含 meta tags：
|
||
- `<title>`
|
||
- `<meta name="description">`
|
||
- `<meta property="og:title">`
|
||
- `<meta property="og:description">`
|
||
- `<meta property="og:image">`
|
||
- `<link rel="canonical">`
|
||
- [ ] Payload SEO plugin 配置（已完成）
|
||
- [ ] 動態 meta tags from Payload CMS
|
||
- [ ] Social share preview 測試
|
||
|
||
**Definition of Done:**
|
||
- [ ] 所有頁面 meta tags 完整
|
||
- [ ] OG tags 正確
|
||
- [ ] Social share 測試通過
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.14.3: Create 301 Redirect Map
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 從 Webflow 匯出取得所有 URL
|
||
- [ ] 建立 301 redirect 對應表
|
||
- [ ] Webflow URL → New URL
|
||
- [ ] 實作 redirects in:
|
||
- Astro middleware
|
||
- 或 Payload Redirects plugin（已配置）
|
||
- [ ] 測試所有關鍵 redirects
|
||
- [ ] 監控 404 錯誤
|
||
|
||
**Definition of Done:**
|
||
- [ ] Redirect map 文檔完成
|
||
- [ ] 301 redirects 正確運作
|
||
- [ ] 所有關鍵頁面可訪問
|
||
- [ ] 404 錯誤降至最低
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.14.4: Setup Google Analytics
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 使用現有 GA ID: G-DKBZWCGGZR
|
||
- [ ] 在 MainLayout 加入 GA script
|
||
- [ ] 追蹤事件：
|
||
- Page views
|
||
- Form submissions
|
||
- External link clicks
|
||
- [ ] 驗證 GA 接收資料
|
||
|
||
**Definition of Done:**
|
||
- [ ] GA script 正確載入
|
||
- [ ] 事件追蹤正常
|
||
- [ ] GA Real-time 測試通過
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.14.5: Implement Structured Data (Schema.org)
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 為首頁加入 Organization schema
|
||
- [ ] 為文章加入 Article schema
|
||
- [ ] 為作品加入 CreativeWork schema
|
||
- [ ] JSON-LD 格式
|
||
- [ ] Google Rich Results Test 驗證
|
||
|
||
**Definition of Done:**
|
||
- [ ] Structured data 正確
|
||
- [ ] Rich Results 無錯誤
|
||
- [ ] 驗證測試通過
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.14.6: SEO Testing and Validation
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Lighthouse SEO score ≥ 95
|
||
- [ ] Meta tags 測試
|
||
- [ ] OG tags 測試（Facebook Debugger）
|
||
- [ ] Sitemap 驗證（Google Search Console）
|
||
- [ ] Redirects 測試
|
||
- [ ] GA 測試
|
||
- [ ] SEO 完整報告
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
## Story 1.15: Performance Optimization
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a Visitor,
|
||
I want pages to load quickly,
|
||
So that I have a smooth browsing experience.
|
||
```
|
||
|
||
### Estimated Effort
|
||
8-12 小時
|
||
|
||
---
|
||
|
||
### Task 1.15.1: Performance Audit and Baseline
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 對所有頁面執行 Lighthouse audit
|
||
- [ ] 記錄 baseline scores:
|
||
- Performance
|
||
- Accessibility
|
||
- Best Practices
|
||
- SEO
|
||
- [ ] 識別關鍵問題：
|
||
- Large images
|
||
- Render-blocking resources
|
||
- Unused JavaScript
|
||
- Unoptimized CSS
|
||
- [ ] 建立改善計劃
|
||
|
||
**定義 of Done:**
|
||
- [ ] Baseline audit 報告完成
|
||
- [ ] 問題清單優先級排序
|
||
- [ ] 改善計劃文檔完成
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.15.2: Optimize Images
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 轉換所有圖片為 WebP 格式
|
||
- [ ] 實作 responsive images:
|
||
- `srcset` for different sizes
|
||
- sizes attribute
|
||
- [ ] 懶加載非首屏圖片：
|
||
- Native loading="lazy"
|
||
- JavaScript lazy loading fallback
|
||
- [ ] 圖片壓縮：
|
||
- 使用 Sharp 或 ImageOptim API
|
||
- 質質調整（80-90%）
|
||
- [ ] 圖片 CDN 配置（Cloudflare Images）
|
||
|
||
**Definition of Done:**
|
||
- [ ] 所有圖片為 WebP 格式
|
||
- [ ] Responsive images 正確
|
||
- [ ] Lazy loading 運作
|
||
- [ ] 圖片大小減少 50%+
|
||
- [ ] LCP 改善 ≥ 20%
|
||
|
||
**預估時間：** 3 小時
|
||
|
||
---
|
||
|
||
### Task 1.15.3: Optimize CSS and JavaScript
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] CSS minification（Tailwind 已處理）
|
||
- [ ] CSS purging（移除未使用樣式）
|
||
- [ ] JavaScript minification
|
||
- [ ] Code splitting:
|
||
- 動態 import
|
||
- Route-based splitting
|
||
- Component lazy loading
|
||
- [ ] Tree shaking（移除未使用代碼）
|
||
|
||
**Definition of Done:**
|
||
- [ ] CSS/JS 已最小化
|
||
- [ ] Bundle size 減少 30%+
|
||
- [ ] Code splitting 正確運作
|
||
- [ ] Tree shaking 有效
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.15.4: Optimize Font Loading
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Preload critical fonts:
|
||
- `<link rel="preload">` for Noto Sans TC
|
||
- `<link rel="preload">` for Quicksand
|
||
- [ ] Font-display: swap
|
||
- [ ] Subset fonts（只包含必要字元）
|
||
- [ ] FOUT/FOIT 預防：
|
||
- System font fallback
|
||
- Invisible預載期
|
||
|
||
**Definition of Done:**
|
||
- [ ] 字載載時間 < 100ms
|
||
- [ ] 無 FOUT/FOIT 問題
|
||
- [ ] 字體顯示快速
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.15.5: Implement Caching Strategy
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Cloudflare CDN cache 配置
|
||
- [ ] Browser cache headers:
|
||
- Static assets: 1 year
|
||
- Images: 1 month
|
||
- HTML: 不 cache（ETag）
|
||
- [ ] Service Worker for offline (optional)
|
||
- [ ] Cache invalidation strategy
|
||
|
||
**Definition of Done:**
|
||
- [ ] Cache headers 正確設定
|
||
- [ ] CDN hit rate > 80%
|
||
- [ ] 快取命中率良好
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.15.6: Optimize Critical Rendering Path
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Inline critical CSS
|
||
- [ ] Defer non-critical JavaScript
|
||
- [ ] Preconnect to external domains
|
||
- [ ] Prioritize above-the-fold content
|
||
- [ ] Minimize TBT (Total Blocking Time)
|
||
|
||
**Definition of Done:**
|
||
- [ ] FCP < 1.5s
|
||
- [ ] LCP < 2.5s
|
||
- [ ] TBT < 200ms
|
||
- [ ] CLS < 0.1
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.15.7: Final Performance Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 所有頁面 Lighthouse ≥ 95:
|
||
- Performance
|
||
- Accessibility
|
||
- Best Practices
|
||
- SEO
|
||
- [ ] Core Web Vitals "Good"
|
||
- [ ] Mobile testing
|
||
- [ ] WebPageTest analysis
|
||
- [ ] Performance report
|
||
|
||
**Definition of Done:**
|
||
- [ ] 所有指標達標
|
||
- [ ] 跨瀏覽器測試通過
|
||
- [ ] 效能報告完整
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
## Story 1.16: Deployment to Cloudflare
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a DevOps Engineer,
|
||
I want to deploy the application to Cloudflare,
|
||
So that the website is live and accessible.
|
||
```
|
||
|
||
### Estimated Effort
|
||
6-8 小時
|
||
|
||
---
|
||
|
||
### Task 1.16.1: Prepare Frontend Build Configuration
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Astro build 配置優化
|
||
- [ ] 環境變數設定：
|
||
- `PUBLIC_PAYLOAD_CMS_URL`
|
||
- `PAYLOAD_CMS_API_KEY` (if needed)
|
||
- [ ] wrangler.toml 配置：
|
||
- name: "enchun-frontend"
|
||
- compatibility_date
|
||
- assets directory
|
||
- routes (如有)
|
||
- environment variables
|
||
- [ ] 構建指令測試
|
||
|
||
**定義 of Done:**
|
||
- [ ] Build 成功無錯誤
|
||
- [ ] 環境變數正確
|
||
- [ ] Wrangler 配置完整
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.16.2: Configure Backend Deployment
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Backend build 配置:
|
||
- `output: 'standalone'`
|
||
- Environment variables
|
||
- [ ] Docker configuration:
|
||
- `Dockerfile.backend` (已存在)
|
||
- Multi-stage build
|
||
- Environment variables
|
||
- [ ] Deployment target:
|
||
- Vercel / Railway / Coolify
|
||
- [ ] MongoDB Atlas connection
|
||
- [ ] R2 storage configuration
|
||
|
||
**定義 of Done:**
|
||
- [ ] Docker image 建立成功
|
||
- [ ] 環境變數正確設定
|
||
- [ ] 連線測試通過
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.16.3: Configure Custom Domain
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Frontend domain: `www.enchun.tw`
|
||
- Cloudflare Pages
|
||
- [ ] Backend domain: `enchuntw-admin.anlstudio.cc`
|
||
- Payload CMS admin
|
||
- [ ] DNS records:
|
||
- A records / CNAME
|
||
- WWW subdomain
|
||
- [ ] SSL certificates:
|
||
- Auto-provisioned by Cloudflare
|
||
- [ ] DNS propagation 驗證
|
||
|
||
**定義 of Done:**
|
||
- [ ] DNS 正確指向 Cloudflare
|
||
- [ ] SSL 憑證有效
|
||
- [ ] WWW domain 運作正常
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
### Task 1.16.4: Setup CI/CD Pipeline
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Git repository 連接
|
||
- [ ] 自動部署觸發：
|
||
- Push to `main` branch
|
||
- Pull request merge
|
||
- [ ] Build steps:
|
||
1. Install dependencies
|
||
2. Run tests
|
||
3. Build frontend
|
||
4. Deploy to Cloudflare Pages
|
||
- [ ] Deployment notifications:
|
||
- Slack / Email
|
||
- Deployment status
|
||
|
||
**定義 of Done:**
|
||
- [ ] CI/CD pipeline 自動運作
|
||
- [ ] 測試失敗阻止部署
|
||
- [ ] 通知正常運作
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.16.5: Configure Environment Variables
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Frontend variables (Cloudflare Pages):
|
||
- `PUBLIC_PAYLOAD_CMS_URL`
|
||
- `PUBLIC_GA_ID` (G-DKBZWCGGZR)
|
||
- [ ] Backend variables:
|
||
- `DATABASE_URI`
|
||
- `PAYLOAD_SECRET`
|
||
- `NEXT_PUBLIC_SERVER_URL`
|
||
- `R2_*` variables
|
||
- `RESEND_API_KEY`
|
||
- [ ] Production values
|
||
- [ ] Development values
|
||
- [ ] Secrets management
|
||
|
||
**定義 of Done:**
|
||
- [ ] 所有環境變數設定
|
||
- [ ] Secrets 安全存儲
|
||
- [ ] 開發/生產環境隔離
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
### Task 1.16.6: Final Deployment and Verification
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 前端部署到 Cloudflare Pages
|
||
- [ ] 後端部署到選擇平台
|
||
- [ ] DNS propagation complete
|
||
- [ ] SSL certificates active
|
||
- [ ] Full end-to-end testing:
|
||
- Homepage loads
|
||
- All pages accessible
|
||
- Forms work
|
||
- Auth works
|
||
- CMS admin accessible
|
||
- [ ] Performance verification
|
||
- [ ] Monitoring setup
|
||
|
||
**定義 of Done:**
|
||
- [ ] 網站正式上線
|
||
- [ ] 所有功能正常運作
|
||
- [ ] 監控已建立
|
||
|
||
**預估時間：** 1.5 小時
|
||
|
||
---
|
||
|
||
## Story 1.17: Testing and Quality Assurance
|
||
|
||
**User Story:**
|
||
```gherkin
|
||
As a QA Engineer,
|
||
I want to thoroughly test the application,
|
||
So that there are no critical bugs at launch.
|
||
```
|
||
|
||
### Estimated Effort
|
||
12-16 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.1: Create Test Plan
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 測試範圍定義
|
||
- [ ] 測試案例清單
|
||
- [ ] 測試環境設定
|
||
- [ ] Bug 報告模板
|
||
- [ ] Launch checklist
|
||
|
||
**定義 of Done:**
|
||
- [ ] 測試計劃文檔完整
|
||
- [ ] 所有團隊成員理解計劃
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.2: Cross-Browser Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 測試瀏覽器：
|
||
- Chrome (latest 2 versions)
|
||
- Firefox (latest 2 versions)
|
||
- Safari (latest 2 versions)
|
||
- Edge (latest 2 versions)
|
||
- [ ] 測試平台：
|
||
- Windows 10/11
|
||
- macOS 12+
|
||
- iOS (latest)
|
||
- Android (latest)
|
||
- [ ] 測試項目：
|
||
- All pages render correctly
|
||
- Navigation works
|
||
- Forms submit
|
||
- Media displays
|
||
- Interactive features work
|
||
- [ ] Document browser-specific issues
|
||
|
||
**定義 of Done:**
|
||
- [ ] 所有主流瀏覽器相容
|
||
- [ ] 記錄已知問題
|
||
- [ ] Critical issues resolved
|
||
|
||
**預估時間：** 4 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.3: Responsive Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] 測試裝置尺寸：
|
||
- Desktop: 1920x1080, 1440x900
|
||
- Tablet: 768x1024 (iPad)
|
||
- Mobile: 375x667, 414x896
|
||
- [ ] 測試項目：
|
||
- 無水平滾動
|
||
- Navigation menu works
|
||
- Text is readable
|
||
- Images scale correctly
|
||
- Touch targets adequate size
|
||
- No broken layouts
|
||
- [ ] Orientation testing (portrait/landscape)
|
||
|
||
**定義 of Done:**
|
||
- [ ] 所有裝置響應式正常
|
||
- [ ] 無 layout 破壞
|
||
- [ ] 觸控操作流暢
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.4: Functional Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] User flow 測試：
|
||
- Browse homepage → About → Contact
|
||
- Browse blog → Read article
|
||
- View portfolio → View project
|
||
- Login → Edit content → Logout
|
||
- [ ] Form 測試:
|
||
- Contact form submission
|
||
- Login form validation
|
||
- Search/Filter functions
|
||
- [ ] External links 測試:
|
||
- All social links work
|
||
- Portfolio external links
|
||
- Download links
|
||
- [ ] 301 redirects 測試:
|
||
- All critical redirects work
|
||
- [ ] Admin functions 測試:
|
||
- Create/edit/delete content
|
||
- Upload media
|
||
- Manage users
|
||
|
||
**定義 of Done:**
|
||
- [ ] 所有關鍵功能正常
|
||
- [ ] 無阻塞性 bug
|
||
- [ ] 測試報告完成
|
||
|
||
**預估時間：** 4 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.5: Performance Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Lighthouse audit (all pages):
|
||
- Performance ≥ 95
|
||
- Accessibility ≥ 95
|
||
- Best Practices ≥ 95
|
||
- SEO ≥ 95
|
||
- [ ] WebPageTest analysis:
|
||
- FCP < 1.5s
|
||
- LCP < 2.5s
|
||
- TBT < 200ms
|
||
- CLS < 0.1
|
||
- [ ] Load testing:
|
||
- 100 concurrent users
|
||
- Response time < 1s (95th percentile)
|
||
- [ ] Mobile performance testing
|
||
|
||
**定義 of Done:**
|
||
- [ ] 所有效能指標達標
|
||
- [ ] Load testing 通過
|
||
- [ ] 效能報告完整
|
||
|
||
**預估時間：** 3 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.6: Accessibility Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] WCAG 2.1 AA compliance check
|
||
- [ ] Keyboard navigation test:
|
||
- Tab 順序
|
||
- Focus indicators
|
||
- Skip links
|
||
- [ ] Screen reader test (basic):
|
||
- NVDA / VoiceOver
|
||
- Image alt text
|
||
- Heading structure
|
||
- [ ] Color contrast verification:
|
||
- All text WCAG AA compliant
|
||
- [ ] Form accessibility:
|
||
- Labels properly associated
|
||
- Error messages accessible
|
||
- [ ] Video captions (if applicable)
|
||
|
||
**定義 of Done:**
|
||
- [ ] WCAG AA 合規
|
||
- [ ] Keyboard 可完整操作
|
||
- [ ] Screen reader 基礎支援
|
||
- [ ] 顏色對比合格
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.7: Security Testing
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] SQL injection testing
|
||
- [ ] XSS protection testing
|
||
- [ ] CSRF protection testing
|
||
- [ ] Authentication bypass testing
|
||
- [ ] Authorization bypass testing
|
||
- [ ] File upload security
|
||
- [ ] Rate limiting testing
|
||
- [ ] Sensitive data exposure check
|
||
|
||
**定義 of Done:**
|
||
- [ ] 無安全漏洞
|
||
- [ ] 保護機制正常運作
|
||
- [ ] 安全報告完成
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.8: Content Verification
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Manual content review:
|
||
- 35+ articles all present
|
||
- 4 categories all present
|
||
- Portfolio items all present
|
||
- No broken images
|
||
- No broken links
|
||
- [ ] Content accuracy check:
|
||
- Text formatting correct
|
||
- Images display correctly
|
||
- Rich text formatting correct
|
||
- [ ] SEO verification:
|
||
- Meta tags present
|
||
- OG tags correct
|
||
- Canonical URLs correct
|
||
- [ ] Visual fidelity check:
|
||
- Compare with Webflow
|
||
- 95%+ similarity
|
||
|
||
**定義 of Done:**
|
||
- [ ] 所有內容完整遷移
|
||
- [ ] 無內容錯誤
|
||
- [ ] SEO 完整
|
||
- [ ] 視覺符合預期
|
||
|
||
**預估時間：** 4 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.9: Bug Tracking and Resolution
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Bug tracking system:
|
||
- GitHub Issues
|
||
- Priority levels (Critical, High, Medium, Low)
|
||
- Status tracking
|
||
- [ ] Critical bugs must be fixed before launch
|
||
- [ ] High bugs should be fixed
|
||
- [ ] Medium/Low bugs documented
|
||
- [ ] Re-testing after fixes
|
||
|
||
**定義 of Done:**
|
||
- [ ] 所有 critical bugs 解決
|
||
- [ ] High bugs 解決或文件化
|
||
- [ ] 測試報告完成
|
||
- [ ] Launch decision made
|
||
|
||
**預估時間：** 2 小時
|
||
|
||
---
|
||
|
||
### Task 1.17.10: Launch Preparation
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Launch checklist completed:
|
||
- All tests passed
|
||
- Critical bugs fixed
|
||
- Monitoring setup
|
||
- Backup strategy
|
||
- Rollback plan
|
||
- [ ] Stakeholder sign-off
|
||
- [ ] Launch announcement prepared
|
||
- [ ] Support documentation ready
|
||
|
||
**定義 of Done:**
|
||
- [ ] Checklist 完成
|
||
- [ ] 利益相關者批准
|
||
- [ ] 準備好正式上線
|
||
|
||
**預估時間：** 1 小時
|
||
|
||
---
|
||
|
||
## 📊 總時間線和 Sprint 規劃
|
||
|
||
### Adjusted Timeline
|
||
|
||
| 週次 | Sprint | 主要交付物 | 預估工時 |
|
||
|------|--------|----------|----------|
|
||
| Week 1 | Sprint 0 | Story 1.1 完成 + Story 1.2 關鍵部分 | 8-12 hr |
|
||
| Week 2-3 | Sprint 1 | Story 1.2 完成 + Story 1.3 遷移 | 24-30 hr |
|
||
| Week 4-5 | Sprint 2 | Story 1.4-1.7 核心頁面 | 30-40 hr |
|
||
| Week 6-7 | Sprint 3 | Story 1.8-1.11 內容系統 | 30-40 hr |
|
||
| Week 8 | Sprint 4 | Story 1.12-1.13 認證後台 | 16-20 hr |
|
||
| Week 9-10 | Sprint 5 | Story 1.14-1.17 上線準備 | 40-50 hr |
|
||
|
||
**總預估：** 148-192 小時（約 10 週）
|
||
|
||
---
|
||
|
||
## 🎯 執行建議
|
||
|
||
### 立即執行（本週）
|
||
1. **完成 Story 1.1**（剩餘 40 分鐘）
|
||
2. **建立 Story 1.2-1.17 詳細任務定義** ✅ 本文檔
|
||
3. **開始 Story 1.2 Phase 1**（Portfolio Collection）
|
||
|
||
### 下週執行
|
||
4. **完成 Story 1.2**（剩餘 3 小時）
|
||
5. **準備 Story 1.3-1.4 規劃**
|
||
|
||
---
|
||
|
||
## 📌 關鍵決策點
|
||
|
||
### 決策 1: Story 1.3 優先順序？
|
||
|
||
**選項 A：** 儘先執行遷移腳本
|
||
- 優點：確保內容完整
|
||
- 缺點：無法立即看到頁面效果
|
||
|
||
**選項 B：** 延後執行，先實作頁面
|
||
- 優點：快速展示視覺成果
|
||
- 缺點：後續需更新所有內容
|
||
|
||
**建議：** **選項 B** - 先完成 Story 1.4-1.8，用測試資料實作，再執行 Story 1.3 正式遷移
|
||
|
||
### 決策 2: Story 1.12 認證優先級？
|
||
|
||
**選項 A：** 現在實作（與頁面並行）
|
||
- 優點：編輯者可提前開始工作
|
||
|
||
**選項 B：** 頁面完成後實作
|
||
- 優點：集中精力完成用戶可見功能
|
||
|
||
**建議：** **選項 B** - 在 Sprint 4 執行（頁面完成後）
|
||
|
||
---
|
||
|
||
**文檔完成時間：** 2025-01-30
|
||
**適用範圍：** Epic 1 所有 Stories 的詳細任務定義
|
||
**下一步：** 根據優先級開始執行或調整計劃
|