Files

pkupuk f6b806617e docs: add research assets, screenshots and guides

Include supplementary documentation, research notes on Lexical/UX, and setup guides.

2026-02-11 11:51:35 +08:00

57 KiB

Raw Blame History

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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 小時

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:

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:

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:

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:

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:

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 週）

🎯 執行建議

立即執行（本週）

完成 Story 1.1（剩餘 40 分鐘）
建立 Story 1.2-1.17 詳細任務定義 ✅ 本文檔
開始 Story 1.2 Phase 1（Portfolio Collection）

下週執行

完成 Story 1.2（剩餘 3 小時）
準備 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 的詳細任務定義 下一步： 根據優先級開始執行或調整計劃

57 KiB Raw Blame History Unescape Escape

Epic 1: 完整任務定義 (Story 1.3-1.17)

📋 專案全貌

Epic 結構

Story 分類

📊 Story 依賴關係矩陣

Story 1.3: Content Migration Script

Overall Goal

Estimated Effort

Task 1.3.1: Research Webflow Export Format

Task 1.3.2: Create Migration Script Foundation

Task 1.3.3: Implement Posts Migration Logic

Task 1.3.4: Implement Categories Migration Logic

Task 1.3.5: Implement Portfolio Migration Logic

Task 1.3.6: Implement Media Migration Module

Task 1.3.7: Implement Deduplication Logic

Task 1.3.8: Generate Migration Report

Task 1.3.9: Testing and Validation

Story 1.4: Global Layout Components

Overall Goal

Estimated Effort

Task 1.4.1: Design Component Architecture

Task 1.4.2: Create Header Global in Payload CMS

Task 1.4.3: Create Footer Global in Payload CMS

Task 1.4.4: Implement Header.astro Component

Task 1.4.5: Implement Footer.astro Component

Task 1.4.6: Integration with MainLayout

Story 1.5: Homepage Implementation

Overall Goal

Estimated Effort

Task 1.5.1: Create Homepage in Payload CMS

Task 1.5.2: Create index.astro Route

Task 1.5.3: Implement Hero Section

Task 1.5.4: Implement Service Features Grid

Task 1.5.5: Implement Portfolio Preview Section

Task 1.5.6: Implement CTA Section

Task 1.5.7: Performance Optimization and Testing

Story 1.6: About Page Implementation

Estimated Effort

Task 1.6.1: Create About Page in Payload CMS

Task 1.6.2: Create about-enchun.astro Route

Task 1.6.3: Implement Hero Section

Task 1.6.4: Implement Service Features Section

Task 1.6.5: Implement Comparison Table

Task 1.6.6: Implement CTA Section

Task 1.6.7: Performance and Visual Testing

Story 1.7: Solutions Page Implementation

Estimated Effort

Task 1.7.1: Create Solutions Page in Payload CMS

Task 1.7.2: Create marketing-solutions.astro Route

Task 1.7.3: Implement Hero Section

Task 1.7.4: Implement Services List Component

Task 1.7.5: Performance and Visual Testing

Story 1.8: Contact Page with Form

Estimated Effort

Task 1.8.1: Create Contact Page in Payload CMS

Task 1.8.2: Create contact-us.astro Route

Task 1.8.3: Implement Contact Form

Task 1.8.4: Implement Form Submission Logic

Task 1.8.5: Implement Contact Info Display

Task 1.8.6: Implement CTA Section

Task 1.8.7: Testing and Validation

Story 1.9: Blog System Implementation

Overall Goal

Estimated Effort

Task 1.9.1: Design Blog Architecture

Task 1.9.2: Implement Blog Listing Page

Task 1.9.3: Implement Article Detail Page

Task 1.9.4: Implement Category Page

Task 1.9.5: Extend Posts Collection for Blog Features

Task 1.9.6: Implement Search/Filter Functionality (Optional)

Task 1.9.7: Performance Optimization and Testing

Story 1.10: Portfolio Implementation

Estimated Effort

Task 1.10.1: Design Portfolio Architecture

Task 1.10.2: Implement Portfolio Listing Page

Task 1.10.3: Implement Portfolio Detail Page

Task 1.10.4: Implement Portfolio Filter (Optional)

Task 1.10.5: Performance and Visual Testing

Story 1.11: Teams Page Implementation

57 KiB

Raw Blame History