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

package/DemoHomepage/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { shallowRef, onMounted, onUnmounted, provide } from "vue";
+import { shallowRef, onMounted, onUnmounted, provide, computed } from "vue";
 import {
   JsvPreload,
   buildPreloadInfo,
@@ -15,10 +15,12 @@ import {
   useFocusHub,
   JsvTouchModeSwitcher,
   JsvFullScrAdjust,
+  JsvScreenFlex
 } from "jsview";
 import { useRouter } from "vue-router";
 import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js";
 import { getSearchQuery } from "../CommonUtils/getSearchQuery.js";
+import WatchTest from "./watchTest.vue";
 
 let DemoResourceBase = shallowRef("");
 let backgroundImageUrl = shallowRef(null);
@@ -30,6 +32,8 @@ window.DebugFocusHub = useFocusHub();
 
 const router = useRouter();
 
+window.JsvCoreApi?.enableConsoleTag?.("SomeTags");
+
 // Android测试指令:
 // am start -n com.qcode.miniappsdktester/.JSVActivity --es MINIAPPNAME "JsViewDemo" --ei MINIAPPLAUNCHMODE 1 --es URL "http://192.168.2.179/js/main.jsv.mjs#/feature/HashParams?a=333&b=444" --es DEBUG "1"
 window.JsView?.addEventListener("onNewIntent", (msg) => {
@@ -52,6 +56,11 @@ let _onPreloadDone = () => {
   jJsvRuntimeBridge.notifyPageLoaded();
 };
 
+// 追加骨架图截图测试项目
+let rCaptureImage = shallowRef(null);
+provide("homeCaptureImage", rCaptureImage);
+
+
 const _OnKeyDown = (ev) => {
   // 结果默认传下来的返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
@@ -92,6 +101,52 @@ onMounted(() => {
   }, 1000);
 });
 
+let lastAValue = 0;
+let aValueWatchTest = computed  (() => {
+  if (testKeepAliveModeText.value % 3 == 0) {
+    lastAValue = testKeepAliveModeText.value;
+  }
+  return lastAValue;
+});
+let lastBValue = 0;
+let bValueWatchTest = computed(() => {
+  if (testKeepAliveModeText.value % 3 == 1) {
+    lastBValue = testKeepAliveModeText.value;
+  }
+  return lastBValue;
+});
+let lastCValue = 0;
+let cValueWatchTest = computed(() => {
+  if (testKeepAliveModeText.value % 3 == 2) {
+    lastCValue = testKeepAliveModeText.value;
+  }
+  return lastCValue;
+});
+
+// 当前屏幕尺寸（来自 JsvScreenFlex 的 onSized）
+let rScreenSize = shallowRef({ width: 0, height: 0 });
+const _onScreenSized = (width, height) => {
+  rScreenSize.value = {
+    width: Math.round(width ?? 0),
+    height: Math.round(height ?? 0),
+  };
+};
+
+const cScreenSizeText = computed(() => {
+  const w = rScreenSize.value?.width ?? 0;
+  const h = rScreenSize.value?.height ?? 0;
+  return `${w} x ${h}`;
+});
+
+const cScreenSizeStyle = computed(() => {
+  return {
+    height: 32,
+    lineHeight: 32,
+    color: "#FFF000",
+    fontSize: 28,
+  };
+});
+
 onUnmounted(() => {
   if (testKeepAliveTimer > 0) {
     console.log("remove homepage interval");
@@ -102,6 +157,9 @@ onUnmounted(() => {
 </script>
 
 <template>
+  <JsvScreenFlex
+    background="https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg"
+  />
   <JsvFullScrAdjust :childWidth="1280" :childHeight="720">
     <jsv-touch-mode-switcher
       ref="touchModeSwitcherRef"
@@ -120,6 +178,7 @@ onUnmounted(() => {
       <div class="TestKeepAliveDiv">
         {{ "更新页面计数:" + testKeepAliveModeText }}
       </div>
+      <!-- <WatchTest :aValue="aValueWatchTest" :bValue="bValueWatchTest" :cValue="cValueWatchTest" /> -->
       <jsv-focus-block
         :onAction="{
           onKeyDown: _OnKeyDown,
@@ -134,6 +193,20 @@ onUnmounted(() => {
       </jsv-focus-block>
     </jsv-touch-mode-switcher>
   </JsvFullScrAdjust>
+
+  <!-- 与 JsvFullScrAdjust 同级，后渲染覆盖在上层；用 flex 属性定位左下角 -->
+  <JsvScreenFlex
+    :onSized="_onScreenSized"
+    :style="{
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-start',
+    }"
+  >
+    <div :style="cScreenSizeStyle">
+      {{ cScreenSizeText }}
+    </div>
+  </JsvScreenFlex>
 </template>
 
 <style scoped>

package/DemoHomepage/components/BodyFrame.vue

@@ -66,7 +66,12 @@ watch(
     :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
     :onEdge="props.onEdge"
     :initFocusId="initFocusId"
+    :enableItemRenderBreak="true"
+    :placeHolderSetting="{
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+    }"
     :touchFlag="1"
+    :mouseFlag="1"
   >
     <template #renderItem="{ data, query, onEdge, onAction }">
       <Item

package/DemoHomepage/components/TabFrame.vue

@@ -46,7 +46,7 @@ const data = [
   {
     width: 200,
     height: 50,
-    name: "触控",
+    name: "触控/空鼠",
     focusable: true,
     id: 3,
   },