feat(web): 初始化前端项目

2026-09-03 13:11:38 +08:00
parent 195b6d25e9
commit df40ddde8c
31 changed files with 948 additions and 848 deletions
@@ -1,103 +1,121 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
-import { Drawer, Layout } from 'antd';
+import { Breadcrumb, Drawer, Layout } from 'antd';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import SidebarMenu from './SidebarMenu';
-import { getPageInfo } from './menuConfig';
+import { getBreadcrumbItems } from './menuConfig';
 import './MainLayout.css';

 const { Header, Sider, Content } = Layout;

 const MainLayout = () => {
-  const [collapsed, setCollapsed] = useState(false);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const location = useLocation();
+    const [collapsed, setCollapsed] = useState(false);
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const location = useLocation();

-  const pageInfo = useMemo(() => getPageInfo(location.pathname), [location.pathname]);
+    const breadcrumbItems = useMemo(
+        () =>
+            getBreadcrumbItems(location.pathname).map((crumb) => ({
+                title: (
+                    <span className="breadcrumb-crumb">
+                        {crumb.icon}
+                        <span>{crumb.label}</span>
+                    </span>
+                ),
+            })),
+        [location.pathname]
+    );

-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768);
-      if (window.innerWidth >= 768) setMobileMenuOpen(false);
-    };
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
-  }, []);
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+            if (window.innerWidth >= 768) setMobileMenuOpen(false);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);

-  return (
-    <Layout className="main-layout">
-      {!isMobile && (
-        <Sider
-          className="main-sider"
-          width={200}
-          collapsedWidth={60}
-          collapsed={collapsed}
-          theme="dark"
-          style={{
-            overflow: 'auto',
-            height: '100vh',
-            position: 'fixed',
-            left: 0,
-            top: 0,
-            bottom: 0,
-          }}
-        >
-          <div className="sidebar-header">
-            <div className="logo">{collapsed ? 'A' : 'Atlas Kit'}</div>
-            {!collapsed && <div className="logo-subtitle">商品工作台</div>}
-          </div>
-          <SidebarMenu collapsed={collapsed} />
-        </Sider>
-      )}
-
-      {isMobile && (
-        <Drawer
-          title="Atlas Kit"
-          placement="left"
-          onClose={() => setMobileMenuOpen(false)}
-          open={mobileMenuOpen}
-          styles={{ body: { padding: 0, background: 'var(--sider-bg)' } }}
-          width={200}
-        >
-          <SidebarMenu collapsed={false} onMenuClick={() => setMobileMenuOpen(false)} />
-        </Drawer>
-      )}
-
-      <Layout
-        className="main-content-layout"
-        style={{
-          marginLeft: isMobile ? 0 : collapsed ? 60 : 200,
-          transition: 'margin-left 0.2s',
-        }}
-      >
-        <Header className="main-header">
-          <div className="header-left">
-            {isMobile && (
-              <MenuFoldOutlined
-                className="mobile-menu-trigger"
-                onClick={() => setMobileMenuOpen(true)}
-              />
-            )}
+    return (
+        <Layout className="main-layout">
            {!isMobile && (
-              <div className="collapse-trigger" onClick={() => setCollapsed(!collapsed)}>
-                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-              </div>
+                <Sider
+                    className="main-sider"
+                    width={200}
+                    collapsedWidth={60}
+                    collapsed={collapsed}
+                    theme="dark"
+                    style={{
+                        overflow: 'auto',
+                        height: '100vh',
+                        position: 'fixed',
+                        left: 0,
+                        top: 0,
+                        bottom: 0,
+                    }}
+                >
+                    <div className="sidebar-header">
+                        <div className="logo">
+                            <span className="logo-full">Atlas Kit</span>
+                            <span className="logo-short">A</span>
+                        </div>
+                        <div className="logo-subtitle">商品工作台</div>
+                    </div>
+                    <SidebarMenu collapsed={collapsed} />
+                </Sider>
            )}
-            <div className="page-title-group">
-              <div className="page-title">{pageInfo.title}</div>
-              <div className="page-subtitle">{pageInfo.subtitle}</div>
-            </div>
-          </div>
-        </Header>

-        <Content className="main-content">
-          <Outlet />
-        </Content>
-      </Layout>
-    </Layout>
-  );
+            {isMobile && (
+                <Drawer
+                    title="Atlas Kit"
+                    placement="left"
+                    onClose={() => setMobileMenuOpen(false)}
+                    open={mobileMenuOpen}
+                    styles={{ body: { padding: 0, background: 'var(--sider-bg)' } }}
+                    width={200}
+                >
+                    <SidebarMenu collapsed={false} onMenuClick={() => setMobileMenuOpen(false)} />
+                </Drawer>
+            )}
+
+            <Layout
+                className="main-content-layout"
+                style={{
+                    marginLeft: isMobile ? 0 : collapsed ? 60 : 200,
+                    transition: 'margin-left 0.2s',
+                }}
+            >
+                <Header className="main-header">
+                    <div className="header-left">
+                        {isMobile && (
+                            <MenuFoldOutlined
+                                className="mobile-menu-trigger"
+                                onClick={() => setMobileMenuOpen(true)}
+                            />
+                        )}
+                        {!isMobile && (
+                            <div
+                                className="collapse-trigger"
+                                onClick={() => setCollapsed(!collapsed)}
+                            >
+                                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+                            </div>
+                        )}
+                        <Breadcrumb
+                            className="page-breadcrumb"
+                            separator=">"
+                            items={breadcrumbItems}
+                        />
+                    </div>
+                </Header>
+
+                <Content className="main-content">
+                    <Outlet />
+                </Content>
+            </Layout>
+        </Layout>
+    );
 };

 export default MainLayout;