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

package/ABImageAlt/App.vue

@@ -0,0 +1,114 @@
+<script setup>
+/**
+ * @description: 图片交替展示示例
+ * 如本样例的item.vue所示, 使用 JsvPosterImage/JsvPosterDiv 组件, 设置 srcList 属性, 
+ * 将AB两个图作为非响应式数组输入到组件中, 即可实现AB都载入到内存，切换时不会闪
+ * 相比Preload进行预加载，此方案没有Preload的图永久在内存的问题，AB两图会根据显隐的控制在不显示时自动**同时**清理出内存
+ */
+import { MetroWidget, VERTICAL, useFocusHub, JsvTextureStoreApi } from "jsview";
+import Item from "./Item.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();
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    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) {
+    // 返回处理, 测试跨路由截图功能
+    JsvTextureStoreApi.capture2Texture(
+      rToCaputureNode.value,
+      (textureName, autoRecycle, w, h) => {
+        console.log("test ImageCapture done");
+        rCaptureImage.value = textureName;
+        router.go(-1);
+      },
+      false // 不自动回收
+    );
+  }
+  return true;
+};
+
+const provideData = () => {
+  return data;
+};
+
+onMounted(() => {
+  focusHub.setFocus("myFocusWidget");
+});
+</script>
+
+<template>
+  <div
+    ref="rToCaputureNode"
+    :style="{
+      width: 1280,
+      height: 720,
+    }"
+  >
+    <jsv-focus-block
+      :style="{
+        width: 1920,
+        height: 1080,
+        backgroundColor: '#007788',
+      }"
+      :onKeyDown="onKeyDown"
+      :onDispatchKeyDown="onDispatchKeyDown"
+    >
+      <metro-widget
+        name="myFocusWidget"
+        :top="50"
+        :left="50"
+        :width="1000"
+        :height="550"
+        :direction="VERTICAL"
+        :provideData="provideData"
+        :measures="measures"
+        :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
+        :enableItemRenderBreak="true"
+        :placeHolderSetting="{
+          backgroundColor: 'rgba(78,105,127, 0.8)',
+          focusBackgroundColor: '#770088aa',
+          borderRadius: 10,
+          gap: 10,
+          logoUrl: logo,
+          logoWidth: 120,
+          logoHeight: 98,
+        }"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <item
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+          />
+        </template>
+      </metro-widget>
+    </jsv-focus-block>
+  </div>
+</template>

package/ABImageAlt/Item.vue

@@ -0,0 +1,133 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:19:42
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, computed, watchEffect } from "vue";
+import { JsvPosterImage, JsvPosterDiv } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+
+let focused = ref(false);
+let borderSet = ref("10");
+let doFadeIn = ref(true);
+
+// const altSrcs = [props.data.url, props.data.focusUrl];
+const altSrcs = [props.data.focusUrl, props.data.url];
+
+const onFocus = () => {
+  focused.value = true;
+  borderSet.value = "10 0 10 0";
+  doFadeIn.value = false;
+};
+
+const onBlur = () => {
+  focused.value = false;
+  borderSet.value = "10";
+};
+
+const onClicked = () => {
+  console.log(`item ${props.query.id} clicked`);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+
+const posterStyle = computed(() => {
+  // computed写法后，若borderSet不和focused绑定, 则不会重新触发style的设置, 相比template直接写style会减少响应式消耗
+  return {
+    width: props.data.width,
+    height: props.data.height,
+    borderRadius: borderSet.value,
+  }
+});
+
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.25s linear',
+      transform: focused ? 'scale3d(1.1, 1.1, 1)' : '',
+    }"
+  >
+    <div
+      v-if="focused"
+      :style="{
+        left: -10,
+        top: -10,
+        width: props.data.width + 20,
+        height: props.data.height + 20,
+        backgroundColor: '#770088',
+        borderRadius: 10,
+      }"
+    >
+    </div>
+    <div v-if="query.index % 2 == 0">
+      <jsv-poster-image
+        :style="posterStyle"
+        :altImages="altSrcs"
+        :altIndex="focused ? 1 : 0"
+        :altSync="query.index % 4 == 0 ? false : true"
+      >
+        <div
+          :style="{
+            width: data.width,
+            height: data.height,
+            backgroundColor: '#ff0000',
+            borderRadius: 10,
+          }"
+        />
+      </jsv-poster-image>
+      <div
+        :style="{
+          top:8,
+          left:8,
+          width: 40,
+          height: 30,
+          backgroundColor: '#007788',
+          fontSize: 20,
+        }"
+      >
+        {{ "img" }}
+      </div>
+    </div>
+    <div v-else>
+      <jsv-poster-div
+        :style="posterStyle"
+        :altImages="altSrcs"
+        :altIndex="focused ? 1 : 0"
+      >
+        <div
+          :style="{
+            width: data.width,
+            height: data.height,
+            backgroundColor: '#ff0000',
+            borderRadius: 10,
+          }"
+        />
+      </jsv-poster-div>
+      <div
+        :style="{
+          top:8,
+          left:8,
+          width: 40,
+          height: 30,
+          backgroundColor: '#007788',
+          fontSize: 20,
+        }"
+      >
+        {{ "div" }}
+      </div>
+    </div>
+  </div>
+</template>

package/{MetroWidgetDemos/SkeletonDiagram/assets/imageList.json → ABImageAlt/assets/imageList.js}

@@ -1,4 +1,9 @@
-[
+import webp from "../../assets/animated_webp.webp"
+import gif from "../../assets/girl_run.gif"
+import staticWebp from "../../assets/webpDemo.webp"
+
+
+export const imageList = [
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/089049108f2d1246ae9d6dc3d123dd44.jpeg",
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5c7acca00d79a4ddde978cf0a4e88d31.jpeg",
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c1fbeecb0d930c5aed173289b1cbe659.jpeg",
@@ -6,6 +11,9 @@
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5b1c19c766fce2c9df19f66519626e30.jpeg",
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c3e8959a45ac2a3723ee0908dae640df.jpeg",
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/1652a0867e68dd1ec679eb1c81df1188.jpeg",
+  webp,
+  gif,
+  staticWebp,
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/be821910e1a6180e.jpg",
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/dd4b1c7471613493.jpg",
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a06164b26590b994.jpg",

package/ABImageAlt/data.js

@@ -0,0 +1,17 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:21:46
+ * @Description: file content
+ */
+import { imageList } from "./assets/imageList.js"
+let data = [];
+for (let i = 0; i < Math.floor(imageList.length / 2); ++i) {
+  data.push({
+    width: 200,
+    height: 200,
+    url: imageList[i*2],
+    focusUrl: imageList[i*2+1],
+    index: i,
+  });
+}
+export default data;

package/AI_Check_Rules.txt

@@ -0,0 +1,5 @@
+1. 不读取那些顶层 demo 目录完全没对应任何一条路由的样例(路由中注释掉的样例也属于不包含), 路由文件位置:
+    DemoForOperator/routeList.js
+    DemoHomepage/router.js
+    MetroWidgetDemos/routeList.js
+

package/AnimPicture/App.vue

@@ -20,15 +20,16 @@ import {
 } from "jsview";
 import Item from "./Item.vue";
 
-import catRun from "./assets/animated_webp.webp";
-import girlRun from "./assets/girl_run.gif";
-import quan from "./assets/quan.webp";
-import ball from "./assets/ball_3.webp";
+import catRun from "../assets/animated_webp.webp";
+import girlRun from "../assets/girl_run.gif";
+import quan from "../assets/quan.webp";
+import ball from "../assets/ball_3.webp";
 
 const focusHub = useFocusHub();
 let catRunPlay = ref(false);
 let girlRunPlay = ref(false);
 let quanPlay = ref(false);
+let quanDoPlay = ref(false);
 let ballPlay = ref(false);
 
 const catRunCallback = {
@@ -49,9 +50,12 @@ const girlRunCallback = {
 };
 const quanCallback = {
   onStart: () => {
+    console.log("quanCallback.onStart");
     quanPlay.value = true;
   },
   onEnd: () => {
+    console.log("quanCallback.onEnd");
+    quanDoPlay.value = false;
     quanPlay.value = false;
   },
 };
@@ -68,6 +72,12 @@ let girlRunRef = ref(null);
 let quanRef = ref(null);
 let ballRef = ref(null);
 
+const doPlayQuan = () => {
+  quanDoPlay.value = true;
+  quanRef.value.play(LoopType.LOOP_FINITE, 1, ApicEndState.HIDE);
+  quanPlay.value = true;
+}
+
 let preClickIndex = -1;
 const data = [
   {
@@ -109,8 +119,7 @@ const data = [
           quanRef.value.stop();
           quanPlay.value = false;
         } else {
-          quanRef.value.play();
-          quanPlay.value = true;
+          doPlayQuan();
         }
       }
     },
@@ -208,8 +217,10 @@ const measures = (item) => {
 };
 
 onMounted(() => {
-  catRunRef.value.play();
+  catRunRef.value.play(); // 测试手动启动cat
+  doPlayQuan(); // 测试手动启动优惠券
   focusHub.setFocus("myWidget");
+  console.log("Ludl anim onMounted");
 });
 </script>
 
@@ -244,12 +255,11 @@ onMounted(() => {
     </div>
 
     <div :style="{ left: 540, top: 20 }">
-      <JsvApic
+      <JsvApic2
+        v-show="quanDoPlay"
         ref="quanRef"
         :src="`url(${quan})`"
         :style="{ width: 250, height: 296 }"
-        :autoPlay="true"
-        :loopType="LoopType.LOOP_DEFAULT"
         :onStart="quanCallback.onStart"
         :onEnd="quanCallback.onEnd"
       />

package/ApicSwitch/App.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <JsvPreload :preloadList="preloadList"></JsvPreload>
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      top: 10,
+      textAlign: 'center',
+      fontSize: 30,
+      color: '#ffffff',
+    }"
+  >
+    移动焦点不闪
+  </div>
+  <metro-widget
+    name="tablist"
+    :width="1920"
+    :height="95"
+    :provideData="tabData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :style="{
+      left: 137,
+      top: 63,
+    }"
+    :touchFlag="1"
+    :initFocusId="0"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <TabItem
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+      />
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import {
+  MetroWidget,
+  useFocusHub,
+  HORIZONTAL,
+  buildPreloadInfo,
+  JsvPreload,
+} from "jsview";
+import TabItem from "./TabItem.vue";
+import { onMounted } from "vue";
+import { data } from "./data";
+
+const focusHub = useFocusHub();
+const props = defineProps({
+  data: Array,
+});
+
+//预加载
+let preloadList = [];
+for (let i = 0; i < data.length; i++) {
+  const item = data[i];
+  preloadList.push(buildPreloadInfo(item.unFocusImage));
+}
+console.log(preloadList);
+
+//数据变形成需要的数据
+const tabData = () => {
+  return data;
+};
+const measures = (item) => {
+  return {
+    width: 115,
+    height: 95,
+    marginRight: 20,
+    enableTap: true,
+  };
+};
+
+onMounted(() => {
+  focusHub.setFocus("tablist");
+});
+</script>
+
+<style scoped></style>

package/ApicSwitch/TabItem.vue

@@ -0,0 +1,65 @@
+<template>
+  <JsvPreload
+    v-if="!rFocus"
+    :preloadList="rPreload_info"
+    :onPreloadDone="onPreloadDone"
+  ></JsvPreload>
+
+  <div
+    v-if="!rFocus || !webpPreloadingDone"
+    :style="{
+      width: 115,
+      height: 95,
+      borderRadius: 5,
+      backgroundImage: props.data.unFocusImage,
+    }"
+  ></div>
+  <div v-if="rFocus" :style="{ width: 115, height: 95 }">
+    <WebpShow :imgUrl="props.data.focusImage"></WebpShow>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, shallowRef, reactive, ref } from "vue";
+import { JsvPreload, buildPreloadInfo } from "jsview";
+import WebpShow from "./WebpShow.vue";
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  query: Object,
+  onEdge: Function,
+});
+
+const rPreload_info = [buildPreloadInfo(props.data.focusImage)];
+const webpPreloadingDone = ref(true);
+const onPreloadDone = () => {
+  webpPreloadingDone.value = true;
+};
+
+let rFocus = shallowRef(false);
+const cTabTimer = { id: -1 };
+const onFocus = () => {
+  rFocus.value = true;
+};
+// 监听onFocus事件
+props.onAction.register("onFocus", onFocus);
+const onBlur = () => {
+  rFocus.value = false;
+  webpPreloadingDone.value = false;
+};
+// 监听onBlur事件
+props.onAction.register("onBlur", onBlur);
+const onClick = () => {
+  console.log("onClick");
+};
+props.onAction.register("onClick", onClick);
+
+onBeforeUnmount(() => {
+  if (cTabTimer.id) {
+    clearTimeout(cTabTimer.id);
+    cTabTimer.id = -1;
+  }
+});
+</script>
+
+<style scoped></style>

package/ApicSwitch/WebpShow.vue

@@ -0,0 +1,24 @@
+<template>
+  <JsvApic2
+    ref="rImageRef"
+    :src="`url(${props.imgUrl})`"
+    :style="{ width: 115, height: 95 }"
+  />
+</template>
+
+<script setup>
+import { onMounted, shallowRef } from "vue";
+import { JsvApic2 } from "jsview";
+const props = defineProps({
+  imgUrl: String,
+});
+let rImageRef = shallowRef(null);
+
+onMounted(() => {
+  console.log("onMounted");
+  rImageRef.value.show(0);
+  rImageRef.value.play();
+});
+</script>
+
+<style lang="scss" scoped></style>

package/ApicSwitch/data.js

@@ -0,0 +1,50 @@
+export const data = [
+  {
+    name: "逻辑",
+    id: "310",
+    focusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/588f58ae8061dc022093b23c96e95fd2.webp",
+    unFocusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/f3f4465e85e620fc5876404aebafd535.png",
+  },
+  {
+    name: "观察",
+    id: "309",
+    focusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/a119f14c4411c2ebd04b3e77aa25bfc8.webp",
+    unFocusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/90dcf106034017307d1cbe1d075e59c4.png",
+  },
+  {
+    name: "常识",
+    id: "308",
+    focusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/0ac608408c1e1bd90a5afedc93d772fd.webp",
+    unFocusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/dfb674467e7e9156c0ad1f6e49684688.png",
+  },
+  {
+    name: "艺术",
+    id: "307",
+    focusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/bb0e8f720c6bc8a4393d2145e4ff7a56.webp",
+    unFocusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/9eef0e4ee11e00b262110017bbf0005c.png",
+  },
+  {
+    name: "运动",
+    id: "306",
+    focusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/56b4ee34821ecef14b3e393085c49d25.webp",
+    unFocusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/fc455e46d1e66a9ffdf5f3e43f9215c5.png",
+  },
+  {
+    name: "识字",
+    id: "305",
+    focusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/00503db39e3914d2d2b3da6b4bc45062.webp",
+    unFocusImage:
+      "https://oss.image.qcast.cn/homepage/20230918/a7207efea1f32953d2844180010f4018.png",
+  },
+];

package/Basic/AI_skills_update.md

@@ -0,0 +1 @@
+@shijiu/jsview-vue-samples/Basic 整理这里面的所有css用法，这个是jsview所能使用的css写法, 之外的写法都不支持, 归纳结果放到 jsview-best-practices 的skills中

package/Basic/components/div/ColorFormatTest.vue

@@ -0,0 +1,93 @@
+<script setup>
+// 6 种颜色格式测试，每行 3 个，共两行
+const itemStyle = {
+  width: 70,
+  height: 30,
+};
+const gap = 4;
+const rowHeight = itemStyle.height + gap;
+const colWidth = itemStyle.width + gap;
+</script>
+
+<template>
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{
+        top: 0,
+        left: 0,
+        width: itemStyle.width,
+        height: itemStyle.height,
+        backgroundColor: '#993366',
+        opacity: 0.5,
+      }"
+    >
+      #RRGGBB
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: 0,
+        left: colWidth,
+        width: itemStyle.width,
+        height: itemStyle.height,
+        backgroundColor: '#99336680',
+      }"
+    >
+      #RRGGBBAA
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: 0,
+        left: colWidth * 2,
+        width: itemStyle.width,
+        height: itemStyle.height,
+        whiteSpace: 'normal',
+        backgroundColor: 'rgba(153, 51, 102, 0.5)',
+      }"
+    >
+      rgba()
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: rowHeight,
+        left: 0,
+        width: itemStyle.width,
+        height: itemStyle.height,
+        backgroundColor: 'rgb(153, 51, 102)',
+      }"
+    >
+      rgb()
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: rowHeight,
+        left: colWidth,
+        width: itemStyle.width,
+        height: itemStyle.height,
+        backgroundColor: '#9368',
+      }"
+    >
+      #RGBA
+    </div>
+    <div
+      class="content-font"
+      :style="{
+        top: rowHeight,
+        left: colWidth * 2,
+        width: itemStyle.width,
+        height: itemStyle.height,
+        backgroundColor: '#936',
+      }"
+    >
+      #RGB
+    </div>
+  </div>
+</template>
+
+<style>
+@import "../FontStyle.css";
+</style>