create-jsview 2.1.428 → 2.1.448-test.0

package/template-vue-vite/dist-test-jsview-chunk/js/App.5788a834.js

@@ -1,1675 +0,0 @@
-import { a as useRouter, c as bridge } from "./jsview-vue-entry.415721d8.js";
-import { a as _export_sfc } from "./export-sfc.2749ebea.js";
-import { o as openBlock, e as createElementBlock, F as Fragment, m as renderList, g as normalizeStyle, G as toDisplayString, f as createBaseVNode, u as unref, j as renderSlot, s as shallowRef, x as onUnmounted, a as ref, I as withDirectives, J as vShow, k as createVNode, l as withCtx, C as mergeProps, P as normalizeClass, Q as useCssVars, r as reactive, t as onMounted, E as onBeforeUnmount, c as computed, b as resolveComponent, A as createBlock, q as createCommentVNode } from "./vue.889a9b8b.js";
-import "./jsview-forge-define.bfab260e.js";
-import "./jsview-dom-entry.280f04b1.js";
-const styleSheetsContent$9 = { "0": { ".title-font": '{"fontFamily":"黑体","fontSize":16}', ".container-font": '{"color":"#FFFFFF","fontFamily":"黑体","fontSize":16}', ".content-font": '{"fontFamily":"黑体","fontSize":12}' } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$9);
-const TitleBar_vue_vue_type_style_index_0_lang = "";
-const TitleBar_vue_vue_type_style_index_1_scoped_5b11afdc_lang = "";
-const _sfc_main$q = {
-  __name: "TitleBar",
-  props: {
-    itemSides: Object,
-    titleData: Array
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.titleData, (title, index) => {
-          return openBlock(), createElementBlock("div", {
-            key: index,
-            class: "title-font item-style",
-            style: normalizeStyle({ ...__props.itemSides, left: __props.itemSides.width * index })
-          }, toDisplayString(title), 5);
-        }), 128))
-      ]);
-    };
-  }
-};
-const styleSheetsContent$8 = { "5b11afdc": { ".item-style": '{"textAlign":"center"}' } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$8);
-const TitleBar = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-5b11afdc"]]);
-const ContentBlock_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$p = {
-  __name: "ContentBlock",
-  props: {
-    title: String,
-    index: Number,
-    itemSides: Object
-  },
-  setup(__props) {
-    const props = __props;
-    const titleStyle = {
-      lineHeight: 18,
-      width: props.itemSides.width,
-      height: 18,
-      backgroundColor: "rgba(0,0,255,0.7)"
-    };
-    const blockOpacity = props.index % 2 === 0 ? 0.2 : 0.5;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createBaseVNode("div", {
-          class: "container-font",
-          style: titleStyle
-        }, toDisplayString(__props.title), 1),
-        createBaseVNode("div", {
-          key: "blockColor",
-          style: normalizeStyle({
-            top: titleStyle.lineHeight,
-            width: __props.itemSides.width,
-            height: __props.itemSides.height - 18,
-            backgroundColor: "rgba(0,0,255," + unref(blockOpacity) + ")"
-          })
-        }, null, 4),
-        createBaseVNode("div", {
-          key: "container",
-          style: normalizeStyle({ top: titleStyle.lineHeight })
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 4)
-      ]);
-    };
-  }
-};
-const tinyImgPath1 = "" + new URL("../assets/icon.0d3ef206.png", import.meta.url).href;
-const testImgPath1 = "" + new URL("../assets/test.671066bc.jpg", import.meta.url).href;
-const DivBackground_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$o = {
-  __name: "DivBackground",
-  setup(__props) {
-    const urlList = [`url(${tinyImgPath1})`, `url(${testImgPath1})`];
-    let urlIndex = 0;
-    const bgSwitchList = [`使用img`, `使用color`, `img优先于color`];
-    let bgSwitchIndex = shallowRef(0);
-    let bgTestUrl = shallowRef(urlList[0]);
-    let timerInterval = setInterval(() => {
-      urlIndex++;
-      if (urlIndex >= urlList.length) {
-        urlIndex = 0;
-      }
-      bgTestUrl.value = urlList[urlIndex];
-      bgSwitchIndex.value++;
-      if (bgSwitchIndex.value >= bgSwitchList.length) {
-        bgSwitchIndex.value = 0;
-      }
-    }, 1500);
-    onUnmounted(() => {
-      clearInterval(timerInterval);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            width: 180,
-            height: 25,
-            backgroundColor: "rgba(255, 255, 0, 1)"
-          })
-        }, " style.backgroundColor ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            top: 30,
-            width: 180,
-            height: 25,
-            backgroundImage: unref(bgTestUrl)
-          })
-        }, " style.backgroundImage(url) ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            top: 60,
-            width: 180,
-            height: 25,
-            backgroundColor: unref(bgSwitchIndex) >= 1 ? "rgba(255, 255, 0, 1)" : "",
-            backgroundImage: unref(bgSwitchIndex) != 1 ? urlList[0] : ""
-          })
-        }, toDisplayString(bgSwitchList[unref(bgSwitchIndex)]), 5),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            top: 100,
-            width: 90,
-            height: 40,
-            backgroundImage: "linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0,255,0,1), rgba(0,0,255,1))"
-          })
-        }, " gradient ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            top: 100,
-            left: 92,
-            width: 90,
-            height: 40,
-            backgroundImage: "linear-gradient(rgba(255, 0, 0, 1), rgba(0,255,0,1))"
-          })
-        }, " gradient ", 4)
-      ]);
-    };
-  }
-};
-const DivClip_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$n = {
-  __name: "DivClip",
-  setup(__props) {
-    const titleHeight = 16;
-    const imageSize = {
-      width: 80,
-      height: 64
-    };
-    const clipSize = {
-      width: 50,
-      height: 40
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", { style: { "{\n          top": "0" } }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ width: 50, height: titleHeight })
-          }, " 原图 ", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({
-              top: titleHeight,
-              width: imageSize.width + 4,
-              height: imageSize.height + 4,
-              backgroundColor: "rgba(0, 255, 0, 1)"
-            })
-          }, [
-            createBaseVNode("div", {
-              style: normalizeStyle({
-                left: 2,
-                top: 2,
-                width: imageSize.width,
-                height: imageSize.height,
-                backgroundImage: `url(${unref(testImgPath1)})`
-              })
-            }, null, 4)
-          ], 4)
-        ]),
-        createBaseVNode("div", {
-          style: normalizeStyle({ top: imageSize.height + titleHeight + 4 })
-        }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ width: 120, height: titleHeight })
-          }, " 左上Overflow ", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({
-              top: titleHeight,
-              width: imageSize.width + 4,
-              height: imageSize.height + 4,
-              backgroundColor: "rgba(0, 255, 0, 1)"
-            })
-          }, [
-            createBaseVNode("div", {
-              key: "clipArea",
-              style: normalizeStyle({
-                left: 2,
-                top: 2,
-                width: clipSize.width,
-                height: clipSize.height,
-                overflow: "hidden"
-              })
-            }, [
-              createBaseVNode("div", {
-                style: normalizeStyle({
-                  width: imageSize.width,
-                  height: imageSize.height,
-                  backgroundImage: `url(${unref(testImgPath1)})`
-                })
-              }, null, 4)
-            ], 4)
-          ], 4)
-        ], 4),
-        createBaseVNode("div", {
-          style: normalizeStyle({ top: (imageSize.height + titleHeight + 4) * 2 })
-        }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ width: 120, height: titleHeight })
-          }, " 右下Overflow ", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({
-              top: titleHeight,
-              width: imageSize.width + 4,
-              height: imageSize.height + 4,
-              backgroundColor: "rgba(0, 255, 0, 1)"
-            })
-          }, [
-            createBaseVNode("div", {
-              key: "clipArea",
-              style: normalizeStyle({
-                top: 2 + (imageSize.height - clipSize.height),
-                left: 2 + (imageSize.width - clipSize.width),
-                width: clipSize.width,
-                height: clipSize.height,
-                overflow: "hidden"
-              })
-            }, [
-              createBaseVNode("div", {
-                style: normalizeStyle({
-                  top: -(imageSize.height - clipSize.height),
-                  left: -(imageSize.width - clipSize.width),
-                  width: imageSize.width,
-                  height: imageSize.height,
-                  backgroundImage: `url(${unref(testImgPath1)})`
-                })
-              }, null, 4)
-            ], 4)
-          ], 4)
-        ], 4)
-      ]);
-    };
-  }
-};
-const DivLayout_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$m = {
-  __name: "DivLayout",
-  setup(__props) {
-    let vShow$1 = ref(false);
-    let loopVShow = setInterval(() => {
-      vShow$1.value = !vShow$1.value;
-    }, 1e3);
-    onUnmounted(() => {
-      clearInterval(loopVShow);
-    });
-    function onJsvEventCallback() {
-      console.error("Event jsview options example of writing, never be called.");
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({ width: 70, height: 25, backgroundColor: "rgba(0, 255, 0, 1)" }),
-          onLoad: onJsvEventCallback
-        }, " 坐标未设 ", 36),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            top: 30 * 1,
-            left: 0,
-            width: 70,
-            height: 25,
-            backgroundColor: "rgba(0, 200, 0, 1)",
-            visibility: "hidden"
-          })
-        }, " (X)不可视 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            top: 30 * 1,
-            left: 75,
-            width: 70,
-            height: 25,
-            backgroundColor: "rgba(0, 200, 0, 1)",
-            visibility: "visible"
-          })
-        }, " 可视属性 ", 4),
-        withDirectives(createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            top: 30 * 2,
-            left: 75,
-            width: 70,
-            height: 25,
-            backgroundColor: "rgba(0, 200, 0, 1)",
-            visibility: "visible"
-          })
-        }, " v-show ", 4), [
-          [vShow, unref(vShow$1)]
-        ])
-      ]);
-    };
-  }
-};
-const _sfc_main$l = {
-  __name: "DivGroup1",
-  props: {
-    contentClass: String,
-    itemSides: Object
-  },
-  setup(__props) {
-    const props = __props;
-    const contentBlockProps = {
-      colIndex: 0,
-      itemSides: props.itemSides
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "item-root" }, [
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 0 }
-        }, contentBlockProps, {
-          index: 0,
-          title: "Layout(布局定位)"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$m)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 1 }
-        }, contentBlockProps, {
-          index: 1,
-          title: "Background(加载图片)"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$o)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 2 }
-        }, { ...contentBlockProps, itemSides: { ...__props.itemSides, height: 290 } }, {
-          index: 2,
-          title: "Clip(裁剪)"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$n)
-          ]),
-          _: 1
-        }, 16, ["class", "style"])
-      ]);
-    };
-  }
-};
-const _sfc_main$k = {
-  __name: "DivCssScoped",
-  props: {
-    jsvclass: String
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        createBaseVNode("div", null, [
-          createBaseVNode("div", {
-            class: normalizeClass(__props.jsvclass),
-            "data-jsv-extend-class-attr": "2"
-          }, " Scoped CSS穿透, 此处的属性是Container设进来的. ", 2)
-        ])
-      ]);
-    };
-  }
-};
-const DivCssVar_vue_vue_type_style_index_0_scoped_b575b30e_lang = "";
-const _sfc_main$j = {
-  __name: "DivCssVar",
-  setup(__props) {
-    useCssVars((_ctx) => ({
-      "9e853510": unref(state).width + 10,
-      "0ab28d9d": unref(state).foreColor,
-      "07e00f5c": unref(state).backColor,
-      "6c6074db": unref(state).transY,
-      "6c6074da": unref(state).transX
-    }));
-    let timerId = -1;
-    let state = reactive({
-      foreColor: "#FF0000",
-      backColor: "#00FF00",
-      width: 65,
-      transX: 0,
-      transY: 0
-    });
-    onMounted(() => {
-      timerId = setInterval(() => {
-        if (state.foreColor == "#00FF00") {
-          state.foreColor = "#FF0000";
-          state.backColor = "#00FF00";
-          state.width = 65;
-          state.transX = 50;
-          state.transY = 0;
-        } else {
-          state.foreColor = "#00FF00";
-          state.backColor = "#FF0000";
-          state.width = 55;
-          state.transX = 0;
-          state.transY = 50;
-        }
-      }, 3e3);
-    });
-    onBeforeUnmount(() => {
-      {
-        if (timerId >= 0) {
-          clearInterval(timerId);
-        }
-        timerId = -1;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createBaseVNode("div", { class: "block-var" }, "CSS class中包含变量"),
-        createBaseVNode("div", { class: "block-kf-var" }, "CSS keyframes中包含变量")
-      ], 64);
-    };
-  }
-};
-const styleSheetsContent$7 = { "0": { "AnimTranslate-b575b30e": "@keyframes AnimTranslate-b575b30e {from{transform:translate3d(0, var(--6c6074db), 0);}to{transform:translate3d(var(--6c6074da), 0, 0);}}" }, "b575b30e": { ".block-var": '{"width":"var(--9e853510)","height":65,"color":"var(--0ab28d9d)","backgroundColor":"var(--07e00f5c)"}', ".block-kf-var": '{"left":100,"width":65,"height":65,"color":"var(--0ab28d9d)","backgroundColor":"var(--07e00f5c)","animation":"AnimTranslate-b575b30e 2s linear infinite"}' } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$7);
-const DivCssVar = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-b575b30e"]]);
-const DivRadius_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$i = {
-  __name: "DivRadius",
-  setup(__props) {
-    const blockSize = {
-      width: 65,
-      height: 65
-    };
-    const gap = 5;
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            width: blockSize.width,
-            height: blockSize.height,
-            backgroundColor: "rgba(255, 255, 0, 1)",
-            borderRadius: 10
-          })
-        }, " 各角相同 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            left: blockSize.width + gap,
-            width: blockSize.width,
-            height: blockSize.height,
-            backgroundColor: "rgba(255, 255, 0, 1)",
-            borderRadius: "0 10 20 30"
-          })
-        }, " 各角不同 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            top: blockSize.height + gap,
-            width: blockSize.width,
-            height: blockSize.height,
-            backgroundImage: `url(${unref(tinyImgPath1)})`,
-            borderRadius: "10"
-          })
-        }, " 各角相同 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            left: blockSize.width + gap,
-            top: blockSize.height + gap,
-            width: blockSize.width,
-            height: blockSize.height,
-            backgroundImage: `url(${unref(tinyImgPath1)})`,
-            borderRadius: "0 10 20 30"
-          })
-        }, " 各角不同 ", 4)
-      ]);
-    };
-  }
-};
-const DivTransform_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$h = {
-  __name: "DivTransform",
-  setup(__props) {
-    const blockSize = {
-      width: 65,
-      height: 65
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            left: 10,
-            top: 10,
-            width: blockSize.width,
-            height: blockSize.height,
-            backgroundColor: "rgba(255, 255, 0, 1)",
-            transform: "rotate3d(0, 0, 1, 30deg)"
-          })
-        }, " rotate3d ", 4)
-      ]);
-    };
-  }
-};
-const DivGroup2_vue_vue_type_style_index_0_scoped_5ae15912_lang = "";
-const _sfc_main$g = {
-  __name: "DivGroup2",
-  props: {
-    contentClass: String,
-    itemSides: Object
-  },
-  setup(__props) {
-    const props = __props;
-    const contentBlockProps = {
-      colIndex: 0,
-      itemSides: props.itemSides
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "item-root" }, [
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 0 }
-        }, contentBlockProps, {
-          index: 1,
-          title: "Radius(实现圆角)"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$i)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 1 }
-        }, contentBlockProps, {
-          index: 1,
-          title: "Transform"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$h)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 2 }
-        }, contentBlockProps, {
-          index: 2,
-          title: "CSS Var"
-        }), {
-          default: withCtx(() => [
-            createVNode(DivCssVar)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 3 }
-        }, contentBlockProps, {
-          index: 3,
-          title: "CSS Scoped"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$k, { jsvclass: "block" })
-          ]),
-          _: 1
-        }, 16, ["class", "style"])
-      ]);
-    };
-  }
-};
-const styleSheetsContent$6 = { "5ae15912": { ".block": '{"width":80,"height":65,"color":"#00ff00"}' } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$6);
-const DivGroup2 = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-5ae15912"]]);
-const TextAlign_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$f = {
-  __name: "TextAlign",
-  setup(__props) {
-    const blockSize = {
-      width: 90,
-      height: 40
-    };
-    const blockStyle = {
-      width: blockSize.width,
-      height: blockSize.height,
-      backgroundColor: "rgba(255, 255, 0, 0.5)",
-      color: "rgba(255, 0, 0, 1)"
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({ ...blockStyle, width: blockSize.width * 1.5 })
-        }, " 左上(默认) ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({ ...blockStyle, top: blockSize.height + 5, textAlign: "center" })
-        }, " 中上 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...blockStyle,
-            left: blockSize.width + 5,
-            top: blockSize.height + 5,
-            textAlign: "right"
-          })
-        }, " 右上 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...blockStyle,
-            top: (blockSize.height + 5) * 2,
-            lineHeight: blockSize.height
-          })
-        }, " 垂直中 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...blockStyle,
-            left: blockSize.width + 5,
-            top: (blockSize.height + 5) * 2,
-            lineHeight: blockSize.height,
-            textAlign: "center"
-          })
-        }, " 正中 ", 4)
-      ]);
-    };
-  }
-};
-const TextFontStyle_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$e = {
-  __name: "TextFontStyle",
-  setup(__props) {
-    const gap = 5;
-    const blockStyle = {
-      width: 70,
-      height: 20
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", null, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...blockStyle })
-          }, "[字体]", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...blockStyle, top: 25, fontFamily: "宋体" })
-          }, " abc宋体 ", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({
-              ...blockStyle,
-              top: 25,
-              left: blockStyle.width + gap,
-              fontFamily: "黑体"
-            })
-          }, " abc黑体 ", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({
-              top: 25,
-              left: (blockStyle.width + gap) * 2 - 10,
-              width: blockStyle.width + 30,
-              height: 28,
-              fontFamily: "黑体",
-              fontSize: 24,
-              WebkitTextStroke: "1 rgba(255,255,0,1.0)"
-            })
-          }, " abc描边 ", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...blockStyle, top: 50, fontWeight: "bold" })
-          }, " abc粗体 ", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({
-              ...blockStyle,
-              top: 50,
-              left: blockStyle.width + gap,
-              fontStyle: "italic"
-            })
-          }, " abc斜体 ", 4)
-        ]),
-        createBaseVNode("div", { style: { top: 75 } }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...blockStyle })
-          }, "[其他]", 4),
-          createBaseVNode("div", { style: { top: 25, width: 130, height: 35, fontSize: 30 } }, " abc字号 "),
-          createBaseVNode("div", {
-            style: normalizeStyle({
-              top: 25,
-              left: 110,
-              width: 130,
-              height: 35,
-              color: "rgba(255, 0, 0, 1)",
-              fontFamily: "sans-serif",
-              fontSize: 30,
-              fontStyle: "italic",
-              fontWeight: "bold"
-            })
-          }, " abc综合 ", 4)
-        ])
-      ]);
-    };
-  }
-};
-const TextOverflow_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$d = {
-  __name: "TextOverflow",
-  setup(__props) {
-    const gap = 5;
-    const blockSize = {
-      width: 180,
-      height: 35
-    };
-    const baseStyle = {
-      width: blockSize.width,
-      height: blockSize.height,
-      backgroundColor: "rgba(255, 255, 0, 0.5)",
-      color: "rgba(255, 0, 0, 1)"
-    };
-    const multiLineCut = '多行文字（末尾截断)：\n第一行：我末尾有个"\\n"\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十';
-    const multiLineEllipsis = '多行文字（末尾省略)：\n第一行：我末尾有个"\\n"\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十';
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...baseStyle,
-            whiteSpace: "nowrap",
-            textOverflow: "clip",
-            overflow: "hidden"
-          })
-        }, " 1.长文字截断，后面的文字你可能看不到 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...baseStyle,
-            top: blockSize.height + gap,
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis",
-            overflow: "hidden"
-          })
-        }, " 2.长文字省略，后面的文字你可能看不到 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...baseStyle,
-            top: (blockSize.height + gap) * 2,
-            whiteSpace: "pre-wrap",
-            textOverflow: "clip",
-            overflow: "hidden"
-          })
-        }, " 3.长文字折行+截断，后面的文字你可能看不到，与PC效果有区别，一二三四五六七八九十 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...baseStyle,
-            top: (blockSize.height + gap) * 3,
-            whiteSpace: "pre-wrap",
-            textOverflow: "ellipsis",
-            overflow: "hidden"
-          })
-        }, " 4.长文字折行+省略，后面的文字你可能看不到，与PC效果有区别，一二三四五六七八九十 ", 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...baseStyle,
-            top: (blockSize.height + gap) * 4,
-            height: 65,
-            whiteSpace: "pre-wrap",
-            textOverflow: "clip",
-            overflow: "hidden"
-          })
-        }, " 5." + toDisplayString(multiLineCut), 4),
-        createBaseVNode("div", {
-          class: "content-font",
-          style: normalizeStyle({
-            ...baseStyle,
-            top: (blockSize.height + gap) * 4 + 67,
-            height: 65,
-            whiteSpace: "pre-wrap",
-            textOverflow: "ellipsis",
-            overflow: "hidden"
-          })
-        }, " 6." + toDisplayString(multiLineEllipsis), 4)
-      ]);
-    };
-  }
-};
-const _sfc_main$c = {
-  __name: "TextGroup1",
-  props: {
-    contentClass: String,
-    itemSides: Object
-  },
-  setup(__props) {
-    const props = __props;
-    const contentBlockProps = {
-      colIndex: 0,
-      itemSides: props.itemSides
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "item-root" }, [
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 0 }
-        }, contentBlockProps, {
-          index: 0,
-          title: "文字对齐"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$f)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 1 }
-        }, contentBlockProps, {
-          index: 1,
-          title: "字体和字号"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$e)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 2 }
-        }, { ...contentBlockProps, itemSides: { ...__props.itemSides, height: 290 } }, {
-          index: 2,
-          title: "文字折行"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$d)
-          ]),
-          _: 1
-        }, 16, ["class", "style"])
-      ]);
-    };
-  }
-};
-const TextEmoji_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$b = {};
-const styleSheetsContent$5 = { "0": { ".emoji": '{"top":80,"width":300,"height":100,"fontSize":20}' } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$5);
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-    createBaseVNode("div", { style: {
-      width: 300,
-      height: 100,
-      fontSize: 20,
-      JsvTextEmoji: 1
-    } }, toDisplayString(`style: 😀笑🇨🇳中国
-👨‍👩‍👧‍👦家庭`)),
-    createBaseVNode("div", {
-      class: "emoji",
-      style: {
-        JsvTextEmoji: 1
-      }
-    }, toDisplayString(`class: 😀笑🇨🇳中国
-👨‍👩‍👧‍👦家庭`))
-  ]);
-}
-const TextEmoji = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render]]);
-const TextDirection_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$a = {
-  __name: "TextDirection",
-  setup(__props) {
-    const unitHeight = 20 + 35;
-    const ltrText = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", {
-          style: normalizeStyle({
-            top: unitHeight * 0
-          })
-        }, [
-          createBaseVNode("div", { class: "explain" }, "ltr文字省略尾部"),
-          createBaseVNode("div", {
-            class: "content-font base",
-            style: {
-              direction: "ltr"
-            }
-          }, toDisplayString(ltrText))
-        ], 4),
-        createBaseVNode("div", {
-          style: normalizeStyle({
-            top: unitHeight * 1
-          })
-        }, [
-          createBaseVNode("div", { class: "explain" }, "ltr文字省略头部"),
-          createBaseVNode("div", {
-            class: "content-font base",
-            style: {
-              direction: "rtl"
-            }
-          }, toDisplayString(ltrText))
-        ], 4),
-        createBaseVNode("div", {
-          style: normalizeStyle({
-            top: unitHeight * 2
-          })
-        }, [
-          createBaseVNode("div", { class: "explain" }, "rtl文字省略尾部"),
-          createBaseVNode("div", {
-            class: "content-font base",
-            style: {
-              direction: "rtl"
-            }
-          }, toDisplayString(rtlText))
-        ], 4),
-        createBaseVNode("div", {
-          style: normalizeStyle({
-            top: unitHeight * 3
-          })
-        }, [
-          createBaseVNode("div", { class: "explain" }, "rtl文字省略头部"),
-          createBaseVNode("div", {
-            class: "content-font base",
-            style: {
-              direction: "ltr"
-            }
-          }, toDisplayString(rtlText))
-        ], 4)
-      ]);
-    };
-  }
-};
-const styleSheetsContent$4 = { "0": { ".base": '{"top":25,"width":180,"height":30,"lineHeight":30,"backgroundColor":"rgba(255, 255, 0, 0.5)","color":"#ff0000","fontSize":25,"whiteSpace":"nowrap","textOverflow":"ellipsis","overflow":"hidden"}', ".explain": '{"width":180,"height":20,"lineHeight":20,"fontSize":15,"color":"#000000"}' } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$4);
-const _sfc_main$9 = {
-  __name: "TextGroup2",
-  props: {
-    contentClass: String,
-    itemSides: Object
-  },
-  setup(__props) {
-    const props = __props;
-    const contentBlockProps = {
-      colIndex: 0,
-      itemSides: props.itemSides
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "item-root" }, [
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 0 }
-        }, contentBlockProps, {
-          index: 0,
-          title: "文字对齐"
-        }), {
-          default: withCtx(() => [
-            createVNode(TextEmoji)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 1 }
-        }, { ...contentBlockProps, itemSides: { ...__props.itemSides, height: 250 } }, {
-          index: 0,
-          title: "不同方向文字省略"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$a)
-          ]),
-          _: 1
-        }, 16, ["class", "style"])
-      ]);
-    };
-  }
-};
-const AnimKeyframeBasic_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$8 = {
-  __name: "AnimKeyframeBasic",
-  setup(__props) {
-    const blockSize = {
-      width: 70,
-      height: 70
-    };
-    const titleStyle = {
-      width: 60,
-      height: 20,
-      textAlign: "center",
-      lineHeight: 20
-    };
-    const itemStyle = {
-      top: 20,
-      width: 50,
-      height: 50,
-      backgroundColor: "rgba(255, 0, 0, 1)"
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", null, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "Translate3d", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({ ...itemStyle, animation: "AnimTranslate 3s infinite" })
-          }, null, 4)
-        ]),
-        createBaseVNode("div", {
-          style: normalizeStyle({ left: blockSize.width })
-        }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "Scale3d", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({ ...itemStyle, animation: "AnimScale 3s infinite linear" })
-          }, null, 4)
-        ], 4),
-        createBaseVNode("div", {
-          style: normalizeStyle({ left: blockSize.width * 2 })
-        }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "Rotate3d", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({ ...itemStyle, animation: "AnimRotate 3s infinite linear" })
-          }, null, 4)
-        ], 4),
-        createBaseVNode("div", {
-          style: normalizeStyle({ left: blockSize.width, top: blockSize.height })
-        }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "Skew", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({ ...itemStyle, animation: "AnimSkew 3s infinite ease-in" })
-          }, null, 4)
-        ], 4),
-        createBaseVNode("div", {
-          style: normalizeStyle({ left: blockSize.width * 2, top: blockSize.height })
-        }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "Opacity", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({
-              ...itemStyle,
-              width: 20,
-              animation: "AnimOpacityOut 3s infinite ease-out"
-            })
-          }, null, 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({
-              ...itemStyle,
-              left: 25,
-              width: 20,
-              animation: "AnimOpacityIn 3s infinite ease-in-out"
-            })
-          }, null, 4)
-        ], 4)
-      ]);
-    };
-  }
-};
-const styleSheetsContent$3 = { "0": { "AnimTranslate": "@keyframes AnimTranslate {from{transform:translate3d(50%, 50, 0);}to{transform:translate3d(0, 0, 0);}}", "AnimScale": "@keyframes AnimScale {from{transform:scale3d(1.5, 1.5, 1);}to{transform:scale3d(0, 0, 0);}}", "AnimRotate": "@keyframes AnimRotate {from{transform:rotate3d(1.5, 1, 1, 90deg);}to{transform:rotate3d(1.5, 1, 1, 0);}}", "AnimSkew": "@keyframes AnimSkew {from{transform:skew(30deg, 45deg);}to{transform:skew(0, 0);}}", "AnimOpacityOut": "@keyframes AnimOpacityOut {from{opacity:0.1;}to{opacity:1;}}", "AnimOpacityIn": "@keyframes AnimOpacityIn {from{opacity:1;}to{opacity:20%;}}" } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$3);
-const AnimKeyframeComposite_vue_vue_type_style_index_0_lang = "";
-const AnimKeyframeComposite_vue_vue_type_style_index_1_lang = "";
-const _sfc_main$7 = {
-  __name: "AnimKeyframeComposite",
-  setup(__props) {
-    const titleStyle = {
-      width: 100,
-      height: 20,
-      textAlign: "center",
-      lineHeight: 20
-    };
-    const itemStyle = {
-      top: 20,
-      width: 50,
-      height: 50,
-      backgroundColor: "rgba(255, 0, 0, 1)"
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", null, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "四种变形动画", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({ ...itemStyle, animation: "AnimComposite1 3s infinite" })
-          }, null, 4)
-        ]),
-        createBaseVNode("div", { style: { left: 100 } }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "变形+透明动画", 4),
-          createBaseVNode("div", {
-            style: normalizeStyle({ ...itemStyle, animation: "AnimComposite2 3s infinite" })
-          }, null, 4)
-        ])
-      ]);
-    };
-  }
-};
-const styleSheetsContent$2 = { "0": { "AnimComposite1": "@keyframes AnimComposite1 {from{transform:translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)\n      rotate3d(1.5, 1, 1, 90deg) skew(30deg, 45deg);}to{}}", "AnimComposite2": "@keyframes AnimComposite2 {from{transform:translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)\n      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);opacity:0.1;}to{}}" } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$2);
-const AnimTransition_vue_vue_type_style_index_0_lang = "";
-const _sfc_main$6 = {
-  __name: "AnimTransition",
-  props: {
-    timeCount: Number
-  },
-  setup(__props) {
-    const titleStyle = {
-      width: 100,
-      height: 20,
-      textAlign: "left",
-      lineHeight: 20
-    };
-    const itemStyle = {
-      top: 20,
-      width: 50,
-      height: 50,
-      whiteSpace: "pre-wrap",
-      backgroundColor: "rgba(255, 0, 0, 1)"
-    };
-    let timerId = -1;
-    const state = reactive({
-      transform: null,
-      transformOrigin: null,
-      transformTranslate: null,
-      transformRotate: null,
-      transformScale: null
-    });
-    const changeState = () => {
-      setTimeout(() => {
-        state.transform = "translate3d(80,0,0) scale3d(2,2,1.0) rotate3d(0, 0, 1, 360deg)";
-        state.transformOrigin = "center center";
-        state.transformScale = "scale3d(0.2,0.2,1.0)";
-        state.transformRotate = "rotate3d(0, 0, 1.0, 360deg)";
-        state.transformTranslate = "translate3d(180,0,0)";
-        setTimeout(() => {
-          state.transform = "translate3d(30,0,0) scale3d(0.2,0.2,1.0) rotate3d(0, 0, 1, -360deg)";
-          state.transformOrigin = "center center";
-          state.transformScale = "scale3d(1.2,1.2,1.0)";
-          state.transformRotate = "rotate3d(0, 0, 1.0, -360deg)";
-          state.transformTranslate = "translate3d(-80,0,0)";
-        }, 3e3);
-      }, 3e3);
-    };
-    onMounted(() => {
-      changeState();
-      timerId = setInterval(() => {
-        changeState();
-      }, 6e3);
-    });
-    onBeforeUnmount(() => {
-      if (timerId >= 0) {
-        clearInterval(timerId);
-      }
-      timerId = -1;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", null, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "坐标变化", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({
-              ...itemStyle,
-              left: __props.timeCount * 10 % 200,
-              transition: "left 1s linear"
-            })
-          }, null, 4)
-        ]),
-        createBaseVNode("div", { style: { top: 70 } }, [
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({ ...titleStyle })
-          }, "坐标和尺寸变化", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({
-              ...itemStyle,
-              left: __props.timeCount * 10 % 200,
-              width: __props.timeCount * 10 % 100 + 10,
-              transition: "left 0.5s linear, width 1s linear 1s"
-            })
-          }, null, 4)
-        ]),
-        createBaseVNode("div", {
-          style: normalizeStyle({
-            top: 140,
-            width: 240,
-            height: 160,
-            backgroundColor: "rgba(0, 0, 255, 0.5)"
-          })
-        }, [
-          createBaseVNode("div", {
-            style: normalizeStyle({ ...titleStyle })
-          }, "transform", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({
-              ...itemStyle,
-              top: 20,
-              transition: "transform 2.5s linear 0.5s",
-              transform: state.transform,
-              transformOrigin: state.transformOrigin
-            })
-          }, " 移动缩放旋转 ", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({
-              ...itemStyle,
-              top: 100,
-              transition: "transform 2.5s linear 0.5s",
-              transformOrigin: "center center",
-              transform: state.transformTranslate
-            })
-          }, " 移动 ", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({
-              ...itemStyle,
-              left: 140,
-              top: 20,
-              transition: "transform 2.5s linear 0.5s",
-              transformOrigin: "center center",
-              transform: state.transformScale
-            })
-          }, " 缩放 ", 4),
-          createBaseVNode("div", {
-            class: "content-font",
-            style: normalizeStyle({
-              ...itemStyle,
-              top: 75,
-              left: 140,
-              transition: "transform 2.5s linear 0.5s",
-              transformOrigin: "center center",
-              transform: state.transformRotate
-            })
-          }, " 旋转 ", 4)
-        ], 4)
-      ]);
-    };
-  }
-};
-const _sfc_main$5 = {
-  __name: "AnimGroup",
-  props: {
-    contentClass: String,
-    itemSides: Object
-  },
-  setup(__props) {
-    const props = __props;
-    const contentBlockProps = {
-      colIndex: 0,
-      itemSides: props.itemSides
-    };
-    let timerId = -1;
-    const state = reactive({
-      timeCount: 20
-    });
-    onMounted(() => {
-      timerId = setInterval(() => {
-        state.timeCount = state.timeCount + 5;
-      }, 2e3);
-    });
-    onBeforeUnmount(() => {
-      if (timerId >= 0) {
-        clearInterval(timerId);
-      }
-      timerId = -1;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "item-root" }, [
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 0 }
-        }, contentBlockProps, {
-          index: 1,
-          title: "Keyframe基础动画集合"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$8)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 1 }
-        }, contentBlockProps, {
-          index: 2,
-          title: "Keyframe组合示例"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$7)
-          ]),
-          _: 1
-        }, 16, ["class", "style"]),
-        createVNode(_sfc_main$p, mergeProps({
-          class: __props.contentClass,
-          style: { top: __props.itemSides.height * 2 }
-        }, { ...contentBlockProps, itemSides: { ...__props.itemSides, height: 290 } }, {
-          index: 3,
-          title: "Transition动画示例"
-        }), {
-          default: withCtx(() => [
-            createVNode(_sfc_main$6, {
-              timeCount: state.timeCount
-            }, null, 8, ["timeCount"])
-          ]),
-          _: 1
-        }, 16, ["class", "style"])
-      ]);
-    };
-  }
-};
-const _sfc_main$4 = {
-  __name: "Panel1",
-  props: {
-    panelClass: String,
-    itemSides: Object
-  },
-  setup(__props) {
-    const titleData = ["div标签1", "div标签2", "div文本1", "div文本2", "div动画"];
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(__props.panelClass)
-      }, [
-        createVNode(TitleBar, {
-          class: normalizeClass(__props.panelClass),
-          itemSides: __props.itemSides,
-          titleData
-        }, null, 8, ["class", "itemSides"]),
-        createBaseVNode("div", {
-          class: normalizeClass(__props.panelClass),
-          style: { top: 20 }
-        }, [
-          createVNode(_sfc_main$l, {
-            style: normalizeStyle({ left: __props.itemSides.width * 0 }),
-            contentClass: __props.panelClass,
-            itemSides: __props.itemSides
-          }, null, 8, ["style", "contentClass", "itemSides"]),
-          createVNode(DivGroup2, {
-            style: normalizeStyle({ left: __props.itemSides.width * 1 }),
-            contentClass: __props.panelClass,
-            itemSides: __props.itemSides
-          }, null, 8, ["style", "contentClass", "itemSides"]),
-          createVNode(_sfc_main$c, {
-            style: normalizeStyle({ left: __props.itemSides.width * 2 }),
-            contentClass: __props.panelClass,
-            itemSides: __props.itemSides
-          }, null, 8, ["style", "contentClass", "itemSides"]),
-          createVNode(_sfc_main$9, {
-            style: normalizeStyle({ left: __props.itemSides.width * 3 }),
-            contentClass: __props.panelClass,
-            itemSides: __props.itemSides
-          }, null, 8, ["style", "contentClass", "itemSides"]),
-          createVNode(_sfc_main$5, {
-            style: normalizeStyle({ left: __props.itemSides.width * 4 }),
-            contentClass: __props.panelClass,
-            itemSides: __props.itemSides
-          }, null, 8, ["style", "contentClass", "itemSides"])
-        ], 2)
-      ], 2);
-    };
-  }
-};
-const ImgLayout_vue_vue_type_style_index_0_lang = "";
-const ImgLayout_vue_vue_type_style_index_1_scoped_c67459a4_lang = "";
-const _sfc_main$3 = {
-  __name: "ImgLayout",
-  setup(__props) {
-    const testImgPath = computed(() => {
-      return testImgPath1;
-    });
-    const tinyImgPath = computed(() => {
-      return tinyImgPath1;
-    });
-    const coloumWidth = computed(() => {
-      return 120;
-    });
-    const tabLineHeight = computed(() => {
-      return 76;
-    });
-    const urlList = [
-      tinyImgPath1,
-      testImgPath1
-    ];
-    let urlIndex = 0;
-    let bgTestUrl = shallowRef(urlList[0]);
-    let timerInterval = setInterval(() => {
-      urlIndex++;
-      if (urlIndex >= urlList.length) {
-        urlIndex = 0;
-      }
-      bgTestUrl.value = urlList[urlIndex];
-    }, 1500);
-    onUnmounted(() => {
-      clearInterval(timerInterval);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "layout-root" }, [
-        createBaseVNode("div", { style: { "{top": "0}" } }, [
-          createBaseVNode("div", {
-            id: "0列0行",
-            style: normalizeStyle({ left: unref(coloumWidth) * 0, top: unref(tabLineHeight) * 0 })
-          }, [
-            createBaseVNode("div", { class: "content-font titleStyle" }, " fill(缩放变形)"),
-            createBaseVNode("div", { class: "frameStyle" }, [
-              createBaseVNode("img", {
-                class: "imageStyle",
-                style: { objectFit: "fill" },
-                src: unref(bgTestUrl)
-              }, null, 8, ["src"])
-            ])
-          ], 4),
-          createBaseVNode("div", {
-            id: "1列0行",
-            style: normalizeStyle({ left: unref(coloumWidth) * 1, top: unref(tabLineHeight) * 0 })
-          }, [
-            createBaseVNode("div", { class: "content-font titleStyle" }, "contain"),
-            createBaseVNode("div", { class: "frameStyle" }, [
-              createBaseVNode("img", {
-                class: "imageStyle",
-                style: { objectFit: "contain" },
-                src: unref(testImgPath)
-              }, null, 8, ["src"])
-            ])
-          ], 4),
-          createBaseVNode("div", {
-            id: "0列1行",
-            style: normalizeStyle({ left: unref(coloumWidth) * 0, top: unref(tabLineHeight) * 1 })
-          }, [
-            createBaseVNode("div", { class: "content-font titleStyle" }, "none"),
-            createBaseVNode("div", { class: "frameStyle" }, [
-              createBaseVNode("img", {
-                class: "imageStyle",
-                style: { objectFit: "none" },
-                src: unref(testImgPath)
-              }, null, 8, ["src"])
-            ])
-          ], 4),
-          createBaseVNode("div", {
-            id: "1列1行",
-            style: normalizeStyle({ left: unref(coloumWidth) * 1, top: unref(tabLineHeight) * 1 })
-          }, [
-            createBaseVNode("div", { class: "content-font titleStyle" }, "scale-down"),
-            createBaseVNode("div", { class: "frameStyle" }, [
-              createBaseVNode("img", {
-                class: "imageStyle",
-                style: { objectFit: "scale-down" },
-                src: unref(testImgPath)
-              }, null, 8, ["src"])
-            ])
-          ], 4),
-          createBaseVNode("div", {
-            id: "0列2行",
-            style: normalizeStyle({ left: unref(coloumWidth) * 0, top: unref(tabLineHeight) * 2 })
-          }, [
-            createBaseVNode("div", { class: "content-font titleStyle" }, "cover"),
-            createBaseVNode("div", { class: "frameStyle" }, [
-              createBaseVNode("img", {
-                class: "imageStyle",
-                style: { objectFit: "cover" },
-                src: unref(testImgPath)
-              }, null, 8, ["src"])
-            ])
-          ], 4),
-          createBaseVNode("div", {
-            id: "1列2行",
-            style: normalizeStyle({ left: unref(coloumWidth) * 1, top: unref(tabLineHeight) * 2 })
-          }, [
-            createBaseVNode("div", { class: "content-font titleStyle" }, "none(小图)"),
-            createBaseVNode("div", { class: "frameStyle" }, [
-              createBaseVNode("img", {
-                class: "imageStyle",
-                style: { objectFit: "none" },
-                src: unref(tinyImgPath)
-              }, null, 8, ["src"])
-            ])
-          ], 4),
-          createBaseVNode("div", {
-            id: "0列3行",
-            style: normalizeStyle({ left: unref(coloumWidth) * 0, top: unref(tabLineHeight) * 3 })
-          }, [
-            createBaseVNode("div", { class: "content-font titleStyle" }, "scale-down(小图)"),
-            createBaseVNode("div", { class: "frameStyle" }, [
-              createBaseVNode("img", {
-                class: "imageStyle",
-                style: { objectFit: "scale-down" },
-                src: unref(tinyImgPath)
-              }, null, 8, ["src"])
-            ])
-          ], 4)
-        ])
-      ]);
-    };
-  }
-};
-const styleSheetsContent$1 = { "c67459a4": { ".titleStyle": '{"width":100,"height":16}', ".imageStyle": '{"top":2,"left":2,"width":100,"height":50}', ".frameStyle": '{"top":16,"width":104,"height":54,"backgroundColor":"rgba(0, 255, 0, 1)"}' } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$1);
-const ImgLayout = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c67459a4"]]);
-const _sfc_main$2 = {
-  __name: "ImageGroup",
-  props: {
-    contentClass: String,
-    itemSides: Object
-  },
-  setup(__props) {
-    const props = __props;
-    const contentBlockProps = computed(() => {
-      return {
-        colIndex: 0,
-        itemSides: { ...props.itemSides, height: props.itemSides.height * 2 }
-      };
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", { id: "item-root" }, [
-        createVNode(_sfc_main$p, mergeProps({
-          class: props.contentClass,
-          style: { top: __props.itemSides.height * 0 }
-        }, unref(contentBlockProps), {
-          index: 0,
-          title: "img标签ObjectFit"
-        }), {
-          default: withCtx(() => [
-            createVNode(ImgLayout)
-          ]),
-          _: 1
-        }, 16, ["class", "style"])
-      ]);
-    };
-  }
-};
-const _sfc_main$1 = {
-  __name: "Panel2",
-  props: {
-    panelClass: String,
-    itemSides: Object
-  },
-  setup(__props) {
-    const titleData = ["img标签"];
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(__props.panelClass)
-      }, [
-        createVNode(TitleBar, {
-          class: normalizeClass(__props.panelClass),
-          itemSides: __props.itemSides,
-          titleData
-        }, null, 8, ["class", "itemSides"]),
-        createBaseVNode("div", {
-          class: normalizeClass(__props.panelClass),
-          style: { top: 20 }
-        }, [
-          createVNode(_sfc_main$2, {
-            style: normalizeStyle({ left: __props.itemSides.width * 0 }),
-            contentClass: __props.panelClass,
-            itemSides: __props.itemSides
-          }, null, 8, ["style", "contentClass", "itemSides"])
-        ], 2)
-      ], 2);
-    };
-  }
-};
-const App_vue_vue_type_style_index_0_lang = "";
-const _sfc_main = {
-  __name: "App",
-  setup(__props) {
-    const router = useRouter();
-    const itemSides = {
-      top: 0,
-      left: 0,
-      width: 240,
-      height: 160
-    };
-    const panelInfo = reactive({
-      index: 1,
-      total: 2,
-      desc: "1/2"
-    });
-    const onKeyDown = (ev) => {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 1e4) {
-        router.go(-1);
-        return true;
-      } else if (ev.keyCode == 37) {
-        panelInfo.index = --panelInfo.index > 1 ? panelInfo.index : 1;
-        panelInfo.desc = panelInfo.index + "/" + panelInfo.total;
-        return true;
-      } else if (ev.keyCode == 39) {
-        panelInfo.index = ++panelInfo.index < panelInfo.total ? panelInfo.index : panelInfo.total;
-        panelInfo.desc = panelInfo.index + "/" + panelInfo.total;
-        return true;
-      }
-      return false;
-    };
-    onMounted(() => {
-      bridge.notifyPageLoaded();
-    });
-    return (_ctx, _cache) => {
-      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
-      return openBlock(), createElementBlock("div", null, [
-        createVNode(_component_jsv_focus_block, {
-          autoFocus: "",
-          onKeyDown
-        }),
-        createBaseVNode("div", { class: "root" }, [
-          panelInfo.index == 1 ? (openBlock(), createBlock(_sfc_main$4, {
-            key: 0,
-            style: { top: 10, left: 20 },
-            panelClass: "panel-size",
-            itemSides
-          })) : panelInfo.index == 2 ? (openBlock(), createBlock(_sfc_main$1, {
-            key: 1,
-            style: { top: 10, left: 20 },
-            panelClass: "panel-size",
-            itemSides
-          })) : createCommentVNode("", true),
-          createBaseVNode("div", { style: { top: 650, left: 20, width: 500, color: "#0000FF" } }, toDisplayString(panelInfo.desc), 1),
-          createBaseVNode("div", { style: { top: 650, left: 50, width: 500, color: "#0000FF" } }, " 按左/右键切换Panel，按Back键返回 ")
-        ])
-      ]);
-    };
-  }
-};
-const styleSheetsContent = { "0": { ".root": '{"top":10,"left":10,"width":1250,"height":670,"backgroundColor":"rgba(200, 200, 200, 1)"}', ".panel-size": '{"width":1210,"height":630}' } };
-window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=http://localhost:57245/map/App.5788a834.js.map
-
-/*jsvmd5:eac20beb06965493fdfefdbaf98575eb*/