@king-design/vue 3.8.0-beta.0 → 3.8.0-beta.2

package/components/bubbleList/styles.js

@@ -5,7 +5,7 @@ import '../../styles/global';
 import { cache } from '../utils';
 var defaults = {
   gap: '12px',
-  paddingInline: '8px',
+  scrollbarGap: '6px',
   scrollToBottomBg: '#fff',
   scrollToBottomColor: '#97A3B6',
   scrollToBottomBorder: "1px solid " + setAlpha(theme.color.border, 0.72),
@@ -29,5 +29,5 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;gap:", bubbleList.gap, ";width:100%;min-height:0;.", k, "-bubble-list-scroll{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:", bubbleList.scrollThumb, " ", bubbleList.scrollbarTrack, ";}.", k, "-bubble-list-scroll::-webkit-scrollbar{width:10px;height:10px;}.", k, "-bubble-list-scroll::-webkit-scrollbar-track{background:", bubbleList.scrollbarTrack, ";}.", k, "-bubble-list-scroll::-webkit-scrollbar-thumb{background:", bubbleList.scrollThumb, ";border-radius:999px;border:2px solid transparent;background-clip:content-box;transition:background ", theme.transition.small, ";}.", k, "-bubble-list-scroll::-webkit-scrollbar-thumb:hover{background:", bubbleList.scrollThumbHover, ";background-clip:content-box;}.", k, "-bubble-list-scroll-content{min-height:100%;display:flex;flex-direction:column;box-sizing:border-box;padding-inline:", bubbleList.paddingInline, ";}.", k, "-bubble-list-history{display:flex;justify-content:center;color:", bubbleList.auxiliaryColor, ";font-size:12px;line-height:1.5;padding:4px 0 8px;flex:0 0 auto;}.", k, "-bubble-list-items{display:flex;flex-direction:column;gap:", bubbleList.gap, ";width:100%;}.", k, "-bubble-list-item{width:100%;min-width:0;}.", k, "-bubble-list-empty{min-height:100%;display:flex;align-items:center;justify-content:center;color:", bubbleList.auxiliaryColor, ";padding:24px 16px;text-align:center;box-sizing:border-box;}.", k, "-bubble-list-scroll-to-bottom{position:absolute;right:16px;bottom:16px;z-index:1;}.", k, "-bubble-list-scroll-to-bottom-button{border:", bubbleList.scrollToBottomBorder, ";background:", bubbleList.scrollToBottomBg, ";color:", bubbleList.scrollToBottomColor, ";border-radius:999px;box-shadow:", bubbleList.scrollToBottomShadow, ";width:", bubbleList.scrollToBottomSize, ";height:", bubbleList.scrollToBottomSize, ";display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:18px;line-height:1;cursor:pointer;transition:background ", theme.transition.small, ",border-color ", theme.transition.small, ",color ", theme.transition.small, ",transform ", theme.transition.small, ",box-shadow ", theme.transition.small, ";}.", k, "-bubble-list-scroll-to-bottom-button:hover{background:", bubbleList.scrollToBottomHoverBg, ";color:", bubbleList.scrollToBottomHoverColor, ";border:", bubbleList.scrollToBottomHoverBorder, ";transform:translateY(-1px);box-shadow:0 14px 30px ", setAlpha('#000', 0.16), ";}.", k, "-bubble-list-scroll-to-bottom-button:focus-visible{outline:0;color:", bubbleList.scrollToBottomHoverColor, ";border:", bubbleList.scrollToBottomHoverBorder, ";box-shadow:0 0 0 4px ", setAlpha(theme.color.primary, 0.14), ",0 10px 28px ", setAlpha('#000', 0.12), ";}.", k, "-bubble-list-scroll-to-bottom-icon{pointer-events:none;font-size:", bubbleList.scrollToBottomIconSize, ";}");
+  return /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;gap:", bubbleList.gap, ";width:100%;min-height:0;.", k, "-bubble-list-scroll{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:", bubbleList.scrollThumb, " ", bubbleList.scrollbarTrack, ";}.", k, "-bubble-list-scroll-has-scrollbar{padding-inline-end:", bubbleList.scrollbarGap, ";}.", k, "-bubble-list-scroll::-webkit-scrollbar{width:10px;height:10px;}.", k, "-bubble-list-scroll::-webkit-scrollbar-track{background:", bubbleList.scrollbarTrack, ";}.", k, "-bubble-list-scroll::-webkit-scrollbar-thumb{background:", bubbleList.scrollThumb, ";border-radius:999px;border:2px solid transparent;background-clip:content-box;transition:background ", theme.transition.small, ";}.", k, "-bubble-list-scroll::-webkit-scrollbar-thumb:hover{background:", bubbleList.scrollThumbHover, ";background-clip:content-box;}.", k, "-bubble-list-scroll-content{min-height:100%;display:flex;flex-direction:column;box-sizing:border-box;padding-inline:0;}.", k, "-bubble-list-history{display:flex;justify-content:center;color:", bubbleList.auxiliaryColor, ";font-size:12px;line-height:1.5;padding:4px 0 8px;flex:0 0 auto;}.", k, "-bubble-list-items{display:flex;flex-direction:column;gap:", bubbleList.gap, ";width:100%;}.", k, "-bubble-list-item{width:100%;min-width:0;}.", k, "-bubble-list-empty{min-height:100%;display:flex;align-items:center;justify-content:center;color:", bubbleList.auxiliaryColor, ";padding:24px 16px;text-align:center;box-sizing:border-box;}.", k, "-bubble-list-scroll-to-bottom{position:absolute;right:16px;bottom:16px;z-index:1;}.", k, "-bubble-list-scroll-to-bottom-button{border:", bubbleList.scrollToBottomBorder, ";background:", bubbleList.scrollToBottomBg, ";color:", bubbleList.scrollToBottomColor, ";border-radius:999px;box-shadow:", bubbleList.scrollToBottomShadow, ";width:", bubbleList.scrollToBottomSize, ";height:", bubbleList.scrollToBottomSize, ";display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:18px;line-height:1;cursor:pointer;transition:background ", theme.transition.small, ",border-color ", theme.transition.small, ",color ", theme.transition.small, ",transform ", theme.transition.small, ",box-shadow ", theme.transition.small, ";}.", k, "-bubble-list-scroll-to-bottom-button:hover{background:", bubbleList.scrollToBottomHoverBg, ";color:", bubbleList.scrollToBottomHoverColor, ";border:", bubbleList.scrollToBottomHoverBorder, ";transform:translateY(-1px);box-shadow:0 14px 30px ", setAlpha('#000', 0.16), ";}.", k, "-bubble-list-scroll-to-bottom-button:focus-visible{outline:0;color:", bubbleList.scrollToBottomHoverColor, ";border:", bubbleList.scrollToBottomHoverBorder, ";box-shadow:0 0 0 4px ", setAlpha(theme.color.primary, 0.14), ",0 10px 28px ", setAlpha('#000', 0.12), ";}.", k, "-bubble-list-scroll-to-bottom-icon{pointer-events:none;font-size:", bubbleList.scrollToBottomIconSize, ";}");
 });

package/components/bubbleList/useBubbleList.js

@@ -76,6 +76,11 @@ export function useBubbleList() {
     if (instance.get(key) === value) return;
     instance.set(key, value);
   }
+  function syncScrollbarState() {
+    var scrollBox = getScrollBox();
+    var hasScrollbar = !!scrollBox && scrollBox.scrollHeight - scrollBox.clientHeight > 1;
+    setInternalState('$hasScrollbar', hasScrollbar);
+  }
   function setIsAtBottom(value) {
     if (instance.get('$isAtBottom') === value) return;
     setInternalState('$isAtBottom', value);
@@ -201,6 +206,7 @@ export function useBubbleList() {
     scrollBox.scrollTop += delta;
   }
   function syncScrollState() {
+    syncScrollbarState();
     var atBottom = isAtBottom();
     setIsAtBottom(atBottom);
     setAutoScrollActive(atBottom);
@@ -403,6 +409,7 @@ export function useBubbleList() {
   function onMountedCallback() {
     nextTick(function () {
       mountResizeObserver();
+      syncScrollbarState();
       if (isAutoScrollEnabled()) {
         scrollToBottom('auto');
         requestAnimationFrame(function () {

package/components/fileCard/fileCard.vdt.js

@@ -22,6 +22,7 @@ export default function ($props, $blocks, $__proto__) {
     onDelete = _this$model.onDelete,
     getValue = _this$model.getValue,
     onPreview = _this$model.onPreview,
+    isLoading = _this$model.isLoading,
     isError = _this$model.isError,
     getMediaLoadingText = _this$model.getMediaLoadingText,
     getMediaErrorText = _this$model.getMediaErrorText,
@@ -48,7 +49,7 @@ export default function ($props, $blocks, $__proto__) {
     getFileMediaType = _this$model.getFileMediaType,
     getMediaStatus = _this$model.getMediaStatus,
     getMediaShowPreview = _this$model.getMediaShowPreview,
-    onMediaError = _this$model.onMediaError,
+    shouldShowMediaLoadingOverlay = _this$model.shouldShowMediaLoadingOverlay,
     getMediaSize = _this$model.getMediaSize,
     getFileMediaSize = _this$model.getFileMediaSize,
     shouldShowFileMedia = _this$model.shouldShowFileMedia;
@@ -68,7 +69,7 @@ export default function ($props, $blocks, $__proto__) {
   var value = getValue();
   var shouldShowFileContent = !isMediaType();
   var descriptionSlot = shouldShowFileContent && $blocks.description ? $blocks.description(noop, value) : undefined;
-  var fileMaskSlot = shouldShowFileContent && maskBlock ? maskBlock(noop, value) : undefined;
+  var fileMaskSlot = shouldShowFileContent && !isLoading() && maskBlock ? maskBlock(noop, value) : undefined;
   var hasDescriptionSlot = !isEmptySlot(descriptionSlot);
   var hasFileMaskSlot = !isEmptySlot(fileMaskSlot);
   var isMini = (this.get('size') || 'default') === 'mini';
@@ -99,7 +100,6 @@ export default function ($props, $blocks, $__proto__) {
     'videoProps': this.get('videoProps'),
     'audioProps': this.get('audioProps'),
     'ev-preview': onPreview,
-    'ev-loadError': onMediaError,
     '$blocks': function ($blocks) {
       var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
@@ -125,7 +125,7 @@ export default function ($props, $blocks, $__proto__) {
         return block ? block.call($this, callBlock, data) : callBlock();
       }), __$blocks;
     }.call($this, _$em)
-  }), shouldShowMediaStatusLayer() && !shouldUseMediaErrorArtworkLayout() ? _$ce(2, 'div', _$ce(2, 'span', isError() ? getMediaErrorText() : getMediaLoadingText(), 0, _$cn((_$cn2 = {}, _$cn2[k + "-file-card-media-loading-text"] = !isError(), _$cn2[k + "-file-card-error-text"] = isError(), _$cn2))), 2, _$cn(k + "-file-card-media-status-layer")) : undefined, shouldShowVisualMediaProgressText() ? _$ce(2, 'div', getMediaProgressText(), 0, _$cn(k + "-file-card-media-progress-text")) : undefined], 0, _$cn(k + "-file-card-media-shell")) : _$ce(2, 'div', [_$ce(2, 'div', [shouldShowFileMedia() ? _$cc(Media, {
+  }), shouldShowMediaLoadingOverlay() ? _$ce(2, 'div', null, 1, _$cn(k + "-file-card-media-loading-overlay")) : undefined, shouldShowMediaStatusLayer() && !shouldUseMediaErrorArtworkLayout() ? _$ce(2, 'div', _$ce(2, 'span', isError() ? getMediaErrorText() : getMediaLoadingText(), 0, _$cn((_$cn2 = {}, _$cn2[k + "-file-card-media-loading-text"] = !isError(), _$cn2[k + "-file-card-error-text"] = isError(), _$cn2))), 2, _$cn(k + "-file-card-media-status-layer")) : undefined, shouldShowVisualMediaProgressText() ? _$ce(2, 'div', getMediaProgressText(), 0, _$cn(k + "-file-card-media-progress-text")) : undefined], 0, _$cn(k + "-file-card-media-shell")) : _$ce(2, 'div', [_$ce(2, 'div', [shouldShowFileMedia() ? _$cc(Media, {
     'className': _$cn(k + "-file-card-file-media-view"),
     'name': getFileName(),
     'type': getFileMediaType(),

package/components/fileCard/index.spec.js

@@ -17,12 +17,6 @@ describe('FileCard', function () {
     }
     expect(viewer.classList.contains('k-fade-leave-active') || viewer.classList.contains('k-fade-leave-to')).to.be.true;
   }
-  function dispatchMediaEvent(target, eventName) {
-    target.dispatchEvent(new Event(eventName, {
-      bubbles: false,
-      cancelable: true
-    }));
-  }
   // 文件卡片和显式媒体卡片走不同外形，媒体内部复用 Media。
   it('should render file and media card types with Media inside', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var Demo, _mount, element;
@@ -493,10 +487,10 @@ describe('FileCard', function () {
       }
     }, _callee13);
   })));
-  // 显式图片上传失败且有 src 时，保留媒体画面、禁用预览，错误文案仅在指定 errorText 时展示。
-  it('should keep visual media visible and show error text only when specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+  // 显式图片/视频上传失败时，有 src 也展示错误占位，错误文案仅在指定 errorText 时展示。
+  it('should render media error state with source and show text only when specified', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
     var _cards$1$querySelecto3;
-    var Demo, _mount14, element, cards, image, video;
+    var Demo, _mount14, element, cards, artwork, icon;
     return _regeneratorRuntime.wrap(function _callee14$(_context28) {
       while (1) switch (_context28.prev = _context28.next) {
         case 0:
@@ -517,28 +511,30 @@ describe('FileCard', function () {
           Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        src=\"https://example.com/cover.png\"\n                        status=\"error\"\n                    />\n                    <FileCard\n                        name=\"clip.mp4\"\n                        type=\"video\"\n                        src=\"https://example.com/clip.mp4\"\n                        status=\"error\"\n                        errorText=\"\u4E0A\u4F20\u5931\u8D25\"\n                    />\n                </div>\n            ";
           _mount14 = mount(Demo), element = _mount14[1];
           cards = element.querySelectorAll('.k-file-card');
-          image = cards[0].querySelector('img.k-media-image');
-          video = cards[1].querySelector('video.k-media-video');
+          artwork = cards[1].querySelector('.k-file-card-media-error-artwork-content');
+          icon = artwork.querySelector('.k-file-card-media-error-artwork-icon');
           expect(cards[0].className).to.contain('k-file-card-error');
-          expect(cards[0].querySelector('.k-media-error-card')).to.eql(null);
+          expect(cards[0].querySelector('img.k-media-image')).to.eql(null);
+          expect(cards[1].querySelector('video.k-media-video')).to.eql(null);
+          expect(cards[0].querySelector('.k-media-error-card')).not.to.eql(null);
           expect(cards[1].querySelector('.k-media-error-card')).to.eql(null);
-          expect(image).not.to.eql(null);
-          expect(video).not.to.eql(null);
           expect(cards[0].querySelector('.k-file-card-error-text')).to.eql(null);
           expect((_cards$1$querySelecto3 = cards[1].querySelector('.k-file-card-error-text')) == null ? void 0 : _cards$1$querySelecto3.textContent).to.contain('上传失败');
+          expect(cards[1].className).to.contain('k-file-card-media-error-artwork');
+          expect(icon.src).to.contain('ECECEC');
           expect(getComputedStyle(cards[0]).borderColor).not.to.eql('rgb(237, 64, 64)');
           expect(element.querySelector('.k-media-placeholder')).to.eql(null);
           expect(element.querySelector('.k-media-preview-trigger')).to.eql(null);
-        case 16:
+        case 18:
         case "end":
           return _context28.stop();
       }
     }, _callee14);
   })));
-  // 显式图片上传失败但 src 自身加载失败时，回退到上传失败 artwork。
-  it('should render upload error artwork when visual media src fails to load', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
-    var _element$querySelecto11, _artwork$querySelecto;
-    var Demo, _mount15, element, image, statusLayer, artwork;
+  // 显式图片上传失败时，不再等待 src 加载失败，直接展示上传失败 artwork。
+  it('should render upload error artwork immediately for visual media with source', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var _artwork$querySelecto;
+    var Demo, _mount15, element, artwork;
     return _regeneratorRuntime.wrap(function _callee15$(_context30) {
       while (1) switch (_context30.prev = _context30.next) {
         case 0:
@@ -558,22 +554,12 @@ describe('FileCard', function () {
           }(Component);
           Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        src=\"https://example.com/cover.png\"\n                        status=\"error\"\n                        errorText=\"\u4E0A\u4F20\u5931\u8D25\"\n                    />\n                </div>\n            ";
           _mount15 = mount(Demo), element = _mount15[1];
-          image = element.querySelector('img.k-media-image');
-          statusLayer = element.querySelector('.k-file-card-media-status-layer');
-          expect(image, 'visual media should be shown before source fails').not.to.eql(null);
-          expect(statusLayer, 'specified errorText should render status layer while visual media is kept').not.to.eql(null);
-          dispatchMediaEvent(image, 'error');
-          _context30.next = 10;
-          return wait();
-        case 10:
-          _context30.next = 12;
-          return wait();
-        case 12:
           artwork = element.querySelector('.k-file-card-media-error-artwork-content');
-          expect(artwork, "source failure should switch upload error text into artwork layout: " + ((_element$querySelecto11 = element.querySelector('.k-file-card')) == null ? void 0 : _element$querySelecto11.className)).not.to.eql(null);
+          expect(artwork).not.to.eql(null);
+          expect(element.querySelector('img.k-media-image')).to.eql(null);
           expect(element.querySelector('.k-file-card-media-status-layer')).to.eql(null);
           expect((_artwork$querySelecto = artwork.querySelector('.k-file-card-error-text')) == null ? void 0 : _artwork$querySelecto.textContent).to.contain('上传失败');
-        case 16:
+        case 8:
         case "end":
           return _context30.stop();
       }
@@ -634,7 +620,7 @@ describe('FileCard', function () {
   })));
   // 显式视频在 mini 尺寸下，percent 仍会展示进度文本。
   it('should show video progress text in mini size when percent is provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
-    var _element$querySelecto12;
+    var _element$querySelecto11;
     var Demo, _mount17, element;
     return _regeneratorRuntime.wrap(function _callee17$(_context34) {
       while (1) switch (_context34.prev = _context34.next) {
@@ -655,16 +641,15 @@ describe('FileCard', function () {
           }(Component);
           Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"result.mp4\"\n                        type=\"video\"\n                        size=\"mini\"\n                        status=\"loading\"\n                        percent={56}\n                        src=\"https://example.com/result.mp4\"\n                    />\n                </div>\n            ";
           _mount17 = mount(Demo), element = _mount17[1];
-          expect((_element$querySelecto12 = element.querySelector('.k-file-card-media-progress-text')) == null ? void 0 : _element$querySelecto12.textContent).to.contain('56%');
+          expect((_element$querySelecto11 = element.querySelector('.k-file-card-media-progress-text')) == null ? void 0 : _element$querySelecto11.textContent).to.contain('56%');
         case 4:
         case "end":
           return _context34.stop();
       }
     }, _callee17);
   })));
-  // 文件行卡片在 loading 时也允许自定义 mask 插槽渲染。
-  it('should render file mask slot even when status is loading', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
-    var _mask$querySelector;
+  // 文件行卡片 loading 时不展示 hover mask，避免和进度/状态层冲突。
+  it('should not render file mask slot when status is loading', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
     var Demo, _mount18, element, mask;
     return _regeneratorRuntime.wrap(function _callee18$(_context36) {
       while (1) switch (_context36.prev = _context36.next) {
@@ -686,8 +671,8 @@ describe('FileCard', function () {
           Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"a.pdf\"\n                        type=\"file\"\n                        status=\"loading\"\n                    >\n                        <b:mask>\n                            <span class=\"mask-content\">\u64CD\u4F5C\u533A</span>\n                        </b:mask>\n                    </FileCard>\n                </div>\n            ";
           _mount18 = mount(Demo), element = _mount18[1];
           mask = element.querySelector('.k-file-card-file-mask');
-          expect(mask).not.to.eql(null);
-          expect((_mask$querySelector = mask.querySelector('.mask-content')) == null ? void 0 : _mask$querySelector.textContent).to.contain('操作区');
+          expect(mask).to.eql(null);
+          expect(element.querySelector('.mask-content')).to.eql(null);
         case 6:
         case "end":
           return _context36.stop();
@@ -768,10 +753,10 @@ describe('FileCard', function () {
       }
     }, _callee20);
   })));
-  // 显式音频媒体未传 mask 插槽时，loading 文案和进度仍由 FileCard 层展示。
-  it('should render audio loading status and progress without mask slot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
-    var _element$querySelecto13, _element$querySelecto14;
-    var Demo, _mount21, element;
+  // 显式音频媒体仅在有 loading 文案或进度时展示 loading 蒙层，文案颜色与图片/视频一致。
+  it('should render audio loading overlay only when status text or progress is visible', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var _textAudio$querySelec;
+    var Demo, _mount21, element, emptyAudio, textAudio, loadingText;
     return _regeneratorRuntime.wrap(function _callee21$(_context42) {
       while (1) switch (_context42.prev = _context42.next) {
         case 0:
@@ -789,13 +774,20 @@ describe('FileCard', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"voice.mp3\"\n                        type=\"audio\"\n                        status=\"loading\"\n                        loadingText=\"\u4E0A\u4F20\u4E2D\"\n                        percent={37}\n                        src=\"https://example.com/voice.mp3\"\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        className=\"audio-loading-empty\"\n                        name=\"plain.mp3\"\n                        type=\"audio\"\n                        status=\"loading\"\n                        src=\"https://example.com/plain.mp3\"\n                    />\n                    <FileCard\n                        className=\"audio-loading-text\"\n                        name=\"voice.mp3\"\n                        type=\"audio\"\n                        status=\"loading\"\n                        loadingText=\"\u4E0A\u4F20\u4E2D\"\n                        percent={37}\n                        src=\"https://example.com/voice.mp3\"\n                    />\n                </div>\n            ";
           _mount21 = mount(Demo), element = _mount21[1];
-          expect(element.querySelector('.k-media-loading-indicator')).not.to.eql(null);
-          expect((_element$querySelecto13 = element.querySelector('.k-file-card-media-loading-text')) == null ? void 0 : _element$querySelecto13.textContent).to.contain('上传中');
-          expect((_element$querySelecto14 = element.querySelector('.k-file-card-media-progress-text')) == null ? void 0 : _element$querySelecto14.textContent).to.contain('37%');
-          expect(element.querySelector('.k-media-preview-trigger')).to.eql(null);
-        case 7:
+          emptyAudio = element.querySelector('.audio-loading-empty');
+          textAudio = element.querySelector('.audio-loading-text');
+          loadingText = textAudio.querySelector('.k-file-card-media-loading-text');
+          expect(emptyAudio.querySelector('.k-file-card-media-loading-overlay')).to.eql(null);
+          expect(textAudio.querySelector('.k-file-card-media-loading-overlay')).not.to.eql(null);
+          expect(textAudio.querySelector('.k-media-loading-overlay')).to.eql(null);
+          expect(textAudio.querySelector('.k-media-loading-indicator')).not.to.eql(null);
+          expect(loadingText.textContent).to.contain('上传中');
+          expect(getComputedStyle(loadingText).color).to.eql('rgb(255, 255, 255)');
+          expect((_textAudio$querySelec = textAudio.querySelector('.k-file-card-media-progress-text')) == null ? void 0 : _textAudio$querySelec.textContent).to.contain('37%');
+          expect(textAudio.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 14:
         case "end":
           return _context42.stop();
       }
@@ -909,21 +901,22 @@ describe('FileCard', function () {
           expect(button.className).not.to.contain('k-btn');
           expect(style.top).to.eql('2px');
           expect(style.right).to.eql('2px');
+          expect(style.zIndex).to.eql('5');
           expect(style.transform).to.eql('none');
           expect(calls).to.eql(['delete']);
-        case 15:
+        case 16:
         case "end":
           return _context48.stop();
       }
     }, _callee24);
   })));
-  // 媒体预览由内部 Media 负责，同时 FileCard 继续抛出 preview 事件。
-  it('should preview media through Media viewer and trigger preview event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
-    var _getElement2;
-    var Demo, _mount25, instance, element, previewTrigger;
+  // 视频卡片的播放触发器覆盖在卡片中间，删除按钮需要保持更高层级。
+  it('should keep video delete button above preview trigger and not open preview', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var calls, Demo, _mount25, element, button, previewTrigger;
     return _regeneratorRuntime.wrap(function _callee25$(_context50) {
       while (1) switch (_context50.prev = _context50.next) {
         case 0:
+          calls = [];
           Demo = /*#__PURE__*/function (_Component25) {
             _inheritsLoose(Demo, _Component25);
             function Demo() {
@@ -934,34 +927,40 @@ describe('FileCard', function () {
               }
               _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
               _this25.FileCard = FileCard;
+              _this25.onClick = function () {
+                calls.push('click');
+              };
+              _this25.onPreview = function () {
+                calls.push('preview');
+              };
+              _this25.onDelete = function () {
+                calls.push('delete');
+              };
               return _this25;
             }
-            Demo.defaults = function defaults() {
-              return {
-                previewCount: 0
-              };
-            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        ev-preview={() => this.set('previewCount', this.get('previewCount') + 1)}\n                    />\n                </div>\n            ";
-          _mount25 = mount(Demo), instance = _mount25[0], element = _mount25[1];
-          previewTrigger = element.querySelector('.k-media-preview-trigger');
-          previewTrigger.click();
-          _context50.next = 7;
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"clip.mp4\"\n                        type=\"video\"\n                        status=\"done\"\n                        src=\"https://example.com/clip.mp4\"\n                        showDelIcon\n                        ev-click={this.onClick}\n                        ev-preview={this.onPreview}\n                        ev-delete={this.onDelete}\n                    />\n                </div>\n            ";
+          _mount25 = mount(Demo), element = _mount25[1];
+          button = element.querySelector('.k-file-card-delete');
+          previewTrigger = element.querySelector('.k-media-video-preview-trigger');
+          expect(+getComputedStyle(button).zIndex).to.be.greaterThan(+getComputedStyle(previewTrigger).zIndex);
+          button.click();
+          _context50.next = 10;
           return wait();
-        case 7:
-          expect(instance.get('previewCount')).to.eql(1);
-          expect(getElement('.k-media-viewer')).not.to.eql(null);
-          expect((_getElement2 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement2.textContent).to.contain('cover.png');
         case 10:
+          expect(calls).to.eql(['delete']);
+          expectViewerClosed();
+        case 12:
         case "end":
           return _context50.stop();
       }
     }, _callee25);
   })));
-  // showPreview=false 会同步关闭显式媒体和文件行媒体缩略图的预览入口。
-  it('should disable preview for media and file media thumbnail', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
-    var Demo, _mount26, element;
+  // 媒体预览由内部 Media 负责，同时 FileCard 继续抛出 preview 事件。
+  it('should preview media through Media viewer and trigger preview event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+    var _getElement2;
+    var Demo, _mount26, instance, element, previewTrigger;
     return _regeneratorRuntime.wrap(function _callee26$(_context52) {
       while (1) switch (_context52.prev = _context52.next) {
         case 0:
@@ -977,25 +976,35 @@ describe('FileCard', function () {
               _this26.FileCard = FileCard;
               return _this26;
             }
+            Demo.defaults = function defaults() {
+              return {
+                previewCount: 0
+              };
+            };
             return Demo;
           }(Component);
-          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"cover.png\" type=\"image\" status=\"done\" showPreview={false} src=\"https://example.com/cover.png\" />\n                    <FileCard name=\"clip.mp4\" type=\"file\" showPreview={false} src=\"https://example.com/clip.mp4\" />\n                </div>\n            ";
-          _mount26 = mount(Demo), element = _mount26[1];
-          expect(element.querySelector('.k-media-preview-trigger')).to.eql(null);
-        case 4:
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard\n                        name=\"cover.png\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        ev-preview={() => this.set('previewCount', this.get('previewCount') + 1)}\n                    />\n                </div>\n            ";
+          _mount26 = mount(Demo), instance = _mount26[0], element = _mount26[1];
+          previewTrigger = element.querySelector('.k-media-preview-trigger');
+          previewTrigger.click();
+          _context52.next = 7;
+          return wait();
+        case 7:
+          expect(instance.get('previewCount')).to.eql(1);
+          expect(getElement('.k-media-viewer')).not.to.eql(null);
+          expect((_getElement2 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement2.textContent).to.contain('cover.png');
+        case 10:
         case "end":
           return _context52.stop();
       }
     }, _callee26);
   })));
-  // FileCardList 继承默认尺寸、删除开关，并透传新增的 loadingText。
-  it('should proxy FileCardList props and events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
-    var _element$querySelecto15;
-    var calls, Demo, _mount27, element, card, button;
+  // showPreview=false 会同步关闭显式媒体和文件行媒体缩略图的预览入口。
+  it('should disable preview for media and file media thumbnail', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+    var Demo, _mount27, element;
     return _regeneratorRuntime.wrap(function _callee27$(_context54) {
       while (1) switch (_context54.prev = _context54.next) {
         case 0:
-          calls = [];
           Demo = /*#__PURE__*/function (_Component27) {
             _inheritsLoose(Demo, _Component27);
             function Demo() {
@@ -1005,37 +1014,28 @@ describe('FileCard', function () {
                 args[_key27] = arguments[_key27];
               }
               _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
-              _this27.FileCardList = FileCardList;
-              _this27.onDelete = function (item) {
-                calls.push(item.key);
-              };
+              _this27.FileCard = FileCard;
               return _this27;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { FileCardList } = this;\n                <FileCardList\n                    size=\"small\"\n                    deleteable\n                    items={[\n                        {key: 'a', name: 'a.pdf', status: 'loading', percent: 10, loadingText: '\u4E0A\u4F20\u4E2D'},\n                    ]}\n                    ev-delete={this.onDelete}\n                />\n            ";
+          Demo.template = "\n                const { FileCard } = this;\n                <div>\n                    <FileCard name=\"cover.png\" type=\"image\" status=\"done\" showPreview={false} src=\"https://example.com/cover.png\" />\n                    <FileCard name=\"clip.mp4\" type=\"file\" showPreview={false} src=\"https://example.com/clip.mp4\" />\n                </div>\n            ";
           _mount27 = mount(Demo), element = _mount27[1];
-          card = element.querySelector('.k-file-card');
-          button = element.querySelector('.k-file-card-delete');
-          expect(card.className).to.contain('k-file-card-small');
-          expect((_element$querySelecto15 = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto15.textContent).to.contain('上传中... 10%');
-          button.click();
-          _context54.next = 11;
-          return wait();
-        case 11:
-          expect(calls).to.eql(['a']);
-        case 12:
+          expect(element.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 4:
         case "end":
           return _context54.stop();
       }
     }, _callee27);
   })));
-  // FileCardList 的 extension 插槽为空时，不保留额外 flex item。
-  it('should not render extension wrapper when extension slot is empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
-    var Demo, _mount28, element;
+  // FileCardList 继承默认尺寸、删除开关，并透传新增的 loadingText。
+  it('should proxy FileCardList props and events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+    var _element$querySelecto12;
+    var calls, Demo, _mount28, element, card, button;
     return _regeneratorRuntime.wrap(function _callee28$(_context56) {
       while (1) switch (_context56.prev = _context56.next) {
         case 0:
+          calls = [];
           Demo = /*#__PURE__*/function (_Component28) {
             _inheritsLoose(Demo, _Component28);
             function Demo() {
@@ -1046,22 +1046,33 @@ describe('FileCard', function () {
               }
               _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
               _this28.FileCardList = FileCardList;
+              _this28.onDelete = function (item) {
+                calls.push(item.key);
+              };
               return _this28;
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { FileCardList } = this;\n                <FileCardList\n                    items={[{key: 'a', name: 'a.pdf'}]}\n                >\n                    <b:extension>\n                        <button v-if={false} class=\"empty-extension\" type=\"button\">add</button>\n                    </b:extension>\n                </FileCardList>\n            ";
+          Demo.template = "\n                const { FileCardList } = this;\n                <FileCardList\n                    size=\"small\"\n                    deleteable\n                    items={[\n                        {key: 'a', name: 'a.pdf', status: 'loading', percent: 10, loadingText: '\u4E0A\u4F20\u4E2D'},\n                    ]}\n                    ev-delete={this.onDelete}\n                />\n            ";
           _mount28 = mount(Demo), element = _mount28[1];
-          expect(element.querySelector('.k-file-card-list-extension')).to.eql(null);
-        case 4:
+          card = element.querySelector('.k-file-card');
+          button = element.querySelector('.k-file-card-delete');
+          expect(card.className).to.contain('k-file-card-small');
+          expect((_element$querySelecto12 = element.querySelector('.k-file-card-description')) == null ? void 0 : _element$querySelecto12.textContent).to.contain('上传中... 10%');
+          button.click();
+          _context56.next = 11;
+          return wait();
+        case 11:
+          expect(calls).to.eql(['a']);
+        case 12:
         case "end":
           return _context56.stop();
       }
     }, _callee28);
   })));
-  // 删除角标回到卡片内后，列表容器不再需要额外顶部留白。
-  it('should not add top padding for delete icon in lists', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
-    var Demo, _mount29, element, listWrap, listX, listY;
+  // FileCardList 的 prefix/suffix 插槽为空时，不保留额外 flex item。
+  it('should not render prefix or suffix wrapper when slots are empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+    var Demo, _mount29, element;
     return _regeneratorRuntime.wrap(function _callee29$(_context58) {
       while (1) switch (_context58.prev = _context58.next) {
         case 0:
@@ -1079,8 +1090,69 @@ describe('FileCard', function () {
             }
             return Demo;
           }(Component);
-          Demo.template = "\n                const { FileCardList } = this;\n                <div>\n                    <FileCardList\n                        className=\"wrap-list\"\n                        overflow=\"wrap\"\n                        deleteable\n                        items={[\n                            {key: 'c', name: 'c.pdf', type: 'file'},\n                        ]}\n                    />\n                    <FileCardList\n                        className=\"scroll-x-list\"\n                        overflow=\"scrollX\"\n                        deleteable\n                        items={[\n                            {key: 'a', name: 'a.pdf', type: 'file'},\n                        ]}\n                    />\n                    <FileCardList\n                        className=\"scroll-y-list\"\n                        overflow=\"scrollY\"\n                        deleteable\n                        items={[\n                            {key: 'b', name: 'b.pdf', type: 'file'},\n                        ]}\n                    />\n                </div>\n            ";
+          Demo.template = "\n                const { FileCardList } = this;\n                <FileCardList\n                    items={[{key: 'a', name: 'a.pdf'}]}\n                >\n                    <b:prefix>\n                        <button v-if={false} class=\"empty-prefix\" type=\"button\">add</button>\n                    </b:prefix>\n                    <b:suffix>\n                        <button v-if={false} class=\"empty-suffix\" type=\"button\">more</button>\n                    </b:suffix>\n                </FileCardList>\n            ";
           _mount29 = mount(Demo), element = _mount29[1];
+          expect(element.querySelector('.k-file-card-list-prefix')).to.eql(null);
+          expect(element.querySelector('.k-file-card-list-suffix')).to.eql(null);
+        case 5:
+        case "end":
+          return _context58.stop();
+      }
+    }, _callee29);
+  })));
+  it('should render prefix before items and suffix after items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+    var Demo, _mount30, element, list;
+    return _regeneratorRuntime.wrap(function _callee30$(_context60) {
+      while (1) switch (_context60.prev = _context60.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component30) {
+            _inheritsLoose(Demo, _Component30);
+            function Demo() {
+              var _context59;
+              var _this30;
+              for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
+                args[_key30] = arguments[_key30];
+              }
+              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context59 = [this]).call(_context59, args)) || this;
+              _this30.FileCardList = FileCardList;
+              return _this30;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCardList } = this;\n                <FileCardList\n                    items={[{key: 'a', name: 'a.pdf'}]}\n                >\n                    <b:prefix>\n                        <button class=\"prefix-action\" type=\"button\">add</button>\n                    </b:prefix>\n                    <b:suffix>\n                        <button class=\"suffix-action\" type=\"button\">more</button>\n                    </b:suffix>\n                </FileCardList>\n            ";
+          _mount30 = mount(Demo), element = _mount30[1];
+          list = element.classList.contains('k-file-card-list') ? element : element.querySelector('.k-file-card-list');
+          expect(list.children[0].className).to.contain('k-file-card-list-prefix');
+          expect(list.children[1].className).to.contain('k-file-card');
+          expect(list.children[2].className).to.contain('k-file-card-list-suffix');
+        case 7:
+        case "end":
+          return _context60.stop();
+      }
+    }, _callee30);
+  })));
+  // 删除角标回到卡片内后，列表容器不再需要额外顶部留白。
+  it('should not add top padding for delete icon in lists', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+    var Demo, _mount31, element, listWrap, listX, listY;
+    return _regeneratorRuntime.wrap(function _callee31$(_context62) {
+      while (1) switch (_context62.prev = _context62.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component31) {
+            _inheritsLoose(Demo, _Component31);
+            function Demo() {
+              var _context61;
+              var _this31;
+              for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
+                args[_key31] = arguments[_key31];
+              }
+              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context61 = [this]).call(_context61, args)) || this;
+              _this31.FileCardList = FileCardList;
+              return _this31;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { FileCardList } = this;\n                <div>\n                    <FileCardList\n                        className=\"wrap-list\"\n                        overflow=\"wrap\"\n                        deleteable\n                        items={[\n                            {key: 'c', name: 'c.pdf', type: 'file'},\n                        ]}\n                    />\n                    <FileCardList\n                        className=\"scroll-x-list\"\n                        overflow=\"scrollX\"\n                        deleteable\n                        items={[\n                            {key: 'a', name: 'a.pdf', type: 'file'},\n                        ]}\n                    />\n                    <FileCardList\n                        className=\"scroll-y-list\"\n                        overflow=\"scrollY\"\n                        deleteable\n                        items={[\n                            {key: 'b', name: 'b.pdf', type: 'file'},\n                        ]}\n                    />\n                </div>\n            ";
+          _mount31 = mount(Demo), element = _mount31[1];
           listWrap = element.querySelector('.wrap-list');
           listX = element.querySelector('.scroll-x-list');
           listY = element.querySelector('.scroll-y-list');
@@ -1089,8 +1161,8 @@ describe('FileCard', function () {
           expect(getComputedStyle(listY).paddingTop).to.eql('0px');
         case 9:
         case "end":
-          return _context58.stop();
+          return _context62.stop();
       }
-    }, _callee29);
+    }, _callee31);
   })));
 });

package/components/fileCard/list.d.ts

@@ -12,7 +12,8 @@ export interface FileCardListProps {
     showNameTooltip?: boolean;
 }
 export interface FileCardListBlocks {
-    extension: null;
+    prefix: null;
+    suffix: null;
 }
 export interface FileCardListEvents {
     preview: [FileCardListItem, MouseEvent];