Merge branch 'main' into release

content/navigation/pagination/index-en-US.md

@@ -183,7 +183,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 | className          | The CSS class name of the wrapper element                                                                   | string                                          |                     |              |
 | currentPage        | Current page number                                                                                         | number                                          |                     |              |
 | defaultCurrentPage | Default current page number                                                                                 | number                                          |                     |              |
-| hideOnSinglePage   | Whether to hide the page divider automatically when the total number of pages is less than 2                | boolean                                         | false               |              |
+| hideOnSinglePage   | Whether to hide the page divider automatically when the total number of pages is less than 2. When showSizeChanger is true, this switch no longer takes effect                | boolean                                         | false               |              |
 | hoverShowPageSelect  | Whether to show the page select when hover page (only work when size='small')                             | boolean                                         | false               |   1.27.0     |
 | nextText           | Text displayed by the next Page button                                                                      | string\| React Node                             |                     |              |
 | pageSize           | Number of entries per page                                                                                  | number                                          | 10                  |              |

content/navigation/pagination/index.md

@@ -176,7 +176,7 @@ import { Pagination } from '@douyinfe/semi-ui';
 | className          | 类名                                                                              | string                                          |                     |
 | currentPage        | 当前页码                                                                          | number                                          |                     |
 | defaultCurrentPage | 默认的当前页码                                                                    | number                                          |                     |
-| hideOnSinglePage   | 总页数小于 2 时，是否自动隐藏分页器                                               | boolean                                            | false               |
+| hideOnSinglePage   | 总页数小于 2 时，是否自动隐藏分页器，当 showSizeChanger 为true时，此开关不再生效           | boolean                                            | false               |
 | hoverShowPageSelect  | hover 页码时是否展示切换页数的Select控件，仅当 size = 'small'时生效  | boolean             | false               | 1.27.0|
 | nextText           | 下一页文本                                                                        | string\|ReactNode                               |                     |
 | pageSize           | 每页条数                                                                          | number                                          | 10                  |

content/show/dropdown/index-en-US.md

@@ -90,16 +90,7 @@ By configuring `icon` on `Dropdown.Item` (`icon` needs to be ReactNode), you can
 ```jsx live=true
 import React from 'react';
 import { Dropdown, Button } from '@douyinfe/semi-ui';
-import {
-    IconBox,
-    IconSimilarity,
-    IconSetting,
-    IconForward,
-    IconColorPalette,
-    IconRefresh,
-    IconSearch,
-    IconBranch,
-} from '@douyinfe/semi-icons';
+import { IconBox, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
 
 function Demo() {
     return (

content/show/dropdown/index.md

@@ -89,16 +89,7 @@ function Demo() {
 ```jsx live=true
 import React from 'react';
 import { Dropdown, Button } from '@douyinfe/semi-ui';
-import {
-    IconBox,
-    IconSimilarity,
-    IconSetting,
-    IconForward,
-    IconColorPalette,
-    IconRefresh,
-    IconSearch,
-    IconBranch,
-} from '@douyinfe/semi-icons';
+import { IconBox, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
 
 function Demo() {
     return (

content/show/tooltip/index-en-US.md

@@ -16,6 +16,7 @@ brief: Tooltip is used to identify an element or attach a small amount of auxili
 ```jsx import
 import { Tooltip } from '@douyinfe/semi-ui';
 ```
+
 ### Cautions
 
 In order to calculate the positioning, ToolTip needs to obtain the real DOM elements of the children, so the ToolTip type currently supports the following two types of children
@@ -113,6 +114,29 @@ function Demo() {
 }
 ```
 
+### Override Style
+
+Configure specific styles for the pop-up layer through the `className` and `style` API, such as overriding the default maxWidth (280px)
+
+```jsx live=true
+import React from 'react';
+import { Tooltip, Tag } from '@douyinfe/semi-ui';
+
+() => {
+    return (
+        <Tooltip
+            style={{
+                maxWidth: 320,
+            }}
+            className="another-classname"
+            content={'hi semi semi semi semi semi semi semi'}
+        >
+            <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
+        </Tooltip>
+    );
+};
+```
+
 ### Position
 
 Support pop-up layers are displayed in different directions in 12 directions
@@ -353,8 +377,7 @@ function Demo() {
 
 ### Use with Popver or Popconfirm
 
-Tooltip, Popconfirm, and Popover all need to hijack related events of children (onMouseEnter / onMouseLeave / onClick ....) to configure `trigger`.
-If used directly, it will invalidate the outer trigger.  
+Tooltip, Popconfirm, and Popover all need to hijack related events of children (onMouseEnter / onMouseLeave / onClick ....) to configure `trigger`. If used directly, it will invalidate the outer trigger.  
 Need to add a layer of elements (div or span) in the middle to prevent trigger event hijack failure.
 
 ```jsx live=true hideInDSM
@@ -376,30 +399,34 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 
 ---
 
-| Properties          | Instructions                                                                                                                                                                                                                                 | Type                        | Default             | Version    |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ------------------- | ---------- |
-| autoAdjustOverflow  | Whether the floating layer automatically adjusts its direction when it is blocked                                                                                                                                                            | boolean                     | true                |            |
-| arrowPointAtCenter  | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time                                                                                                                    | boolean                     | true                | **0.34.0** |
-| content             | Pop-up layer content                                                                                                                                                                                                                         | string                      | ReactNode           |            |
-| clickToHide         | Whether to automatically close the elastic layer when clicking on the floating layer and any element inside                                                                                                                                  | boolean                     | false               | **0.24.0** |
-| getPopupContainer   | Specifies the parent DOM, and the bullet layer will be rendered to the DOM                                                                                                                                                                   | () => HTMLElement           | () => document.body |
-| mouseEnterDelay     | After the mouse is moved in, the display delay time, in milliseconds (only effective when the trigger is hover/focus)                                                                                                                        | number                      | 50                  |            |
-| mouseLeaveDelay     | The time for the delay to disappear after the mouse is moved out, in milliseconds (only effective when the trigger is hover/focus), and is not less than mouseEnterDelay                                                                     | number                      | 50                  |            |
-| motion              | Whether to show the pop-up motion                                                                                                                                                                                                            | boolean                     | true               |            |
-| position            | Pop-up layer display position, optional value: `top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight`                                                      | string                      | 'top'               |            |
-| prefixCls           | The `className` prefix of the pop-up layer wrapper div. When this item is set, the pop-up layer will no longer have the style of Tooltip.                                                                                                    | string                      | 'semi-tooltip '     |            |
-| rePosKey            | This value can be updated to manually trigger the repositioning of the pop-up layer.                                                                                                                                                         | string                      | number              |            |
-| spacing             | The distance between the pop-up layer and the `children` element                                                                                                                                                                             | number                      |                     |            |
-| showArrow           | Does it show an arrow triangle?                                                                                                                                                                                                              | boolean                     | true                |            |
-| stopPropagation     | Whether to prevent click events on the bomb layer from bubbling                                                                                                                                                                              | boolean                     | false               | **0.34.0** |
+| Properties | Instructions | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| autoAdjustOverflow | Whether the floating layer automatically adjusts its direction when it is blocked | boolean | true |  |
+| arrowPointAtCenter | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time | boolean | true | **0.34.0** |
+| className | Pop-up layer classname | string |  |  |
+| content | Pop-up layer content | string | ReactNode |  |
+| clickToHide | Whether to automatically close the elastic layer when clicking on the floating layer and any element inside | boolean | false | **0.24.0** |
+| getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM | () => HTMLElement | () => document.body |
+| mouseEnterDelay | After the mouse is moved in, the display delay time, in milliseconds (only effective when the trigger is hover/focus) | number | 50 |  |
+| mouseLeaveDelay | The time for the delay to disappear after the mouse is moved out, in milliseconds (only effective when the trigger is hover/focus), and is not less than mouseEnterDelay | number | 50 |  |
+| motion | Whether to show the pop-up motion | boolean | true |  |
+| position | Pop-up layer display position, optional value: `top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight` | string | 'top' |  |
+| prefixCls | The `className` prefix of the pop-up layer wrapper div. When this item is set, the pop-up layer will no longer have the style of Tooltip. | string | 'semi-tooltip ' |  |
+| rePosKey | This value can be updated to manually trigger the repositioning of the pop-up layer. | string | number |  |
+| style | Pop-up layer inline style | object |  |  |
+| spacing | The distance between the pop-up layer and the `children` element | number |  |  |
+| showArrow | Does it show an arrow triangle? | boolean | true |  |
+| stopPropagation | Whether to prevent click events on the bomb layer from bubbling | boolean | false | **0.34.0** |
 | transformFromCenter | Whether to transform from the horizontal or vertical center of the element of the package, this parameter affects only the `tansform-origin 'of the dynamic effect transformation and generally does not need to be changed | boolean | true |
-| trigger             | Timing of triggering display, optional value: `hover`/`focus`/`click`/`custom`                                                                                                                                                               | string                      | 'hover'             |            |
-| visible             | Whether to show the pop-up layer                                                                                                                                                                                                             | boolean                     |                     |            |
+| trigger | Timing of triggering display, optional value: `hover`/`focus`/`click`/`custom` | string | 'hover' |  |
+| visible | Whether to show the pop-up layer | boolean |  |  |
 | wrapperClassName | When children are disabled or children are multiple elements, the outer layer will wrap a layer of span elements, and the api is used to set the style class name of this span | string |  | 1.32.0 |
-| zIndex              | Bullet levels.                                                                                                                                                                                                                               | number                      | 1060                |            |
-| onVisibleChange     | A callback triggered when the pop-up layer is displayed/hidden                                                                                                                                                                               | (isVisble: boolean) => void |                     |            |
-| onClickOutSide      | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)                                                                             | (e:event) => void           |                     | **2.1.0** |
+| zIndex | Bullet levels. | number | 1060 |  |
+| onVisibleChange | A callback triggered when the pop-up layer is displayed/hidden | (isVisble: boolean) => void |  |  |
+| onClickOutSide | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click) | (e:event) => void |  | **2.1.0** |
+
 ## Design Tokens
+
 <DesignToken/>
 
 ## FAQ

content/show/tooltip/index.md

@@ -113,6 +113,28 @@ function Demo() {
 }
 ```
 
+### 覆盖特定样式
+
+你可以通过 className、style 为弹出层配置特定样式，例如覆盖默认的 maxWidth （280px）
+```jsx live=true
+import React from 'react';
+import { Tooltip, Tag } from '@douyinfe/semi-ui';
+
+() => {
+    return (
+        <Tooltip
+            style={{
+                maxWidth: 320
+            }}
+            className='another-classname'
+            content={'hi semi semi semi semi semi semi semi'}
+        >
+            <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
+        </Tooltip>
+    );
+};
+```
+
 ### 位置
 
 支持弹出层在不同方向展示，共有 12 个方向
@@ -415,6 +437,7 @@ function Demo() {
 | autoAdjustOverflow | 弹出层被遮挡时是否自动调整方向 | boolean | true |  |
 | arrowPointAtCenter | “小三角”是否指向元素中心，需要同时传入"showArrow=true" | boolean | true | **0.34.0** |
 | content | 弹出层内容 | string\|ReactNode |  |  |
+| className | 弹出层的样式名 | string |  |  |
 | clickToHide | 点击弹出层及内部任一元素时是否自动关闭弹层 | boolean | false | **0.24.0** |
 | getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` | function():HTMLElement | () => document.body |  |
 | mouseEnterDelay | 鼠标移入后，延迟显示的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效） | number | 50 |  |
@@ -423,6 +446,7 @@ function Demo() {
 | position | 弹出层展示位置，可选值：`top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight` | string | 'top' |  |
 | prefixCls | 弹出层 wrapper div 的 `className` 前缀，设置该项时，弹出层将不再带 Tooltip 的样式 | string | 'semi-tooltip' |  |
 | rePosKey | 可以更新该项值手动触发弹出层的重新定位 | string\|number |  |  |
+| style    | 弹出层的内联样式 | object |  |  |
 | spacing | 弹出层与 `children` 元素的距离，单位 px | number | 8 |  |
 | showArrow | 是否显示箭头三角形 | boolean | true |  |
 | stopPropagation | 是否阻止弹层上的点击事件冒泡 | boolean | false | **0.34.0** |

content/start/update-to-v2/index-en-US.md

@@ -243,7 +243,7 @@ import { IllustrationConstruction } from '@douyinfe/semi-illustrations';
 In 1.x, Semi uses source code publishing. It will not perform precompilation before performing npm publishing. The Scss and jsx/js of the component library will be compiled together with the business code. In 2.0, precompilation was performed before npm publishing. For ordinary users, precompilation can make Semi work out of the box: there is no need for users to compile Semi source files, and there is no need to introduce Semi plug-ins when using them. Since the compiled results are under lib/es, the reference path of the interface and language package has changed, but for component references, you do not need to change the original reference path (because package.json main attribute points to lib/es/index.js).
 
 ### The project wants to upgrade to 2.0, but the Semi material is used in the project. The material is based on 1.x Semi. Can it be used at the same time?
-Since Semi 2.0 does not have the same package name as 1.x, they will actually be two separate packages that do not affect each other.
+No, the css class name of semi2.x is the same as that of semi1.x, and using it at the same time will cause style conflicts. If you encounter similar problems, please initiate an oncall in the Feishu group, and there will be a dedicated person to deal with it.
 
 ### Why do CSS variables add semi prefixes?
 Due to the increasing number of business micro front-end application scenarios, in order to avoid naming conflicts with other library CSS variables and avoid the problem of mutual influence of styles.

content/start/update-to-v2/index.md

@@ -256,7 +256,7 @@ import { IllustrationConstruction } from '@douyinfe/semi-illustrations';
 
 ### 项目希望升级至 2.0，但项目中使用了 Semi 物料，物料基于 1.x Semi，是否可同时使用？
 
-由于 Semi 2.0 的包名与 1.x 并不相同，所以实际上他们会成了两个单独的包，互不影响。
+不可以，semi2.x的css类名与semi1.x的相同，同时使用会导致样式冲突。如遇到类似问题，请在飞书群里发起oncall，会有专人对接处理。
 
 ### CSS 变量添加 semi 前缀的原因？
 

packages/semi-foundation/timeline/timeline.scss

@@ -120,7 +120,11 @@ $module: #{$prefix}-timeline;
             &-head-custom {
                 left: $spacing-timeline_item_head_custom-left;
             }
-
+            &-head{
+                &.#{$module}-item-head-custom{
+                    margin-left: 0;
+                }
+            }
             &-head {
                 margin-left: $spacing-timeline_item_head-marginLeft;
             }

packages/semi-ui/pagination/_story/pagination.stories.js

@@ -146,3 +146,14 @@ export const PaginationDynamicUpdatePageSize = () => <DynamicPageSize />;
 PaginationDynamicUpdatePageSize.story = {
   name: 'Pagination dynamic update pageSize',
 };
+
+
+export const HideOnSingePageAndShowChanger = () => {
+  return (
+    <Pagination total={10} hideOnSinglePage showSizeChanger style={{ marginBottom: 12 }}></Pagination>
+  )
+}
+
+HideOnSingePageAndShowChanger.story = {
+  name: 'hideOnSingelePage & showSizeChanger at same time',
+};

packages/semi-ui/pagination/index.tsx

@@ -14,6 +14,7 @@ import { cssClasses, numbers } from '@douyinfe/semi-foundation/pagination/consta
 import '@douyinfe/semi-foundation/pagination/pagination.scss';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+import warning from '@douyinfe/semi-foundation/utils/warning';
 
 import ConfigContext from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
@@ -127,6 +128,10 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         this.foundation = new PaginationFoundation(this.adapter);
         this.renderDefaultPage = this.renderDefaultPage.bind(this);
         this.renderSmallPage = this.renderSmallPage.bind(this);
+        warning(
+            Boolean(props.showSizeChanger && props.hideOnSinglePage),
+            '[Semi Pagination] You should not use showSizeChanger and hideOnSinglePage in ths same time. At this time, hideOnSinglePage no longer takes effect, otherwise there may be a problem that the switch entry disappears'
+        );
     }
 
     get adapter(): PaginationAdapter<PaginationProps, PaginationState> {
@@ -377,11 +382,11 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
     }
 
     renderSmallPage(locale: PaginationLocale) {
-        const { className, style, hideOnSinglePage, hoverShowPageSelect } = this.props;
+        const { className, style, hideOnSinglePage, hoverShowPageSelect, showSizeChanger } = this.props;
         const paginationCls = classNames(`${prefixCls}-small`, prefixCls, className);
         const { currentPage, total, pageSize } = this.state;
         const totalPageNum = Math.ceil(total / pageSize);
-        if (totalPageNum < 2 && hideOnSinglePage) {
+        if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
 
@@ -410,11 +415,11 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
 
     renderDefaultPage(locale: PaginationLocale) {
         const { total, pageSize } = this.state;
-        const { showTotal, className, style, hideOnSinglePage } = this.props;
+        const { showTotal, className, style, hideOnSinglePage, showSizeChanger } = this.props;
         const paginationCls = classNames(className, `${prefixCls}`);
         const showTotalCls = `${prefixCls }-total`;
         const totalPageNum = Math.ceil(total / pageSize);
-        if (totalPageNum < 2 && hideOnSinglePage) {
+        if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
         return (

packages/semi-ui/timeline/_story/timeline.stories.js

@@ -81,8 +81,21 @@ export const Mode = () => (
       }}
     >
       <Timeline mode="alternate">
-        <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
-        <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>技术测试异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>网络异常正在修复</Timeline.Item>
+      </Timeline>
+    </div>
+    <br />
+    <div
+      style={{
+        width: '300px',
+      }}
+    >
+      <Timeline mode="right">
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
       </Timeline>
@@ -93,9 +106,9 @@ export const Mode = () => (
         width: '300px',
       }}
     >
-      <Timeline mode="right">
-        <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
-        <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
+      <Timeline mode="left">
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>创建服务现场</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
       </Timeline>
@@ -108,7 +121,7 @@ export const Mode = () => (
     >
       <Timeline mode="center">
         <Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
-        <Timeline.Item time="2015-09-01">初步排除网络异常</Timeline.Item>
+        <Timeline.Item time="2015-09-01" dot={<IconAlertTriangle />}>初步排除网络异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">技术测试异常</Timeline.Item>
         <Timeline.Item time="2015-09-01">网络异常正在修复</Timeline.Item>
       </Timeline>
@@ -152,6 +165,7 @@ const data = [
     time: '2019-05-09 09:12',
     extra: '节点辅助说明信息',
     content: '网络异常正在修复',
+    dot: <IconAlertTriangle />,
     type: 'success',
   },
 ];

packages/semi-ui/tooltip/_story/tooltip.stories.js

@@ -652,7 +652,7 @@ export const ShowArrow = () => {
     return (
       <div>
         <h4>should show content and arrow when click</h4>
-        <Tooltip showArrow trigger="click" content={'hi bytedance'}>
+        <Tooltip style={{ maxWidth: 320 }} showArrow trigger='custom' visible content={'hi semi semi semi semi semi semi semi'} position='right'>
           <Test />
         </Tooltip>
       </div>

src/components/Footer/footer.scss

@@ -114,11 +114,11 @@ body[theme-mode='dark'] {
     .image45 {
         width: 20px;
         height: 20px;
-        margin: 0px 8px 0px 0px;
+        margin: 0px 4px 0px 0px;
     }
 
     .beianText{
-        min-width: 175px;
+        margin-right: 8px;
         font-size: 14px;
         font-family: Inter;
         color: #d9dbe1ff;

src/components/Footer/index.jsx

@@ -18,7 +18,7 @@ export class Footer extends Component {
                     <a href="https://github.com/DouyinFE/semi-design" className='github' target="_blank" rel="noreferrer">GitHub</a>
                 </div><img src="https://lf9-static.semi.design/obj/semi-tos/images/a577c310-324e-11ec-8b14-8fb159794ae4.svg" className='divider' />
                 <div className='autoWrapper'>
-                    <div className='icpWrapper'><p className={'a2021SemiDesignAllRi'}>© 2021 Semi Design. All rights reserved.</p><a href="https://beian.miit.gov.cn/" target="_blank" className={'beianText'} rel="noreferrer">京ICP备19058139号-13</a></div>
+                    <div className='icpWrapper'><p className={'a2021SemiDesignAllRi'}>© 2021 Semi Design. All rights reserved.</p><a href="https://beian.miit.gov.cn/" target="_blank" className={'beianText'} rel="noreferrer">京ICP备19058139号-13</a><img src="https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/beian.png" className={'image45'} /><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002016131" target="_blank" className={'beianText'} rel="noreferrer">浙公网安备 33011002016131号</a></div>
                     <p className='designedDevelopedWit'><span className='designedDevelopedWit_c0c5d39b'>Designed & Developed with love by </span><span className='designedDevelopedWit_6eaa79ba'>Douyin FE</span><span className='designedDevelopedWit_c0c5d39b'> & </span><a href="https://dribbble.com/MetaEnterpriseDesign" className='designedDevelopedWit_6eaa79ba'>MED</a></p>
                 </div>
             </div>

src/templates/toUEDUtils/toUED.ts

@@ -4,7 +4,7 @@ const getSite=()=>{
     const currentUrlSplit=window.location.pathname.split('/').filter(s=>s);
     const site=currentUrlSplit[0]==='design'?'design':'main';
     return site;
-}
+};
 
 
 
@@ -12,12 +12,12 @@ const getAnotherSideUrl=(site:'design'|'main')=>{
     const currentUrlSplit=window.location.pathname.split('/').filter(s=>s);
     const url=currentUrlSplit.slice(currentUrlSplit.length-2);
     const locale=/zh-CN/.test(window.location.pathname)?'zh-CN':'en-US';
-    if(site==='main'){
+    if (site==='main'){
         return `${window.location.origin}/${locale}/${url[0]}/${url[1]}`;
-    }else{
+    } else {
         return `${window.location.origin}/design/${locale}/${url[0]}/${url[1]}`;
     }
-}
+};
 
 
 const cache={scrollHeight:null};
@@ -25,24 +25,24 @@ const cache={scrollHeight:null};
 const transContent=(site:'main'|'design')=>{
     const url=`${getAnotherSideUrl('design')}?concisemode=true`;
     const mainSiteContentDOM= document.querySelector('.main-article') as HTMLDivElement;
-    if(site==='design'){
+    if (site==='design'){
         mainSiteContentDOM.style['display']='none';
         let iframeContainer=document.querySelector('#iframeContainer') as HTMLDivElement;
-        if(iframeContainer){
+        if (iframeContainer){
             iframeContainer.style['display']='block';
             iframeContainer.style['margin-bottom']='120px';
             const iframeDOM=iframeContainer.querySelector('iframe');
-            if(iframeDOM.getAttribute('src')!==url){
+            if (iframeDOM.getAttribute('src')!==url){
                 iframeDOM.setAttribute('src',url);
             }
-            if(cache.scrollHeight){
+            if (cache.scrollHeight){
                 iframeContainer.style['height']=cache['scrollHeight'];
                 iframeDOM.style['height']=cache['scrollHeight'];
             }
-        }else{
+        } else {
             iframeContainer=document.createElement('div') as HTMLDivElement;
             iframeContainer.setAttribute('class','iframeContainer');
-            iframeContainer.setAttribute('id','iframeContainer')
+            iframeContainer.setAttribute('id','iframeContainer');
             const iframeDOM=document.createElement('iframe');
             iframeDOM.setAttribute('src',url);
             iframeDOM.setAttribute('scrolling','no');
@@ -50,13 +50,13 @@ const transContent=(site:'main'|'design')=>{
                 console.log('message',e.data);
                 try {
                     const data=JSON.parse(e.data);
-                    if(data['scrollHeight']){
+                    if (data['scrollHeight']){
                         iframeDOM.style['height']=`${data['scrollHeight']}px`;
                         iframeContainer.style['height']=`${data['scrollHeight']}px`;
                         console.log('height===>',data['scrollHeight']);
                         cache['scrollHeight']=`${data['scrollHeight']}px`;
                     }
-                }catch (e){
+                } catch (e){
                     console.log('getMessage ====>',e);
                 }
             });
@@ -68,38 +68,38 @@ const transContent=(site:'main'|'design')=>{
 
 
 
-    } else{
+    } else {
         mainSiteContentDOM.style['display']='block';
         const iframeContainer=document.querySelector('#iframeContainer') as HTMLDivElement;
         iframeContainer.style['display']='none';
     }
-}
+};
 
 const isHaveUedDocs=(pathName:string)=>{
 
-    if(pathName){
+    if (pathName){
         const urlSplitArray=pathName.split('/').filter(v=>v);
         const componentName=urlSplitArray[urlSplitArray.length-1];
         return haveUedDocComponents.includes(componentName);
     }
     return false;
-}
+};
 
 const isJumpToDesignSite=(pathName:string)=>{
-    const components=['toast','notification','popconfirm','scrolllist','popover','select','dropdown'];
-    if(pathName){
+    const components=['toast','popconfirm','scrolllist','popover','select','dropdown'];
+    if (pathName){
         const urlSplitArray=pathName.split('/').filter(v=>v);
         const componentName=urlSplitArray[urlSplitArray.length-1];
         return components.includes(componentName);
     }
     return false;
-}
+};
 
 export {
     isHaveUedDocs,
     isJumpToDesignSite,
     getAnotherSideUrl
-}
+};
 
 export default transContent;