@shijiu/jsview-vue-samples 2.3.0 → 3.0.0-next-vue.0

package/DemoForOperator/ClickSpriteAnim/App.vue

@@ -0,0 +1,130 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
+import Item from "./Item.vue";
+import { onMounted, shallowRef } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const provideData = () => {
+  const data = [
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 0,
+    },
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 1,
+    },
+    {
+      width: 50,
+      height: 50,
+      marginRight: 10,
+      index: 2,
+      spriteSrc:
+        "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/ClickSpriteAnim/good.png",
+    },
+  ];
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  console.log(TAG, "onEdge", edgeInfo);
+};
+
+const onFocus = () => {
+  console.log(TAG, "onFocus");
+};
+
+const onBlur = () => {
+  console.log(TAG, "onBlur");
+};
+
+const onScroll = (start, range, totalSize) => {
+  console.log(TAG, "onScroll", start, range, totalSize);
+};
+
+const widgetLayout = {
+  left: (1280 - 180) / 2,
+  top: 100,
+  width: 180,
+  height: 300,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+
+const widgetRef = shallowRef(null);
+window.widgetRef = widgetRef;
+
+const show = shallowRef(false);
+setTimeout(() => {
+  show.value = true;
+}, 1000);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  />
+  <metro-widget
+    v-if="show"
+    ref="widgetRef"
+    name="mainMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+    :onScroll="onScroll"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      width: 1280,
+      height: 80,
+      lineHeight: 80,
+      backgroundColor: '#00000077',
+      fontSize: 30,
+      textAlign: 'center',
+      color: '#ffffff',
+    }"
+  >
+    第三项摁OK会有动画
+  </div>
+</template>

package/DemoForOperator/ClickSpriteAnim/Item.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+import Sprite from "../Sprite/Sprite.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const spriteController = shallowRef(null);
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  spriteController.value?.play();
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+const onAnimEnd = () => {
+  console.log("anim end");
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: focused ? '#22222299' : '#00000000',
+      borderRadius: Math.round(data.width / 2),
+    }"
+  ></div>
+  <Sprite
+    v-if="data.spriteSrc"
+    ref="spriteController"
+    :spriteSrc="data.spriteSrc"
+    :repeat="0"
+    :layout="{
+      width: data.width,
+      height: data.height,
+    }"
+    :onEnd="onAnimEnd"
+    :duration="1"
+    endFrame="end"
+    :autoStart="false"
+  ></Sprite>
+  <div
+    v-else
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: '#ffffff',
+      textAlign: 'center',
+      lineHeight: data.height,
+      backgroundColor: '#ffffff33',
+      borderRadius: Math.round(data.width / 2),
+    }"
+  >
+    {{ data.index }}
+  </div>
+</template>

package/DemoForOperator/DominantColor/App.vue

@@ -0,0 +1,187 @@
+<script setup>
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { JsvTextureStoreApi, JsvPreload, buildPreloadInfo } from "jsview";
+
+const Image1 =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+const Image2 =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";
+
+const vToCapture = shallowRef(null);
+const colorList1 = shallowRef([]);
+const colorList2 = shallowRef([]);
+const isPreloadDone = shallowRef(false);
+
+let cancelHandel1 = null;
+let cancelHandel2 = null;
+
+const preloadList = [buildPreloadInfo(Image1)];
+
+function handlePreloadDone() {
+  console.log("图片预加载完成");
+  isPreloadDone.value = true;
+  catpure();
+}
+
+function catpure() {
+  try {
+    cancelHandel1 = JsvTextureStoreApi.capture2Texture(
+      vToCapture.value,
+      (textureName, autoRecycle, w, h) => {
+        console.log("ccht captureBlurTexture", textureName, autoRecycle, w, h);
+        if (textureName) {
+          cancelHandel1 = JsvTextureStoreApi.getDominantColor(
+            `jsvtexturestore://${textureName}`,
+            (info) => {
+              console.log("ccht getDominantColor", info);
+              if (info.dominantColors) {
+                colorList1.value = info.dominantColors.map((color) => {
+                  return "#" + color;
+                });
+              }
+            }
+          );
+        }
+      },
+      true
+    );
+  } catch (error) {
+    console.error("captureTexture error", error, new Error().stack);
+  }
+}
+
+onMounted(() => {
+  cancelHandel2 = JsvTextureStoreApi.getDominantColor(Image2, (info) => {
+    console.log("ccht getDominantColor2", info);
+    if (info.dominantColors) {
+      colorList2.value = info.dominantColors.map((color) => {
+        return "#" + color;
+      });
+    }
+  });
+});
+
+onBeforeUnmount(() => {
+  cancelHandel1?.();
+  cancelHandel2?.();
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 0,
+      top: 0,
+      width: 1280,
+      height: 720,
+      backgroundColor: '#FFFFFF',
+    }"
+  ></div>
+  <jsv-preload
+    :preloadList="preloadList"
+    :onPreloadDone="handlePreloadDone"
+  ></jsv-preload>
+  <div
+    ref="vToCapture"
+    :style="{
+      left: 0,
+      top: 50,
+      width: 640, // 截屏区域的宽
+      height: 360, // 截屏区域的高
+    }"
+  >
+    <div
+      :style="{
+        width: 640,
+        height: 360,
+        backgroundImage: `url(${Image1})`,
+      }"
+    />
+    <div
+      :style="{
+        width: 300,
+        height: 300,
+        backgroundColor: '#007788',
+      }"
+    ></div>
+  </div>
+  <div
+    :style="{
+      left: 50,
+      top: 420,
+    }"
+    v-if="colorList1.length > 0"
+  >
+    <div
+      v-for="(color, index) in colorList1"
+      :style="{
+        left: 60 * index,
+        width: 50,
+        height: 50,
+        backgroundColor: color,
+      }"
+    ></div>
+    <div
+      :style="{
+        top: 50,
+        width: 480,
+        height: 40,
+        fontSize: 20,
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
+    >
+      截图取主色调
+    </div>
+  </div>
+
+  <div
+    :style="{
+      left: 640,
+      top: 50,
+      width: 640,
+      height: 360,
+      backgroundImage: `url(${Image2})`,
+    }"
+  />
+  <div
+    :style="{
+      top: 420,
+      left: 690,
+    }"
+    v-if="colorList2.length > 0"
+  >
+    <div
+      v-for="(color, index) in colorList2"
+      :style="{
+        left: 60 * index,
+        width: 50,
+        height: 50,
+        backgroundColor: color,
+      }"
+    ></div>
+    <div
+      :style="{
+        top: 50,
+        width: 480,
+        height: 40,
+        fontSize: 20,
+        textAlign: 'center',
+        lineHeight: '40px',
+      }"
+    >
+      图片取主色调
+    </div>
+  </div>
+</template>
+
+<style>
+@keyframes rotate {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/DemoForOperator/EpisodeList/EpisodeList/Controller.vue

@@ -53,9 +53,6 @@ const onEdge = (edgeInfo) => {
 };
 
 const onBlur = () => {
-  if (!firstLock) {
-    props.widgetHandler.widget.value?.setFocusId(targetFocus, false, false);
-  }
   firstLock = false;
 };
 

package/DemoForOperator/EpisodeList/EpisodeList/EpisodeList.vue

@@ -4,6 +4,16 @@
  * @Description: file content
 -->
 <script>
+/**
+ * @slot listItem - 渲染单个列表项
+ * @property {Object} data - 项数据
+ * @property {Function} onAction - 动作处理函数
+ * @property {Object} query - 查询参数
+ * 
+ * @slot groupItem - 渲染分页组项
+ * @property {Object} item - 分页组项数据
+ * @property {number} index - 分页组项索引
+ */
 let TOKEN = 0;
 </script>
 <script setup>
@@ -19,34 +29,95 @@ import Controller from "./Controller.vue";
 import { onMounted, ref } from "vue";
 
 const props = defineProps({
+  /**
+   * 组件名称标识
+   * @type {string}
+   * @required
+   */
   name: {
     type: String,
+    required: true,
   },
+
+  /**
+   * 列表布局配置
+   * @type {Object}
+   * @required
+   * @property {number} left - 列表左侧位置
+   * @property {number} top - 列表顶部位置
+   * @property {number} width - 列表宽度
+   * @property {number} height - 列表高度
+   */
   listLayout: {
     type: Object,
     required: true,
   },
+
+  /**
+   * 分页器布局配置
+   * @type {Object}
+   * @required
+   * @property {number} left - 分页器左侧位置
+   * @property {number} top - 分页器顶部位置
+   * @property {number} width - 分页器宽度
+   * @property {number} height - 分页器高度
+   */
   groupLayout: {
     type: Object,
     required: true,
   },
+
+  /**
+   * 每页显示项数
+   * @type {number}
+   * @default 10
+   */
   numPerPage: {
     type: Number,
     default: 10,
   },
-  /* (index: Number) => {width: Number, height: Number, marginRight?: Number, data: Object} */
+
+  /**
+   * 列表项测量函数
+   * @type {Function}
+   * @required
+   * @param {number} index - 当前项索引
+   * @returns {Object} 包含尺寸和数据的对象
+   * @returns {number} return.width - 项宽度
+   * @returns {number} return.height - 项高度
+   * @returns {number} [return.marginRight] - 右侧间距
+   * @returns {Object} return.data - 项数据
+   */
   listMeasures: {
     type: Function,
   },
+
+  /**
+   * 分页组测量函数
+   * @type {Function}
+   * @required
+   */
   groupMeasures: {
     type: Function,
   },
+
+  /**
+   * 总项数
+   * @type {number}
+   * @required
+   */
   totalNumber: {
     type: Number,
   },
+
+  /**
+   * 列表内边距配置
+   * @type {Object}
+   * @optional
+   */
   listPadding: {
     type: Object,
-  },
+  }
 });
 
 const controller = ref(null);
@@ -118,6 +189,9 @@ const onFocus = () => {
 
 onMounted(() => {});
 
+/**
+ * 处理组件获取焦点时的操作
+ */
 function componentOnFocus() {
   focusHub.setFocus(curFocusName);
 }

package/DemoForOperator/Firework1/App.vue

@@ -1,13 +1,13 @@
 <template>
   <div :style="{ width: 1280, height: 720, backgroundColor: '#00000055' }"></div>
-  <Fireworks :top="500" :left="600" :srcConfig="config" />
+  <Fireworks :top="500" :left="600" :srcConfig="config" :onShoot="onShoot" :onExplode="onExplode" />
 </template>
 
 <script setup>
 import Fireworks from "./Fireworks.vue";
 
 const config = {
-  group1_1: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/AnimPic/App/firework1/group1_1.png",
+  group1_1: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group1_1.png",
   group1_2: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group1_2.png",
   group2_1: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group2_1.png",
   group2_2: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group2_2.png",
@@ -22,4 +22,15 @@ const config = {
   //精灵图素材
   fireworkSpriteSrc: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/fireworks.png",
 };
+
+const onShoot = () => {
+  //可以加音效
+  console.log("onShoot");
+}
+
+const onExplode = () => {
+  //可以加音效
+  console.log("onExplode");
+}
+
 </script>

package/DemoForOperator/Firework1/Fireworks.vue

@@ -1,11 +1,4 @@
-<!--
- * 【模块 export 内容】
- * Fireworks：放烟花组件
- *      props说明:
- *          left          {Number}   烟花Left位置
- *          top           {Number}   烟花Top位置 
- * 
--->
+
 <template>
   <JsvPreload
     :preloadList="preload_info"
@@ -154,10 +147,62 @@ import {
 } from "jsview";
 import { _formatInfo } from "./SpriteDeal";
 import { shallowRef, onMounted, onBeforeUnmount, watch } from "vue";
+
+/**
+ * 组件属性定义
+ */
 const props = defineProps({
-  top: { type: Number, require: true },
-  left: { type: Number, require: true },
-  srcConfig: { type: Object, require: true },
+  /**
+   * 烟花中心顶部位置
+   * @type {Number}
+   * @required
+   * @default undefined
+   * @unit px
+   */
+  top: { 
+    type: Number, 
+    require: true 
+  },
+  
+  /**
+   * 烟花中心左侧位置
+   * @type {Number}
+   * @required
+   * @default undefined
+   * @unit px
+   */
+  left: { 
+    type: Number, 
+    require: true 
+  },
+  
+  /**
+   * 资源路径配置对象
+   * @type {Object}
+   * @required
+   * @property {String} group1_1 粒子效果组1-1图片路径
+   * @property {String} group1_2 粒子效果组1-2图片路径
+   * @property {String} group2_1 粒子效果组2-1图片路径
+   * @property {String} group2_2 粒子效果组2-2图片路径
+   * @property {String} group3_1 粒子效果组3-1图片路径
+   * @property {String} group3_2 粒子效果组3-2图片路径
+   * @property {String} group4_1 粒子效果组4-1图片路径
+   * @property {String} group4_2 粒子效果组4-2图片路径
+   * @property {String} group5_1 粒子效果组5-1图片路径
+   * @property {String} group5_2 粒子效果组5-2图片路径
+   * @property {String} ammo 弹药轨迹图片路径
+   * @property {String} fireworkSpriteSrc 烟花精灵图路径
+   */
+  srcConfig: { 
+    type: Object, 
+    require: true 
+  },
+  onShoot: {
+    type: Function,
+  },
+  onExplode: {
+    type: Function,
+  }
 });
 
 //火花图片素材
@@ -197,6 +242,7 @@ const spray = () => {
   timer.id2 = setTimeout(() => {
     let randomIndex = Math.floor(Math.random() * sprayArray.length);
     sprayArray[randomIndex].value = true;
+    onExplode()
     timer.id = setInterval(() => {
       let remainingItems = sprayArray.filter((item) => !item.value);
       if (remainingItems.length === 0) {
@@ -205,6 +251,7 @@ const spray = () => {
       } else {
         randomIndex = Math.floor(Math.random() * remainingItems.length);
         remainingItems[randomIndex].value = true;
+        onExplode();
       }
     }, 100);
   }, 500);
@@ -316,6 +363,14 @@ for (let i = 1; i <= 5; i++) {
   remainingGroups.splice(randomIndex, 1);
 }
 
+const onShoot = () => {
+  props.onShoot?.();
+}
+
+const onExplode = () => {
+  props.onExplode?.();
+}
+
 watch(readyNum, (n, o) => {
   if (o != 2 && n == 2) {
     myShow.value = true;
@@ -337,11 +392,13 @@ watch(readyNum, (n, o) => {
             cmds.action().stopMoving(),
             () => {
               isSpray.value = true;
+              onExplode();
               isShow.value = false;
               spray();
             },
           ]),
       ]);
+      onShoot();
     }, 0);
   }
 });