435 lines
12 KiB
JavaScript
435 lines
12 KiB
JavaScript
import React, {
|
||
useState,
|
||
useCallback,
|
||
useMemo,
|
||
useEffect,
|
||
} from "react";
|
||
import { Layout, Menu, Breadcrumb, Tabs, Button, Dropdown, Space, Typography } from "antd";
|
||
import {
|
||
ReloadOutlined,
|
||
CloseOutlined,
|
||
CloseCircleOutlined,
|
||
DownOutlined,
|
||
MenuFoldOutlined,
|
||
MenuUnfoldOutlined,
|
||
} from "@ant-design/icons";
|
||
import menuItems, {
|
||
findMenuPath,
|
||
getPageLabel,
|
||
getOpenKeys,
|
||
getSelectedKeys,
|
||
} from "./menuConfig";
|
||
|
||
const { Header, Sider, Content } = Layout;
|
||
const { Text } = Typography;
|
||
|
||
const TABS_KEY = "sim_layout_tabs";
|
||
const ACTIVE_KEY = "sim_layout_active";
|
||
|
||
/* ---- sessionStorage 持久化 ---- */
|
||
function loadState() {
|
||
try {
|
||
const tabs = JSON.parse(sessionStorage.getItem(TABS_KEY) || "[]");
|
||
const activeKey = sessionStorage.getItem(ACTIVE_KEY) || "";
|
||
return { tabs, activeKey };
|
||
} catch {
|
||
return { tabs: [], activeKey: "" };
|
||
}
|
||
}
|
||
|
||
function saveState(tabs, activeKey) {
|
||
sessionStorage.setItem(TABS_KEY, JSON.stringify(tabs));
|
||
sessionStorage.setItem(ACTIVE_KEY, activeKey || "");
|
||
}
|
||
|
||
export default function SimulatedLayout({ children }) {
|
||
const [collapsed, setCollapsed] = useState(false);
|
||
const [state, setState] = useState(loadState);
|
||
const currentPath = window.location.pathname;
|
||
|
||
// 页面加载时自动将当前路径加入标签
|
||
useEffect(() => {
|
||
if (currentPath && !currentPath.endsWith("/container/")) {
|
||
addTab(currentPath);
|
||
}
|
||
}, []); // 仅挂载时执行一次
|
||
|
||
/* ---- 标签操作 ---- */
|
||
const addTab = useCallback((path) => {
|
||
setState((prev) => {
|
||
if (prev.tabs.find((t) => t.key === path)) {
|
||
// 已存在则仅更新 activeKey
|
||
if (prev.activeKey !== path) {
|
||
saveState(prev.tabs, path);
|
||
return { ...prev, activeKey: path };
|
||
}
|
||
return prev;
|
||
}
|
||
const newTabs = [...prev.tabs, { key: path, label: getPageLabel(path) }];
|
||
saveState(newTabs, path);
|
||
return { tabs: newTabs, activeKey: path };
|
||
});
|
||
}, []);
|
||
|
||
const navigateTo = useCallback((path) => {
|
||
if (path !== currentPath) {
|
||
window.location.href = path;
|
||
}
|
||
}, [currentPath]);
|
||
|
||
const handleCloseTab = useCallback((targetKey) => {
|
||
setState((prev) => {
|
||
const idx = prev.tabs.findIndex((t) => t.key === targetKey);
|
||
const newTabs = prev.tabs.filter((t) => t.key !== targetKey);
|
||
if (newTabs.length === 0) {
|
||
saveState([], "");
|
||
return { tabs: [], activeKey: "" };
|
||
}
|
||
let newActive = prev.activeKey;
|
||
if (targetKey === prev.activeKey) {
|
||
newActive = newTabs[Math.max(0, idx - 1)]?.key || newTabs[0]?.key;
|
||
navigateTo(newActive);
|
||
}
|
||
saveState(newTabs, newActive);
|
||
return { tabs: newTabs, activeKey: newActive };
|
||
});
|
||
}, [navigateTo]);
|
||
|
||
const handleCloseOthers = useCallback((targetKey) => {
|
||
setState((prev) => {
|
||
const target = prev.tabs.find((t) => t.key === targetKey);
|
||
const newTabs = target ? [target] : [];
|
||
saveState(newTabs, targetKey);
|
||
if (targetKey !== currentPath) navigateTo(targetKey);
|
||
return { tabs: newTabs, activeKey: targetKey };
|
||
});
|
||
}, [currentPath, navigateTo]);
|
||
|
||
const handleCloseRight = useCallback((targetKey) => {
|
||
setState((prev) => {
|
||
const idx = prev.tabs.findIndex((t) => t.key === targetKey);
|
||
if (idx === -1) return prev;
|
||
const newTabs = prev.tabs.slice(0, idx + 1);
|
||
saveState(newTabs, targetKey);
|
||
return { tabs: newTabs, activeKey: targetKey };
|
||
});
|
||
}, []);
|
||
|
||
const handleCloseAll = useCallback(() => {
|
||
saveState([], "");
|
||
setState({ tabs: [], activeKey: "" });
|
||
}, []);
|
||
|
||
const handleRefresh = useCallback(() => {
|
||
window.location.reload();
|
||
}, []);
|
||
|
||
/* ---- 菜单事件 ---- */
|
||
const handleMenuClick = useCallback(
|
||
({ key }) => {
|
||
navigateTo(key);
|
||
},
|
||
[navigateTo],
|
||
);
|
||
|
||
const handleTabChange = useCallback(
|
||
(key) => {
|
||
navigateTo(key);
|
||
},
|
||
[navigateTo],
|
||
);
|
||
|
||
const handleTabEdit = useCallback(
|
||
(targetKey, action) => {
|
||
if (action === "remove") handleCloseTab(targetKey);
|
||
},
|
||
[handleCloseTab],
|
||
);
|
||
|
||
/* ---- 面包屑 ---- */
|
||
const breadcrumbItems = useMemo(() => {
|
||
const path = findMenuPath(currentPath);
|
||
return path.map((item, idx) => ({
|
||
title:
|
||
idx === path.length - 1 ? (
|
||
item.label
|
||
) : (
|
||
<a onClick={() => handleMenuClick({ key: item.key })}>{item.label}</a>
|
||
),
|
||
key: item.key,
|
||
}));
|
||
}, [currentPath, handleMenuClick]);
|
||
|
||
/* ---- 菜单选中/展开 ---- */
|
||
const selectedKeys = useMemo(() => getSelectedKeys(currentPath), [currentPath]);
|
||
const defaultOpenKeys = useMemo(() => getOpenKeys(currentPath), [currentPath]);
|
||
|
||
/* ---- 标签页右键菜单 ---- */
|
||
const buildContextMenu = useCallback(
|
||
(tabKey) => {
|
||
const { tabs } = state;
|
||
const isOnlyOne = tabs.length <= 1;
|
||
const idx = tabs.findIndex((t) => t.key === tabKey);
|
||
const hasRight = idx >= 0 && idx < tabs.length - 1;
|
||
return {
|
||
items: [
|
||
{
|
||
key: "refresh",
|
||
icon: <ReloadOutlined />,
|
||
label: "刷新当前标签",
|
||
},
|
||
{
|
||
key: "close",
|
||
icon: <CloseOutlined />,
|
||
label: "关闭当前标签",
|
||
disabled: isOnlyOne,
|
||
},
|
||
{
|
||
key: "close-others",
|
||
icon: <CloseCircleOutlined />,
|
||
label: "关闭其他标签",
|
||
disabled: isOnlyOne,
|
||
},
|
||
{
|
||
key: "close-right",
|
||
icon: <CloseOutlined />,
|
||
label: "关闭右侧标签",
|
||
disabled: !hasRight,
|
||
},
|
||
{ type: "divider" },
|
||
{
|
||
key: "close-all",
|
||
icon: <CloseCircleOutlined />,
|
||
label: "关闭所有标签",
|
||
disabled: tabs.length === 0,
|
||
},
|
||
],
|
||
onClick: ({ key }) => {
|
||
switch (key) {
|
||
case "refresh":
|
||
handleRefresh();
|
||
break;
|
||
case "close":
|
||
handleCloseTab(tabKey);
|
||
break;
|
||
case "close-others":
|
||
handleCloseOthers(tabKey);
|
||
break;
|
||
case "close-right":
|
||
handleCloseRight(tabKey);
|
||
break;
|
||
case "close-all":
|
||
handleCloseAll();
|
||
break;
|
||
}
|
||
},
|
||
};
|
||
},
|
||
[state, handleRefresh, handleCloseTab, handleCloseOthers, handleCloseRight, handleCloseAll],
|
||
);
|
||
|
||
/* ---- 标签 label 渲染（带右键菜单） ---- */
|
||
const renderTabLabel = useCallback(
|
||
(tab) => (
|
||
<Dropdown menu={buildContextMenu(tab.key)} trigger={["contextMenu"]}>
|
||
<span style={{ display: "inline-block", padding: "0 8px", userSelect: "none" }}>
|
||
{tab.label}
|
||
</span>
|
||
</Dropdown>
|
||
),
|
||
[buildContextMenu],
|
||
);
|
||
|
||
const { tabs, activeKey } = state;
|
||
const siderWidth = collapsed ? 64 : 220;
|
||
|
||
return (
|
||
<Layout style={{ minHeight: "100vh" }}>
|
||
{/* ---- 侧边栏 ---- */}
|
||
<Sider
|
||
collapsible
|
||
collapsed={collapsed}
|
||
onCollapse={setCollapsed}
|
||
theme="dark"
|
||
width={220}
|
||
style={{
|
||
overflow: "auto",
|
||
height: "100vh",
|
||
position: "fixed",
|
||
left: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
zIndex: 10,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
height: 48,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
color: "#fff",
|
||
fontWeight: 700,
|
||
fontSize: collapsed ? 15 : 17,
|
||
borderBottom: "1px solid rgba(255,255,255,0.1)",
|
||
letterSpacing: 1,
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{collapsed ? "证照" : "证照管理系统"}
|
||
</div>
|
||
<Menu
|
||
theme="dark"
|
||
mode="inline"
|
||
selectedKeys={selectedKeys}
|
||
defaultOpenKeys={defaultOpenKeys}
|
||
onClick={handleMenuClick}
|
||
items={menuItems}
|
||
style={{ borderRight: 0 }}
|
||
/>
|
||
</Sider>
|
||
|
||
{/* ---- 右侧主体 ---- */}
|
||
<Layout
|
||
style={{
|
||
marginLeft: siderWidth,
|
||
transition: "margin-left 0.2s",
|
||
}}
|
||
>
|
||
{/* ---- Header + 面包屑 + 操作按钮 ---- */}
|
||
<Header
|
||
style={{
|
||
background: "#fff",
|
||
padding: "0 16px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
borderBottom: "1px solid #f0f0f0",
|
||
height: 48,
|
||
}}
|
||
>
|
||
<Space>
|
||
<Button
|
||
type="text"
|
||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||
onClick={() => setCollapsed(!collapsed)}
|
||
/>
|
||
<Breadcrumb items={breadcrumbItems} />
|
||
</Space>
|
||
<Space>
|
||
<Button
|
||
type="text"
|
||
icon={<ReloadOutlined />}
|
||
onClick={handleRefresh}
|
||
>
|
||
刷新
|
||
</Button>
|
||
<Button
|
||
type="text"
|
||
icon={<CloseCircleOutlined />}
|
||
onClick={handleCloseAll}
|
||
disabled={tabs.length === 0}
|
||
>
|
||
关闭所有
|
||
</Button>
|
||
<Text type="secondary" style={{ fontSize: 12 }}>
|
||
模拟布局·Dev
|
||
</Text>
|
||
</Space>
|
||
</Header>
|
||
|
||
{/* ---- 标签栏 ---- */}
|
||
<div
|
||
style={{
|
||
background: "#fff",
|
||
borderBottom: "1px solid #f0f0f0",
|
||
padding: "4px 8px 0",
|
||
}}
|
||
>
|
||
{tabs.length > 0 ? (
|
||
<Tabs
|
||
type="editable-card"
|
||
hideAdd
|
||
activeKey={activeKey}
|
||
onChange={handleTabChange}
|
||
onEdit={handleTabEdit}
|
||
size="small"
|
||
style={{ marginBottom: 0 }}
|
||
items={tabs.map((tab) => ({
|
||
key: tab.key,
|
||
label: renderTabLabel(tab),
|
||
closable: true,
|
||
}))}
|
||
tabBarExtraContent={
|
||
<Dropdown
|
||
menu={{
|
||
items: [
|
||
{
|
||
key: "refresh",
|
||
icon: <ReloadOutlined />,
|
||
label: "刷新当前标签",
|
||
},
|
||
{
|
||
key: "close-others",
|
||
icon: <CloseOutlined />,
|
||
label: "关闭其他标签",
|
||
disabled: tabs.length <= 1,
|
||
},
|
||
{
|
||
key: "close-all",
|
||
icon: <CloseCircleOutlined />,
|
||
label: "关闭所有标签",
|
||
disabled: tabs.length === 0,
|
||
},
|
||
],
|
||
onClick: ({ key }) => {
|
||
switch (key) {
|
||
case "refresh":
|
||
handleRefresh();
|
||
break;
|
||
case "close-others":
|
||
handleCloseOthers(activeKey);
|
||
break;
|
||
case "close-all":
|
||
handleCloseAll();
|
||
break;
|
||
}
|
||
},
|
||
}}
|
||
placement="bottomRight"
|
||
>
|
||
<Button type="text" size="small" icon={<DownOutlined />} />
|
||
</Dropdown>
|
||
}
|
||
/>
|
||
) : (
|
||
<div
|
||
style={{
|
||
height: 36,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
paddingLeft: 8,
|
||
color: "#bbb",
|
||
fontSize: 12,
|
||
}}
|
||
>
|
||
暂无打开的标签页，请从左侧菜单选择页面
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* ---- 内容区 ---- */}
|
||
<Content
|
||
style={{
|
||
margin: 0,
|
||
minHeight: 280,
|
||
position: "relative",
|
||
}}
|
||
>
|
||
{children}
|
||
</Content>
|
||
</Layout>
|
||
</Layout>
|
||
);
|
||
}
|