@bit-sun/business-component 1.2.3 → 1.2.4-alpha.1

package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/DrawContent.tsx

@@ -0,0 +1,286 @@
+// @ts-nocheck
+import React, { useEffect, useState, useLayoutEffect, useImperativeHandle } from 'react';
+import { List, Tooltip, Input, Button } from 'antd';
+import { Link, formatMessage, history } from 'umi';
+import classNames from 'classnames';
+import { debounce } from 'lodash';
+import {
+  setMenuTreeData,
+  searchMenuData,
+} from '../../../utils';
+import { memoizeOneFormatter } from '@/utils/utils';
+import { SearchOutlined, CaretDownOutlined  } from '@ant-design/icons';
+import './drawContent.less';
+import right from '../../../../../../assets/right.png';
+import closeicon from '../../../../../../assets/closeicon.png';
+
+
+const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
+  const [homepageData, sethomepageData]: any[] = useState([]);
+  const [routesData, setroutesData]: any[] = useState([]);
+  const [authorityMenu, setAuthorityMenu]: any[] = useState([]);
+
+  const [currentOneLevel, setCurrentOneLevel] = useState<string>('');
+  const [SearhData, setSearchMenuData] = useState<any[]>([]);
+  const [rightMenuHeight, setHeight] = useState<number>(600);
+  const [drawHeight, setDrawHeight] = useState<number>(900);
+
+  const [moreBtnShow, setMoreBtnShow] = useState(false);
+  const [showScroll, setShowScroll] = useState(false);
+
+  useEffect(() => {
+    getMenuContentHeight();
+    const homepageDataList: any[] = []; //不含子集的菜单
+    const routesDataList: any[] = []; //含子集的菜单
+    const authorityMenuList: any[] = []; //当前权限可以看到的所有菜单
+
+    const showMenu = originRoutes.find(item => item.path === '/')?.routes || [];
+    let routesData = JSON.parse(JSON.stringify(memoizeOneFormatter(showMenu, '')));
+    setMenuTreeData(routesData);
+
+    routesData.forEach(item => {
+      if (item.children) {
+        routesDataList.push(item);
+        authorityMenuList.push(item)
+      } else {
+        homepageDataList.push(item);
+        authorityMenuList.push(item)
+      }
+    })
+    sethomepageData(homepageDataList)
+    setroutesData(routesDataList)
+    setAuthorityMenu(authorityMenuList)
+
+    window.onresize = () => {
+      getMenuContentHeight();
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      let drawContentHeight=document.getElementById("drawContent").scrollHeight;
+      if (drawContentHeight > rightMenuHeight) {
+        setMoreBtnShow(true);
+      }
+    }, 0)
+  }, [])
+
+  const getMenuContentHeight = () => {
+    let clientHeight = document.body.clientHeight;
+    setHeight(clientHeight - 190);
+    setDrawHeight(clientHeight - 70)
+  }
+
+
+  const renderChildItem = (child) => {
+    if (!child.hideInMenu && child.children) {
+      return (
+        <>
+          <List.Item style={{ color: '#000', fontWeight: 'bold' }}>
+            {formatMessage({ id: `${child.locale}` })}
+          </List.Item>
+          {child.children.map((menuItem: any) => {
+            return renderChildItem(menuItem)
+          })}
+        </>
+      );
+    } else if (!child.hideInMenu && child.path) {
+      return (
+        <List.Item style={{fontSize: '12px'}} className="allFuncOnMouserover">
+          <Link to={child.path} onClick={(e) => {onMenuClick(e, child);}}>
+            <Tooltip
+              title={formatMessage({ id: `${child.locale}` })}
+            >
+              {formatMessage({ id: `${child.locale}` }).length > 10
+                ? `${formatMessage({
+                  id: `${child.name}`,
+                }).slice(0, 10)}...`
+                : formatMessage({ id: `${child.locale}` })}
+            </Tooltip>
+            <img className="allFuncOnMouseroverImg" src={right}></img>
+          </Link>
+        </List.Item>
+      );
+    }
+  }
+
+  const onMenuClick = (e, item) => {
+    e.stopPropagation();
+    e.preventDefault();
+    let searchHistory = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
+    if (searchHistory.every(hisItem => item.path !== hisItem.padth)) {
+      if (searchHistory.length < 10 ) {
+        searchHistory.push({
+          name: item.name,
+          path: item.path
+        })
+      } else {
+        searchHistory.pop();
+        searchHistory.unshift({
+          name: item.name,
+          path: item.path
+        })
+      }
+    }
+    localStorage.setItem(`${itemPath}_search_history`, JSON.stringify(searchHistory))
+    history.push({
+      pathname: item.path
+    })
+    onClose();
+  };
+
+
+  let searchHistoryList = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
+  return (
+    <div style={{height: `${drawHeight}px`}} className={'global_menu_draw_content'}>
+      <div className={'drawerWarp_left'}>
+        <div className={'left_item_title'} >一级菜单</div>
+        {
+          authorityMenu.map(item => (
+            <div
+              className={'left_item'}
+              style={{
+                borderLeft: currentOneLevel === item.path ? '2px solid #1890ff' : 'none',
+                color: currentOneLevel === item.path ? '#1890ff' : '#000000'
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault()
+                if (item.component) {
+                  history.push({
+                    pathname: item.path
+                  })
+                  onClose();
+                } else {
+                  setCurrentOneLevel(item.path);
+                  let currentDom = document.getElementById(item.path);
+                  currentDom && currentDom.scrollIntoView();
+                }
+              }}
+            >
+              {item.name}
+            </div>))
+        }
+      </div>
+      <div style={{flexGrow: 1, position: 'relative'}}>
+        <img
+          onClick={() => {onClose()}} 
+          style={{position: 'absolute', right: '15px', top: '17px', cursor: 'pointer'}} width={24} src={closeicon} />
+        
+        <div style={{ padding: '10px', marginBottom: '10px', width: '100%', }}>
+          <Input
+            style={{ height: '36px', borderRadius: '4px', width: '830px' }}
+            placeholder="请输入关键词"
+            allowClear
+            prefix={<SearchOutlined />}
+            onChange={debounce((e: any) => {
+              searchMenuData(authorityMenu, e.target.value, setSearchMenuData);
+            }, 600)}
+          />
+          <div style={{marginTop: '10px'}}>
+            <span style={{ color: '#8c8c8c', opacity: '0.6' }}>最近访问:&nbsp;&nbsp;&nbsp;</span>
+            {
+              searchHistoryList.map(item => {
+                return ( 
+                  <Link style={{color: '#000000', marginRight: '10px'}} to={item.path} onClick={(e) => {onMenuClick(e, item);}}>
+                  {item.name}
+                </Link>)
+              })
+            }
+          </div>
+        </div>
+        {
+          !!SearhData.length ?
+            (<div className={'search_menu_content'}>
+              {
+                SearhData.map((item: any) => (
+                  <div onClick={(e) => {
+                    onMenuClick(e, item);
+                  }} key={item.path}>{item.name}</div>
+                ))
+              }
+            </div>) : (
+              <div>
+                <div 
+                style={{
+                  height: `${rightMenuHeight}px`, 
+                  overflowY: 'scroll',
+                  position: 'relative',
+                  width: '100%'
+                }}
+                >
+                <div id='drawContent'  className={'drawerWarp_right'}>
+                  {homepageData && homepageData.filter((d) => !d.hideInMenu).length > 0 && (
+                    <List
+                      className={classNames('allFunsList', 'allFunsListWarp')}
+                      dataSource={homepageData}
+                      renderItem={(child: any) => {
+                        if (!child.hideInMenu && child.path) {
+                          return (
+                            <div className={classNames('allFunsListWarp')}>
+                              <List.Item
+                                className={classNames('allFuncOnMouserover')}
+                                style={{ padding: '12px 24px' }}
+                              >
+                                <Link to={child.path} onClick={(e) => {onMenuClick(e, child);}}>
+                                  {formatMessage({ id: `${child.name}` })}
+                                  <img className="allFuncOnMouseroverImg" src={right}></img>
+                                </Link>
+                              </List.Item>
+                            </div>
+                          );
+                        }
+                      }}
+                    />
+                  )}
+                  {routesData.map((item, index) => {
+                    return (
+                      <List
+                        // className={classNames('allFunsList', 'allFunsListWarp', )}
+                        className={`allFunsList allFunsListWarp ${currentOneLevel === item.path ? 'choosedStyle' : ''}`}
+                        id={item.path}
+                        style={{
+                          color: currentOneLevel === item.path ? '#fff' : '#005CFF',
+                        }}
+                        header={<b>{formatMessage({ id: `${item.name}` })}</b>}
+                        bordered
+                        dataSource={item.children}
+                        renderItem={(child: any) => {
+                          return renderChildItem(child)
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+                <div style={{
+                    display: moreBtnShow ? 'block' : 'none',
+                    // position: 'absolute', 
+                    textAlign: 'center', 
+                    bottom: 0, 
+                    background: '#ffffff', 
+                    width: '100%', 
+                    height: '30px'
+                    }}>
+                  <span
+                    onClick={() => {
+                      setShowScroll(true);
+                      setMoreBtnShow(false);
+                    }}
+                    style={{color: '#8c8c8c'}}
+                    >
+                    <CaretDownOutlined />
+                      下滑加载更多
+                  </span>
+                </div>
+              </div>
+              </div>
+            )
+
+        }
+      </div>
+    </div>
+  )
+
+}
+
+export default DrawContent;

package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/customMenuHeader.tsx

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import React, {useState} from "react";
+import { Button, Drawer } from "antd";
+import DrawContent from "./DrawContent";
+import caidan from '../../../../../../assets/caidan.svg';
+import guanbi from '../../../../../../assets/guanbi.svg';
+
+const CustomerMenuHeader = ({collapsed, handleClose, originRoutes, itemPath}: any) => {
+  const [isDrawer, setIsDrawer] = useState(false);
+  const onClose = () => {
+    setIsDrawer(false)
+  }
+  return (
+    <>
+      <div style={{width: '190px' }} className={'header_style'}>
+          <div
+            style={{
+              padding: '0',
+            }}
+          >
+            <div style={{display: 'flex',alignItems: 'center'}}>
+              <Button
+                // key={Math.random()}
+                style={{
+                  width: '50px', 
+                  height: '50px',
+                  borderRadius: '0px'
+                }}  
+                type="primary" 
+                icon={
+                  !isDrawer ?
+                 <img style={{marginLeft: '-2px', height: '48px'}} src={caidan} width={48} height={48} /> :
+                 <img style={{marginLeft: '-2px', height: '48px'}} src={guanbi} width={48} height={48} />
+                }
+                onClick={(e) => {
+                  handleClose();
+                  e.stopPropagation();
+                  setIsDrawer(!isDrawer)
+                }}
+              />
+              <div>
+                  {
+                    React.createElement('img', {
+                      src: './xinglan-logo.png',
+                      style: {
+                        width: '116px',
+                        height: '30px',
+                        marginLeft: '19px',
+                        
+                      },
+                    })
+                  }
+              </div>
+            </div>
+          </div>
+        </div>
+        <Drawer
+          style={{ top: 50, padding: '0' }}
+          // title={<span style={{ fontWeight: 'bold', fontSize: 18 }}></span>}
+          zIndex={9999}
+          destroyOnClose
+          headerStyle={{display: 'none'}}
+          width={1080}
+          className={'global_menu_draw'}
+          placement="left"
+          onClose={onClose}
+          visible={isDrawer}
+        >
+          <DrawContent itemPath={itemPath} originRoutes={originRoutes} onClose={onClose} />
+        </Drawer>
+    </>
+  )
+}
+
+export default CustomerMenuHeader;

package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/drawContent.less

@@ -0,0 +1,171 @@
+
+
+.menu {
+  .anticon {
+    margin-right: 8px;
+  }
+  .ant-dropdown-menu-item {
+    min-width: 160px;
+  }
+}
+
+.right {
+  display: flex;
+  float: right;
+  height: 48px;
+  margin-left: auto;
+  overflow: hidden;
+  .action {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    > span {
+      vertical-align: middle;
+    }
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+    .opened {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+  .search {
+    padding: 0 12px;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: #1890ff;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.dark {
+  .action {
+    &:hover {
+      background: #252a3d;
+    }
+    .opened {
+      background: #252a3d;
+    }
+  }
+}
+
+.global_menu_draw_content {
+  display: flex;
+  height: 100%;
+  .allFunsList {
+    margin-bottom: 10px;
+  }
+  .drawerWarp_left {
+    width: 150px;
+    height: 100%;
+    flex-shrink: 0;
+    border-right: 1px solid #f0f0f0;
+  
+    .left_item_title {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 12px;
+      color: #8c8c8c;
+      letter-spacing: 0;
+      line-height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin: 20px 0px;
+      padding-left: 10px;
+    }
+  
+    .left_item {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 14px;
+      color: #000000;
+      letter-spacing: 0;
+      line-height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+      margin: 20px 0px;
+      padding-left: 10px;
+    }
+  
+    .left_item:hover {
+      color: #1890ff !important;
+    }
+  }
+  .drawerWarp_right {
+    column-count: 4;
+    flex-grow: 1;
+    padding-left: 10px;
+    .ant-list-header {
+      padding: 0 0 0 10px !important;
+      line-height: 30px;
+      border: 0px !important;
+      b {
+        width: 100%;
+        box-sizing: border-box;
+        display: inline-block;
+        border-bottom: 1px solid #f0f0f0;
+      }
+    }
+    .ant-list-item {
+      padding: 0 0 0 10px !important;
+      line-height: 30px !important;
+    }
+  
+    .ant-drawer-close {
+      position: absolute;
+      right: 0;
+    }
+  }
+  .search_menu_content {
+    flex-grow: 1;
+    display: flex;
+    flex-wrap: wrap;
+    background-color: #ffffff;
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px 20px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #000000;
+      background: #f8f9fa;
+      border-radius: 100px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+    div:hover {
+      cursor: pointer;
+    }
+  }
+  .allFunsListWarp {
+    width: 200px;
+    margin-right: 10px;
+    border-radius: 4px;
+  
+    break-inside: avoid;
+  }
+  .choosedStyle {
+    .ant-list-header {
+      background-color: #005CFF;
+      opacity: 0.8;
+      b {
+        border-bottom: 1px solid #005CFF;
+      }
+    }
+  }
+
+}

package/src/components/Business/BsLayouts/Components/CustomerMenu/index.less

@@ -0,0 +1,65 @@
+.customer_menu_content {
+  color: #b1bad4;
+  background: #141620;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  height: 45px;
+  border-bottom: 1px solid #3d4047;
+  .ant-btn-link {
+    color:  #b1bad4 !important;
+    font-size: 16px;
+    height: 36px;
+  }
+  .ant-drawer-body {
+    padding: 10px !important;
+  }
+}
+
+.menu_drawer_header_warp {
+  .ant-drawer-body {
+    background-color: #F8F9FA;
+    padding: 10px 0 0 0 !important;
+  }
+}
+
+.menu_title_line {
+  font-size: 16px;
+  font-weight: bold;
+  color: #b1bad4;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.menu_item {
+  line-height: 30px;
+  color: rgba(44, 47, 46);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link_style:hover {
+  background-color: #E4E7ED;
+  cursor: pointer;
+}
+
+
+
+.header_style {
+  height: 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  background-color: #ffffff;
+}
+
+.global_menu_draw {
+  .ant-drawer-body {
+    padding: 10px !important;
+  }
+}