55 lines
1.3 KiB
TypeScript
Executable File
55 lines
1.3 KiB
TypeScript
Executable File
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { ProfileOverview } from './profile-overview';
|
|
import { ProfileSheet } from './profile-sheet';
|
|
import { ProfileProvider } from './profile-provider';
|
|
import { ProfileSidebar } from './profile-sidebar';
|
|
import { ProfileElite } from './profile-elite';
|
|
|
|
// 根据activeItem渲染对应的内容组件
|
|
function renderContent(activeItem: string) {
|
|
switch (activeItem) {
|
|
case 'overview':
|
|
return <ProfileOverview />
|
|
case 'elite':
|
|
return <ProfileElite />
|
|
default:
|
|
return (
|
|
<ProfileOverview />
|
|
);
|
|
}
|
|
}
|
|
|
|
export default function ProfileLayout() {
|
|
const [activeItem, setActiveItem] = useState('overview');
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|
|
|
const handleItemChange = (key: string) => {
|
|
setActiveItem(key);
|
|
};
|
|
|
|
const handleToggleCollapse = () => {
|
|
setSidebarCollapsed(!sidebarCollapsed);
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full">
|
|
{/* 侧边栏 */}
|
|
<ProfileSidebar
|
|
activeItem={activeItem}
|
|
onItemChange={handleItemChange}
|
|
collapsed={sidebarCollapsed}
|
|
onToggleCollapse={handleToggleCollapse}
|
|
/>
|
|
|
|
{/* 主内容区域 */}
|
|
<div className="flex-1 flex flex-col overflow-hidden p-4">
|
|
<ProfileProvider>
|
|
{renderContent(activeItem)}
|
|
<ProfileSheet />
|
|
</ProfileProvider>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |