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

package/src/components/Business/BsLayouts/Components/RightContent/index.tsx

@@ -0,0 +1,156 @@
+
+// @ts-nocheck
+import { Dropdown, message, Modal } from 'antd';
+import React, { useState } from 'react';
+import { history, useModel } from 'umi';
+import './home.less';
+import Morentouxiang from '../../../../../assets/morentouxiang-32.svg';
+import Morentouxiang32 from '../../../../../assets/32.svg';
+import Out from '../../../../../assets/xinglan-icon-out.png';
+import { outLogin } from '../../service';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { handleUserName, handleUserPhone, setLoginOutPath } from '../../utils';
+import LoginModal from './LoginModal';
+import ENUM from '@/utils/enumConfig';
+
+export type SiderTheme = 'light' | 'dark';
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+};
+
+const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
+  const { initialState } = useModel('@@initialState');
+
+  if (!initialState || !initialState.settings) {
+    return null;
+  }
+
+  const [loginModalParams, setLoginModalParams]: any = useState({
+    visible: false,
+    width: '680px',
+    title: '修改密码',
+    onCancel: () => {
+      setLoginModalParams({ ...loginModalParams, visible: false });
+    },
+  });
+  const { navTheme, layout } = initialState.settings;
+  let className = 'rcom_right';
+
+  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
+    className = `${'rcom_right'}  ${'rcom_dark'}`;
+  }
+
+  const divStyle = (): React.CSSProperties => ({
+    gap: '20px',
+  });
+
+  const loginOutConfirm = () => {
+    Modal.confirm({
+      title: '退出确认',
+      icon: <ExclamationCircleOutlined />,
+      content: '确定要退出系统吗？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        loginOut();
+      },
+    });
+  };
+
+  const loginOut = async () => {
+    const resposne = await JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.USER_INFO) || '{}');
+    const sessionId = resposne?.sessionId || '';
+    await outLogin({ sessionId: sessionId });
+    // @ts-ignore
+    if (BUILD_TYPE) {
+      message.success('退出登录成功');
+      history.replace({
+        pathname: '/user/login',
+      });
+    } else {
+      setLoginOutPath()
+    }
+  };
+
+  const menus = (
+    <div className={'userDownWarp'}>
+      <div className={'userDownTop'}>
+        <div className={'userDownTopT'}>
+          <img style={{ width: 68, height: 68 }} src={Morentouxiang32} />
+        </div>
+        <div className={'userDownTopC'}>{handleUserName()}</div>
+        <div className={'userDownTopB'}>{handleUserPhone()}</div>
+      </div>
+      <div className={'userDownB'}>
+        {/* <div
+          className={'userDownBList'}
+          onClick={(e: any) => {
+            setLoginModalParams({
+              ...loginModalParams,
+              visible: true,
+              loginOut,
+            });
+            e.preventDefault();
+          }}
+        >
+          <div className={'rcom_label'}>
+            <img src={Sett}></img>
+          </div>
+          <div className={'rcom_name'}>修改密码</div>
+        </div> */}
+        <div
+          className={'userDownOut'}
+          onClick={(e: any) => {
+            loginOutConfirm();
+            e.preventDefault();
+          }}
+        >
+          <div className={'rcom_label'}>
+            <img src={Out}></img>
+          </div>
+          <div className={'rcom_name'}>退出登录</div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={className} style={divStyle()}>
+      <div className={'rcom_imgWap'}>
+        {/* <Tooltip placement="bottom" title={'全局控制台'}>
+          <img
+            className={'rcom_img'}
+            onClick={() => {
+              window.location.href = '/';
+            }}
+            src={Kongzhi}
+          ></img>
+        </Tooltip>
+        <div className={'rcom_headLine'}></div> */}
+        {/* <img className={'rcom_img'} src={Bangzhu}></img> */}
+        {/* <img className={'rcom_img'} src={Xiaoxi}></img> */}
+        {/* <div className={'rcom_headLine'}></div> */}
+        <Dropdown overlay={menus} trigger={['click']}>
+          <div className={'rcom_userWarp'}>
+            <div className={'rcom_l'}>
+              <img src={Morentouxiang} />
+            </div>
+            <div className={'rcom_c'}>
+              <div className={'rcom_ct'}>{handleUserName()}</div>
+              <div className={'rcom_cb'}>{handleUserPhone()}</div>
+            </div>
+            <div className={'rcom_r'}>
+              <img style={{marginRight: '0px'}} src='./xialajiantou-new.svg' />
+            </div>
+          </div>
+        </Dropdown>
+      </div>
+
+      {/* 修改秘密 */}
+      {loginModalParams.visible && (
+        <LoginModal {...loginModalParams}></LoginModal>
+      )}
+    </div>
+  );
+};
+export default GlobalHeaderRight;

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

@@ -0,0 +1,161 @@
+// @import '~antd/es/style/themes/default.less';
+// @import '~antd/dist/antd.less';
+
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+
+.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: @pro-header-hover-bg;
+    }
+    .opened {
+      background: @pro-header-hover-bg;
+    }
+  }
+  .search {
+    padding: 0 12px;
+    &:hover {
+      background: transparent;
+    }
+  }
+  .account {
+    .avatar {
+      margin-right: 8px;
+      color: #005cff;
+      vertical-align: top;
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+}
+
+.dark {
+  .action {
+    &:hover {
+      background: #252a3d;
+    }
+    .opened {
+      background: #252a3d;
+    }
+  }
+}
+
+.allFunsList {
+  margin-bottom: 10px;
+}
+
+.isClons {
+  position: relative;
+  left: -8px;
+  width: 30px;
+  height: 36px;
+}
+
+.notClons {
+}
+
+.drawerWarp {
+  column-count: 3;
+}
+
+.allFunsListWarp {
+  width: 200px;
+  margin-right: 10px;
+  border-radius: 4px;
+
+  break-inside: avoid;
+}
+
+.drawerWarp_p {
+  color: #8c8c8c;
+  font-weight: 400;
+  font-size: 14px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  line-height: 20px;
+  text-align: left;
+}
+
+.searchTop {
+  display: flex;
+  align-items: center;
+}
+.searchTopInp {
+  width: 528px;
+  height: 40px;
+  background: #f8f9fa;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+
+  .ant-input {
+    background: #f8f9fa;
+  }
+}
+.searchTopBtn {
+  position: relative;
+  left: -1px;
+  width: 92px;
+  height: 40px;
+  background: #005cff;
+  border-radius: 0px 4px 4px 0px;
+}
+
+
+.contentWarp {
+  margin-top: 54px;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  color: #8c8c8c;
+}
+
+.themeColor {
+  color: #005CFF;
+}
+
+.serachView{
+  margin-top: 36px;
+  margin-bottom: 32px;
+}
+
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  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;
+  }
+}

package/src/components/Business/BsLayouts/Components/SearchFunc/index.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import { Button, Drawer, Input, } from 'antd';
+import React, { useRef, useState } from 'react';
+import './index.less';
+export type SiderTheme = 'light' | 'dark';
+export type GlobalHeaderRightProps = {
+  menu?: boolean;
+};
+import { history } from 'umi';
+import {
+  searchMenuData,
+} from '../../utils';
+
+const AllFunc: React.FC<GlobalHeaderRightProps> = (props: any) => {
+
+  const [keyWard, setKeyWord]: any = useState('');
+  const [routesData, setroutesData]: any = useState([]);
+  const menuData = JSON.parse(localStorage.getItem(`customerMenu_${props.itemPath}_front`) || '[]');
+
+  const onClose = () => {
+    props.onClose();
+  };
+
+  const inputRef: any = useRef("")
+
+  return (
+    <>
+      <Drawer
+        {...props}
+        destroyOnClose
+        zIndex={19}
+        style={{ left: props.visible ? 140 : 0, color: '#000' }}
+        title={<span style={{ fontWeight: 'bold', fontSize: 18 }}>{props.title}</span>}
+        placement="left"
+        onClose={onClose}
+      >
+        <div>
+          <div className={'searchTop'}>
+            <Input placeholder='请搜索'
+              onKeyDown={(e: any) => {
+                if (e.keyCode === 13) {
+                  searchMenuData(menuData, inputRef.current.input.value, setroutesData)
+                  setKeyWord(inputRef.current.input.value)
+                }
+              }}
+              allowClear
+              ref={inputRef}
+              className={'searchTopInp'}></Input>
+            <Button style={{height: '40px'}} onClick={() => {
+              searchMenuData(menuData, inputRef.current.input.value, setroutesData);
+              setKeyWord(inputRef.current.input.value)
+
+            }} type="primary" className={'searchTopBtn'}>
+              搜索
+            </Button>
+          </div>
+          <div className={'contentWarp'}>
+            <div> 搜索“ {keyWard}”，共收到  <span className={'themeColor'}>{routesData.length || 0}</span> 条结果 </div>
+            <div className={'serachView'}>您是否要搜索...</div>
+          </div>
+          <div className={'content'}>
+            {
+              routesData.map((item: any) => (
+                <div onClick={() => {
+                  history.push(item.path)
+                  onClose()
+                }} key={item.path}>{item.name}</div>
+              ))
+            }
+          </div>
+        </div>
+      </Drawer>
+    </>
+  );
+};
+export default AllFunc;

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

@@ -0,0 +1,80 @@
+.customer_menu_content {
+  color: #b1bad4;
+  background: #141620;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  height: 40px;
+  border-bottom: 1px solid #3d4047;
+  .ant-btn-link {
+    color:  #b1bad4 !important;
+    font-size: 16px;
+    height: 36px;
+  }
+}
+
+.menu_item {
+  line-height: 30px;
+  height: 30px;
+  color: rgba(44, 47, 46);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link_style:hover {
+  background-color: #e4e7ed;
+  cursor: pointer;
+  color: #1890ff;
+}
+
+.sub_menu_content {
+  box-shadow: 2px 0px 4px 0px rgba(185,185,185, 0.5);
+  position: fixed;
+  top: 50px;
+  left: 140px;
+  width: 200px;
+  height: 100%;
+  background-color: #fff;
+  padding-top: 10px;
+  z-index: 9999;
+}
+
+.tab_left_operate {
+  display: flex;
+  height: 28px;
+  align-items: center;
+  &>div {
+    width: 28px;
+    font-size: 12px;
+    color: #2C2F2ECC;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #E4E4E4;
+    background-color: #fff;
+    cursor: pointer;
+  }
+  &>div:last-child {
+    box-shadow: 2px -2px 4px 0px rgba(185,185,185, 0.9);
+    z-index: 99;
+  }
+}
+
+.tab_right_operate {
+  height: 28px;
+  width: 28px;
+  font-size: 12px;
+  color: #2C2F2ECC;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 1px solid #E4E4E4;
+  background-color: #fff;
+  box-shadow: -2px -2px 4px 0px rgba(185,185,185, 0.9);
+  z-index: 99;
+  cursor: pointer;
+  position: relative;
+}