From 50c8315f324e502b8b1c95dc546ce0b87820efc4 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 29 一月 2024 10:54:26 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/Admin.jsx | 311 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 239 insertions(+), 72 deletions(-)
diff --git a/zy-asrs-flow/src/pages/Admin.jsx b/zy-asrs-flow/src/pages/Admin.jsx
index 8caba22..98fee8d 100644
--- a/zy-asrs-flow/src/pages/Admin.jsx
+++ b/zy-asrs-flow/src/pages/Admin.jsx
@@ -1,82 +1,249 @@
-import React, { useState } from 'react';
import {
- MenuFoldOutlined,
- MenuUnfoldOutlined,
- UploadOutlined,
- UserOutlined,
- VideoCameraOutlined,
+ LogoutOutlined,
+ SearchOutlined,
} from '@ant-design/icons';
-import { Layout, Menu, Button, theme } from 'antd';
+import {
+ PageContainer,
+ ProCard,
+ ProConfigProvider,
+ ProLayout,
+ SettingDrawer,
+} from '@ant-design/pro-components';
+import {
+ Button,
+ ConfigProvider,
+ Dropdown,
+ Input,
+ theme,
+} from 'antd';
+import React, { useState } from 'react';
+import defaultProps from './_defaultProps';
import logo from '@/assets/logo.png';
+import G6 from './G6';
-const { Header, Sider, Content } = Layout;
-
-const App = () => {
- const [collapsed, setCollapsed] = useState(false);
- const {
- token: { colorBgContainer, borderRadiusLG },
- } = theme.useToken();
-
+const SearchInput = () => {
+ const { token } = 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)}
+ <div
+ key="SearchOutlined"
+ aria-hidden
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ marginInlineEnd: 24,
+ }}
+ onMouseDown={(e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ >
+ <Input
+ style={{
+ borderRadius: 4,
+ marginInlineEnd: 12,
+ backgroundColor: token.colorBgTextHover,
+ }}
+ prefix={
+ <SearchOutlined
style={{
- fontSize: '16px',
- width: 64,
- height: 64,
+ color: token.colorTextLightSolid,
}}
/>
- </Header>
- <Content
- style={{
- margin: '24px 16px',
- padding: 24,
- minHeight: 280,
- background: colorBgContainer,
- borderRadius: borderRadiusLG,
- }}
- >
- Content
- </Content>
- </Layout>
- </Layout>
+ }
+ placeholder="鎼滅储鏂规"
+ bordered={false}
+ />
+ </div>
);
};
-export default App;
\ No newline at end of file
+
+export default () => {
+ const [settings, setSetting] = useState({
+ fixSiderbar: true,
+ layout: 'mix',
+ splitMenus: true,
+ });
+
+ const [pathname, setPathname] = useState('/list/sub-page/sub-sub-page1');
+ if (typeof document === 'undefined') {
+ return <div />;
+ }
+ return (
+ <div
+ id="pro-layout" style={{ height: '100vh', overflow: 'auto' }}
+ >
+ <ProConfigProvider hashed={false}>
+ <ConfigProvider
+ getTargetContainer={() => {
+ return document.getElementById('pro-layout') || document.body;
+ }}
+ >
+ <ProLayout
+ prefixCls="my-prefix"
+ bgLayoutImgList={[
+ {
+ src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
+ left: 85,
+ bottom: 100,
+ height: '303px',
+ },
+ {
+ src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
+ bottom: -68,
+ right: -45,
+ height: '303px',
+ },
+ {
+ src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
+ bottom: 0,
+ left: 0,
+ width: '331px',
+ },
+ ]}
+ {...defaultProps}
+ location={{
+ pathname,
+ }}
+ token={{
+ header: {
+ colorBgMenuItemSelected: 'rgba(0,0,0,0.04)',
+ },
+ }}
+ siderMenuType="group"
+ menu={{
+ collapsedShowGroupTitle: true,
+ }}
+ // 涓汉鐢ㄦ埛
+ avatarProps={{
+ src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
+ size: 'small',
+ title: '闄嗘檽娑�',
+ render: (props, dom) => {
+ return (
+ <Dropdown
+ menu={{
+ items: [
+ {
+ key: 'logout',
+ icon: <LogoutOutlined />,
+ label: '閫�鍑虹櫥褰�',
+ },
+ ],
+ }}
+ >
+ {dom}
+ </Dropdown>
+ );
+ },
+ }}
+ // 鑷畾涔夋搷浣滃垪琛�
+ actionsRender={(props) => {
+ if (props.isMobile) return [];
+ if (typeof window === 'undefined') return [];
+ return [
+ props.layout !== 'side' && document.body.clientWidth > 1400 ? (
+ <SearchInput />
+ ) : undefined,
+ ];
+ }}
+ // logo淇℃伅
+ headerTitleRender={(logo, title, _) => {
+ return (
+ <>
+ <a>
+ {logo}
+ WCS
+ </a>
+ </>
+ );
+ }}
+ // 鍦� layout 搴曢儴娓叉煋涓�涓潡
+ menuFooterRender={(props) => {
+ if (props?.collapsed) return undefined;
+ return (
+ <div
+ style={{
+ textAlign: 'center',
+ paddingBlockStart: 12,
+ }}
+ >
+ <div>漏 2021 Made with love</div>
+ <div>by Ant Design</div>
+ </div>
+ );
+ }}
+ // menu 鑿滃崟鐨勫ご閮ㄧ偣鍑讳簨浠�
+ onMenuHeaderClick={(e) => console.log(e)}
+ // Header 鑷畾涔夎彍鍗曢」鐨� render 鏂规硶
+ menuItemRender={(item, dom) => (
+ <div
+ onClick={() => {
+ setPathname(item.path || '/welcome');
+ }}
+ >
+ {dom}
+ </div>
+ )}
+ {...settings}
+ >
+
+ {/* <G6></G6> */}
+ <PageContainer>
+ <G6></G6>
+ </PageContainer>
+ {/* <PageContainer
+ token={{
+ paddingInlinePageContainerContent: num,
+ }}
+ extra={[
+ <Button key="3">鎿嶄綔</Button>,
+ <Button key="2">鎿嶄綔</Button>,
+ <Button
+ key="1"
+ type="primary"
+ onClick={() => {
+ setNum(num > 0 ? 0 : 40);
+ }}
+ >
+ 涓绘搷浣�
+ </Button>,
+ ]}
+ subTitle="绠�鍗曠殑鎻忚堪"
+ footer={[
+ <Button key="3">閲嶇疆</Button>,
+ <Button key="2" type="primary">
+ 鎻愪氦
+ </Button>,
+ ]}
+ >
+
+ <ProCard
+ style={{
+ height: '200vh',
+ minHeight: 800,
+ }}
+ >
+ <div />
+ </ProCard>
+
+ </PageContainer> */}
+
+ <SettingDrawer
+ pathname={pathname}
+ enableDarkTheme
+ getContainer={(e) => {
+ if (typeof window === 'undefined') return e;
+ return document.getElementById('pro-layout');
+ }}
+ settings={settings}
+ onSettingChange={(changeSetting) => {
+ setSetting(changeSetting);
+ }}
+ disableUrlParams={false}
+ />
+ </ProLayout>
+ </ConfigProvider>
+ </ProConfigProvider>
+ </div>
+ );
+};
\ No newline at end of file
--
Gitblit v1.9.1