create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,1675 @@
+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*/