zhouyi-site-skill

建立與部署融合東方易經智慧與現代網頁設計的「賽博周易 (Cyber Zhouyi)」官方網站與互動起卦應用。適用於：打造支援白棕黑日間主題、黑金夜間主題、繁簡英三語切換、三幣六爻起卦、本機歷史紀錄與 HTML5 Canvas 分享卡片圖片匯出的高質感前端專案。

賽博周易官方網站與起卦應用建置技能 (Cyber Zhouyi Skill)

本技能提供了一套完整的標準作業程序與架構藍圖，用於建置具備新東方美學（Neo-Orientalism）、雙主題切換、多語系支援、六十四卦運算模型、本機歷史紀錄以及 Canvas 分享卡片匯出的前端應用程式。

核心架構與組件

1. 視覺與主題系統 (client/src/index.css & ThemeContext.tsx)：
   • 白天主題：以溫潤米白／純白背景（#FBF9F5）、沉穩墨黑與古木棕（#8C6239）營造書卷氣息。
   • 夜間主題：以極夜黑底色搭配流光金（#D4AF37）與細緻幾何線條，營造星象與太極意象。
2. 多語系管理 (LocaleContext.tsx)：
   • 完整支援繁體中文 (zh-TW)、簡體中文 (zh-CN) 與英文 (en)，並自動儲存至 localStorage。
3. 起卦與 64 卦模型 (zhouyi.ts)：
   • 模擬三枚硬幣擲出的傳統機率，生成本卦、變爻與變卦二進制序列。
   • 內建 64 卦對照表、觀察關鍵與行動指引。
4. 本機歷史紀錄 (Divination.tsx & localStorage)：
   • 自動在瀏覽器端記錄最近 20 筆起卦與解讀，支援一鍵載入與清除。
5. Canvas 分享卡片匯出 (shareCard.ts)：
   • 使用 HTML5 Canvas 動態排版並產出 1200x1500 高畫質 PNG 分享卡片，包含卦象圖騰、問題、解讀與行動指引。

標準開發工作流程

1. 初始化專案：
   • 建立 web-static 專案，設定 Tailwind CSS 4 與自定義設計 tokens。
2. 建置多語系與主題 Context：
   • 確保日間與夜間配色符合色彩對比度與品牌調性。
3. 實作起卦核心與歷史紀錄：
   • 實作三幣起卦演算法，並串接 localStorage 保存歷史軌跡。
4. 實作 Canvas 圖片匯出：
   • 透過 CanvasRenderingContext2D 將結構化卦象渲染為質感宣紙卡片供下載。
5. 驗證與交付：
   • 執行 pnpm check 與 pnpm build 確認型別與打包正常，建立最終 Checkpoint。