feat: 添加浅色主题支持

- 配置浅色主题配色方案和 CSS 变量 - 修复组件在浅色模式下的样式适配 - 统一文字颜色类名使用 CSS 变量 - 优化玻璃效果在浅色主题下的显示
2026-07-09 22:10:49 +08:00
commit b43e3725ee
34 changed files with 7911 additions and 0 deletions
@@ -0,0 +1,74 @@
+import { Link, useLocation } from 'react-router-dom'
+import { LayoutDashboard, FileText, Plus, Settings, Mic } from 'lucide-react'
+import clsx from 'clsx'
+import ThemeToggle from './ThemeToggle'
+
+const navItems = [
+  { path: '/', icon: LayoutDashboard, label: '概览' },
+  { path: '/meetings', icon: FileText, label: '会议' },
+  { path: '/upload', icon: Plus, label: '新建' },
+  { path: '/settings', icon: Settings, label: '设置' },
+]
+
+export default function Layout({ children }) {
+  const location = useLocation()
+
+  return (
+    <div className="min-h-screen bg-primary flex">
+      {/* 侧边栏 */}
+      <aside className="w-56 flex flex-col h-screen sticky top-0 border-r border-theme">
+        {/* Logo 区域 */}
+        <div className="p-5">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-accent-muted flex items-center justify-center shadow-glow">
+                <Mic className="w-4 h-4 text-white" />
+              </div>
+              <div>
+                <h1 className="text-sm font-semibold text-primary tracking-tight">会议记录</h1>
+                <p className="text-[10px] text-muted">智能转录系统</p>
+              </div>
+            </div>
+            <ThemeToggle />
+          </div>
+        </div>
+
+        {/* 导航 */}
+        <nav className="flex-1 px-3 space-y-0.5">
+          {navItems.map(({ path, icon: Icon, label }) => {
+            const isActive = location.pathname === path
+            return (
+              <Link
+                key={path}
+                to={path}
+                className={clsx(
+                  'flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200',
+                  isActive
+                    ? 'bg-accent/15 text-accent font-medium'
+                    : 'text-secondary hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'
+                )}
+              >
+                <Icon className={clsx('w-4 h-4', isActive && 'text-accent')} />
+                <span>{label}</span>
+              </Link>
+            )
+          })}
+        </nav>
+
+        {/* 底部 */}
+        <div className="p-4 border-t border-theme">
+          <div className="text-[10px] text-muted text-center">
+            FunASR + DeepSeek
+          </div>
+        </div>
+      </aside>
+
+      {/* 主内容区 */}
+      <main className="flex-1 min-h-screen">
+        <div className="p-8">
+          {children}
+        </div>
+      </main>
+    </div>
+  )
+}