From 7bc198b4d932183c592128a7f699d15cd8cecb41 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 25 一月 2024 12:39:59 +0800
Subject: [PATCH] #

---
 zy-asrs-flow/src/assets/logo.png  |    0 
 zy-asrs-flow/src/pages/Admin0.jsx |   69 +++++++++++++++++++++++
 zy-asrs-flow/package.json         |    1 
 zy-asrs-flow/src/router/index.jsx |    3 
 zy-asrs-flow/package-lock.json    |    1 
 zy-asrs-flow/src/pages/Admin.jsx  |   82 +++++++++++++++++++++++++++
 6 files changed, 155 insertions(+), 1 deletions(-)

diff --git a/zy-asrs-flow/package-lock.json b/zy-asrs-flow/package-lock.json
index ee2ee83..c4aa81e 100644
--- a/zy-asrs-flow/package-lock.json
+++ b/zy-asrs-flow/package-lock.json
@@ -8,6 +8,7 @@
       "name": "zy-asrs-flow",
       "version": "0.0.0",
       "dependencies": {
+        "@ant-design/icons": "^5.2.6",
         "@antv/g6": "^4.8.24",
         "antd": "^5.13.2",
         "axios": "^1.6.5",
diff --git a/zy-asrs-flow/package.json b/zy-asrs-flow/package.json
index 6728fb9..7619fe4 100644
--- a/zy-asrs-flow/package.json
+++ b/zy-asrs-flow/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.2.6",
     "@antv/g6": "^4.8.24",
     "antd": "^5.13.2",
     "axios": "^1.6.5",
diff --git a/zy-asrs-flow/src/assets/logo.png b/zy-asrs-flow/src/assets/logo.png
new file mode 100644
index 0000000..e2fc662
--- /dev/null
+++ b/zy-asrs-flow/src/assets/logo.png
Binary files differ
diff --git a/zy-asrs-flow/src/pages/Admin.jsx b/zy-asrs-flow/src/pages/Admin.jsx
new file mode 100644
index 0000000..8caba22
--- /dev/null
+++ b/zy-asrs-flow/src/pages/Admin.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import {
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    UploadOutlined,
+    UserOutlined,
+    VideoCameraOutlined,
+} from '@ant-design/icons';
+import { Layout, Menu, Button, theme } from 'antd';
+import logo from '@/assets/logo.png';
+
+const { Header, Sider, Content } = Layout;
+
+const App = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
+
+    return (
+        <Layout style={{ height: '100vh' }}>
+            <Sider trigger={null} collapsible collapsed={collapsed}>
+                <div className="demo-logo-vertical" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                    <img src={logo} alt="Logo" style={{ maxWidth: '80%', height: 'auto' }} />
+                </div>
+                <Menu
+                    theme="dark"
+                    mode="inline"
+                    defaultSelectedKeys={['1']}
+                    items={[
+                        {
+                            key: '1',
+                            icon: <UserOutlined />,
+                            label: 'nav 1',
+                        },
+                        {
+                            key: '2',
+                            icon: <VideoCameraOutlined />,
+                            label: 'nav 2',
+                        },
+                        {
+                            key: '3',
+                            icon: <UploadOutlined />,
+                            label: 'nav 3',
+                        },
+                    ]}
+                />
+            </Sider>
+            <Layout>
+                <Header
+                    style={{
+                        padding: 0,
+                        background: colorBgContainer,
+                    }}
+                >
+                    <Button
+                        type="text"
+                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+                        onClick={() => setCollapsed(!collapsed)}
+                        style={{
+                            fontSize: '16px',
+                            width: 64,
+                            height: 64,
+                        }}
+                    />
+                </Header>
+                <Content
+                    style={{
+                        margin: '24px 16px',
+                        padding: 24,
+                        minHeight: 280,
+                        background: colorBgContainer,
+                        borderRadius: borderRadiusLG,
+                    }}
+                >
+                    Content
+                </Content>
+            </Layout>
+        </Layout>
+    );
+};
+export default App;
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/Admin0.jsx b/zy-asrs-flow/src/pages/Admin0.jsx
new file mode 100644
index 0000000..69076a6
--- /dev/null
+++ b/zy-asrs-flow/src/pages/Admin0.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Layout, Menu, theme } from 'antd';
+const { Header, Content, Footer, Sider } = Layout;
+import {
+    UploadOutlined,
+    UserOutlined,
+    VideoCameraOutlined,
+} from '@ant-design/icons';
+import logo from '@/assets/logo.png';
+
+const App = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const {
+        token: { colorBgContainer, borderRadiusLG },
+    } = theme.useToken();
+
+    return (
+        <Layout style={{ height: '100vh' }}>
+            <Header
+                style={{
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 1,
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    backgroundColor: 'rgba(255, 255, 255, 0.8)', // the level of opaque can be adjusted based on your preference.
+                    backdropFilter: 'blur(10px)' 
+                }}
+            >
+                <div className="demo-logo" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100px' }}>
+                    <img src={logo} alt="Logo" style={{ maxWidth: '80%', height: 'auto' }} />
+                </div>
+            </Header>
+            <Layout>
+                <Sider trigger={null} collapsible collapsed={collapsed} theme='light' style={{ height: '100vh - 64px', overflow: 'auto' }}>
+                    <Menu
+                        theme="light"
+                        mode="inline"
+                        defaultSelectedKeys={['1']}
+                        items={[
+                            {
+                                key: '1',
+                                icon: <UserOutlined />,
+                                label: 'nav 1',
+                            },
+                            {
+                                key: '2',
+                                icon: <VideoCameraOutlined />,
+                                label: 'nav 2',
+                            },
+                            {
+                                key: '3',
+                                icon: <UploadOutlined />,
+                                label: 'nav 3',
+                            },
+                        ]}
+                    />
+                </Sider>
+                <Content style={{ height: '100%', overflow: 'auto' }}>
+                    <div style={{ backgroundColor: 'red', minHeight: '200%', borderRadius: borderRadiusLG }}>
+                        Content
+                    </div>
+                </Content>
+            </Layout>
+        </Layout>
+    );
+};
+export default App;
\ No newline at end of file
diff --git a/zy-asrs-flow/src/router/index.jsx b/zy-asrs-flow/src/router/index.jsx
index 516c18d..2cb542b 100644
--- a/zy-asrs-flow/src/router/index.jsx
+++ b/zy-asrs-flow/src/router/index.jsx
@@ -2,6 +2,7 @@
 
 import App from '@/App'
 import NotFound from '@/pages/NotFound'
+import Admin from '@/pages/Admin0'
 
 // createBrowserRouter -> history
 // createHashRouter -> hash (#)
@@ -9,7 +10,7 @@
 const router = createBrowserRouter([
     {
         path: '/',
-        element: <App />,
+        element: <Admin />,
     },
     {
         path: '*',

--
Gitblit v1.9.1