create-jsview 2.1.367-test.0 → 2.1.428

package/template-vue-vite/dist-test-jsview-chunk/js/App.8e86826b.js

@@ -0,0 +1,502 @@
+import { u as useFocusHub, H as HORIZONTAL, g as _sfc_main$F } from "./jsview-vue-entry.415721d8.js";
+import { s as shallowRef, t as onMounted, o as openBlock, e as createElementBlock, f as createBaseVNode, G as toDisplayString, g as normalizeStyle, u as unref, i as inject, w as watch, k as createVNode, l as withCtx, P as normalizeClass, r as reactive, p as provide, b as resolveComponent, A as createBlock } from "./vue.889a9b8b.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const _sfc_main$4 = {
+  __name: "StyleItem",
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    getStyleClass: Function,
+    num: Number
+  },
+  setup(__props) {
+    const props = __props;
+    const focusHub = useFocusHub();
+    let focused = shallowRef(false);
+    const onFocus = () => {
+      focused.value = "grow";
+    };
+    const onBlur = () => {
+      focused.value = false;
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onEdge", props.onEdge);
+    onMounted(() => {
+      focusHub.setFocus("StyleShow");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          width: 140,
+          height: 160,
+          backgroundColor: unref(focused) ? "#DD8888" : "#BBBBAA"
+        })
+      }, [
+        createBaseVNode("div", { style: {
+          width: 140,
+          height: 40,
+          lineHeight: 40,
+          fontSize: 24,
+          top: 120,
+          backgroundColor: "#FFFFFF",
+          textAlign: "center"
+        } }, toDisplayString(props.data.title), 1),
+        createBaseVNode("div", { style: { top: 3, left: 3, width: 40, height: 40, backgroundColor: "#AA3123" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ]),
+        createBaseVNode("div", { style: { top: 3, left: 3 + 46, width: 40, height: 40, backgroundColor: "#b0c847" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ]),
+        createBaseVNode("div", { style: { top: 3, left: 3 + 46 + 46, width: 40, height: 40, backgroundColor: "#5cb720" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ]),
+        createBaseVNode("div", { style: { top: 3 + 46, left: 3, width: 40, height: 40, backgroundColor: "#1db39d" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ]),
+        createBaseVNode("div", { style: { top: 3 + 46, left: 3 + 46, width: 40, height: 40, backgroundColor: "#a75b17" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ]),
+        createBaseVNode("div", { style: { top: 3 + 46, left: 3 + 46 + 46, width: 40, height: 40, backgroundColor: "#135ac3" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ]),
+        createBaseVNode("div", { style: { top: 3 + 46 + 46, left: 3, width: 40, height: 40, backgroundColor: "#af19d9" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ]),
+        createBaseVNode("div", { style: { top: 3 + 46 + 46, left: 3 + 46, width: 40, height: 40, backgroundColor: "#da308b" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ]),
+        createBaseVNode("div", { style: { top: 3 + 46 + 46, left: 3 + 46 + 46, width: 40, height: 40, backgroundColor: "#da2b2b" } }, [
+          createBaseVNode("div", { style: { top: 1, left: 1, width: 10, height: 10, backgroundColor: "#1135a1" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13, width: 10, height: 10, backgroundColor: "#aab6db" } }),
+          createBaseVNode("div", { style: { top: 1, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#35194d" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1, width: 10, height: 10, backgroundColor: "#a2023a" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#e13470" } }),
+          createBaseVNode("div", { style: { top: 1 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#d935e8" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1, width: 10, height: 10, backgroundColor: "#2f63dc" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13, width: 10, height: 10, backgroundColor: "#240ee2" } }),
+          createBaseVNode("div", { style: { top: 1 + 13 + 13, left: 1 + 13 + 13, width: 10, height: 10, backgroundColor: "#2fdbb9" } })
+        ])
+      ], 4);
+    };
+  }
+};
+const _sfc_main$3 = {
+  __name: "StyleShow",
+  props: {
+    style: Object,
+    data: Array
+  },
+  setup(__props) {
+    const props = __props;
+    let styleRef = shallowRef(null);
+    let change = inject("change");
+    const provideData = () => {
+      if (change.value) {
+        const data = props.data.slice(33, 65);
+        return data;
+      } else {
+        const data = props.data.slice(0, 32);
+        return data;
+      }
+    };
+    watch(change, (n, o) => {
+      if (n !== o) {
+        provideData();
+        styleRef.value?.refreshData(true);
+      }
+    });
+    const measures = (item) => {
+      return {
+        ...item,
+        focusable: true,
+        marginRight: 20,
+        marginBottom: 20
+      };
+    };
+    const onEdge = () => {
+      console.log("到边缘了");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", { style: { backgroundColor: "#87CEEB", width: 1280, height: 720 } }, [
+        createBaseVNode("div", { style: { top: 10 } }, [
+          createVNode(unref(_sfc_main$F), {
+            name: "StyleShow",
+            ref_key: "styleRef",
+            ref: styleRef,
+            width: props.style.width,
+            height: props.style.height,
+            provideData,
+            direction: unref(HORIZONTAL),
+            measures,
+            onEdge,
+            padding: props.style.padding,
+            sendFocusRectEvent: true
+          }, {
+            renderItem: withCtx(({ data, query, onEdge: onEdge2, onAction }) => [
+              createVNode(_sfc_main$4, {
+                data,
+                query,
+                onEdge: onEdge2,
+                onAction
+              }, null, 8, ["data", "query", "onEdge", "onAction"])
+            ]),
+            _: 1
+          }, 8, ["width", "height", "direction", "padding"])
+        ])
+      ]);
+    };
+  }
+};
+const ClassItem_vue_vue_type_style_index_0_scoped_c003485c_lang = "";
+const _sfc_main$2 = {
+  __name: "ClassItem",
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    getStyleClass: Function,
+    num: Number
+  },
+  setup(__props) {
+    const props = __props;
+    const focusHub = useFocusHub();
+    let posterChange = shallowRef("blurPoster");
+    const onFocus = () => {
+      posterChange.value = "focusPoster";
+    };
+    const onBlur = () => {
+      posterChange.value = "blurPoster";
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onEdge", props.onEdge);
+    onMounted(() => {
+      focusHub.setFocus("ClassShow");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["poster", unref(posterChange)])
+      }, [
+        createBaseVNode("div", { class: "titleShow" }, toDisplayString(props.data.title), 1),
+        createBaseVNode("div", { class: "item item1" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ]),
+        createBaseVNode("div", { class: "item item2" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ]),
+        createBaseVNode("div", { class: "item item3" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ]),
+        createBaseVNode("div", { class: "item item4" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ]),
+        createBaseVNode("div", { class: "item item5" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ]),
+        createBaseVNode("div", { class: "item item6" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ]),
+        createBaseVNode("div", { class: "item item7" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ]),
+        createBaseVNode("div", { class: "item item8" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ]),
+        createBaseVNode("div", { class: "item item9" }, [
+          createBaseVNode("div", { class: "littleItem littleItem1" }),
+          createBaseVNode("div", { class: "littleItem littleItem2" }),
+          createBaseVNode("div", { class: "littleItem littleItem3" }),
+          createBaseVNode("div", { class: "littleItem littleItem4" }),
+          createBaseVNode("div", { class: "littleItem littleItem5" }),
+          createBaseVNode("div", { class: "littleItem littleItem6" }),
+          createBaseVNode("div", { class: "littleItem littleItem7" }),
+          createBaseVNode("div", { class: "littleItem littleItem8" }),
+          createBaseVNode("div", { class: "littleItem littleItem9" })
+        ])
+      ], 2);
+    };
+  }
+};
+const styleSheetsContent$2 = { "c003485c": { ".poster": '{"width":140,"height":160,"backgroundColor":"#bbbbaa"}', ".titleShow": '{"width":140,"height":40,"lineHeight":40,"fontSize":24,"top":120,"backgroundColor":"#ffffff","textAlign":"center"}', ".focusPoster": '{"backgroundColor":"#dd8888"}', ".blurPoster": '{"backgroundColor":"#bbbbaa"}', ".item": '{"width":40,"height":40}', ".item1": '{"top":3,"left":3,"backgroundColor":"#aa3123"}', ".item2": '{"top":3,"left":49,"backgroundColor":"#b0c847"}', ".item3": '{"top":3,"left":95,"backgroundColor":"#5cb720"}', ".item4": '{"top":49,"left":3,"backgroundColor":"#1db39d"}', ".item5": '{"top":49,"left":49,"backgroundColor":"#a75b17"}', ".item6": '{"top":49,"left":95,"backgroundColor":"#135ac3"}', ".item7": '{"top":95,"left":3,"backgroundColor":"#af19d9"}', ".item8": '{"top":95,"left":49,"backgroundColor":"#da308b"}', ".item9": '{"top":95,"left":95,"backgroundColor":"#da2b2b"}', ".littleItem": '{"width":10,"height":10}', ".littleItem1": '{"top":1,"left":1,"backgroundColor":"#1135a1"}', ".littleItem2": '{"top":1,"left":14,"backgroundColor":"#aab6db"}', ".littleItem3": '{"top":1,"left":27,"backgroundColor":"#35194d"}', ".littleItem4": '{"top":14,"left":1,"backgroundColor":"#a2023a"}', ".littleItem5": '{"top":14,"left":14,"backgroundColor":"#e13470"}', ".littleItem6": '{"top":14,"left":27,"backgroundColor":"#d935e8"}', ".littleItem7": '{"top":27,"left":1,"backgroundColor":"#2f63dc"}', ".littleItem8": '{"top":27,"left":14,"backgroundColor":"#240ee2"}', ".littleItem9": '{"top":27,"left":27,"backgroundColor":"#2fdbb9"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$2);
+const ClassItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c003485c"]]);
+const ClassShow_vue_vue_type_style_index_0_scoped_17364cff_lang = "";
+const _sfc_main$1 = {
+  __name: "ClassShow",
+  props: {
+    style: Object,
+    data: Array
+  },
+  setup(__props) {
+    const props = __props;
+    let classRef = shallowRef(null);
+    let change = inject("change");
+    const provideData = () => {
+      if (change.value) {
+        const data = props.data.slice(33, 65);
+        return data;
+      } else {
+        const data = props.data.slice(0, 32);
+        return data;
+      }
+    };
+    watch(change, (n, o) => {
+      if (n !== o) {
+        provideData();
+        classRef.value?.refreshData(true);
+      }
+    });
+    const measures = (item) => {
+      return {
+        ...item,
+        focusable: true,
+        marginRight: 20,
+        marginBottom: 20
+      };
+    };
+    const onEdge = () => {
+      console.log("到边缘了");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", { class: "bg" }, [
+        createBaseVNode("div", { class: "bg-adjust" }, [
+          createVNode(unref(_sfc_main$F), {
+            name: "ClassShow",
+            ref_key: "classRef",
+            ref: classRef,
+            width: props.style.width,
+            height: props.style.height,
+            provideData,
+            direction: unref(HORIZONTAL),
+            measures,
+            onEdge,
+            padding: props.style.padding,
+            sendFocusRectEvent: true
+          }, {
+            renderItem: withCtx(({ data, query, onEdge: onEdge2, onAction }) => [
+              createVNode(ClassItem, {
+                data,
+                query,
+                onEdge: onEdge2,
+                onAction
+              }, null, 8, ["data", "query", "onEdge", "onAction"])
+            ]),
+            _: 1
+          }, 8, ["width", "height", "direction", "padding"])
+        ])
+      ]);
+    };
+  }
+};
+const styleSheetsContent$1 = { "17364cff": { ".bg": '{"width":1280,"height":720,"backgroundColor":"#006400"}', ".bg .bg-adjust": '{"top":10}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$1);
+const ClassShow = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-17364cff"]]);
+const App_vue_vue_type_style_index_0_scoped_90c3cf97_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    let index = shallowRef(0);
+    const style = {
+      width: 1280,
+      height: 720,
+      padding: {
+        left: 10,
+        top: 0
+      }
+    };
+    let data = reactive([]);
+    for (let i = 0; i < 651; i++) {
+      data.push({
+        width: 140,
+        height: 160,
+        title: `我是标题${i}`
+      });
+    }
+    let change = shallowRef(false);
+    provide("change", change);
+    let myName = shallowRef("Style组件");
+    const onKeyDown = (ev) => {
+      switch (ev.keyCode) {
+        case 49:
+          index.value = 0;
+          myName.value = "Style组件";
+          break;
+        case 50:
+          index.value = 1;
+          myName.value = "Class组件";
+          break;
+        case 51:
+          change.value = !change.value;
+          break;
+      }
+    };
+    const actionDefines = {
+      onKeyDown
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        autoFocus: "",
+        onAction: actionDefines
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { class: "showName" }, toDisplayString(` 当前组件： ` + unref(myName)), 1),
+          createBaseVNode("div", { class: "guide" }, toDisplayString("按 [1] 切换为Style组件，按 [2] 切换为Class组件，按 [3] 切换数据。")),
+          unref(index) == 0 ? (openBlock(), createBlock(_sfc_main$3, {
+            key: 0,
+            style,
+            data: unref(data)
+          }, null, 8, ["data"])) : (openBlock(), createBlock(ClassShow, {
+            key: 1,
+            style,
+            data: unref(data)
+          }, null, 8, ["data"]))
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const styleSheetsContent = { "90c3cf97": { ".showName": '{"top":0,"left":0,"width":300,"height":40,"backgroundColor":"rgba(255, 255, 255, 0.5)","fontSize":28,"lineHeight":40,"zIndex":999}', ".guide": '{"top":0,"left":950,"width":330,"height":120,"backgroundColor":"rgba(255, 255, 255, 0.5)","fontSize":28,"lineHeight":40,"zIndex":999}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-90c3cf97"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.8e86826b.js.map
+
+/*jsvmd5:6392f53723f1394e8fcb45cb9263d168*/

package/template-vue-vite/dist-test-jsview-chunk/js/App.94064c31.js

@@ -0,0 +1,104 @@
+import { u as useFocusHub, an as _sfc_main$n } from "./jsview-vue-entry.415721d8.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { r as reactive, t as onMounted, b as resolveComponent, o as openBlock, A as createBlock, l as withCtx, f as createBaseVNode, k as createVNode, g as normalizeStyle, u as unref, G as toDisplayString } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const App_vue_vue_type_style_index_0_scoped_f55e5152_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const focusHub = useFocusHub();
+    const layoutInfo = {
+      width: 1200,
+      height: 500,
+      left: 30,
+      top: 200
+    };
+    const items = reactive([
+      {
+        image: "https://pic.meetao.com/images/admin/2531edf0b7e34c299892ceace72b2c81.jpg"
+      },
+      {
+        image: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWLWXvKAdqZ5AAB5Ot8fJhc62.webp"
+      },
+      {
+        image: "https://pic.meetao.com/images/admin/bc28dfc4a9ae470e86eed8f743a3d97a.png"
+      },
+      {
+        image: "https://pic.meetao.com/images/admin/1070701b82e8416d940c558f5fb61ad2.jpg"
+      },
+      {
+        image: "https://pic.meetao.com/images/admin/5a454819dabd469991c62c72e348c49b.jpg"
+      },
+      {
+        image: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpwcGAM-w1AACsNFeB3SQ56.webp"
+      },
+      {
+        image: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpw9GAbOL_AABn2OGO6UY97.webp"
+      },
+      {
+        image: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWLWWFGAfDz4AAB_dMtnwC831.webp"
+      },
+      {
+        image: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpxACASppDAACKmP9qkQ020.webp"
+      }
+    ]);
+    const onClick = (index) => {
+      console.log(index);
+    };
+    const initItemStyle = {
+      width: 300,
+      height: 400
+    };
+    const onChange = (preIndex, currentIndex) => {
+      console.log("preIndex:", preIndex, "currentIndex", currentIndex);
+    };
+    onMounted(() => {
+      focusHub.setFocus("JsvSwiper3D");
+    });
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, { autoFocus: "" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { class: "bgStyle" }, [
+            createVNode(unref(_sfc_main$n), {
+              name: "JsvSwiper3D",
+              layoutInfo,
+              duration: 0.5,
+              sideScale: 0.1,
+              ItemArray: items,
+              initItemStyle,
+              dispNumber: 7,
+              initIndex: 2,
+              onClick,
+              onChange
+            }, {
+              itemView: withCtx(({ propsItem, defineSize, dataIndex }) => [
+                createBaseVNode("div", {
+                  style: normalizeStyle({
+                    width: defineSize.width,
+                    height: defineSize.height,
+                    backgroundImage: items[dataIndex].image,
+                    fontSize: 40
+                  })
+                }, null, 4)
+              ]),
+              _: 1
+            }, 8, ["duration", "sideScale", "ItemArray"])
+          ]),
+          createBaseVNode("div", { style: { width: 550, height: 60, fontSize: 24, color: "#FFFFFF", lineHeight: 30, left: 30, top: 50 } }, toDisplayString("操作提示：左右键选择，【OK】键触发点击事件。初始聚焦：第 2 项"))
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const styleSheetsContent = { "f55e5152": { ".bgStyle": '{"width":1280,"height":720,"backgroundColor":"#007788"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f55e5152"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.94064c31.js.map
+
+/*jsvmd5:3619ceadfa0da9389a75feb79d396670*/