121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Sidebar } from './Sidebar';
|
|
// import { Header } from './Header';
|
|
import { Breadcrumb } from './Breadcrumb';
|
|
import { useMatches, useLocation } from '@remix-run/react';
|
|
import type { UserRole } from '~/root';
|
|
|
|
// 定义应用模块类型
|
|
type AppModule = 'contract' | 'record' | 'model';
|
|
|
|
// 应用模块与reviewType的映射
|
|
const REVIEW_TYPE_TO_APP: Record<string, AppModule> = {
|
|
'contract': 'contract', // 合同管理
|
|
'record': 'record', // 案卷智能评查
|
|
'model': 'model' // 智慧法务大模型
|
|
};
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
userRole?: UserRole;
|
|
}
|
|
|
|
// 添加一个接口表示路由handle可能包含的属性
|
|
interface RouteHandle {
|
|
hideBreadcrumb?: boolean;
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface Match {
|
|
handle?: RouteHandle;
|
|
pathname: string;
|
|
data: unknown;
|
|
}
|
|
|
|
export function Layout({ children, userRole = 'developer' }: LayoutProps) {
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|
const [selectedApp, setSelectedApp] = useState<AppModule>('contract');
|
|
const matches = useMatches() as Match[];
|
|
const location = useLocation();
|
|
|
|
// 检查当前路径是否应该隐藏侧边栏
|
|
const noLayoutPaths = ['/login', '/'];
|
|
const shouldHideSidebar = noLayoutPaths.includes(location.pathname);
|
|
|
|
// 检查当前路由是否应该隐藏默认面包屑
|
|
const shouldHideBreadcrumb = shouldHideSidebar || matches.some(match =>
|
|
match.handle && match.handle.hideBreadcrumb === true
|
|
);
|
|
|
|
// 从sessionStorage中获取侧边栏状态和reviewType
|
|
useEffect(() => {
|
|
// 从localStorage获取侧边栏状态
|
|
const savedState = localStorage.getItem('sidebarCollapsed');
|
|
if (savedState) {
|
|
setSidebarCollapsed(savedState === 'true');
|
|
}
|
|
|
|
// 从sessionStorage获取reviewType并设置对应的应用模块
|
|
if (typeof window !== 'undefined') {
|
|
try {
|
|
const reviewType = sessionStorage.getItem('reviewType');
|
|
if (reviewType && REVIEW_TYPE_TO_APP[reviewType]) {
|
|
setSelectedApp(REVIEW_TYPE_TO_APP[reviewType]);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取reviewType失败:', error);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const toggleSidebar = () => {
|
|
const newState = !sidebarCollapsed;
|
|
setSidebarCollapsed(newState);
|
|
localStorage.setItem('sidebarCollapsed', String(newState));
|
|
};
|
|
|
|
// 切换应用模块
|
|
// const changeAppModule = (appId: AppModule) => {
|
|
// setSelectedApp(appId);
|
|
// localStorage.setItem('selectedApp', appId);
|
|
// };
|
|
|
|
// 如果是无布局页面，只渲染内容
|
|
if (shouldHideSidebar) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
return (
|
|
<div className="layout-container">
|
|
<Sidebar
|
|
collapsed={sidebarCollapsed}
|
|
onToggle={toggleSidebar}
|
|
userRole={userRole}
|
|
selectedApp={selectedApp}
|
|
/>
|
|
|
|
<div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
|
|
{/* 应用模块选择器 */}
|
|
{/* <div className="app-module-selector py-2 px-4 border-b border-gray-100 flex items-center">
|
|
{APP_MODULES.map(app => (
|
|
<button
|
|
key={app.id}
|
|
onClick={() => changeAppModule(app.id as AppModule)}
|
|
className={`app-module-btn mr-4 py-2 px-4 rounded-md flex items-center ${
|
|
selectedApp === app.id ? 'bg-green-50 text-green-700 border border-green-200' : 'hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<i className={`${app.icon} mr-2`}></i>
|
|
<span>{app.name}</span>
|
|
</button>
|
|
))}
|
|
</div> */}
|
|
|
|
<div className="content-container">
|
|
{!shouldHideBreadcrumb && <Breadcrumb />}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|