fix: amis-ui Multiline Text 组件css提取 (#5607)

Co-authored-by: jinye <jinye@baidu.com>

packages/amis-ui/scss/components/_multiline-text.scss

@@ -0,0 +1,20 @@
+.#{$ns}MultilineText {
+  position: relative;
+  &-counter,
+  &-display {
+    white-space: pre-line;
+    overflow: hidden;
+  }
+
+  &-counter {
+    visibility: hidden;
+    position: absolute;
+    width: 100%;
+    z-index: -99;
+  }
+
+  &-button-wrapper {
+    margin-top: --(gap-xs);
+    text-align: right;
+  }
+}

packages/amis-ui/scss/themes/_common.scss

@@ -134,5 +134,6 @@
 @import '../components/barcode';
 @import '../components/tag';
 @import '../components/pull-refresh';
+@import '../components/multiline-text';
 
 @import '../components/debug';

packages/amis-ui/src/components/MultilineText.tsx

@@ -113,35 +113,27 @@ export class MultilineText extends React.Component<MultilineTextProps, Multiline
 
     return (
       <div
-        className={cx(
-          'MultilineText',
-          'relative',
-          className
-        )}
+        className={cx('MultilineText', className)}
       >
         {/* 用于计算高度 */}
         <div
           ref={this.ref}
-          className={cx('white-space-pre-line', 'overflow-hidden')}
+          className={cx('MultilineText-counter')}
           style={{
-            height: `${maxRows * 20}px`,
-            visibility: 'hidden',
-            position: 'absolute',
-            width: '100%',
-            zIndex: -99
+            height: `${maxRows * 20}px`
           }}
         >{text}</div>
         {/* 用于展示 */}
         <div
-          className={cx('white-space-pre-line', 'overflow-hidden')}
+          className={cx('MultilineText-display')}
           style={{
             height: (showBtn && !isExpend) ? `${maxRows * 20}px` : 'auto'
           }}
         >{text}</div>
         {showBtn &&
-          <div className="text-right">
+          <div className={cx('MultilineText-button-wrapper')}>
             <Button
-              className="mt-1"
+              className={cx('MultilineText-button')}
               level="link"
               onClick={this.toggleExpend}
             >{!isExpend ? expendButtonText : collapseButtonText}</Button>