ocdp v1

frontend/src/shared/components/layout/SidebarLayout/SidebarLayout.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import SidebarNav from "./SidebarNav";
+import type { NavItem } from "./SidebarNav";
+
+interface SidebarLayoutProps {
+  items?: NavItem[];
+  children: React.ReactNode;
+}
+
+export default function SidebarLayout({ items, children }: SidebarLayoutProps) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <div className="relative min-h-screen flex bg-dark text-primary overflow-hidden">
+      <div
+        className="pointer-events-none absolute inset-0 bg-app-gradient opacity-90"
+        aria-hidden="true"
+      />
+      <SidebarNav
+        items={items ?? []}
+        isOpen={isSidebarOpen}
+        onClose={() => setIsSidebarOpen(false)}
+      />
+      <div className="relative z-10 flex flex-col flex-1">
+        {React.Children.map(children, (child) => {
+          // 将 toggleSidebar 函数传递给子组件
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+              // @ts-ignore - 动态传递 props
+              onToggleSidebar: () => setIsSidebarOpen(!isSidebarOpen),
+            } as any);
+          }
+          return child;
+        })}
+      </div>
+    </div>
+  );
+}