更换 UI

2026-08-06 09:32:15 +08:00
parent 28d1b5d1c6
commit 7f72bf809b
21 changed files with 767 additions and 2277 deletions
@@ -0,0 +1,37 @@
+// 底部 TabBar 图标: 简洁线性 SVG, 仿原生 App 风格
+// props: name 字符串, active 布尔
+// 返回对应的 24x24 SVG 节点
+const ICONS = {
+  home: (active) => (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 11l9-7 9 7" />
+      <path d="M5 10v10h14V10" />
+      {active ? <path d="M10 20v-5h4v5" fill="currentColor" stroke="none" /> : null}
+    </svg>
+  ),
+  macro: (active) => (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="7" height="9" rx="1" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.15 : 0} />
+      <rect x="14" y="3" width="7" height="5" rx="1" />
+      <rect x="14" y="12" width="7" height="9" rx="1" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.15 : 0} />
+      <rect x="3" y="16" width="7" height="5" rx="1" />
+    </svg>
+  ),
+  monitor: (active) => (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 12h4l2-5 4 10 2-5h6" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.12 : 0} />
+    </svg>
+  ),
+  me: (active) => (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="8" r="4" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.15 : 0} />
+      <path d="M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6" />
+    </svg>
+  ),
+}
+
+export default function TabIcon({ name, active }) {
+  const render = ICONS[name]
+  if (!render) return null
+  return <span className="tab-icon">{render(!!active)}</span>
+}