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

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -7,6 +7,11 @@ import {
   toRaw,
   nextTick,
   computed,
+  inject,
+  watch,
+  onActivated,
+  onDeactivated,
+  provide,
 } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import {
@@ -16,7 +21,7 @@ import {
 } from "../TemplateParser/index";
 import { PageUpdater } from "./PageUpdater";
 import { SingleRangeModel } from "../RangeModel";
-import { METRO_WIDGET_CONST } from "./Const";
+import { METRO_WIDGET_CONST, ONEDGE_TYPE } from "./Const";
 import {
   EdgeDirection,
   VERTICAL,
@@ -27,23 +32,40 @@ import { RenderItem } from "./RenderItem";
 import { VisibleInfo } from "./VisibleInfo";
 import { WidgetRectInfo } from "./WidgetRectInfo";
 import ActorControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl.ts";
-import { TaskType, TaskManager, AnimationManager, SlideTaskType } from "./TaskManager.ts";
+import {
+  TaskType,
+  TaskManager,
+  AnimationManager,
+  SlideTaskType,
+} from "./TaskManager.ts";
 import { getDirectionByRect, RectCache } from "./Slide.ts";
-import { FeatureNames, JsvUseFeature } from "../../JsViewVueTools/FeatureActive.ts";
+import {
+  FeatureNames,
+  JsvUseFeature,
+} from "../../JsViewVueTools/FeatureActive.ts";
 import { randomColor } from "./DebugTools.ts";
+import {
+  KEY_MODE,
+  TOUCH_MODE,
+  JsvInteractionMode,
+  hasJsvTouchModeSwitcher,
+} from "../../JsViewVueTools/JsvInteractionMode";
+import { getId } from "./Utils";
+import { MW_CONTEXT_NAME } from "./Utils";
+import { SPATIAL_NAV_PROVIDER_NAME } from "../SpatialNavigator/SpatialNavigator";
+import { getDebugSetting } from "./MetroWidgetDebugger";
 
 const TAG = "MetroWidget";
 const LONGPRESS_TIMEOUT = 600;
 const DATA_ID_KEY = "jsvKey";
 
-let metroWidgetTokenGen = 1;
-
 const _getMetroTemplate = function (
   widgetRectInfo,
   direction,
   support_history_path,
   layout_type,
-  mode
+  type,
+  errorLogger
 ) {
   let page_size;
   let line_max;
@@ -55,14 +77,15 @@ const _getMetroTemplate = function (
     page_size = widgetRectInfo.contentWidth;
   }
   let metroWidget;
-  switch (mode) {
+  switch (type) {
     case "list":
       metroWidget = new ListMetroTemplate(
         direction,
         line_max,
         page_size,
         layout_type,
-        support_history_path
+        support_history_path,
+        errorLogger
       );
       break;
     default:
@@ -71,15 +94,72 @@ const _getMetroTemplate = function (
         line_max,
         page_size,
         layout_type,
-        support_history_path
+        support_history_path,
+        errorLogger
       );
       break;
   }
+  if (getDebugSetting().enableOverlapCheck) {
+    metroWidget.enableDebug(true);
+  }
   return metroWidget;
 };
 
-const TOUCH_MODE = 1; //触控模式
-const FOCUS_MODE = 2; //按键模式
+const TouchState = {
+  IDLE: 0,
+  TAP: 1,
+  DRAG: 2,
+  FLING: 3,
+};
+
+class TouchStateMgr {
+  constructor(name) {
+    this._name = name;
+    this._touchState = TouchState.IDLE;
+    this._touchCount = 0;
+  }
+  touchStart(touchCount) {
+    this._touchState = TouchState.TAP;
+    this._touchCount = touchCount;
+  }
+  touchEnd(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.IDLE;
+    }
+  }
+  flingStart(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.FLING;
+    }
+  }
+  flingEnd(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.IDLE;
+    }
+  }
+  dragStart(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.DRAG;
+    }
+  }
+  dragEnd(touchCount) {
+    if (touchCount == this._touchCount) {
+      this._touchState = TouchState.IDLE;
+    }
+  }
+  duringFling() {
+    return this._touchState == TouchState.FLING;
+  }
+  duringTouch() {
+    return this._touchState != TouchState.IDLE;
+  }
+  getTouchState() {
+    return this._touchState;
+  }
+  getTouchCount() {
+    return this._touchCount;
+  }
+}
 
 export const setup = (
   props,
@@ -93,36 +173,56 @@ export const setup = (
   pageUpdateToken,
   touchDiv,
   touchDivSize,
-  templateMode) => {
-
+  rootDiv,
+  templateMode
+) => {
+  const errorLogger = (...args) => {
+    console.error(...args, `name=${props.name}`);
+  };
   if (props.itemConfig) {
-    console.error(TAG, "prop: itemCofig will be deprecated soon.")
+    errorLogger(TAG, "prop: itemCofig will be deprecated soon.");
+  }
+
+  function debugLog(...args) {
+    console.debug(
+      `%cccht name:${props.name} %c`,
+      "background-color: #e6ffe6",
+      "",
+      ...args
+    );
   }
 
-  let widgetRectInfo = new WidgetRectInfo(props.width, props.height, props.padding);
+  const metroWidgetId = getId();
+  const spatialNavigator = inject(SPATIAL_NAV_PROVIDER_NAME, undefined);
+  const parentMetroWidget = inject(MW_CONTEXT_NAME, undefined);
+
+  let widgetRectInfo = new WidgetRectInfo(
+    props.width,
+    props.height,
+    props.padding,
+    errorLogger
+  );
   let metroTemplate = _getMetroTemplate(
     widgetRectInfo,
     props.direction,
     props.supportHistoryPath,
     props.layoutType,
-    templateMode
+    templateMode,
+    errorLogger
   );
 
-  const TouchState = {
-    IDLE: 0,
-    TAP: 1,
-    DRAG: 2,
-    FLING: 3,
-  };
+  let innerEnableRenderBreak = props.enableItemRenderBreak;
+  const touchEnable = computed(() => {
+    return props.touchFlag > 0 && hasJsvTouchModeSwitcher();
+  });
 
   let innerKeepTraceRange = 0;
   if (typeof props.keepTraceRange == "number" && props.keepTraceRange > 0) {
     innerKeepTraceRange = props.keepTraceRange;
   } else {
-    if (props.touchFlag > 0) {
+    if (touchEnable.value) {
       // 激活引擎功能的支持
-      JsvUseFeature('MetroWidget', FeatureNames.TouchReceiver);
-
+      JsvUseFeature("MetroWidget", FeatureNames.TouchReceiver);
       //触控默认3屏
       innerKeepTraceRange = 3;
     } else {
@@ -131,64 +231,49 @@ export const setup = (
     }
   }
 
-  const modeForExport = ref(FOCUS_MODE);
-  const mode = {
-    _mode: FOCUS_MODE,
-    _touchState: TouchState.IDLE,
-    _touchCount: 0, // 触控流流程ID，解决fling等事件晚于新的touchDown时引起的混乱问题
-
-    _duringTouch: false,
-    _duringFling: false,
-    touchStart(touchCount) {
-      this._mode = TOUCH_MODE;
-      modeForExport.value = TOUCH_MODE;
-      this._touchState = TouchState.TAP;
-      this._touchCount = touchCount;
-    },
-    touchEnd(touchCount) {
-      if (touchCount == this._touchCount) {
-        this._touchState = TouchState.IDLE;
-      }
-    },
-    flingStart(touchCount) {
-      if (touchCount == this._touchCount) {
-        this._touchState = TouchState.FLING;
+  const onInteractionModeChange = (newMode, oldMode) => {
+    if (newMode === KEY_MODE) {
+      if (touchStateMgr.duringFling()) {
+        return;
       }
-    },
-    flingEnd(touchCount) {
-      if (touchCount == this._touchCount) {
-        this._touchState = TouchState.IDLE;
+      if (focusWhenInTouch) {
+        isFocus.value = true;
       }
-    },
-    dragStart(touchCount) {
-      if (touchCount == this._touchCount) {
-        this._touchState = TouchState.DRAG;
+      const focusItem = _getVisibleFocusableItem();
+      if (focusItem) {
+        const preFocusItem = getItemById(focusId);
+        _changeFocusId(focusItem.id, false);
+        if (preFocusItem && preFocusItem.id !== focusItem.id) {
+          onItemBlur(preFocusItem);
+        }
+        onItemFocus(focusItem);
       }
-    },
-    dragEnd(touchCount) {
-    },
-    keyDown() {
-      this._mode = FOCUS_MODE;
-      modeForExport.value = FOCUS_MODE;
-      this._touchState = TouchState.IDLE;
-    },
-    duringFling() {
-      return this._touchState == TouchState.FLING;
-    },
-    duringTouch() {
-      return this._touchState != TouchState.IDLE;
-    },
-    getMode() {
-      return this._mode;
-    },
-    getTouchState() {
-      return this._touchState;
-    },
-    getTouchCount() {
-      return this._touchCount;
+    } else if (newMode === TOUCH_MODE) {
+      //进入触控模式, 触发onBlur (onBlur中会有各种副作用, 先不触发)
+      // onItemBlur(getItemById(focusId));
+    } else {
+      console.error("unknown interaction mode", newMode);
     }
-  }
+  };
+  let unwatchInteractionMode = watch(
+    JsvInteractionMode,
+    onInteractionModeChange
+  );
 
+  onActivated(() => {
+    if (unwatchInteractionMode) {
+      unwatchInteractionMode();
+    }
+    unwatchInteractionMode = watch(JsvInteractionMode, onInteractionModeChange);
+  });
+
+  onDeactivated(() => {
+    unwatchInteractionMode?.();
+    unwatchInteractionMode = null;
+    isFocus.value = false;
+  });
+
+  const touchStateMgr = new TouchStateMgr(props.name);
   let innerData = [];
   let dataList = [];
   let dataKeyList = [];
@@ -198,7 +283,8 @@ export const setup = (
   let focusId = 0;
   let preFocusId = -1;
   let preEdgeRect = null;
-  let isFocus = false;
+  let isFocus = ref(false);
+  let focusWhenInTouch = false;
   let vertical = props.direction == VERTICAL;
   let templateItemAdder = null;
   let permanentItemList = [];
@@ -209,41 +295,74 @@ export const setup = (
   let onKeyDownLock = false;
   let visibleInfo = new VisibleInfo();
   let firstOnItemFocusCalled = false;
-  let innerSlideSetting = props.slideSetting
+  let innerSlideSetting = props.slideSetting;
   const currentFocusIndex = ref(0);
 
   // 当sliderDiv变化时，渲染端在响应此变化前的gap记录，用于准确计算getVisibleStart
   let freeMoveSlideGapTop = 0;
   let freeMoveSlideGapLeft = 0;
 
+  //使用fbo加速
+  let rootNativeViewId = -1;
+  if (props.renderAcc) {
+    const metroWidgetBox = new Forge.MetroWidgetBoxView();
+    metroWidgetBox.SetEnable(true);
+    rootNativeViewId = Forge.sViewStore.add(
+      new Forge.ViewInfo(metroWidgetBox, null)
+    );
+  }
+
   const DEFAULT_ANIMATION_DURATION = 200;
 
   //rect {left: number, top: number, width: number, height: number }
-  const rectVisibleState = (rect) => {
+  const rectVisibleState = (rect, rectStart, rectEnd) => {
     if (!rect) {
       return 0;
     }
+    if (typeof rectStart == "undefined") {
+      rectStart = visibleInfo.startWithPadding;
+    }
+    if (typeof rectEnd == "undefined") {
+      rectEnd = visibleInfo.endWithPadding;
+    }
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
-    if (rect[pos_key] + rect[size_key] - 1 < visibleInfo.start || rect[pos_key] > visibleInfo.end) {
+    if (
+      rect[pos_key] + rect[size_key] - 1 < rectStart ||
+      rect[pos_key] > rectEnd
+    ) {
       return 0; // 完全不可见
-    } else if (rect[pos_key] < visibleInfo.start || rect[pos_key] + rect[size_key] - 1 > visibleInfo.end) {
+    } else if (
+      rect[pos_key] < rectStart ||
+      rect[pos_key] + rect[size_key] - 1 > rectEnd
+    ) {
       return 1; // 部分可见
     } else {
       return 2; // 完全可见
     }
-  }
+  };
+
+  //判断是否是大于widget尺寸的item
+  const isLargeItem = (itemRect) => {
+    if (vertical) {
+      return itemRect.height > widgetRectInfo.contentHeight;
+    } else {
+      return itemRect.width > widgetRectInfo.contentWidth;
+    }
+  };
 
   //tools
   const lastOfArray = (array) => {
     if (array instanceof Array && array.length > 0) {
-      return array[array.length - 1]
+      return array[array.length - 1];
     }
     return null;
-  }
+  };
 
   const onAddTask = (allTask) => {
-    if (!innerData || innerData.length <= 0) { return; }
+    if (!innerData || innerData.length <= 0) {
+      return;
+    }
     let resizeTaskMap = {};
     //统一处理itemResize和slide动画
     let minIndex = Infinity;
@@ -264,26 +383,32 @@ export const setup = (
       doAnim: false,
       duration: 200,
       easing: "",
-    }
+    };
     let resizeList = allTask.resize.concat();
     if (resizeList.length > 0) {
       //resize
-      resizeList.forEach(task => {
+      resizeList.forEach((task) => {
         resizeTaskMap[task.params.index] = task;
         const { index, animInfo } = task.params;
         if (animInfo) {
           resizeAnimInfo.doAnim = true;
-          resizeAnimInfo.duration = animInfo.duration ?? resizeAnimInfo.duration;
-          resizeAnimInfo.easing = animInfo.duration ?? "";
+          resizeAnimInfo.duration =
+            animInfo.duration ?? resizeAnimInfo.duration;
+          resizeAnimInfo.easing = animInfo.easing ?? "";
         }
         minIndex = Math.min(minIndex, index);
 
         metroTemplate.updateItemSize(task.params.index, {
           width: task.params.width,
           height: task.params.height,
-        })
+        });
       });
 
+      if (props.fullDisplayMode) {
+        const totalSize = metroTemplate.getBoundingBoxSize();
+        visibleInfo.range = totalSize[size_key];
+      }
+
       //更新touch的size
       updateTouchDivSize();
 
@@ -292,12 +417,16 @@ export const setup = (
         const task = resizeTaskMap[id2Index(focusId)];
         const animInfo = task.params.animInfo;
         if (typeof animInfo?.anchor == "number") {
-          const preRect = getItemById(focusId)?.templateInfo?.layoutCache.getPreRect();
+          const preRect =
+            getItemById(focusId)?.templateInfo?.layoutCache.getPreRect();
           if (preRect) {
+            //anchorPosition记录之前anchor的布局位置，而不是视口位置
             anchorInfo = {
-              anchorPosition: preRect[pos_key] + preRect[size_key] * animInfo.anchor - 1 - visibleInfo.start,
+              anchorPosition:
+                preRect[pos_key] +
+                preRect[size_key] * animInfo.anchor - 1,
               anchor: animInfo.anchor,
-            }
+            };
           }
         }
       }
@@ -310,6 +439,7 @@ export const setup = (
 
     /* 两种改变方式: 直接指定Position; 通过targetRect计算 */
     let targetRect = null;
+    let cachePreWhenCal = true;
     let direction = undefined;
 
     let validSlideTask = false;
@@ -322,48 +452,72 @@ export const setup = (
       slideDoAnim = slideTask.params.doAnim;
       forceSlide = slideTask.params.force;
       switch (slideTask.subType) {
-        case SlideTaskType.SLIDE_BY_DIV: {
-          const div = slideTask.params.div;
-          const item_layout = div.jsvGetRelativePosition(toRaw(locateDiv.value));
-          let fakeItem = {
-            templateInfo: {
-              left: item_layout.left,
-              top: item_layout.top,
-              width: item_layout.width,
-              height: item_layout.height,
-              centerYPos: Math.floor(item_layout.top + item_layout.height / 2),
-              centerXPos: Math.floor(item_layout.left + item_layout.width / 2),
-              index: id2Index(focusId),
-            },
-          };
-          templateItemAdder.tryAddItemByPosition(vertical ? fakeItem.templateInfo.top : fakeItem.templateInfo.left);
-          targetRect = fakeItem.templateInfo;
-        } break;
-        case SlideTaskType.SLIDE_BY_POS: {
-          const position = slideTask.params.position;
-          templateItemAdder.tryAddItemByPosition(position);
-          targetVisibleStart = position;
-        } break;
-        case SlideTaskType.SLIDE_BY_ITEM: {
-          const index = slideTask.params.index;
-          templateItemAdder.tryAddItemByIndex(index);
-          const targetItem = getItemByIndex(index);
-          if (targetItem) {
+        case SlideTaskType.SLIDE_BY_DIV:
+          {
+            const div = slideTask.params.div;
+            const item_layout = div.jsvGetRelativePosition(
+              toRaw(locateDiv.value)
+            );
+            let fakeItem = {
+              templateInfo: {
+                left: item_layout.left,
+                top: item_layout.top,
+                width: item_layout.width,
+                height: item_layout.height,
+                centerYPos: Math.floor(
+                  item_layout.top + item_layout.height / 2
+                ),
+                centerXPos: Math.floor(
+                  item_layout.left + item_layout.width / 2
+                ),
+                index: id2Index(focusId),
+              },
+            };
+            templateItemAdder.tryAddItemByPosition(
+              vertical ? fakeItem.templateInfo.top : fakeItem.templateInfo.left
+            );
+            targetRect = fakeItem.templateInfo;
+          }
+          break;
+        case SlideTaskType.SLIDE_BY_POS:
+          {
+            const position = slideTask.params.position;
+            templateItemAdder.tryAddItemByPosition(position);
+            targetVisibleStart = position;
+          }
+          break;
+        case SlideTaskType.SLIDE_BY_ITEM:
+          {
+            const index = slideTask.params.index;
+            templateItemAdder.tryAddItemByIndex(index);
+            const targetItem = getItemByIndex(index);
+            if (targetItem.itemConfig.itemSlide != METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+              cachePreWhenCal = false;
+            }
+            if (targetItem) {
+              if (typeof slideTask.params.direction != "undefined") {
+                direction = slideTask.params.direction;
+              }
+              targetRect = targetItem.templateInfo;
+            } else {
+              //无效的滚动
+              validSlideTask = false;
+            }
+          }
+          break;
+        case SlideTaskType.SLIDE_BY_RECT:
+          {
             if (typeof slideTask.params.direction != "undefined") {
               direction = slideTask.params.direction;
             }
-            targetRect = targetItem.templateInfo;
-          } else {
-            //无效的滚动
-            validSlideTask = false;
-          }
-        } break;
-        case SlideTaskType.SLIDE_BY_RECT: {
-          if (typeof slideTask.params.direction != "undefined") {
-            direction = slideTask.params.direction;
+            targetRect = slideTask.params.rect;
           }
-          targetRect = slideTask.params.rect;
-        } break;
+          break;
+        case SlideTaskType.SLIDE_BY_POS_NORMALIZE:
+          const position = slideTask.params.position;
+          templateItemAdder.tryAddItemByPosition(position);
+          targetVisibleStart = normalizeVisibleStart(position, visibleInfo);
+          break;
         default:
           break;
       }
@@ -375,26 +529,48 @@ export const setup = (
       if (anchorInfo) {
         //保持anchor
         const focusItem = getItemById(focusId);
-        let start = focusItem.templateInfo[pos_key] + focusItem.templateInfo[size_key] * anchorInfo.anchor - 1 - anchorInfo.anchorPosition;
+        //新旧item anchor之间的差值
+        let delta = focusItem.templateInfo[pos_key] +
+        focusItem.templateInfo[size_key] * anchorInfo.anchor -
+        1 -
+        anchorInfo.anchorPosition;
+
+        //delta是新旧item anchor之间的差值，需要转换为视口位置
+        let start = visibleInfo.start + delta;
         let totalSize = metroTemplate.getBoundingBoxSize();
-        start = Math.min(Math.max(0, start), totalSize[size_key] - visibleInfo.range)
+        start = Math.min(
+          Math.max(0, start),
+          totalSize[size_key] - visibleInfo.range
+        );
         //resize的情况下, 需要保证第一个和最后一个尺寸变化后, 能完整展示
-        if (focusItem.index == 0) {
-          if (start > focusItem.templateInfo[pos_key]) {
-            start = 0;
-          }
-        } else if (focusItem.templateInfo.index == metroTemplate.getTailItemIndex()) {
-          if (start + visibleInfo.range > focusItem.templateInfo[pos_key]) {
-            start = Math.max(focusItem.templateInfo[size_key] + focusItem.templateInfo[pos_key] - visibleInfo.range, 0);
+        if (JsvInteractionMode.value != TOUCH_MODE) {
+          if (focusItem.index == 0) {
+            if (start > focusItem.templateInfo[pos_key]) {
+              start = 0;
+            }
+          } else if (
+            focusItem.templateInfo.index == metroTemplate.getTailItemIndex()
+          ) {
+            if (start + visibleInfo.range > focusItem.templateInfo[pos_key]) {
+              start = Math.max(
+                focusItem.templateInfo[size_key] +
+                  focusItem.templateInfo[pos_key] -
+                  visibleInfo.range,
+                0
+              );
+            }
           }
         }
-        targetVisibleStart = normalizeVisibleStart(start, focusItem.templateInfo, focusItem.templateInfo.index, visibleInfo);
+        targetVisibleStart = normalizeVisibleStart(start, visibleInfo);
+        slideDoAnim = resizeAnimInfo.doAnim;
       } else {
-        targetRect = getItemById(focusId).templateInfo;
+        //260410fix: 触控的时候不需要做把item移动到可见位置的逻辑
+        if (JsvInteractionMode.value != TOUCH_MODE) {
+          targetRect = getItemById(focusId)?.templateInfo;
+          slideDoAnim = resizeAnimInfo.doAnim;
+        }
       }
-      slideDoAnim = resizeAnimInfo.doAnim;
     }
-
     if (targetRect) {
       const v = visibleInfo.copy();
       let preInfo = null;
@@ -403,11 +579,21 @@ export const setup = (
         preInfo = mRectCache.getPreRect();
         if (preInfo) {
           let totalSize = metroTemplate.getBoundingBoxSize();
-          v.start = Math.min(Math.max(0, targetRect[pos_key] - preInfo[pos_key] + v.start), Math.max(0, totalSize[size_key] - v.range));
-          preInfo[pos_key] += (v.start - visibleInfo.start);
+          v.start = Math.min(
+            v.start,
+            Math.max(0, totalSize[size_key] - v.range)
+          );
+          preInfo[pos_key] += v.start - visibleInfo.start;
         }
       }
-      targetVisibleStart = _calculateVisibleStart(targetRect, direction, targetRect, v, preInfo);
+      targetVisibleStart = _calculateVisibleStart(
+        targetRect,
+        direction,
+        targetRect,
+        v,
+        preInfo,
+        cachePreWhenCal
+      );
     } else {
       //resize通过anchor直接设置了visibleStart
       if (resizeList.length > 0) {
@@ -419,7 +605,7 @@ export const setup = (
             width: tRect.width,
             height: tRect.height,
             frameCount: Forge.sFrameCount.count,
-          })
+          });
         }
       }
     }
@@ -432,25 +618,30 @@ export const setup = (
         visibleInfo.start = targetVisibleStart;
         return () => {
           visibleInfo.start = preVisibleStart;
-        }
+        };
       });
     }
 
     //updatePage
-    let updateHandler
+    let updateHandler;
+    let updatePageRange = {
+      start: visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
+      end: visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+    };
     taskManager.run(() => {
       updateHandler = pageUpdater.update(
         metroTemplate,
-        visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
-        visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
+        updatePageRange.start,
+        updatePageRange.end,
         focusId,
         mergeTmp,
-        permanentItemList
+        permanentItemList,
+        props.fullDisplayMode
       );
       return () => {
         updateHandler.recover();
-      }
-    })
+      };
+    });
 
     // resize item 动画
     if (resizeList.length > 0) {
@@ -462,7 +653,8 @@ export const setup = (
           const renderItem = getItemByIndex(index);
           const { left, top } = renderItem.templateInfo;
           if (index >= minIndex) {
-            const layoutCache = renderItem.templateInfo.layoutCache.getPreRect();
+            const layoutCache =
+              renderItem.templateInfo.layoutCache.getPreRect();
             if (layoutCache) {
               const doItemSlide = (div) => {
                 taskManager.run(() => {
@@ -470,17 +662,20 @@ export const setup = (
                     div,
                     [layoutCache.left - left, layoutCache.top - top],
                     [0, 0],
-                    resizeTaskMap[index] ?
-                      resizeTaskMap[index].params.animInfo
-                      : { duration: resizeAnimInfo.duration }
-                  )
+                    resizeTaskMap[index]
+                      ? resizeTaskMap[index].params.animInfo
+                      : {
+                          duration: resizeAnimInfo.duration,
+                          easing: resizeAnimInfo.easing,
+                        }
+                  );
                   return () => {
-                    cancel()
-                  }
+                    cancel();
+                  };
                 });
-              }
+              };
 
-              if (renderItem.mounted.value) {
+              if (toRaw(renderItem.mounted).value) {
                 doItemSlide(renderItem.rootDiv);
               } else {
                 taskManager.run(() => {
@@ -501,14 +696,27 @@ export const setup = (
       let animInfo = undefined;
       if (slideDoAnim) {
         animInfo = {
-          easing: null,//resizeAnimInfo.doAnim ? resizeAnimInfo.easing : '' /* innerSlideSetting.Easing */,
-          duration: resizeAnimInfo.doAnim ? resizeAnimInfo.duration : innerSlideSetting.Duration,
+          easing: resizeAnimInfo.doAnim
+            ? resizeAnimInfo.easing
+            : innerSlideSetting.Easing /* innerSlideSetting.Easing */,
+          duration: resizeAnimInfo.doAnim
+            ? resizeAnimInfo.duration
+            : innerSlideSetting.Duration,
           speed: innerSlideSetting.Speed,
           onStart: null,
           onEnd: null,
-        }
+        };
+      }
+      executeSlide(visibleInfo.start, animInfo, updateHandler);
+    } else {
+      //不滚动的时候检查是否已经更新可视的item
+      const applyedRange = pageUpdater.getApplyedRange();
+      if (
+        applyedRange.start != updatePageRange.start ||
+        applyedRange.end != updatePageRange.end
+      ) {
+        updateHandler.apply();
       }
-      executeSlide(visibleInfo.start, animInfo, updateHandler)
     }
 
     //回调
@@ -519,8 +727,8 @@ export const setup = (
         }, 0);
         return () => {
           clearTimeout(handler);
-        }
-      })
+        };
+      });
     }
     if ((needSlide || allTask.focus.length > 0) && props.onFocusRectChange) {
       taskManager.run(() => {
@@ -529,10 +737,20 @@ export const setup = (
         }, 0);
         return () => {
           clearTimeout(handler);
-        }
-      })
+        };
+      });
     }
-  }
+    if (resizeList.length > 0 && props.onSizeChange) {
+      taskManager.run(() => {
+        const handler = setTimeout(() => {
+          _onSizeChange();
+        }, 0);
+        return () => {
+          clearTimeout(handler);
+        };
+      });
+    }
+  };
   const taskManager = new TaskManager(onAddTask);
   const animationManager = new AnimationManager();
 
@@ -545,12 +763,14 @@ export const setup = (
       return () => {
         slideDivLeft.value = preLeft;
         slideDivTop.value = preTop;
-      }
+      };
     });
     if (animObj) {
       updateHandler.applyTmp();
       taskManager.run(() => {
-        const from = vertical ? [0, preTop - slideDivTop.value] : [preLeft - slideDivLeft.value, 0];
+        const from = vertical
+          ? [0, preTop - slideDivTop.value]
+          : [preLeft - slideDivLeft.value, 0];
         const cancel = animationManager.startSlideAnim(
           slideDiv.value,
           from,
@@ -558,45 +778,49 @@ export const setup = (
           {
             ...animObj,
             onEnd: () => {
-              updateHandler.apply()
-            }
+              updateHandler.apply();
+            },
           }
         );
         return () => {
-          cancel()
-        }
+          cancel();
+        };
       });
     } else {
       updateHandler.apply();
     }
+    _syncOnScroll();
     taskManager.run(() => {
       const handler = setTimeout(() => {
         _onScroll();
       }, 0);
       return () => {
         clearTimeout(handler);
-      }
-    })
-  }
+      };
+    });
+  };
 
   const updateItemSize = (index, newSize, animInfo) => {
     const item = getItemByIndex(index);
-    if (item && (item.templateInfo.width !== newSize.width || item.templateInfo.height !== newSize.height)) {
-      taskManager.addTask(TaskType.RESIZE_ITEM,
-        {
-          index,
-          width: newSize.width,
-          height: newSize.height,
-          animInfo,
-          preRect: {
-            left: item.templateInfo.left,
-            top: item.templateInfo.top,
-            width: item.templateInfo.width,
-            height: item.templateInfo.height,
-          },
-        });
+    if (
+      item &&
+      (item.templateInfo.width !== newSize.width ||
+        item.templateInfo.height !== newSize.height)
+    ) {
+      taskManager.addTask(TaskType.RESIZE_ITEM, {
+        index,
+        width: newSize.width,
+        height: newSize.height,
+        animInfo,
+        preRect: {
+          left: item.templateInfo.left,
+          top: item.templateInfo.top,
+          width: item.templateInfo.width,
+          height: item.templateInfo.height,
+        },
+      });
     }
-  }
+  };
 
   let callFocusAfterUpdate = false;
 
@@ -613,6 +837,18 @@ export const setup = (
     };
   };
 
+  const _getPostionRelativeToRoot = (index) => {
+    let templateInfo = getItemByIndex(index).templateInfo;
+    let x_offset = vertical ? 0 : -visibleInfo.start;
+    let y_offset = vertical ? -visibleInfo.start : 0;
+    return {
+      left: templateInfo.left + x_offset + widgetRectInfo.padding.left,
+      top: templateInfo.top + y_offset + widgetRectInfo.padding.top,
+      width: templateInfo.width,
+      height: templateInfo.height,
+    };
+  };
+
   const _getPosition = (index) => {
     let templateInfo = getItemByIndex(index).templateInfo;
     let x_offset = vertical ? 0 : -visibleInfo.start;
@@ -682,39 +918,60 @@ export const setup = (
   };
 
   const onItemClick = (item) => {
-    if (!item) { return };
-    if (isFocus) {
+    if (!item) {
+      return;
+    }
+    if (isFocus.value) {
       item.onClick();
     }
   };
 
   const onItemBlur = (blurItem) => {
     if (!blurItem) return;
-    setItemZIndex(blurItem, 0, false);
-    if (isFocus) {
+    if (isFocus.value) {
       blurItem.onBlur();
     }
   };
 
-  let gazeIndex = -1
+  const onItemIgnore = (item) => {
+    if (!item) return;
+    setItemZIndex(item, 0, false);
+    item.onIgnore();
+  }
+
+  let gazeIndex = -1;
+  let preGazeIndex = -1;
+  let callGazeAfterUpdate = false;
+  const onItemGaze = (item, rect) => {
+    if (!item || item.index == gazeIndex) { return; }
+    setItemZIndex(item, innerData.length, true);
+    preGazeIndex = gazeIndex;
+    gazeIndex = item.index;
+    if (toRaw(item.mounted).value) {
+      item.onGaze(rect);
+    } else {
+      callGazeAfterUpdate = true;
+    }
+  }
+  
+  let topZItemIndex = -1;
   const onItemFocus = (focusItem, rect) => {
     //触控模式不触发item的onFocus
-    if (!focusItem) return;
+    if (!focusItem) return false;
+    if (topZItemIndex != focusItem.index) {
+      setItemZIndex(getItemByIndex(topZItemIndex), 0, false);
+    }
     setItemZIndex(focusItem, innerData.length, true);
-    if (isFocus) {
+    topZItemIndex = focusItem.index;
+    if (JsvInteractionMode.value == KEY_MODE && isFocus.value) {
       _itemOnFocusSideEffect(focusItem, rect);
+      if (spatialNavigator) {
+        spatialNavigator.setFocus(focusItem.getSpatialNavNode());
+      }
     }
 
-    if (focusItem.mounted.value) {
-      if (gazeIndex != focusItem.templateInfo.index) {
-        let preGazeItem = getItemByIndex(gazeIndex);
-        if (preGazeItem) {
-          preGazeItem.onIgnore();
-        }
-        gazeIndex = focusItem.templateInfo.index
-        focusItem.onGaze(rect);
-      }
-      if (isFocus) {
+    if (toRaw(focusItem.mounted).value) {  
+      if (JsvInteractionMode.value == KEY_MODE && isFocus.value) {
         focusItem.onFocus(rect);
       }
       return true;
@@ -725,14 +982,35 @@ export const setup = (
   };
 
   const onItemLongPress = (item) => {
-    if (!item) { return; }
-    if (isFocus) {
+    if (!item) {
+      return;
+    }
+    if (isFocus.value) {
       item.onLongPress();
     }
-  }
+  };
+
+  //tap的时候触发ongaze
+  const onItemTap = (gazeItem) => {
+    if (gazeIndex != gazeItem.templateInfo.index) {
+      let preGazeItem = getItemByIndex(gazeIndex);
+      if (preGazeItem) {
+        onItemIgnore(preGazeItem);
+      }
+      gazeIndex = gazeItem.templateInfo.index;
+      gazeItem.onGaze(null);
+    }
+  };
 
-  const setFocusByUid = (uid, needSlide = true, doAnim = false, extraSetting) => {
-    if (!uid || innerData.length <= 0) { return; }
+  const setFocusByUid = (
+    uid,
+    needSlide = true,
+    doAnim = false,
+    extraSetting
+  ) => {
+    if (!uid || innerData.length <= 0) {
+      return;
+    }
     //添加item
     templateItemAdder.tryAddItemByUid(uid);
     const item = metroTemplate.getItemByUid(uid);
@@ -742,12 +1020,13 @@ export const setup = (
     }
 
     setFocusId(item.id, needSlide, doAnim, extraSetting);
-  }
+  };
 
   const setFocusId = (id, needSlide = true, doAnim = false, extraSetting) => {
     if (id == focusId || innerData.length <= 0) {
       return;
     }
+    mRectCache.clean();
     //有外部触发的滚动时, 取消load
     tryCancelDelayLoad();
     templateItemAdder.tryAddItemById(id);
@@ -756,7 +1035,9 @@ export const setup = (
       const nextTemplateInfo = next_focus_item.templateInfo;
       _changeFocusId(nextTemplateInfo.id);
       const preFocusItem = getItemById(preFocusId);
+      onItemIgnore(preFocusItem)
       onItemBlur(preFocusItem);
+      onItemGaze(next_focus_item, preEdgeRect);
       onItemFocus(next_focus_item, preEdgeRect);
       if (needSlide) {
         slideToItem(id2Index(id), doAnim);
@@ -768,19 +1049,20 @@ export const setup = (
         }
       }
 
-      const curTemplateInfo = getItemById(focusId).templateInfo;
-
-      let x_off_set = curTemplateInfo.left - nextTemplateInfo.left;
-      let y_off_set = curTemplateInfo.top - nextTemplateInfo.top;
-      preEdgeRect = {
-        direction: null,
-        rect: {
-          x: x_off_set,
-          y: y_off_set,
-          width: curTemplateInfo.width,
-          height: curTemplateInfo.height,
-        },
-      };
+      const curTemplateInfo = getItemById(focusId)?.templateInfo;
+      if (curTemplateInfo) {
+        let x_off_set = curTemplateInfo.left - nextTemplateInfo.left;
+        let y_off_set = curTemplateInfo.top - nextTemplateInfo.top;
+        preEdgeRect = {
+          direction: null,
+          rect: {
+            x: x_off_set,
+            y: y_off_set,
+            width: curTemplateInfo.width,
+            height: curTemplateInfo.height,
+          },
+        };
+      }
       unlock?.();
     }
   };
@@ -840,20 +1122,35 @@ export const setup = (
   const setZIndex = (index, normalZIndex, focusZIndex) => {
     const targetItem = getItemByIndex(index);
     if (targetItem) {
-      const n = normalZIndex, f = focusZIndex ?? normalZIndex;
+      const n = normalZIndex,
+        f = focusZIndex ?? normalZIndex;
 
       targetItem.itemConfig.focusZIndex = f;
       targetItem.itemConfig.normalZIndex = n;
-      const focused = isFocus && focusId == index2Id(index);
+      const focused = isFocus.value && focusId == index2Id(index);
       setItemZIndex(targetItem, focused ? f : n, focused);
     }
-  }
+  };
 
-  const slideToInner = (position, doAnim, updateParam = { mergeTmp: false }) => {
-    if (slideLock || position == (vertical ? slideDivTop.value : slideDivLeft.value)) {
-      return
-    };
-    taskManager.addTask(TaskType.SLIDE, { position, doAnim, updateParam }, SlideTaskType.SLIDE_BY_POS);
+  const slideToInner = (
+    position,
+    doAnim,
+    updateParam = { mergeTmp: false }
+  ) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
+    if (
+      slideLock ||
+      position == (vertical ? slideDivTop.value : slideDivLeft.value)
+    ) {
+      return;
+    }
+    taskManager.addTask(
+      TaskType.SLIDE,
+      { position, doAnim, updateParam },
+      SlideTaskType.SLIDE_BY_POS
+    );
   };
 
   const slideTo = (position, doAnim) => {
@@ -862,7 +1159,16 @@ export const setup = (
     }
   };
 
-  const slideToItemInner = (index, doAnim, direction = undefined, preItem = undefined, force = false) => {
+  const slideToItemInner = (
+    index,
+    doAnim,
+    direction = undefined,
+    preItem = undefined,
+    force = false
+  ) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
     taskManager.addTask(
       TaskType.SLIDE,
       {
@@ -872,16 +1178,20 @@ export const setup = (
         preItem,
         force,
       },
-      SlideTaskType.SLIDE_BY_ITEM);
+      SlideTaskType.SLIDE_BY_ITEM
+    );
   };
   const slideToItem = (index, doAnim) => {
-    slideToItemInner(index, doAnim)
-  }
+    slideToItemInner(index, doAnim);
+  };
 
   const slideToDiv = (div, doAnim) => {
     slideToDivInner(div, doAnim);
-  }
+  };
   const slideToDivInner = (div, doAnim, direction = undefined) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
     if (div) {
       taskManager.addTask(
         TaskType.SLIDE,
@@ -890,37 +1200,61 @@ export const setup = (
           doAnim,
           direction,
         },
-        SlideTaskType.SLIDE_BY_DIV);
+        SlideTaskType.SLIDE_BY_DIV
+      );
     }
-  }
+  };
   const slideToRectInner = (rect, doAnim, direction, force) => {
-    if (rect && typeof rect.left == "number" && typeof rect.top == "number" && typeof rect.width == "number" && typeof rect.height == "number") {
+    if (props.fullDisplayMode) {
+      return;
+    }
+    if (
+      rect &&
+      typeof rect.left == "number" &&
+      typeof rect.top == "number" &&
+      typeof rect.width == "number" &&
+      typeof rect.height == "number"
+    ) {
       taskManager.addTask(
         TaskType.SLIDE,
         {
           rect,
           doAnim,
           direction,
-          force
+          force,
         },
         SlideTaskType.SLIDE_BY_RECT
       );
     }
-  }
+  };
+
+  const slideToNormalize = (position, doAnim) => {
+    if (props.fullDisplayMode) {
+      return;
+    }
+    taskManager.addTask(
+      TaskType.SLIDE,
+      { position, doAnim },
+      SlideTaskType.SLIDE_BY_POS_NORMALIZE
+    );
+  };
+
   const slideToRect = (rect, doAnim, direction = undefined) => {
     slideToRectInner(rect, doAnim, direction, false);
-  }
+  };
 
   function ifLayoutChange(type, oldMeasureItem, newMeasureItem) {
-    let changed = newMeasureItem.width !== oldMeasureItem.width
-      || newMeasureItem.height !== oldMeasureItem.height
-      || newMeasureItem.focusable !== oldMeasureItem.focusable
-      || newMeasureItem.marginRight !== oldMeasureItem.marginRight
-      || newMeasureItem.marginBottom !== oldMeasureItem.marginBottom;
+    let changed =
+      newMeasureItem.width !== oldMeasureItem.width ||
+      newMeasureItem.height !== oldMeasureItem.height ||
+      newMeasureItem.focusable !== oldMeasureItem.focusable ||
+      newMeasureItem.marginRight !== oldMeasureItem.marginRight ||
+      newMeasureItem.marginBottom !== oldMeasureItem.marginBottom;
     if (type !== "relative") {
-      changed = changed
-        || newMeasureItem.left !== oldMeasureItem.left
-        || newMeasureItem.top !== oldMeasureItem.top
+      changed =
+        changed ||
+        newMeasureItem.left !== oldMeasureItem.left ||
+        newMeasureItem.top !== oldMeasureItem.top;
     }
     return changed;
   }
@@ -933,78 +1267,86 @@ export const setup = (
   const refreshData = (forceUpdate, slideToFocus = "auto") => {
     //由于data不支持reactive, 因此数据的更新只通过provideData
     if (!props.provideData) {
-      console.error("refreshData: provideData is null.");
+      errorLogger("refreshData: provideData is null.");
       return;
     }
     try {
       let newData = toRaw(safeProvideData()).concat();
       if (newData instanceof Array) {
         let maxSameIndex = -1;
-        let layoutChange = false;
+        let layoutChange = 0; //0: 不需要更新布局, 1: 需要更新布局, 2: 仅删除数据
         let onlyDataChangeList = [];
-        let targetFocusId = focusId
-        if (focusId >= newData.length) {
-          targetFocusId = newData.length - 1
-        }
-
-        if (!forceUpdate) {
-          for (let i = 0; i < dataList.length; ++i) {
-            let oldItem = dataList[i];
-            let newItem = newData[i];
-            if (newItem) {
-              if (((typeof newItem[DATA_ID_KEY] == "undefined" || typeof dataKeyList[i] == "undefined") && newItem === oldItem)
-                || (typeof newItem[DATA_ID_KEY] !== "undefined" && typeof dataKeyList[i] !== "undefined" && newItem[DATA_ID_KEY] === dataKeyList[i])) {
-                //相同的item
-                maxSameIndex = Math.max(maxSameIndex, i);
-              } else {
-                const newMeasureItem = props.measures(newItem);
-                const oldMeasureItem = props.measures(oldItem);
-                layoutChange = ifLayoutChange(props.layoutType, oldMeasureItem, newMeasureItem);
-                if (layoutChange) {
-                  break;
+        let preGazeId = index2Id(gazeIndex);
+        let targetFocusId = focusId;
+        let targetGazeIndex = gazeIndex;
+        let curFocusItemChanged = true;
+        if (newData.length == 0) {
+          layoutChange = 1;
+          cleanFocusStatus();
+        } else {
+          if (!forceUpdate) {
+            const curFocusIndex = id2Index(focusId);
+            for (let i = 0; i < dataList.length; ++i) {
+              let oldItem = dataList[i];
+              let newItem = newData[i];
+              if (newItem) {
+                if (
+                  ((typeof newItem[DATA_ID_KEY] == "undefined" ||
+                    typeof dataKeyList[i] == "undefined") &&
+                    newItem === oldItem) ||
+                  (typeof newItem[DATA_ID_KEY] !== "undefined" &&
+                    typeof dataKeyList[i] !== "undefined" &&
+                    newItem[DATA_ID_KEY] === dataKeyList[i])
+                ) {
+                  //相同的item
+                  maxSameIndex = Math.max(maxSameIndex, i);
+                  if (curFocusIndex == i) {
+                    curFocusItemChanged = false;
+                  }
                 } else {
-                  if (i < innerData.length) {
-                    onlyDataChangeList.push({
-                      templateInfo: innerData[i].templateInfo,
-                      measureObj: newMeasureItem,
-                      data: newItem,
-                      index: i,
-                    });
+                  const newMeasureItem = props.measures(newItem);
+                  const oldMeasureItem = props.measures(oldItem);
+                  const changed = ifLayoutChange(
+                    props.layoutType,
+                    oldMeasureItem,
+                    newMeasureItem
+                  );
+                  if (changed) {
+                    layoutChange = 1;
+                    break;
+                  } else {
+                    if (i < innerData.length) {
+                      onlyDataChangeList.push({
+                        templateInfo: innerData[i].templateInfo,
+                        measureObj: newMeasureItem,
+                        data: newItem,
+                        index: i,
+                      });
+                    }
                   }
                 }
-              }
-            } else {
-              if (i >= newData.length) {
-                //item减少需要布局改变
-                layoutChange = true;
-                break;
               } else {
-                //数据中存在undefined item
-                throw new Error("undefined item in data list.", i, newData);
+                if (i >= newData.length) {
+                  //item减少需要布局改变
+                  layoutChange = 2;
+                  break;
+                } else {
+                  //数据中存在undefined item
+                  errorLogger("undefined item in data list.");
+                  throw new Error("undefined item in data list.", i, newData);
+                }
               }
             }
           }
         }
 
-        //记录刷新前焦点的可视状态, 若焦点可视, 则刷新后也需要保证焦点的可视
-        let needSlide = false;
-        if (slideToFocus == "enable") {
-          needSlide = true;
-        } else if (slideToFocus == "disable") {
-          needSlide = false;
-        } else {
-          let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
-          if (targetRect) {
-            needSlide = rectVisibleState(targetRect) !== 0;
-          } else {
-            needSlide = rectVisibleState(getItemById(focusId)?.templateInfo) !== 0;
-          }
-        }
-        
+        //判断是否需要重新onGaze
+        let needReOnGaze = false;
+        //更新template
+        const oldDataCount = dataList.length;
         dataList = newData;
-        dataKeyList = dataList.map(i => i[DATA_ID_KEY]);
-
-        if (forceUpdate || layoutChange) {
+        dataKeyList = dataList.map((i) => i[DATA_ID_KEY]);
+        if (forceUpdate || layoutChange == 1) {
           //需要更新布局
           pageUpdateToken.value++;
           //数据更改
@@ -1014,7 +1356,8 @@ export const setup = (
             props.direction,
             props.supportHistoryPath,
             props.layoutType,
-            templateMode
+            templateMode,
+            errorLogger
           );
           innerData = [];
           templateItemAdder = new TemplateItemAdder(
@@ -1024,73 +1367,179 @@ export const setup = (
             pageRange,
             _onTemplateItemAdd,
             props.name,
-            _onTemplateAddDone
+            getOnTemplateAddDone(true),
+            errorLogger
           );
-          if (props.onScroll) {
-            templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+          if (props.onScroll || touchEnable.value || props.fullDisplayMode) {
+            templateItemAdder.tryAddItemByIndex(dataList.length - 1, getOnTemplateAddDone(false));
           } else {
-            templateItemAdder.tryAddItemById(targetFocusId);
+            //加到旧数据的个数，保险一点
+            templateItemAdder.tryAddItemByIndex(Math.min(dataList.length, oldDataCount), getOnTemplateAddDone(false));
           }
+          needReOnGaze = true;
+        } else if (layoutChange == 2) {
+          //仅删除
+          templateItemAdder.removeItemTo(dataList.length);
+          innerData.splice(dataList.length);
         } else {
+          templateItemAdder.updateData(newData);
           if (maxSameIndex < newData.length - 1) {
             //追加数据
-            templateItemAdder.updateData(newData);
-            if (props.onScroll) {
-              templateItemAdder.tryAddItemByIndex(dataList.length - 1);
+            if (props.onScroll || touchEnable.value || props.fullDisplayMode) {
+              templateItemAdder.tryAddItemByIndex(dataList.length - 1, getOnTemplateAddDone(false));
             } else {
-              templateItemAdder.tryAddItemById(targetFocusId);
+              templateItemAdder.tryAddItemByIndex(Math.min(dataList.length, oldDataCount), getOnTemplateAddDone(false));
             }
           }
+        }
+        //更新focudId 和 gazeIndex
+        let lastFocusableItemId = metroTemplate.idsMap.length - 1;
 
-          //仅用户数据变更
-          if (onlyDataChangeList.length > 0) {
-            for (let i of onlyDataChangeList) {
-              if (i.index < innerData.length) {
-                innerData[i.index].updateCustomData(i.data, _getItemConfigFromMeasursObj(i.measureObj));
-                innerData[i.index].enableTap = i.measureObj.enableTap ?? false;
-              } else {
-                //之后的数据未布局, 尚未添加到innerData中
-                break;
+        if (lastFocusableItemId < 0) {
+          targetFocusId = -1;
+          targetGazeIndex = -1;
+        } else {
+          targetFocusId = Math.max(0, Math.min(lastFocusableItemId, focusId));
+          targetGazeIndex = id2Index(Math.max(0, Math.min(lastFocusableItemId, preGazeId)));
+        }
+
+        //仅用户数据变更
+        if (onlyDataChangeList.length > 0) {
+          for (let i of onlyDataChangeList) {
+            if (i.index < innerData.length) {
+              if (i.index == gazeIndex) {
+                needReOnGaze = true;
               }
+              innerData[i.index].updateCustomData(
+                i.data,
+                _getItemConfigFromMeasursObj(i.measureObj)
+              );
+              innerData[i.index].enableTap = i.measureObj.enableTap ?? false;
+            } else {
+              //之后的数据未布局, 尚未添加到innerData中
+              break;
             }
           }
         }
 
-        if (targetFocusId != focusId) {
-          //重置所有的滚动信息
-          _changeFocusId(targetFocusId, false);
-          visibleInfo = visibleInfo.copy();
-          visibleInfo.start = 0;
-          visibleInfo._startMax = 0;
-          slideDivLeft.value = 0;
-          slideDivTop.value = 0;
-        }
+        //数据更新，清理缓存的范围信息，避免旧的范围与新的有冲突
+        pageUpdater.cleanCache();
+        //更新可视
         const updater = pageUpdater.update(
           metroTemplate,
           visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
           visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
-          focusId,
+          index2Id(targetGazeIndex),
           false,
-          permanentItemList
+          permanentItemList,
+          props.fullDisplayMode
         );
         updater.apply();
+        if (!renderData.value.some((i) => i.templateInfo.index == gazeIndex)) {
+          needReOnGaze = false;
+        }
+
+        let preVisibleStart = visibleInfo.start;
+
+        if (targetGazeIndex != gazeIndex || layoutChange == 2) {
+          //仅在删除数据的时候更新, 其他情况都保留之前的滚动信息
+          //由于template add done 回调里会更新box, 需要在template重新创建前, 重置所有的滚动信息
+          visibleInfo = visibleInfo.copy();
+          visibleInfo.start = 0;
+          visibleInfo._startMax = 0;
+          slideDivLeft.value = 0;
+          slideDivTop.value = 0;
+        }
+
+        let needSlide = false;
+        let targetRect = mRectCache.getCurRect() ?? mRectCache.getPreRect();
+        if (targetGazeIndex != gazeIndex) {
+          needSlide = true;
+        } else if (slideToFocus == "enable") {
+          needSlide = true;
+        } else if (slideToFocus == "disable") {
+          needSlide = false;
+        } else if (layoutChange == 2) {
+          needSlide = true;
+        } else {
+          //保持原有焦点的位置
+          if (JsvInteractionMode.value == KEY_MODE) {
+            if (targetRect) {
+              needSlide = rectVisibleState(targetRect) !== 2;
+            } else {
+              needSlide =
+                rectVisibleState(getItemByIndex(targetGazeIndex)?.templateInfo) !==
+                2;
+            }
+          } else {
+            //touch模式下，不需要滑动
+          }
+        }
+        if (targetFocusId != focusId) {
+          //重置所有的滚动信息
+          _changeFocusId(targetFocusId, false);
+        }
+
+        const gazeItem = getItemByIndex(targetGazeIndex);
         const focusItem = getItemById(focusId);
-        onItemFocus(focusItem, null);
-        if (needSlide) {
-          if (targetRect) {
-            slideToRectInner(targetRect, false, 0, true);
-          } else if (focusItem.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+        if (gazeItem) {
+          //数据刷新时, 重置preEdgeRect, 否则再嵌套模式下, 会使用上一次的preEdgeRect, 导致子又findNearestByRect
+          preEdgeRect = null;
+          if (needSlide) {
+            if (layoutChange == 2) {
+              slideToNormalize(preVisibleStart, false);
+            } else if (targetRect) {
+              slideToRectInner(targetRect, false, 0, true);
+            } else if (
+              focusItem && focusItem.itemConfig.itemSlide ==
+              METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
+            ) {
               //只有这个item是控制滚动的才slide, 其他如嵌套时不需要slide
-              slideToItemInner(id2Index(focusId), false, 0, 0, true);
+              slideToItemInner(targetGazeIndex, false, 0, 0, true);
             }
+          }
+        } else {
+          slideToInner(0, false);
+          preEdgeRect = null;
+          mRectCache.clean();
+        }
+
+        //与交互模式相关的处理
+        if (JsvInteractionMode.value == TOUCH_MODE) {
+          //TODO touch模式的refresh还是有问题,
+          // 1. 点击删除item, 会触发onDragStart, 这里onDragStart正好更新了visibleInfo.start导致可以运行, 但这里还是要正确更新visibleInfo.start
+          // let divPos = vertical ? slideDivTop.value + freeMoveSlideGapTop : slideDivLeft.value + freeMoveSlideGapLeft;
+          // visibleInfo.start = getVisibleStart(data);
+
+          updateTouchBoxCondition();
+          if (gazeIndex != targetGazeIndex) {
+            gazeIndex = targetGazeIndex;
+          }
+          if (needReOnGaze) {
+            getItemByIndex(gazeIndex)?.onGaze(null);
+          }
+        } else {
+          if (gazeItem) {
+            onItemGaze(gazeItem, null);
+          }
+          if (focusItem) {
+            onItemFocus(focusItem, null);
+          }
         }
-        
-        //template和slideDivStyle均确定后再次重设box condition
-        updateTouchBoxCondition();
       }
     } catch (e) {
-      console.log(TAG, "refresh error", e)
+      console.log(TAG, "refresh error", e);
+    }
+
+    //refresh完成后, 重置renderBreak
+    if (props.enableItemRenderBreak !== innerEnableRenderBreak) {
+      nextTick(() => {
+        innerEnableRenderBreak = props.enableItemRenderBreak;
+        window.JsView?.setRenderBreakEnable?.(true);
+        vRenderBreakChanged = false;
+      });
     }
+    _onSizeChange();
   };
 
   const getVisibleItems = () => {
@@ -1107,41 +1556,59 @@ export const setup = (
   };
 
   const moveFocus = (direction) => {
-    if (innerData.length <= 0) { return; }
+    if (innerData.length <= 0) {
+      return;
+    }
     //有外部触发的滚动时, 取消load
     tryCancelDelayLoad();
-    if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
+    if (
+      direction == "left" ||
+      direction == 37 ||
+      direction == EdgeDirection.left
+    ) {
       _moveToNext(-1, 0);
-    } else if (direction == "right" || direction == 39 || direction == EdgeDirection.right) {
+    } else if (
+      direction == "right" ||
+      direction == 39 ||
+      direction == EdgeDirection.right
+    ) {
       _moveToNext(1, 0);
-    } else if (direction == "top" || direction == 38 || direction == EdgeDirection.top) {
+    } else if (
+      direction == "top" ||
+      direction == 38 ||
+      direction == EdgeDirection.top
+    ) {
       _moveToNext(0, -1);
-    } else if (direction == "bottom" || direction == 40 || direction == EdgeDirection.bottom) {
+    } else if (
+      direction == "bottom" ||
+      direction == 40 ||
+      direction == EdgeDirection.bottom
+    ) {
       _moveToNext(0, 1);
     } else {
-      console.error(TAG, "moveFocus direction is invalid.", direction);
+      errorLogger(TAG, "moveFocus direction is invalid.", direction);
     }
   };
 
   const getCustomerDataSize = () => {
     return dataList.length;
-  }
+  };
 
   const getCurrentFocusIndex = () => {
     return id2Index(focusId);
-  }
+  };
 
   const getTemplatePosition = (index) => {
     return _getTemplatePosition(index);
-  }
+  };
 
   const lockSlide = () => {
     slideLock = true;
-  }
+  };
 
   const unlockSlide = () => {
     slideLock = false;
-  }
+  };
 
   const setSlideSetting = (setting) => {
     if (!setting) {
@@ -1149,14 +1616,112 @@ export const setup = (
     } else {
       innerSlideSetting = setting;
     }
-  }
+  };
 
   const tryCancelDelayLoad = () => {
     if (delayLoadHandler > 0) {
       clearTimeout(delayLoadHandler);
       delayLoadHandler = -1;
     }
-  }
+  };
+
+  let vRenderBreakChanged = false;
+  const tmpDisableRenderBreak = () => {
+    if (props.enableItemRenderBreak) {
+      innerEnableRenderBreak = false;
+      window.JsView?.setRenderBreakEnable?.(false);
+      vRenderBreakChanged = true;
+    }
+  };
+
+  const getCurrentVisibleRange = () => {
+    return {
+      leftTop: {
+        x: props.direction == VERTICAL ? 0 : visibleInfo.startWithPadding,
+        y: props.direction == VERTICAL ? visibleInfo.startWithPadding : 0,
+      },
+      rightBottom: {
+        x:
+          props.direction == VERTICAL
+            ? props.width
+            : visibleInfo.endWithPadding,
+        y:
+          props.direction == VERTICAL
+            ? visibleInfo.endWithPadding
+            : props.height,
+      },
+    };
+  };
+
+  //获取指定区间内可视item的树(MetroWidget嵌套时)
+  const getItemVisibleState = (leftTop, rightBottom) => {
+    //传过来的区域已经是真实区域了，不需要再减去padding
+    const rangeStart =
+      props.direction == VERTICAL
+        ? leftTop.y
+        : leftTop.x;
+    const rangeEnd =
+      props.direction == VERTICAL
+        ? rightBottom.y
+        : rightBottom.x;
+    const [startIndex, endIndex] = metroTemplate.getVisibleItemList(
+      rangeStart,
+      rangeEnd,
+      gazeIndex
+    );
+    const result = [];
+    for (let index = startIndex; index <= endIndex; index++) {
+      const item = getItemByIndex(index);
+      if (item) {
+        const s = rectVisibleState(item.templateInfo, rangeStart, rangeEnd);
+        if (s == 0) {
+          //getVisibleItemList返回的区间内可能还有不可见的item
+          continue;
+        }
+        //rangeStart和rangeEnd转化为相对与item的相对位置
+        const itemLeftTop = {
+          x: item.templateInfo.left + widgetRectInfo.padding.left,
+          y: item.templateInfo.top + widgetRectInfo.padding.top,
+        };
+        const newLeftTop = {
+          x: leftTop.x - itemLeftTop.x,
+          y: leftTop.y - itemLeftTop.y,
+        };
+        const newRightBottom = {
+          x: rightBottom.x - itemLeftTop.x,
+          y: rightBottom.y - itemLeftTop.y,
+        };
+        const itemVisibleState = item.onGetItemVisibleState(
+          newLeftTop,
+          newRightBottom
+        );
+        let info = {
+          name: props.name,
+          index: index,
+          visibleState: s == 1 ? "partial" : "full",
+          children: itemVisibleState ? itemVisibleState : [],
+          widgetHandler: exportObject,
+          focusable: item.templateInfo.focusable ?? true,
+        };
+        if (index == gazeIndex) {
+          result.unshift(info);
+        } else {
+          result.push(info);
+        }
+      }
+    }
+    return result;
+  };
+
+  const cleanFocusStatus = () => {
+    preFocusId = -1;
+    focusId = -1;
+    gazeIndex = -1;
+  };
+
+  const getParentWidgetHandler = () => {
+    return parentMetroWidget?.at(-1)?.handler
+  };
 
   const exportObject = {
     lockSlide,
@@ -1182,6 +1747,12 @@ export const setup = (
     cancelDelayLoad: tryCancelDelayLoad,
     setSensorSensitivity,
     getItemLayoutInfo: _getTemplatePosition,
+    tmpDisableRenderBreak,
+    getItemVisibleState,
+    getCurrentVisibleRange,
+    cleanFocusStatus,
+    getParentWidgetHandler,
+    getName: () => props.name,
   };
 
   const _calculateNearestItemByRect = (visibleSet, enter_rect_info) => {
@@ -1232,16 +1803,14 @@ export const setup = (
       let full_show =
         itemTemplateInfo[key_pos] >= visibleInfo.start &&
         itemTemplateInfo[key_pos] + itemTemplateInfo[key_width] - 1 <=
-        visibleInfo.end;
+          visibleInfo.end;
       if (full_show) {
-        let x_pos =
-          vertical
-            ? itemTemplateInfo.left
-            : itemTemplateInfo.left - visibleInfo.start;
-        let y_pos =
-          vertical
-            ? itemTemplateInfo.top - visibleInfo.start
-            : itemTemplateInfo.top;
+        let x_pos = vertical
+          ? itemTemplateInfo.left
+          : itemTemplateInfo.left - visibleInfo.start;
+        let y_pos = vertical
+          ? itemTemplateInfo.top - visibleInfo.start
+          : itemTemplateInfo.top;
         var target_x_range = new SingleRangeModel(
           x_pos,
           x_pos + itemTemplateInfo.width - 1
@@ -1380,22 +1949,25 @@ export const setup = (
   };
 
   const onDispatchKeyDown = (ev) => {
-    if (mode.getMode() == TOUCH_MODE && !mode.duringTouch()) {
-      if (ev.keyCode == 37 || ev.keyCode == 38 || ev.keyCode == 39 || ev.keyCode == 40) {
-        //只有在上下左右键切换为focus_mode
-        mode.keyDown();
-        //touch切换为focus的首次按键只显示焦点
-        const focusItem = _getVisibleFocusableItem();
-        const preFocusItem = getItemById(focusId);
-        _changeFocusId(focusItem.id, false);
-        if (preFocusItem.id !== focusItem.id) {
-          onItemBlur(preFocusItem);
-        }
-        onItemFocus(focusItem);
+    if (
+      ev.keyCode == 37 ||
+      ev.keyCode == 38 ||
+      ev.keyCode == 39 ||
+      ev.keyCode == 40
+    ) {
+      //fling过程中不处理按键
+      if (touchStateMgr.duringFling()) {
+        window.JsView?.changeInteractionMode?.("touch", "key");
+      }
+
+      if (JsvInteractionMode.value == TOUCH_MODE) {
+        JsvInteractionMode.value = KEY_MODE;
+        touchStateMgr.touchEnd(touchStateMgr.getTouchCount());
+        return true;
       }
     }
     return false;
-  }
+  };
 
   const _moveByKey = (keyCode) => {
     switch (keyCode) {
@@ -1414,13 +1986,14 @@ export const setup = (
       default:
         return false;
     }
-  }
+  };
 
   let clickDownReceived = false;
   let longPressTriggered = false;
 
   const focusBlockOnKeyUp = (ev) => {
-    if (!props.enableLongPress) {
+    const curFocusItem = getItemById(focusId);
+    if (!curFocusItem || !curFocusItem.itemConfig.enableLongPress) {
       return false;
     }
     //支持长按时 onClick 由 keyup 处理
@@ -1429,14 +2002,14 @@ export const setup = (
     if (!longPressTriggered) {
       if (ev.keyCode == 13 && clickDownReceived) {
         clickDownReceived = false;
-        onItemClick(getItemById(focusId));
+        onItemClick(curFocusItem);
         return true;
       }
     } else {
       longPressTriggered = false;
     }
     return false;
-  }
+  };
 
   let preStartKeyDownTime = -1;
   const focusBlockOnKeyDown = (ev) => {
@@ -1448,25 +2021,28 @@ export const setup = (
       preStartKeyDownTime = ev.timeStamp;
     }
     tryCancelDelayLoad();
-    if (mode.getMode() == TOUCH_MODE) {
-      if (mode.duringTouch()) {
-        //touch过程中的按键不处理
-        return true;
-      }
+    if (JsvInteractionMode.value == TOUCH_MODE && touchStateMgr.duringTouch()) {
+      //touch过程中的按键不处理
+      return true;
     }
 
     if (_moveByKey(ev.keyCode)) {
       return true;
     }
     if (ev.keyCode == 13) {
+      const curFocusItem = getItemById(focusId);
       clickDownReceived = true;
-      if (props.enableLongPress) {
-        if (ev.repeat && ev.timeStamp - preStartKeyDownTime > LONGPRESS_TIMEOUT && !longPressTriggered) {
+      if (curFocusItem?.itemConfig.enableLongPress) {
+        if (
+          ev.repeat &&
+          ev.timeStamp - preStartKeyDownTime > LONGPRESS_TIMEOUT &&
+          !longPressTriggered
+        ) {
           longPressTriggered = true;
-          onItemLongPress(getItemById(focusId));
+          onItemLongPress(curFocusItem);
         }
       } else if (!ev.repeat) {
-        onItemClick(getItemById(focusId));
+        onItemClick(curFocusItem);
       }
       return true;
     } else {
@@ -1482,7 +2058,8 @@ export const setup = (
     if (lastTemplateInfo) {
       if (vertical) {
         touchDivSize.width = props.width;
-        touchDivSize.height = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+        touchDivSize.height =
+          lastTemplateInfo.top + lastTemplateInfo.height - 1;
       } else {
         touchDivSize.width = lastTemplateInfo.left + lastTemplateInfo.width - 1;
         touchDivSize.height = props.height;
@@ -1490,15 +2067,23 @@ export const setup = (
     }
   }
 
-  const _onTemplateAddDone = () => {
-    //update slideDiv size
-    let preTouchW = touchDivSize.width;
-    let preTouchH = touchDivSize.height;
-    updateTouchDivSize();
-    if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
-      updateTouchBoxCondition();
+  const getOnTemplateAddDone = (needUpdateBox) => {
+    return () => {
+      //update slideDiv size
+      let preTouchW = touchDivSize.width;
+      let preTouchH = touchDivSize.height;
+      updateTouchDivSize();
+      if (needUpdateBox) {
+        if (preTouchW !== touchDivSize.width || preTouchH !== touchDivSize.height) {
+          updateTouchBoxCondition();
+        }
+      }
+      if (props.fullDisplayMode) {
+        let size_key = vertical ? "height" : "width";
+        visibleInfo.range = metroTemplate.getBoundingBoxSize()[size_key];
+      }
     }
-  }
+  };
 
   const _getItemConfigFromMeasursObj = (measuresObj) => {
     let focusZIndex = -1,
@@ -1523,8 +2108,40 @@ export const setup = (
       focusZIndex,
       normalZIndex,
       permanent: measuresObj.permanent ?? false,
-      itemSlide: measuresObj.itemSlide ?? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
+      itemSlide:
+        measuresObj.itemSlide ?? METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS,
       showSkeleton: measuresObj.showSkeleton ?? true,
+      enableLongPress: measuresObj.enableLongPress ?? props.enableLongPress,
+      bindSpatialNav: measuresObj.bindSpatialNav ?? false,
+    };
+  };
+
+  const rootPositionCache = {
+    cacheToken: -1,
+    cacheTargetDiv: undefined,
+    cacheRect: undefined,
+  }
+  const getItemPositionWithCache = (token, target, itemIndex) => {
+    if (!target || !rootDiv.value) {
+      return undefined;
+    }
+    let rootRect;
+    if (rootPositionCache.cacheToken === token 
+      && rootPositionCache.cacheTargetDiv === target 
+      && rootPositionCache.cacheRect) {
+      rootRect = rootPositionCache.cacheRect;
+    } else {
+      rootRect = rootDiv.value.jsvGetRelativePosition(target);
+      rootPositionCache.cacheToken = token;
+      rootPositionCache.cacheTargetDiv = target;
+      rootPositionCache.cacheRect = rootRect;
+    }
+    const itemRect = _getPostionRelativeToRoot(itemIndex);
+    return {
+      left: rootRect.left + itemRect.left,
+      top: rootRect.top + itemRect.top,
+      width: itemRect.width,
+      height: itemRect.height,
     };
   }
 
@@ -1545,6 +2162,12 @@ export const setup = (
       renderStyle,
       itemConfig,
       () => {
+        if (callGazeAfterUpdate && item.index == gazeIndex) {
+          nextTick(() => {
+            item.onGaze(preEdgeRect);
+          });
+          callGazeAfterUpdate = false;
+        }
         if (callFocusAfterUpdate && item.id === focusId) {
           nextTick(() => {
             onItemFocus(item, preEdgeRect);
@@ -1562,9 +2185,55 @@ export const setup = (
         slideTo: slideTo,
         updateItemSize,
         widgetHandler: exportObject,
-      }
+      },
+      {
+        onTap: onItemTap,
+        getMwChain: () => {
+          return metroWidgetChain;
+        },
+        name: props.name,
+        getItemPositionWithCache,
+      },
+      props.renderAcc,
+      innerEnableRenderBreak
     );
     item.enableTap = measuresObj.enableTap ?? false;
+    // 占位图布局
+    if (props.enableItemRenderBreak) {
+      let l, t, w, h, logoW, logoH;
+      l =
+        typeof measuresObj.placeHolderLayout?.left == "number"
+          ? measuresObj.placeHolderLayout.left
+          : 0;
+      t =
+        typeof measuresObj.placeHolderLayout?.top == "number"
+          ? measuresObj.placeHolderLayout.top
+          : 0;
+      w =
+        typeof measuresObj.placeHolderLayout?.width == "number"
+          ? measuresObj.placeHolderLayout.width
+          : item.renderStyle.width - (props.placeHolderSetting.gap ?? 0);
+      h =
+        typeof measuresObj.placeHolderLayout?.height == "number"
+          ? measuresObj.placeHolderLayout.height
+          : item.renderStyle.height - (props.placeHolderSetting.gap ?? 0);
+      logoW =
+        typeof measuresObj.placeHolderLayout?.logoWidth == "number"
+          ? measuresObj.placeHolderLayout.logoWidth
+          : props.placeHolderSetting.logoWidth ?? 0;
+      logoH =
+        typeof measuresObj.placeHolderLayout?.logoHeight == "number"
+          ? measuresObj.placeHolderLayout.logoHeight
+          : props.placeHolderSetting.logoHeight ?? 0;
+      item.placeHolderLayout = {
+        left: l,
+        top: t,
+        width: w,
+        height: h,
+        logoWidth: logoW,
+        logoHeight: logoH,
+      };
+    }
 
     innerData.push(item);
     if (item.itemConfig.permanent) {
@@ -1596,7 +2265,10 @@ export const setup = (
         return false;
       }
       const focusItem = getItemById(focusId);
-      if (focusItem.itemConfig.itemSlide !== METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT) {
+      if (
+        focusItem.itemConfig.itemSlide !==
+        METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT
+      ) {
         return;
       }
       let item_div = ev.element;
@@ -1614,7 +2286,9 @@ export const setup = (
           direction = 1;
         }
       }
-      const item_layout = item_div.jsvGetRelativePosition(toRaw(locateDiv.value));
+      const item_layout = item_div.jsvGetRelativePosition(
+        toRaw(locateDiv.value)
+      );
 
       let fakeItem = {
         templateInfo: {
@@ -1628,16 +2302,20 @@ export const setup = (
         },
       };
 
-      let cur_slide = _calculateVisibleStart(fakeItem.templateInfo, direction, fakeItem.templateInfo, visibleInfo);
+      let cur_slide = _calculateVisibleStart(
+        fakeItem.templateInfo,
+        direction,
+        fakeItem.templateInfo,
+        visibleInfo,
+        null,
+        true,
+      );
       if (cur_slide != visibleInfo.start) {
-        slideToInner(
-          cur_slide,
-          true,
-          {
-            //250207 change: 为true时, 会导致不可见的item反复加载,释放, 所以改为false
-            //但之前设为true应该是为了保证滚动时的楼层不提前消失, 此后若再遇到这类问题再考虑
-            mergeTmp: false
-          });
+        slideToInner(cur_slide, true, {
+          //250207 change: 为true时, 会导致不可见的item反复加载,释放, 所以改为false
+          //但之前设为true应该是为了保证滚动时的楼层不提前消失, 此后若再遇到这类问题再考虑
+          mergeTmp: false,
+        });
         return true;
       }
     }
@@ -1646,10 +2324,14 @@ export const setup = (
 
   const _changeFocusId = (id, cache_pre = true) => {
     preFocusId = cache_pre ? focusId : -1;
-    focusId = id >= 0 && id < metroTemplate.size ? id : 0;
-    currentFocusIndex.value = id2Index(id);
+    if (metroTemplate.size == 0) {
+      focusId = -1;
+    } else {
+      focusId = id >= 0 && id < metroTemplate.size ? id : 0;
+    }
+    currentFocusIndex.value = id2Index(focusId);
     taskManager.addTask(TaskType.ON_FOCUS_CHANGE);
-  }
+  };
 
   const _bubbleCustomEvent = (event) => {
     if (props.sendFocusRectEvent && event) {
@@ -1658,6 +2340,26 @@ export const setup = (
     }
   };
 
+  const _innerOnEdge = (rect) => {
+    if (props.onEdge) {
+      if (typeof props.onEdge === "string") {
+        if (props.onEdge === ONEDGE_TYPE.SPATIAL_NAV) {
+          if (spatialNavigator) {
+            spatialNavigator.moveTo(rect.direction);
+          } else {
+            console.warn("MetroWidget: onEdge is spatialNav, but spatialNavigator is not set", props.name);
+          }
+        } else {
+          console.warn("MetroWidget: onEdge string is not valid", props.name, props.onEdge);
+        }
+      } else if (typeof props.onEdge === "function") {
+        props.onEdge(rect);
+      } else {
+        console.warn("MetroWidget: onEdge is not a function nor a string", props.name);
+      }
+    }
+  }
+
   const _moveToNext = (
     horizontal_direction,
     vertical_direction,
@@ -1678,7 +2380,7 @@ export const setup = (
         console.warn(TAG, "moveToNext error");
       }
       if (direction) {
-        props.onEdge?.({
+        _innerOnEdge({
           direction: direction,
           rect: {
             x: 0,
@@ -1703,8 +2405,10 @@ export const setup = (
       templateItemAdder.tryAddItem(next_focus_item.templateInfo, 1);
 
       // itemFocus 和 itemBlur放在计算visibleStart之前, 以便用户更改template后在计算滚动
-      let x_off_set = preFocusItem.templateInfo.left - next_focus_item.templateInfo.left;
-      let y_off_set = preFocusItem.templateInfo.top - next_focus_item.templateInfo.top;
+      let x_off_set =
+        preFocusItem.templateInfo.left - next_focus_item.templateInfo.left;
+      let y_off_set =
+        preFocusItem.templateInfo.top - next_focus_item.templateInfo.top;
       if (item_edge_rect && item_edge_rect.rect) {
         item_edge_rect.rect.x += x_off_set;
         item_edge_rect.rect.y += y_off_set;
@@ -1730,15 +2434,21 @@ export const setup = (
           },
         };
       }
+      onItemIgnore(preFocusItem)
       onItemBlur(preFocusItem);
+      onItemGaze(next_focus_item, preEdgeRect);
       onItemFocus(next_focus_item, preEdgeRect);
 
-      if (next_focus_item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
+      if (
+        next_focus_item.itemConfig.itemSlide ==
+        METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
+      ) {
         slideToItemInner(
           next_focus_item.index,
           true,
           vertical ? vertical_direction : horizontal_direction,
-          preFocusItem);
+          preFocusItem
+        );
       } else {
         const updater = pageUpdater.update(
           metroTemplate,
@@ -1746,7 +2456,8 @@ export const setup = (
           visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
           next_focus_item.id,
           false,
-          permanentItemList
+          permanentItemList,
+          props.fullDisplayMode
         );
         //不做滚动时,保证获焦的item创建. 为了避免提前隐藏, 使用applyTmp
         updater.applyTmp();
@@ -1769,7 +2480,7 @@ export const setup = (
         edge = EdgeDirection.top;
       }
       const curTemplateInfo = getItemById(focusId)?.templateInfo;
-      let rect
+      let rect;
       if (curTemplateInfo) {
         rect = {
           x: curTemplateInfo.left - x_off_set,
@@ -1786,10 +2497,10 @@ export const setup = (
         };
       }
 
-      props.onEdge?.({
+      _innerOnEdge({
         direction: edge,
         rect: rect,
-        childEdgeInfo: item_edge_rect
+        childEdgeInfo: item_edge_rect,
       });
       innerData[id2Index(focusId)]?.onWidgetEdge({
         direction: edge,
@@ -1797,7 +2508,7 @@ export const setup = (
     }
   };
 
-  const normalizeVisibleStart = (origin, targetRect, index, _visibleInfo) => {
+  const normalizeVisibleStart = (origin, _visibleInfo) => {
     let pos_key = vertical ? "top" : "left";
     let size_key = vertical ? "height" : "width";
     let visibleStart = origin;
@@ -1813,25 +2524,35 @@ export const setup = (
       }
     }
     if ((innerSlideSetting.BoundaryProtect & SlideSetting.END_PROTECT) > 0) {
-      let lastTemplateInfo = getItemByIndex(metroTemplate.getTailItemIndex()).templateInfo;
+      let lastTemplateInfo = getItemByIndex(
+        metroTemplate.getTailItemIndex()
+      ).templateInfo;
       const lastEnd = lastTemplateInfo[pos_key] + lastTemplateInfo[size_key];
       const lastVisibleStart = Math.max(lastEnd - vInfo.range, 0);
       //边界必须大于等于0, 同时若最后一个缩进时, 边界采用最后一个item的位置
       if (vInfo.end <= lastEnd) {
         let boundary = lastVisibleStart;
-        visibleStart = visibleStart > boundary ? lastVisibleStart : visibleStart;
+        visibleStart =
+          visibleStart > boundary ? lastVisibleStart : visibleStart;
       } else {
         // 以最后一个item的位置作为动态的保护边界
         visibleStart = visibleStart > vInfo.start ? vInfo.start : visibleStart;
       }
     }
     return visibleStart;
-  }
+  };
 
   const mRectCache = new RectCache();
-  const _calculateVisibleStart = (targetRect, _direction, templateInfo, vInfo, preInfo = null) => {
+  const _calculateVisibleStart = (
+    targetRect,
+    _direction,
+    templateInfo,
+    vInfo,
+    preInfo = null,
+    cachePreRect = true
+  ) => {
     if (!targetRect) {
-      console.error("MetroWidget: _calculateVisibleStart target item is null");
+      errorLogger("MetroWidget: _calculateVisibleStart target item is null");
       return 0;
     }
     const curRect = {
@@ -1840,8 +2561,12 @@ export const setup = (
       width: targetRect.width,
       height: targetRect.height,
       frameCount: Forge.sFrameCount.count,
+    };
+    if (cachePreRect) {
+      mRectCache.cache(curRect);
+    } else {
+      mRectCache.clean();
     }
-    mRectCache.cache(curRect);
     let preRect = mRectCache.getPreRect();
     if (preInfo) {
       preRect = preInfo;
@@ -1874,16 +2599,21 @@ export const setup = (
         }
 
         if (needCalculate) {
+          let target = targetRect[pos_key] + targetRect[size_key] / 2;
+          if (innerSlideSetting.Align == "start") {
+            target = targetRect[pos_key];
+          } else if (innerSlideSetting.Align == "end") {
+            target = targetRect[pos_key] + targetRect[size_key];
+          }
           new_visible_start = Math.ceil(
-            targetRect[pos_key] + targetRect[size_key] / 2 -
-            vInfo.range * innerSlideSetting.FixPercent
+            target - vInfo.range * innerSlideSetting.FixPercent
           );
         }
         break;
       case SlideSetting.Type.WHOLE_PAGE:
         if (!templateInfo || typeof templateInfo.pageHeadIndex == "undefined") {
           //TODO 子控制滚动时whole page滚动
-          console.error(
+          errorLogger(
             "child controlled whole page slide type is not supported."
           );
         } else {
@@ -1914,14 +2644,19 @@ export const setup = (
 
           if (preRect) {
             const rect0Start = vInfo.start;
-            const rect0End = vInfo.start + vInfo.range * innerSlideSetting.StartPercent;
-            const rect0Range = rect0End - rect0Start + 1
-            const rect1Start = vInfo.start + vInfo.range * innerSlideSetting.EndPercent;
+            const rect0End =
+              vInfo.start + vInfo.range * innerSlideSetting.StartPercent;
+            const rect0Range = rect0End - rect0Start + 1;
+            const rect1Start =
+              vInfo.start + vInfo.range * innerSlideSetting.EndPercent;
             const rect1End = vInfo.start + vInfo.range - 1;
             const rect1Range = rect1End - rect1Start + 1;
 
             let target0 = Math.min(preRect[pos_key], rect0End);
-            let target1 = Math.max(preRect[pos_key] + preRect[size_key] - 1, rect1Start);
+            let target1 = Math.max(
+              preRect[pos_key] + preRect[size_key] - 1,
+              rect1Start
+            );
 
             let rect0Result = undefined;
             let rect1Result = undefined;
@@ -1934,7 +2669,7 @@ export const setup = (
               } else {
                 if (direction <= 0) {
                   //inRect0, 只处理往左/往上
-                  rect0Result = vInfo.start + (itemStart - target0)
+                  rect0Result = vInfo.start + (itemStart - target0);
                 }
               }
             }
@@ -1952,7 +2687,10 @@ export const setup = (
               }
             }
 
-            if (typeof rect0Result !== "undefined" && typeof rect1Result !== "undefined") {
+            if (
+              typeof rect0Result !== "undefined" &&
+              typeof rect1Result !== "undefined"
+            ) {
               //重叠区域
               new_visible_start = rect0Result;
             } else if (typeof rect0Result !== "undefined") {
@@ -1967,24 +2705,29 @@ export const setup = (
           const tailSafeArea = innerSlideSetting.TailSafeArea * vInfo.range;
           if (itemMainSize > vInfo.range - headSafeArea - tailSafeArea) {
             // 大item
-            new_visible_start = Math.round(itemStart - (vInfo.range - itemMainSize) / 2)
+            new_visible_start = Math.round(
+              itemStart - (vInfo.range - itemMainSize) / 2
+            );
           } else {
             if (itemStart < new_visible_start + headSafeArea) {
               new_visible_start = itemStart - headSafeArea;
-            } else if (itemEnd > new_visible_start + vInfo.range - 1 - tailSafeArea) {
+            } else if (
+              itemEnd >
+              new_visible_start + vInfo.range - 1 - tailSafeArea
+            ) {
               new_visible_start = itemEnd - vInfo.range + tailSafeArea;
             }
           }
         }
         break;
       default:
-        console.error(
+        errorLogger(
           "MetroWidget: undefined slide type",
           innerSlideSetting.Type
         );
     }
 
-    new_visible_start = normalizeVisibleStart(new_visible_start, targetRect, templateInfo?.index, vInfo);
+    new_visible_start = normalizeVisibleStart(new_visible_start, vInfo);
     return Math.round(new_visible_start);
   };
 
@@ -2015,52 +2758,93 @@ export const setup = (
   };
 
   const focusBlockOnFocus = (params) => {
-    isFocus = true;
-    if (innerData.length === 0) {
-      console.log(`MetroWidget: ${props.name} get focus while data is empty.`);
+    if (JsvInteractionMode.value == TOUCH_MODE) {
+      focusWhenInTouch = true;
       return;
     }
+    isFocus.value = true;
 
-    let focus_id =
-      typeof enterFocusId !== "undefined" &&
+    if (innerData.length !== 0) {
+      let focus_id = focusId;
+      focus_id =
+        typeof enterFocusId !== "undefined" &&
         enterFocusId >= 0 &&
         enterFocusId < metroTemplate.size
-        ? enterFocusId
-        : focusId;
-    focus_id = _ifValidEnterRect(enterFocusRect)
-      ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
-      : focus_id;
-    preEdgeRect = enterFocusRect;
-    _changeFocusId(focus_id, false);
-    enterFocusId = -1;
-    enterFocusRect = null;
-    firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);;
+          ? enterFocusId
+          : focus_id;
+      focus_id = _ifValidEnterRect(enterFocusRect)
+        ? _calculateNearestItemByRect(pageUpdater.getRange(), enterFocusRect)
+        : focus_id;
+      preEdgeRect = enterFocusRect;
+      _changeFocusId(focus_id, false);
+      enterFocusId = -1;
+      enterFocusRect = null;
+      firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);
+    } else {
+      console.log(`MetroWidget: ${props.name} get focus while data is empty.`);
+    }
     props.onFocus?.();
   };
 
   const focusBlockOnBlur = () => {
+    focusWhenInTouch = false;
     enterFocusId = -1;
     enterFocusRect = null;
     preEdgeRect = null;
     preFocusId = focusId;
     onItemBlur(getItemById(preFocusId));
     props.onBlur?.();
-    isFocus = false;
-    mRectCache.clean()
+    isFocus.value = false;
+    mRectCache.clean();
   };
 
   const _updatePage = (rangeSet) => {
     let cur = id2Index(focusId);
     if (cur >= 0) {
-      rangeSet.add(cur)
+      rangeSet.add(cur);
     }
     const tmpArray = Array.from(rangeSet);
     let newArray = tmpArray.map((item) => {
       return getItemByIndex(item);
     });
-    const newItemList = newArray.filter((i) => { return !renderData.value?.includes(i) });
+    //新进的item
+    newArray
+      .filter((i) => {
+        return !renderData.value?.includes(i);
+      })
+      .forEach((i) => {
+        i.onInRenderRange();
+        i.renderBreak = innerEnableRenderBreak;
+      });
+    //退出的item
+    renderData.value
+      .filter((i) => {
+        return !newArray.includes(i);
+      })
+      .forEach((i) => {
+        i.onOutOfRenderRange();
+        if (spatialNavigator) {
+          spatialNavigator.unregisterNode(i.getSpatialNavNode());
+        }
+      });
+
+    //注册spatial navigator
+    if (spatialNavigator) {
+      for (let item of newArray) {
+        const visibleState = rectVisibleState(item.templateInfo);
+        const n = item.getSpatialNavNode();
+        if (visibleState == 2 || visibleState == 1) {
+          if (n) {
+            spatialNavigator.registerNode(n);
+          }
+        } else {
+          spatialNavigator.unregisterNode(n);
+        }
+      }
+    }
+
     renderData.value = newArray;
-    if (props.enableItemRenderBreak) {
+    if (innerEnableRenderBreak) {
       itemRender.value = false;
       const f = () => {
         // 关闭强制TriggerManualBlock，改为vue内部通过dom的任务数来确定是否执行打断
@@ -2074,18 +2858,67 @@ export const setup = (
   };
 
   const _getVisibleFocusableItem = () => {
-    const focusItem = getItemById(focusId);
-    if (rectVisibleState(focusItem.templateInfo) == 2) {
-      return focusItem;
-    } else {
-      //遍历renderList, 找到第一个可见的 focusable item
-      for (let item of renderData.value) {
-        if (item.templateInfo.focusable && rectVisibleState(item.templateInfo) == 2) {
-          return item;
-        }
+    let item = getItemByIndex(gazeIndex);
+    if (item) {
+      let itemVisibility = rectVisibleState(item.templateInfo);
+      let isLarge = isLargeItem(item.templateInfo);
+      if (itemVisibility == 2) {
+        return item;
       }
     }
-  }
+
+    item = getItemById(focusId);
+    if (item) {
+      let itemVisibility = rectVisibleState(item.templateInfo);
+      let isLarge = isLargeItem(item.templateInfo);
+      if (itemVisibility == 2) {
+        return item;
+      }
+    }
+
+    //遍历renderList, 找到第一个可见的 focusable item
+    let resultItem = null;
+    for (let item of renderData.value) {
+      let itemVisibility = rectVisibleState(item.templateInfo);
+      let isLarge = isLargeItem(item.templateInfo);
+      if (
+        item.templateInfo.focusable &&
+        (itemVisibility == 2 || (itemVisibility == 1 && isLarge))
+      ) {
+        resultItem = item;
+        break;
+      }
+    }
+    if (resultItem == null) {
+      //找到占空间最大的部分可视item;
+    }
+    return null;
+  };
+
+  let preSize = 0;
+  const _onSizeChange = () => {
+    if (props.fullDisplayMode) {
+      nextTick(() => {
+        let size = 0;
+        if (innerData.length > 0) {
+          const lastTemplateInfo =
+            innerData[innerData.length - 1]?.templateInfo;
+          if (vertical) {
+            size = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+          } else {
+            size = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+          }
+        }
+        if (size != preSize) {
+          preSize = size;
+          props.onSizeChange?.({
+            width: vertical ? props.width : size,
+            height: vertical ? size : props.height,
+          });
+        }
+      });
+    }
+  };
 
   const _onScroll = () => {
     if (props.onScroll) {
@@ -2103,6 +2936,22 @@ export const setup = (
       props.onScroll(visibleInfo.start, visibleInfo.range, totalWidth);
     }
   };
+  const _syncOnScroll = () => {
+    if (props.syncOnScroll) {
+      const lastTemplateInfo = getItemByIndex(
+        metroTemplate.getTailItemIndex()
+      )?.templateInfo;
+      let totalWidth = 0;
+      if (lastTemplateInfo) {
+        if (vertical) {
+          totalWidth = lastTemplateInfo.top + lastTemplateInfo.height - 1;
+        } else {
+          totalWidth = lastTemplateInfo.left + lastTemplateInfo.width - 1;
+        }
+      }
+      props.syncOnScroll(visibleInfo.start, visibleInfo.range, totalWidth);
+    }
+  }
 
   //touch setting
   let actorController = null;
@@ -2117,13 +2966,15 @@ export const setup = (
   let onMoveSensitivity = -1;
 
   const getVisibleStart = (moveInfo) => {
-    divPos = vertical ? slideDivTop.value + freeMoveSlideGapTop : slideDivLeft.value + freeMoveSlideGapLeft;
+    divPos = vertical
+      ? slideDivTop.value + freeMoveSlideGapTop
+      : slideDivLeft.value + freeMoveSlideGapLeft;
     if (vertical) {
       return -(divPos + Math.round(moveInfo.yPos));
     } else {
       return -(divPos + Math.round(moveInfo.xPos));
     }
-  }
+  };
 
   function onSensor(pos) {
     const lastTemplateInfo = getItemByIndex(
@@ -2138,7 +2989,9 @@ export const setup = (
       }
     }
     props.onScroll?.(
-      vertical ? -(pos.yPos + slideDivTop.value + freeMoveSlideGapTop) : -(pos.xPos + slideDivLeft.value + freeMoveSlideGapLeft),
+      vertical
+        ? -(pos.yPos + slideDivTop.value + freeMoveSlideGapTop)
+        : -(pos.xPos + slideDivLeft.value + freeMoveSlideGapLeft),
       visibleInfo.range,
       totalWidth
     );
@@ -2156,7 +3009,9 @@ export const setup = (
   }
 
   function setSensorSensitivity(sensitivity = DEFAULT_SENSITIVITY) {
-    if (!actorController) { return }
+    if (!actorController) {
+      return;
+    }
     if (sensitivity <= 0) {
       actorController.run((cmds) => [
         cmds.state().removeConditionByGroup(ScensorCondigionGroup),
@@ -2165,11 +3020,10 @@ export const setup = (
     }
 
     if (sensitivity != onMoveSensitivity) {
-      setOnMovement(sensitivity)
+      setOnMovement(sensitivity);
     }
   }
 
-
   const getTouchCount = (nexusCustomData) => {
     let touchCount = -1;
     if (nexusCustomData) {
@@ -2180,7 +3034,7 @@ export const setup = (
       }
     }
     return touchCount;
-  }
+  };
 
   const mergeTouchSlideToSlideDiv = (touchCount) => {
     let originSlideDivTop = slideDivTop.value;
@@ -2192,40 +3046,50 @@ export const setup = (
     }
     let newSlideGapTop = originSlideDivTop - slideDivTop.value;
     let newSlideGapLeft = originSlideDivLeft - slideDivLeft.value;
-    freeMoveSlideGapTop += newSlideGapTop;    // 累计slider变化的gap，等待同步完毕时消除gap
+    freeMoveSlideGapTop += newSlideGapTop; // 累计slider变化的gap，等待同步完毕时消除gap
     freeMoveSlideGapLeft += newSlideGapLeft;
 
     const walls = getTouchWall();
     actorController.run((cmds) => [
       cmds.state().removeConditionByGroup(wallConditionGroup),
-      cmds.condition(wallConditionGroup, true)
+      cmds
+        .condition(wallConditionGroup, true)
         .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
         .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
       cmds.state().setStartOffsetPos(newSlideGapLeft, newSlideGapTop), // 将div的位置调整回馈给FreeMove计量系统
-      cmds.condition().onNextTick(0).then([
-        SliderEditFuncReOrderWrap(() => {
-          freeMoveSlideGapTop -= newSlideGapTop;
-          freeMoveSlideGapLeft -= newSlideGapLeft;
-        }, true) // Slide调整回调要放在其他事件之前，调整slide的gap值
-      ])
+      cmds
+        .condition()
+        .onNextTick(0)
+        .then([
+          SliderEditFuncReOrderWrap(() => {
+            freeMoveSlideGapTop -= newSlideGapTop;
+            freeMoveSlideGapLeft -= newSlideGapLeft;
+          }, true), // Slide调整回调要放在其他事件之前，调整slide的gap值
+        ]),
     ]);
-  }
+  };
   function onTouchActionDone(touchCount) {
     //一次触控动作结束
     mergeTouchSlideToSlideDiv(touchCount);
     //由于movement的监听是有帧数间隔的, 所以结束时需要再调用一次onScroll
     _onScroll();
+    _syncOnScroll();
   }
 
   const onTouchDown = (data, customData, nexusCustomData) => {
+    const curPos = vertical ? slideDivTop.value : slideDivLeft.value;
+    let needMerge = -visibleInfo.start != curPos;
+    if (needMerge) {
+      mergeTouchSlideToSlideDiv(touchRecorder.touchCount);
+    }
+
     touchRecorder.reset();
     let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.setTouchCount(touchCount);
     updateTouchBoxCondition();
 
-    mode.touchStart(touchCount);
-    // console.log("touchtest", `${props.name} animId:${debugAnimId} viewId:${debugViewId}`,
-    //  "onTouchDown", data, customData, nexusCustomData)
+    JsvInteractionMode.value = TOUCH_MODE;
+    touchStateMgr.touchStart(touchCount);
 
     // 运动方向锁定机制
     // 当MetroWidget在某一方向拖动后，讲另一方向的移动进行锁定
@@ -2236,23 +3100,30 @@ export const setup = (
       right: vertical ? undefined : lockThreshhold,
       top: vertical ? lockThreshhold : undefined,
       bottom: vertical ? lockThreshhold : undefined,
-    }
+    };
 
     let passDownTouchInfo = nexusCustomData;
     actorController.run((cmds) => [
       cmds
         .condition(TouchDownConditionGroup, false)
-        .offsetPosition(offsetThreshold.left, offsetThreshold.top, offsetThreshold.right, offsetThreshold.bottom)
+        .offsetPosition(
+          offsetThreshold.left,
+          offsetThreshold.top,
+          offsetThreshold.right,
+          offsetThreshold.bottom
+        )
         .then([
-          cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold)]),
+          cmds.state().touchLockSwitch(true, vertical ? 1 : 2, unlockThreshold),
+        ]),
       cmds
         .condition(TouchDownConditionGroup, false)
         .startMove(true, true)
-        .then([SliderEditFuncReOrderWrap((d) => { onDragStart(d, null, passDownTouchInfo) })]),
-    ])
-
-    //blur item
-    // onItemBlur(getItemById(focusId));
+        .then([
+          SliderEditFuncReOrderWrap((d) => {
+            onDragStart(d, null, passDownTouchInfo);
+          }),
+        ]),
+    ]);
 
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
 
@@ -2262,103 +3133,127 @@ export const setup = (
       visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       0,
       false,
-      permanentItemList
+      permanentItemList,
+      props.fullDisplayMode
     );
     updater.apply();
 
     //创建锚点
     const anchorArea = 2 * Forge.sRenderBridge.GetScreenInfo().designedWidth;
     let anchorPosList = [];
-    let anchorSpacing = visibleInfo.range * 2 / 3;
+    let anchorSpacing = (visibleInfo.range * 2) / 3;
     let anchorPos = anchorSpacing;
     while (anchorPos < anchorArea) {
       anchorPosList.push(-visibleInfo.start + anchorPos);
-      anchorPosList.push(-visibleInfo.start - visibleInfo.range - anchorPos + 1);
+      anchorPosList.push(
+        -visibleInfo.start - visibleInfo.range - anchorPos + 1
+      );
       anchorPos += anchorSpacing;
     }
     actorController.run((cmds) => {
-      const reachConditionList = anchorPosList.map(pos => {
+      const reachConditionList = anchorPosList.map((pos) => {
         return cmds
           .condition(reachAnchorGroup)
           .reachPosition(pos, undefined)
-          .then([SliderEditFuncReOrderWrap((data) => { updateRenderItems(true, true) })])
-      })
+          .then([
+            SliderEditFuncReOrderWrap((data) => {
+              updateRenderItems(true, true);
+            }),
+          ]);
+      });
       reachConditionList.unshift(
-        cmds.state().removeConditionByGroup(reachAnchorGroup),
-      )
-      return reachConditionList
+        cmds.state().removeConditionByGroup(reachAnchorGroup)
+      );
+      return reachConditionList;
     });
-  }
+
+    props.onTouchFocus?.();
+  };
 
   const onTouchRelease = (touchCount) => {
-    if (mode.getTouchState() == TouchState.TAP) {
+    if (touchStateMgr.getTouchState() == TouchState.TAP) {
       //只点击, 没有移动或者fling
       updateRenderItems(false, false);
-      mode.touchEnd(touchCount);
+      touchStateMgr.touchEnd(touchCount);
     } else {
-      if (touchRecorder.moved && !mode.duringFling()) {
+      if (touchRecorder.moved && !touchStateMgr.duringFling()) {
         onTouchActionDone(touchRecorder.touchCount);
         updateRenderItems(false, false);
-        mode.touchEnd(touchCount)
+        touchStateMgr.touchEnd(touchCount);
       }
     }
     actorController.run((cmds) => [
       cmds.state().removeConditionByGroup(TouchDownConditionGroup),
-      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
-    ])
-  }
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2),
+    ]);
+  };
 
-  const exportOnTouchRelease = props.touchFlag > 0 ? onTouchRelease : undefined;
+  const exportOnTouchRelease = touchEnable.value ? onTouchRelease : undefined;
 
   const onDragStart = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    if (!(mode.getTouchCount() == touchCount && mode.duringFling())) {
+    if (
+      !(
+        touchStateMgr.getTouchCount() == touchCount &&
+        touchStateMgr.duringFling()
+      )
+    ) {
       //dragStart event may be triggered after fling event because of sending it when startMove condition is satisfied
-      mode.dragStart(touchCount)
+      touchStateMgr.dragStart(touchCount);
     }
     visibleInfo.start = getVisibleStart(data);
-  }
+  };
 
   const onDragEnd = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
-    mode.dragEnd(touchCount);
+    touchStateMgr.dragEnd(touchCount);
     visibleInfo.start = getVisibleStart(data);
     actorController.run((cmds) => [
       cmds.state().removeConditionByGroup(reachAnchorGroup),
     ]);
-  }
+  };
 
   const onFlingStart = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
     touchRecorder.move();
-    mode.flingStart(touchCount);
+    touchStateMgr.flingStart(touchCount);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
-  }
+  };
 
   const onFlingProgress = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
-  }
+  };
 
   const onFlingEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
     //记录拖拽的距离
-    if (mode.duringFling()) {
+    if (touchStateMgr.duringFling()) {
       let touchCount = getTouchCount(nexusCustomData);
       onTouchActionDone(touchCount);
       updateRenderItems(false, false);
-      mode.flingEnd(touchCount);
-      mode.touchEnd(touchCount);
+      touchStateMgr.flingEnd(touchCount);
+      touchStateMgr.touchEnd(touchCount);
     }
-  }
+  };
 
   const onFlingDrop = (data, customData, nexusCustomData) => {
     let touchCount = getTouchCount(nexusCustomData);
     visibleInfo.start = getVisibleStart(data);
-  }
+  };
+
+  const onFlingCancel = (data, customData, nexusCustomData) => {
+    visibleInfo.start = getVisibleStart(data);
+    if (touchStateMgr.duringFling()) {
+      let touchCount = getTouchCount(nexusCustomData);
+      onTouchActionDone(touchCount);
+      updateRenderItems(false, false);
+      touchStateMgr.flingEnd(touchCount);
+    }
+  };
 
   const getTouchWall = () => {
     const boxSize = metroTemplate.getBoundingBoxSize();
@@ -2367,15 +3262,26 @@ export const setup = (
       top: 0,
       right: 0,
       bottom: 0,
+    };
+    if (props.fullDisplayMode) {
+      return wall;
     }
     if (vertical) {
-      wall.top = -boxSize.height + props.height - slideDivTop.value - (widgetRectInfo.padding.top + widgetRectInfo.padding.bottom);
+      wall.top =
+        -boxSize.height +
+        props.height -
+        slideDivTop.value -
+        (widgetRectInfo.padding.top + widgetRectInfo.padding.bottom);
       wall.bottom = -slideDivTop.value;
       if (wall.top > wall.bottom) {
         wall.top = wall.bottom;
       }
     } else {
-      wall.left = -boxSize.width + props.width - slideDivLeft.value - (widgetRectInfo.padding.left + widgetRectInfo.padding.right);
+      wall.left =
+        -boxSize.width +
+        props.width -
+        slideDivLeft.value -
+        (widgetRectInfo.padding.left + widgetRectInfo.padding.right);
       wall.right = -slideDivLeft.value;
       if (wall.left > wall.right) {
         wall.left = wall.right;
@@ -2383,25 +3289,28 @@ export const setup = (
     }
 
     return wall;
-  }
+  };
 
   const updateRenderItems = (applyTmp, expand) => {
-    templateItemAdder.tryAddItemByPosition(visibleInfo.start + visibleInfo.range);
+    templateItemAdder.tryAddItemByPosition(
+      visibleInfo.start + visibleInfo.range
+    );
     const updater = pageUpdater.update(
       metroTemplate,
       visibleInfo.startWithPadding - innerKeepTraceRange * pageRange,
       visibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
       0,
       true,
-      permanentItemList
+      permanentItemList,
+      props.fullDisplayMode
     );
     applyTmp ? updater.applyTmp() : updater.apply();
-  }
+  };
 
   const updateTouchBoxCondition = () => {
+    if (JsvInteractionMode.value != TOUCH_MODE) return;
     if (actorController != null) {
       const walls = getTouchWall();
-
       //更新wall设置
       actorController.run((cmds) => [
         cmds.state().removeConditionByGroup(wallConditionGroup),
@@ -2411,7 +3320,7 @@ export const setup = (
           .then([cmds.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
       ]);
     }
-  }
+  };
 
   const touchRecorder = {
     moved: false,
@@ -2425,33 +3334,28 @@ export const setup = (
     },
     setTouchCount: function (count) {
       this.touchCount = count;
-    }
+    },
   };
 
-  const metroWidgetToken = metroWidgetTokenGen++;
-
   let orderTouchSlideCallbacks;
   const SliderEditFuncReOrderWrap = (callback, addHeader = false) => {
     return (...args) => {
-      let pkg = { cb: callback, a: args }
+      let pkg = { cb: callback, a: args };
       if (addHeader) {
         orderTouchSlideCallbacks.splice(0, 0, pkg);
       } else {
         orderTouchSlideCallbacks.push(pkg);
       }
-    }
-  }
+    };
+  };
 
-  //TODO debug
-  // let debugAnimId = -1;
-  // let debugViewId = -1
-  let touchInited = false;
-  const initTouch = () => {
-    touchInited = true;
+  let freeMoveInited = false
+  function initFreeMove() {
+    if (freeMoveInited) { return; }
+    freeMoveInited = true;
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
-
     // 对触控回调进行顺序管理
     orderTouchSlideCallbacks = new Array();
     actorController.addCondCycleListener(
@@ -2468,7 +3372,17 @@ export const setup = (
         // 执行结束后进行清理
         orderTouchSlideCallbacks.length = 0;
       }
-    )
+    );
+  }
+
+  //TODO debug
+  // let debugAnimId = -1;
+  // let debugViewId = -1
+  let touchInited = false;
+  const initTouch = () => {
+    if (touchInited) { return; }
+    touchInited = true;
+    initFreeMove();
 
     // debugAnimId = actorController.debugGetAnimId();
     // debugViewId = divView.ViewId;
@@ -2504,6 +3418,10 @@ export const setup = (
         .condition(undefined, true)
         .onFlingDrop()
         .then([SliderEditFuncReOrderWrap(onFlingDrop)]),
+      cmds
+        .condition(undefined, true)
+        .onFlingCancel()
+        .then([SliderEditFuncReOrderWrap(onFlingCancel)]),
       cmds
         .condition(undefined, true)
         .onTouchRelease()
@@ -2517,19 +3435,56 @@ export const setup = (
     if (props.onScroll) {
       setOnMovement(DEFAULT_SENSITIVITY);
     }
+  };
+
+  const onMouseWheelScrollProgress = (data) => {
+    visibleInfo.start = getVisibleStart(data);
+    updateRenderItems(true, true);
+    mergeTouchSlideToSlideDiv();
+  };
+
+  const DEFAULT_MOUSE_CONFIG = {
+    wheelRate: 10,
   }
+  let mouseInited = false;
+  const initMouse = () => {
+    if (mouseInited) { return; }
+    mouseInited = true;
+    initFreeMove();
+    const divView = touchDiv.value.jsvGetProxyView();
+    if (!actorController) {
+      actorController = new ActorControl();
+      actorController.bindForgeView(divView, true);
+    }
+    // 1: hover, 2: scroll, 目前只打开scroll
+    divView.HoverEnables(2);
+    divView.SetMouseWheelRate(props.mouseConfig?.wheelRate ?? DEFAULT_MOUSE_CONFIG.wheelRate);
+    actorController.run((cmds) => [
+      cmds
+        .condition(undefined, true)
+        .onMouseWheelScrollProgress()
+        .then([SliderEditFuncReOrderWrap(onMouseWheelScrollProgress)]),
+    ]);
+  };
 
-  function cleanTouch() {
+  function cleanFreeMoveConditions() {
     actorController.run((cmds) => [
       cmds.state().clearAllConditions(),
-      cmds.state().touchLockSwitch(false, vertical ? 1 : 2)
-    ])
+      cmds.state().touchLockSwitch(false, vertical ? 1 : 2),
+    ]);
   }
 
   //init
 
   function safeProvideData() {
-    return props.provideData() ?? [];
+    const d = props.provideData();
+    if (d instanceof Array) {
+      return d;
+    }
+    console.warn(
+      `MetroWidget provideData must return an array. name:${props.name} provideData:${d}`
+    );
+    return [];
   }
   pageUpdater = new PageUpdater(_updatePage, props.name);
   visibleInfo.range = vertical
@@ -2544,7 +3499,7 @@ export const setup = (
   } else if (props.data) {
     dataList = toRaw(props.data ?? [])?.concat();
   }
-  dataKeyList = dataList.map(i => i[DATA_ID_KEY]);
+  dataKeyList = dataList.map((i) => i[DATA_ID_KEY]);
 
   templateItemAdder = new TemplateItemAdder(
     metroTemplate,
@@ -2553,9 +3508,10 @@ export const setup = (
     pageRange,
     _onTemplateItemAdd,
     props.name,
-    _onTemplateAddDone
+    getOnTemplateAddDone(true),
+    errorLogger
   );
-  if (props.onScroll) {
+  if (props.onScroll || props.fullDisplayMode) {
     templateItemAdder.tryAddItemByIndex(dataList.length - 1);
   } else {
     templateItemAdder.tryAddItem(null, 2);
@@ -2569,8 +3525,18 @@ export const setup = (
     const item = getItemById(props.initFocusId);
     if (item) {
       init_focus_id = props.initFocusId;
-      if (item.itemConfig.itemSlide == METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS) {
-        initVisibleStart = _calculateVisibleStart(item.templateInfo, 0, item.templateInfo, visibleInfo);
+      if (
+        item.itemConfig.itemSlide ==
+        METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS
+      ) {
+        initVisibleStart = _calculateVisibleStart(
+          item.templateInfo,
+          0,
+          item.templateInfo,
+          visibleInfo,
+          null,
+          false
+        );
       }
     }
   }
@@ -2585,12 +3551,13 @@ export const setup = (
     initVisibleInfo.endWithPadding,
     0,
     false,
-    permanentItemList
+    permanentItemList,
+    props.fullDisplayMode
   );
   initUpdater.apply();
   //触控时, 延时加载剩余屏
   let delayLoadHandler = -1;
-  if (props.touchFlag > 0) {
+  if (touchEnable.value) {
     delayLoadHandler = setTimeout(() => {
       const updateHandler = pageUpdater.update(
         metroTemplate,
@@ -2598,7 +3565,8 @@ export const setup = (
         initVisibleInfo.endWithPadding + innerKeepTraceRange * pageRange,
         focusId,
         false,
-        permanentItemList
+        permanentItemList,
+        props.fullDisplayMode
       );
       updateHandler.apply();
     }, 200);
@@ -2613,28 +3581,74 @@ export const setup = (
     if (!firstOnItemFocusCalled) {
       firstOnItemFocusCalled = onItemFocus(getItemById(focusId), preEdgeRect);
     }
+    //第一次ongaze
+    onItemGaze(getItemById(focusId), preEdgeRect);
 
     if (props.enableItemRenderBreak) {
       nextTick(() => {
         itemRender.value = true;
       });
     }
-    if (props.touchFlag === 1) {
+    if (touchEnable.value) {
       initTouch();
     }
+    if (props.mouseFlag > 0) {
+      initMouse();
+    }
+    _onSizeChange();
   });
 
-  onUpdated(() => { });
+  onUpdated(() => {});
 
   onBeforeUnmount(() => {
+    if (vRenderBreakChanged) {
+      window.JsView?.setRenderBreakEnable?.(true);
+    }
     taskManager.cancelAllTask();
     tryCancelDelayLoad();
     mounted = false;
-    if (touchInited) {
-      cleanTouch();
+    if (touchInited || mouseInited) {
+      cleanFreeMoveConditions();
+    }
+    if (rootNativeViewId != -1) {
+      Forge.sViewStore.remove(rootNativeViewId);
+    }
+    if (spatialNavigator) {
+      renderData.value.forEach((item) => {
+        spatialNavigator.unregisterNode(item.getSpatialNavNode());
+      });
     }
   });
 
+  //spatial navigator相关
+  //作为子MetroWidget时的index
+  let selfChildIndex = undefined;
+  function getSelfChildIndex () {
+    if (!parentMetroWidget) { return undefined; }
+    if (!rootDiv.value) {
+      console.warn("getSelfChildIndex before mounted.")
+      return undefined;
+    }
+    if (selfChildIndex !== undefined) { return selfChildIndex; }
+    let n = rootDiv.value;
+    while(n) {
+      if (n.getAttribute("__metrowidget-index") !== undefined) {
+        selfChildIndex = parseInt(n.getAttribute("__metrowidget-index"));
+        break;
+      }
+      n = n.parentNode;
+    }
+    return selfChildIndex;
+  };
+  const provideObj = {
+    id: metroWidgetId,
+    divRef: rootDiv,
+    handler: exportObject,
+    getSelfChildIndex,
+  }
+  const metroWidgetChain = parentMetroWidget ? [...parentMetroWidget, provideObj] : [provideObj];
+  provide(MW_CONTEXT_NAME, metroWidgetChain);
+
   return {
     widgetRectInfo,
     focusBlockOnFocus,
@@ -2648,7 +3662,8 @@ export const setup = (
     onTouchDown,
     onTouchRelease: exportOnTouchRelease,
     currentFocusIndex,
-    modeForExport,
-    onDispatchKeyDown
-  }
-}
+    onDispatchKeyDown,
+    isFocus,
+    rootNativeViewId,
+  };
+};