first commit

2026-07-13 15:23:29 +08:00
commit 50885a98c8
473 changed files with 33772 additions and 0 deletions
@@ -0,0 +1,84 @@
+import useGlobalStore from "@/stores/global";
+import {Layout} from "antd";
+import HeaderRender from "@/layout/HeaderRender";
+import FooterRender from "@/layout/FooterRender";
+import MenuRender from "@/layout/MenuRender";
+import MobileDrawerMenu from "@/layout/MobileDrawerMenu";
+import SettingDrawer from "@/layout/SettingDrawer";
+import PageTitle from "@/components/PageTitle";
+import {LayoutProvider, useLayoutContext} from "@/layout/LayoutContext";
+import {Outlet} from "react-router";
+import useMobile from "@/hooks/useMobile.ts";
+import ColumnsMenu from "@/layout/ColumnsMenu.tsx";
+import React, {useEffect, useState} from "react";
+
+const {Content, Sider} = Layout;
+
+const LayoutContent: React.FC = () => {
+  const isMobile = useMobile();
+  const themeConfig = useGlobalStore(state => state.themeConfig);
+  const layout = useGlobalStore(state => state.layout);
+  const [siderWidth, setSiderWidth] = useState<number>(226);
+  const {menus, collapsed, parentKey} = useLayoutContext();
+
+  useEffect(() => {
+    const menuWidth = themeConfig.siderWeight ? themeConfig.siderWeight : 226;
+    const columnWidth = layout === 'columns' ? 79 : 0;
+    const rule = menus.find(item => item.key === parentKey);
+    if(['mix', 'columns'].includes(layout)) {
+      if(rule?.children && rule?.children.length) {
+        setSiderWidth(columnWidth + menuWidth)
+      } else {
+        setSiderWidth(columnWidth);
+      }
+    } else {
+      setSiderWidth(menuWidth);
+    }
+  }, [themeConfig, layout, menus, parentKey]);
+
+  return (
+    <Layout className="min-h-screen" style={{ background: themeConfig.background }}>
+      {/* 页面标题 */}
+      <PageTitle />
+      {/* 主题设置抽屉 */}
+      <SettingDrawer />
+      {/* 顶栏 */}
+      <HeaderRender />
+      {/* 移动端抽屉菜单 */}
+      { isMobile && <MobileDrawerMenu /> }
+      {/* 内容区域 */}
+      <Layout hasSider className={"relative"}>
+        { layout !== "top" && !isMobile && (
+          <Sider
+            collapsed={collapsed}
+            width={siderWidth}
+            style={{
+              borderRight: "1px solid " + themeConfig.colorBorder,
+              height: `calc(100vh - ${themeConfig.headerHeight}px)`,
+              top: themeConfig.headerHeight,
+              overflowY: "auto",
+              overflowX: "hidden",
+              position: 'sticky'
+            }}
+          >
+            { layout === "columns" ? <ColumnsMenu/> : <MenuRender />}
+          </Sider>
+        )}
+        <Layout>
+          <Content style={{padding: themeConfig.bodyPadding}}>
+            <Outlet/>
+          </Content>
+          <FooterRender/>
+        </Layout>
+      </Layout>
+    </Layout>
+  );
+};
+
+const LayoutRender = () => (
+  <LayoutProvider>
+    <LayoutContent />
+  </LayoutProvider>
+);
+
+export default LayoutRender;