#

luxiaotao1123

2024-01-25 7bc198b4d932183c592128a7f699d15cd8cecb41

#

 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",

 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",

 zy-asrs-flow/src/assets/logo.png

 zy-asrs-flow/src/pages/Admin.jsx

New file
@@ -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;

 zy-asrs-flow/src/pages/Admin0.jsx

New file
@@ -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;

 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: '*',