HouYunFei
f9b2759499
- 将配置模态框提取为独立组件 AppConfigModal - 将移动端导航抽屉提取为独立组件 MobileNavDrawer - 从 app-theme.ts 中添加选择器相关的主题颜色配置 - 在 Ant Design 主题中注册 Select 组件的样式变量 - 移除 app-top-nav.tsx 中的内联配置和导航代码 - 优化组件导入和状态管理逻辑
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { Drawer } from "antd";
|
|
import Link from "next/link";
|
|
|
|
import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type MobileNavDrawerProps = {
|
|
open: boolean;
|
|
activeToolSlug?: NavigationToolSlug;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export function MobileNavDrawer({ open, activeToolSlug, onClose }: MobileNavDrawerProps) {
|
|
return (
|
|
<Drawer title="导航" placement="left" size={280} open={open} onClose={onClose} className="md:hidden">
|
|
<div className="space-y-1">
|
|
{navigationTools.map((tool) => {
|
|
const Icon = tool.icon;
|
|
const active = tool.slug === activeToolSlug;
|
|
return (
|
|
<Link
|
|
key={tool.slug}
|
|
href={`/${tool.slug}`}
|
|
onClick={onClose}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg px-3 py-3 text-base transition",
|
|
active
|
|
? "bg-stone-100 font-medium text-stone-950 dark:bg-stone-800 dark:text-stone-100"
|
|
: "text-stone-600 hover:bg-stone-100 hover:text-stone-950 dark:text-stone-300 dark:hover:bg-stone-800 dark:hover:text-stone-100",
|
|
)}
|
|
>
|
|
<Icon className="size-5" />
|
|
<span>{tool.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</Drawer>
|
|
);
|
|
}
|