feat(home): 添加市场数据概览

2026-08-07 13:29:31 +08:00
parent 9023e00213
commit b0e846d79c
33 changed files with 2229 additions and 18 deletions
@@ -0,0 +1,92 @@
+import {
+  BarChart3,
+  BrainCircuit,
+  ClipboardCheck,
+  LayoutDashboard,
+  Search,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback } from "@/shared/ui/avatar"
+import { Button } from "@/shared/ui/button"
+import { Input } from "@/shared/ui/input"
+import { Separator } from "@/shared/ui/separator"
+
+interface HomeShellProps {
+  children: React.ReactNode
+}
+
+const navigation = [
+  { label: "首页", icon: LayoutDashboard, active: true },
+  { label: "行情数据", icon: BarChart3, active: false },
+  { label: "同步任务", icon: ClipboardCheck, active: false },
+  { label: "选股策略", icon: BrainCircuit, active: false },
+]
+
+export function HomeShell({ children }: HomeShellProps) {
+  return (
+    <div className="flex min-h-screen bg-muted/30 text-foreground">
+      <aside className="flex w-20 shrink-0 flex-col border-r bg-card px-3 py-5 md:w-64 md:px-5">
+        <div className="flex items-center gap-3 px-1 md:px-2">
+          <div className="flex size-9 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm">
+            <BarChart3 className="size-5" aria-hidden="true" />
+          </div>
+          <div className="hidden min-w-0 md:block">
+            <p className="truncate text-sm font-semibold tracking-wide">
+              知行量化
+            </p>
+            <p className="text-xs text-muted-foreground">研究工作台</p>
+          </div>
+        </div>
+
+        <Separator className="my-6" />
+
+        <nav aria-label="主导航" className="space-y-1">
+          {navigation.map((item) => {
+            const Icon = item.icon
+            return (
+              <Button
+                key={item.label}
+                className="w-full justify-start gap-3 px-2 md:px-3"
+                disabled={!item.active}
+                variant={item.active ? "secondary" : "ghost"}
+                aria-current={item.active ? "page" : undefined}
+              >
+                <Icon className="size-4 shrink-0" aria-hidden="true" />
+                <span className="hidden md:inline">{item.label}</span>
+              </Button>
+            )
+          })}
+        </nav>
+
+        <div className="mt-auto hidden rounded-xl bg-muted/60 p-4 md:block">
+          <p className="text-xs font-medium">数据研究空间</p>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">
+            从市场数据概览开始，掌握当前研究基础。
+          </p>
+        </div>
+      </aside>
+
+      <div className="min-w-0 flex-1">
+        <header className="flex h-16 items-center justify-between gap-4 border-b bg-card/80 px-4 backdrop-blur md:px-8">
+          <div className="relative w-full max-w-md">
+            <Search
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <Input
+              aria-label="搜索"
+              className="h-9 bg-muted/40 pl-9"
+              placeholder="搜索股票、数据或功能"
+              readOnly
+            />
+          </div>
+          <Avatar aria-label="用户头像">
+            <AvatarFallback>研</AvatarFallback>
+          </Avatar>
+        </header>
+
+        <main className="mx-auto w-full max-w-7xl p-4 md:p-8">{children}</main>
+      </div>
+    </div>
+  )
+}