Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// 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 (
<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 (