@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -21,17 +21,19 @@
                             absolute为依据measures中给的top, left布局
  *      
  *      name {string} 用于设置焦点的名称
- *      padding {object} 控件内边距， 默认为{left: 0, right: 0, top: 0, bottom: 0}
- *      direction {enum} (必选)控件方向 HORIZONTAL/VERTICAL
+ *      padding {object} 控件内边距，默认为{left: 0, right: 0, top: 0, bottom: 0}, 
+                        用于压缩滚动判定区域(可视区域), 以达到扩大Clip区域,解决放大的焦点元素被Clip掉的问题
+ *      direction {enum} (必选)控件方向 HORIZONTAL/VERTICAL, 子格子的延展方向, vertical代表一行一行来排布纵向无限延展, horizontal为一列列排横向无限
  *      focusMoveType {int} 焦点移动的模式, 可通过 | 运算进行组合. 这些常量在FocusMoveType对象中, 需要import { FocusMoveType } from 'jsview'
                           NO_ADJUST: 无特殊处理
-                          COLUMN_LOOP: 到达列首/尾后跳转到上/下一列, 只在水平滚动时生效
-                          ROW_LOOP: 到达行首/尾后跳转到上/下一行, 只在竖直滚动时生效
-                          COLUMN_FIND_NEAR: 一列中没有下一个元素时是否跳转到相邻列
-                          ROW_FIND_NEAR: 一行中没有下一个元素时是否跳转到相邻行
+                          COLUMN_LOOP: 到达列首/尾后跳转到上/下一列, 只在direction=水平时生效
+                          ROW_LOOP: 到达行首/尾后跳转到上/下一行, 只在direction=竖直时生效
+                          COLUMN_FIND_NEAR: 一列中没有下一个元素时是否跳转到相邻列, 只在direction=水平时生效
+                          ROW_FIND_NEAR: 一行中没有下一个元素时是否跳转到相邻行, 只在direction=竖直时生效
  *      keepTraceRange { number } 可视区域前后多少屏的item在移出可视范围后不释放(默认移出可视区域的item会被释放)
  *      initFocusId {int} 初始焦点，默认为0
- *      slideSetting {SlideSetting} 页面滑动的设置, 目前SlideSetting有三个子类, 具体见 WidgetCommon 中的说明
+ *      slideSetting {SlideSetting} 页面滑动的设置, 滚动的判定区域是MetroWidget的宽高去除padding后的区域, 
+                                    目前SlideSetting有三个子类, 具体见如下
                                     WholePageSlide
                                       @description 整页滚动的设置类
                                       @constructor {Object} {speed, easing, boundProtect}
@@ -39,25 +41,43 @@
                                       @description 无缝滚动的设置类
                                       @constructor {Object} {
  *                                      startPercent: 左/上侧触发滚动的比例 0-1
- *                                      endPercennt: 右/下侧触发滚动的比例 0-1
+ *                                      endPercent: 右/下侧触发滚动的比例 0-1, 从起点计数, 末尾为1.0
  *                                      headRange: 左/上按键触发滚动的区域比例 0-1
- *                                      tailRange: 右/下按键触发滚动的区域比例 0-1
- *                                      speed: 滚动速度, 像素/毫秒 
- *                                      easing: 滚动动画的easing
- *                                      boundaryProtect: 确定滚动位置能否小于0或者大于最大长度
- *                                      fixFirstPage: 首页不滚动
+ *                                      tailRange: 右/下按键触发滚动的区域比例 0-1 从终点计数，末尾为0
+                                                startPercent/endPercent 和 headRange/tailRange 二选一
+*                                      speed: 滚动速度, 像素/毫秒
+*                                               用于计算duration的辅助值, 因为MetroWidget每个行间可能距离不一样;
+*                                               当 duration 未显式指定时, 会根据speed按匀速反算duration
+*                                      duration: 动画时长(毫秒)。当 duration 为 number 时优先于 speed；
+*                                               若为 null/不传则按 speed 计算时长
+*                                      easing(String): 滚动动画的easing，可不填(实现中默认为空字符串)；
+*                                                      非匀速时推荐为 "cubic-bezier(X, X, X, X)"
+ *                                      boundaryProtect: 确定滚动位置能否小于0或者大于最大长度, 默认值为 START_PROTECT | END_PROTECT, 即都开启
+                                                  START_PROTECT: 是否要让头部卡在边缘而不是滚动到headRange的位置
+                                                  END_PROTECT: 是否要让尾部卡在边缘而不是滚动到tailRange的位置
+                                                  若不开启, 则slide出来的项目可能不是完整的项目, 而是以焦点元素的边缘对齐range(head或者tail)的百分比位置
+                                                  对齐其百分比值的方案为, 往head滑动时, 用起始边缘对准headRange, 往tail滑动时, 也是用起始边缘对准tailRange
+ *                                      fixFirstPage: 默认为false, 代表第一屏不滚动, 当到第一屏边缘开始才按照正常的无缝滚动逻辑滚动, 
+                                                   若回到第一屏区域时则会把第一屏完整的滚动回来
  *                                    }
-                                    FixPositionSlide
+                                    FixPositionSlide(废弃)
                                       @description 固定位置滚动的设置类
                                       @constructor {Object} {fixPercent, speed, easing, boundProtect}
  *      itemConfig {Function (item) => {takeOverSlide: true}} 返回item的配置信息
- *      enableItemRenderBreak {boolean} 按键事件是否能打断item的描画, 默认为false
+ *      enableItemRenderBreak {boolean} 这个骨架图的开关, 默认为false
+                                        开启后, 
+                                        1. MetroWidget首次展示时, 所有item均以骨架图绘制
+                                        2. 用户输入事件(例如按键输入)可打断正在进行的item描画解析, 
+                                        处于打断状态时, 剩余未绘制的item不会绘制其内容而是显示这个位置的骨架图
  *      placeHolderSetting {Object} item描画可打断时, 显示的占位符
                                     {
                                       backgroundColor: 纯色占位符
                                       focusBackgroundColor: 获焦时的颜色
                                       borderRadius: 占位符圆角设置
                                       gap: 占位符之间的gap
+                                      logoUrl: 占位符logo的url
+                                      logoWidth: 占位符logo的宽度
+                                      logoHeight: 占位符logo的高度
                                     }
  *      sendFocusRectEvent {boolean} item获焦时在焦点树上冒泡一个事件, MetroWidget接收到事件时会触发滚动操作, 一般用于嵌套
                                      时的滚动
@@ -82,9 +102,19 @@
                                             METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT 按照子组件发送的focusRect事件滚动
                                           zIndex {int | object}: item的zIndex, 为object时可以分别设置{focus: 0, normal: 0}, 为number时则同时设置获焦和不获焦的zIndex,
                                           uid {string}: item的uid, 可以通过uid来设置焦点
-                                          permanent {boolean}: 出去与是否保留
-                                          enableTap {boolean}: 是否接受触控tap
-                                          showSkeleton {boolean}: 打断描画时, 是否显示骨架图, 默认为true
+                                          permanent {boolean}: 离开可视范围后, 是否保留
+                                          enableTap {boolean}: 是否接受触控tap, 需要触控模式时设为true
+                                          showSkeleton {boolean}: 打断描画时, 是否显示为骨架图, 默认为true
+                                          enableLongPress {boolean}: item是否支持长按, 默认值为props.enableLongPress
+                                          placeHolderLayout{{left: number, top: number, width: number, height: number, logoWidth: number, logoHeight: number}}: 
+                                            占位符的布局微调:
+                                              left: 占位符的left偏移量, 可不填, 默认等于格子布局的左上角位置(0px)
+                                              top: 占位符的top偏移量, 可不填, 默认等于格子布局的左上角位置(0px)
+                                              width: 占位符的width, 可不填, 默认等于格子布局的宽度(和placeHolderLayout平级的width设定)
+                                              height: 占位符的height, 可不填, 默认等于格子布局的高度(和placeHolderLayout平级的height设定)
+                                              logoWidth: 占位符的logoWidth偏移量, 可不填, 默认等于props.placeHolderSetting的LogoWidth
+                                              logoHeight: 占位符的logoHeight偏移量, 可不填, 默认等于props.placeHolderSetting的LogoHeight
+                                          bindSpatialNav {boolean}: 是否绑定空间导航, 默认值为false
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -94,19 +124,37 @@
                                             "direction": {EdgeDirection}边缘方向, 
                                             "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}
                                           }
-        onScroll {function} 滚动时的回调 (visibleStart, visibleRange, totalSize) => {}
+        onScroll {function} 滚动时的回调, 此为异步回调, 可以进行refreshData, slideTo, updateItemSize等操作 
+                                (visibleStart, visibleRange, totalSize) => {}
+                                visibleStart: 可视区域的起点
+                                visibleRange: 可视区域大小(不含padding)
+                                totalSize: 所有item的总长
+        syncOnScroll {function} 滚动时同步的回调，只用来触发与自身无关的操作,不要调用自身的refreshData, slideTo, updateItemSize等方法 
+                                (visibleStart, visibleRange, totalSize) => {}
                                 visibleStart: 可视区域的起点
                                 visibleRange: 可视区域大小(不含padding)
                                 totalSize: 所有item的总长
  *      onFocusRectChange {() => void} 焦点区域变化的回调
  *      onAllItemResizeDone {() => void} 所有item resize完成的回调
+ *      onFocusChange {(id: number) => void} 焦点变化的回调
  *      loadAll {boolean} 加载不显示的view，触控场景使用
- *      flingPageWidth {}
- *      flingPageEdge {}
+ *      flingPageWidth {number} Fling 手势分页宽度（像素），-1 表示使用默认策略
+ *      flingPageEdge {number} Fling 边缘触发区域比例（0-1），默认 1/4
  *      disableClip {boolean} 取消显示范围的clipView
  *      touchFlag {int} 触控的开关, 0:关闭, 1:打开. 打开后支持drag, fling; item的tap则由measuresObject的enableTap控制
+ *      mouseFlag {int} 鼠标滚轮的开关, 0:关闭, 1:打开. 打开后支持鼠标滚轮滚动
+ *      mouseConfig {Object} 鼠标配置, 仅在mouseFlag为1时生效
+                                    {
+                                      wheelRate: {number} 鼠标滚轮滚动速度, 默认值为10
+                                    }
  *      enableLongPress {boolean} 支持长按, 长按模式下, onkeyup时触发onclick, 长按触发后, onclik不触发
  *      enableDebug {boolean} 显示debug用的item框
+ *      renderAcc {boolean} 是否使用Fbo加速渲染
+ *      fullDisplayMode {boolean} 是否全屏显示
+ *      onSizeChange {function} 尺寸变化时的回调, 仅在fullDisplayMode为true时生效
+ *      onTouchFocus {function} 有触控的时候回调
+ *      onMouseEnter {function} 鼠标进入的时候回调
+ *      onMouseLeave {function} 鼠标离开的时候回调
  
  *    methods:
         getFocusBlockRef 获取此MetroWidget的 jsv-focus-block句柄，可以使用requestFocus完成获焦
@@ -221,44 +269,56 @@
           @description 获取 item 的布局位置信息, index对应的item不存在时, 返回null
           @params {number} index item 的 index
           @return {object} {left: number, top: number, width: number, height: number} | null
+        tmpDisableRenderBreak
+          @description 临时设置是否打断描画, 一般用于防止刷新数据导致闪烁
+        cleanFocusStatus
+          @description 清除焦点状态
+        getItemVisibleState
+          @description 获取 item 的可见状态
+          @params {object} leftTop 左上角坐标
+          @params {object} rightBottom 右下角坐标
+          @return {array} 可见状态列表
+        getParentWidgetHandler
+          @description 获取父MetroWidget的handler对象
+          @return {object} 父MetroWidget对象
   slots:
-    renderItem: 该slot用于描画每个单元格
+    renderItem: 该slot用于描画MetroWidget的item内容
+      slotProps: {
+        data: {Object} 当前item的数据
+        query: {Object} 获取一些额外信息的对象
+          { 
+            id: {int} item的id,
+            position: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0} 
+                      获取 item 相对 MetroWidget 左上角坐标
+            templatePosition: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0} 
+                              获取 item 的布局坐标, 一般用于自定义滚动
+            getCurrentFocusId: {Function} () => {id: 0, index: 0} 
+                                获取当前焦点信息，id 为在可获得焦点元素列表中的索引，index 为在所有元素列表中的索引
+            slideTo: {Function} (targetPosition : int, doAnim : Boolean) => void 
+                      滚动到指定位置，注意这个位置是 item 的布局坐标，另外当某些item需要接管滚动时，itemConfig中takeOverSlide要为true。
+            updateItemSize: {(index: number, newSize: {width: number, height: number}, animInfo: {anchor: number, duration: number, onEnd: Function}) => void} 更新item的尺寸, 目前仅在list模式下可用.
+                    params:
+                      index: 更新item的index,
+                      newSize: 新的尺寸
+                      animInfo: 动画设置
+                        anchor: 缩放锚点
+                        duration: 动画时长(毫秒)
+                        onEnd: 动画结束回调
+            widgetHandler: {Object} 获取MetroWidget的handler对象
+          }
+        onAction: {Object} 单元格内控件需要通过onAction.register方法向MetroWidget注册 item 的回调, 回调函数有:
+            onFocus: {Function} widget获焦状态下, item获焦的回调
+            onBlur: {Function} widget获焦状态下, item失焦的回调
+            onGaze: {Function} item获焦的回调, 无论widget是否为获焦状态, 此时该item绘制的zIndex会高于其他item, 可盖住其他item
+            onIgnore: {Function} itemh失焦的回调, 无论widget是否为获焦状态, 此时item从高zIndex降回原值, 继续遵照index变化越高zIndex越高的顺序
+            onClick: {Function} item点击的回调
+            onWidgetEdge: {Function} 到达边缘的回调
+            onLongPress: {Function} item长按的回调
+        onItemEdge: {Function} 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
+      }
     background: 该slot描画在item后, 一般用于描画需要跟随MetroWidget滚动的内容
     foreground: 该slot描画在item前, 一般用于描画需要跟随MetroWidget滚动的内容
  * 【技巧说明】
- * Q: 插槽props如何使用？
- * A: data: 当前item的数据
- *    query: 获取一些额外信息的对象
-                { 
-                  id: {int} item的id,
-                  position: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0} 
-                            获取 item 相对 MetroWidget 左上角坐标
-                  templatePosition: {Function} (index : int) => {left: 0, top: 0, width: 0, height: 0} 
-                                    获取 item 的布局坐标, 一般用于自定义滚动
-                  getCurrentFocusId: {Function} () => {id: 0, index: 0} 
-                                     获取当前焦点信息，id 为在可获得焦点元素列表中的索引，index 为在所有元素列表中的索引
-                  slideTo: {Function} (targetPosition : int, doAnim : Boolean) => void 
-                           滚动到指定位置，注意这个位置是 item 的布局坐标，另外当某些item需要接管滚动时，itemConfig中takeOverSlide要为true。
-                  updateItemSize: {(index: number, newSize: {width: number, height: number}, animInfo: {anchor: number, duration: number, onEnd: Function}) => void} 更新item的尺寸, 目前仅在list模式下可用.
-                          params:
-                            index: 更新item的index,
-                            newSize: 新的尺寸
-                            animInfo: 动画设置
-                              anchor: 缩放锚点
-                              duration: 动画时长(毫秒)
-                              onEnd: 动画结束回调
-
-                }
- *    onItemEdge: 若单元格内另有可接管按键的控件（如MetroWidget），该控件到达边缘需要通知MetroWidget时的回调
- *    onAction: 单元格内控件需要通过onAction.register方法向MetroWidget注册 item 的回调，回调函数有
-                onFocus: widget获焦状态下, item获焦的回调
-                onBlur: widget获焦状态下, item失焦的回调
-                onGaze: item获焦的回调, 无论widget是否为获焦状态
-                onIgnore: itemh失焦的回调, 无论widget是否为获焦状态
-                onClick: item点击的回调
-                onWidgetEdge: 到达边缘的回调
-                onLongPress: item长按的回调
- * 
  * Q: 如何进行布局，定制每个格的尺寸？
  * A: 首先选定一个布局的方式，一列列地横向布局(HROIZONTAL)还是一行行地纵向(VERTICAL)布局，设置给属性direction
  *    然后将单元格尺寸反馈器(函数)设置到measures中，进行布局时，组件会回调measures函数获得每个单元格的尺寸，
@@ -281,6 +341,8 @@
  * A: 焦点处理: item内的元素需要在注册的onFocus和onBlue回调中管理焦点. 即在onFocus时把焦点设置到内部的可获焦节点;
       onBlur时将焦点给回父MetroWidget, 注意此时是焦点树上的子节点往父节点切换, 此时为了把子节点blur掉, 
       requestFocus函数需要传递一个false参数
+ * Q: 如何校验元素重复导致的问题
+ * A: 通过MetroWidgetDebugger.enableOverlapCheck(true)来开启元素重复校验，开启后每次addItem会检查新加入的item与之前所有item的内容矩形（不含margin）是否重叠，重叠则errorLogger报错。导入方式为import { MetroWidgetDebugger } from "jsview";
  * 注意点:
  *    1. MetroWidget中存在一些处理依赖vue的callback执行顺序, 因此涉及更改MetroWidget状态的处理不要在watchPostEffect中调用
 -->
@@ -306,8 +368,10 @@ import {
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
 import DebugFrame from "./DebugFrame.vue";
 import { createCanvasText } from "./DebugTools.ts";
+import { KEY_MODE, TOUCH_MODE, JsvInteractionMode } from "../../JsViewVueTools/JsvInteractionMode";
 
 const props = defineProps({
+  // 内边距；用于压缩滚动判定区域（可视区域），默认四边为 0
   padding: {
     type: Object,
     default() {
@@ -319,91 +383,119 @@ const props = defineProps({
       };
     },
   },
+  // 列表方向：HORIZONTAL（横向）或 VERTICAL（纵向）
   direction: {
     type: Symbol,
     default: HORIZONTAL,
   },
+  // 控件高度（必选）
   height: {
     type: Number,
     required: true,
   },
+  // 控件宽度（必选）
   width: {
     type: Number,
     required: true,
   },
+  // 焦点移动到边缘时的回调；可为函数或字符串（见引擎约定）
   onEdge: {
-    type: Function,
+    type: [Function, String],
     default: null,
   },
+  // 控件获取焦点时的回调
   onFocus: {
     type: Function,
     default: null,
   },
+  // 控件失去焦点时的回调
   onBlur: {
     type: Function,
     default: null,
   },
+  // 触控按下并建立焦点相关流程后的回调（如滚动锚点更新后触发）
+  onTouchFocus: {
+    type: Function,
+    default: null,
+  },
+  // 是否预加载当前不可见区域的 item 视图；触控场景可设为 true
   loadAll: {
     type: Boolean,
     default: false,
   },
+  // Fling 分页宽度（像素），-1 表示使用默认
   flingPageWidth: {
     type: Number,
     default: -1,
   },
+  // Fling 边缘区域比例（0-1），用于分页/吸附等策略
   flingPageEdge: {
     type: Number,
     default: 1 / 4,
   },
+  // 根据数据项返回模板尺寸与行为信息（必选）
   measures: {
     type: Function,
     required: true,
   },
+  // 初始可获焦 item 的 id，默认 0
   initFocusId: {
     type: Number,
     default: 0,
   },
+  // 静态数据列表；与 provideData 二选一
   data: {
     type: Array,
   },
+  // 控件左上角 x，默认 0
   left: {
     type: Number,
     default: 0,
   },
+  // 控件左上角 y，默认 0
   top: {
     type: Number,
     default: 0,
   },
+  // 焦点块名称，用于焦点树与调试标识
   name: {
     type: String,
   },
+  // 空间导航邻接查找是否使用历史路径信息（传给 Metro 模板）
   supportHistoryPath: {
     type: Boolean,
     default: true,
   },
+  // 返回单项额外配置（如 takeOverSlide 等）
   itemConfig: {
     type: Function,
   },
+  // 焦点 id 变化时的回调 (id) => void
   onFocusChange: {
     type: Function,
   },
+  // 页面滑动/滚动策略配置（如 SeamlessSlide）
   slideSetting: {
     type: SlideSetting,
     default() {
       return new SeamlessSlide({ startPercent: 0.2, endPercent: 0.8 });
     },
   },
+  // 布局类型："relative"（自动）或 "absolute"（按 measures 的 left/top）
   layoutType: {
     type: String,
     default: "relative",
   },
+  // 是否启用骨架图与描画打断（首屏骨架、按键打断等）
   enableItemRenderBreak: {
     type: Boolean,
     default: false,
   },
+  // 异步/分页提供数据的回调；与 data 二选一
   provideData: {
     type: Function,
   },
+  // 占位符样式（背景色、圆角、logo 等）
   placeHolderSetting: {
     type: Object,
     default() {
@@ -412,43 +504,89 @@ const props = defineProps({
       };
     },
   },
+  // item 获焦时是否在焦点树上冒泡 focusRect 事件（嵌套滚动时常用）
   sendFocusRectEvent: {
     type: Boolean,
     default: false,
   },
+  // 可视区前后保留多少屏 item 不释放；-1 等表示走内部默认策略
   keepTraceRange: {
     type: Number,
     default: -1,
   },
+  // 滚动结束后的异步回调 (visibleStart, visibleRange, totalSize) => {}
   onScroll: {
     type: Function,
   },
+  // 滚动时的同步回调；勿在其中调用 refreshData/slideTo 等改变自身状态的方法
+  syncOnScroll: {
+    type: Function,
+  },
+  // 焦点移动模式位标志（FocusMoveType 组合）
   focusMoveType: {
     type: Number,
     default: 0,
   },
+  // 是否取消可视区域 clip（子项可绘制到 MetroWidget 矩形外）
   disableClip: {
     type: Boolean,
     default: false,
   },
+  // 焦点矩形区域变化时的回调
   onFocusRectChange: {
     type: Function,
   },
+  // 所有 item 尺寸计算完成后的回调
   onAllItemResizeDone: {
     type: Function,
   },
+  // 触控开关：0 关闭，大于 0 开启（支持 drag、fling 等）
   touchFlag: {
     type: Number,
     default: 0,
   },
+  // 是否支持长按；长按模式下 onkeyup 触发 onclick 等行为见引擎约定
   enableLongPress: {
     type: Boolean,
     default: false,
   },
+  // 是否绘制调试用 item 边框
   enableDebug: {
     type: Boolean,
     default: false,
   },
+  // 是否使用 FBO 加速渲染
+  renderAcc: {
+    type: Boolean,
+    default: false,
+  },
+  // 鼠标滚轮开关：0 关闭，1 开启
+  mouseFlag: {
+    type: Number,
+    default: 0,
+  },
+  // 鼠标相关配置（如 wheelRate），仅在 mouseFlag 为 1 时生效
+  mouseConfig: {
+    type: Object,
+  },
+  // 是否全屏显示模式（影响布局与 onSizeChange 等）
+  fullDisplayMode: {
+    type: Boolean,
+    default: false,
+  },
+  // 尺寸变化回调；仅在 fullDisplayMode 为 true 时由引擎侧触发
+  onSizeChange: {
+    type: Function,
+    default: null,
+  },
+  onMouseEnter: {
+    type: Function,
+    default: null,
+  },
+  onMouseLeave: {
+    type: Function,
+    default: null,
+  },
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
@@ -460,6 +598,7 @@ const slideDivLeft = ref(0);
 const slideDivTop = ref(0);
 const focusNode = shallowRef(null);
 const pageUpdateToken = ref(0);
+const rootDiv = shallowRef(null);
 
 const touchDiv = shallowRef(null);
 const touchDivSize = reactive({
@@ -468,8 +607,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:
@@ -490,8 +642,9 @@ const {
   onTouchDown,
   onTouchRelease,
   currentFocusIndex,
-  modeForExport,
   onDispatchKeyDown,
+  isFocus,
+  rootNativeViewId,
 } = setup(
   props,
   itemRender,
@@ -504,6 +657,7 @@ const {
   pageUpdateToken,
   touchDiv,
   touchDivSize,
+  rootDiv,
   "common"
 );
 
@@ -536,125 +690,173 @@ onBeforeUnmount(() => {
   }
 });
 
+const innerDisableClip = computed(() => {
+  return props.disableClip || props.fullDisplayMode;
+});
+
 defineExpose(exportObject);
 </script>
 
 <template>
   <div
+    ref="rootDiv"
     :style="{
       left: left,
       top: top,
       width: width,
       height: height,
-      overflow: disableClip ? null : 'hidden',
+      overflow: innerDisableClip ? null : 'hidden',
     }"
+    @mouseenter="props.onMouseEnter"
+    @mouseleave="props.onMouseLeave"
   >
     <div
       :style="{
-        left: widgetRectInfo.padding.left,
-        top: widgetRectInfo.padding.top,
+        width: width,
+        height: height,
       }"
+      :data-jsv-vw-innerview="rootNativeViewId"
     >
       <div
-        id="slideDiv"
-        key="slideDiv"
-        ref="slideDiv"
         :style="{
-          left: slideDivLeft,
-          top: slideDivTop,
+          left: widgetRectInfo.padding.left,
+          top: widgetRectInfo.padding.top,
         }"
       >
         <div
-          ref="touchDiv"
+          id="slideDiv"
+          key="slideDiv"
+          ref="slideDiv"
           :style="{
-            width: touchDivSize.width,
-            height: touchDivSize.height,
+            left: slideDivLeft,
+            top: slideDivTop,
           }"
         >
-          <div>
-            <slot name="background"></slot>
-          </div>
-          <div ref="locateDiv">
-            <jsv-focus-block
-              ref="focusNode"
-              :name="name"
-              :onAction="{
-                onFocus: focusBlockOnFocus,
-                onBlur: focusBlockOnBlur,
-                onKeyDown: focusBlockOnKeyDown,
-                onKeyUp: focusBlockOnKeyUp,
-                onCustomEvent: focusBlockOnCustomEvent,
-                onDispatchKeyDown,
-              }"
-            >
-              <div
-                v-for="(item, index) in renderData"
-                :key="
-                  pageUpdateToken +
-                  '_' +
-                  item.index +
-                  '-' +
-                  item.renderKey.value
-                "
-                :ref="item.divRef"
-                data-jsv-vw-test-rect="1"
-                :style="{
-                  left: item.templateInfo.left,
-                  top: item.templateInfo.top,
-                  width: item.templateInfo.width,
-                  height: item.templateInfo.height,
-                  zIndex: item.renderStyle.zIndex,
+          <div
+            ref="touchDiv"
+            :style="{
+              width: touchDivSize.width,
+              height: touchDivSize.height,
+            }"
+          >
+            <div>
+              <slot name="background"></slot>
+            </div>
+            <div ref="locateDiv">
+              <jsv-focus-block
+                ref="focusNode"
+                :name="name"
+                :onAction="{
+                  onFocus: focusBlockOnFocus,
+                  onBlur: focusBlockOnBlur,
+                  onKeyDown: focusBlockOnKeyDown,
+                  onKeyUp: focusBlockOnKeyUp,
+                  onCustomEvent: focusBlockOnCustomEvent,
+                  onDispatchKeyDown,
                 }"
-                @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
-                  "
-                  :key="renderBreakKey"
-                  :ref="item.slotRef"
-                  :id="`${name}_${index}`"
-                >
-                  <slot-component key="__QcodeJsviewFreezeComponent">
-                    <slot
-                      name="renderItem"
-                      :data="item.customerData"
-                      :onEdge="_onFocusableItemEdge"
-                      :onAction="item.registerObj"
-                      :query="item.query"
-                      :onItemEdge="_onFocusableItemEdge"
-                    ></slot>
-                  </slot-component>
-                </div>
                 <div
-                  v-if="
-                    enableItemRenderBreak &&
-                    placeHolderSetting &&
-                    !item.mounted.value &&
-                    item.itemConfig.showSkeleton
+                  v-for="(item, index) in renderData"
+                  :key="
+                    pageUpdateToken +
+                    '_' +
+                    item.index +
+                    '-' +
+                    item.renderKey.value
                   "
+                  :ref="item.divRef"
+                  data-jsv-vw-test-rect="1"
                   :style="{
-                    width: item.renderStyle.width - normalizedPlaceHolder.gap,
-                    height: item.renderStyle.height - normalizedPlaceHolder.gap,
-                    backgroundColor:
-                      currentFocusIndex == item.index && modeForExport == 2
-                        ? normalizedPlaceHolder.focusBackgroundColor
-                        : normalizedPlaceHolder.backgroundColor,
-                    borderRadius: normalizedPlaceHolder.borderRadius,
+                    left: item.templateInfo.left,
+                    top: item.templateInfo.top,
+                    width: item.templateInfo.width,
+                    height: item.templateInfo.height,
+                    zIndex: item.renderStyle.zIndex,
                   }"
-                ></div>
-              </div>
-            </jsv-focus-block>
+                  @click="item.onTap.value"
+                >
+                  <DebugFrame
+                    v-if="enableDebug"
+                    :width="item.templateInfo.width"
+                    :height="item.templateInfo.height"
+                    :sourceId="debugFrameSourceId"
+                  ></DebugFrame>
+                  <div
+                    :style="{
+                      width: item.templateInfo.width,
+                      height: item.templateInfo.height,
+                    }"
+                    :data-jsv-vw-innerview="item.rootNativeViewId"
+                  >
+                    <div
+                      v-if="
+                        !item.renderBreak ||
+                        item.mounted.value ||
+                        itemRender
+                      "
+                      :key="renderBreakKey"
+                      :ref="item.slotRef"
+                      :id="`${name}_${index}`"
+                      :__metrowidget-index="item.index"
+                    >
+                      <slot-component key="__QcodeJsviewFreezeComponent">
+                        <slot
+                          name="renderItem"
+                          :data="item.customerData"
+                          :onEdge="_onFocusableItemEdge"
+                          :onAction="item.registerObj"
+                          :query="item.query"
+                          :onItemEdge="_onFocusableItemEdge"
+                        ></slot>
+                      </slot-component>
+                    </div>
+                    <div
+                      v-if="
+                        item.renderBreak 
+                        && placeHolderSetting 
+                        && !item.mounted.value 
+                        && item.itemConfig.showSkeleton
+                        && item.placeHolderLayout
+                      "
+                      :style="{
+                        left: item.placeHolderLayout.left,
+                        top: item.placeHolderLayout.top,
+                        width: item.placeHolderLayout.width,
+                        height: item.placeHolderLayout.height,
+                        backgroundColor:
+                          isFocus &&
+                          currentFocusIndex == item.index &&
+                          JsvInteractionMode == KEY_MODE
+                            ? normalizedPlaceHolder.focusBackgroundColor
+                            : normalizedPlaceHolder.backgroundColor,
+                        borderRadius: normalizedPlaceHolder.borderRadius,
+                      }"
+                    >
+                      <img
+                        v-if="normalizedPlaceHolder.logoInfo"
+                        :src="`url(${normalizedPlaceHolder.logoInfo.url})`"
+                        :style="{
+                          left:
+                            (item.placeHolderLayout.width -
+                              item.placeHolderLayout.logoWidth) /
+                            2,
+                          top:
+                            (item.placeHolderLayout.height -
+                              item.placeHolderLayout.logoHeight) /
+                            2,
+                          width: item.placeHolderLayout.logoWidth,
+                          height: item.placeHolderLayout.logoHeight,
+                        }"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </jsv-focus-block>
+            </div>
+          </div>
+          <div>
+            <slot name="foreground"></slot>
           </div>
-        </div>
-        <div>
-          <slot name="foreground"></slot>
         </div>
       </div>
     </div>