@douyinfe/semi-foundation 2.89.0-beta.0 → 2.89.1

package/aiChatDialogue/foundation.ts

@@ -3,6 +3,9 @@ import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 import { getUuidv4 } from "../utils/uuid";
 import { strings } from "./constants";
 import { Animation } from '@douyinfe/semi-animation';
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 
 export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getContainerRef: () => HTMLDivElement;

package/aiChatInput/foundation.ts

@@ -276,36 +276,39 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
         return validRichText || validAttachment;
     }
 
+    handleStopGenerate = () => {
+        const { generating } = this.getProps();
+        generating && this._adapter.notifyStopGenerate();
+    }
+
     handleSend = () => {
         const { generating, transformer } = this.getProps();
         if (generating) {
-            this._adapter.notifyStopGenerate();
             return;
-        } else {
-            if (!this.canSend()) {
-                return;
-            }
-            const references = this.getProp('references');
-            const { attachments } = this.getStates();
-            const editor = this._adapter.getEditor();
-            let richTextResult = [];
-            if (editor) {
-                const json = editor.getJSON?.();
-                richTextResult = transformJSONResult(json, transformer);
-            }
-            // close popup layer for template/skill/suggestion
-            this.setState({
-                templateVisible: false,
-                skillVisible: false,
-                suggestionVisible: false,
-            });
-            this._adapter.notifyMessageSend({
-                references,
-                attachments,
-                inputContents: richTextResult,
-                setup: this._adapter.getConfigureValue() ?? {}
-            });
         }
+        if (!this.canSend()) {
+            return;
+        }
+        const references = this.getProp('references');
+        const { attachments } = this.getStates();
+        const editor = this._adapter.getEditor();
+        let richTextResult = [];
+        if (editor) {
+            const json = editor.getJSON?.();
+            richTextResult = transformJSONResult(json, transformer);
+        }
+        // close popup layer for template/skill/suggestion
+        this.setState({
+            templateVisible: false,
+            skillVisible: false,
+            suggestionVisible: false,
+        });
+        this._adapter.notifyMessageSend({
+            references,
+            attachments,
+            inputContents: richTextResult,
+            setup: this._adapter.getConfigureValue() ?? {}
+        });
     }
 
     handleContainerMouseDown = (e: React.MouseEvent) => {

package/chat/foundation.ts

@@ -4,6 +4,10 @@ import { Animation } from '@douyinfe/semi-animation';
 import { debounce } from "lodash";
 import { getUuidv4 } from "../utils/uuid";
 import { handlePrevent } from "../utils/a11y";
+// code's default height type is html/js/css, add jsx & tsx;
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 
 const { PIC_PREFIX, PIC_SUFFIX_ARRAY, ROLE,
     SCROLL_ANIMATION_TIME, SHOW_SCROLL_GAP

package/lib/cjs/aiChatDialogue/foundation.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getContainerRef: () => HTMLDivElement;
     setWheelScroll: (flag: boolean) => void;

package/lib/cjs/aiChatDialogue/foundation.js

@@ -9,6 +9,9 @@ var _foundation = _interopRequireDefault(require("../base/foundation"));
 var _uuid = require("../utils/uuid");
 var _constants = require("./constants");
 var _semiAnimation = require("@douyinfe/semi-animation");
+require("prismjs");
+require("prismjs/components/prism-jsx.js");
+require("prismjs/components/prism-tsx.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class DialogueFoundation extends _foundation.default {
   constructor(adapter) {

package/lib/cjs/aiChatInput/foundation.d.ts

@@ -51,6 +51,7 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
     onUploadChange: (props: any) => void;
     _isRichTextEmpty: () => boolean;
     canSend: () => any;
+    handleStopGenerate: () => void;
     handleSend: () => void;
     handleContainerMouseDown: (e: React.MouseEvent) => void;
     handleContainerClick: (e: React.MouseEvent) => void;

package/lib/cjs/aiChatInput/foundation.js

@@ -256,6 +256,12 @@ class AIChatInputFoundation extends _foundation.default {
       const validAttachment = Array.isArray(attachments) && attachments.length > 0;
       return validRichText || validAttachment;
     };
+    this.handleStopGenerate = () => {
+      const {
+        generating
+      } = this.getProps();
+      generating && this._adapter.notifyStopGenerate();
+    };
     this.handleSend = () => {
       var _a, _b;
       const {
@@ -263,35 +269,33 @@ class AIChatInputFoundation extends _foundation.default {
         transformer
       } = this.getProps();
       if (generating) {
-        this._adapter.notifyStopGenerate();
         return;
-      } else {
-        if (!this.canSend()) {
-          return;
-        }
-        const references = this.getProp('references');
-        const {
-          attachments
-        } = this.getStates();
-        const editor = this._adapter.getEditor();
-        let richTextResult = [];
-        if (editor) {
-          const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
-          richTextResult = (0, _utils.transformJSONResult)(json, transformer);
-        }
-        // close popup layer for template/skill/suggestion
-        this.setState({
-          templateVisible: false,
-          skillVisible: false,
-          suggestionVisible: false
-        });
-        this._adapter.notifyMessageSend({
-          references,
-          attachments,
-          inputContents: richTextResult,
-          setup: (_b = this._adapter.getConfigureValue()) !== null && _b !== void 0 ? _b : {}
-        });
       }
+      if (!this.canSend()) {
+        return;
+      }
+      const references = this.getProp('references');
+      const {
+        attachments
+      } = this.getStates();
+      const editor = this._adapter.getEditor();
+      let richTextResult = [];
+      if (editor) {
+        const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
+        richTextResult = (0, _utils.transformJSONResult)(json, transformer);
+      }
+      // close popup layer for template/skill/suggestion
+      this.setState({
+        templateVisible: false,
+        skillVisible: false,
+        suggestionVisible: false
+      });
+      this._adapter.notifyMessageSend({
+        references,
+        attachments,
+        inputContents: richTextResult,
+        setup: (_b = this._adapter.getConfigureValue()) !== null && _b !== void 0 ? _b : {}
+      });
     };
     this.handleContainerMouseDown = e => {
       this.mouseDownTarget = e.target;

package/lib/cjs/chat/foundation.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export interface Content {
     type: 'text' | 'image_url' | 'file_url';
     text?: string;

package/lib/cjs/chat/foundation.js

@@ -10,7 +10,12 @@ var _constants = require("./constants");
 var _semiAnimation = require("@douyinfe/semi-animation");
 var _uuid = require("../utils/uuid");
 var _a11y = require("../utils/a11y");
+require("prismjs");
+require("prismjs/components/prism-jsx.js");
+require("prismjs/components/prism-tsx.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// code's default height type is html/js/css, add jsx & tsx;
+
 const {
   PIC_PREFIX,
   PIC_SUFFIX_ARRAY,

package/lib/cjs/table/table.css

@@ -388,36 +388,41 @@
 .semi-table .semi-table-column-filter.on {
   color: var(--semi-color-primary);
 }
-.semi-table-bordered .semi-table-title {
+.semi-table-bordered > .semi-table-title {
   padding-left: 16px;
   padding-right: 16px;
   border-top: 1px solid var(--semi-color-border);
   border-right: 1px solid var(--semi-color-border);
   border-left: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-container {
+.semi-table-bordered > .semi-table-container {
   border: 1px solid var(--semi-color-border);
   border-right: 0;
   border-bottom: 0;
 }
-.semi-table-bordered .semi-table-header::-webkit-scrollbar {
+:where(.semi-table-bordered) > .semi-table-container > .semi-table-header::-webkit-scrollbar {
   border-right: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-footer {
+:where(.semi-table-bordered) > .semi-table-container > .semi-table-footer {
   border-left: 1px solid var(--semi-color-border);
   border-right: 1px solid var(--semi-color-border);
   border-bottom: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
+:where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder {
+  border-right: 1px solid var(--semi-color-border);
+}
+:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
   background-color: transparent;
 }
-.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
-.semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
+:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head, :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   border-right: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-placeholder {
+:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head {
   border-right: 1px solid var(--semi-color-border);
 }
+:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
+  background-color: transparent;
+}
 .semi-table-placeholder {
   position: sticky;
   left: 0px;

package/lib/cjs/table/table.scss

@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
     }
 
     &-bordered {
-        .#{$module}-title {
+        & > .#{$module}-title {
             padding-left: $spacing-table_bordered_titler-paddingLeft;
             padding-right: $spacing-table_bordered_titler-paddingRight;
             border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
             border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
         }
 
-        .#{$module}-container {
+        & > .#{$module}-container {
             border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
             border-right: 0;
             border-bottom: 0;
         }
 
-        .#{$module}-header {
-            &::-webkit-scrollbar {
-                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(&) {
+            & > .#{$module}-container {
+                & >  .#{$module}-header {
+                    &::-webkit-scrollbar {
+                        border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    }
+                }
+
+                & > .#{$module}-footer {
+                    border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                }
             }
         }
 
-        .#{$module}-footer {
-            border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container) {
+            & > .#{$module}-body > .#{$module}-placeholder {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-            .react-resizable-handle {
-                background-color: transparent;
+        :where(& > .#{$module}-container > .#{$module}-body) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
             }
-        }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
-        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+            & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-placeholder {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container > .#{$module}-header) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
+            }
         }
     }
 

package/lib/cjs/videoPlayer/foundation.d.ts

@@ -40,6 +40,8 @@ export default class VideoPlayerFoundation<P = Record<string, any>, S = Record<s
     handlePlayOrPause(): void;
     handlePlay(): void;
     handlePause(): void;
+    handleVideoPlay: () => void;
+    handleVideoPause: () => void;
     handleCanPlay: () => void;
     handleWaiting: (locale: any) => void;
     handleStalled: (locale: any) => void;

package/lib/cjs/videoPlayer/foundation.js

@@ -18,6 +18,14 @@ class VideoPlayerFoundation extends _foundation.default {
         this._adapter.setShowControls(false);
       }, 3000);
     }, 200);
+    this.handleVideoPlay = () => {
+      this._adapter.setIsPlaying(true);
+      this._adapter.notifyPlay();
+    };
+    this.handleVideoPause = () => {
+      this._adapter.setIsPlaying(false);
+      this._adapter.notifyPause();
+    };
     this.handleCanPlay = () => {
       this._adapter.setShowNotification(false);
     };
@@ -197,17 +205,17 @@ class VideoPlayerFoundation extends _foundation.default {
   handlePlay() {
     const video = this._adapter.getVideo();
     if (video) {
+      // 触发原生 onPlay 后通过 handleVideoPlay 更新 isPlaying 状态
+      // After triggering the native onPlay, the isPlaying state is updated via handleVideoPlay.
       video.play();
-      this._adapter.setIsPlaying(true);
-      this._adapter.notifyPlay();
     }
   }
   handlePause() {
     const video = this._adapter.getVideo();
     if (video) {
+      // 触发原生 onPause 后通过 handleVideoPause 更新 isPlaying 状态
+      // After triggering the native onPause, the isPlaying state is updated via handleVideoPause.
       video.pause();
-      this._adapter.setIsPlaying(false);
-      this._adapter.notifyPause();
     }
   }
   handleVolumeChange(value) {

package/lib/es/aiChatDialogue/foundation.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export interface DialogueAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getContainerRef: () => HTMLDivElement;
     setWheelScroll: (flag: boolean) => void;

package/lib/es/aiChatDialogue/foundation.js

@@ -3,6 +3,9 @@ import BaseFoundation from "../base/foundation";
 import { getUuidv4 } from "../utils/uuid";
 import { strings } from "./constants";
 import { Animation } from '@douyinfe/semi-animation';
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export default class DialogueFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));

package/lib/es/aiChatInput/foundation.d.ts

@@ -51,6 +51,7 @@ export default class AIChatInputFoundation extends BaseFoundation<AIChatInputAda
     onUploadChange: (props: any) => void;
     _isRichTextEmpty: () => boolean;
     canSend: () => any;
+    handleStopGenerate: () => void;
     handleSend: () => void;
     handleContainerMouseDown: (e: React.MouseEvent) => void;
     handleContainerClick: (e: React.MouseEvent) => void;

package/lib/es/aiChatInput/foundation.js

@@ -249,6 +249,12 @@ export default class AIChatInputFoundation extends BaseFoundation {
       const validAttachment = Array.isArray(attachments) && attachments.length > 0;
       return validRichText || validAttachment;
     };
+    this.handleStopGenerate = () => {
+      const {
+        generating
+      } = this.getProps();
+      generating && this._adapter.notifyStopGenerate();
+    };
     this.handleSend = () => {
       var _a, _b;
       const {
@@ -256,35 +262,33 @@ export default class AIChatInputFoundation extends BaseFoundation {
         transformer
       } = this.getProps();
       if (generating) {
-        this._adapter.notifyStopGenerate();
         return;
-      } else {
-        if (!this.canSend()) {
-          return;
-        }
-        const references = this.getProp('references');
-        const {
-          attachments
-        } = this.getStates();
-        const editor = this._adapter.getEditor();
-        let richTextResult = [];
-        if (editor) {
-          const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
-          richTextResult = transformJSONResult(json, transformer);
-        }
-        // close popup layer for template/skill/suggestion
-        this.setState({
-          templateVisible: false,
-          skillVisible: false,
-          suggestionVisible: false
-        });
-        this._adapter.notifyMessageSend({
-          references,
-          attachments,
-          inputContents: richTextResult,
-          setup: (_b = this._adapter.getConfigureValue()) !== null && _b !== void 0 ? _b : {}
-        });
       }
+      if (!this.canSend()) {
+        return;
+      }
+      const references = this.getProp('references');
+      const {
+        attachments
+      } = this.getStates();
+      const editor = this._adapter.getEditor();
+      let richTextResult = [];
+      if (editor) {
+        const json = (_a = editor.getJSON) === null || _a === void 0 ? void 0 : _a.call(editor);
+        richTextResult = transformJSONResult(json, transformer);
+      }
+      // close popup layer for template/skill/suggestion
+      this.setState({
+        templateVisible: false,
+        skillVisible: false,
+        suggestionVisible: false
+      });
+      this._adapter.notifyMessageSend({
+        references,
+        attachments,
+        inputContents: richTextResult,
+        setup: (_b = this._adapter.getConfigureValue()) !== null && _b !== void 0 ? _b : {}
+      });
     };
     this.handleContainerMouseDown = e => {
       this.mouseDownTarget = e.target;

package/lib/es/chat/foundation.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 export interface Content {
     type: 'text' | 'image_url' | 'file_url';
     text?: string;

package/lib/es/chat/foundation.js

@@ -4,6 +4,10 @@ import { strings } from "./constants";
 import { Animation } from '@douyinfe/semi-animation';
 import { getUuidv4 } from "../utils/uuid";
 import { handlePrevent } from "../utils/a11y";
+// code's default height type is html/js/css, add jsx & tsx;
+import 'prismjs';
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-tsx.js";
 const {
   PIC_PREFIX,
   PIC_SUFFIX_ARRAY,

package/lib/es/table/table.css

@@ -388,36 +388,41 @@
 .semi-table .semi-table-column-filter.on {
   color: var(--semi-color-primary);
 }
-.semi-table-bordered .semi-table-title {
+.semi-table-bordered > .semi-table-title {
   padding-left: 16px;
   padding-right: 16px;
   border-top: 1px solid var(--semi-color-border);
   border-right: 1px solid var(--semi-color-border);
   border-left: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-container {
+.semi-table-bordered > .semi-table-container {
   border: 1px solid var(--semi-color-border);
   border-right: 0;
   border-bottom: 0;
 }
-.semi-table-bordered .semi-table-header::-webkit-scrollbar {
+:where(.semi-table-bordered) > .semi-table-container > .semi-table-header::-webkit-scrollbar {
   border-right: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-footer {
+:where(.semi-table-bordered) > .semi-table-container > .semi-table-footer {
   border-left: 1px solid var(--semi-color-border);
   border-right: 1px solid var(--semi-color-border);
   border-bottom: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
+:where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder {
+  border-right: 1px solid var(--semi-color-border);
+}
+:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
   background-color: transparent;
 }
-.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
-.semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
+:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head, :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   border-right: 1px solid var(--semi-color-border);
 }
-.semi-table-bordered .semi-table-placeholder {
+:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head {
   border-right: 1px solid var(--semi-color-border);
 }
+:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
+  background-color: transparent;
+}
 .semi-table-placeholder {
   position: sticky;
   left: 0px;

package/lib/es/table/table.scss

@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
     }
 
     &-bordered {
-        .#{$module}-title {
+        & > .#{$module}-title {
             padding-left: $spacing-table_bordered_titler-paddingLeft;
             padding-right: $spacing-table_bordered_titler-paddingRight;
             border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
             border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
         }
 
-        .#{$module}-container {
+        & > .#{$module}-container {
             border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
             border-right: 0;
             border-bottom: 0;
         }
 
-        .#{$module}-header {
-            &::-webkit-scrollbar {
-                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(&) {
+            & > .#{$module}-container {
+                & >  .#{$module}-header {
+                    &::-webkit-scrollbar {
+                        border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    }
+                }
+
+                & > .#{$module}-footer {
+                    border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                }
             }
         }
 
-        .#{$module}-footer {
-            border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container) {
+            & > .#{$module}-body > .#{$module}-placeholder {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-            .react-resizable-handle {
-                background-color: transparent;
+        :where(& > .#{$module}-container > .#{$module}-body) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
             }
-        }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
-        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+            & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-placeholder {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container > .#{$module}-header) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
+            }
         }
     }
 

package/lib/es/videoPlayer/foundation.d.ts

@@ -40,6 +40,8 @@ export default class VideoPlayerFoundation<P = Record<string, any>, S = Record<s
     handlePlayOrPause(): void;
     handlePlay(): void;
     handlePause(): void;
+    handleVideoPlay: () => void;
+    handleVideoPause: () => void;
     handleCanPlay: () => void;
     handleWaiting: (locale: any) => void;
     handleStalled: (locale: any) => void;

package/lib/es/videoPlayer/foundation.js

@@ -11,6 +11,14 @@ export default class VideoPlayerFoundation extends BaseFoundation {
         this._adapter.setShowControls(false);
       }, 3000);
     }, 200);
+    this.handleVideoPlay = () => {
+      this._adapter.setIsPlaying(true);
+      this._adapter.notifyPlay();
+    };
+    this.handleVideoPause = () => {
+      this._adapter.setIsPlaying(false);
+      this._adapter.notifyPause();
+    };
     this.handleCanPlay = () => {
       this._adapter.setShowNotification(false);
     };
@@ -190,17 +198,17 @@ export default class VideoPlayerFoundation extends BaseFoundation {
   handlePlay() {
     const video = this._adapter.getVideo();
     if (video) {
+      // 触发原生 onPlay 后通过 handleVideoPlay 更新 isPlaying 状态
+      // After triggering the native onPlay, the isPlaying state is updated via handleVideoPlay.
       video.play();
-      this._adapter.setIsPlaying(true);
-      this._adapter.notifyPlay();
     }
   }
   handlePause() {
     const video = this._adapter.getVideo();
     if (video) {
+      // 触发原生 onPause 后通过 handleVideoPause 更新 isPlaying 状态
+      // After triggering the native onPause, the isPlaying state is updated via handleVideoPause.
       video.pause();
-      this._adapter.setIsPlaying(false);
-      this._adapter.notifyPause();
     }
   }
   handleVolumeChange(value) {

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.89.0-beta.0",
+    "version": "2.89.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.89.0-beta.0",
-        "@douyinfe/semi-json-viewer-core": "2.89.0-beta.0",
+        "@douyinfe/semi-animation": "2.89.1",
+        "@douyinfe/semi-json-viewer-core": "2.89.1",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "e0c70c237b5788629d4064ebe4f8d477dc069091",
+    "gitHead": "ed705036239934698a8101b2fd4f84e362e1401d",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/table/table.scss

@@ -508,7 +508,7 @@ $module: #{$prefix}-table;
     }
 
     &-bordered {
-        .#{$module}-title {
+        & > .#{$module}-title {
             padding-left: $spacing-table_bordered_titler-paddingLeft;
             padding-right: $spacing-table_bordered_titler-paddingRight;
             border-top: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -516,37 +516,55 @@ $module: #{$prefix}-table;
             border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
         }
 
-        .#{$module}-container {
+        & > .#{$module}-container {
             border: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
             border-right: 0;
             border-bottom: 0;
         }
 
-        .#{$module}-header {
-            &::-webkit-scrollbar {
-                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(&) {
+            & > .#{$module}-container {
+                & >  .#{$module}-header {
+                    &::-webkit-scrollbar {
+                        border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    }
+                }
+
+                & > .#{$module}-footer {
+                    border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                    border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+                }
             }
         }
 
-        .#{$module}-footer {
-            border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
-            border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container) {
+            & > .#{$module}-body > .#{$module}-placeholder {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-            .react-resizable-handle {
-                background-color: transparent;
+        :where(& > .#{$module}-container > .#{$module}-body) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
             }
-        }
 
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
-        .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
+            & > .#{$module} > .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+            }
         }
 
-        .#{$module}-placeholder {
-            border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+        :where(& > .#{$module}-container > .#{$module}-header) {
+            & > .#{$module} > .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
+
+                .react-resizable-handle {
+                    background-color: transparent;
+                }
+            }
         }
     }
 

package/videoPlayer/foundation.ts

@@ -107,21 +107,31 @@ export default class VideoPlayerFoundation<P = Record<string, any>, S = Record<s
     handlePlay() {
         const video = this._adapter.getVideo();
         if (video) {
+            // 触发原生 onPlay 后通过 handleVideoPlay 更新 isPlaying 状态
+            // After triggering the native onPlay, the isPlaying state is updated via handleVideoPlay.
             video.play();
-            this._adapter.setIsPlaying(true);
-            this._adapter.notifyPlay();
         }
     }
 
     handlePause() {
         const video = this._adapter.getVideo();
         if (video) {
+            // 触发原生 onPause 后通过 handleVideoPause 更新 isPlaying 状态
+            // After triggering the native onPause, the isPlaying state is updated via handleVideoPause.
             video.pause();
-            this._adapter.setIsPlaying(false);
-            this._adapter.notifyPause();
         }
     }
 
+    handleVideoPlay = () => {
+        this._adapter.setIsPlaying(true);
+        this._adapter.notifyPlay();
+    }
+
+    handleVideoPause = () => {
+        this._adapter.setIsPlaying(false);
+        this._adapter.notifyPause();
+    }
+
     handleCanPlay = () => {
         this._adapter.setShowNotification(false);
     }