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

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

@@ -7,7 +7,7 @@
 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",

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,56 @@ 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 
+  }
 });
 
 //火花图片素材

package/DemoForOperator/FlipPage/FlipPage/FlipPage.vue

@@ -63,18 +63,39 @@ import {
 } from "jsview";
 
 const props = defineProps({
+  /**
+   * 布局配置对象（必填）
+   * @type {Object}
+   * @property {number} left - 组件左侧位置（单位：px）
+   * @property {number} top - 组件顶部位置（单位：px）
+   * @property {number} width - 组件宽度（单位：px）
+   * @property {number} height - 组件高度（单位：px）
+   */
   layout: {
     type: Object,
     required: true,
   },
+
+  /**
+   * 翻页动画持续时间（单位：秒）
+   * @type {number}
+   * @default 1
+   */
   duration: {
     type: Number,
     default: 1,
   },
+
+  /**
+   * 初始显示状态
+   * @type {boolean}
+   * @default true
+   * @description true表示初始显示内容，false表示初始隐藏内容
+   */
   initShow: {
     type: Boolean,
     default: true,
-  },
+  }
 });
 
 const showOrigin = shallowRef(props.initShow);
@@ -137,6 +158,13 @@ function capture() {
 }
 
 defineExpose({
+  /**
+   * 切换显示/隐藏状态
+   * @method
+   * @description 触发翻页动画切换：
+   * - 当前显示时调用会执行翻出动画
+   * - 当前隐藏时调用会执行翻入动画
+   */
   switch() {
     if (state == 0) {
       state = 1;

package/DemoForOperator/Focus/Alpha/AlphaFocusBox.vue

@@ -6,32 +6,57 @@
     :centerWidth="2"
     :imageDspWidth="sampleImageWidth"
     :borderOutset="borderWidth"
-    animation="breath 2s infinite"
+    :animation="anim"
   />
 </template>
 <script setup>
 import { JsvNinePatch, JsvTextureStoreApi } from "jsview";
-import { onBeforeUnmount } from "vue";
+import { onBeforeUnmount, computed } from "vue";
 
 const props = defineProps({
+  /**
+   * 焦点框颜色
+   * @type {string}
+   */
   color: {
     type: String,
   },
+  /**
+   * 布局样式对象
+   * @type {Object}
+   */
   layout: {
     type: Object,
   },
+  /**
+   * 边框宽度
+   * @type {number}
+   */
   borderWidth: {
     type: Number,
   },
+  /**
+   * 呼吸动画周期时长（单位：秒）
+   * @type {number}
+   */
   duration: {
     type: Number
   },
+  /**
+   * 圆角半径
+   * @type {number}
+   * @default 10
+   */
   borderRadius: {
     type: Number,
     default: 10,
   }
 });
 
+const anim = computed(() => {
+  return props.duration ? `breath ${props.duration}s infinite` : 'breath 2s infinite';
+});
+
 let canvasRef;
 let circleRadius = props.borderRadius;
 let sampleImageWidth = circleRadius * 2 + props.borderWidth + 2;

package/DemoForOperator/Focus/Light/LightFocusBox.vue

@@ -15,30 +15,71 @@
 
 <script setup>
 import RotateFrame from "./utils/RotateFrame.vue";
+
 const props = defineProps({
+  /**
+   * 聚焦框使用的图片资源路径
+   * @type {String}
+   * @required
+   */
   src: {
     type: String,
     required: true,
   },
+
+  /**
+   * 布局位置和尺寸配置
+   * @type {Object}
+   * @property {number} left - 左侧定位（单位：像素）
+   * @property {number} top - 顶部定位（单位：像素）
+   * @property {number} width - 容器宽度（单位：像素）
+   * @property {number} height - 容器高度（单位：像素）
+   */
   layout: {
     type: Object,
   },
+
+  /**
+   * 边框线宽（单位：像素）
+   * @type {Number}
+   * @default 6
+   */
   borderWidth: {
     type: Number,
     default: 6,
   },
+
+  /**
+   * 边框圆角半径（单位：像素）
+   * @type {Number}
+   */
   borderRadius: {
     type: Number,
   },
+
+  /**
+   * 边框旋转一周所需时间（单位：秒）
+   * @type {Number}
+   */
   circleTime: {
-    //秒
     type: Number,
   },
+
+  /**
+   * 是否显示光晕效果
+   * @type {Boolean}
+   */
   withHalo: {
     type: Boolean,
   },
 });
 
+/**
+ * 纹理坐标最大视图尺寸配置
+ * @type {Object}
+ * @property {number} width - 最大视图宽度
+ * @property {number} height - 最大视图高度
+ */
 const texCoord = {
   width: 500,
   height: 500,

package/DemoForOperator/Focus/Normal/NormalFocusBox.vue

@@ -12,17 +12,25 @@
 import { JsvNinePatch, JsvTextureStoreApi } from "jsview";
 import { onBeforeUnmount } from "vue";
 
+/** 
+ * 定义组件属性
+ * @type {Props}
+ */
 const props = defineProps({
+  /** @type {String} 边框颜色 */
   color: {
     type: String,
   },
+  /** @type {Object} 布局样式配置 */
   layout: {
     type: Object
   },
+  /** @type {Number} 边框宽度（默认3像素） */
   borderWidth: {
     type: Number,
     default: 3,
   },
+  /** @type {Number} 圆角半径（默认0像素） */
   borderRadius: {
     type: Number,
     default: 0
@@ -47,6 +55,10 @@ canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
 customPath.stroke(circleLineWidth, props.color); // 以给定线宽绘制圆环
 const sourceId = canvasRef.commit(); // texture和div的textureStore绑定
 
+/**
+ * 组件卸载前的清理操作
+ * @listens onBeforeUnmount
+ */
 onBeforeUnmount(() => {
   JsvTextureStoreApi.deleteTexture(sourceId);
 });