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

package/MetroWidgetDemos/RenderAccelerate/Item.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 16:28:25
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+});
+
+const divRef = shallowRef(null);
+const focused = ref(false);
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+
+// 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
+      transition: 'transform 0.2s linear',
+    }"
+  >
+    <div
+      v-if="focused"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#FF0000',
+      }"
+    ></div>
+    <div
+      ref="divRef"
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/MetroWidgetDemos/RenderAccelerate/TabItem.vue

@@ -0,0 +1,100 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 14:52:53
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
+ * @Description: file content
+-->
+<script setup>
+import { ref, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+});
+
+const globalInfo = inject("globalInfo");
+
+const focused = ref(false);
+const active = ref(false);
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  globalInfo.tabId = props.query.id;
+  focused.value = true;
+  active.value = false;
+};
+const onBlur = () => {
+  focused.value = false;
+  active.value =
+    props.query.getCurrentFocusId().id === props.query.id ? true : false;
+};
+const onClick = () => {
+  console.log("tab item onclick ", props.data);
+};
+
+// 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
+      transition: 'transform 0.2s linear',
+    }"
+  >
+    <div
+      v-if="!focused && active"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#00FF00',
+        animation: 'breath 5s infinite',
+      }"
+    ></div>
+    <div
+      v-if="focused"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#FF0000',
+        animation: 'breath 5s infinite',
+      }"
+    ></div>
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes breath { 
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    transform: scale3d(1.2, 1.2, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+</style>

package/MetroWidgetDemos/RenderAccelerate/ViewSwiper.vue

@@ -0,0 +1,215 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:30:33
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-03-09 16:00:38
+ * @Description: file content
+-->
+<script>
+import AppPage from "./AppPage.vue";
+import { getKeyFramesGroup, useFocusHub } from "jsview";
+import { reactive } from "vue";
+
+export default {
+  components: {
+    AppPage,
+  },
+  props: {
+    name: {
+      type: String,
+    },
+    curIndex: {
+      type: Object,
+    },
+    pageData: {
+      type: Array,
+    },
+    onEdge: {
+      type: Function,
+    },
+    layout: {
+      type: Object,
+    },
+    duration: {
+      type: Number,
+      default: 0.3,
+    },
+  },
+  inject: ["globalInfo"],
+  provide() {
+    return {
+      animState: this.animState,
+    };
+  },
+  setup() {
+    let styleShell = getKeyFramesGroup();
+    let animState = reactive({
+      value: 0, //0: 不在动画， 在动画中
+    });
+    return {
+      refName0: "page0",
+      refName1: "page1",
+      styleShell,
+      animState,
+      focusHub: useFocusHub()
+    };
+  },
+  data() {
+    return {
+      curPage: 0,
+      page0Show: true,
+      page1Show: false,
+      page0Data: this.pageData[0],
+      page1Data: null,
+      page0Left: 0,
+      page1Left: 1280,
+      page0Anim: {
+        anim: "",
+        onend: null,
+      },
+      page1Anim: {
+        anim: "",
+        onend: null,
+      },
+    };
+  },
+  methods: {
+    $_appSwiper_onFocus() {
+      let curPageData = this.curPage === 0 ? this.page0Data : this.page1Data;
+      this.focusHub.setFocus(curPageData.name);
+    },
+    $_appSwiper_tabIdWatcher(newValue, oldValue) {
+      console.log("AppSwiper curIndex changed ", newValue, oldValue);
+      if (newValue != oldValue) {
+        let direction = newValue > oldValue ? "left" : "right";
+        if (this.curPage == 0) {
+          this.curPage = 1;
+          this.page1Data = this.pageData[newValue];
+          this.page1Show = true;
+          this.animState.value = 1;
+          this.page0Anim = {
+            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
+            onend: () => {
+              this.page0Show = false;
+              this.page0Data = null;
+              this.animState.value = 0;
+            },
+          };
+          this.page1Anim = {
+            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
+            onend: null,
+          };
+        } else {
+          this.curPage = 0;
+          this.page0Data = this.pageData[newValue];
+          this.page0Show = true;
+          this.animState.value = 1;
+          this.page0Anim = {
+            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
+            onend: null,
+          };
+          this.page1Anim = {
+            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
+            onend: () => {
+              this.page1Show = false;
+              this.page1Data = null;
+              this.animState.value = 0;
+            },
+          };
+        }
+      }
+    },
+    $_appSwiper_initAnimation() {
+      let leftSlideOutDefine = `@keyframes app-swiper-left-slide-out {
+        from {
+          transform: translate3d(0, 0, 0);
+        }
+        to {
+          transform: translate3d(${-this.layout.width}, 0, 0);
+        }
+      }`;
+      let leftSlideInDefine = `@keyframes app-swiper-left-slide-in {
+        from {
+          transform: translate3d(${this.layout.width}, 0, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+      let rightSlideOutDefine = `@keyframes app-swiper-right-slide-out {
+        from {
+          transform: translate3d(0, 0, 0);
+        }
+        to {
+          transform: translate3d(${this.layout.width}, 0, 0);
+        }
+      }`;
+      let rightSlideInDefine = `@keyframes app-swiper-right-slide-in {
+        from {
+          transform: translate3d(${-this.layout.width}, 0, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+      this.styleShell.insertRule(leftSlideOutDefine);
+      this.styleShell.insertRule(leftSlideInDefine);
+      this.styleShell.insertRule(rightSlideOutDefine);
+      this.styleShell.insertRule(rightSlideInDefine);
+    },
+    $_appSwiper_releaseAnimation() {
+      this.styleShell.removeRule("app-swiper-left-slide-out");
+      this.styleShell.removeRule("app-swiper-left-slide-in");
+      this.styleShell.removeRule("app-swiper-right-slide-out");
+      this.styleShell.removeRule("app-swiper-right-slide-in");
+    },
+  },
+  created() {
+    console.log("AppSwiper created", this.globalInfo);
+    this.$watch(() => this.globalInfo.tabId, this.$_appSwiper_tabIdWatcher);
+    this.$_appSwiper_initAnimation();
+  },
+  beforeUnmount() {
+    this.$_appSwiper_releaseAnimation();
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    ref="focusNode"
+    :onAction="{
+      onFocus: $_appSwiper_onFocus,
+    }"
+  >
+    <div
+      :style="{
+        animation: page0Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      @animationend="page0Anim.onend"
+    >
+      <app-page
+        v-if="page0Show"
+        :data="page0Data"
+        :name="page0Data.name"
+        :onEdge="onEdge"
+      ></app-page>
+    </div>
+    <div
+      :style="{
+        animation: page1Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      @animationend="page1Anim.onend"
+    >
+      <app-page
+        v-if="page1Show"
+        :data="page1Data"
+        :name="page1Data.name"
+        :onEdge="onEdge"
+      ></app-page>
+    </div>
+  </jsv-focus-block>
+</template>

package/MetroWidgetDemos/RenderAccelerate/WidgetItem.vue

@@ -0,0 +1,107 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 16:27:38
+ * @Description: file content
+-->
+
+<script setup>
+import { HORIZONTAL, MetroWidget, useFocusHub, METRO_WIDGET_CONST } from "jsview";
+import { shallowRef, inject } from "vue";
+import Item from "./Item.vue";
+import ContentItem from "./ContentItem.vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onItemEdge: Function,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+const mwRef = shallowRef(null);
+
+const measures = (item) => {
+  return item;
+};
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+let data3 = [];
+for (let i = 0; i < 10; i++) {
+  data3.push({
+    index: i,
+    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
+    prize: `${Math.floor(Math.random() * 200) +
+      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
+    savePrize: `${i}`,
+    soldTotal: `${Math.floor(Math.random() * 50000)}`,
+    pictUrl:
+      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/PerformanceTest/data/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+  });
+}
+
+const rRenderAcc = inject("rRenderAccConfig");
+
+const provideData = () => {
+  return data3;
+};
+const onFocus = (rect) => {
+  //获得焦点时需要做就近移动的处理, 因此需要通过setEnterFocusRect设置寻找最近焦点的区域
+  mwRef.value?.setEnterFocusRect(rect);
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  focusHub.returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <div>
+    <div
+      :style="{
+        width: 1100,
+        height: 20,
+        fontSize: 15,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ data.name }}
+    </div>
+    <!-- sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
+    <!-- onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
+    <metro-widget
+      ref="mwRef"
+      :top="20"
+      :name="data.name"
+      :provideData="provideData"
+      :width="data.width"
+      :height="data.height"
+      :direction="HORIZONTAL"
+      :padding="{
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 10,
+      }"
+      :measures="measures"
+      :onEdge="onItemEdge"
+      :sendFocusRectEvent="true"
+      :renderAcc="rRenderAcc"
+    >
+      <template #renderItem="{ data, query, onAction }">
+        <!-- <item :data="data" :query="query" :onAction="onAction" /> -->
+        <ContentItem :data="data" :query="query" :onAction="onAction" />
+      </template>
+    </metro-widget>
+  </div>
+</template>

package/MetroWidgetDemos/SkeletonDiagram/App.vue

@@ -1,13 +1,10 @@
 <script setup>
-import {
-  MetroWidget,
-  VERTICAL,
-  useFocusHub,
-} from "jsview";
+import { MetroWidget, VERTICAL, useFocusHub, JsvTextureStoreApi } from "jsview";
 import Item from "./Item.vue";
-import { onMounted } from "vue";
+import { onMounted, inject, shallowRef } from "vue";
 import { useRouter } from "vue-router";
 import data from "./data.js";
+import logo from "../../assets/logo.png";
 
 const router = useRouter();
 const focusHub = useFocusHub();
@@ -18,12 +15,34 @@ const measures = (item) => {
     height: item.height,
     marginRight: 10,
     marginBottom: 10,
+    placeHolderLayout: {
+      width: item.width,
+      height: item.height,
+      logoWidth: item.index % 2 == 0 ? 120 : 60,
+      logoHeight: item.index % 2 == 0 ? 98 : 49,
+    },
   };
 };
 
+let rCaptureImage = inject("homeCaptureImage");
+let rToCaputureNode = shallowRef(null);
+
+const onDispatchKeyDown = (ev) => {
+  return false;
+};
+
 const onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1);
+    // 返回处理, 测试跨路由截图功能
+    JsvTextureStoreApi.capture2Texture(
+      rToCaputureNode.value,
+      (textureName, autoRecycle, w, h) => {
+        console.log("test ImageCapture done");
+        rCaptureImage.value = textureName;
+        router.go(-1);
+      },
+      false // 不自动回收
+    );
   }
   return true;
 };
@@ -38,14 +57,18 @@ onMounted(() => {
 </script>
 
 <template>
+  <div ref="rToCaputureNode" :style="{
+    width: 1280,
+    height: 720,
+  }">
   <jsv-focus-block
-    ref="focusNode"
     :style="{
       width: 1920,
       height: 1080,
       backgroundColor: '#007788',
     }"
     :onKeyDown="onKeyDown"
+    :onDispatchKeyDown="onDispatchKeyDown"
   >
     <metro-widget
       name="myFocusWidget"
@@ -63,6 +86,9 @@ onMounted(() => {
         focusBackgroundColor: '#770088aa',
         borderRadius: 10,
         gap: 10,
+        logoUrl: logo,
+        logoWidth: 120,
+        logoHeight: 98,
       }"
     >
       <template #renderItem="{ data, query, onEdge, onAction }">
@@ -75,4 +101,5 @@ onMounted(() => {
       </template>
     </metro-widget>
   </jsv-focus-block>
+  </div>
 </template>

package/MetroWidgetDemos/SkeletonDiagram/Item.vue

@@ -15,13 +15,18 @@ const props = defineProps({
 });
 
 let focused = ref(false);
+let borderSet = ref("10");
+let doFadeIn = ref(true);
 
 const onFocus = () => {
   focused.value = true;
+  borderSet.value = "10 0 10 0";
+  doFadeIn.value = false;
 };
 
 const onBlur = () => {
   focused.value = false;
+  borderSet.value = "10";
 };
 
 const onClicked = () => {
@@ -59,7 +64,7 @@ props.onAction.register("onClick", onClicked);
         :style="{
           width: data.width,
           height: data.height,
-          borderRadius: 10,
+          borderRadius: borderSet,
         }"
         :src="data.url"
       >
@@ -74,6 +79,8 @@ props.onAction.register("onClick", onClicked);
       </jsv-poster-image>
       <div
         :style="{
+          top:8,
+          left:8,
           width: 40,
           height: 30,
           backgroundColor: '#007788',
@@ -89,7 +96,7 @@ props.onAction.register("onClick", onClicked);
           width: data.width,
           height: data.height,
           backgroundImage: `url(${data.url})`,
-          borderRadius: 10,
+          borderRadius: borderSet,
         }"
       >
         <div
@@ -103,6 +110,8 @@ props.onAction.register("onClick", onClicked);
       </jsv-poster-div>
       <div
         :style="{
+          top:8,
+          left:8,
           width: 40,
           height: 30,
           backgroundColor: '#007788',