feat: 足迹 Footprints 个人留痕系统

桌面应用(Tauri+React+SQLite)：时间线/记录/学年学科成绩梯度/统计/类型与字段模板/附件内容寻址/详情视图/PWA 同步服务端(sync-server)：多用户+邀请码/LWW推拉/seq游标/附件去重/Docker部署多端同步地基：uuid v7/HLC混合逻辑时钟/软删除墓碑/sync_oplog，Node与Rust双端一致并通过自动化测试
2026-10-16 13:53:15 +08:00
commit 42ca57abfd
107 changed files with 234676 additions and 0 deletions
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Search, Sun, Moon, Plus, Menu } from 'lucide-react';
+import { Button, Input } from '@/components/ui';
+
+const TITLES: Record<string, { title: string; sub?: string }> = {
+  '/timeline': { title: '时间线', sub: '按学年与月份回顾全部足迹' },
+  '/records': { title: '记录', sub: '全部足迹的检索与管理' },
+  '/grades': { title: '成绩', sub: '学年学科成绩 · 梯度与总览' },
+  '/dashboard': { title: '统计', sub: '量化个人成长收获' },
+  '/types': { title: '记录类型', sub: '类型与字段模板管理' },
+  '/taxonomy': { title: '字典与维度', sub: '级别、角色与成长维度' }
+};
+
+export function Header({ onMenu }: { onMenu?: () => void }) {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const [q, setQ] = useState('');
+  const [dark, setDark] = useState(document.documentElement.classList.contains('dark'));
+
+  const meta = TITLES[pathname] ?? { title: '' };
+
+  const toggleTheme = () => {
+    const next = !dark;
+    setDark(next);
+    document.documentElement.classList.toggle('dark', next);
+    localStorage.setItem('fp-theme', next ? 'dark' : 'light');
+    window.dispatchEvent(new CustomEvent('fp-theme-change'));
+  };
+
+  return (
+    <header className="flex h-14 shrink-0 items-center gap-4 border-b border-line bg-surface px-5">
+      <Button variant="ghost" size="icon" className="lg:hidden" onClick={onMenu} aria-label="打开导航">
+        <Menu size={17} />
+      </Button>
+
+      <div className="min-w-0">
+        <h1 className="truncate text-[15px] font-semibold leading-tight text-ink-1">{meta.title}</h1>
+        {meta.sub && <p className="truncate text-[11px] leading-tight text-ink-3">{meta.sub}</p>}
+      </div>
+
+      <div className="relative ml-auto w-[280px]">
+        <Search size={14} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-3" />
+        <Input
+          className="pl-8"
+          placeholder="搜索标题、内容、结果、标签"
+          value={q}
+          onChange={e => setQ(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && q.trim()) {
+              navigate('/records?q=' + encodeURIComponent(q.trim()));
+            }
+          }}
+        />
+      </div>
+
+      <Button variant="ghost" size="icon" onClick={toggleTheme} aria-label="切换主题">
+        {dark ? <Sun size={15} /> : <Moon size={15} />}
+      </Button>
+
+      <Button variant="primary" onClick={() => navigate('/records?new=1')}>
+        <Plus size={14} />
+        新建记录
+      </Button>
+    </header>
+  );
+}