# 盈豐太陽能官網 Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** 將現有 Astro + Cloudflare + D1 骨幹改造成盈豐太陽能工程有限公司的村屋太陽能一頁式官網（Chakra UI）+ Blog + 內容管理後台。 **Architecture:** Astro 7（`output: "static"` + per-page `prerender=false`）作全疊框架，`@astrojs/react` 提供 React island，Chakra UI v3（Emotion）負責前台 UI。首頁 SSR 讀 D1，經 `Cache-Control: s-maxage` 邊緣快取。後台沿用 Astro SSR 表單 + HMAC cookie。資料層用 Drizzle + D1。 **Tech Stack:** Astro 7.3 / @astrojs/react 6 / React 19 / @chakra-ui/react 3.37 / @emotion/react / Drizzle ORM / Cloudflare D1 + KV / marked。 **已驗證（spike）：** Chakra v3 + Astro SSR 可正常運作，inline critical CSS、零 FOUC、無 hydration error。 --- ## 檔案結構 ``` src/ ├─ theme/system.ts # Chakra system（tokens/semanticTokens/recipes/fonts） ├─ components/site/ │ ├─ Provider.tsx # │ ├─ SiteChrome.tsx # Header + main + Footer 外框 │ ├─ Header.tsx Hero.tsx TrustBar.tsx Services.tsx Features.tsx │ ├─ Process.tsx Cases.tsx Faq.tsx ContactCta.tsx Footer.tsx │ ├─ WhatsAppFab.tsx Section.tsx SectionHeading.tsx │ ├─ HomePage.tsx # 組合首頁所有 section │ ├─ BlogIndex.tsx BlogPost.tsx ├─ data/content.ts # D1 讀取：settings/items/cases，型別化 ├─ db/schema.ts # posts + site_settings + content_items + cases ├─ db/seed.ts # 種子公司資料 + 樣本內容 ├─ layouts/Base.astro # SEO head / fonts / global reset ├─ layouts/AdminLayout.astro # 後台外框（沿用 + 換色） ├─ pages/index.astro # SSR 讀 D1 → ├─ pages/blog/index.astro # SSR → ├─ pages/blog/[slug].astro # SSR → ├─ pages/admin/** # login/logout/index/post/settings/content/cases ├─ pages/sitemap.xml.ts robots.txt.ts └─ lib/{auth,db,env,markdown}.ts（沿用） ``` --- ## Phase 1 — Foundation ### Task 1: Chakra theme system **Files:** Create `src/theme/system.ts` - [ ] 定義 tokens：`colors.brand`（#0B8A5E 色階）、`colors.sky`（#0BA5EC 色階）、`fonts.heading/body = Noto Sans HK` - [ ] 定義 semanticTokens：`bg`, `bg.subtle`, `fg`, `fg.muted`, `border`, `brand.solid`, `brand.contrast`, `brand.muted` - [ ] `createSystem(defaultConfig, config)` 匯出 `system` - [ ] 驗證：`npm run build` 無 TypeScript/Chakra token 錯誤 ### Task 2: Provider + SiteChrome **Files:** Create `src/components/site/Provider.tsx`, `src/components/site/SiteChrome.tsx`, `Section.tsx`, `SectionHeading.tsx` - [ ] `Provider` = `{children}` - [ ] `SiteChrome` = `
{children}