@bit-sun/business-component 3.1.6 → 3.1.8

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

@@ -1,39 +1,39 @@
----
-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>
-
-  );
-};
-```
+---
+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,94 +1,94 @@
-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';
+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>
+    )
+  }
+}

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

@@ -1,87 +1,87 @@
-.detail_page_head {
-  height: 54px;
-  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;
-    }
-  }
-}
-.detail_page_wrapper {
-  // padding-top: 51px;
-  height: calc(100vh - 80px);
-  background-color: #FFF;
-}
-
-.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;
-  }
-}
+.detail_page_head {
+  height: 54px;
+  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;
+    }
+  }
+}
+.detail_page_wrapper {
+  // padding-top: 51px;
+  height: calc(100vh - 80px);
+  background-color: #FFF;
+}
+
+.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;
+  }
+}