forked from 77media/video-flow
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import { Sidebar } from './sidebar';
|
|
import { TopBar } from './top-bar';
|
|
import { useDeviceType } from '@/hooks/useDeviceType';
|
|
|
|
interface DashboardLayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function DashboardLayout({ children }: DashboardLayoutProps) {
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(true); // 默认收起状态
|
|
const { deviceType, isMobile, isTablet, isDesktop } = useDeviceType();
|
|
|
|
// 根据设备类型设置布局样式
|
|
const getLayoutStyles = () => {
|
|
if (isMobile) {
|
|
return {
|
|
left: '0',
|
|
width: '100vw'
|
|
};
|
|
}
|
|
|
|
if (isTablet) {
|
|
return {
|
|
left: sidebarCollapsed ? '3rem' : '12rem',
|
|
width: sidebarCollapsed ? 'calc(100vw - 3rem)' : 'calc(100vw - 12rem)'
|
|
};
|
|
}
|
|
|
|
// 桌面端
|
|
return {
|
|
left: sidebarCollapsed ? '4rem' : '16rem',
|
|
width: sidebarCollapsed ? 'calc(100vw - 4rem)' : 'calc(100vw - 16rem)'
|
|
};
|
|
};
|
|
|
|
return (
|
|
<div className=" min-h-screen bg-background">
|
|
<TopBar collapsed={sidebarCollapsed} isDesktop={isDesktop} />
|
|
{isDesktop && <Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} />}
|
|
<div
|
|
className="h-[calc(100vh-4rem)] top-[4rem] fixed right-0 bottom-0 z-[999] px-4"
|
|
style={getLayoutStyles()}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|