import ReactDOM from "https://esm.sh/react-dom@18.2.0";
import { BrowserRouter, Link, Route, Routes } from "https://esm.sh/react-router-dom@6.11.2";
import React from "https://esm.sh/react@18.2.0";
const menuStructure = [
{
name: "产品中心",
subMenu: [
{ name: "产品管理", path: "/product-management" },
],
},
{
name: "元数据市场",
subMenu: [
{ name: "元数据市场", path: "/metadata-market" },
{ name: "元数据配置", path: "/metadata-config" },
{ name: "维度配置", path: "/dimension-config" },
{ name: "跳转参数配置", path: "/jump-param-config" },
{ name: "基础元素配置", path: "/basic-element-config" },
],
},
{
name: "开发中心",
subMenu: [
{ name: "应用管理", path: "/app-management" },
{ name: "标准问题清单", path: "/standard-question-list" },
{ name: "插件配置", path: "/plugin-config" },
],
},
{
name: "审批管理",
subMenu: [
{ name: "我的申请", path: "/my-applications" },
{ name: "待我审批", path: "/pending-approvals" },
],
},
];
function MenuItem({ item }) {
const [isOpen, setIsOpen] = React.useState(false);
const [isHovered, setIsHovered] = React.useState(false);
return (
<div className="menu-item">
<div
onClick={() => setIsOpen(!isOpen)}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className={`menu-item-header ${isOpen ? "open" : ""} ${isHovered ? "hovered" : ""}`}
>
{item.name}
<span className="arrow">{isOpen ? "▼" : "▶"}</span>
</div>
{isOpen && item.subMenu && (
<div className="sub-menu">
{item.subMenu.map((subItem, index) => (
<Link key={index} to={subItem.path} className="sub-menu-item">{subItem.name}</Link>
))}
</div>
)}
</div>
);
}
function Menu() {
return (
<div style={{ width: "250px", borderRight: "1px solid #ccc", height: "100vh", overflowY: "auto" }}>
{menuStructure.map((item, index) => <MenuItem key={index} item={item} />)}
</div>
);
}
function Content() {
return (
<div style={{ padding: "20px", flexGrow: 1 }}>
<Routes>
<Route path="/" element={<h2>欢迎使用</h2>} />
<Route path="/product-management" element={<h2>产品管理</h2>} />
<Route path="/metadata-market" element={<h2>元数据市场</h2>} />
<Route path="/metadata-config" element={<h2>元数据配置</h2>} />
<Route path="/dimension-config" element={<h2>维度配置</h2>} />
<Route path="/jump-param-config" element={<h2>跳转参数配置</h2>} />
<Route path="/basic-element-config" element={<h2>基础元素配置</h2>} />
<Route path="/app-management" element={<h2>应用管理</h2>} />
<Route path="/standard-question-list" element={<h2>标准问题清单</h2>} />
<Route path="/plugin-config" element={<h2>插件配置</h2>} />
<Route path="/my-applications" element={<h2>我的申请</h2>} />
<Route path="/pending-approvals" element={<h2>待我审批</h2>} />
</Routes>
</div>
);
}
function App() {
return (