@bit-sun/business-component 3.2.0-alpha.2 → 3.2.0-alpha.3

package/dist/components/Common/ExtendedCollapse/ExtendedPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CollapsePanelProps } from 'antd';
+import './index.less';
+export interface ExtendedPanelProps extends CollapsePanelProps {
+    extra?: React.ReactNode;
+    titleExtra?: React.ReactNode;
+    isActive?: boolean;
+}
+declare const ExtendedPanel: React.FC<ExtendedPanelProps>;
+export default ExtendedPanel;

package/dist/components/Common/ExtendedCollapse/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CollapseProps } from 'antd';
+import './index.less';
+declare const _default: React.FC<CollapseProps> & {
+    Board: React.FC<import("./ExtendedPanel").ExtendedPanelProps>;
+};
+export default _default;

package/dist/components/Common/Section/index.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+import type { TooltipProps } from 'antd';
+export interface copyableProps {
+    text: string;
+    onCopy: (event: any) => void;
+    icon: React.ReactNode;
+    tooltips: false | [React.ReactNode, React.ReactNode];
+    format: 'text/plain' | 'text/html';
+}
+export interface ellipsisProps {
+    rows: number;
+    expandable: boolean;
+    suffix?: string;
+    symbol?: React.ReactNode;
+    tooltip?: boolean | React.ReactNode | TooltipProps;
+    onExpand?: (event: React.MouseEvent<HTMLElement>) => void;
+    onEllipsis?: (ellipsis: boolean) => void;
+}
+interface IProps {
+    label: React.ReactNode | string;
+    children: React.ReactNode | string;
+    copyable?: boolean | copyableProps;
+    icon?: string | React.ReactNode;
+    ellipsis?: ellipsisProps;
+}
+export type SectionProps = PropsWithChildren<IProps>;
+declare const Section: ({ children, copyable, label, icon, ellipsis, }: SectionProps) => React.JSX.Element;
+export default Section;

package/dist/index.d.ts

@@ -29,3 +29,5 @@ export { default as EllipsisTooltip } from './components/Functional/EllipsisTool
 export * from './components/Functional/BsAntdSula/index';
 export { default as RuleComponent } from './components/Solution/RuleComponent';
 export { default as RuleSetter } from './components/Solution/RuleSetter';
+export { default as ExtendedCollapse } from './components/Common/ExtendedCollapse';
+export { default as Section } from './components/Common/Section';

package/dist/index.esm.js

@@ -1,14 +1,14 @@
 import axios from 'axios';
 import request$1 from 'umi-request';
 import cookie from 'js-cookie';
-import { message as message$1, Tooltip, Image, Popover, Card, Avatar, Badge, Menu, Input, InputNumber, Space, Button, Dropdown, Upload, Checkbox, Modal, Select, Form, Divider, Spin, Table, TreeSelect, Tag, Typography, Alert, Breadcrumb, Drawer as Drawer$1, List, Radio, Tree, Row, Col, Result, Tabs, Affix, Cascader, DatePicker, TimePicker, Switch } from 'antd';
+import { message as message$1, Tooltip, Image, Popover, Card, Avatar, Badge, Menu, Input, InputNumber, Space, Button, Dropdown, Upload, Checkbox, Modal, Select, Form, Divider, Spin, Table, TreeSelect, Tag, Typography, Alert, Breadcrumb, Drawer as Drawer$1, List, Radio, Tree, Row, Col, Result, Tabs, Affix, Cascader, DatePicker, TimePicker, Switch, Collapse } from 'antd';
 import _, { isNil, escapeRegExp, omit, debounce, cloneDeep as cloneDeep$1, throttle, isEmpty } from 'lodash';
 import memoizeOne from 'memoize-one';
 import { formatMessage, history, useLocation, Link, useModel, setLocale, useIntl, request as request$3 } from 'umi';
 import isEqual from 'lodash/isEqual';
 import React$1, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo, Component, useLayoutEffect, createRef } from 'react';
 import moment$1 from 'moment';
-import { EyeOutlined, DeleteOutlined, EditOutlined, CopyOutlined, CloseSquareOutlined, WarningOutlined, SendOutlined, ProfileTwoTone, ExclamationCircleOutlined, DownOutlined, UnorderedListOutlined, SearchOutlined, CaretLeftOutlined, CloseCircleOutlined, ArrowLeftOutlined, FolderOutlined, EllipsisOutlined, CaretDownOutlined, HomeOutlined, DoubleLeftOutlined, DoubleRightOutlined, MenuUnfoldOutlined, DashOutlined, SettingOutlined, BulbOutlined, PlayCircleOutlined, SaveOutlined, FullscreenExitOutlined, MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { EyeOutlined, DeleteOutlined, EditOutlined, CopyOutlined, CloseSquareOutlined, WarningOutlined, SendOutlined, ProfileTwoTone, ExclamationCircleOutlined, DownOutlined, UnorderedListOutlined, SearchOutlined, CaretLeftOutlined, CloseCircleOutlined, ArrowLeftOutlined, FolderOutlined, EllipsisOutlined, CaretDownOutlined, HomeOutlined, DoubleLeftOutlined, DoubleRightOutlined, MenuUnfoldOutlined, DashOutlined, SettingOutlined, BulbOutlined, PlayCircleOutlined, SaveOutlined, FullscreenExitOutlined, MinusCircleOutlined, PlusCircleOutlined, DownCircleFilled } from '@ant-design/icons';
 import { request as request$2, Table as Table$1, QueryTable, Form as Form$1 } from 'bssula';
 import 'qs';
 import { utils, writeFile, read } from 'xlsx';
@@ -36453,4 +36453,109 @@ var index$7 = /*#__PURE__*/forwardRef(function (props, ref) {
   })));
 });
 
-export { AddSelect, AddSkcSelect, AddSkuSelect, AddSpuSelect, AuthButton, BillEntry, BsCascader, index$5 as BsLayout, BsSulaQueryTable, BusinessSearchSelect$1 as BusinessSearchSelect, BusinessTreeSearchSelect$1 as BusinessTreeSearchSelect, index$1 as CheckOneUser, ColumnSettingTable, ColumnsEdit, CommodityEntry, DataImport, DataValidation, index$3 as DetailPageWrapper, EllipsisTooltip, ExportIcon, GuideWrapper, HandleTotalCount, index$4 as HomePageWrapper, JsonQueryTable, index$6 as MoreTreeTable, QueryMutipleInput, RuleObjectComponent as RuleComponent, index$7 as RuleSetter, SearchSelect, index$2 as StateFlow, ColumnSettingSulaTable as SulaColumnSettingTable, TableColumnSetting, TreeSearchSelect, authFunc, calculateValidPeriod, checkQuantityAccuracy, createUniqID, downloadExcel, ergodicMenuRoutes, formatter, getAccountID, getAccountId, getBreadcrumbNameMap, getCommonInfoKey, getConfigTableColumns, getCurrentTargetBgId, getCurrentTenantId, getDictionarySource, getDictionaryTextByValue, getEmployeeCode, getEmployeeId, getItemDefaultWidth$1 as getItemDefaultWidth, getJoinDictionaryText, getLastKey, getLimitMenuDataKey, getLocalStorageSaveKey, getMenuAuthDataKey, getSessionId, getSkuImg, getTenantList, getUserId, getUserName, go2BackAndClose, handleAntdColumnsSpecialParams, handleBaseUrlPre, handleBeforeUpload, handleBssulaColumnsSpecialParams, handleCommonTimeRender$1 as handleCommonTimeRender, handleConvertResponse, handleError, handleExport, handleExportBarCode, handleJudgeAuthButtons, handleOssUrl, handleRequestAuthHeader, handleRequestHeader, handleRequestUrl, handleStatusBadge, handleTextBreakSpaces, handleTextDouble$1 as handleTextDouble, handleTextDoubleOrId, handleTextLineFeed$1 as handleTextLineFeed, handleTextOverflow$1 as handleTextOverflow, handleTextTooltip, handleTextWarp, handleTextWarpCustom, handleTooltip$1 as handleTooltip, handleTooltipHours$1 as handleTooltipHours, handleUserPhone, judgeIsEmpty, judgeIsRequestError, judgeIsRequestSuccess, keyToWord, memoizeOneFormatter, noEmptyArr, noEmptyArray, paramsControl, parseWidth, precisionQuantity, randomString, readerXlsxToList, removeCurrentTenantId, removeTenantList, renderFixed2, renderNumberText, saveCurrentTenantId, saveTenantList, setConfigTableColumns, shouldUseAuth, socketFunctions, sulaTableRenderTooltip, tableColumnsImage$1 as tableColumnsImage, textIcon, updateGuanDate, userColumns$1 as userColumns, userInfoCard$1 as userInfoCard, uuid, writeListToXlsx };
+var css_248z$v = ".bs-collapse-wrap {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.bs-collapse-wrap .bs-collapse-header-wrap {\n  background: #fff;\n}\n.bs-collapse-wrap .bs-collapse-icon {\n  color: #b6b6b6;\n  transition: transform 0.3s;\n}\n.bs-collapse-wrap .bs-guidewrap-icon-toogle {\n  transform: rotate(180deg);\n}\n.bs-collapse-wrap .bs-collapse-header-title {\n  font-weight: 500;\n  font-size: 14px;\n  color: #000000;\n}\n.bs-collapse-wrap .bs-collapse-header-divider {\n  width: 3px;\n  height: 20px;\n  background: #02aa4c;\n}\n.bs-collapse-header-boder .ant-collapse .ant-collapse-item > .ant-collapse-header {\n  border-bottom: 1px solid #f0f0f0;\n  padding: 8px 16px;\n}\n";
+styleInject(css_248z$v);
+
+var _excluded$k = ["titleExtra", "header", "showArrow"];
+var Panel = Collapse.Panel;
+var ExtendedPanel = function ExtendedPanel(_ref) {
+  var titleExtra = _ref.titleExtra,
+    header = _ref.header,
+    _ref$showArrow = _ref.showArrow,
+    showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  var renderHeader = function renderHeader() {
+    return /*#__PURE__*/React$1.createElement(Space, {
+      align: "center"
+    }, /*#__PURE__*/React$1.createElement("div", {
+      className: "bs-collapse-header-divider"
+    }), /*#__PURE__*/React$1.createElement("div", {
+      className: "bs-collapse-header-title"
+    }, header), /*#__PURE__*/React$1.createElement(DownCircleFilled, {
+      className: classNames({
+        'bs-guidewrap-icon-toogle': props.isActive,
+        'bs-collapse-icon': true
+      })
+    }), titleExtra && /*#__PURE__*/React$1.createElement("div", {
+      className: "title-extra"
+    }, titleExtra));
+  };
+  return /*#__PURE__*/React$1.createElement(Panel, _objectSpread2(_objectSpread2({}, props), {}, {
+    header: renderHeader(),
+    className: "bs-collapse-header-wrap",
+    showArrow: showArrow
+  }), props.children);
+};
+
+var _excluded$l = ["children", "bordered"];
+var ExtendedCollapse = function ExtendedCollapse(props) {
+  var children = props.children,
+    bordered = props.bordered,
+    restProps = _objectWithoutProperties(props, _excluded$l);
+  return /*#__PURE__*/React$1.createElement("div", {
+    className: classNames({
+      'bs-collapse-wrap': true,
+      'bs-collapse-header-boder': !bordered // 无边框模式的时候默认添加头部底部边框
+    })
+  }, /*#__PURE__*/React$1.createElement(Collapse, _objectSpread2(_objectSpread2({}, restProps), {}, {
+    bordered: bordered
+  }), children));
+};
+var index$8 = Object.assign(ExtendedCollapse, {
+  Board: ExtendedPanel
+});
+
+var css_248z$w = ".index-module_paragraphCopyWrapper__3rGOI {\n  display: flex;\n  margin-bottom: 4px;\n}\n.index-module_paragraphCopyWrapper__3rGOI .index-module_paragraphCopyLabel__1Qb8u {\n  color: #8c8e91;\n  font-size: 12px;\n  white-space: nowrap;\n}\n.index-module_paragraphCopyWrapper__3rGOI .index-module_paragraphCopy__1y7Jo {\n  min-width: 100px;\n  margin-bottom: 0;\n  font-size: 12px;\n  flex: 1;\n}\n";
+var styles = {"paragraphCopyWrapper":"index-module_paragraphCopyWrapper__3rGOI","paragraphCopyLabel":"index-module_paragraphCopyLabel__1Qb8u","paragraphCopy":"index-module_paragraphCopy__1y7Jo"};
+styleInject(css_248z$w);
+
+var Paragraph = Typography.Paragraph;
+var Section = function Section(_ref) {
+  var children = _ref.children,
+    copyable = _ref.copyable,
+    label = _ref.label,
+    icon = _ref.icon,
+    _ref$ellipsis = _ref.ellipsis,
+    ellipsis = _ref$ellipsis === void 0 ? {
+      rows: 1,
+      expandable: false,
+      tooltip: true,
+      suffix: ''
+    } : _ref$ellipsis;
+  var copyableProps = {
+    tooltips: ['点击复制', '复制成功']
+  };
+  /**
+   * 渲染icon
+   */
+  var renderIcon = function renderIcon(icon) {
+    if (!icon) {
+      return null;
+    }
+    if (typeof icon === 'string') {
+      return /*#__PURE__*/React$1.createElement("img", {
+        src: icon,
+        width: 12
+      });
+    }
+    return /*#__PURE__*/React$1.createElement("span", {
+      style: {
+        paddingRight: '5px',
+        lineHeight: 0,
+        display: 'inline-block',
+        height: '14px'
+      }
+    }, icon);
+  };
+  return /*#__PURE__*/React$1.createElement("div", {
+    className: styles.paragraphCopyWrapper
+  }, /*#__PURE__*/React$1.createElement("div", {
+    className: styles.paragraphCopyLabel
+  }, label), renderIcon(icon), /*#__PURE__*/React$1.createElement(Paragraph, {
+    className: styles.paragraphCopy,
+    copyable: copyable ? copyableProps : false,
+    ellipsis: ellipsis
+  }, children));
+};
+
+export { AddSelect, AddSkcSelect, AddSkuSelect, AddSpuSelect, AuthButton, BillEntry, BsCascader, index$5 as BsLayout, BsSulaQueryTable, BusinessSearchSelect$1 as BusinessSearchSelect, BusinessTreeSearchSelect$1 as BusinessTreeSearchSelect, index$1 as CheckOneUser, ColumnSettingTable, ColumnsEdit, CommodityEntry, DataImport, DataValidation, index$3 as DetailPageWrapper, EllipsisTooltip, ExportIcon, index$8 as ExtendedCollapse, GuideWrapper, HandleTotalCount, index$4 as HomePageWrapper, JsonQueryTable, index$6 as MoreTreeTable, QueryMutipleInput, RuleObjectComponent as RuleComponent, index$7 as RuleSetter, SearchSelect, Section, index$2 as StateFlow, ColumnSettingSulaTable as SulaColumnSettingTable, TableColumnSetting, TreeSearchSelect, authFunc, calculateValidPeriod, checkQuantityAccuracy, createUniqID, downloadExcel, ergodicMenuRoutes, formatter, getAccountID, getAccountId, getBreadcrumbNameMap, getCommonInfoKey, getConfigTableColumns, getCurrentTargetBgId, getCurrentTenantId, getDictionarySource, getDictionaryTextByValue, getEmployeeCode, getEmployeeId, getItemDefaultWidth$1 as getItemDefaultWidth, getJoinDictionaryText, getLastKey, getLimitMenuDataKey, getLocalStorageSaveKey, getMenuAuthDataKey, getSessionId, getSkuImg, getTenantList, getUserId, getUserName, go2BackAndClose, handleAntdColumnsSpecialParams, handleBaseUrlPre, handleBeforeUpload, handleBssulaColumnsSpecialParams, handleCommonTimeRender$1 as handleCommonTimeRender, handleConvertResponse, handleError, handleExport, handleExportBarCode, handleJudgeAuthButtons, handleOssUrl, handleRequestAuthHeader, handleRequestHeader, handleRequestUrl, handleStatusBadge, handleTextBreakSpaces, handleTextDouble$1 as handleTextDouble, handleTextDoubleOrId, handleTextLineFeed$1 as handleTextLineFeed, handleTextOverflow$1 as handleTextOverflow, handleTextTooltip, handleTextWarp, handleTextWarpCustom, handleTooltip$1 as handleTooltip, handleTooltipHours$1 as handleTooltipHours, handleUserPhone, judgeIsEmpty, judgeIsRequestError, judgeIsRequestSuccess, keyToWord, memoizeOneFormatter, noEmptyArr, noEmptyArray, paramsControl, parseWidth, precisionQuantity, randomString, readerXlsxToList, removeCurrentTenantId, removeTenantList, renderFixed2, renderNumberText, saveCurrentTenantId, saveTenantList, setConfigTableColumns, shouldUseAuth, socketFunctions, sulaTableRenderTooltip, tableColumnsImage$1 as tableColumnsImage, textIcon, updateGuanDate, userColumns$1 as userColumns, userInfoCard$1 as userInfoCard, uuid, writeListToXlsx };

package/dist/index.js

@@ -36476,6 +36476,111 @@ var index$7 = /*#__PURE__*/React$1.forwardRef(function (props, ref) {
   })));
 });
 
+var css_248z$v = ".bs-collapse-wrap {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.bs-collapse-wrap .bs-collapse-header-wrap {\n  background: #fff;\n}\n.bs-collapse-wrap .bs-collapse-icon {\n  color: #b6b6b6;\n  transition: transform 0.3s;\n}\n.bs-collapse-wrap .bs-guidewrap-icon-toogle {\n  transform: rotate(180deg);\n}\n.bs-collapse-wrap .bs-collapse-header-title {\n  font-weight: 500;\n  font-size: 14px;\n  color: #000000;\n}\n.bs-collapse-wrap .bs-collapse-header-divider {\n  width: 3px;\n  height: 20px;\n  background: #02aa4c;\n}\n.bs-collapse-header-boder .ant-collapse .ant-collapse-item > .ant-collapse-header {\n  border-bottom: 1px solid #f0f0f0;\n  padding: 8px 16px;\n}\n";
+styleInject(css_248z$v);
+
+var _excluded$k = ["titleExtra", "header", "showArrow"];
+var Panel = antd.Collapse.Panel;
+var ExtendedPanel = function ExtendedPanel(_ref) {
+  var titleExtra = _ref.titleExtra,
+    header = _ref.header,
+    _ref$showArrow = _ref.showArrow,
+    showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  var renderHeader = function renderHeader() {
+    return /*#__PURE__*/React__default['default'].createElement(antd.Space, {
+      align: "center"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "bs-collapse-header-divider"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "bs-collapse-header-title"
+    }, header), /*#__PURE__*/React__default['default'].createElement(icons.DownCircleFilled, {
+      className: classNames__default['default']({
+        'bs-guidewrap-icon-toogle': props.isActive,
+        'bs-collapse-icon': true
+      })
+    }), titleExtra && /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "title-extra"
+    }, titleExtra));
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Panel, _objectSpread2(_objectSpread2({}, props), {}, {
+    header: renderHeader(),
+    className: "bs-collapse-header-wrap",
+    showArrow: showArrow
+  }), props.children);
+};
+
+var _excluded$l = ["children", "bordered"];
+var ExtendedCollapse = function ExtendedCollapse(props) {
+  var children = props.children,
+    bordered = props.bordered,
+    restProps = _objectWithoutProperties(props, _excluded$l);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: classNames__default['default']({
+      'bs-collapse-wrap': true,
+      'bs-collapse-header-boder': !bordered // 无边框模式的时候默认添加头部底部边框
+    })
+  }, /*#__PURE__*/React__default['default'].createElement(antd.Collapse, _objectSpread2(_objectSpread2({}, restProps), {}, {
+    bordered: bordered
+  }), children));
+};
+var index$8 = Object.assign(ExtendedCollapse, {
+  Board: ExtendedPanel
+});
+
+var css_248z$w = ".index-module_paragraphCopyWrapper__3rGOI {\n  display: flex;\n  margin-bottom: 4px;\n}\n.index-module_paragraphCopyWrapper__3rGOI .index-module_paragraphCopyLabel__1Qb8u {\n  color: #8c8e91;\n  font-size: 12px;\n  white-space: nowrap;\n}\n.index-module_paragraphCopyWrapper__3rGOI .index-module_paragraphCopy__1y7Jo {\n  min-width: 100px;\n  margin-bottom: 0;\n  font-size: 12px;\n  flex: 1;\n}\n";
+var styles = {"paragraphCopyWrapper":"index-module_paragraphCopyWrapper__3rGOI","paragraphCopyLabel":"index-module_paragraphCopyLabel__1Qb8u","paragraphCopy":"index-module_paragraphCopy__1y7Jo"};
+styleInject(css_248z$w);
+
+var Paragraph = antd.Typography.Paragraph;
+var Section = function Section(_ref) {
+  var children = _ref.children,
+    copyable = _ref.copyable,
+    label = _ref.label,
+    icon = _ref.icon,
+    _ref$ellipsis = _ref.ellipsis,
+    ellipsis = _ref$ellipsis === void 0 ? {
+      rows: 1,
+      expandable: false,
+      tooltip: true,
+      suffix: ''
+    } : _ref$ellipsis;
+  var copyableProps = {
+    tooltips: ['点击复制', '复制成功']
+  };
+  /**
+   * 渲染icon
+   */
+  var renderIcon = function renderIcon(icon) {
+    if (!icon) {
+      return null;
+    }
+    if (typeof icon === 'string') {
+      return /*#__PURE__*/React__default['default'].createElement("img", {
+        src: icon,
+        width: 12
+      });
+    }
+    return /*#__PURE__*/React__default['default'].createElement("span", {
+      style: {
+        paddingRight: '5px',
+        lineHeight: 0,
+        display: 'inline-block',
+        height: '14px'
+      }
+    }, icon);
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.paragraphCopyWrapper
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: styles.paragraphCopyLabel
+  }, label), renderIcon(icon), /*#__PURE__*/React__default['default'].createElement(Paragraph, {
+    className: styles.paragraphCopy,
+    copyable: copyable ? copyableProps : false,
+    ellipsis: ellipsis
+  }, children));
+};
+
 exports.AddSelect = AddSelect;
 exports.AddSkcSelect = AddSkcSelect;
 exports.AddSkuSelect = AddSkuSelect;
@@ -36496,6 +36601,7 @@ exports.DataValidation = DataValidation;
 exports.DetailPageWrapper = index$3;
 exports.EllipsisTooltip = EllipsisTooltip;
 exports.ExportIcon = ExportIcon;
+exports.ExtendedCollapse = index$8;
 exports.GuideWrapper = GuideWrapper;
 exports.HandleTotalCount = HandleTotalCount;
 exports.HomePageWrapper = index$4;
@@ -36505,6 +36611,7 @@ exports.QueryMutipleInput = QueryMutipleInput;
 exports.RuleComponent = RuleObjectComponent;
 exports.RuleSetter = index$7;
 exports.SearchSelect = SearchSelect;
+exports.Section = Section;
 exports.StateFlow = index$2;
 exports.SulaColumnSettingTable = ColumnSettingSulaTable;
 exports.TableColumnSetting = TableColumnSetting;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "3.2.0-alpha.2",
+  "version": "3.2.0-alpha.3",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Common/ExtendedCollapse/ExtendedPanel.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Collapse, Space } from 'antd';
+import { CollapsePanelProps } from 'antd';
+import { DownCircleFilled } from '@ant-design/icons';
+import classNames from 'classnames';
+import './index.less';
+
+const { Panel } = Collapse;
+
+export interface ExtendedPanelProps extends CollapsePanelProps {
+  extra?: React.ReactNode;
+  titleExtra?: React.ReactNode;
+  isActive?: boolean;
+}
+
+const ExtendedPanel: React.FC<ExtendedPanelProps> = ({
+  titleExtra,
+  header,
+  showArrow=false,
+  ...props
+}) => {
+
+  const renderHeader = () => {
+    return (
+      <Space align="center">
+        <div className="bs-collapse-header-divider" />
+        <div className="bs-collapse-header-title">{header}</div>
+        <DownCircleFilled
+          className={classNames({
+            'bs-guidewrap-icon-toogle': props.isActive,
+            'bs-collapse-icon': true,
+          })}
+        />
+        {titleExtra && <div className="title-extra">{titleExtra}</div>}
+      </Space>
+    );
+  };
+
+  return (
+    <Panel
+      {...props}
+      header={renderHeader()}
+      className="bs-collapse-header-wrap"
+      showArrow={showArrow}
+    >
+      {props.children}
+    </Panel>
+  );
+};
+
+export default ExtendedPanel;

package/src/components/Common/ExtendedCollapse/index.less

@@ -0,0 +1,33 @@
+.bs-collapse-wrap {
+  border-radius: 4px;
+  overflow: hidden;
+  .bs-collapse-header-wrap {
+    background: #fff;
+  }
+  .bs-collapse-icon {
+    color: #b6b6b6;
+    transition: transform 0.3s;
+  }
+  .bs-guidewrap-icon-toogle {
+    transform: rotate(180deg);
+  }
+  .bs-collapse-header-title {
+    font-weight: 500;
+    font-size: 14px;
+    color: #000000;
+  }
+
+  .bs-collapse-header-divider {
+    width: 3px;
+    height: 20px;
+    background: #02aa4c;
+  }
+}
+
+// 层叠原有antd样式
+.bs-collapse-header-boder {
+  .ant-collapse .ant-collapse-item > .ant-collapse-header {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 8px 16px;
+  }
+}

package/src/components/Common/ExtendedCollapse/index.md

@@ -0,0 +1,136 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 通用
+  order: 1
+title: ExtendedCollapse 详情折叠面板
+order: 1
+---
+
+# 详情折叠面板
+
+可以折叠/展开的内容区域，基于 antd 的 Collapse 封装，封装了自定义样式，支持所有 Collapse 的属性与方法，修改了 Panel 的属性,禁用了自定义icon，支持自定义 header，支持自定义 extra，支持自定义 titleExtra；
+例子中只展示了业务中常用的几种，其他例子可参考 antd 官方示例。
+
+## 何时使用
+
+- 对复杂区域进行分组和隐藏，保持页面的整洁。
+- 手风琴 是一种特殊的折叠面板，只允许单个内容区域展开。
+
+## 代码演示
+
+```tsx
+/**
+ * title: 折叠面板组件
+ * desc: 可以同时展开多个面板，这个例子默认展开了第一个。
+ */
+import React from 'react';
+import { ExtendedCollapse } from '@bit-sun/business-component';
+
+export default () => {
+  const { Board } = ExtendedCollapse;
+
+  return (
+    <ExtendedCollapse defaultActiveKey="1">
+      <Board header="基本信息1" key="1">
+        A dog is a type of domesticated animal. Known for its loyalty and
+        faithfulness, it can be found as a welcome guest in many households
+        across the world.
+      </Board>
+      <Board header="基本信息2" key="2">
+        two dog is a type of domesticated animal. Known for its loyalty and
+        faithfulness, it can be found as a welcome guest in many households
+        across the world.
+      </Board>
+    </ExtendedCollapse>
+  );
+};
+```
+
+```tsx
+/**
+ * title: 手风琴模式
+ * desc: 手风琴，每次只打开一个 tab。
+ */
+import React from 'react';
+import { ExtendedCollapse } from '@bit-sun/business-component';
+
+export default () => {
+  const { Board } = ExtendedCollapse;
+
+  return (
+    <ExtendedCollapse defaultActiveKey="1" accordion>
+      <Board header="基本信息1" key="1" >
+        A dog is a type of domesticated animal. Known for its loyalty and
+        faithfulness, it can be found as a welcome guest in many households
+        across the world.
+      </Board>
+      <Board header="基本信息2" key="2">
+        two dog is a type of domesticated animal. Known for its loyalty and
+        faithfulness, it can be found as a welcome guest in many households
+        across the world.
+      </Board>
+    </ExtendedCollapse>
+  );
+};
+```
+
+```tsx
+/**
+ * title: 拓展头部操作栏
+ * desc: 可以拓展头部操作栏。
+ */
+import React from 'react';
+import { Tag, Space } from 'antd';
+import { ExtendedCollapse } from '@bit-sun/business-component';
+
+export default () => {
+  const { Board } = ExtendedCollapse;
+
+  const renderExtra = () => (<a href="#">More</a>);
+
+  const renderTag = () => (<Space direction="horizontal" align="center"><Tag color="blue">blue</Tag><Tag color="red">red</Tag></Space>);
+
+  return (
+    <ExtendedCollapse defaultActiveKey="1" bordered={false}>
+      <Board header="基本信息1" key="1" extra={renderExtra()} titleExtra={renderTag()} >
+        A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
+      </Board>
+      <Board header="基本信息2" key="2">
+        two dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
+      </Board>
+    </ExtendedCollapse>
+  );
+};
+```
+
+## API
+
+### Collapse
+
+| 参数                 | 说明                                     | 类型                                          | 默认值                                 | 版本  | 备注 |
+| -------------------- | ---------------------------------------- | --------------------------------------------- | -------------------------------------- | ----- | ---- |
+| accordion            | 手风琴模式                               | boolean                                       | false                                  |       |
+| activeKey            | 当前激活 tab 面板的 key                  | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 |       |
+| bordered             | 带边框风格的折叠面板                     | boolean                                       | true                                   |       |
+| collapsible          | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled`                        | -                                      | 4.9.0 |
+| defaultActiveKey     | 初始化选中面板的 key                     | string\[] \| string<br/> number\[] \| number  | -                                      |       |
+| destroyInactivePanel | 销毁折叠隐藏的面板                       | boolean                                       | false                                  |       |
+| expandIcon           | 自定义切换图标                           | (panelProps) => ReactNode                     | -                                      |       |
+| expandIconPosition   | 设置图标位置                             | `left` \| `right`                             | -                                      |       |
+| ghost                | 使折叠面板透明且无边框                   | boolean                                       | false                                  | 4.4.0 |
+| onChange             | 切换面板的回调                           | function                                      | -                                      |       |
+
+### Collapse.Board
+
+| 参数                                        | 说明                           | 类型                   | 默认值 | 版本  | 备注 |
+| ------------------------------------------- | ------------------------------ | ---------------------- | ------ | ----- | ---- |
+| <span style="color: red;">titleExtra</span> | 标题后的自定义内容             | ReactNode              | -      |       | 新增 |
+| extra                                       | 自定义渲染每个面板右上角的内容 | ReactNode              | -      |       |
+| collapsible                                 | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | -      | 4.9.0 |
+| forceRender                                 | 被隐藏时是否渲染 DOM 结构      | boolean                | false  |       |
+| header                                      | 面板头内容                     | ReactNode              | -      |       |
+| key                                         | 对应 activeKey                 | string \| number       | -      |       |
+| showArrow                                   | 是否展示当前面板上的箭头       | boolean                | true   |       |

package/src/components/Common/ExtendedCollapse/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Collapse } from 'antd';
+import { CollapseProps } from 'antd';
+import classNames from 'classnames';
+import ExtendedPanel from './ExtendedPanel';
+import './index.less';
+
+const ExtendedCollapse: React.FC<CollapseProps> = (props) => {
+  const { children, bordered, ...restProps } = props;
+
+  return (
+    <div
+      className={classNames({
+        'bs-collapse-wrap': true,
+        'bs-collapse-header-boder': !bordered, // 无边框模式的时候默认添加头部底部边框
+      })}
+    >
+      <Collapse {...restProps} bordered={bordered}>
+        {children}
+      </Collapse>
+    </div>
+  );
+};
+
+export default Object.assign(ExtendedCollapse, { Board: ExtendedPanel });

package/src/components/Common/Section/index.md

@@ -0,0 +1,120 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 通用
+  order: 1
+title: Section 段落排版
+order: 2
+---
+
+# 段落排版
+
+用户展示详情页面中的段落样式，基于 antd 的 Paragraph 封装，封装了自定义样式，增加了自定义图标，空数据适配等功能
+
+## 何时使用
+
+- 详情页面展示态。
+
+## 代码演示
+
+```tsx
+/**
+ * title: 基本使用
+ * desc: 开启复制功能
+ */
+import React from 'react';
+import { Section } from '@bit-sun/business-component';
+
+export default () => {
+  const mock = {
+    label: '订单号：',
+    value: 'RO24081500000031',
+    copyable: true,
+  };
+
+  return <Section {...mock}>{mock.value}</Section>;
+};
+```
+
+```tsx
+/**
+ * title: 带图标功能
+ * desc: 添加内容图标
+ */
+import React from 'react';
+import { PieChartOutlined } from '@ant-design/icons';
+import { Section } from '@bit-sun/business-component';
+
+export default () => {
+  const mock = {
+    label: '订单号：',
+    value: 'RO24081500000031',
+    copyable: true,
+    icon: <PieChartOutlined />,
+  };
+
+  return <Section {...mock}>{mock.value}</Section>;
+};
+```
+
+```tsx
+/**
+ * title: 溢出隐藏
+ * desc: 内容超出隐藏支持自定义展开样式
+ */
+import React from 'react';
+import { PieChartOutlined } from '@ant-design/icons';
+import { Section } from '@bit-sun/business-component';
+
+export default () => {
+  const mock = {
+    label: '订单号：',
+    value:
+      '三国（220年－280年）是中国历史上位于汉朝之后，晋朝之前的一段历史时期。这一个时期，先后出现了曹魏、蜀汉、东吴三个主要政权。190年，汉朝的中央集权制度崩溃，军阀四起，天下大乱。208年发生赤壁之战，曹操被孙刘联军击败，奠定了三国鼎立的雏型。220年，汉朝丞相曹丕迫使汉献帝禅让帝位，定都洛阳，国号“魏”，史称曹魏，标志着汉朝时代的正式结束。221年刘备称帝，定都成都，史称蜀汉。229年孙权称帝，定都建邺，国号“吴”，史称东吴',
+    ellipsis: { rows: 2, expandable: false, tooltip: true, suffix: ' ' },
+  };
+
+  return <Section {...mock}>{mock.value}</Section>;
+};
+```
+
+## API
+
+| 参数     | 说明                                                                         | 类型                             | 默认值 | 备注 |
+| -------- | ---------------------------------------------------------------------------- | -------------------------------- | ------ | ---- |
+| label    | 标题内容                                                                     | React.ReactNode\| string         | false  |
+| copyable | 是否可拷贝，为对象时可进行各种自定义，开启拷贝功能需要保证内容为 string 类型 | boolean \| [copyable](#copyable) | false  |
+| icon     | 内容图标                                                                     | string \| React.ReactNode        | 无     |
+| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等                 | boolean\| [ellipsis](#ellipsis)  | false  |
+
+### copyable
+
+<a name="copyable"></a>
+
+```js
+{
+  text: string,
+  onCopy: function(event),
+  icon: ReactNode,
+  tooltips: false | [ReactNode, ReactNode],
+  format: 'text/plain' | 'text/html',
+}
+```
+
+### ellipsis
+
+<a name="ellipsis"></a>
+
+```js
+{
+  rows: number,
+  expandable: boolean,
+  suffix: string,
+  symbol: ReactNode,
+  tooltip: boolean | ReactNode | TooltipProps,
+  onExpand: function(event),
+  onEllipsis: function(ellipsis),
+}
+```

package/src/components/Common/Section/index.module.less

@@ -0,0 +1,16 @@
+.paragraphCopyWrapper {
+  display: flex;
+  margin-bottom: 4px;
+  .paragraphCopyLabel {
+    color: #8c8e91;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  .paragraphCopy {
+    min-width: 100px;
+    margin-bottom: 0;
+    font-size: 12px;
+    flex: 1;
+  }
+}

package/src/components/Common/Section/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+import { Typography } from 'antd';
+import type { TooltipProps } from 'antd';
+import styles from './index.module.less';
+
+
+export interface copyableProps {
+  text: string,
+  onCopy: (event: any) => void;
+  icon: React.ReactNode,
+  tooltips: false | [React.ReactNode, React.ReactNode],
+  format: 'text/plain' | 'text/html',
+}
+
+export interface ellipsisProps {
+  rows: number,
+  expandable: boolean,
+  suffix?: string,
+  symbol?: React.ReactNode,
+  tooltip?: boolean | React.ReactNode | TooltipProps,
+  onExpand?: (event: React.MouseEvent<HTMLElement>) => void,
+  onEllipsis?: (ellipsis: boolean) => void,
+}
+
+interface IProps{
+  label: React.ReactNode | string;
+  children: React.ReactNode | string;
+  copyable?: boolean | copyableProps; // 启用复制功能的时候需要保证value为字符串
+  icon?: string | React.ReactNode;
+  ellipsis?: ellipsisProps;
+}
+
+export type SectionProps = PropsWithChildren<IProps>;
+
+const { Paragraph } = Typography;
+const Section = ({ children, copyable, label, icon, ellipsis={ rows: 1, expandable: false, tooltip: true, suffix: '' }, }: SectionProps) => {
+  const copyableProps = {
+    tooltips: ['点击复制', '复制成功'],
+  };
+
+  /**
+   * 渲染icon
+   */
+  const renderIcon = (icon: string | React.ReactNode) => {
+    if (!icon) {
+      return null;
+    }
+    if (typeof icon === 'string') {
+      return <img src={icon} width={12} />;
+    }
+    return <span style={{ paddingRight: '5px', lineHeight: 0, display: 'inline-block', height: '14px' }}>{icon}</span>;
+  };
+
+  return (
+    <div className={styles.paragraphCopyWrapper}>
+      <div className={styles.paragraphCopyLabel}>{label}</div>
+      {renderIcon(icon)}
+      <Paragraph
+        className={styles.paragraphCopy}
+        copyable={copyable ? copyableProps : false}
+        ellipsis={ellipsis}
+      >
+        {children}
+      </Paragraph>
+    </div>
+  );
+};
+
+export default Section;

package/src/index.ts

@@ -39,3 +39,7 @@ export { default as EllipsisTooltip} from './components/Functional/EllipsisToolt
 export * from './components/Functional/BsAntdSula/index';
 export { default as RuleComponent} from './components/Solution/RuleComponent';
 export { default as RuleSetter} from './components/Solution/RuleSetter';
+
+// 通用组件
+export { default as ExtendedCollapse } from './components/Common/ExtendedCollapse';
+export { default as Section } from './components/Common/Section';