@bit-sun/business-component 2.4.24 → 2.4.26-beta01

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

@@ -1,94 +1,84 @@
-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';
-import classNames from "classnames";
-
-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;
-    // 兼容容器下只有一个dom元素非数组的情况
-    const domList = Array.isArray(children) ? children : [children];
-    let cardGroups = domList.filter((item:any) => item?.props?.id && item?.props?.title);
-    return (
-      <div {...props} className={classNames('guide-wrapper', props?.className)}>
-        {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: any = document.getElementById(item.props.id);
-                      currentDom && currentDom.scrollIntoView({ block: 'center', behavior: 'smooth' });
-
-                      // 高亮
-                      let heightLight = currentDom.getElementsByClassName('ant-card-head-title')
-                      heightLight[0].style.backgroundColor = '#2065c7'
-                      setTimeout(() => {
-                        heightLight[0].style.backgroundColor = ''
-                      }, 800);
-                    }}
-                  >
-                    {item.props.title}
-                  </span>
-                )
-              })
-            }
-          </div>
-          <div className='form-guide-bottom'>
-            <img width={24} src={label_icon_bottom} />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
+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,25 +1,19 @@
 .detail_page_head {
   height: 54px;
-  position: fixed;
-  z-index: 5;
   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;
     }
@@ -27,8 +21,6 @@
 }
 .detail_page_wrapper {
   // padding-top: 51px;
-  height: calc(100vh - 80px);
-  background-color: #FFF;
 }
 
 .back_home_img_content {
@@ -85,4 +77,4 @@
   .ant-btn-dangerous {
     background-color: #EC5246 !important;
   }
-}
+}

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

@@ -1,7 +1,9 @@
 // @ts-nocheck
-import { ArrowLeftOutlined } from '@ant-design/icons';
+import {
+  ArrowLeftOutlined,
+} from '@ant-design/icons';
 import { Anchor, Tooltip, Button, Menu, Dropdown, Breadcrumb } from 'antd';
-import React, { useEffect, useState, useMemo, useRef } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { history } from 'umi';
 import { getMainCrumbNameMap, doDetailPageAction, judgeIsEmpty } from './utils';
 import { memoizeOneFormatter, go2BackAndClose } from '@/utils/utils';
@@ -15,8 +17,6 @@ import moreIcon from '../../../assets/btn-more.svg';
 import { useLocation, formatMessage } from 'umi';
 import CommonAlert from '../CommonAlert';
 import ENUM from '@/utils/enumConfig';
-import { debounce } from 'lodash';
-import { useSize } from 'ahooks';
 
 interface actionItem {
   type?: string;
@@ -42,51 +42,45 @@ export default (props: any) => {
 
   return (
     <div id={id} className={'detail_page_wrapper'}>
-      <DetailWrapper pathname={pathname} {...restProps} />
+      <DetailWrapper
+        pathname={pathname} 
+        {
+          ...restProps
+        }
+      />
       {children}
     </div>
   );
 };
 
 const DetailWrapper = React.memo(
-  ({
-    pathname,
-    actionList = [],
-    routes = [],
-    itemPath,
+  ({ 
+    pathname, 
+    actionList=[], 
+    routes=[], 
+    itemPath, 
     alertProps,
-    donotNeedShowScreenIcon = false,
+    donotNeedShowScreenIcon=false,
     title,
     pathToRegexp,
     backHistoryPath,
-    onBack,
   }: any) => {
     const [isFullScreen, setIsFnllScreen]: any = useState(false);
     const [breadcrumbArr, setBreadCrumbArr]: any = useState([]);
-    const wrapperContainerRef = useRef<HTMLDivElement>(null)
-
-    const asideWidth =
-      (
-        document.querySelector('.ant-layout-sider') ||
-        window.parent?.document?.querySelector?.('.ant-layout-sider')
-      )?.clientWidth ?? 0;
-    const wrapperSize = useSize(wrapperContainerRef);
 
     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) || '[]',
-          );
+        : 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,
+        pathToRegexp ? pathToRegexp(key).test(pathname) : false
       );
       return pathKey ? breadcrumbNameMap[pathKey] : undefined;
     };
@@ -104,20 +98,16 @@ const DetailWrapper = React.memo(
       let breadcrumbArrs = currRouterData.nameMap || [];
       if (title && breadcrumbArrs.length) {
         breadcrumbArrs.pop();
-        breadcrumbArrs.push(title);
+        breadcrumbArrs.push(title)
       }
-      setBreadCrumbArr([...breadcrumbArrs]);
+      setBreadCrumbArr([...breadcrumbArrs])
 
       const pageName = formatMessage({
         id: currRouterData.locale || currRouterData.name,
         defaultMessage: currRouterData.name,
       });
 
-      return title
-        ? title
-        : window.top === window
-        ? pageName
-        : `${currRouterData.name}`;
+      return title ? title : window.top === window ? pageName : `${currRouterData.name}`;
     };
 
     const pageTitle = useMemo(() => getPageTitle(pathname), [pathname, title]);
@@ -126,9 +116,9 @@ const DetailWrapper = React.memo(
 
     const ShowFullScreen = () => {
       const isFullScreen: any =
-        window.top.document.fullScreen ||
-        window.top.document.webkitIsFullScreen ||
-        window.top.document.mozFullScreen;
+      window.top.document.fullScreen ||
+      window.top.document.webkitIsFullScreen ||
+      window.top.document.mozFullScreen;
       let contentEle: any = window.top.document.querySelector(`body`);
       // addTabsNavStyle(isFullScreen);
       if (contentEle && !isFullScreen) {
@@ -220,99 +210,98 @@ const DetailWrapper = React.memo(
     };
 
     return (
-      <div style={{ height: '54px' }} ref={wrapperContainerRef}>
-        <div
-          className={'detail_page_head'}
-          style={{
-            width: wrapperSize?.width ?? `calc( 100vh - ${asideWidth}px )`,
-            left: asideWidth,
-          }}
-        >
-          <div
-            className={'back_home_img_content'}
-            onClick={() => {
-              go2BackAndClose(backHistoryPath);
-              // 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:
+      <Anchor
+        key={`${pathname}_anchor`}
+        offsetTop={window.top == window ? 78 : 0}
+      >
+        <div>
+          <div className={'detail_page_head'}>
+            <div
+              className={'back_home_img_content'}
+              onClick={() => {
+                go2BackAndClose(backHistoryPath);
+                // 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 &&
-                      //   pathToRegexp(item.path).test(`${basePath}${pathname}`)
-                      //     ? '#000000d9'
-                      //     : '',
+                      //   !item.children &&
+                      //   !pathToRegexp(item.path).test(`${basePath}${pathname}`)
+                      // ) {
+                      //   history.push({
+                      //     pathname: item.path.replace(basePath, ''),
+                      //   });
+                      // }
                     }}
-                    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();
+                    <span
+                      style={{
+                        // color:
+                        //   item.path &&
+                        //   pathToRegexp(item.path).test(`${basePath}${pathname}`)
+                        //     ? '#000000d9'
+                        //     : '',
                       }}
-                      width={32}
-                      src={quanping}
-                    />
-                  </Tooltip>
-                )}
-              </a>) : null
-            }
-          </div>
-        </div>
-        {
-          alertProps && (
-            <CommonAlert
+                      className="bread_name"
+                    >
+                      {item}
+                    </span>
+                  </Breadcrumb.Item>
+                ))}
+              </Breadcrumb>
+            </div>
+            <div
+              className={'detail_page_btns'}
+              style={{ marginRight: '20px', display: 'flex', gap: '8px' }}
+            >
+              {renderPageActionList(actionList)}
               {
-                ...alertProps
+                !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>
+          </div>
+          {
+            alertProps && (
+              <CommonAlert
+                {
+                  ...alertProps
+                }
+              />
+            )
+          }
+        </div>
+      </Anchor>
     );
   },
   (prevProps, nextProps) => {

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

@@ -1,45 +1,45 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 标题组件
-order: 1
----
-
-# HomePageWrapper
-
-
-## 首页标题组件
-
-```tsx
-import { HomePageWrapper } from '../../../index.ts';
-import React, { useState } from 'react';
-
-export default () => {
-  const routes = [
-    {
-      path: '/',
-      name: 'welcome',
-      routes: [
-        {
-           path: '/components',
-           name: '组件',
-           routes: [
-            {
-              path: '/components/business/home-page-wrapper',
-              name: '标题组件',
-              component: 'aaa'
-            }
-           ]
-        }
-      ]
-    }
-  ]
-  return (
-    <HomePageWrapper routes={routes} />
-  );
-};
-```
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 标题组件
+order: 1
+---
+
+# HomePageWrapper
+
+
+## 首页标题组件
+
+```tsx
+import { HomePageWrapper } from '../../../index.ts';
+import React, { useState } from 'react';
+
+export default () => {
+  const routes = [
+    {
+      path: '/',
+      name: 'welcome',
+      routes: [
+        {
+           path: '/components',
+           name: '组件',
+           routes: [
+            {
+              path: '/components/business/home-page-wrapper',
+              name: '标题组件',
+              component: 'aaa'
+            }
+           ]
+        }
+      ]
+    }
+  ]
+  return (
+    <HomePageWrapper routes={routes} />
+  );
+};
+```