@shijiu/jsview-vue 2.2.426-test.0 → 2.3.151-test.0

package/bin/types/utils/JsViewVueWidget/JsvVisibleSensor/index.d.ts

@@ -18,8 +18,8 @@ declare const _default: {
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {
             $props: {
-                readonly left?: number | undefined;
                 readonly top?: number | undefined;
+                readonly left?: number | undefined;
                 readonly enable?: boolean | undefined;
                 readonly width?: number | undefined;
                 readonly height?: number | undefined;
@@ -50,8 +50,8 @@ declare const _default: {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<{
         $props: {
-            readonly left?: number | undefined;
             readonly top?: number | undefined;
+            readonly left?: number | undefined;
             readonly enable?: boolean | undefined;
             readonly width?: number | undefined;
             readonly height?: number | undefined;
@@ -66,8 +66,8 @@ declare const _default: {
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {
     $props: {
-        readonly left?: number | undefined;
         readonly top?: number | undefined;
+        readonly left?: number | undefined;
         readonly enable?: boolean | undefined;
         readonly width?: number | undefined;
         readonly height?: number | undefined;

package/bin/types/utils/JsViewVueWidget/index.d.ts

@@ -8,7 +8,6 @@ export { default as JsvApic } from "./JsvApic/JsvApic";
 export { default as JsvApic2 } from "./JsvApic/JsvApic2";
 export { default as JsvQrcode } from "./JsvQrcode/JsvQrcode.vue";
 export { default as JsvSpray } from "./JsvSpray/JsvSpray.vue";
-export { default as JsvSwiper } from "./JsvSwiper";
 export { default as JsvSwiper3D } from "./JsvSwiper3D";
 export { default as JsvVisibleSensor } from "./JsvVisibleSensor";
 export { default as JsvFilterView } from "./JsvFilterView.vue";
@@ -32,12 +31,16 @@ export { JsvMindMap } from "./JsvMindMap";
 export { default as JsvFragShaderView } from "./JsvFragShaderView";
 export { default as JsvTouchModeSwitcher } from "./JsvTouchModeSwitcher.vue";
 export { default as JsvDragBox } from "./JsvDragBox/JsvDragBox.vue";
+export { default as Jsv3dDiv } from "./Jsv3dDiv.vue";
+export { default as Jsv3dStage } from "./Jsv3dStage.vue";
+export { default as JsvDashPath } from "./JsvDashPath.vue";
 import JsvNativeSharedDiv from "./JsvNativeSharedDiv.vue";
 export { JsvNativeSharedDiv as JsvTransparentDiv, JsvNativeSharedDiv };
 export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
 export { LoopType, ApicEndState } from "./JsvApic/JsvCommonLoopToolBase.js";
 export { default as JsvInput, InputType } from "./JsvInput";
 export { default as JsvPreload, buildPreloadInfo, buildDownloadInfo } from "./JsvPreload";
+export { JsvSwiper, JsvSwiper2, JsvSmoothSwiper } from "./JsvSwiper";
 export { default as JsvTextureAnim, TexAlignAnchor, DECORATE_NINEPATCH_ALPHA_MIX, DECORATE_BORDER_RADIUS } from "./JsvTextureAnim";
 export { default as JsvGrid, PageType, LineType, FocusMoveType } from "./JsvGrid.vue";
 export { default as JsvRipple, JsvRippleShape } from "./JsvRipple";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "2.2.426-test.0",
+  "version": "2.3.151-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/utils/JsViewEngineWidget/CheckType.js

@@ -44,10 +44,10 @@ function checkType(value, type) {
     let valid;
     const expectedType = getTypeName(t);
     if (isSimpleType(expectedType)) {
-      const t = typeof v;
-      valid = t === expectedType.toLowerCase();
+      const valueType = typeof v;
+      valid = valueType === expectedType.toLowerCase();
       // for primitive wrapper objects
-      if (!valid && t === 'object') {
+      if (!valid && valueType === 'object') {
         valid = v instanceof t;
       }
     }

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusBlock.vue

@@ -221,16 +221,29 @@ onUnmounted(() => {
 });
 
 onActivated(() => {
-  //TODO 首次mounted后会调用onActivated, 考虑避免重复添加
-  focusNodeRef = toRaw(fDivRef.value)?.FocusNodeRef;
-  _mountToFocusSystem();
+  if (fDivRef.value == null) {
+    console.log("FocusBlock onActivated but not mounted name=" + props.name);
+    return;
+  }
 
-  if (!!props.autoFocus || props.autoFocus === "") {
-    requestFocus(props.autoFocus !== "exact");
+  if (focusNodeRef == null) {
+    focusNodeRef = toRaw(fDivRef.value)?.FocusNodeRef;
+    _mountToFocusSystem();
+
+    if (!!props.autoFocus || props.autoFocus === "") {
+      requestFocus(props.autoFocus !== "exact");
+    }
+  } else {
+    // 首次mounted后会调用onActivated, 考虑避免重复添加
   }
 });
 
 onDeactivated(() => {
+  if (fDivRef.value == null) {
+    console.log("FocusBlock onDeactivated but not mounted name=" + props.name);
+    return;
+  }
+
   focusNodeRef?.onUnMount(true);
   if (focusNodeRef?.jsvVueComponent) {
     focusNodeRef.jsvVueComponent = undefined;
@@ -242,7 +255,13 @@ defineExpose(exportObject);
 </script>
 
 <template>
-  <fdiv ref="fDivRef" :fname="name" :new-namespace="namespace" :style="style" :data-jsv-focusable="focusable ?? !namespace">
+  <fdiv
+    ref="fDivRef"
+    :fname="name"
+    :new-namespace="namespace"
+    :style="style"
+    :data-jsv-focusable="focusable ?? !namespace"
+  >
     <slot></slot>
   </fdiv>
 </template>

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusHub.ts

@@ -43,7 +43,8 @@ class JsvFocusHubApi {
      * getCurrentFocus
      * 
      * 获取当前焦点的的 focusName 信息，用于后续的进行的 setFocus 操作
-     * (注意, 不带NameSpace)
+     * (注意1: 获取的NameSpace不带NameSpace)
+     * (注意2: 如果当前状态所设焦点还没Mounted时，也会返回null)
      * 
      * @return {string} 当前焦点的focusName
      */
@@ -117,6 +118,31 @@ class JsvFocusHubApi {
     public getCurrentFocusStack(): Array<Object> {
         return this._FocusHub.getCurrentFocusStack();
     }
+
+    /**
+     * addFocusChangeListener
+     * 
+     * 添加焦点变化监听器, 主要用来追踪焦点name的变化，例如路由切换的场景
+     * 
+     * @param {Function} listener 焦点变化监听器, 参数为 {focusName: string}
+     * @param {boolean} onRequest 监听时机，true: 在focus请求时即回调，无论节点是否存在；
+     *                             false: 在节点真实存在后，确认进行focus时才回调(在正准备Focus()调用前)
+     */
+    addFocusChangeListener(listener: Function, onRequest: boolean = false) {
+        this._FocusHub.addFocusChangeListener(listener, onRequest);
+    }
+
+    /**
+     * removeFocusChangeListener
+     * 
+     * 删除焦点变化监听器
+     * 
+     * @param {Function} listener 由addFocusChangeListener添加的变化监听器
+     * @param {boolean} onRequest 和addFocusChangeListener时设置的参数要完全对应
+     */
+    removeFocusChangeListener(listener: Function, onRequest: boolean = false) {
+        this._FocusHub.delFocusChangeListener(listener, onRequest);
+    }
 }
 
 const ROOT_HUB_PROVIDE_NAME = "__jsvFocusRootHub__";

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusManager.ts

@@ -25,8 +25,11 @@ export class JsvFocusManager {
   // #aliasMap = {}
   private $_appMount: any = undefined;
   private $_topFDiv: any = undefined;
+  private $_autoSearchFocus: boolean = false;
 
-  constructor() { }
+  constructor(config: any) {
+    this.$_autoSearchFocus = config.autoSearchFocus;
+  }
 
   install(app: any, ...options: any) {
     console.log("JsvFocusManager install");
@@ -98,6 +101,7 @@ export class JsvFocusManager {
   $_hookMount(app: any, rootNodeId: any) {
     rootNodeId = rootNodeId.replace("#", "");
     this.$_topFDiv = (document as any).jsvInitFDivRoot(rootNodeId);
+    this.$_topFDiv.enableAutoSearchFocus(this.$_autoSearchFocus);
     this.$_appMount = app.mount.bind(app);
 
     return this.$_doAppMount.bind(this);
@@ -115,8 +119,23 @@ export class JsvFocusManager {
   }
 }
 
-function jsvCreateFocusManager() {
-  return new JsvFocusManager();
+/**
+ * 创建 JsView 焦点管理器
+ * 
+ * @param {Object} config: 对象设置，子参数有{
+ *                autoSearchFocus{boolean}: 是否开启自动寻焦，默认为false(兼容旧代码)
+ *             }
+ * @return JsvFocusManager
+ */
+function jsvCreateFocusManager(config: Object | null = null) {
+  let defualt_config = {
+    autoSearchFocus: false
+  };
+
+  return new JsvFocusManager({
+    ...defualt_config,
+    ...config
+  });
 }
 
 export { jsvCreateFocusManager, useFocusHub };

package/utils/JsViewEngineWidget/MetroWidget/DebugFrame.vue

@@ -0,0 +1,22 @@
+<script setup>
+import JsvNinePatch from "../../JsViewVueWidget/JsvNinePatch.vue";
+
+const props = defineProps({
+  width: Number,
+  height: Number,
+  sourceId: String,
+})
+</script>
+<template>
+  <JsvNinePatch
+    :style="{
+      width: width,
+      height: height,
+    }"
+    :imageUrl="`jsvtexturestore://${sourceId}`"
+    :imageWidth="20"
+    :centerWidth="1"
+    :imageDspWidth="20"
+    :borderOutset="2"
+  />
+</template>

package/utils/JsViewEngineWidget/MetroWidget/DebugTools.ts

@@ -0,0 +1,37 @@
+import { JsvTextureStoreApi } from "../../JsViewVueTools"
+
+export const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor + "99"
+  );
+};
+
+const RandomColorPool = [
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#00FFFF",
+  "#FF00FF",
+]
+export function createCanvasText(width: number) {
+  
+  let canvasRef = JsvTextureStoreApi.canvasTexture(
+    width,
+    width
+  ); // 创建画布
+
+  let customPath = canvasRef.rectPath(0, 0, width, width);
+  if (customPath) {
+    customPath.stroke(5, RandomColorPool[Math.floor(Math.random() * RandomColorPool.length)]); // 以给定线宽绘制圆环
+  }
+  let sourceId = canvasRef.commit(); // texture和div的textureStore绑定
+  const releaseHandler = () => {
+    JsvTextureStoreApi.deleteTexture(sourceId); // 释放texture资源
+  }
+  return {
+    sourceId,
+    releaseHandler,
+  }
+}

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -2,7 +2,7 @@
  * @file 只显示单列/行的MetroWidget
 -->
 <script setup>
-import { ref, shallowRef, computed, reactive, onMounted } from "vue";
+import { ref, shallowRef, computed, reactive, onMounted, onBeforeUnmount } from "vue";
 import { setup } from "./MetroWidgetSetup";
 import {
   VERTICAL,
@@ -12,6 +12,8 @@ import {
   RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
+import DebugFrame from "./DebugFrame.vue";
+import { createCanvasText } from "./DebugTools.ts";
 
 const props = defineProps({
   padding: {
@@ -147,6 +149,14 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  enableLongPress: {
+    type: Boolean,
+    default: false,
+  },
+  enableDebug: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
@@ -181,13 +191,14 @@ const {
   focusBlockOnFocus,
   focusBlockOnBlur,
   focusBlockOnKeyDown,
+  focusBlockOnKeyUp,
   focusBlockOnCustomEvent,
   _onFocusableItemEdge,
   exportObject,
   onTouchDown,
   onTouchRelease,
   currentFocusIndex,
-  onDispatchKeyDown
+  onDispatchKeyDown,
 } = setup(
   props,
   itemRender,
@@ -203,6 +214,15 @@ const {
   "list"
 );
 
+let debugFrameSourceId = "";
+let debugFrameSourceReleaseHandler = null;
+if (props.enableDebug) {
+  const sourceInfo = createCanvasText(20);
+  debugFrameSourceId = sourceInfo.sourceId;
+  debugFrameSourceReleaseHandler = sourceInfo.releaseHandler;
+}
+
+
 onMounted(() => {
   if (onTouchRelease) {
     touchDiv.value.jsvSetTapListener(
@@ -216,6 +236,14 @@ onMounted(() => {
   }
 });
 
+onBeforeUnmount(() => {
+  if (props.enableDebug) {
+    debugFrameSourceReleaseHandler?.();
+    debugFrameSourceReleaseHandler = null;
+    debugFrameSourceId = "";
+  }
+});
+
 defineExpose(exportObject);
 </script>
 
@@ -262,8 +290,9 @@ defineExpose(exportObject);
                 onFocus: focusBlockOnFocus,
                 onBlur: focusBlockOnBlur,
                 onKeyDown: focusBlockOnKeyDown,
+                onKeyUp: focusBlockOnKeyUp,
                 onCustomEvent: focusBlockOnCustomEvent,
-                onDispatchKeyDown
+                onDispatchKeyDown,
               }"
             >
               <div
@@ -286,6 +315,12 @@ defineExpose(exportObject);
                 }"
                 @click="item.onTap.value"
               >
+                <DebugFrame
+                  v-if="enableDebug"
+                  :width="item.templateInfo.width"
+                  :height="item.templateInfo.height"
+                  :sourceId="debugFrameSourceId"
+                ></DebugFrame>
                 <div
                   v-if="
                     !enableItemRenderBreak || item.mounted.value || itemRender
@@ -305,10 +340,10 @@ defineExpose(exportObject);
                 </div>
                 <div
                   v-if="
-                    enableItemRenderBreak 
-                    && placeHolderSetting 
-                    && !item.mounted.value
-                    && item.itemConfig.showSkeleton
+                    enableItemRenderBreak &&
+                    placeHolderSetting &&
+                    !item.mounted.value &&
+                    item.itemConfig.showSkeleton
                   "
                   :style="{
                     width: item.renderStyle.width - normalizedPlaceHolder.gap,

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -23,7 +23,7 @@
  *      name {string} 用于设置焦点的名称
  *      padding {object} 控件内边距， 默认为{left: 0, right: 0, top: 0, bottom: 0}
  *      direction {enum} (必选)控件方向 HORIZONTAL/VERTICAL
- *      focusMoveType {int} 焦点移动的模式, 可通过 | 运算进行组合
+ *      focusMoveType {int} 焦点移动的模式, 可通过 | 运算进行组合. 这些常量在FocusMoveType对象中, 需要import { FocusMoveType } from 'jsview'
                           NO_ADJUST: 无特殊处理
                           COLUMN_LOOP: 到达列首/尾后跳转到上/下一列, 只在水平滚动时生效
                           ROW_LOOP: 到达行首/尾后跳转到上/下一行, 只在竖直滚动时生效
@@ -58,6 +58,9 @@
                                       focusBackgroundColor: 获焦时的颜色
                                       borderRadius: 占位符圆角设置
                                       gap: 占位符之间的gap
+                                      logoUrl: 占位符logo的url
+                                      logoWidth: 占位符logo的宽度
+                                      logoHeight: 占位符logo的高度
                                     }
  *      sendFocusRectEvent {boolean} item获焦时在焦点树上冒泡一个事件, MetroWidget接收到事件时会触发滚动操作, 一般用于嵌套
                                      时的滚动
@@ -84,7 +87,9 @@
                                           uid {string}: item的uid, 可以通过uid来设置焦点
                                           permanent {boolean}: 出去与是否保留
                                           enableTap {boolean}: 是否接受触控tap
-                                          showSkeleton {boolean}: 打断描画时, 是否显示骨架图
+                                          showSkeleton {boolean}: 打断描画时, 是否显示骨架图, 默认为true
+                                          enableLongPress {boolean}: item是否支持长按, 默认值为props.enableLongPress
+                                          placeHolderLayout{{left: number, top: number, width: number, height: number}}: 占位符的布局信息
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -100,11 +105,14 @@
                                 totalSize: 所有item的总长
  *      onFocusRectChange {() => void} 焦点区域变化的回调
  *      onAllItemResizeDone {() => void} 所有item resize完成的回调
+ *      onFocusChange {(id: number) => void} 焦点变化的回调
  *      loadAll {boolean} 加载不显示的view，触控场景使用
  *      flingPageWidth {}
  *      flingPageEdge {}
  *      disableClip {boolean} 取消显示范围的clipView
  *      touchFlag {int} 触控的开关, 0:关闭, 1:打开. 打开后支持drag, fling; item的tap则由measuresObject的enableTap控制
+ *      enableLongPress {boolean} 支持长按, 长按模式下, onkeyup时触发onclick, 长按触发后, onclik不触发
+ *      enableDebug {boolean} 显示debug用的item框
  
  *    methods:
         getFocusBlockRef 获取此MetroWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
@@ -215,7 +223,10 @@
         setSensorSensitivity
           @description 触控模式下, 设置运动回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低
           @params {number} sensitivity 敏感度, 等于0时关闭触控的移动监听
-                
+        getItemLayoutInfo
+          @description 获取 item 的布局位置信息, index对应的item不存在时, 返回null
+          @params {number} index item 的 index
+          @return {object} {left: number, top: number, width: number, height: number} | null
   slots:
     renderItem: 该slot用于描画每个单元格
     background: 该slot描画在item后, 一般用于描画需要跟随MetroWidget滚动的内容
@@ -246,7 +257,13 @@
                 }
  *    onItemEdge: 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
  *    onAction: 单元格内控件需要通过onAction.register方法向MetroWidget注册 item 的回调，回调函数有
-                onFocus， onBlur， onClick, onWidgetEdge
+                onFocus: widget获焦状态下, item获焦的回调
+                onBlur: widget获焦状态下, item失焦的回调
+                onGaze: item获焦的回调, 无论widget是否为获焦状态
+                onIgnore: itemh失焦的回调, 无论widget是否为获焦状态
+                onClick: item点击的回调
+                onWidgetEdge: 到达边缘的回调
+                onLongPress: item长按的回调
  * 
  * Q: 如何进行布局，定制每个格的尺寸？
  * A: 首先选定一个布局的方式，一列列地横向布局(HROIZONTAL)还是一行行地纵向(VERTICAL)布局，设置给属性direction
@@ -275,7 +292,14 @@
 -->
 
 <script setup>
-import { ref, shallowRef, computed, reactive, onMounted } from "vue";
+import {
+  ref,
+  shallowRef,
+  computed,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
 import { setup } from "./MetroWidgetSetup";
 import SlotComponent from "./SlotComponent.vue";
 import {
@@ -286,6 +310,8 @@ import {
   RENDER_ITEM_BREAK_KEY,
 } from "../WidgetCommon";
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
+import DebugFrame from "./DebugFrame.vue";
+import { createCanvasText } from "./DebugTools.ts";
 
 const props = defineProps({
   padding: {
@@ -421,6 +447,14 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  enableLongPress: {
+    type: Boolean,
+    default: false,
+  },
+  enableDebug: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
@@ -440,8 +474,21 @@ const touchDivSize = reactive({
 });
 
 const normalizedPlaceHolder = computed(() => {
+  let logoInfo = null;
+  if (
+    typeof props.placeHolderSetting.logoUrl == "string" &&
+    typeof props.placeHolderSetting.logoWidth == "number" &&
+    typeof props.placeHolderSetting.logoHeight == "number"
+  ) {
+    logoInfo = {
+      url: props.placeHolderSetting.logoUrl,
+      width: props.placeHolderSetting.logoWidth,
+      height: props.placeHolderSetting.logoHeight,
+    };
+  }
   return {
     gap: props.placeHolderSetting.gap ?? 0,
+    logoInfo: logoInfo,
     borderRadius: props.placeHolderSetting.borderRadius ?? 0,
     backgroundColor: props.placeHolderSetting.backgroundColor,
     focusBackgroundColor:
@@ -455,6 +502,7 @@ const {
   focusBlockOnFocus,
   focusBlockOnBlur,
   focusBlockOnKeyDown,
+  focusBlockOnKeyUp,
   focusBlockOnCustomEvent,
   _onFocusableItemEdge,
   exportObject,
@@ -462,7 +510,7 @@ const {
   onTouchRelease,
   currentFocusIndex,
   modeForExport,
-  onDispatchKeyDown
+  onDispatchKeyDown,
 } = setup(
   props,
   itemRender,
@@ -478,6 +526,14 @@ const {
   "common"
 );
 
+let debugFrameSourceId = "";
+let debugFrameSourceReleaseHandler = null;
+if (props.enableDebug) {
+  const sourceInfo = createCanvasText(20);
+  debugFrameSourceId = sourceInfo.sourceId;
+  debugFrameSourceReleaseHandler = sourceInfo.releaseHandler;
+}
+
 onMounted(() => {
   if (onTouchRelease) {
     touchDiv.value.jsvSetTapListener(
@@ -491,6 +547,14 @@ onMounted(() => {
   }
 });
 
+onBeforeUnmount(() => {
+  if (props.enableDebug) {
+    debugFrameSourceReleaseHandler?.();
+    debugFrameSourceReleaseHandler = null;
+    debugFrameSourceId = "";
+  }
+});
+
 defineExpose(exportObject);
 </script>
 
@@ -537,6 +601,7 @@ defineExpose(exportObject);
                 onFocus: focusBlockOnFocus,
                 onBlur: focusBlockOnBlur,
                 onKeyDown: focusBlockOnKeyDown,
+                onKeyUp: focusBlockOnKeyUp,
                 onCustomEvent: focusBlockOnCustomEvent,
                 onDispatchKeyDown,
               }"
@@ -561,6 +626,12 @@ defineExpose(exportObject);
                 }"
                 @click="item.onTap.value"
               >
+                <DebugFrame
+                  v-if="enableDebug"
+                  :width="item.templateInfo.width"
+                  :height="item.templateInfo.height"
+                  :sourceId="debugFrameSourceId"
+                ></DebugFrame>
                 <div
                   v-if="
                     !enableItemRenderBreak || item.mounted.value || itemRender
@@ -582,21 +653,34 @@ defineExpose(exportObject);
                 </div>
                 <div
                   v-if="
-                    enableItemRenderBreak 
-                    && placeHolderSetting 
-                    && !item.mounted.value
-                    && item.itemConfig.showSkeleton
+                    enableItemRenderBreak &&
+                    placeHolderSetting &&
+                    !item.mounted.value &&
+                    item.itemConfig.showSkeleton
                   "
                   :style="{
-                    width: item.renderStyle.width - normalizedPlaceHolder.gap,
-                    height: item.renderStyle.height - normalizedPlaceHolder.gap,
+                    left: item.placeHolderLayout.left,
+                    top: item.placeHolderLayout.top,
+                    width: item.placeHolderLayout.width,
+                    height: item.placeHolderLayout.height,
                     backgroundColor:
                       currentFocusIndex == item.index && modeForExport == 2
                         ? normalizedPlaceHolder.focusBackgroundColor
                         : normalizedPlaceHolder.backgroundColor,
                     borderRadius: normalizedPlaceHolder.borderRadius,
                   }"
-                ></div>
+                >
+                  <img
+                    v-if="normalizedPlaceHolder.logoInfo"
+                    :src="`url(${normalizedPlaceHolder.logoInfo.url})`"
+                    :style="{
+                      left: (item.placeHolderLayout.width - normalizedPlaceHolder.logoInfo.width) / 2,
+                      top: (item.placeHolderLayout.height - normalizedPlaceHolder.logoInfo.height) / 2,
+                      width: normalizedPlaceHolder.logoInfo.width,
+                      height: normalizedPlaceHolder.logoInfo.height,
+                    }"
+                  />
+                </div>
               </div>
             </jsv-focus-block>
           </div>