yuxuanhui
93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
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>
|
|
)
|
|
}
|