LESSON-23 · checkpoint
主要結構已經完成，只留下本堂一個核心缺口。先預測，再從指定檔案找出它。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：規劃入口可以開啟
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Console、鍵盤 focus 與 brief 內容狀態。
會用到的檔案：index.html、project-brief.md、data-contract.md、acceptance-matrix.md、evidence.md
本堂焦點：定義運動器材電商需求、資料模型與驗收矩陣
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：請在 data-contract.md 的「Product salePrice row」完成：補回遺漏的 salePrice 欄位與需求映射
貼上位置：data-contract.md：Product salePrice row 區塊。
| 特價 | salePrice | number/null | 前端顯示、GAS 回傳 |預期結果：Product 表同時包含 price 與 salePrice，REQ-PRODUCT-SALE 可追到此列。
驗收證據：data-contract.md 的 Product 表、acceptance-matrix.md 的 REQ-PRODUCT-SALE。
常見錯誤：另新增 discountPercent 取代需求欄位，或只補文字沒有型別與 owner。
第一個檢查：只看 Product 表，確認 price 與 salePrice 是兩個不同欄位。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.html鐵刻運動電商頁面或發佈檔案。project-brief.md專案規劃契約：定義電商角色、頁面、資料模型、資料流與驗收邊界。data-contract.md鐵刻運動電商頁面或發佈檔案。acceptance-matrix.md鐵刻運動電商頁面或發佈檔案。evidence.md逐章驗收紀錄：保存操作、預期、實際結果與未完成邊界。index.html鐵刻運動電商頁面或發佈檔案。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>鐵刻運動電商規劃｜checkpoint</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui;line-height:1.7;color:#20242a;background:#f6f7f8}main{width:min(100% - 2rem,760px);margin:2rem auto;padding:clamp(1rem,4vw,2rem);background:#fff;border-top:8px solid #f6c90e}button{padding:.7rem 1rem;background:#303841;color:#fff;border:0;border-radius:.5rem;font:inherit}:focus-visible{outline:4px solid #f6c90e;outline-offset:3px}</style></head><body><main><p>LESSON-23 · planning-only · checkpoint</p><h1>鐵刻運動 23–28 連續專案</h1><p>本堂只驗證電商 brief，不建立商品、購物車、GAS、Sheet 或部署。</p><ol id="milestones"><li>商品資料模型</li><li>訂單資料模型</li><li>聯絡資料模型</li><li>六章累積路線</li></ol><button id="check" type="button">檢查規劃項目</button><p id="status" role="status" aria-live="polite">尚未檢查</p></main><script>document.querySelector("#check").addEventListener("click",()=>{const count=document.querySelectorAll("#milestones li").length;document.querySelector("#status").textContent="規劃項目："+count+"；功能請從 L24 才開始實作";});</script></body></html>
project-brief.md專案規劃契約：定義電商角色、頁面、資料模型、資料流與驗收邊界。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
# 鐵刻運動｜23–28 連續專案 brief
## 目標與範圍
- 訪客：想在家建立訓練空間的消費者。
- 主要任務：瀏覽商品 → 加入購物車 → 填寫訂單 → 查看 server-authoritative 結果。
- 次要任務：送出聯絡資料並取得可觀察回應。
- 視覺：黃色與鐵灰為主，紅色只用於特價、錯誤與少量提示。
## 頁面
| 頁面 | 檔案 | 責任 |
| --- | --- | --- |
| 首頁 | index.html | 品牌、精選商品與商品入口 |
| 商品 | products.html | 顯示名稱、圖片、售價、特價與 active 商品 |
| 購物車 | cart.html | localStorage 加減、刪除與前端估算 |
| 結帳 | checkout.html | 購買人、性別、電話、地址、信箱與商品數量 |
| 訂單結果 | order-success.html | 顯示後端回傳的編號、金額與狀態 |
| 聯絡 | contact.html | 姓名、性別、電話、信箱與內容 |
## 資料模型
- Product：productId、name、image、price、salePrice、active。
- Order：orderNo、buyer、gender、phone、address、email、subtotal、shipping、total、status、items。
- Contact：contactNo、name、gender、phone、email、message、status。
## 23–28 累積路線
1. L23：planning-only；只完成本 brief、預覽與 evidence，不建立商店功能。
2. L24：建立語意 shell、首頁與商品入口。
3. L25：只用 local mock 完成商品、購物車、checkout 與聯絡；不發網路請求、不寫外部資料。
4. L26：加入 GAS Web App 的 listProducts／createOrder／createContact GET/POST 契約。
5. L27：加入 Products／Orders／Contacts schema、server-authoritative totals、submissionId 去重及 idle/loading/success/error/timeout。
6. L28：以同一份 canonical descriptors 產生 Solution 與 dist/project/e-commerce，完成本機 release smoke；不宣稱已部署。
## 本階段
- Stage：checkpoint
- CHECKPOINT：資料模型已齊全，請確認 L25 local-only 與 L26 live-test 邊界沒有混在一起。
data-contract.md鐵刻運動電商頁面或發佈檔案。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
# Data contract
## Product
- productId：string
- name：string
- price：number
<!-- CHECKPOINT-1：目前只完成 Product，請補上 Order 與 Contact 的契約。 -->
acceptance-matrix.md鐵刻運動電商頁面或發佈檔案。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
# Acceptance matrix
| requirement | evidence |
| --- | --- |
| brief 可讀 | project-brief.md |
<!-- CHECKPOINT-1：目前矩陣只有一項，請補齊需求與 evidence 的對照。 -->
evidence.md逐章驗收紀錄：保存操作、預期、實際結果與未完成邊界。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
# L23 驗收證據｜checkpoint
- [ ] brief 能對回 Product／Order／Contact 指定欄位。
- [ ] 六頁責任與 L23–28 累積路線清楚。
- [ ] 本堂沒有商品互動、網路請求、Sheet 寫入或部署。
- [ ] 390px 無水平溢位，Tab 可到達檢查按鈕。
evidence.md 欄位可逐項對照Checkpoint 完成後，先說出你修正的原因，再前往 Solution 對照每個檔案差異。