@alifd/chat 0.3.0-beta.9 → 0.3.0

package/es/markdown/main.scss

@@ -3,8 +3,6 @@
 $primaryColor: $color-brand1-6;
 $alternativePrimaryColor: $primaryColor;
 $mistPrimaryColor: $color-brand1-1;
-$mediumTextColor: $color-text1-3;
-$subTextColor: $color-text1-2;
 
 @mixin f-single-line() {
     overflow: hidden;
@@ -12,18 +10,20 @@ $subTextColor: $color-text1-2;
     text-overflow: ellipsis;
   }
   
-.box {
-  max-width: 100%;
-}
-
-.box img:only-child, .box video:only-child, .box .image:only-child {
+.#{$prefix}markdown {
+  img:only-child,
+  video:only-child,
+  .image:only-child
+  {
     display: inline-block;
     margin: 0;
     font-size: inherit;
     vertical-align: inherit;
-}
 
-.emoji {
+  }
+
+  max-width: 100%;
+  .emoji {
     width: 1em;
     height: 1em;
     vertical-align: text-top;
@@ -31,124 +31,119 @@ $subTextColor: $color-text1-2;
     pointer-events: none;
   }
 
-.title {
-  font-size: 16px;
-  font-weight: bolder;
-  margin-bottom: 12px;
-}
-
-.text > div {
-  color:$subTextColor;
-}
-
-.reference {
-  margin-top: 6px;
-  font-size: 12px;
-
-  &-tip {
-    display: flex;
-    margin: 0 -16px 6px 0;
-    justify-content: flex-end;
-
-    &-inner {
-      @include f-single-line();
-      background: linear-gradient(to right, transparent, $mistPrimaryColor);
-      padding: 0 16px 0 32px;
-      color: $mediumTextColor;
-      min-width: 0;
-      flex: 0 1 auto;
-      font-size: 12px;
-      line-height: 20px;
+  .title {
+    font-size: 16px;
+    font-weight: bolder;
+    margin-bottom: 12px;
+  }
+
+  .text > div {
+    color:$color-text1-2;
+  }
+
+  .reference {
+    margin-top: 6px;
+    font-size: 12px;
+
+    &-tip {
+      display: flex;
+      margin: 0 -16px 6px 0;
+      justify-content: flex-end;
+
+      &-inner {
+        @include f-single-line();
+        background: linear-gradient(to right, transparent, $mistPrimaryColor);
+        padding: 0 16px 0 32px;
+        color: $color-text1-3;
+        min-width: 0;
+        flex: 0 1 auto;
+        font-size: 12px;
+        line-height: 20px;
+      }
     }
   }
-}
-
-.trustworthyRiskAlert {
-  font-size: 12px;
-  line-height: 18px;
-  color: $subTextColor;
-  margin-bottom: 8px;
-}
-.code-block-header {
-    display: flex;
-    height:24px;
-    // margin-top: 8px;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #EAECED;
-    padding: 5px 10px;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom: 1px solid #ddd;
+
+  .trustworthyRiskAlert {
+    font-size: 12px;
+    line-height: 18px;
+    color: $color-text1-2;
+    margin-bottom: 8px;
   }
-  
+  .code-block-header {
+      display: flex;
+      height:24px;
+      // margin-top: 8px;
+      justify-content: space-between;
+      align-items: center;
+      background-color: $color-fill1-2;
+      padding: 5px 10px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom: 1px solid $color-line1-2;
+  }
+    
   .code-block-language {
     font-weight: bold;
   }
-  
+    
   .code-block-copy {
-    color: var(--common_level3_base_color);
+    color: $color-text1-2;
+    background-color: transparent;
     border: none;
     border-radius: 4px;
     height: 20px;
     cursor: pointer;
+    font-size: 12px;
   }
-  
+
   pre {
-    background-color: #f8f8f8;
+    background-color: $color-fill1-2;
     border-bottom-left-radius: 14px;
     border-bottom-right-radius: 14px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0px;
     padding: 10px;
     margin-bottom: 10px;
   }
 
   .code-block-copy:hover {
-    background-color: #d2d2d2;
+    color: $color-line1-4;
   }
-
   //https://done.alibaba-inc.com/dsm/16247/theme/style/font?type=theme&themeid=126576
-:root {
-    --common_hypertitle_text_style__font_size: #{$font-size-display-3};
-    --common_largetitle_text_style__font_size: #{$font-size-display-2};
-
-    --common_h1_text_style__font_size: #{$font-size-headline};
-    --common_h2_text_style__font_size: #{$font-size-title};
-    --common_h3_text_style__font_size: 18px;
-    --common_h4_text_style__font_size: #{$font-size-subhead};
-    --common_h5_text_style__font_size: 15px;
-    --common_body_text_style__font_size: #{$font-size-body-2};
-    --common_footnote_text_style__font_size: #{$font-size-body-1};
-
-    // --common_h1_text_style__font_size: #{$s-6;
-    // --common_h2_text_style__font_size: 20px;
-    // --common_h3_text_style__font_size: 18px;
-    // --common_h4_text_style__font_size: 16px;
-    // --common_h5_text_style__font_size: 15px;
-    // --common_body_text_style__font_size: 14px;
-    // --common_footnote_text_style__font_size: 12px;
-
-    --common_yellow1_color: #{$color-data1-6}; // #F4C800
-    --common_orange1_color: #{$color-data1-5}; // #FF9200
-    --common_red1_color: #{$color-data1-4}; // #FF5219
-    --common_pink1_color: #da5388; // 
-    --common_purple1_color: #{$color-data1-3}; // #B963D3
-    --common_blue1_color:  #{$color-data1-2}; // #007FFF
-
-    --common_water1_color: #{$color-data1-8}; //浅蓝 #5AC8FA 
-    --common_olive1_color: #77912b; // #6F9200 通用草绿色
-    --common_green1_color: #4fae51; // #00B042 通用绿色
-
-    --common_level1_base_color: #{$color-text1-4};
-    --common_level2_base_color: #{$color-text1-3};
-    --common_level3_base_color: #{$color-text1-2};
-    --common_level4_base_color: #{$color-text1-1};
-
-    --common_gray1_color: #{$color-line1-1};
-    --common_gray2_color: #{$color-line1-2};
-    --common_gray3_color: #{$color-line1-3};
-    --common_gray4_color: #{$color-line1-4};
-
-    --common_gray5_color: #{$color-fill1-2};
-    --common_gray6_color: #{$color-fill1-1};
-  }
-  
+
+  // 暂时先把钉卡片用到的主题变量放在markdown组件内部进行覆盖
+  --common_hypertitle_text_style__font_size: #{$font-size-display-3};
+  --common_largetitle_text_style__font_size: #{$font-size-display-2};
+  --common_h1_text_style__font_size: #{$font-size-headline};
+  --common_h2_text_style__font_size: #{$font-size-title};
+  --common_h3_text_style__font_size: 18px;
+  --common_h4_text_style__font_size: #{$font-size-subhead};
+  --common_h5_text_style__font_size: 15px;
+  --common_body_text_style__font_size: #{$font-size-body-2};
+  --common_footnote_text_style__font_size: #{$font-size-body-1};
+
+  --common_yellow1_color: #{$color-data1-6}; // #F4C800
+  --common_orange1_color: #{$color-data1-5}; // #FF9200
+  --common_red1_color: #{$color-data1-4}; // #FF5219
+  // TODO 需要扩充主题
+  --common_pink1_color: #{$color-data1-9};; // 
+  --common_purple1_color: #{$color-data1-3}; // #B963D3
+  --common_blue1_color:  #{$color-data1-2}; // #007FFF
+
+  --common_water1_color: #{$color-data1-8}; //浅蓝 #5AC8FA 
+  --common_olive1_color: #{$color-data1-10}; // #6F9200 通用草绿色
+  --common_green1_color: #{$color-data1-7}; // #00B042 通用绿色
+
+  --common_level1_base_color: #{$color-text1-4};
+  --common_level2_base_color: #{$color-text1-3};
+  --common_level3_base_color: #{$color-text1-2};
+  --common_level4_base_color: #{$color-text1-1};
+
+  --common_gray1_color: #{$color-line1-1};
+  --common_gray2_color: #{$color-line1-2};
+  --common_gray3_color: #{$color-line1-3};
+  --common_gray4_color: #{$color-line1-4};
+
+  --common_gray5_color: #{$color-fill1-2};
+  --common_gray6_color: #{$color-fill1-1};
+}

package/es/person-picker/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/select/style';
+import '@alifd/next/lib/select/style2';
 import './main.scss';

package/es/person-picker/style.js

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/select/style';
+import '@alifd/next/lib/select/style2';
 import './main.scss';

package/es/tab/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tab/style';
+import '@alifd/next/lib/tab/style2';
 import './main.scss';

package/es/tab/style.js

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tab/style';
+import '@alifd/next/lib/tab/style2';
 import './main.scss';

package/es/tag/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tag/style';
+import '@alifd/next/lib/tag/style2';
 import './main.scss';

package/es/tag/style.js

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/tag/style';
+import '@alifd/next/lib/tag/style2';
 import './main.scss';

package/es/time-picker/style.d.ts

@@ -1 +1 @@
-import '@alifd/next/lib/time-picker2/style';
+import '@alifd/next/lib/time-picker2/style2';

package/es/time-picker/style.js

@@ -1 +1 @@
-import '@alifd/next/lib/time-picker2/style';
+import '@alifd/next/lib/time-picker2/style2';

package/lib/button/index.js

@@ -26,7 +26,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
 const Button = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = 'small' } = _a, props = tslib_1.__rest(_a, ["className", "size"]);
-    return (react_1.default.createElement(next_1.Button, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}button`, className), size: size, ref: ref })));
+    return (react_1.default.createElement(next_1.Button, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}button ${size}`, className), size: size, ref: ref })));
 });
 const ButtonWithSub = (0, utils_1.assignSubComponent)(Button, {
     displayName: 'Button',

package/lib/button/main.scss

@@ -1,5 +1,5 @@
 @import "../core/variables.scss";
 
 .#{$prefix}button {
-  
+
 }

package/lib/button/style.d.ts

@@ -1,2 +1,2 @@
-import '@alifd/next/lib/button/style';
+import '@alifd/next/lib/button/style2';
 import './main.scss';

package/lib/button/style.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/button/style");
+require("@alifd/next/lib/button/style2");
 require("./main.scss");

package/lib/core/variables.scss

@@ -7,6 +7,17 @@ $shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
 
 $font-size-display-3: var(--font-size-display-3, 56px) !default;
 $font-size-display-2: var(--font-size-display-2, 48px) !default;
+$s-1: var(---s-1, 4px) !default;
+$s-2: var(---s-2, 8px) !default;
+$s-3: var(---s-3, 12px) !default;
+$s-4: var(---s-4, 16px) !default;
+$s-5: var(---s-5, 20px) !default;
+$s-6: var(---s-6, 24px) !default;
+$s-7: var(---s-7, 28px) !default;
+$s-8: var(---s-8, 32px) !default;
+$s-9: var(---s-9, 36px) !default;
+$s-10: var(---s-10, 40px) !default;
+
 
 $font-size-headline: var(--font-size-headline, 24px) !default;
 $font-size-title: var(--font-size-title, 20px) !default;
@@ -37,24 +48,35 @@ $color-line1-4: var(--color-line1-4, #a0a2ad) !default;
 
 $color-brand1-1: var(--color-brand1-1, #DEE8FF) !default;
 
-$color-fill1-2: var(--color-fill1-2, #f2f3f7) !default;
+$color-fill1-1: var(--color-fill1-1, rgba(3, 11, 53, 0.03)) !default;
+
+$color-fill1-2: var(--color-fill1-2, rgb(242, 243, 247)) !default;
+
+$color-fill1-3: var(--color-fill1-3, rgb(235, 236, 240)) !default;
+
+$color-fill1-4: var(--color-fill1-4, rgb(226, 228, 232)) !default;
+
+$color-data1-1: var(--color-data1-1, #2d9c9c) !default; // ??
+
+$color-data1-2: var(--color-data1-2, #0089ff) !default; // blue
+
+$color-data1-3: var(--color-data1-3, #b963d3) !default; // purple
 
-$color-fill1-1: var(--color-fill1-1, #030b35) !default;
+$color-data1-4: var(--color-data1-4, #ff5219) !default; // red
 
-$color-data1-1: var(--color-data1-1, #DEE8FF) !default; // ??
+$color-data1-5: var(--color-data1-5, #ff9200) !default; // orange
 
-$color-data1-2: var(--color-data1-2, #007FFF) !default; // blue
+$color-data1-6: var(--color-data1-6, #f4c800) !default; // yellow
 
-$color-data1-3: var(--color-data1-3, #B963D3) !default; // purple
+$color-data1-7: var(--color-data1-7, #00b042) !default; // ?
 
-$color-data1-4: var(--color-data1-4, #FF5219) !default; // red
+$color-data1-8: var(--color-data1-8, #5ac8fa) !default; // water
 
-$color-data1-5: var(--color-data1-5, #FF9200) !default; // orange
+$color-data1-9: var(--color-data1-9, #ec4589) !default; // ?
 
-$color-data1-6: var(--color-data1-6, #F4C800) !default; // yellow
+$color-data1-10: var(--color-data1-10, #6f9200) !default; // ?
 
-$color-data1-7: var(--color-data1-7, #77912b) !default; // ?
+$color-link-3: var(--color-link-3, #0056ff) !default; // ?
 
-$color-data1-8: var(--color-data1-8, #4fae51) !default; // water
+$color-bg-1: var(--color-bg-1, #ffffff) !default; // ?
 
-$color-data1-9: var(--color-data1-9, #da5388) !default; // ?

package/lib/date-picker/style.d.ts

@@ -1 +1 @@
-import '@alifd/next/lib/date-picker2/style';
+import '@alifd/next/lib/date-picker2/style2';

package/lib/date-picker/style.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/date-picker2/style");
+require("@alifd/next/lib/date-picker2/style2");

package/lib/drawer/index.js

@@ -16,11 +16,9 @@ const Drawer = (0, react_1.forwardRef)((_a, ref) => {
     var { className, headerStyle, children, footer, footerClassName } = _a, props = tslib_1.__rest(_a, ["className", "headerStyle", "children", "footer", "footerClassName"]);
     // 对齐小蜜现有的底部
     const defaultHeaderStyle = {
-        "border-bottom:": "1px solid var(--40gmM)",
-        "border-top-left-radius": "16px",
-        "border-top-right-radius": "16px",
+        "border-bottom:": "1px solid var(--40gmM)"
     };
-    return (react_1.default.createElement(next_1.Drawer, Object.assign({}, props, { ref: ref, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}drawer`, className) }),
+    return (react_1.default.createElement(next_1.Drawer, Object.assign({}, props, { v2: true, ref: ref, headerStyle: Object.assign(Object.assign({}, defaultHeaderStyle), headerStyle), className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}drawer`, className) }),
         react_1.default.createElement("div", { className: 'draw-content' }, children),
         footer && footer.length && react_1.default.createElement("div", { className: (0, classnames_1.default)('draw-footer', footerClassName) }, footer)));
 });

package/lib/drawer/main.scss

@@ -1,7 +1,9 @@
 @import "../core/variables.scss";
 
 .#{$prefix}drawer {
-  border: none;
+
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
 
   .draw-footer {
     width: calc(100% - 40px);

package/lib/float-button/hooks/useNestleEdge.js

@@ -12,6 +12,7 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
         if (!enable || !dom) {
             return;
         }
+        // 悬浮球的dom的结构
         const rect = dom.getBoundingClientRect();
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = (0, util_1.getScreenSize)();

package/lib/float-button/index.d.ts

@@ -2,6 +2,7 @@ declare const FloatButtonWithSub: import("@alifd/next/types/config-provider/type
     Backtop: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").BacktopProps & import("react").RefAttributes<import("./types").BacktopRef>, "key" | keyof import("./types").BacktopProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").BacktopRef, {}>;
     Drawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
     InnerDrawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
+    AddonAfter: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").AddonAfterProps & import("react").RefAttributes<import("./types").AddonAfterRef>, "key" | keyof import("./types").AddonAfterProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").AddonAfterRef, {}>;
 };
 export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps, FloatButtonDrawerProps, FloatButtonInnerDrawerProps, Edge, Margin, Position, RequiredParts, ScreenRatioPosition, Size, TriggerType, } from './types';
 export default FloatButtonWithSub;

package/lib/float-button/index.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const float_button_1 = tslib_1.__importDefault(require("./view/float-button"));
 const backtop_1 = tslib_1.__importDefault(require("./view/backtop"));
+const addon_after_1 = tslib_1.__importDefault(require("./view/addon-after"));
 const inner_drawer_1 = tslib_1.__importDefault(require("./view/inner-drawer"));
 const drawer_1 = tslib_1.__importDefault(require("./view/drawer"));
 const index_1 = require("../utils/index");
-const FloatButtonWithSub = (0, index_1.assignSubComponent)(float_button_1.default, { Backtop: backtop_1.default, Drawer: drawer_1.default, InnerDrawer: inner_drawer_1.default });
+const FloatButtonWithSub = (0, index_1.assignSubComponent)(float_button_1.default, { Backtop: backtop_1.default, Drawer: drawer_1.default, InnerDrawer: inner_drawer_1.default, AddonAfter: addon_after_1.default });
 exports.default = FloatButtonWithSub;

package/lib/float-button/main.scss

@@ -16,6 +16,29 @@
         }
     }
 
+    &-addon-after {
+        opacity: 1;
+        transition:
+            opacity 0.2s,
+            transform 0.2s;
+        cursor: pointer;
+        &--show-with-hover {
+            opacity: 0;
+        }
+    }
+
+    &:hover {
+        .ct-float-button-addon-after--show-with-hover{
+            opacity: 1;
+        }
+        &-addon-after {
+            &--show-with-hover {
+                opacity: 1;
+            }
+        }
+
+    }
+
     &-inner-drawer {
         flex: 1;
         overflow: hidden;

package/lib/float-button/style.d.ts

@@ -1,3 +1,3 @@
-import '@alifd/next/lib/balloon/style';
-import '@alifd/next/lib/drawer/style';
+import '@alifd/next/lib/balloon/style2';
+import '@alifd/next/lib/drawer/style2';
 import './main.scss';

package/lib/float-button/style.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@alifd/next/lib/balloon/style");
-require("@alifd/next/lib/drawer/style");
+require("@alifd/next/lib/balloon/style2");
+require("@alifd/next/lib/drawer/style2");
 require("./main.scss");

package/lib/float-button/types.d.ts

@@ -257,3 +257,26 @@ export interface FloatButtonDrawerProps extends FloatButtonProps {
     beforeClose?: () => void;
     afterClose?: () => void;
 }
+/**
+ * 底部额外区域 ref 对象
+ * @api
+ * @order 4
+ */
+export interface AddonAfterRef {
+}
+/**
+ * 底部额外区域
+ * @api FloatButton.AddonAfter
+ *  @order 3
+ */
+export interface AddonAfterProps extends CommonProps {
+    /**
+     * 内容
+     */
+    children: React.ReactNode;
+    /**
+     * 是否hover trigger 元素才出现
+     * @defaultValue 10
+     */
+    showWithHover?: boolean;
+}

package/lib/float-button/util.js

@@ -10,6 +10,7 @@ function getScreenSize() {
         height: document.documentElement.clientHeight,
     };
 }
+// 返回距离最近的边：top, right, left, bottom
 function getNearlyEdge(el, interactiveEdges, rect = el.getBoundingClientRect()) {
     if (!(interactiveEdges === null || interactiveEdges === void 0 ? void 0 : interactiveEdges.length)) {
         return [];
@@ -51,6 +52,7 @@ function isInScreen(dom) {
     const bottom = height - rect.top - rect.height;
     return [left, top, right, bottom].every(n => n >= 0);
 }
+// 返回当前位置在安全区域内的安全位置
 function adjustBySafeAreaMargin(position, rect, safeAreaMargin) {
     if (!position || !rect || !safeAreaMargin) {
         return undefined;

package/lib/float-button/view/addon-after.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AddonAfterRef, AddonAfterProps } from '../types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<AddonAfterProps & React.RefAttributes<AddonAfterRef>, "key" | keyof AddonAfterProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, AddonAfterRef, {}>;
+export default _default;

package/lib/float-button/view/addon-after.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../../utils");
+const AddonAfter = (0, react_1.forwardRef)(({ showWithHover = false, children }, ref) => {
+    // 页面没滚动的时候默认隐藏，如果要显示会由onScroll触发
+    const cls = `${utils_1.PREFIX_DEFAULT}float-button-addon-after`;
+    return (react_1.default.createElement("button", { className: (0, classnames_1.default)(cls, { [`${cls}--show-with-hover`]: showWithHover }) }, children));
+});
+exports.default = next_1.ConfigProvider.config(AddonAfter);

package/lib/float-button/view/backtop.js

@@ -15,7 +15,8 @@ function getScroller(scroller) {
     return scroller;
 }
 const Backtop = (0, react_1.forwardRef)(({ autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
-    const [visible, setVisible] = (0, react_1.useState)(true);
+    // 页面没滚动的时候默认隐藏，如果要显示会由onScroll触发
+    const [visible, setVisible] = (0, react_1.useState)(false);
     const cls = `${utils_1.PREFIX_DEFAULT}float-button-backtop`;
     const visibleRef = (0, react_1.useRef)(visible);
     visibleRef.current = visible;
@@ -58,6 +59,7 @@ const Backtop = (0, react_1.forwardRef)(({ autoHide = true, scroller, offset = 1
         if (!target) {
             return;
         }
+        // 滚动时候的显隐控制
         const onScroll = (0, utils_1.debounce)(() => {
             if (isAtTop(target)) {
                 visibleRef.current && setVisible(false);

package/lib/html-render/index.js

@@ -128,7 +128,7 @@ const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, childr
     const element = (0, react_1.useMemo)(() => {
         return (0, html_react_parser_1.default)((0, sanitize_html_1.default)(children || '', sanitizeHtmlOptions), parserOptions);
     }, [children]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('box', className, {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}html`, className, {
             'loose': loose,
         }) }, imagePreview ?
         react_1.default.createElement(react_photo_view_1.PhotoProvider, null, element)