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

package/components/media/media.vdt.js

@@ -10,7 +10,7 @@ var _$tmp0 = {
   'tabindex': '-1'
 };
 export default function ($props, $blocks, $__proto__) {
-  var _extends2;
+  var _extends2, _$cn2, _$cn3;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
@@ -19,6 +19,7 @@ export default function ($props, $blocks, $__proto__) {
     getRootStyle = _this$media.getRootStyle,
     getFileName = _this$media.getFileName,
     isLoading = _this$media.isLoading,
+    shouldShowVisualMediaContent = _this$media.shouldShowVisualMediaContent,
     shouldShowImage = _this$media.shouldShowImage,
     shouldShowVideo = _this$media.shouldShowVideo,
     shouldShowAudioLoader = _this$media.shouldShowAudioLoader,
@@ -35,15 +36,18 @@ export default function ($props, $blocks, $__proto__) {
     getErrorCardAssetSrc = _this$media.getErrorCardAssetSrc,
     getMediaCardIconStyle = _this$media.getMediaCardIconStyle,
     shouldShowLoadingIndicator = _this$media.shouldShowLoadingIndicator,
+    shouldShowLoadingVideoIcon = _this$media.shouldShowLoadingVideoIcon,
     shouldShowPlaceholder = _this$media.shouldShowPlaceholder,
     getPreviewIconClassName = _this$media.getPreviewIconClassName,
     getPlaceholderIconClassName = _this$media.getPlaceholderIconClassName,
+    getPlaceholderAssetSrc = _this$media.getPlaceholderAssetSrc,
     getPreviewTitle = _this$media.getPreviewTitle,
     onClick = _this$media.onClick,
     onPreview = _this$media.onPreview,
     canPreview = _this$media.canPreview,
     shouldShowVideoPlayTrigger = _this$media.shouldShowVideoPlayTrigger,
     shouldShowMaskLayer = _this$media.shouldShowMaskLayer,
+    shouldShowLoadingOverlay = _this$media.shouldShowLoadingOverlay,
     getViewerItem = _this$media.getViewerItem,
     getMaskValue = _this$media.getMaskValue,
     isStandalonePreviewRendered = _this$media.isStandalonePreviewRendered,
@@ -87,6 +91,7 @@ export default function ($props, $blocks, $__proto__) {
     theme: 'light'
   }, this.get('nameTooltipProps') || {});
   var mediaName = getFileName();
+  var placeholderAssetSrc = getPlaceholderAssetSrc();
   var audioCard = _$ce(2, 'div', _$ce(2, 'img', null, 1, _$cn(k + "-media-card-icon " + k + "-media-audio-card-icon"), {
     'src': getAudioCardAssetSrc(),
     'alt': '',
@@ -106,19 +111,25 @@ export default function ($props, $blocks, $__proto__) {
     'title': showNameTooltip ? undefined : getFileName()
   }, getRestProps(this), {
     'ev-click': onClick
-  }), [_$ce(2, 'div', [shouldShowImage() ? _$cv('img', _extends({
-    'className': _$cn(k + "-media-image"),
+  }), [_$ce(2, 'div', [shouldShowLoadingOverlay() && !showCustomLoadingLayer ? _$ce(2, 'div', null, 1, _$cn(k + "-media-loading-overlay")) : undefined, shouldShowImage() ? _$cv('img', _extends({
+    'className': _$cn((_$cn2 = {}, _$cn2[k + "-media-image"] = true, _$cn2[k + "-media-visual-hidden"] = !shouldShowVisualMediaContent(), _$cn2)),
     'ref': imageRef
   }, getImageProps())) : shouldShowVideo() ? _$cv('video', _extends({
     'key': getVideoKey(),
-    'className': _$cn(k + "-media-video"),
+    'className': _$cn((_$cn3 = {}, _$cn3[k + "-media-video"] = true, _$cn3[k + "-media-visual-hidden"] = !shouldShowVisualMediaContent(), _$cn3)),
     'ref': videoRef
   }, getVideoProps())) : undefined, shouldShowAudioLoader() ? _$cv('audio', _extends({
     'className': _$cn(k + "-media-audio-loader"),
     'ref': audioRef
-  }, getAudioLoaderProps())) : undefined, shouldShowErrorCard() && !showCustomErrorLayer ? errorCard : shouldShowAudioCard() && !showCustomStateLayer ? audioCard : shouldShowPlaceholder() && !showCustomLoadingLayer && !showCustomErrorLayer ? _$ce(2, 'div', _$cc(Icon, {
+  }, getAudioLoaderProps())) : undefined, shouldShowErrorCard() && !showCustomErrorLayer ? errorCard : shouldShowAudioCard() && !showCustomStateLayer ? audioCard : shouldShowPlaceholder() && !showCustomLoadingLayer && !showCustomErrorLayer ? _$ce(2, 'div', placeholderAssetSrc ? _$ce(2, 'img', null, 1, _$cn(k + "-media-placeholder-asset"), {
+    'src': placeholderAssetSrc,
+    'alt': '',
+    'draggable': false
+  }) : _$cc(Icon, {
     'className': _$cn(getPlaceholderIconClassName())
-  }), 2, _$cn(k + "-media-placeholder")) : undefined, shouldShowLoadingIndicator() && !showCustomLoadingLayer ? _$ce(2, 'div', _$ce(2, 'span', null, 1, _$cn(k + "-media-loading-spinner")), 2, _$cn(k + "-media-loading-indicator")) : undefined, showNameTooltip ? _$cc(Tooltip, _extends({
+  }), 2, _$cn(k + "-media-placeholder")) : undefined, shouldShowLoadingIndicator() && !showCustomLoadingLayer ? _$ce(2, 'div', _$ce(2, 'span', null, 1, _$cn(k + "-media-loading-spinner")), 2, _$cn(k + "-media-loading-indicator")) : undefined, shouldShowLoadingVideoIcon() && !showCustomLoadingLayer ? _$cc(Icon, {
+    'className': _$cn(k + "-media-loading-video-icon ion-ios-play")
+  }) : undefined, showNameTooltip ? _$cc(Tooltip, _extends({
     'className': _$cn(k + "-media-name-tooltip")
   }, nameTooltipProps, {
     'children': _$ce(2, 'div', null, 1, _$cn(k + "-media-name-tooltip-trigger"), _$tmp0),

package/components/media/mediaAssets.d.ts

@@ -1,4 +1,6 @@
 export declare const mediaAudioCardUrl: string;
+export declare const mediaImagePlaceholderUrl: string;
+export declare const mediaVideoPlaceholderUrl: string;
 export declare const mediaImageCardErrorUrl: string;
 export declare const mediaVideoCardErrorUrl: string;
 export declare const mediaAudioCardErrorUrl: string;

package/components/media/mediaAssets.js

@@ -1,6 +1,10 @@
 // 资源内联，避免框架包构建时依赖额外图片文件复制。
 var mediaAudioCardSvg = ['<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">', '<g clip-path="url(#clip0_24923_23617)">', '<path d="M1.19995 2.4C1.19995 1.07452 2.27447 0 3.59995 0H14.4017L22.8 8.39355V21.6C22.8 22.9255 21.7254 24 20.4 24H3.59995C2.27447 24 1.19995 22.9255 1.19995 21.6V2.4Z" fill="url(#paint0_linear_24923_23617)"/>', '<path d="M15.7916 10.2829C15.1728 10.2829 14.5793 10.037 14.1417 9.59944C13.7041 9.16185 13.4583 8.56836 13.4583 7.94952H12.2916V13.6429C11.805 13.3177 11.2236 13.1645 10.64 13.2076C10.0563 13.2507 9.50381 13.4876 9.07021 13.8807C8.63661 14.2738 8.3468 14.8005 8.24683 15.3771C8.14687 15.9537 8.24247 16.5473 8.51845 17.0634C8.79444 17.5794 9.23497 17.9885 9.77007 18.2255C10.3052 18.4626 10.9041 18.514 11.4718 18.3716C12.0395 18.2293 12.5433 17.9013 12.9032 17.4398C13.2631 16.9783 13.4585 16.4098 13.4583 15.8245V10.5541C14.0993 11.1296 14.9301 11.4484 15.7916 11.4495V10.2829Z" fill="white"/>', '<g filter="url(#filter0_f_24923_23617)">', '<path d="M13.8 0L22.8 9H16.2C14.8746 9 13.8 7.92548 13.8 6.6V0Z" fill="#FA655E"/>', '</g>', '<path d="M14.3999 0L22.7999 8.4H16.7999C15.4744 8.4 14.3999 7.32548 14.3999 6V0Z" fill="#FEC6C2"/>', '</g>', '<defs>', '<filter id="filter0_f_24923_23617" x="10.8" y="-3" width="15" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">', '<feFlood flood-opacity="0" result="BackgroundImageFix"/>', '<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>', '<feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_24923_23617"/>', '</filter>', '<linearGradient id="paint0_linear_24923_23617" x1="1.19995" y1="0" x2="25.2" y2="24" gradientUnits="userSpaceOnUse">', '<stop stop-color="#FDA79C"/>', '<stop offset="1" stop-color="#FF8787"/>', '</linearGradient>', '<clipPath id="clip0_24923_23617">', '<rect width="24" height="24" fill="white"/>', '</clipPath>', '</defs>', '</svg>'].join('');
 export var mediaAudioCardUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(mediaAudioCardSvg);
+var mediaImagePlaceholderSvg = ['<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">', '<path d="M4.5 7C5.32842 7 6 6.32842 6 5.5C6 4.67158 5.32842 4 4.5 4C3.67158 4 3 4.67158 3 5.5C3 6.32842 3.67158 7 4.5 7Z" fill="#C2C2CA"/>', '<path d="M8.90229 7.24208C9.17247 6.91269 9.7174 6.9208 9.9756 7.25809L12.8799 11.0521C13.1859 11.4518 12.8719 12 12.3369 12H5L8.90229 7.24208Z" fill="#C2C2CA" stroke="#C2C2CA" stroke-linecap="round" stroke-linejoin="round"/>', '<rect x="1" y="3" width="13" height="9" rx="1" stroke="#C2C2CA" stroke-linejoin="round"/>', '</svg>'].join('');
+export var mediaImagePlaceholderUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(mediaImagePlaceholderSvg);
+var mediaVideoPlaceholderSvg = ['<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">', '<path d="M1.33282 4.4165C1.33282 3.86422 1.78054 3.4165 2.33282 3.4165H9.98913C10.5414 3.4165 10.9891 3.86422 10.9891 4.4165V11.5833C10.9891 12.1356 10.5414 12.5833 9.98913 12.5833H2.33282C1.78054 12.5833 1.33282 12.1356 1.33282 11.5833V4.4165Z" fill="#C2C2CA" stroke="#C2C2CA" stroke-linecap="square"/>', '<path d="M14 4.40059V11.5827C14 11.7506 13.8056 11.8438 13.6747 11.7386L11 9.58943V6.25554L13.6798 4.24073C13.8116 4.14163 14 4.23567 14 4.40059Z" fill="#C2C2CA" stroke="#C2C2CA" stroke-linecap="square"/>', '<path d="M8.8 5C8.91046 5 9 5.08954 9 5.2V5.8C9 5.91046 8.91046 6 8.8 6H5.2C5.08954 6 5 5.91046 5 5.8V5.2C5 5.08954 5.08954 5 5.2 5H8.8Z" fill="white"/>', '</svg>'].join('');
+export var mediaVideoPlaceholderUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(mediaVideoPlaceholderSvg);
 var mediaImageCardErrorSvg = ['<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">', '<g clip-path="url(#clip0_25770_6783)">', '<path d="M1.6001 3.2C1.6001 1.43269 3.03279 0 4.8001 0H19.2024L30.4001 11.1914V28.8C30.4001 30.5673 28.9674 32 27.2001 32H4.8001C3.03279 32 1.6001 30.5673 1.6001 28.8V3.2Z" fill="url(#paint0_linear_25770_6783)"/>', '<path d="M8.24289 22.3474L11.1107 18.1323C11.1475 18.0783 11.1956 18.033 11.2518 17.9996C11.3079 17.9663 11.3707 17.9457 11.4357 17.9393C11.5007 17.9329 11.5664 17.9408 11.628 17.9626C11.6895 17.9844 11.7456 18.0194 11.7921 18.0652L13.6875 19.9222L17.8459 13.4042C17.8871 13.3395 17.9442 13.2865 18.0119 13.2504C18.0795 13.2142 18.1553 13.1961 18.232 13.1979C18.3086 13.1996 18.3835 13.2211 18.4495 13.2602C18.5154 13.2993 18.5701 13.3548 18.6084 13.4213L23.7752 22.3756C23.8144 22.4434 23.8351 22.5203 23.8351 22.5986C23.8352 22.6769 23.8146 22.7539 23.7754 22.8217C23.7362 22.8896 23.6799 22.9459 23.612 22.985C23.5441 23.0241 23.4672 23.0447 23.3888 23.0446H8.61173C8.53054 23.0447 8.45085 23.0227 8.38126 22.9809C8.31167 22.9391 8.25481 22.8791 8.21683 22.8074C8.17885 22.7356 8.16118 22.6548 8.16574 22.5738C8.1703 22.4927 8.19691 22.4145 8.2427 22.3474H8.24289Z" fill="white"/>', '<path d="M9.10168 12.8034C9.10168 13.3996 9.33855 13.9715 9.76017 14.3931C10.1818 14.8147 10.7536 15.0516 11.3499 15.0516C11.9462 15.0516 12.518 14.8147 12.9396 14.3931C13.3612 13.9715 13.5981 13.3996 13.5981 12.8034C13.5981 12.2071 13.3612 11.6353 12.9396 11.2137C12.518 10.792 11.9462 10.5552 11.3499 10.5552C10.7536 10.5552 10.1818 10.792 9.76017 11.2137C9.33855 11.6353 9.10168 12.2071 9.10168 12.8034Z" fill="white"/>', '<g filter="url(#filter0_f_25770_6783)">', '<path d="M18.4001 0L30.4001 12H21.6001C19.8328 12 18.4001 10.5673 18.4001 8.8V0Z" fill="#C9CAD6"/>', '</g>', '<path d="M19.2001 0L30.4001 11.2H22.4001C20.6328 11.2 19.2001 9.76731 19.2001 8V0Z" fill="#F2F2F3"/>', '</g>', '<defs>', '<filter id="filter0_f_25770_6783" x="14.4001" y="-4" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">', '<feFlood flood-opacity="0" result="BackgroundImageFix"/>', '<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>', '<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_25770_6783"/>', '</filter>', '<linearGradient id="paint0_linear_25770_6783" x1="1.6001" y1="0" x2="33.6001" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#ECECEC"/>', '<stop offset="1" stop-color="#D6DCE7"/>', '</linearGradient>', '<clipPath id="clip0_25770_6783">', '<rect width="32" height="32" fill="white"/>', '</clipPath>', '</defs>', '</svg>'].join('');
 export var mediaImageCardErrorUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(mediaImageCardErrorSvg);
 var mediaVideoCardErrorSvg = ['<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">', '<g clip-path="url(#clip0_25770_6789)">', '<path d="M1.6001 3.2C1.6001 1.43269 3.03279 0 4.8001 0H19.2024L30.4001 11.1914V28.8C30.4001 30.5673 28.9674 32 27.2001 32H4.8001C3.03279 32 1.6001 30.5673 1.6001 28.8V3.2Z" fill="url(#paint0_linear_25770_6789)"/>', '<path d="M13.4815 12.9907C13.2152 12.8215 12.8669 13.0128 12.8669 13.3283V21.8719C12.8669 22.1874 13.2152 22.3787 13.4815 22.2095L20.2025 17.9377C20.4497 17.7805 20.4497 17.4197 20.2025 17.2625L13.4815 12.9907Z" fill="white"/>', '<g filter="url(#filter0_f_25770_6789)">', '<path d="M18.4001 0L30.4001 12H21.6001C19.8328 12 18.4001 10.5673 18.4001 8.8V0Z" fill="#C9CAD6"/>', '</g>', '<path d="M19.2001 0L30.4001 11.2H22.4001C20.6328 11.2 19.2001 9.76731 19.2001 8V0Z" fill="#F2F2F3"/>', '</g>', '<defs>', '<filter id="filter0_f_25770_6789" x="14.4001" y="-4" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">', '<feFlood flood-opacity="0" result="BackgroundImageFix"/>', '<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>', '<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_25770_6789"/>', '</filter>', '<linearGradient id="paint0_linear_25770_6789" x1="1.6001" y1="0" x2="33.6001" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#ECECEC"/>', '<stop offset="1" stop-color="#D6DCE7"/>', '</linearGradient>', '<clipPath id="clip0_25770_6789">', '<rect width="32" height="32" fill="white"/>', '</clipPath>', '</defs>', '</svg>'].join('');

package/components/media/styles.js

@@ -13,11 +13,13 @@ var defaults = {
   },
   placeholderBg: 'linear-gradient(180deg, #F5F7FA 0%, #ECEFF4 100%)',
   placeholderColor: '#98A0AF',
-  audioCardBg: '#F3F4F6',
+  audioCardBg: '#F3F5F6',
   audioCardTextColor: '#3A3D52',
   overlayBg: 'rgba(15, 23, 42, 0.42)',
   errorTextColor: theme.color.danger,
-  loadingSpinnerColor: theme.color.primary,
+  get loadingSpinnerColor() {
+    return theme.color.primary;
+  },
   loadingSkeletonBase: '#EEF1F5',
   loadingSkeletonTo: '#F7F9FC',
   groupGap: '12px',
@@ -42,7 +44,7 @@ setDefault(function () {
   makeMediaViewerStyles == null || makeMediaViewerStyles.clearCache();
 });
 export var makeMediaStyles = cache(function makeMediaStyles(k) {
-  return /*#__PURE__*/css("&.", k, "-media{position:relative;display:inline-flex;flex:0 0 auto;width:", media.sizes.default, ";height:", media.sizes.default, ";vertical-align:top;box-sizing:border-box;}&.", k, "-media.", k, "-media-mini{width:", media.sizes.mini, ";height:", media.sizes.mini, ";}&.", k, "-media.", k, "-media-small{width:", media.sizes.small, ";height:", media.sizes.small, ";}&.", k, "-media.", k, "-media-large{width:", media.sizes.large, ";height:", media.sizes.large, ";}.", k, "-media-shell{position:relative;width:100%;height:100%;overflow:hidden;border-radius:", media.radius, ";background:", media.placeholderBg, ";box-shadow:inset 0 0 0 1px ", setAlpha('#111827', 0.08), ";}&.", k, "-media-loading .", k, "-media-shell{background:linear-gradient(\n                90deg,\n                ", media.loadingSkeletonBase, " 25%,\n                ", media.loadingSkeletonTo, " 37%,\n                ", media.loadingSkeletonBase, " 63%\n            );background-size:400% 100%;animation:", k, "-media-loading-wave 1.4s ease infinite;box-shadow:none;}&.", k, "-media-error .", k, "-media-shell,&.", k, "-media-custom-error .", k, "-media-shell{box-shadow:none;}&.", k, "-media-loading .", k, "-media-shell::before{content:none;}@keyframes ", k, "-media-loading-wave{0%{background-position:100% 50%;}100%{background-position:0 50%;}}.", k, "-media-image,.", k, "-media-video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;background:#DCE1E9;}&.", k, "-media-loading .", k, "-media-image,&.", k, "-media-loading .", k, "-media-video{background:transparent;}.", k, "-media-audio-loader{display:none;}.", k, "-media-audio-card,.", k, "-media-error-card{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:", media.audioCardBg, ";box-sizing:border-box;}.", k, "-media-card-icon{display:block;width:32px;height:32px;flex:0 0 auto;}.", k, "-media-name-tooltip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.", k, "-media-name-tooltip-trigger{position:absolute;inset:0;z-index:2;outline:none;}&.", k, "-media.", k, "-media-mini .", k, "-media-card-icon{width:24px;height:24px;}&.", k, "-media-loading .", k, "-media-audio-card,.", k, "-media-error-card{background:transparent;}.", k, "-media-placeholder{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:", media.placeholderBg, ";color:", media.placeholderColor, ";}.", k, "-media-placeholder .", k, "-icon{font-size:20px;}&.", k, "-media-loading .", k, "-media-placeholder{background:transparent;}&.", k, "-media-mini .", k, "-media-placeholder .", k, "-icon,&.", k, "-media-small .", k, "-media-placeholder .", k, "-icon{font-size:16px;}.", k, "-media-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:", media.overlayBg, ";opacity:0;pointer-events:none;transition:opacity ", theme.transition.middle, ";}.", k, "-media-preview-trigger,&.", k, "-media-custom-mask .", k, "-media-overlay{pointer-events:auto;}.", k, "-media-video-preview-trigger{position:absolute;inset:0;z-index:4;width:24px;height:24px;margin:auto;pointer-events:auto;}.", k, "-media-loading-indicator{position:absolute;top:3px;left:3px;z-index:3;display:flex;align-items:center;justify-content:center;width:14px;height:14px;pointer-events:none;}.", k, "-media-loading-spinner{width:12px;height:12px;border:1.5px solid ", setAlpha(media.loadingSpinnerColor, 0.22), ";border-top-color:", media.loadingSpinnerColor, ";border-radius:50%;box-sizing:border-box;animation:", k, "-media-loading-spinner 0.8s linear infinite;}@keyframes ", k, "-media-loading-spinner{100%{transform:rotate(360deg);}}.", k, "-media-state-layer{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}.", k, "-media-preview-trigger{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;border:none;border-radius:0;background:transparent;color:#FFFFFF;cursor:pointer;transition:opacity ", theme.transition.middle, ";}.", k, "-media-preview-trigger:focus{outline:none;}.", k, "-media-preview-trigger .", k, "-icon,.", k, "-media-preview-trigger.ion{font-size:18px;}&.", k, "-media-mini .", k, "-media-preview-trigger .", k, "-icon,&.", k, "-media-small .", k, "-media-preview-trigger .", k, "-icon,&.", k, "-media-mini .", k, "-media-preview-trigger.ion,&.", k, "-media-small .", k, "-media-preview-trigger.ion{font-size:14px;}&.", k, "-media-mini .", k, "-media-video-preview-trigger,&.", k, "-media-small .", k, "-media-video-preview-trigger{width:18px;height:18px;}.", k, "-media-preview-trigger:hover:not(:disabled){background:transparent;}.", k, "-media-preview-trigger:disabled{opacity:0.5;cursor:not-allowed;}&.", k, "-media-mini .", k, "-media-loading-spinner,&.", k, "-media-small .", k, "-media-loading-spinner{width:10px;height:10px;border-width:1px;}&.", k, "-media-mini .", k, "-media-loading-indicator,&.", k, "-media-small .", k, "-media-loading-indicator{top:4px;left:4px;width:10px;height:10px;}&.", k, "-media-previewable:hover .", k, "-media-overlay{opacity:1;}&.", k, "-media-custom-mask:hover .", k, "-media-overlay{opacity:1;}&.", k, "-media-video-play-visible:hover .", k, "-media-overlay{opacity:1;}.", k, "-media-preview-icon.", k, "-icon,.", k, "-media-preview-icon.ion{color:inherit;}");
+  return /*#__PURE__*/css("&.", k, "-media{position:relative;display:inline-flex;flex:0 0 auto;width:", media.sizes.default, ";height:", media.sizes.default, ";vertical-align:top;box-sizing:border-box;}&.", k, "-media.", k, "-media-mini{width:", media.sizes.mini, ";height:", media.sizes.mini, ";}&.", k, "-media.", k, "-media-small{width:", media.sizes.small, ";height:", media.sizes.small, ";}&.", k, "-media.", k, "-media-large{width:", media.sizes.large, ";height:", media.sizes.large, ";}.", k, "-media-shell{position:relative;width:100%;height:100%;overflow:hidden;border-radius:", media.radius, ";background:", media.placeholderBg, ";box-shadow:inset 0 0 0 1px ", setAlpha('#111827', 0.08), ";}&.", k, "-media-loading .", k, "-media-shell{background:linear-gradient(\n                90deg,\n                ", media.loadingSkeletonBase, " 25%,\n                ", media.loadingSkeletonTo, " 37%,\n                ", media.loadingSkeletonBase, " 63%\n            );background-size:400% 100%;animation:", k, "-media-loading-wave 1.4s ease infinite;box-shadow:none;}&.", k, "-media-error .", k, "-media-shell,&.", k, "-media-custom-error .", k, "-media-shell{box-shadow:none;}&.", k, "-media-loading .", k, "-media-shell::before{content:none;}@keyframes ", k, "-media-loading-wave{0%{background-position:100% 50%;}100%{background-position:0 50%;}}.", k, "-media-image,.", k, "-media-video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;background:#DCE1E9;}&.", k, "-media-loading .", k, "-media-image,&.", k, "-media-loading .", k, "-media-video{background:transparent;}.", k, "-media-visual-hidden{display:none;}.", k, "-media-audio-loader{display:none;}.", k, "-media-audio-card,.", k, "-media-error-card{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:", media.audioCardBg, ";box-sizing:border-box;}.", k, "-media-card-icon{display:block;width:32px;height:32px;flex:0 0 auto;}.", k, "-media-name-tooltip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.", k, "-media-name-tooltip-trigger{position:absolute;inset:0;z-index:2;outline:none;}&.", k, "-media.", k, "-media-mini .", k, "-media-card-icon{width:24px;height:24px;}.", k, "-media-error-card{background:transparent;}.", k, "-media-placeholder{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:", media.placeholderBg, ";color:", media.placeholderColor, ";}.", k, "-media-placeholder .", k, "-icon{font-size:20px;}.", k, "-media-placeholder-asset{display:block;width:16px;height:16px;flex:0 0 auto;}&.", k, "-media-loading .", k, "-media-placeholder{background:transparent;}&.", k, "-media-mini .", k, "-media-placeholder .", k, "-icon,&.", k, "-media-small .", k, "-media-placeholder .", k, "-icon{font-size:16px;}.", k, "-media-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:", media.overlayBg, ";opacity:0;pointer-events:none;transition:opacity ", theme.transition.middle, ";}.", k, "-media-loading-overlay{position:absolute;inset:0;z-index:2;background:", media.overlayBg, ";pointer-events:none;}.", k, "-media-preview-trigger,&.", k, "-media-custom-mask .", k, "-media-overlay{pointer-events:auto;}.", k, "-media-video-preview-trigger{position:absolute;inset:0;z-index:4;width:24px;height:24px;margin:auto;pointer-events:auto;}.", k, "-media-loading-indicator{position:absolute;top:3px;left:3px;z-index:3;display:flex;align-items:center;justify-content:center;width:14px;height:14px;pointer-events:none;}.", k, "-media-loading-spinner{width:12px;height:12px;border:1.5px solid ", setAlpha(media.loadingSpinnerColor, 0.22), ";border-top-color:", media.loadingSpinnerColor, ";border-radius:50%;box-sizing:border-box;animation:", k, "-media-loading-spinner 0.8s linear infinite;}.", k, "-media-loading-video-icon{position:absolute;inset:0;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:auto;color:#FFFFFF;font-size:18px;line-height:1;pointer-events:none;}@keyframes ", k, "-media-loading-spinner{100%{transform:rotate(360deg);}}.", k, "-media-state-layer{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}.", k, "-media-preview-trigger{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;border:none;border-radius:0;background:transparent;color:#FFFFFF;cursor:pointer;transition:opacity ", theme.transition.middle, ";}.", k, "-media-preview-trigger:focus{outline:none;}.", k, "-media-preview-trigger .", k, "-icon,.", k, "-media-preview-trigger.ion{font-size:18px;}&.", k, "-media-mini .", k, "-media-preview-trigger .", k, "-icon,&.", k, "-media-small .", k, "-media-preview-trigger .", k, "-icon,&.", k, "-media-mini .", k, "-media-preview-trigger.ion,&.", k, "-media-small .", k, "-media-preview-trigger.ion{font-size:14px;}&.", k, "-media-mini .", k, "-media-video-preview-trigger,&.", k, "-media-small .", k, "-media-video-preview-trigger{width:18px;height:18px;}.", k, "-media-preview-trigger:hover:not(:disabled){background:transparent;}.", k, "-media-preview-trigger:disabled{opacity:0.5;cursor:not-allowed;}&.", k, "-media-mini .", k, "-media-loading-spinner,&.", k, "-media-small .", k, "-media-loading-spinner{width:10px;height:10px;border-width:1px;}&.", k, "-media-mini .", k, "-media-loading-indicator,&.", k, "-media-small .", k, "-media-loading-indicator{top:4px;left:4px;width:10px;height:10px;}&.", k, "-media-previewable:hover .", k, "-media-overlay{opacity:1;}&.", k, "-media-custom-mask:hover .", k, "-media-overlay{opacity:1;}&.", k, "-media-video-play-visible:hover .", k, "-media-overlay{opacity:1;}.", k, "-media-preview-icon.", k, "-icon,.", k, "-media-preview-icon.ion{color:inherit;}");
 });
 export var makeMediaGroupStyles = cache(function makeMediaGroupStyles(k) {
   return /*#__PURE__*/css("&.", k, "-media-group{display:inline-flex;flex-wrap:wrap;gap:", media.groupGap, ";align-items:flex-start;max-width:100%;}");

package/components/media/useMedia.d.ts

@@ -12,6 +12,7 @@ export declare function useMedia(): {
     isLoading: () => boolean;
     isError: () => boolean;
     isDone: () => boolean;
+    shouldShowVisualMediaContent: () => boolean;
     shouldShowLoadingIndicator: () => boolean;
     shouldShowImage: () => boolean;
     shouldShowVideo: () => boolean;
@@ -55,8 +56,11 @@ export declare function useMedia(): {
         width: string;
         height: string;
     } | undefined;
-    getPreviewIconClassName: () => "ion-ios-eye-outline" | "ion-ios-play";
-    getPlaceholderIconClassName: () => "ion-videocamera" | "ion-ios-musical-note" | "ion-image";
+    shouldShowLoadingOverlay: () => boolean;
+    shouldShowLoadingVideoIcon: () => boolean;
+    getPreviewIconClassName: () => "k-icon-visible" | "ion-ios-play";
+    getPlaceholderIconClassName: () => "" | "ion-ios-musical-note";
+    getPlaceholderAssetSrc: () => string;
     getPreviewTitle: () => "播放视频" | "播放音频" | "查看图片";
     onClick: (e: MouseEvent) => void;
     onPreview: (e: any) => void;

package/components/media/useMedia.js

@@ -3,7 +3,7 @@ import { createRef, nextTick, onMounted, onUnmounted, useInstance } from 'intact
 import { useConfigContext } from '../config';
 import { MediaGroupContext } from './context';
 import { getMediaDisplayName, isNamedMediaSize, normalizeMediaLength, parseMediaPixelLength, resolveMediaType } from './mediaUtils';
-import { mediaAudioCardErrorUrl, mediaAudioCardUrl, mediaImageCardErrorUrl, mediaVideoCardErrorUrl } from './mediaAssets';
+import { mediaAudioCardErrorUrl, mediaAudioCardUrl, mediaImageCardErrorUrl, mediaImagePlaceholderUrl, mediaVideoCardErrorUrl, mediaVideoPlaceholderUrl } from './mediaAssets';
 export function useMedia() {
   var instance = useInstance();
   var config = useConfigContext();
@@ -73,6 +73,9 @@ export function useMedia() {
   function isDone() {
     return getDisplayStatus() === 'done';
   }
+  function isMediaReady() {
+    return getInternalStatus() === 'done' || isDone();
+  }
   // 自定义遮罩层仅在 default/done 展示，避免与 loading/error 状态层冲突。
   function shouldShowMaskLayer() {
     var status = getDisplayStatus();
@@ -82,7 +85,7 @@ export function useMedia() {
     return !!instance.get('showPreview') && hasSource() && isDone();
   }
   function shouldShowVideoPlayTrigger() {
-    return !!instance.get('showPreview') && shouldShowVideo();
+    return !!instance.get('showPreview') && shouldShowVideo() && isDone();
   }
   // 事件和插槽使用的公共媒体信息。
   function getValue() {
@@ -147,6 +150,9 @@ export function useMedia() {
   function shouldShowVideo() {
     return getResolvedType() === 'video' && hasSource() && !isError();
   }
+  function shouldShowVisualMediaContent() {
+    return isMediaReady();
+  }
   function shouldShowAudioLoader() {
     return getResolvedType() === 'audio' && hasSource() && !isError();
   }
@@ -157,7 +163,7 @@ export function useMedia() {
     return isError();
   }
   function shouldShowPlaceholder() {
-    return !shouldShowImage() && !shouldShowVideo() && !shouldShowErrorCard();
+    return (!shouldShowImage() || !shouldShowVisualMediaContent()) && (!shouldShowVideo() || !shouldShowVisualMediaContent()) && !shouldShowErrorCard();
   }
   // poster 是组件级视频封面，不从 videoProps 中读取。
   function getPosterSource() {
@@ -203,6 +209,13 @@ export function useMedia() {
   function shouldShowLoadingIndicator() {
     return isLoading();
   }
+  function shouldShowLoadingOverlay() {
+    var type = getResolvedType();
+    return isLoading() && hasSource() && shouldShowVisualMediaContent() && (type === 'image' || type === 'video');
+  }
+  function shouldShowLoadingVideoIcon() {
+    return isLoading() && getResolvedType() === 'video' && hasSource() && shouldShowVisualMediaContent();
+  }
   // 去掉已被组件接管的事件键，避免作为普通 attribute 透传到 DOM。
   function omitNativeHandlers(props, keys) {
     var nextProps = _extends({}, props);
@@ -273,13 +286,18 @@ export function useMedia() {
     });
   }
   function getPreviewIconClassName() {
-    return getResolvedType() === 'image' ? 'ion-ios-eye-outline' : 'ion-ios-play';
+    return getResolvedType() === 'image' ? 'k-icon-visible' : 'ion-ios-play';
   }
   function getPlaceholderIconClassName() {
     var resolvedType = getResolvedType();
-    if (resolvedType === 'video') return 'ion-videocamera';
     if (resolvedType === 'audio') return 'ion-ios-musical-note';
-    return 'ion-image';
+    return '';
+  }
+  function getPlaceholderAssetSrc() {
+    var resolvedType = getResolvedType();
+    if (resolvedType === 'video') return mediaVideoPlaceholderUrl;
+    if (resolvedType === 'image') return mediaImagePlaceholderUrl;
+    return '';
   }
   function getPreviewTitle() {
     var resolvedType = getResolvedType();
@@ -438,6 +456,7 @@ export function useMedia() {
     isLoading: isLoading,
     isError: isError,
     isDone: isDone,
+    shouldShowVisualMediaContent: shouldShowVisualMediaContent,
     shouldShowLoadingIndicator: shouldShowLoadingIndicator,
     shouldShowImage: shouldShowImage,
     shouldShowVideo: shouldShowVideo,
@@ -455,8 +474,11 @@ export function useMedia() {
     getAudioCardAssetSrc: getAudioCardAssetSrc,
     getErrorCardAssetSrc: getErrorCardAssetSrc,
     getMediaCardIconStyle: getMediaCardIconStyle,
+    shouldShowLoadingOverlay: shouldShowLoadingOverlay,
+    shouldShowLoadingVideoIcon: shouldShowLoadingVideoIcon,
     getPreviewIconClassName: getPreviewIconClassName,
     getPlaceholderIconClassName: getPlaceholderIconClassName,
+    getPlaceholderAssetSrc: getPlaceholderAssetSrc,
     getPreviewTitle: getPreviewTitle,
     onClick: onClick,
     onPreview: onPreview,