AI GOAL GRID COURSE — 第 02 章

九宮格 UI 與資料模型

3×3 填寫頁 + 「null = 留給 AI」的約定 + localStorage 即時保存。

核心觀念:資料才是本體

• 畫面:九個 textarea;資料:長度 9 的陣列,備份在 localStorage
• 畫面隨時可以砍掉重畫,資料才是本體
• 之後每一章(AI 補格、81 格、桌布)都是對陣列做事,不是對畫面做事
• 最重要的約定:null = 「這格留給 AI」的明確指令;{text, source} = 使用者的
• 「尊重使用者輸入」這個產品承諾,直接寫進資料結構

步驟 1:CSS Grid 排出 3×3

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cell {
  border: 1px solid #2c3a52;
  border-radius: 12px;
  background: rgba(8, 12, 20, 0.62);
}
.cell-core { border-color: #c9a44e; }   /* 中央格用金色強調 */

repeat(3, 1fr) = 三欄、每欄等寬。3×3 天生窄螢幕友善,手機上不用寫任何 media query;HTML 端只需要一個空容器 <div id="grid3">。

步驟 2:資料模型 — null = 留給 AI

const STATE_KEY = 'goal-grid-state-v1';

function defaultState() {
  return {
    version: 1,
    // 長度 9 的陣列,index 4 = 中央核心目標
    // 每格:null(留給 AI)或 {text, source:'user'|'ai'}
    cells: Array(9).fill(null),
    updatedAt: new Date().toISOString(),
  };
}

兩個設計眼:version:1 讓未來改格式時認得出舊資料;九格由左到右、由上到下編號 0–8,正中央剛好是 4。

步驟 3:讀寫 localStorage — setCell 是唯一寫入口

function loadState() {
  try {
    const raw = JSON.parse(localStorage.getItem(STATE_KEY));
    if (raw && raw.version === 1 && Array.isArray(raw.cells)) return raw;
  } catch { /* 資料壞了就當沒存過 */ }
  return defaultState();
}

function setCell(state, idx, text, source = 'user') {
  const t = String(text ?? '').trim();
  state.cells[idx] = t ? { text: t, source } : null;  // 清空 = 還給 AI
  state.updatedAt = new Date().toISOString();
  saveState(state);
}

trim 後是空字串就寫回 null —「把字刪光」等於「這格還給 AI」。所有寫入走同一個函式,存檔就不會漏。

步驟 4:dataset.idx 對位

for (let i = 0; i < 9; i++) {
  const cell = document.createElement('div');
  cell.className = i === 4 ? 'cell cell-core' : 'cell';
  const ta = document.createElement('textarea');
  ta.dataset.idx = String(i);            // 畫面第 i 格 ←→ state.cells[i]
  ta.placeholder = i === 4 ? '我的核心目標' : '留給 AI';
  ta.value = state.cells[i] ? state.cells[i].text : '';
  ta.addEventListener('input', () => {
    setCell(state, Number(ta.dataset.idx), ta.value);  // 即打即存
  });
  cell.appendChild(ta); grid.appendChild(cell);
}

別用 DOM 順序猜對應 — 版面一改就全錯位;dataset.idx 不動如山。placeholder「留給 AI」:空格是合法狀態,UI 文案跟資料模型講同一種語言。

驗收清單

• 填三格(含中央),重新整理 → 內容都在
• 把某格的字全刪,重新整理 → 該格回到 placeholder「留給 AI」
• F12 → Application → Local Storage → goal-grid-state-v1,手填格 source 是 "user"
• 視窗縮到手機寬度 → 3×3 不破版、無橫向捲軸

給 AI 的 prompt 範本(濃縮版)

做一個單檔 HTML 的「目標九宮格」填寫頁(CSS/JS 內嵌):
【版面】3×3 CSS Grid(repeat(3,1fr)、gap 10px);每格一個 textarea;
中央格「核心目標」金色強調,其餘八格是子目標
【資料模型】長度 9 的陣列 cells,index 4 = 核心目標;null = 留給 AI,
有字存 {text, source:'user'}(結構先留好給之後的 AI)
【儲存】輸入即存 localStorage(key 'goal-grid-state-v1',含 version:1);
載入時讀回;解析失敗或版本不對就用全新狀態,不准報錯
【對位】textarea 用 dataset.idx 寫回陣列;清空(trim 後為空)寫回 null
【風格】深夜藍底 #0e1420、金色 #c9a44e,繁體中文,手機優先
【驗收】填三格重整不丟 / 刪光回 placeholder / source 是 "user" / 375px 不破版

完整版在 course/02-grid-ui.md — 整段可直接貼給 ChatGPT / Claude 重現本章成品。

常見坑

• dataset 永遠是字串 — "4" 不是 4,當索引要先 Number()
• 把字串直接存進陣列 — 丟掉 source,「一字不改」就落實不了
• JSON.parse 沒包 try/catch — 壞資料一進來,整頁 JS 停擺
• 清空沒歸 null — 存了 {text:""},AI 以為格子被佔用而跳過
• 用 innerHTML 塞使用者輸入 — 注入風險,一律 value / textContent
• 忘了中央格特殊性 — 跑八個子目標的迴圈要跳過 index 4

對照成品

• demos/01-grid-ui/index.html — 本章成品,單檔、雙擊能開
• 完整版同一套邏輯:app/js/state.js + app/js/grid.js — 骨架一模一樣,只是格子變多
• 線上版步驟二 = 本章 UI 加上完整視覺

重點回顧

• 資料是本體:長度 9 陣列、index 4 = 核心、null = 留給 AI、source 記主權
• setCell 唯一寫入口、dataset.idx 對位、try/catch 防壞資料
• 空格不是未完成,是一種合法狀態 — 文案與資料模型講同一種語言