[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68bc5b011ae0819197bf9be0cf1b3fe0","versionInt","title","30 天每日目標挑戰 App｜可互動原型（canvas 版）","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\n\n// ===== 型別 =====\ntype Goal = {\n id: string;\n title: string;\n unit?: string;\n targetDaily?: number;\n active: boolean;\n};\n\ntype Checkin = {\n id: string; // `${goalId}-${dateISO}`\n goalId: string;\n date: string; // YYYY-MM-DD\n value?: number;\n done: boolean;\n note?: string;\n};\n\ntype Journal = {\n fact?: string;\n insight?: string;\n adjust?: string;\n};\n\n// ===== 常數 =====\nconst LS_KEYS = {\n goals: \"challenge_goals_v1\",\n checkins: \"challenge_checkins_v1\",\n journal: \"challenge_journal_v1\",\n};\n\nconst MAX_ACTIVE_GOALS = 3;\n\ntype Page = \"today\" | \"add\" | \"review\" | \"settings\";\n\n// ===== 小工具 =====\nfunction todayISO(): string {\n const d = new Date();\n const y = d.getFullYear();\n const m = String(d.getMonth() + 1).padStart(2, \"0\");\n const day = String(d.getDate()).padStart(2, \"0\");\n return `${y}-${m}-${day}`;\n}\n\nfunction dateAddDays(dateISO: string, diff: number): string {\n const d = new Date(dateISO + \"T00:00:00\");\n d.setDate(d.getDate() + diff);\n const y = d.getFullYear();\n const m = String(d.getMonth() + 1).padStart(2, \"0\");\n const day = String(d.getDate()).padStart(2, \"0\");\n return `${y}-${m}-${day}`;\n}\n\nfunction uid() {\n return Math.random().toString(36).slice(2, 10);\n}\n\nfunction loadLS(key: string, fallback: T): T {\n try {\n const raw = localStorage.getItem(key);\n return raw ? (JSON.parse(raw) as T) : fallback;\n } catch (e) {\n return fallback;\n }\n}\n\nfunction saveLS(key: string, val: T) {\n localStorage.setItem(key, JSON.stringify(val));\n}\n\n// ===== 進度圓環元件 =====\nfunction ProgressRing({ percent }: { percent: number }) {\n const p = Math.max(0, Math.min(100, percent));\n const r = 42;\n const c = 2 * Math.PI * r;\n const dash = (p / 100) * c;\n return (\n \n );\n}\n\n// ===== 主元件 =====\nexport default function ChallengeApp() {\n const [page, setPage] = useState(\"today\");\n const [dateISO, setDateISO] = useState(todayISO());\n\n const [goals, setGoals] = useState(() =>\n loadLS(LS_KEYS.goals, [\n { id: uid(), title: \"深度工作\", unit: \"min\", targetDaily: 60, active: true },\n { id: uid(), title: \"運動\", unit: \"min\", targetDaily: 30, active: true },\n { id: uid(), title: \"記帳\", unit: \"NTD\", targetDaily: 0, active: true },\n ])\n );\n const [checkins, setCheckins] = useState(() => loadLS(LS_KEYS.checkins, []));\n const [journalMap, setJournalMap] = useState>(() =>\n loadLS>(LS_KEYS.journal, {})\n );\n\n // 持久化\n useEffect(() => saveLS(LS_KEYS.goals, goals), [goals]);\n useEffect(() => saveLS(LS_KEYS.checkins, checkins), [checkins]);\n useEffect(() => saveLS(LS_KEYS.journal, journalMap), [journalMap]);\n\n const activeGoals = useMemo(() => goals.filter((g) => g.active), [goals]);\n\n // 今日完成率\n const completionRate = useMemo(() => {\n const total = activeGoals.length || 1;\n const done = activeGoals.filter((g) =>\n checkins.some((c) => c.goalId === g.id && c.date === dateISO && c.done)\n ).length;\n return Math.round((done / total) * 100);\n }, [activeGoals, checkins, dateISO]);\n\n // 連續天數（從今天往回，只要當天完成率 100% 就 +1）\n const streak = useMemo(() => {\n let s = 0;\n let d = dateISO;\n while (true) {\n const total = activeGoals.length;\n if (total === 0) break;\n const done = activeGoals.filter((g) => checkins.some((c) => c.goalId === g.id && c.date === d && c.done)).length;\n if (done === total) {\n s += 1;\n d = dateAddDays(d, -1);\n } else break;\n }\n return s;\n }, [activeGoals, checkins, dateISO]);\n\n // 封裝：當日某目標的 checkin\n function getTodayCheckin(goalId: string): Checkin | undefined {\n return checkins.find((c) => c.goalId === goalId && c.date === dateISO);\n }\n\n function upsertCheckin(goalId: string, patch: Partial>) {\n setCheckins((prev) => {\n const id = `${goalId}-${dateISO}`;\n const idx = prev.findIndex((c) => c.id === id);\n if (idx >= 0) {\n const next = [...prev];\n next[idx] = { ...next[idx], ...patch } as Checkin;\n return next;\n } else {\n return [\n ...prev,\n {\n id,\n goalId,\n date: dateISO,\n value: patch.value,\n done: Boolean(patch.done),\n note: patch.note,\n } as Checkin,\n ];\n }\n });\n }\n\n function addGoal(newGoal: Omit) {\n const activeCount = goals.filter((g) => g.active).length + (newGoal.active ? 1 : 0);\n if (activeCount > MAX_ACTIVE_GOALS) {\n alert(`同時啟用不得超過 ${MAX_ACTIVE_GOALS} 個目標`);\n return;\n }\n setGoals((prev) => [{ id: uid(), ...newGoal }, ...prev]);\n setPage(\"today\");\n }\n\n function toggleGoalActive(id: string) {\n setGoals((prev) => {\n const g = prev.find((x) => x.id === id);\n if (!g) return prev;\n if (!g.active) {\n const activeCount = prev.filter((x) => x.active).length;\n if (activeCount >= MAX_ACTIVE_GOALS) {\n alert(`同時啟用不得超過 ${MAX_ACTIVE_GOALS} 個目標`);\n return prev;\n }\n }\n return prev.map((x) => (x.id === id ? { ...x, active: !x.active } : x));\n });\n }\n\n function exportJSON() {\n const blob = new Blob([JSON.stringify({ goals, checkins, journal: journalMap }, null, 2)], {\n type: \"application/json\",\n });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `challenge-data-${dateISO}.json`;\n a.click();\n URL.revokeObjectURL(url);\n }\n\n function importJSON(file: File) {\n const reader = new FileReader();\n reader.onload = () => {\n try {\n const data = JSON.parse(String(reader.result));\n if (data.goals && data.checkins) {\n setGoals(data.goals);\n setCheckins(data.checkins);\n setJournalMap(data.journal || {});\n alert(\"匯入成功！\");\n } else {\n alert(\"檔案格式不正確\");\n }\n } catch (e) {\n alert(\"解析失敗\");\n }\n };\n reader.readAsText(file);\n }\n\n function resetAll() {\n if (confirm(\"確定要清空所有資料嗎？這將無法復原。\")) {\n setGoals([]);\n setCheckins([]);\n setJournalMap({});\n }\n }\n\n // ===== UI 區塊 =====\n function Header() {\n return (\n

日期

{dateISO}

連續天數

{streak} 🔥

\n \n

\n );\n }\n\n function TodayPage() {\n return (\n

\n {activeGoals.length === 0 && (\n

\n 目前沒有啟用的目標，前往 \n

\n )}\n {activeGoals.map((g) => {\n const c = getTodayCheckin(g.id);\n const value = c?.value ?? \"\";\n const done = c?.done ?? false;\n return (\n

{g.title}

目標：{g.targetDaily ?? 0} {g.unit ?? \"\"}

\n upsertCheckin(g.id, { value: Number(e.target.value) })}\n />\n {g.unit}\n

\n upsertCheckin(g.id, { done: !done })}\n >\n {done ? \"已完成\" : \"標記完成\"}\n \n upsertCheckin(g.id, { value: undefined, done: false })}\n >\n 清除\n \n

\n );\n })}\n

\n \n setDateISO(todayISO())}\n title=\"回到今天\"\n >\n 今天\n \n

\n \n ·\n \n

\n );\n }\n\n function AddGoalPage() {\n const [title, setTitle] = useState(\"\");\n const [unit, setUnit] = useState(\"\");\n const [target, setTarget] = useState(\"\");\n const [active, setActive] = useState(true);\n\n return (\n

新增 / 編輯目標

\n setTitle(e.target.value)}\n />\n setUnit(e.target.value)}\n />\n setTarget(Number(e.target.value))}\n />\n \n setActive(e.target.checked)} /> 啟用（同時 ≤ {MAX_ACTIVE_GOALS}）\n \n

\n {\n if (!title.trim()) return alert(\"請輸入目標名稱\");\n addGoal({ title: title.trim(), unit: unit.trim() || undefined, targetDaily: target === \"\" ? undefined : Number(target), active });\n setTitle(\"\");\n setUnit(\"\");\n setTarget(\"\");\n setActive(true);\n }}\n >\n 儲存目標\n \n \n

\n\n

我的目標

啟用 {goals.filter((g) => g.active).length}/{MAX_ACTIVE_GOALS}

\n {goals.map((g) => (\n

{g.title}

\n 目標 {g.targetDaily ?? 0} {g.unit ?? \"\"}\n

\n \n toggleGoalActive(g.id)} /> 啟用\n \n setGoals((prev) => prev.filter((x) => x.id !== g.id))}\n >\n 刪除\n \n

\n ))}\n

\n );\n }\n\n function ReviewPage() {\n const journal = journalMap[dateISO] || {};\n const setField = (k: keyof Journal, v: string) =>\n setJournalMap((prev) => ({ ...prev, [dateISO]: { ...prev[dateISO], [k]: v } }));\n\n return (\n

今日完成率

{completionRate}%

\n \n

連續天數

{streak} 🔥

對比昨日

\n {(() => {\n const y = dateAddDays(dateISO, -1);\n const total = activeGoals.length || 1;\n const done = activeGoals.filter((g) => checkins.some((c) => c.goalId === g.id && c.date === y && c.done)).length;\n const rateY = Math.round((done / total) * 100);\n const delta = completionRate - rateY;\n const sign = delta > 0 ? \"+\" : \"\";\n return `${sign}${delta}%`;\n })()}\n

\n\n

各目標今日值

\n {activeGoals.map((g) => {\n const c = getTodayCheckin(g.id);\n return (\n

{g.title}

目標 {g.targetDaily ?? 0} {g.unit ?? \"\"}

\n 今日：{c?.value ?? \"—\"} {g.unit} {c?.done ? \"✔\" : \"✖\"}\n

\n );\n })}\n

\n\n

三句復盤

\n setField(\"fact\", e.target.value)}\n />\n setField(\"insight\", e.target.value)}\n />\n setField(\"adjust\", e.target.value)}\n />\n

\n \n \n

\n );\n }\n\n function SettingsPage() {\n return (\n

資料匯入/匯出

\n \n \n 匯入 JSON\n e.target.files && importJSON(e.target.files[0])} />\n \n

系統

\n \n \n

\n );\n }\n\n function NavBar() {\n const btn = (key: Page, label: string) => (\n setPage(key)}\n className={`px-4 py-2 rounded-xl text-sm font-medium transition ${\n page === key ? \"bg-indigo-600 text-white\" : \"bg-white text-gray-700 border border-gray-200 hover:border-gray-300\"\n }`}\n >\n {label}\n \n );\n return (\n

\n {btn(\"today\", \"今日\")}\n {btn(\"add\", \"目標\")}\n {btn(\"review\", \"回顧\")}\n {btn(\"settings\", \"設定\")}\n

\n );\n }\n\n return (\n

\n {page === \"today\" && }\n {page === \"add\" && }\n {page === \"review\" && }\n {page === \"settings\" && }\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","17547918888862710052","traceTime",1776442424222]