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

package/DemoHomepage/views/Homepage.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, shallowRef, onActivated, onDeactivated } from "vue";
-import { jJsvRuntimeBridge, EdgeDirection, useFocusHub } from "jsview";
+import { computed, shallowRef, onActivated, onDeactivated, inject, watchEffect } from "vue";
+import { jJsvRuntimeBridge, EdgeDirection, useFocusHub, JsvTextureStoreApi } from "jsview";
 import { useRouter } from "vue-router";
 import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
@@ -146,6 +146,7 @@ let onDialogAction = (msg) => {
 // keep-alive后 router 返回本页面时要激活一下focus
 let focusNameOfDeactive = null;
 onActivated(() => {
+  console.log("Homepage onActivated");
   if (focusNameOfDeactive) {
     focusHub.setFocus(focusNameOfDeactive);
     focusNameOfDeactive = null;
@@ -153,12 +154,49 @@ onActivated(() => {
 });
 
 onDeactivated(() => {
+  console.log("Homepage onDeactivated");
+
+  // 清理'骨架图'截图资源
+  removeCaputureImage();
+
   focusNameOfDeactive = focusHub.getDeactivedPageFocus();
 });
+
+
+// 追加骨架图截图测试项目
+let rCaptureImage = inject("homeCaptureImage");
+let vOriginCaptureImage = null;
+watchEffect(() => {
+  // 监听'骨架图'截图资源变化，并清理旧资源
+  if (vOriginCaptureImage != rCaptureImage.value) {
+    if (vOriginCaptureImage != null) {
+      JsvTextureStoreApi.deleteTexture(vOriginCaptureImage);
+    }
+    vOriginCaptureImage = rCaptureImage.value;
+    console.log("capture_image new value", vOriginCaptureImage);
+  }
+});
+function removeCaputureImage() {
+  if (rCaptureImage.value != null) {
+    JsvTextureStoreApi.deleteTexture(rCaptureImage.value);
+    rCaptureImage.value = null;
+    vOriginCaptureImage = null;
+  }
+}
+
 </script>
 
 <template>
   <div class="rootSize">
+    <!-- 测试keep-alive动画是否影响下个页面的项目 -->
+    <div :style="{ 
+      left: 10, 
+      top: 600, 
+      width: 100, 
+      height: 100, 
+      backgroundColor: 'rgba(128, 128, 0, 1)', 
+      animation: 'AnimRotate 5s linear infinite'}"/>
+
     <div class="address">
       {{ address }}
     </div>
@@ -168,6 +206,7 @@ onDeactivated(() => {
       }}
     </div>
 
+
     <jsv-focus-block
       autoFocus
       :onAction="{
@@ -199,6 +238,13 @@ onDeactivated(() => {
         />
       </div>
 
+      <div v-if="rCaptureImage" :style="{ 
+        left: 1280 - 320 - 10, 
+        top: 720 - 180 - 10, 
+        width: 320, 
+        height: 180, 
+        backgroundImage: `url(jsvtexturestore://${rCaptureImage})`}"/>
+
       <Dialog
         v-show="showExitDialog"
         :name="name + '/exitDialog'"
@@ -231,4 +277,16 @@ onDeactivated(() => {
   font-weight: bold;
   text-align: right;
 }
+
+@keyframes AnimRotate {
+  from {
+    transform: rotate3d(0, 0, 1, -360deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 0);
+    transform-origin: center center;
+  }
+}
+
 </style>

package/DemoHomepage/watchTest.vue

@@ -0,0 +1,50 @@
+
+
+<script setup>
+import { watch, watchEffect } from "vue";
+
+const props = defineProps({
+  aValue: {
+    type: Number,
+    required: false
+  },
+  bValue: {
+    type: Number,
+    required: false
+  },
+  cValue: {
+    type: Number,
+    required: false
+  }
+});
+
+watch(() => props.aValue, (newVal, oldVal) => {
+  console.log('WatchTest aValue changed:', oldVal, '->', newVal);
+});
+
+watch(() => props.bValue, (newVal, oldVal) => {
+  console.log('WatchTest bValue changed:', oldVal, '->', newVal);
+});
+
+watch(() => props.cValue, (newVal, oldVal) => {
+  console.log('WatchTest cValue changed:', oldVal, '->', newVal);
+});
+
+watch(() => [props.aValue, props.cValue], (newVal, oldVal) => {
+  console.log('WatchTest aValue and cValue changed:', oldVal, '->', newVal);
+});
+
+watchEffect(() => {
+  console.log('WatchTest watchEffect: aValue=', props.aValue, ', bValue=', props.bValue, ', cValue=', props.cValue);
+});
+
+watchEffect(() => {
+  console.log('WatchTest watchEffect（A): aValue=', props.aValue);
+});
+
+
+</script>
+
+<template>
+<div></div>
+</template>

package/DomRenderer/App.vue

@@ -0,0 +1,133 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="processKeyDown">
+    <!--
+      这是 JsvDomRenderer 的示例容器。
+      - 外层 div 提供可视窗口尺寸（width/height）和裁剪能力（overflow: hidden）。
+      - JsvDomRenderer 只负责渲染 html 内容本身。
+    -->
+    <div style="width: 800; height: 500; overflow: hidden; background-color: #00FF00;">
+      
+      <!--
+        JsvDomRenderer 用法（核心三项）
+        1) :html
+           - 当前要渲染的 html 字符串（这里用 demoHtml 计算值）。
+        2) :config
+           - 当前仅使用 latexEnabled 来控制是否启用 latex 渲染。
+        3) :style
+           - 传入渲染样式（宽度、字体、颜色、top 偏移等）。
+           - 本示例通过 style.top + 上下键实现“内容上下浏览”。
+      -->
+      <JsvDomRenderer
+        :html="demoHtml"
+        :config="{
+          latexEnabled: true,
+        }"
+        :style="rendererStyle"
+      />
+    </div>
+    <div style="position: absolute; left: 10; top: 600; color: #ff0000; font-size: 25; background-color: #ffffff;width: 400;height: 30;">
+        上下键浏览，左右键切换内容
+    </div>
+    
+  </jsv-focus-block>
+</template>
+
+<script setup>
+/*
+  本文件展示如何把 JsvDomRenderer 用在“多段 html 切换 + 键盘浏览”场景。
+  - 左右键：切换 demoHtmlList 中的 html
+  - 上下键：修改 rendererStyle.top，浏览超出可视窗口的内容
+*/
+import { computed, onMounted, shallowRef } from "vue";
+import {
+  jJsvRuntimeBridge,
+  globalLoadJsvLatexPlugin,
+  JsvDomRenderer
+} from "jsview";
+// import JsvDomRenderer from "./components/JsvDomRenderer";
+
+// 当 latexEnabled=true 时必须加载 JsvLatex 插件。
+globalLoadJsvLatexPlugin((status) => {
+  console.log("load JsvLatex plugin status", status);
+});
+
+const processKeyDown = (ev) => {
+
+  if (ev.keyCode === 37) {
+    return switchHtmlByKey(-1);
+  }
+
+  if (ev.keyCode === 39) {
+    return switchHtmlByKey(1);
+  }
+
+  if (ev.keyCode === 38) {
+    return moveTopByKey(topStep);
+  }
+
+  if (ev.keyCode === 40) {
+    return moveTopByKey(-topStep);
+  }
+};
+
+const contentWidth = 800;
+const topStep = 80;
+const topOffset = shallowRef(0);
+// JsvDomRenderer 的 style 推荐由 computed 统一生成，
+// 这样可以直接通过修改 topOffset 响应式地驱动内容位移。
+const rendererStyle = computed(() => ({
+  top: topOffset.value,
+  width: contentWidth,
+  backgroundColor: "#FFFFFF",
+  fontSize: 18,
+  color: "#000000",
+}));
+
+function switchHtmlByKey(delta) {
+  const nextIndex = currentHtmlIndex.value + delta;
+  if (nextIndex < 0 || nextIndex >= demoHtmlList.length) {
+    return false;
+  }
+  currentHtmlIndex.value = nextIndex;
+  // 切换 html 时重置 top，避免沿用上一页浏览位置。
+  topOffset.value = 0;
+  return true;
+}
+
+function moveTopByKey(delta) {
+  topOffset.value += delta;
+  return true;
+}
+
+const demoHtmlList = [
+  "如图，抛物线y=-x<sup>2</sup>+bx+c交x轴负半轴于点A，交X轴正半轴于点B，交y轴&nbsp;正半轴于点C，直线BC的解析式为y=kx+3（k≠0&nbsp;），∠ABC=45°<br>（1）求b、c的值；<br>（2）点P在第一象限的抛物线上，过点P分别作x轴、y轴的平行线，交直线BC于点M、N，设点P的横坐标为t，线段MN的长为d，求d与t之间的函数关系式（不要求写出自变量t的取值范围）；<br>（3）在（2）的条件下，点E为抛物线的顶点，连接EC、EP、AP，AP交y轴于点D，连接DM，若∠DMB=90°，求四边形CMPE的面积．<br>< img alt=\"菁优网\" src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D7F93C6EFC6BC8CCC7C520274D104AD08%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3AowpjAxGUXPJmIf_6sek8NTWY6Zg%3D\" style=\"vertical-align:middle\">",
+  "解：（1）在y=kx+3中，令x=0，则y=3，即C的坐标是（0，3），< img alt=\"菁优网\" src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D90F15D30F01E7A515B9558105A91F99B%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3A6enhzFncInPVf4gKPTomWBFwHVw%3D\" style=\"vertical-align:middle;FLOAT:right;\"><br>∵直角△OBC中，∠ABC=45°，<br>∴OB=OC=3，即B的坐标是（3，0）．<br>根据题意得：$\\left\\{\\begin{array}{l}{c=3}\\\\{-9+3b+c=0}\\end{array}\\right.$，<br>解得：$\\left\\{\\begin{array}{l}{c=3}\\\\{b=2}\\end{array}\\right.$；<br>（2）二次函数的解析式是y=-x<sup>2</sup>+2x+3，<br>设BC的解析式是y=mx+n，<br>则$\\left\\{\\begin{array}{l}{n=3}\\\\{3m+n=0}\\end{array}\\right.$，<br>解得$\\left\\{\\begin{array}{l}{m=-1}\\\\{n=3}\\end{array}\\right.$，<br>则直线BC的解析式是y=-x+3，△OBC是等腰直角三角形．<br>把x=t代入y=-x<sup>2</sup>+2x+3得y=-t<sup>2</sup>+2t+3，即P的纵坐标是-t<sup>2</sup>+2t+3，<br>把x=t代入y=-x+3，得y=-t+3，即Q的纵坐标是-t+3．<br>则PQ=（-t<sup>2</sup>+2t+3）-（-t+3）=-t<sup>2</sup>+3t，<br>则d=$\\sqrt{2}$PQ，即d=-$\\sqrt{2}$t<sup>2</sup>+3$\\sqrt{2}$t；<br>（3）延长PM交y轴于点H，延长PN交x轴于点K．<br>A的坐标是（-1，0），P的坐标是（t，-t<sup>2</sup>+2t+3），<br>∵在直角△PAK中，tan∠PAK=$\\frac{-{t}^{2}+2t+3}{t+1}$=3-t，<br>在直角△AOD中，∠DAO=$\\frac{OD}{OA}$=$\\frac{OD}{1}$，<br>∴3-t=$\\frac{OD}{1}$，< img alt=\"菁优网\" src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D90F15D30F01E7A515B9558105A91F99B%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3A6enhzFncInPVf4gKPTomWBFwHVw%3D\" style=\"vertical-align:middle;FLOAT:right;\"><br>∴OD=3-t，<br>∴CD=3-（3-t）=t．<br>∵△CMD是等腰直角三角形，<br>∴MH=$\\frac{1}{2}$CD=$\\frac{1}{2}$t．<br>∵PH=MH+PM，<br>∴t=$\\frac{1}{2}$t+（-t<sup>2</sup>+3t）．<br>∴t=$\\frac{5}{2}$或0（舍去）．<br>∴PM=-（$\\frac{5}{2}$）2+3×$\\frac{5}{2}$=$\\frac{5}{4}$，<br>PM=$\\frac{5}{4}$，CM=$\\frac{5\\sqrt{2}}{4}$，PK=$\\frac{7}{4}$．<br>∵二次函数的解析式是y=-x<sup>2</sup>+2x+3的顶点E的坐标是（1，4）．<br>∴点E到PM的距离是4-$\\frac{7}{4}$=$\\frac{9}{4}$，<br>过E作EQ⊥y轴于点Q，连接EM．<br>∵EQ=QC=1，<br>∴△EQC和△HMC都是等腰直角三角形，<br>∴EC=$\\sqrt{2}$，∠ECM=90°，<br>∴S<sub>四边形CMPE</sub>=S<sub>△ECM</sub>+S<sub>△EMP</sub>=$\\frac{1}{2}$×$\\sqrt{2}$×$\\frac{5\\sqrt{2}}{4}$+$\\frac{1}{2}$×$\\frac{5}{4}$×$\\frac{9}{4}$=$\\frac{85}{32}$．",
+  // "（1）在y=kx+3中，令x=0，即可求得C的纵坐标，然后根据△OBC是等腰直角三角形求得B的坐标，利用待定系数法求得b和c的值；<br>（2）首先求得直线BC的解析式，则可求得P和N的纵坐标，则PN的长即可求得，然后根据△PMN是等腰直角三角形即可表示出MN的长；<br>（3）延长PM交y轴于点H，延长PN交x轴于点K，过E作EQ⊥y轴于点Q，连接EM，在直角△OAD和直角△KAP中，利用三角函数即可列方程求得t的值，再根据S<sub>1</sub>=S<sub>2</sub>+S<sub>3</sub>求解．",
+  "如图，直线y=kx+k交x轴，y轴分别于A，C，直线BC过点C交x轴于B，OC=3OA，∠CBA=45°．<br>（1）求直线BC的解析式；<br>（2）动点P从A出发沿射线AB匀速运动，速度为2个单位/秒，连接CP，设△PBC的面积为S，点P的运动时间为t秒，求S与t之间的函数关系式，直接写出t的取值范围；<br>（3）在（2）的条件下，当点P在AB的延长线上运动时，过点O作OD⊥PC于D，交BC于点E，连接AE，当∠EAB=∠CPA时，在坐标轴上有点K，且KC=KP，求点K的坐标．<br>< img alt=\"菁优网\" src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D423CB10AB06D89B306490DE594506C90%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3ASxRpkN-J-B7W6bmh4lvAZbSyPfQ%3D\" style=\"vertical-align:middle\">",
+  "解：（1）在y=kx+k中，令y=0，则x=-1，即A的坐标是（-1，0）．<br>∵OC=3OA，<br>∴OC=3，即C的坐标是（0，3）．<br>∵∠CBA=45°，<br>∴∠OCB=∠CBA=45°，<br>∴OB=OC=3，则B的坐标是（3，0）．<br>设BC的解析式是y=kx+b，则$\\left\\{\\begin{array}{l}{3k+b=0}\\\\{b=3}\\end{array}\\right.$，<br>解得：$\\left\\{\\begin{array}{l}{k=-1}\\\\{b=3}\\end{array}\\right.$，<br>则BC的解析式是y=-x+3；<br/>（2）当0＜t≤2时，P在线段AB上，则BP=4-2t，<br>则S=$\\frac{1}{2}$（4-2t）×3=-3t+6；<br>当t＞2时，OP=2t-4，则S=$\\frac{1}{2}$×3（2t-4），即S=3t-6；<br/>（3）作EH⊥OC于H．EG⊥OB于G．<br/>∵OD⊥PC，<br>∴∠ODP=90°，<br>∴∠DOP+∠OPD=90°，<br>∵∠COD+∠DOP=90°，<br>∴∠COD=∠OPD，<br>∵∠EAB=∠CPO，<br>∴∠EAB=∠COE，<br>∵∠ABE=∠OCE=45°，<br>∴△AEB∽△OEC，<br>∴$\\frac{EG}{EH}$=$\\frac{AB}{OC}$=$\\frac{4}{3}$，<br>∵四边形EHOG是矩形，< img alt=\"菁优网\" src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D19E32FD814116769FB0AAD3BC9E18C2A%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3ASY873G8wX3_pGudgcTSLNWOONcc%3D\" style=\"vertical-align:middle\"><br>∴OH=EH<br>∴tan∠COE=$\\frac{HE}{OH}$=$\\frac{3}{4}$<br>∴tan∠CPO=$\\frac{OC}{OP}$=$\\frac{3}{4}$，<br>∵OC=3，<br>∴OP=4，<br>当点K在x轴上时，设K′C=K′P=m，<br>在Rt△OCK′中，则有m<sup>2</sup>=3<sup>2</sup>+（4-m）<sup>2</sup>，解得m=$\\frac{25}{8}$，<br>∴OK′=4-$\\frac{25}{8}$=$\\frac{7}{8}$，此时K′（$\\frac{7}{8}$，0）．<br>当点K在BC上时，点K在PC的垂直平分线上，此时K（0，-$\\frac{7}{6}$），<br>综上所述，满足条件的点K的坐标为（$\\frac{7}{8}$，0）或（0，-$\\frac{7}{6}$）．",
+  "（1）令y=0，即可求得A的坐标，根据OC=3OA即可求得C的坐标，再根据∠CBA=45°，即△BOC的等腰直角三角形，则B的坐标即可求得，然后利用待定系数法求得BC的解析式；<br>（2）分成P在AB和在AB的延长线上两种情况进行讨论，利用三角形面积公式即可求解；<br>（3）作EH⊥OC于H．EG⊥OB于G．利用相似三角形的性质，求出tan∠CPO的值，再求出OP的长即可解决问题．",
+  "< img alt=\"菁优网\" src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D3DACB8A58DAF373498B331632AB75264%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3AA8AdeuJRuo1W_WM76eDqaKsfrf4%3D\" style=\"vertical-align:middle;FLOAT:right\">如图，抛物线y=-x<sup>2</sup>+bx+c交x轴于点A，B，交y轴于点C，直线BC的解析式为y=kx+3，∠ABC=45°．<br>（1）求抛物线的解析式；<br>（2）点P在第一象限的抛物线上，过点P分别作x轴、y轴的平行线，交直线BC于点M，N，当线段MN的长度最大时，求点P的坐标．",
+  "解：（1）∵当x=0时，y=kx+3=3，<br>∴C（0，3），<br>∴OC=3，<br>∵∠ABC=45°，∠BOC=90°，<br>∴∠OCB=45°，<br>∴∠ABC=∠OCB，<br>∴OB=OC=3，<br>∴B（3，0），<br>将B点和C点代入抛物线y=-x<sup>2</sup>+bx+c得：$\\left\\{\\begin{array}{l}{-9+3b+c=0}\\\\{c=3}\\end{array}\\right.$，<br>解得：$\\left\\{\\begin{array}{l}{b=2}\\\\{c=3}\\end{array}\\right.$，<br>∴y=-x<sup>2</sup>+2x+3．<br>（2）∵PM，PN分别平行于x轴、y轴，<br>∴∠PMN=∠PNM=45°，<br>∴∠MPN=90°，<br>∴△PMN为等腰直角三角形<br>∴MN=$\\sqrt{2}$PN．<br>设x<sub>P</sub>=x<sub>N</sub>=m，<br>则${y}_{P}={-m}^{2}$+2m+3，<br>∵B（3，0），<br>∴3k+3=0，<br>∴k=-1，<br>∴y=-x+3，<br>∴y<sub>N</sub>=-m+3，<br>∴PN=-m<sup>2</sup>+2m+3-（-m+3）<br>=-m<sup>2</sup>+3m，<br>∴MN=$\\sqrt{2}PN$=$\\sqrt{2}$（-m<sup>2</sup>+3m）<br>=-${\\sqrt{2}（m-\\frac{3}{2}）}^{2}+\\frac{9\\sqrt{2}}{4}$，<br>∴当m=$\\frac{3}{2}$时，MN最大，最大值=$\\frac{9\\sqrt{2}}{4}$，<br>${∴y}_{P}={-（\\frac{3}{2}）}^{2}+2×\\frac{3}{2}+3=\\frac{15}{4}$，<br>∴P$（\\frac{3}{2}，\\frac{15}{4}）$．",
+  "（1）先求出点C（0，3），由45°得到：OC=OB=3，将B和C两点坐标代入二次函数解析式即可求出答案；<br>（2）先证明△MNP是等腰直角三角形，MN=$\\sqrt{2}$PN．设P的横坐标为m，根据两个函数的解析式用m的代数式表示出PN和MN，最后用配方法即可求出m=$\\frac{3}{2}$时，NM最大，从而得到点P的坐标．",
+  "连线题。<br><table class=\"composition2\">\r\n  <tbody>\r\n    <tr>\r\n      <td width=\"185\">（1）play&nbsp;volleyball</td>\r\n      <td>a.打篮球</td>\r\n    </tr>\r\n    <tr>\r\n      <td>（2）play&nbsp;table&nbsp;tennis</td>\r\n      <td>b.踢足球</td>\r\n    </tr>\r\n    <tr>\r\n      <td>（3）play&nbsp;badminton</td>\r\n      <td>c.打排球</td>\r\n    </tr>\r\n    <tr>\r\n      <td>（4）play&nbsp;basketball</td>\r\n      <td>d.打羽毛球</td>\r\n    </tr>\r\n    <tr>\r\n      <td>（5）play&nbsp;football</td>\r\n      <td>e.打乒乓球</td>\r\n    </tr>\r\n  </tbody>\r\n</table>",
+  "<p>【答案】<br>< img src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3DE93D72A347B373BBD056E027C7B94CD6%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3Au9NyyITEWQCVK2DHDtzSNjHztvM%3D\">< img src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D6005C4262C79C3FF19ED4F1686D3385F%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3ADWbIKgUlAjqgWWExr8eYipzbJhY%3D\">< img src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D0C4D0FAF4FD4B308B427433C3813319E%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3A7Q74vNjbitg2j2X2r2VzoAd41j8%3D\">< img src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D414330DA1C7D5A3FFB409B19F804C7AA%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3AtNdpWi0x1KXmnKyfO4bhuD07esA%3D\">< img src=\"https://api-learning.coocaa.com/image/proxy?url=http%3A%2F%2Fsouti-ims.sm.cn%2Fims%3Fkey%3D6FFC30AF2B96F882572FEC254F7F3693%26at%3Dsouti%26kt%3Dmd5%26tv%3D0_0%26sign%3Dyx%3ADd9Ym4dwmno37OxystU087q7GVw%3D\">play football&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打羽毛球<br>play table tennis&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打排球<br>play volleyball&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;踢足球&nbsp;&nbsp;&nbsp;<br>play badminton&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打篮球<br>play basketball&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打乒乓球</p >. <p></p > <p></p >",
+  "<p>【题文】连一连<br>play football打羽毛球<br>play table tennis打排球<br>play volleyball踢足球<br>play badminton打篮球<br>play basketball打乒乓球</p >. <p></p > <p></p >",
+  "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"> <p>当用毛皮摩擦过的橡胶棒靠近一个挂在绝缘细线上的小通草球时发现通草也向橡胶棒靠近，由此可判断( )</p ><ul class=\"topiclist\"> <li><input type=\"radio\" class=\"input_radio\" name=\"2519948\" index=\"A\" id=\"QR2519948_1\">A.通草球一定带正电</li> <li><input type=\"radio\" class=\"input_radio\" name=\"2519948\" index=\"B\" id=\"QR2519948_2\">B.通草球一定带负电</li> <li><input type=\"radio\" class=\"input_radio\" name=\"2519948\" index=\"C\" id=\"QR2519948_3\">C.通草球一定不带电</li> <li><input type=\"radio\" class=\"input_radio\" name=\"2519948\" index=\"D\" id=\"QR2519948_4\">D.以上判断都不对</li></ul>",
+];
+const currentHtmlIndex = shallowRef(0);
+// JsvDomRenderer 的 :html 绑定值，来自“当前索引 -> html 列表”的映射。
+const demoHtml = computed(() => demoHtmlList[currentHtmlIndex.value] ?? "");
+
+
+onMounted(() => {
+  /* apk到收到此调用后才会结束启动过程，去掉启动图(否则会显示加载超时的界面) */
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<style scoped>
+.logo-size {
+  width: 200;
+  height: 200;
+}
+</style>

package/FilterDemo/AnimatePic.vue

@@ -8,27 +8,56 @@ const item_url = DemoResourceBase
 </script>
 
 <template>
-  <div
-    className="blockStyle"
-    :style="{
-      backgroundColor: '#0000FF',
-      animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
-    }"
-  />
-  <img
-    className="blockStyle"
-    :style="{
-      objectFit: 'contain',
-      animation: 'opacityDemo_CompositeOpacity 3s infinite',
-    }"
-    :src="item_url"
-  />
+  <div :style="{
+    top:100,
+    left:0,
+    width: 600,
+    height: 80,
+    overflow: 'hidden',
+  }">
+    <div :style="{
+      // 坐标补偿
+      top:-50,
+    }">
+      <div
+        className="blockStyle"
+        :style="{
+          backgroundColor: '#0000FF',
+          animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
+        }"
+      />
+      <img
+        className="blockStyle"
+        :style="{
+          objectFit: 'contain',
+          animation: 'opacityDemo_CompositeOpacity 3s infinite',
+          }"
+          :src="item_url"
+        />
+
+      <div
+        className="blockStyle"
+        :style="{
+          left: 200,
+          backgroundColor: '#0000FF',
+          animation: 'opacityDemo_Ortho_CompositeNoOpacity 3s infinite',
+        }"
+      />
+      <img
+        className="blockStyle"
+        :style="{
+          left: 200,
+          objectFit: 'contain',
+          animation: 'opacityDemo_Ortho_CompositeOpacity 3s infinite',
+          }"
+          :src="item_url"
+        />
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .blockStyle {
-  top: 50;
-  left: 50;
   width: 150;
   height: 150;
 }
@@ -59,4 +88,21 @@ const item_url = DemoResourceBase
   to {
   }
 }
+
+@keyframes opacityDemo_Ortho_CompositeOpacity {
+  from {
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+
+@keyframes opacityDemo_Ortho_CompositeNoOpacity {
+  from {
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1);
+  }
+  to {
+  }
+}
 </style>

package/FilterDemo/App.vue

@@ -89,14 +89,14 @@ onMounted(() => {
 
       <jsv-filter-view
         :top="400"
-        :width="402"
-        :height="402"
+        :width="602"
+        :height="602"
         ref="filter2"
         :filterType="filterType.type"
       >
         <div
           :style="{
-            width: 300,
+            width: 600,
             height: 300,
             backgroundImage: `url(${webpSample})`,
           }"

package/FlexCellDemo/AI_skills_update.md

@@ -0,0 +1,4 @@
+读取 @shijiu/jsview-vue-samples/FlexCellDemo , JsvFlexDiv 是需要用flex属性的div的替代品(因为JsView的div或者img标签不支持flex相关的css属性)。将div 用到flex的场景，转为按照 @shijiu/jsview-vue-samples/FlexCellDemo 样例的写法归纳总结到 jsview-best-practices 这个skills中
+
+再追加一条限制: JsvFlexDiv 只支持对齐直接子元素进行flex排版, 并不支持递归到所有的子, 如果需要多层flex排版, 要想 @shijiu/jsview-vue-samples/FlexCellDemo 里面那样写成 JsvFlexDiv 嵌套
+

package/FlexCellDemo/TestFrame1.vue

@@ -62,20 +62,30 @@ const _onSizeTest1_2 = (width, height) => {
       <!-- 测试主轴尺寸未给的场景下的撑大处理, 复用父节点的width -->
       <jsv-flex-div
         :key="rRefreshId"
-        :style="{ flexWrap: 'wrap' }"
+        :style="{ flexWrap: 'wrap', backgroundColor: 'rgba(0,128,200,0.5)' }"
         :onSized="_onSizeTest1_2"
       >
+        <!-- 开头一个空节点，测试width,height都不设置的div -->
+        <div :style="{backgroundColor: '#FFFFFF' }" />
+
+        <!-- 变形节点, 内含0x0和undefined的场景 -->
+        <div :style="{ width: rMyWidth, height: rMyHeight, backgroundColor: '#0000FF' }" />
         <img :src="image5" :style="{ width: rMyWidth, height: rMyHeight }" />
+        
         <!-- <img :src="image5" :style="{ height: 0 }" /> -->
         <img :src="image2" :style="{ height: 45 }" />
         <div
           id="DivAnchor"
           :style="{ height: 60, width: 60, backgroundColor: '#FF0000' }"
         />
+        
+        <!-- 中插一个空节点，测试width,height都不设置的div -->
+        <div :style="{backgroundColor: '#FFFFFF' }" />
+
         <img :src="image1" :style="{ height: 45 }" />
         <img :src="image1" :style="{ height: 45 }" />
       </jsv-flex-div>
-      <img :src="image3" :style="{ height: 50 }" />
+      <div :style="{ backgroundImage:`url(${image3})` }" />
       <!-- <img :src="image4" :style="{ height: 50 }" /> -->
     </jsv-flex-div>
   </div>

package/FlexCellDemo/TestFrame2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { JsvFlexDiv } from "jsview";
+import { JsvFlexDiv, JsvQrcode } from "jsview";
 import image1 from "./images/1.png";
 import image2 from "./images/2.png";
 import image3 from "./images/3.png";
@@ -65,10 +65,19 @@ import image4 from "./images/4.jpg";
         flexDirection: 'column',
         alignSelf: 'stretch',
         alignItems: 'flex-start',
+        backgroundColor: '#0000FF',
       }"
     >
       <img :src="image1" :style="{ height: 50 }" />
       <img :src="image1" :style="{ height: 50 }" />
+      <jsv-qrcode
+        value="https://jsview.shijiu.com"
+        :size="30"
+        :fgColor="'#000000'"
+        :bgColor="'#ffffff'"
+        :level="'M'"
+        sync="async"
+      />
     </jsv-flex-div>
 
     <!-- 测试内容内嵌有子view -->