PC应用

// This approach creates a PC application with a left-side menu structure as requested. // We'll use React for the UI components and React Router for navigation. // The server will serve the HTML, and the client-side React application will handle the menu and routing. /** @jsxImportSource https://esm.sh/react */ 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 (

setIsOpen(!isOpen)} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className={`menu-item-header ${isOpen ? "open" : ""} ${isHovered ? "hovered" : ""}`} > {item.name} {isOpen ? "▼" : "▶"}

{isOpen && item.subMenu && (

{item.subMenu.map((subItem, index) => ( {subItem.name} ))}

)}

); } function Menu() { return (

{menuStructure.map((item, index) => )}

); } function Content() { return (

欢迎使用} /> 产品管理} /> 元数据市场} /> 元数据配置} /> 维度配置} /> 跳转参数配置} /> 基础元素配置} /> 应用管理} /> 标准问题清单} /> 插件配置} /> 我的申请} /> 待我审批} />

); } function App() { return (

); } function client() { ReactDOM.createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response( ` PC应用

`, { headers: { "content-type": "text/html;charset=UTF-8", }, }, ); } const css = ` body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: #1890ff; text-decoration: none; } a:hover { color: #40a9ff; } .menu-item { margin-bottom: 5px; } .menu-item-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; cursor: pointer; background-color: #f0f2f5; border-radius: 4px; transition: background-color 0.3s; } .menu-item-header:hover, .menu-item-header.hovered { background-color: #e6f7ff; } .menu-item-header.open { background-color: #1890ff; color: white; } .arrow { font-size: 12px; } .sub-menu { padding-left: 15px; margin-top: 5px; } .sub-menu-item { display: block; padding: 8px 15px; margin-bottom: 2px; border-radius: 4px; transition: background-color 0.3s; } .sub-menu-item:hover { background-color: #e6f7ff; } `; export default server;

httpHelloWorld