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

package/DemoForOperator/ChunLian/Couplets.vue

@@ -103,7 +103,17 @@ import {
   buildPreloadInfo,
 } from "jsview";
 import { shallowRef, onBeforeUnmount, watch } from "vue";
+
 const props = defineProps({
+  /**
+   * 春联图片资源配置对象
+   * @type {Object}
+   * @property {string} leftContent - 左侧春联图片URL
+   * @property {string} rightContent - 右侧春联图片URL
+   * @property {string} scrollSprite - 滚轴精灵图URL
+   * @property {string} scrollStatic - 静态滚轴图片URL
+   * @required
+   */
   sourceMap: {
     type: Object,
     require: true,
@@ -116,6 +126,14 @@ const props = defineProps({
       );
     },
   },
+
+  /**
+   * 春联尺寸配置
+   * @type {Object}
+   * @property {number} width - 春联宽度
+   * @property {number} height - 春联高度
+   * @required
+   */
   size: {
     type: Object,
     required: true,
@@ -123,6 +141,14 @@ const props = defineProps({
       return "width" in value && "height" in value;
     },
   },
+
+  /**
+   * 左侧春联位置配置
+   * @type {Object}
+   * @property {number} left - 左侧春联的水平位置
+   * @property {number} top - 左侧春联的垂直位置
+   * @required
+   */
   leftPosition: {
     type: Object,
     require: true,
@@ -130,6 +156,14 @@ const props = defineProps({
       return "left" in value && "top" in value;
     },
   },
+
+  /**
+   * 右侧春联位置配置
+   * @type {Object}
+   * @property {number} left - 右侧春联的水平位置
+   * @property {number} top - 右侧春联的垂直位置
+   * @required
+   */
   rightPosition: {
     type: Object,
     require: true,
@@ -137,7 +171,16 @@ const props = defineProps({
       return "left" in value && "top" in value;
     },
   },
-  duration: { type: Number, require: true },
+
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {Number}
+   * @required
+   */
+  duration: { 
+    type: Number, 
+    require: true 
+  }
 });
 const layouts = [{ ...props.leftPosition, isLeft: true }, props.rightPosition];
 let myShow = shallowRef(false);

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>