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

package/FlexCellDemo/TestFrame3.vue

@@ -1,97 +1,152 @@
 <script setup>
+import { onMounted, onBeforeUnmount, shallowRef } from "vue";
 import { JsvFlexDiv } from "jsview";
 import image1 from "./images/1.png";
 import image2 from "./images/2.png";
 import image3 from "./images/3.png";
 import image4 from "./images/4.jpg";
+
+let vInvToken = null;
+let showText = shallowRef(true);
+
+onMounted(() => {
+  vInvToken = setInterval(() => {
+    showText.value = !showText.value;
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (vInvToken > 0) {
+    clearInterval(vInvToken);
+    vInvToken = -1;
+  }
+});
 </script>
 
 <template>
+<div
+  :style="{
+    left: -50,
+    width: 350,
+    height: 400,
+    overflow: 'hidden'
+  }"
+>
   <div
     :style="{
-      left: -50,
-      width: 350,
+      left: 50,
+      width: 300,
       height: 400,
-      overflow: 'hidden',
+      backgroundColor: 'rgba(100,100,100,0.5)',
+      fontSize: 12,
+      color: '#000000',
+      textAlign: 'center',
+      lineHeight: 16
     }"
   >
-    <div
+    <jsv-flex-div
       :style="{
-        left: 50,
         width: 300,
         height: 400,
-        backgroundColor: 'rgba(100,100,100,0.5)',
-        fontSize: 12,
-        color: '#000000',
-        textAlign: 'center',
-        lineHeight: 16,
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        justifyContent: 'center'
       }"
     >
-      <jsv-flex-div
+      <!-- 文字绘制区域超过容器尺寸的内容的测试 -->
+      <div
         :style="{
-          width: 300,
-          height: 400,
-          flexDirection: 'column',
-          alignItems: 'flex-end',
-          justifyContent: 'center',
+          width: 450,
+          backgroundColor: 'rgba(0, 50, 0, 0.5)'
         }"
       >
-        <!-- 文字绘制区域超过容器尺寸的内容的测试 -->
-        <div :style="{ width: 450, backgroundColor: 'rgba(0, 50, 0, 0.5)' }">
-          {{
-            "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
-          }}
-        </div>
+        {{
+          "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
+        }}
+      </div>
 
-        <!-- 文字绘制区域未超过容器尺寸的内容的测试 -->
-        <div :style="{ width: 250, backgroundColor: 'rgba(0, 70, 0, 0.5)' }">
-          {{
-            "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
-          }}
-        </div>
+      <!-- 文字绘制区域未超过容器尺寸的内容的测试 -->
+      <div
+        :style="{
+          width: 250,
+          backgroundColor: 'rgba(0, 70, 0, 0.5)'
+        }"
+      >
+        {{
+          "对于涉嫌借款或其他涉及财产的网络信息、账户密码、广告或推广等信息的，用户请谨慎对待并自行判断，基于前述原因您因此遭受的利润、商业信誉、资料损失或其他有形或无形损失的，我们不承担任何直接、间接、附带、特别、衍生性或惩罚性的赔偿责任。"
+        }}
+      </div>
 
-        <!-- 超长折行文字测试点，文字字数大于3000字，最后一个字为'拾' -->
+      <!-- 超长折行文字测试点，文字字数大于3000字，最后一个字为'拾' -->
+      <div
+        :style="{
+          height: 16,
+          backgroundColor: 'rgba(0, 90, 0, 0.5)',
+          whiteSpace: 'nowrap'
+        }"
+      >
+        {{
+          "一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九拾"
+        }}
+      </div>
+      <!-- 短文字横向排布接续的测试 -->
+      <jsv-flex-div
+        :style="{
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: 'rgba(0, 110, 0, 0.5)',
+          alignSelf: 'center',
+        }"
+      >
+        <div :style="{ height: 16 }">
+          {{ "++一二三" }}
+        </div>
         <div
+          v-show="showText"
           :style="{
-            height: 16,
-            backgroundColor: 'rgba(0, 90, 0, 0.5)',
-            whiteSpace: 'nowrap',
+            height: 35,
+            lineHeight: 35,
+            fontSize: 32,
+            backgroundColor: 'rgba(10, 0, 0, 0.5)',
           }"
         >
-          {{
-            "一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九拾"
-          }}
+          {{ "四五六" }}
+        </div>
+        <div :style="{ height: 16 }">
+          {{ "七八九++" }}
         </div>
+      </jsv-flex-div>
 
-        <!-- 短文字横向排布接续的测试 -->
-        <jsv-flex-div
+      <!-- 短文字横向排布接续的测试 -->
+      <jsv-flex-div
+        :style="{
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: 'rgba(0, 110, 0, 0.5)',
+          alignSelf: 'center',
+        }"
+      >
+        <div :style="{ height: 16 }">
+          {{ "++一二三" }}
+        </div>
+        <div
+          v-if="showText"
           :style="{
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'rgba(0, 110, 0, 0.5)',
-            alignSelf: 'center',
+            height: 35,
+            lineHeight: 35,
+            fontSize: 32,
+            backgroundColor: 'rgba(10, 0, 0, 0.5)',
           }"
         >
-          <div :style="{ height: 16 }">
-            {{ "++一二三" }}
-          </div>
-          <div
-            :style="{
-              height: 20,
-              lineHeight: 20,
-              fontSize: 18,
-              backgroundColor: 'rgba(10, 0, 0, 0.5)',
-            }"
-          >
-            {{ "四五六" }}
-          </div>
-          <div :style="{ height: 16 }">
-            {{ "七八九++" }}
-          </div>
-        </jsv-flex-div>
+          {{ "四五六" }}
+        </div>
+        <div :style="{ height: 16 }">
+          {{ "七八九++" }}
+        </div>
       </jsv-flex-div>
-    </div>
+    </jsv-flex-div>
   </div>
+</div>
 </template>
 
 <style scoped></style>

package/FpsLimit/App.vue

@@ -0,0 +1,102 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="processKeyDown"> </jsv-focus-block>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      fontSize: 30,
+      top: 100,
+      backgroundColor: '#00000066',
+      color: '#FFFFFF',
+    }"
+  >
+    帧率限制功能。左键切换降帧开关，右键切换保持高帧率开关，降帧开启且保持高帧率关闭时功能启动。功能开启后，任意按键后5秒内帧率正常，之后帧率下降为5fps。
+  </div>
+  <div
+    :style="{
+      left: 413,
+      top: 400,
+      width: 200,
+      height: 200,
+      backgroundColor: backgroundColor,
+      animation: 'myrotate 2s linear infinite',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 1280,
+      height: 40,
+      fontSize: 30,
+      top: 210,
+      backgroundColor: '#00000066',
+      color: '#FFFFFF',
+    }"
+  >
+    {{ switchBig ? "降帧：打开" : "降帧：关闭" }}
+    {{ switchSmall ? "保持高帧率：打开" : "保持高帧率：关闭" }}
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, onBeforeMount } from "vue";
+import { jJsvRuntimeBridge } from "jsview";
+
+const backgroundColor = ref("#0000FF");
+const switchBig = ref(false);
+const switchSmall = ref(false);
+
+const processKeyDown = (ev) => {
+  if (ev.keyCode == 37) {
+    switchBig.value = !switchBig.value;
+    if (switchBig.value) {
+      window.JsvCoreApi.setIdleFps(true, 5, 5000);
+    } else {
+      window.JsvCoreApi.setIdleFps(false);
+    }
+    return true;
+  }
+  if (ev.keyCode == 39) {
+    switchSmall.value = !switchSmall.value;
+    if (switchSmall.value) {
+      window.JsvCoreApi.keepFpsHighPerf(true);
+    } else {
+      window.JsvCoreApi.keepFpsHighPerf(false);
+    }
+    return true;
+  }
+  if (ev.keyCode == 13) {
+    backgroundColor.value =
+      backgroundColor.value == "#00FF00" ? "#00FFFF" : "#00FF00";
+    return true;
+  }
+  return false;
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+  window.JsvCoreApi.enableFpsDisplay(true);
+});
+
+onBeforeMount(() => {
+  window.JsView?.setIdleFps?.(false);
+  window.JsView?.keepFpsHighPerf?.(false);
+});
+</script>
+
+<style scoped>
+@keyframes myrotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/FreeMove/App.vue

@@ -1,289 +1,34 @@
 <template>
-  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
-    <div class="bgStyle">
-      <div v-for="(item, index) in 6">
-        <div v-show="index == num - 1">
-          <jsv-free-move-actor :ref="(el) => (actRef[index] = el)">
-            <div class="box">{{ "测试文字1" }}</div>
-          </jsv-free-move-actor>
-          <jsv-free-move-actor :ref="(el) => (actRef2[index] = el)">
-            <div class="box" :style="{ backgroundColor: '#b52489' }">
-              {{ "测试文字2" }}
-            </div>
-          </jsv-free-move-actor>
-        </div>
-      </div>
-      <div class="tip">{{ "左右键翻页 " + `${num}/6 页` }}</div>
-    </div>
+  <jsv-focus-block :name="focusBlockName" :onAction="onActionObj">
+    <component :is="currentSceneComponent" />
   </jsv-focus-block>
 </template>
 
 <script setup>
-import { JsvFreeMoveActor, FreeMoveDef } from "jsview";
-import { shallowRef, onMounted, watch } from "vue";
-
-const actEvents = FreeMoveDef.ActEventDefine;
-const keepFlags = FreeMoveDef.KeepFlags;
-
-let actRef = shallowRef([]);
-let actRef2 = shallowRef([]);
-let actorControl = null;
-let actorControl2 = null;
-
-let num = shallowRef(1);
-const procKeyDown = (ev) => {
-  switch (ev.keyCode) {
-    case 13:
-      console.log("procKeyDown get ok key");
-      break;
-    case 37:
-      if (num.value !== 1) {
-        num.value -= 1;
-      } else {
-        num.value = 1;
-      }
-      break;
-    case 39:
-      if (num.value !== 6) {
-        num.value += 1;
-      } else {
-        num.value = 6;
-      }
+import { computed, shallowRef } from "vue";
+import TestScene1 from "./TestScene1.vue";
+import TestScene3 from "./TestScene3.vue";
+
+const currentSceneIndex = shallowRef(0);
+const scenes = [
+  TestScene3,
+  TestScene1,
+  // TestScene2,
+];
+
+const currentSceneComponent = computed(() => scenes[currentSceneIndex.value]);
+const focusBlockName = computed(() => `FreeMoveScene-${currentSceneIndex.value}`);
+
+const onKeyDown = (ev) => {
+  // 10001 为菜单键：循环切换场景
+  if (ev.keyCode === 10001 || ev.key === '1') {
+    currentSceneIndex.value = (currentSceneIndex.value + 1) % scenes.length;
+    return true;
   }
-};
-// ******* 直接跳转位置 *******
-window.DebugResetPos = (x, y) => {
-  actorControl.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.action().teleportTo(x, y),
-  ]);
-
-  actorControl2.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.action().teleportTo(x, y + 50),
-  ]);
-};
-
-window.DebugResetOffsetPos = (x, y) => {
-  actorControl.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.action().teleportOffset(x, y),
-  ]);
-
-  actorControl2.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.action().teleportOffset(x, y),
-  ]);
-};
-
-// ******* 有参照物的刹车测试，仅X轴移动 *******
-window.DebugBrakeToPosX = () => {
-  // 参照物
-  actorControl.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.action().teleportTo(400, 50),
-  ]);
-  // 运动体
-  actorControl2.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.state().setStartPos(0, 200),
-    cmds.action().moveTo(300, undefined, 10, undefined),
-    cmds
-      .condition()
-      .reachPosition(200, undefined)
-      .then([
-        cmds.action(1).brakeToPosition(
-          400,
-          undefined,
-          (a, b, c, d) => {
-            console.log(
-              `LudlDebugCB DebugBrakeToPos enter a=${a} b=${b} c=${c} d=${d}`
-            );
-          },
-          () => {
-            console.log("LudlDebugCB DebugBrakeToPos onRejected");
-          }
-        ),
-      ]),
-  ]);
-};
-
-// ******* 有参照物的刹车测试，XY都移动 *******
-window.DebugBrakeToPosXY = () => {
-  // 参照物
-  actorControl.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.action().teleportTo(400, 50),
-  ]);
-  // 运动体
-  actorControl2.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.state().setStartPos(800, 400),
-    cmds.action().moveTo(100, 50, 10, undefined),
-    cmds
-      .condition()
-      .reachPosition(400, undefined)
-      .then([
-        cmds.action(3).brakeToPosition(
-          100,
-          50,
-          (a, b, c, d) => {
-            console.log(
-              `LudlDebugCB DebugBrakeToPos enter a=${a} b=${b} c=${c} d=${d}`
-            );
-          },
-          () => {
-            console.log("LudlDebugCB DebugBrakeToPos onRejected");
-          }
-        ),
-      ]),
-  ]);
-};
-
-// ******* 定向移动 *******
-window.DebugMoveTarget = () => {
-  actorControl2.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.state().setStartPos(0, 400),
-    cmds.action().moveTo(300, undefined, 10, undefined),
-  ]);
+  return false;
 };
 
-// ******* 定向移动 + 回调监听 和 共享结束监听(OnNexusEvent) *******
-window.DebugTestMove = (x, y) => {
-  let actRef = {};
-  actorControl.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.state().setStartPos(160, 150),
-    cmds.action(0, 0, actRef).moveTo(x, y, 2, 2, (a, b, c, d) => {
-      console.log(
-        "LudlDebugCB DebugTestMove enter " +
-          " a=" +
-          a +
-          " b=" +
-          b +
-          " c=" +
-          c +
-          " d=" +
-          d
-      );
-    }),
-    cmds
-      .condition()
-      .onNexusEvent(actRef, actEvents.ActFinish)
-      .then([
-        () => {
-          console.log("on move finished");
-        },
-      ]),
-  ]);
+const onActionObj = {
+  onKeyDown,
 };
-
-window.DebugTestOffset = (control, startPos) => {
-  control.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.state().setStartPos(startPos, 150),
-    cmds.action().altSpeed(3, undefined, 0),
-    cmds
-      .condition(undefined, true)
-      .reachPosition(460, undefined)
-      .then([cmds.action(1, 0).teleportOffset(-300, undefined)]),
-  ]);
-};
-window.DebugTestThrowStart = () => {
-  // 参照物
-  actorControl2.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.action().teleportTo(400, 300),
-  ]);
-
-  actorControl.run((cmds) => [
-    cmds.state().clearAllConditions(),
-    cmds.state().setStartPos(100, 300),
-    cmds.action().setSpeed(2, undefined),
-    cmds.action(1).setSpdAndAccel(undefined, -20, undefined, 0.3, null, () => {
-      console.log("on pole");
-      // 在接触地板时停止
-      actorControl.run((cmds) => [
-        cmds
-          .condition(undefined, true)
-          .reachPosition(undefined, 300)
-          .then([cmds.action(3, 3).stopMoving()]),
-      ]);
-    }),
-  ]);
-};
-
-window.DebugTestThrow = () => {};
-
-watch(num, (n, o) => {
-  switch (n) {
-    case 1:
-      actorControl = actRef.value[0].control;
-      actorControl2 = actRef2.value[0].control;
-      window.DebugTestMove(200, 200);
-      break;
-    case 2:
-      actorControl = actRef.value[1].control;
-      actorControl2 = actRef2.value[1].control;
-      window.DebugTestOffset(actorControl, 160);
-      window.DebugTestOffset(actorControl2, 310);
-      break;
-    case 3:
-      actorControl = actRef.value[2].control;
-      actorControl2 = actRef2.value[2].control;
-      window.DebugMoveTarget();
-      break;
-    case 4:
-      actorControl = actRef.value[3].control;
-      actorControl2 = actRef2.value[3].control;
-      window.DebugBrakeToPosX();
-      break;
-    case 5:
-      actorControl = actRef.value[4].control;
-      actorControl2 = actRef2.value[4].control;
-      window.DebugTestThrowStart();
-      break;
-    case 6:
-      actorControl = actRef.value[5].control;
-      actorControl2 = actRef2.value[5].control;
-      window.DebugBrakeToPosXY();
-      break;
-    default:
-      break;
-  }
-});
-onMounted(() => {
-  actorControl = actRef.value[0].control;
-  actorControl2 = actRef2.value[0].control;
-  window.DebugControl = actorControl;
-  window.DebugTestMove(200, 200);
-});
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.bgStyle {
-  width: 1280;
-  height: 720;
-  background-color: #007788;
-}
-.box {
-  width: 150;
-  height: 150;
-  font-size: 30;
-  color: #000000;
-  background-color: #3fb524;
-}
-.tip {
-  width: 300;
-  height: 30;
-  line-height: 28;
-  font-size: 28;
-  left: 980;
-  top: 680;
-  text-align: center;
-  font-weight: bold;
-  color: #ffffff;
-}
-</style>