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

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

@@ -1,112 +0,0 @@
-.form-guide {
-  cursor: pointer;
-  position: fixed;
-  right: 5px;
-  color: #B1BAD4;
-  padding: 5px 0;
-  width: 48px;
-  z-index: 10;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: #141620;
-  .form-guide-top {
-    padding: 0px 10px;
-    display: flex;
-    justify-content: center;
-  }
-  border-radius: 5px;
-  .form-guide-center {
-    border-top: 1px solid #6E7588;
-    border-bottom: 1px solid #6E7588;
-    padding: 0px 10px;
-  }
-  .form-guide-item {
-    width: 28px;
-    padding: 5px 0;
-    display: block;
-    word-break: break-all;
-    color: #B1BAD4;
-    font-size: 14px;
-    line-height: 16px;
-    position: relative;
-  }
-  .form-guide-item::after {
-    content: '';
-    display: block;
-    width: 15px;
-    height: 1px;
-    background-color: #6E7588;
-    position: absolute;
-    bottom: 0px;
-    left: 7px;
-  }
-
-  .form-guide-bottom {
-    padding: 5px 10px;
-    display: flex;
-    justify-content: center;
-  }
-  .form-guide-item:last-child::after {
-    content: '';
-    display: none;
-    width: 15px;
-    height: 1px;
-    background-color: #6E7588;
-    position: absolute;
-    bottom: 0px;
-    left: 7px;
-  }
-}
-
-.white-card.bitsun-form-card-class {
-  .ant-card-body {
-    background-color: #FFFFFF;
-    padding: 0px;
-  }
-}
-
-.bitsun-form-card-class {
-  &>.ant-card-body {
-    margin-bottom: 10px;
-  }
-}
-
-.bitsun-form-card-class {
-  .ant-card-head {
-    border: 0px;
-    padding: 0px;
-    height: 48px;
-  }
-
-  .ant-card-body {
-    padding: 12px 0 0;
-    margin-top: -4px;
-    background-color: #F3F3F3;
-  }
-
-  .ant-card-head-title {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    color: #000000;
-    font-weight: 600;
-    font-family: PingFangSC;
-    background-color: #FFFFFF;
-    padding: 8px 0;
-    margin: 0px;
-    .title-left-line {
-      display: inline-block;
-      width: 4px;
-      height: 100%;
-      background-color: #005CFF;
-      height: 20px;
-      margin-right: 16px;
-    }
-  }
-}
-
-.field-group-hidden {
-  .ant-card-body {
-    display: none !important;
-  }
-}

package/src/components/Business/CommonGuideWrapper/index.md

@@ -1,39 +0,0 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 模块导航容器组件
-order: 1
----
-
-# GuideWrapper
-
-
-## 容器模块导航
-
-```tsx
-import React, { useState } from 'react';
-import { GuideWrapper } from '../../../index.ts';
-
-export default () => {
-  const { Field } = GuideWrapper;
-
-  return (
-     <GuideWrapper>
-        <Field id='test1' title='基础信息'>
-          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块一</div>
-        </Field>    
-        <Field id='test2' title='销售信息' isWhiteCard={true}>
-          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块二</div>
-        </Field>    
-        <Field id='test3' title='其他信息'>
-          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块三</div>
-        </Field>    
-     </GuideWrapper>
-
-  );
-};
-```

package/src/components/Business/CommonGuideWrapper/index.tsx

@@ -1,84 +0,0 @@
-import React, { Component } from "react";
-import dragImg from '../../../assets/drag.svg';
-import label_icon_bottom from '../../../assets/label_icon_bottom.svg';
-import arrow_top from '../../../assets/arrow_top.png';
-import './index.less';
-
-const Field = ({ children, ...props }: any) => {
-  const [fieldGroupVisible, setVisible] = React.useState(true);
-  return (
-    <div 
-      className={
-        `bitsun-form-card-class 
-        ${fieldGroupVisible ? '' : 'field-group-hidden'} 
-        ${props.isWhiteCard ? 'white-card' : ''}
-        `
-      } 
-      id={props.id}
-    >
-      <div className="ant-card-head">
-        <div className="ant-card-head-title">
-          <span className='title-left-line'></span>
-          <span style={{ marginRight: '5px' }}>
-            {props?.title}
-          </span>
-          <img
-            width={24}
-            style={{
-              transform: fieldGroupVisible ? 'inherit' : 'rotate(180deg)',
-              cursor: 'pointer'
-            }}
-            src={arrow_top}
-            onClick={(e) => {
-              e.stopPropagation();
-              setVisible(!fieldGroupVisible);
-            }}
-          />
-        </div>
-      </div>
-      <div className="ant-card-body">
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default class GuideWrapper extends Component {
-  static Field = Field;
-  render() {
-    const { children = [], ...props }: any = this.props;
-    let cardGroups = children.filter((item:any) => item?.props?.id && item?.props?.title);
-    return (
-      <div {...props}>
-        {children}
-        <div
-          className='form-guide'
-        >
-          <div className='form-guide-top'>
-            <img width={24} src={dragImg} />
-          </div>
-          <div className='form-guide-center'>
-            {
-              cardGroups.map((item:any) => {
-                return (
-                  <span
-                    className='form-guide-item'
-                    onClick={() => {
-                      let currentDom = document.getElementById(item.props.id);
-                      currentDom && currentDom.scrollIntoView({ block: 'center', behavior: 'smooth' });
-                    }}
-                  >
-                    {item.props.title}
-                  </span>
-                )
-              })
-            }
-          </div>
-          <div className='form-guide-bottom'>
-            <img width={24} src={label_icon_bottom} />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}

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

@@ -1,80 +0,0 @@
-.detail_page_head {
-  height: 54px;
-  display: flex;
-  align-items: center;
-  background-color: #FFFFFF;
-  border-bottom: 1px solid #f0f0f0;
-  .ant-breadcrumb {
-    display: block !important;
-    .ant-breadcrumb-separator {
-      margin: 0 2px;
-    }
-    li .bread_name {
-      color: #8A8F8D;
-      font-size: 12px;
-      cursor: pointer;
-    }
-    li .bread_name:hover {
-      color: #000000d9;
-    }
-  }
-}
-.detail_page_wrapper {
-  // padding-top: 51px;
-}
-
-.back_home_img_content {
-  display: inline-block;
-  height: 28px;
-  width: 28px;
-  border: 1px solid #BABABA;
-  margin: 0 12px 0 20px;
-  border-radius: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  .anticon-arrow-left {
-    color: #BABABA;
-  }
-}
-
-.back_home_img_content:hover {
-  background-color: #005CFF;
-  border: 1px solid #005CFF;
-  .anticon-arrow-left {
-    color: #FFFFFF;
-  }
-}
-
-.detail_page_title_box {
-  flex-grow: 1;
-}
-
-.detail_page_title {
-  height: 20px;
-  font-family: PingFangSC;
-  font-weight: 600;
-  font-size: 16px;
-  margin-top: 2px;
-  color: #000000;
-  letter-spacing: 0;
-  line-height: 20px;
-}
-
-.detail_page_btns {
-  display: flex;
-  gap: 8px;
-  margin-right: 20px;
-  button {
-    height: 32px !important;
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    border-radius: 3px;
-    padding: 0 10px;
-  }
-  .ant-btn-dangerous {
-    background-color: #EC5246 !important;
-  }
-}

package/src/components/Business/DetailPageWrapper/index.tsx

@@ -1,335 +0,0 @@
-// @ts-nocheck
-import {
-  ArrowLeftOutlined,
-} from '@ant-design/icons';
-import { Anchor, Tooltip, Button, Menu, Dropdown, Breadcrumb } from 'antd';
-import React, { useEffect, useState, useMemo } from 'react';
-import { history } from 'umi';
-import { getMainCrumbNameMap, doDetailPageAction, judgeIsEmpty } from './utils';
-import { memoizeOneFormatter } from '@/utils/utils';
-import './index.less';
-import quanping from '../../../assets/icon-quanping.svg';
-import scanning from '../../../assets/scanning.svg';
-import editIcon from '../../../assets/btn-edit.svg';
-import submitIcon from '../../../assets/btn-submit.svg';
-import deleteIcon from '../../../assets/btn-delete.svg';
-import moreIcon from '../../../assets/btn-more.svg';
-import { useLocation, formatMessage } from 'umi';
-import CommonAlert from '../CommonAlert';
-import ENUM from '@/utils/enumConfig';
-
-interface actionItem {
-  type?: string;
-  name: string;
-  icon?: string;
-  visible?: boolean | string;
-  disabled?: boolean;
-  code?: string; //权限过滤todo
-  action: object;
-}
-
-export const iconMap = {
-  edit: <img src={editIcon} />,
-  delete: <img src={deleteIcon} />,
-  submit: <img src={submitIcon} />,
-  more: <img src={moreIcon} />,
-};
-
-export default (props: any) => {
-  const { pathname } = useLocation();
-  const [id]: any = useState(pathname + 'id');
-  const { children, ...restProps } = props;
-
-  return (
-    <div id={id} className={'detail_page_wrapper'}>
-      <DetailWrapper
-        pathname={pathname} 
-        {
-          ...restProps
-        }
-      />
-      {children}
-    </div>
-  );
-};
-
-const DetailWrapper = React.memo(
-  ({ 
-    pathname, 
-    actionList=[], 
-    routes=[], 
-    itemPath, 
-    alertProps,
-    donotNeedShowScreenIcon=false,
-    title,
-    pathToRegexp,
-  }: any) => {
-    const [isFullScreen, setIsFnllScreen]: any = useState(false);
-    const [breadcrumbArr, setBreadCrumbArr]: any = useState([]);
-
-    const basePath = window.top == window ? '' : `/${itemPath}`;
-
-    const menuRoutes =
-      window.top == window
-        ? routes.find((item) => item.path === '/')?.routes || []
-        : JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.LIMIT_MENU_DATA) || '[]');
-
-    const breadcrumbNameMap = getMainCrumbNameMap(
-      memoizeOneFormatter(menuRoutes, ''),
-    );
-    const matchParamsPath = (pathname: string, breadcrumbNameMap: object) => {
-      const pathKey: any = Object.keys(breadcrumbNameMap).find((key) =>
-        pathToRegexp ? pathToRegexp(key).test(pathname) : false
-      );
-      return pathKey ? breadcrumbNameMap[pathKey] : undefined;
-    };
-
-    const getPageTitle = (pathname: string) => {
-      const currRouterData = matchParamsPath(
-        `${basePath}${pathname}`,
-        breadcrumbNameMap,
-      );
-
-      if (!currRouterData) {
-        return '';
-      }
-
-      let breadcrumbArrs = currRouterData.nameMap || [];
-      if (title && breadcrumbArrs.length) {
-        breadcrumbArrs.pop();
-        breadcrumbArrs.push(title)
-      }
-      setBreadCrumbArr([...breadcrumbArrs])
-
-      const pageName = formatMessage({
-        id: currRouterData.locale || currRouterData.name,
-        defaultMessage: currRouterData.name,
-      });
-
-      return title ? title : window.top === window ? pageName : `${currRouterData.name}`;
-    };
-
-    const pageTitle = useMemo(() => getPageTitle(pathname), [pathname, title]);
-
-    // const breadcrumbArr = `${basePath}${pathname}`
-    //   .split('/')
-    //   .slice(1)
-    //   .map((_item, index, arr) =>
-    //     matchParamsPath(
-    //       `/${arr.slice(0, index + 1).join('/')}`,
-    //       breadcrumbNameMap,
-    //     ),
-    //   )
-    //   .filter((item) => item);
-
-    useEffect(() => {}, []);
-
-    const ShowFullScreen = () => {
-      if (window.top != window) {
-        window.parent.postMessage(
-          {
-            type: 'screenChange',
-            id: itemPath,
-          },
-          '*',
-        );
-        setIsFnllScreen(!isFullScreen);
-      } else {
-        const isFullScreen: any =
-          document.fullScreen ||
-          document.webkitIsFullScreen ||
-          document.mozFullScreen;
-        let contentEle: any = document.querySelector(`body`);
-        // addTabsNavStyle(isFullScreen);
-        if (contentEle && !isFullScreen) {
-          let fullScreenEle =
-            contentEle.requestFullscreen ||
-            contentEle.mozRequestFullScreen ||
-            contentEle.webkitRequestFullScreen ||
-            contentEle.msRequestFullscreen;
-          if (fullScreenEle) {
-            fullScreenEle.call(contentEle);
-            setIsFnllScreen(true);
-            return;
-          }
-        }
-        if (document && isFullScreen) {
-          let exitFullScreen =
-            document.exitFullscreen ||
-            document.mozCancelFullScreen ||
-            document.webkitCancelFullScreen ||
-            document.msExitFullscreen;
-          if (exitFullScreen) {
-            exitFullScreen.call(document);
-            setIsFnllScreen(false);
-            return;
-          }
-        }
-      }
-    };
-
-    const renderPageActionList = (actionLists: Array<actionItem>) => {
-      const authButton = localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES)
-      ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES) as string)
-      : [];
-      let visibleActions = actionLists.filter(
-        (action) =>
-          ((action.visible && action.visible !== 'false') || judgeIsEmpty(action.visible)) && 
-          (judgeIsEmpty(action.code) || authButton.filter(item => item === action.code)),
-      );
-
-      const renderButton = (item: actionItem, type?: any) => {
-        return (
-          <Button
-            type={type || 'primary'}
-            icon={item.icon ? iconMap[item.icon] : ''}
-            danger={item.name === '删除' ? true : false}
-            disabled={item.disabled}
-            onClick={() => {
-              if (typeof item.action === 'function') {
-                item.action();
-              } else {
-                doDetailPageAction(item.action);
-              }
-            }}
-          >
-            {item.name}
-          </Button>
-        );
-      };
-
-      if (visibleActions.length <= 3) {
-        return visibleActions.map((item) => {
-          return renderButton(item);
-        });
-      }
-
-      let moreOperate = visibleActions.splice(3);
-      const menu = (
-        <Menu>
-          {moreOperate.map((item: any, index: number) => (
-            <Menu.Item className="more-btn-action" key={index}>
-              {renderButton(item, 'link')}
-            </Menu.Item>
-          ))}
-        </Menu>
-      );
-      //按钮操作3个显示更多
-      return (
-        <div className="detail_btn_wrapper">
-          {visibleActions.map((item: any, index: number) => {
-            return renderButton(item);
-          })}
-          <Dropdown style={{ padding: '0px' }} overlay={menu}>
-            <Button type="primary">
-              <span style={{ margin: '0px' }}>更多</span>
-              <img src={moreIcon} />
-            </Button>
-          </Dropdown>
-        </div>
-      );
-    };
-
-    return (
-      <Anchor
-        key={`${pathname}_anchor`}
-        offsetTop={window.top == window ? 78 : 0}
-      >
-        <div>
-          <div className={'detail_page_head'}>
-            <div
-              className={'back_home_img_content'}
-              onClick={() => {
-                history.goBack();
-              }}
-            >
-              <ArrowLeftOutlined />
-            </div>
-            <div className={'detail_page_title_box'}>
-              <div className={'detail_page_title'}>{pageTitle}</div>
-              <Breadcrumb>
-                {breadcrumbArr.map((item) => (
-                  <Breadcrumb.Item
-                    key={item}
-                    onClick={() => {
-                      // if (
-                      //   item.path &&
-                      //   !item.children &&
-                      //   !pathToRegexp(item.path).test(`${basePath}${pathname}`)
-                      // ) {
-                      //   history.push({
-                      //     pathname: item.path.replace(basePath, ''),
-                      //   });
-                      // }
-                    }}
-                  >
-                    <span
-                      style={{
-                        // color:
-                        //   item.path &&
-                        //   pathToRegexp(item.path).test(`${basePath}${pathname}`)
-                        //     ? '#000000d9'
-                        //     : '',
-                      }}
-                      className="bread_name"
-                    >
-                      {item}
-                    </span>
-                  </Breadcrumb.Item>
-                ))}
-              </Breadcrumb>
-            </div>
-            <div
-              className={'detail_page_btns'}
-              style={{ marginRight: '20px', display: 'flex', gap: '8px' }}
-            >
-              {renderPageActionList(actionList)}
-              {
-                !donotNeedShowScreenIcon ? ( <a>
-                  {isFullScreen ? (
-                    <Tooltip title="取消全屏">
-                      <img
-                        onClick={() => {
-                          ShowFullScreen();
-                        }}
-                        width={32}
-                        src={scanning}
-                      />
-                    </Tooltip>
-                  ) : (
-                    <Tooltip title="全屏">
-                      <img
-                        onClick={() => {
-                          ShowFullScreen();
-                        }}
-                        width={32}
-                        src={quanping}
-                      />
-                    </Tooltip>
-                  )}
-                </a>) : null
-              }
-            </div>
-          </div>
-          {
-            alertProps && (
-              <CommonAlert
-                {
-                  ...alertProps
-                }
-              />
-            )
-          }
-        </div>
-      </Anchor>
-    );
-  },
-  (prevProps, nextProps) => {
-    if (
-      (JSON.stringify(prevProps.actionList) != JSON.stringify(nextProps.actionList)) || prevProps.title !== nextProps.title
-    ) {
-      return false;
-    }
-    return true;
-  },
-);