// screen-home.jsx — Unified home (list + goals modes). // • Top: settings gear + small lock indicator // • Then: horizontal swipeable segment bar (pull-down replaced) // • Body: task list with type-aware rows // • Bottom: List ⇄ Goals toggle, floating + add button const { useState: useStateH, useEffect: useEffectH } = React; function ScreenHome({ state, onCheck, onStartTask, onOpenSettings }) { const { tasks, categories, mode, setMode, listCat, setListCat, goalAxis, setGoalAxis, goalSubCats = {}, setGoalSubCats, addTask, } = state; const isList = mode === "list"; const lang = (typeof window !== "undefined" && window.__witnessLang) || "en"; // ───────── Add task sheet ───────── const [addOpen, setAddOpen] = useStateH(false); // ───────── Task detail sheet ───────── const [detailTask, setDetailTask] = useStateH(null); // ───────── Drawer state ───────── const [sheetOpen, setSheetOpen] = useStateH(false); const [extraCats, setExtraCats] = useStateH([]); // ───────── Goal sub-tabs ───────── // "__unsorted__" is a virtual sub-tab always pinned last; matches tasks with no subCategory const UNSORTED_SUB = { id: "__unsorted__", label: { en: "Unsorted", zh: "未分類" } }; const currentAxisSubs = [...(goalSubCats[goalAxis] || []), UNSORTED_SUB]; const [goalSub, setGoalSub] = useStateH(currentAxisSubs[0].id); useEffectH(() => { const subs = [...(goalSubCats[goalAxis] || []), UNSORTED_SUB]; setGoalSub(subs[0].id); }, [goalAxis]); const allCategories = [...categories, ...extraCats]; // ───────── Top-level list views (drawer) ───────── // listCat switches between these top-level views const listViews = [ { id: "today", label: t("cat_today"), icon: "today" }, { id: "inbox", label: t("cat_inbox"), icon: "inbox" }, { id: "abandoned", label: t("cat_abandoned"), icon: "abandoned" }, ]; // ───────── Sub-tabs — only inside 'today' view ───────── const [listSub, setListSub] = useStateH("today"); const todaySubTabs = [ { id: "overdue", label: t("cat_overdue") }, { id: "today", label: t("cat_today") }, ]; // ───────── Visible tasks ───────── let visibleTasks; if (!isList) { const catTasks = tasks.filter((x) => x.category === goalAxis); visibleTasks = goalSub === "__unsorted__" ? catTasks.filter((x) => !x.subCategory) : goalSub ? catTasks.filter((x) => x.subCategory === goalSub) : catTasks; } else if (listCat === "today") { visibleTasks = listSub === "overdue" ? tasks.filter((x) => x.day === "overdue") : tasks.filter((x) => x.day === "today"); } else if (listCat === "inbox") { visibleTasks = tasks.filter((x) => !x.abandoned); } else if (listCat === "abandoned") { visibleTasks = tasks.filter((x) => x.abandoned === true); } else { visibleTasks = []; } // ───────── Drawer items with counts ───────── const listDrawerItems = listViews.map((v) => ({ ...v, count: v.id === "today" ? tasks.filter((x) => x.day === "today" || x.day === "overdue").length : v.id === "inbox" ? tasks.filter((x) => !x.abandoned).length : tasks.filter((x) => x.abandoned).length, })); const goalDrawerItems = [ ...allCategories.filter((cat) => cat.id !== "unsorted"), ...allCategories.filter((cat) => cat.id === "unsorted"), ].map((cat) => ({ id: cat.id, label: typeof cat.label === "object" ? cat.label[lang] || cat.label.en : cat.label, icon: "axis", count: tasks.filter((x) => x.category === cat.id).length, })); const handleAddGoalSub = () => { const name = window.prompt(lang === "zh" ? "新增分類名稱：" : "New filter name:"); if (name && name.trim() && setGoalSubCats) { const newSub = { id: `sub-${Date.now()}`, label: { en: name.trim(), zh: name.trim() } }; setGoalSubCats((prev) => ({ ...prev, [goalAxis]: [...(prev[goalAxis] || []), newSub], })); setGoalSub(newSub.id); } }; const handleAddCategory = () => { const name = window.prompt( lang === "zh" ? "新增主題名稱：" : "New axis name:", ); if (name && name.trim()) { setExtraCats((prev) => [ ...prev, { id: `cat-${Date.now()}`, label: { en: name.trim(), zh: name.trim() }, }, ]); } }; // ───────── Lock indicator ───────── const total = visibleTasks.length; const completed = visibleTasks.filter( (x) => x.done || isAllSubDone(x), ).length; const lockReleased = total > 0 && completed === total; // current view label for header const currentGoalCat = allCategories.find((c) => c.id === goalAxis) || allCategories[0]; const currentViewLabel = isList ? (listViews.find((v) => v.id === listCat) || listViews[0]).label : currentGoalCat ? (typeof currentGoalCat.label === "object" ? currentGoalCat.label[lang] || currentGoalCat.label.en : currentGoalCat.label) : t("mode_goals"); return (
{/* Top header — hamburger | title | lock */}
{currentViewLabel}
{/* Goal sub-tabs — visible in goal mode */} {!isList && (
{currentAxisSubs.map((sub) => { const on = goalSub === sub.id; const label = typeof sub.label === "object" ? sub.label[lang] || sub.label.en : sub.label; return ( ); })} {/* Add sub-category button */}
)} {/* Sub-tabs — 已過期 / 今天, only visible inside 'today' top-level view */} {isList && listCat === "today" && (
{todaySubTabs.map((s) => { const on = listSub === s.id; return ( ); })}
)} {/* Task list */} setDetailTask(tasks.find(t => t.id === id) || null)} groupByTime={!isList || listCat === "inbox"} inboxMode={isList && listCat === "inbox"} /> {/* Floating add button — filled accent */} setDetailTask(null)} onStartTask={(id) => { setDetailTask(null); onStartTask(id); }} onCheck={onCheck} categories={allCategories} lang={lang} /> setAddOpen(false)} onConfirm={(task) => addTask && addTask(task)} categories={allCategories} goalSubCats={goalSubCats} initialCategory={!isList ? goalAxis : (allCategories.find(c => c.id !== "unsorted") || allCategories[0] || {}).id} initialGoalSub={!isList ? goalSub : null} tasks={tasks} /> setSheetOpen(false)} items={isList ? listDrawerItems : goalDrawerItems} activeId={isList ? listCat : goalAxis} onPick={(id) => { isList ? setListCat(id) : setGoalAxis(id); }} showAdd={!isList} onAdd={handleAddCategory} />
); } // ───────────────────────────────────────────────────────────── // ───────────────────────────────────────────────────────────── // SideDrawer — TickTick-style left drawer. // Dark warm background, amber icons, count right-aligned, warm highlight on active. function SideDrawer({ open, onClose, items, activeId, onPick, showAdd, onAdd, }) { const DRAWER_BG = "#0c0c0e"; const ACTIVE_ROW = "rgba(255,255,255,0.055)"; const TEXT_HI = W.textHi; const TEXT_LO = "rgba(232,228,218,0.32)"; return (
{/* Scrim */}
{/* Drawer panel */}
{/* ── Header: real photo avatar + name ── */}
{ e.target.style.display = "none"; e.target.parentNode.innerHTML = ``; }} />
WITNESS
{/* ── Item list ── */}
{items.map((item) => { const on = activeId === item.id; return ( ); })}
{/* ── Footer: 新增主題 (goals mode only) ── */} {showAdd && (
)}
); } function DrawerItemIcon({ type }) { if (type === "today") return ( ); if (type === "inbox") return ( ); if (type === "abandoned") return ( ); return ( ); } // ───────────────────────────────────────────────────────────── // Task list body — splits tasks into Incomplete / Completed sections. function TaskListBody({ visibleTasks, onCheck, onStartTask, groupByTime = false, inboxMode = false }) { const [completedOpen, setCompletedOpen] = useStateH(true); const isTaskDone = (task) => task.done || isAllSubDone(task) || (task.type === "C" && task.progress !== undefined && task.progress >= 0.999); const incomplete = visibleTasks.filter((t) => !isTaskDone(t)); const completed = visibleTasks.filter((t) => isTaskDone(t)); const renderTask = (task, dimCheck = false, defaultOpen = true) => ( onCheck(task.id)} onTap={() => onStartTask(task.id)} onCheckSub={(sid) => onCheck(`${task.id}/${sid}`)} /> ); if (groupByTime) { return ( ); } if (visibleTasks.length === 0) { return (
{t("empty_list")}
); } return (
{/* Incomplete section — no header, tasks listed directly */} {incomplete.length > 0 && (
0 ? 20 : 0 }}>
{incomplete.map(renderTask)}
)} {/* Completed section */} {completed.length > 0 && (
setCompletedOpen((o) => !o)} /> {completedOpen && (
{completed.map((t) => renderTask(t, true))}
)}
)}
); } // ───────────────────────────────────────────────────────────── // Goal mode — groups tasks by time period: 已過期 / 今天 / 未來 / 已完成 function TaskListBodyGrouped({ visibleTasks, isTaskDone, renderTask, inboxMode = false }) { const [overdueOpen, setOverdueOpen] = useStateH(true); const [todayOpen, setTodayOpen] = useStateH(true); const [futureOpen, setFutureOpen] = useStateH(true); const [completedOpen, setCompletedOpen] = useStateH(false); const undone = visibleTasks.filter((t) => !isTaskDone(t)); const overdue = undone.filter((t) => t.day === "overdue"); const today = undone.filter((t) => t.day === "today"); const future = undone.filter((t) => t.day !== "overdue" && t.day !== "today"); const completed = visibleTasks.filter((t) => isTaskDone(t)); const scrollStyle = { flex: 1, overflowY: "auto", WebkitOverflowScrolling: "touch", padding: "4px 16px 24px", }; if (visibleTasks.length === 0) { return (
{t("empty_list")}
); } const TimeGroup = ({ label, tasks, open, onToggle, isOverdue, taskDefaultOpen = false }) => { if (tasks.length === 0) return null; return (
{open && (
{tasks.map((task) => renderTask(task, false, taskDefaultOpen))}
)}
); }; return (
{inboxMode ? ( <> setOverdueOpen(o => !o)} isOverdue taskDefaultOpen={false} /> setTodayOpen(o => !o)} taskDefaultOpen={false} /> setFutureOpen(o => !o)} taskDefaultOpen={false} /> setCompletedOpen(o => !o)} taskDefaultOpen={false} /> ) : ( <> setTodayOpen(o => !o)} taskDefaultOpen={true} /> setOverdueOpen(o => !o)} isOverdue taskDefaultOpen={false} /> setFutureOpen(o => !o)} taskDefaultOpen={false} /> setCompletedOpen(o => !o)} taskDefaultOpen={false} /> )}
); } function SectionHeader({ label, count, open, onToggle }) { return ( ); } // ───────────────────────────────────────────────────────────── // Helper: is every subtask of a B/C task done? function isAllSubDone(task) { if (!task.subtasks || task.subtasks.length === 0) return false; return task.subtasks.every((s) => s.done || isAllSubDone(s)); } function subProgress(task) { if (!task.subtasks || task.subtasks.length === 0) return task.progress || 0; const done = task.subtasks.filter((s) => s.done || isAllSubDone(s)).length; return done / task.subtasks.length; } // ───────────────────────────────────────────────────────────── // Task card — dispatches by type. // A — simple: flat row, checkbox + title + date // B — subtasks container: list-icon + title + chevron, expanded subtasks below // C — many-items container: list-icon + title + pie chart (no inline subtasks) // D — type B containing C-type subtasks (rendered naturally) function TaskCard({ task, onCheck, onTap, onCheckSub, dimCheck = false, defaultOpen = true, depth = 0, }) { const tp = task.type || "A"; if (tp === "A") return ( ); if (tp === "C") return ; // B (or anything with subtasks) return ( ); } // ───────────────────────────────────────────────────────────── // Type A — flat single-line task. No container; lives directly in the list. function TaskRowA({ task, onCheck, onTap, dimCheck = false, depth = 0 }) { const checkBg = task.done ? dimCheck ? "rgba(232,230,224,0.18)" : brushedAccent({ intensity: 0.85 }) : "transparent"; const checkShadow = task.done ? dimCheck ? `0 0 0 1px rgba(232,230,224,0.2), inset 0 1px 2px rgba(0,0,0,0.45)` : `inset 0 1px 0 rgba(${W.hiRGB},0.4), inset 0 -1px 1px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.6)` : `0 0 0 1.5px rgba(232,230,224,0.28), inset 0 1px 2px rgba(0,0,0,0.45)`; return (
{task.title}
{task.date && }
); } // ───────────────────────────────────────────────────────────── // Type B — container with expandable subtasks. Checkbox on the left; // user can check the main task directly, or check all subtasks to auto-complete. function TaskRowB({ task, onCheckSub, onTap, onCheck, dimCheck = false, defaultOpen = true, depth = 0 }) { const [open, setOpen] = useStateH(defaultOpen); const allDone = isAllSubDone(task); const isDone = task.done || allDone; // Grey-done style matching A type completed appearance const checkBg = isDone ? "rgba(232,230,224,0.32)" : "transparent"; const checkShadow = isDone ? `0 0 0 1px rgba(232,230,224,0.22), inset 0 1px 2px rgba(0,0,0,0.45)` : `0 0 0 1.5px rgba(232,230,224,0.28), inset 0 1px 2px rgba(0,0,0,0.45)`; return (
{/* Checkbox — stops propagation so it doesn't open detail */}
{task.title}
{/* Date + branch icon — tight together */}
{task.date && }
{ e.stopPropagation(); setOpen(o => !o); }} width="11" height="7" viewBox="0 0 11 7" style={{ transform: open ? "none" : "rotate(-90deg)", transition: "transform .2s", cursor: "pointer", padding: 4, boxSizing: "content-box", }} >
{open && task.subtasks && task.subtasks.length > 0 && (
{task.subtasks.map((sub) => ( onCheckSub && onCheckSub(sub.id)} /> ))}
)}
); } // Render a single subtask. If it has its own subtasks/progress, show // the C-style mini-card; otherwise simple checkbox row. function SubtaskRow({ sub, onCheck }) { if ( sub.type === "C" || (sub.subtasks && sub.subtasks.length > 0) || sub.progress !== undefined ) { return (
{sub.title}
{sub.date && }
); } // simple return (
{sub.title}
{sub.date && }
); } // ───────────────────────────────────────────────────────────── // Type C — independent-events container. No checkbox on the main row. // Shows pie + date + chevron. Expanded by default, sub-items spaced apart. function TaskRowC({ task, onTap, onCheckSub, defaultOpen = true, depth = 0 }) { const [open, setOpen] = useStateH(defaultOpen); const progress = task.progress !== undefined ? task.progress : subProgress(task); return (
= 0.999 ? 0.55 : 1, marginLeft: depth * 18, }} > {/* Main row — no checkbox, tap toggles expand */}
= 0.999 ? W.textLo : W.textHi, letterSpacing: "0.005em", textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", }} > {task.title}
{/* Date + pie icon — tight together */}
{task.date && }
{ e.stopPropagation(); setOpen(o => !o); }} width="11" height="7" viewBox="0 0 11 7" style={{ transform: open ? "none" : "rotate(-90deg)", transition: "transform .2s", cursor: "pointer", padding: 4, boxSizing: "content-box", }} >
{/* Sub-items — independent events, spaced with gap */} {open && task.subtasks && task.subtasks.length > 0 && (
{task.subtasks.map((sub) => ( onCheckSub && onCheckSub(sub.id)} /> ))}
)}
); } // ───────────────────────────────────────────────────────────── // Date label — overdue items render with a warm desaturated red. function TaskDate({ text, overdue, small = false }) { return ( {text} ); } // "Subtask container" icon — rows-of-bullets glyph. function SubtaskGlyph({ small = false }) { const s = small ? 16 : 18; return ( ); } // Pie chart progress glyph — filled sector style. function PieGlyph({ value = 0 }) { const cx = 8, cy = 8, r = 6; if (value <= 0) { return ( ); } if (value >= 0.999) { return ( ); } const angle = value * 2 * Math.PI; const x = cx + r * Math.sin(angle); const y = cy - r * Math.cos(angle); const largeArc = value > 0.5 ? 1 : 0; return ( ); } // ───────────────────────────────────────────────────────────── // Task Detail bottom sheet — shows task info, entry point to Pomodoro function TaskDetailSheet({ task, open, onClose, onStartTask, onCheck, categories, lang }) { if (!task) return null; const catLabel = (cat) => typeof cat.label === "object" ? cat.label[lang] || cat.label.en : cat.label; const cat = categories.find(c => c.id === task.category); const catName = cat ? catLabel(cat) : task.category; const sheetStyle = { position: "absolute", bottom: 0, left: 0, right: 0, background: "#0f1012", borderTopLeftRadius: 18, borderTopRightRadius: 18, boxShadow: "0 -2px 40px rgba(0,0,0,0.85)", transform: open ? "translateY(0)" : "translateY(100%)", transition: "transform .32s cubic-bezier(.2,.85,.3,1)", height: "88%", maxHeight: "95%", display: "flex", flexDirection: "column", }; return (
{/* Handle */}
{/* Category breadcrumb */}
{catName} {task.subCategory && ( <> / {task.subCategory} )}
{/* Scrollable body */}
{/* Title */}
{task.title}
{/* Date */} {task.date && (
{task.overdue ? `已過期 · ${task.date}` : task.date}
)} {/* Pomodoro button */}
onStartTask(task.id)} style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 16px", marginBottom: 18, background: "rgba(196,166,98,0.07)", border: `0.5px solid ${W.accentHi}`, borderRadius: 12, cursor: "pointer", }} >
啟動番茄鐘專注
25 分鐘
{/* Subtasks */} {task.subtasks && task.subtasks.length > 0 && (
{task.subtasks.map((sub, i) => (
onCheck(`${task.id}/${sub.id}`)} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px", cursor: "pointer", borderBottom: i < task.subtasks.length - 1 ? "0.5px solid rgba(255,255,255,0.05)" : "none", opacity: sub.done ? 0.5 : 1, }} >
{sub.done && ( )}
{sub.title}
))} {/* Add subtask hint */}
+ 新增子任務
)}
); } // ───────────────────────────────────────────────────────────── // Add Task bottom sheet — TickTick-style: title-first, bottom toolbar function AddTaskSheet({ open, onClose, onConfirm, categories, goalSubCats, initialCategory, initialGoalSub, tasks = [] }) { const lang = (typeof window !== "undefined" && window.__witnessLang) || "en"; const catLabel = (cat) => typeof cat.label === "object" ? cat.label[lang] || cat.label.en : cat.label; const firstCat = (categories.find(c => c.id !== "unsorted") || categories[0] || {}).id; const getTodayStr = () => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`; }; const [category, setCategory] = useStateH(initialCategory || firstCat); const [subCat, setSubCat] = useStateH(initialGoalSub || ""); const [title, setTitle] = useStateH(""); const [desc, setDesc] = useStateH(""); const [date, setDate] = useStateH(getTodayStr()); const [subMode, setSubMode] = useStateH("none"); const [subs, setSubs] = useStateH([""]); const subInputRefs = React.useRef([]); const allTaskTitles = React.useMemo(() => { const seen = new Set(); return tasks.map(t => t.title).filter(t => { if (seen.has(t)) return false; seen.add(t); return true; }); }, [tasks]); const [suggestions, setSuggestions] = useStateH([]); const [suggFocus, setSuggFocus] = useStateH(-1); const titleRef = React.useRef(null); const blurTimer = React.useRef(null); const computeSugg = (v) => { if (!v.trim()) return []; const q = v.toLowerCase(); return allTaskTitles.filter(t => t.toLowerCase().startsWith(q)); }; const handleTitleChange = (e) => { const v = e.target.value; setTitle(v); const s = computeSugg(v); setSuggestions(s); setSuggFocus(-1); }; const pickSuggestion = (s) => { setTitle(s); setSuggestions([]); setSuggFocus(-1); if (titleRef.current) titleRef.current.focus(); }; const handleTitleKeyDown = (e) => { if (!suggestions.length) return; if (e.key === "ArrowDown") { e.preventDefault(); setSuggFocus(f => Math.min(f + 1, suggestions.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setSuggFocus(f => Math.max(f - 1, -1)); } else if (e.key === "Enter" && suggFocus >= 0) { e.preventDefault(); pickSuggestion(suggestions[suggFocus]); } else if (e.key === "Escape") { setSuggestions([]); setSuggFocus(-1); } }; const handleTitleBlur = () => { blurTimer.current = setTimeout(() => { setSuggestions([]); setSuggFocus(-1); }, 150); }; const handleSuggMouseDown = (s) => { clearTimeout(blurTimer.current); pickSuggestion(s); }; useEffectH(() => { if (open) { const initCat = initialCategory || firstCat; setCategory(initCat); setSubCat(initialGoalSub || firstSubCat(initCat)); setTitle(""); setDesc(""); setDate(getTodayStr()); setSubMode("none"); setSubs([""]); setSuggestions([]); setSuggFocus(-1); } }, [open]); const availableSubCats = (goalSubCats || {})[category] || []; const firstSubCat = (cat) => ((goalSubCats || {})[cat] || [])[0]?.id || ""; const handleConfirm = () => { if (!title.trim()) return; let day = "today", overdue = false; if (date) { const sel = new Date(date + "T00:00:00"); const now = new Date(); now.setHours(0,0,0,0); if (sel < now) { day = "overdue"; overdue = true; } else if (sel.getTime() === now.getTime()) day = "today"; else day = "next7"; } let type = "A"; if (subMode === "check") type = "B"; else if (subMode === "list") type = "C"; const newTask = { id: `task-${Date.now()}`, type, title: title.trim(), category, day, done: false, estMin: 30 }; if (date) { const d = new Date(date + "T00:00:00"); newTask.date = `${d.getMonth() + 1}月${d.getDate()}日`; if (overdue) newTask.overdue = true; } if (subCat) newTask.subCategory = subCat; const validSubs = subs.filter(s => s.trim()); if (validSubs.length > 0 && type !== "A") { newTask.subtasks = validSubs.map((s, i) => ({ id: `sub-${Date.now()}-${i}`, title: s.trim(), done: false })); } onConfirm(newTask); onClose(); }; const inp = { background: "transparent", border: "none", outline: "none", fontFamily: W.display, color: W.textHi, caretColor: W.accentHi, boxSizing: "border-box", }; // Inline text-style select (no box) const txtSel = { background: "transparent", border: "none", outline: "none", fontFamily: W.display, fontSize: 17, color: W.textHi, cursor: "pointer", appearance: "none", WebkitAppearance: "none", padding: "2px 20px 2px 0", }; const orderedCats = [ ...categories.filter(c => c.id !== "unsorted"), ...categories.filter(c => c.id === "unsorted"), ]; const dateDisplay = (() => { const d = new Date(date + "T00:00:00"); const now = new Date(); now.setHours(0,0,0,0); const dateStr = `${d.getMonth()+1}月${d.getDate()}日`; const prefix = d.getTime() === now.getTime() ? (lang === "zh" ? "今天" : "Today") : ""; return prefix ? `${prefix}, ${dateStr}` : dateStr; })(); const miniChevron = ( ); return (
{/* Scrim */}
{/* Sheet */}
{/* Handle */}
{/* Category row — inline text selects */}
{/* Category select */}
{miniChevron}
{/* Sub-cat select */}
{miniChevron}
{/* Scrollable body */}
{/* Title + autocomplete */}
{suggestions.length > 0 && (
{/* header label */}
歷史常用
{suggestions.map((s, i) => { const matched = s.slice(0, title.length); const rest = s.slice(title.length); const active = i === suggFocus; return (
handleSuggMouseDown(s)} onTouchStart={() => handleSuggMouseDown(s)} style={{ padding: "11px 14px", fontFamily: W.display, fontSize: 16, color: active ? W.textHi : W.text, cursor: "pointer", background: active ? `rgba(196,166,98,0.10)` : "transparent", borderBottom: i < suggestions.length - 1 ? "0.5px solid rgba(255,255,255,0.04)" : "none", display: "flex", alignItems: "center", gap: 0, transition: "background 0.1s", borderLeft: active ? `2px solid ${W.accentHi}` : "2px solid transparent", }} > {matched} {rest}
); })}
)}
{/* Date — below title, clickable */} {/* Pomodoro button */}
{/* Tomato icon */}
啟動番茄鐘專注
25 分鐘
{/* Description */}