/* ========== Skills + Todo + 影片抽屜 + Cmd-K ========== */ function SkillsView({ runCommand }) { const [running, setRunning] = useState(null); const tiers = { T0: '基礎', T1: '生成', T2: '進階' }; const tierColors = { T0: 'var(--info)', T1: 'var(--kai-bright)', T2: 'var(--ruby)' }; return (

Skills

{SKILLS.length} 個工具
點擊任一 Skill 直接執行。所有 Skill 都會根據 pipeline 與表現資料自動帶入上下文。
{Object.entries(tiers).map(([tier, tierLabel]) => (
{tier} · {tierLabel}
{SKILLS.filter(s => s.tier === tier).map(s => ( { setRunning(s.name); runCommand(`skill: ${s.name}`); setTimeout(() => setRunning(null), 1500); }} /> ))}
))}
); } function SkillCard({ skill, color, running, onRun }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ padding: 14, background: 'var(--bg-1)', border: `1px solid ${hover ? color : 'var(--line)'}`, borderRadius: 9, position: 'relative', overflow: 'hidden', transition: 'border-color 0.15s', }}>
{skill.name}
{skill.uses}× 使用
{skill.desc}
); } /* ===== 待辦頁 ===== */ function TodoView({ todos }) { return (

待辦

{todos.filter(t => t.overdue).length} 逾期
{todos.map((t, i) => (
))}
); } /* ========== 影片詳細抽屜 ========== */ function DetailDrawer({ items, current, onClose, onNav }) { const idx = items.findIndex(i => i.id === current); const it = items[idx]; if (!it) return null; const prev = idx > 0 ? items[idx - 1] : null; const next = idx < items.length - 1 ? items[idx + 1] : null; useEffect(() => { const h = (e) => { if (e.key === 'Escape') onClose(); else if (e.key === 'ArrowLeft' && prev) onNav(prev.id); else if (e.key === 'ArrowRight' && next) onNav(next.id); }; window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h); }, [current, prev, next]); return ( <>
); } function SectionTitle({ icon, children }) { return (
{children}
); } function KV({ label, value, mono }) { return (
{label}
{value}
); } function ActionBtn({ icon, label }) { return ( ); } /* ========== Cmd-K Palette ========== */ function CmdK({ items, onClose, onSelect, switchView }) { const [q, setQ] = useState(''); const [idx, setIdx] = useState(0); const inputRef = useRef(null); useEffect(() => { inputRef.current?.focus(); }, []); const results = useMemo(() => { const cmds = [ { kind: 'view', label: '前往：今天', action: () => switchView('today'), icon: 'home' }, { kind: 'view', label: '前往：Pipeline', action: () => switchView('pipeline'), icon: 'flow' }, { kind: 'view', label: '前往：表現分析', action: () => switchView('performance'), icon: 'radar' }, { kind: 'view', label: '前往：公式矩陣', action: () => switchView('formula'), icon: 'formula' }, { kind: 'view', label: '前往：Skills', action: () => switchView('skills'), icon: 'bolt' }, { kind: 'view', label: '前往：待辦', action: () => switchView('todo'), icon: 'todo' }, ]; const itemResults = items.slice(0, 30).map(it => ({ kind: 'item', label: `${it.id}${it.vid ? ` · ${it.vid}` : ''} — ${it.title || it.topic}`, sub: STAGE_LABELS[it.status], action: () => onSelect(it.id), icon: 'file', meta: it, })); const all = [...cmds, ...itemResults]; if (!q) return all.slice(0, 12); const lc = q.toLowerCase(); return all.filter(r => r.label.toLowerCase().includes(lc)).slice(0, 12); }, [q, items]); useEffect(() => { setIdx(0); }, [q]); const handleKey = (e) => { if (e.key === 'ArrowDown') { e.preventDefault(); setIdx(i => Math.min(results.length - 1, i + 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setIdx(i => Math.max(0, i - 1)); } else if (e.key === 'Enter' && results[idx]) { results[idx].action(); onClose(); } else if (e.key === 'Escape') onClose(); }; return ( <>
setQ(e.target.value)} onKeyDown={handleKey} placeholder="搜尋影片、靈感、指令…" style={{ flex: 1, fontSize: 14, color: 'var(--ink-0)', background: 'none' }} /> Esc
{results.map((r, i) => ( ))} {results.length === 0 &&
沒有結果
}
↑↓ 選擇↵ 確認Esc 關閉
); } Object.assign(window, { SkillsView, TodoView, DetailDrawer, CmdK });