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

package/DemoForOperator/FrameShadow/App.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#FFF0F0' }" />
+    <div :style="{ left: 100, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth"
+        :height="vTargetRectHeight"
+        :borderRadius="vTargetRectRaidus"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+    <div :style="{ left: 450, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth1"
+        :height="vTargetRectHeight1"
+        :borderRadius="vTargetRectRaidus1"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth1,
+          height: vTargetRectHeight1,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus1,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth1,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus1}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+    <div :style="{ left: 800, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth2"
+        :height="vTargetRectHeight2"
+        :borderRadius="vTargetRectRaidus2"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth2,
+          height: vTargetRectHeight2,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus2,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth2,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus2}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 100, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth"
+        :height="vTargetRectHeight"
+        :borderRadius="vTargetRectRaidus"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 450, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth1"
+        :height="vTargetRectHeight1"
+        :borderRadius="vTargetRectRaidus1"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth1,
+          height: vTargetRectHeight1,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus1,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth1,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus1}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 800, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth2"
+        :height="vTargetRectHeight2"
+        :borderRadius="vTargetRectRaidus2"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth2,
+          height: vTargetRectHeight2,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus2,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth2,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus2}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { JsvFlexDiv } from "jsview";
+import FrameShadow from "./FrameShadow.vue";
+
+// 圆角为45的矩形样例
+const vTargetRectWidth = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus = 45; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+
+// 圆角为13的矩形样例
+const vTargetRectWidth1 = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight1 = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus1 = 13; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+
+// 最小圆角尺寸样例，在此框架下不能低于4
+const vTargetRectWidth2 = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight2 = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus2 = 4; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+</script>

package/DemoForOperator/FrameShadow/FrameShadow.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <JsvNinePatch
+      :style="{
+        width: props.width,
+        height: props.height,
+      }"
+      :imageUrl="vImageUrl"
+      :imageWidth="vImageWidth"
+      :centerWidth="cCenterWidth"
+      :imageDspWidth="vImageDspWidth"
+      :borderOutset="vBorderOutset"
+    />
+  </div>
+</template>
+
+<script setup>
+import { JsvNinePatch } from "jsview";
+
+// 接收宽高作为props
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  borderRadius: {
+    type: Number,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: "surround",
+  },
+});
+
+// 图片资源映射
+const cImageMaps = {
+  surround:
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources-2/DemoForOperator/FrameShadow/FrameShadow.png",
+  down: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources-2/DemoForOperator/FrameShadow/FrameShadow-down.png",
+};
+const vImageUrl = cImageMaps[props.type];
+if (vImageUrl === undefined) {
+  vImageUrl = cImageMaps["surround"];
+}
+
+// 图片固定属性
+const cInnerRadius2 = 92; // 原始图片的内直径(也是右边图矩形的边长值)
+const cCenterWidth = 2; // 图片的中心repeat宽度
+const cInnerRadius = (cInnerRadius2 - cCenterWidth) / 2; // 原始图片圆角半径
+const cSampleImageWidth = 200; // 原始图形的画布尺寸，画布为正方形
+
+// 计算后的对应NinePatch参数
+let vBorderOutset = (cSampleImageWidth - cInnerRadius2) / 2; // 设置值为图片长度减去内直径除以2
+let vImageWidth = cSampleImageWidth; // 原图尺寸设置
+let vImageDspWidth = (props.borderRadius / cInnerRadius) * cSampleImageWidth; // 显示图尺寸，当想复用目标图片，但是半径又不想等时才和原图不一样
+</script>

package/DemoForOperator/FullscreenIn/App.vue

@@ -100,6 +100,6 @@ onMounted(() => {
     v-if="fullScreenVisibility"
     :src="imageUrl"
     :width="1280"
-    :duration="800"
+    :duration="0.8"
   ></fullscreen-poster>
 </template>

package/DemoForOperator/FullscreenIn/FullscreenPoster.vue

@@ -10,24 +10,39 @@
 
 <script setup>
 const props = defineProps({
+  /**
+   * 图片资源地址
+   * @type {String}
+   * @required
+   */
   src: {
     type: String,
     required: true,
   },
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {Number}
+   * @default 0.8
+   */
   duration: {
     type: Number,
-    default: 800,
+    default: 0.8,
   },
+  /**
+   * 图片显示宽度（单位：像素）
+   * @type {Number}
+   * @required
+   */
   width: {
     type: Number,
     required: true,
   },
 });
 
-const animStr = `fade-in ${props.duration / 1000}s`;
+const animStr = `fade-in ${props.duration}s`;
 </script>
 
-<style scopped>
+<style scoped>
 @keyframes fade-in {
   from {
     opacity: 0;

package/DemoForOperator/Genie/geniePakcer/Genie.vue

@@ -1,22 +1,4 @@
 <script setup>
-/**
- * @file  Genie组件说明
- *   Genie：收缩或者放出效果的组件
- *       props说明:
- *           @prop {Number} width     (必填)    组件的基础宽度
- *           @prop {Number} height    (必填)    组件的基础高度
- *           @prop {Number} top       (非必填)   组件的基础top
- *           @prop {Number} left      (非必填)   组件的基础left
- *           @prop {Number} time      (非必填)   组件的动画时长
- *           @prop {Object} position  (必填)    组件收缩点的坐标
- *           @prop {String} direction (必填)    组件动画方向
- *           @prop {Function} animationEnd (非必填)    组件做完一次动画后的回调
- *            @prop {Boolean}  initShow   (必填)    组件初始状态
- *       methods:
- *           @method switcher 暴露出去的方法 交替组件内部显示情况
- *
- */
-
 import genieLeft from "./genieLeft.glsl?raw";
 import genieRight from "./genieRight.glsl?raw";
 import genieBottom from "./genieBottom.glsl?raw";
@@ -35,15 +17,71 @@ import {
   JsvTextureStoreApi,
 } from "jsview";
 const props = defineProps({
+  /** 
+   * 组件宽度（必填）
+   * @type {Number} 
+   */
   width: { type: Number, require: true },
+  
+  /** 
+   * 组件高度（必填）
+   * @type {Number} 
+   */
   height: { type: Number, require: true },
+  
+  /** 
+   * 左侧定位位置
+   * @type {Number}
+   * @default 0
+   */
   left: { type: Number, default: 0 },
+  
+  /** 
+   * 顶部定位位置
+   * @type {Number}
+   * @default 0
+   */
   top: { type: Number, default: 0 },
+  
+  /** 
+   * 动画持续时间（秒）
+   * @type {Number}
+   * @default 2
+   */
   time: { type: Number, default: 2 },
+  
+  /** 
+   * 动画中心点坐标（必填）
+   * @type {Object} 
+   * @property {Number} x - X轴坐标
+   * @property {Number} y - Y轴坐标
+   */
   position: { type: Object, require: true },
+  
+  /** 
+   * 缩放比例
+   * @type {Number}
+   * @default 1
+   */
   size: { type: Number, default: 1 },
+  
+  /** 
+   * 动画方向（必填）
+   * @type {'horizontal'|'vertical'}
+   */
   direction: { type: String, require: true },
+  
+  /** 
+   * 动画结束回调函数
+   * @type {Function}
+   * @default () => {}
+   */
   onAnimEnd: { type: Function, default: () => {} },
+  
+  /** 
+   * 初始显示状态（必填）
+   * @type {Boolean}
+   */
   initShow: { type: Boolean, require: true },
 });
 
@@ -633,6 +671,10 @@ onBeforeUnmount(() => {
 });
 
 defineExpose({
+  /**
+   * 触发精灵动画切换
+   * 执行截屏并启动收缩/展开动画
+   */
   switcher,
 });
 </script>

package/DemoForOperator/GrayFilter/GrayFilter.vue

@@ -9,18 +9,38 @@ import { JsvFilterView } from "jsview";
 import { shallowRef, watchEffect } from "vue";
 
 const props = defineProps({
+  /**
+   * 控制是否开启灰色滤镜
+   * @type {Boolean}
+   */
   open: {
     type: Boolean,
   },
+  /**
+   * 组件宽度
+   * @type {Number}
+   */
   width: {
     type: Number,
   },
+  /**
+   * 组件高度
+   * @type {Number}
+   */
   height: {
     type: Number,
   },
+  /**
+   * 距离左侧的位置
+   * @type {Number}
+   */
   left: {
     type: Number,
   },
+  /**
+   * 距离顶部的位置
+   * @type {Number}
+   */
   top: {
     type: Number,
   }
@@ -28,6 +48,7 @@ const props = defineProps({
 
 const filterType = shallowRef(props.open ? "gray-down" : null);
 
+// 监听open属性变化更新滤镜类型
 watchEffect(() => {
   if (props.open) {
     filterType.value = "gray-down";

package/DemoForOperator/Jigsaw/JigsawFull.vue

@@ -39,22 +39,51 @@ import { shallowRef } from "vue";
 import { JsvMaskClipDiv, JsvPreload, buildPreloadInfo } from "jsview";
 
 const props = defineProps({
-  //每一片的配置, 格式 { pieces: [{file: "", left: 0, top: 0, width: 0, height: 0}]}
-  //注意, mask的图片资源和json在同目录下
+  /**
+   * 拼图遮罩配置文件的URL
+   * @type {String}
+   * @description 配置文件格式：{ pieces: [{file: "", left: 0, top: 0, width: 0, height: 0}] }
+   *              注意：mask的图片资源需要和json配置文件放在同目录下
+   */
   configUrl: {
     type: String,
   },
+  
+  /**
+   * 组件显示尺寸
+   * @type {Object}
+   * @property {number} width - 组件宽度
+   * @property {number} height - 组件高度
+   */
   size: {
     type: Object,
   },
-  //每一片的显示设置, 0表示不显示, 1表示显示
+  
+  /**
+   * 碎片显示控制数组
+   * @type {Array<number>}
+   * @description 数组元素值为0表示隐藏对应碎片，1表示显示对应碎片
+   *              数组索引对应maskConfig的索引
+   */
   displaySetting: {
     type: Array,
   },
-  //图片信息, 格式 { src: "", width: 0, height: 0 }
+  
+  /**
+   * 底图信息
+   * @type {Object}
+   * @property {string} src - 图片URL
+   * @property {number} width - 图片原始宽度
+   * @property {number} height - 图片原始高度
+   */
   imgInfo: {
     type: Object,
   },
+  
+  /**
+   * 描边效果图片URL
+   * @type {String}
+   */
   strokeSrc: {
     type: String,
   },
@@ -65,15 +94,27 @@ const showComponent = shallowRef(false);
 const preloadList = [];
 const maskConfig = [];
 
+/**
+ * 预加载完成回调
+ */
 function preloadDone() {
   showComponent.value = true;
 }
 
+/**
+ * 准备资源加载
+ * @description 执行流程：
+ * 1. 加载底图和描边图
+ * 2. 获取遮罩配置文件
+ * 3. 构建预加载列表
+ * 4. 显示预加载组件
+ */
 function prepareSrc() {
   preloadList.push(buildPreloadInfo(props.imgInfo.src));
   if (props.strokeSrc) {
     preloadList.push(buildPreloadInfo(props.strokeSrc));
   }
+  
   fetch(props.configUrl)
     .then((res) => res.json())
     .then((data) => {
@@ -96,5 +137,6 @@ function prepareSrc() {
       console.log("fetch mask config failed", err);
     });
 }
+
 prepareSrc();
 </script>

package/DemoForOperator/Jigsaw/JigsawSingle.vue

@@ -27,18 +27,50 @@
 import { shallowRef } from "vue";
 import { JsvMaskClipDiv, JsvPreload, buildPreloadInfo } from "jsview";
 
-//只显示一片的demo
+/**
+ * 拼图单一片组件
+ */
 const props = defineProps({
+  /** 
+   * @type {String} 拼图配置文件URL
+   * @description 拼图配置文件地址，格式为JSON对象包含pieces数组
+   * @example { 
+   *   pieces: [
+   *     {file: "piece1.png", left: 0, top: 0, width: 100, height: 100}
+   *   ]
+   * }
+   */
   configUrl: {
-    //每一片的配置, 格式 { pieces: [{file: "", left: 0, top: 0, width: 0, height: 0}]}
     type: String,
   },
+  
+  /** 
+   * @type {Number} 当前显示的拼图片索引
+   * @description 指定要显示的拼图片在pieces数组中的位置
+   * @example 0 表示显示第一个拼图片
+   */
   pieceIndex: {
     type: Number,
   },
+  
+  /** 
+   * @type {Object} 容器尺寸
+   * @description 包含width和height属性的对象，用于调整拼图片显示尺寸
+   * @example { width: 300, height: 200 }
+   */
   size: {
     type: Object,
   },
+  
+  /** 
+   * @type {Object} 图片信息
+   * @description 包含图片源和原始尺寸的对象
+   * @example { 
+   *   src: "image.jpg",
+   *   width: 1920,
+   *   height: 1080 
+   * }
+   */
   imgInfo: {
     type: Object,
   },

package/DemoForOperator/LongChatBox/App.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from "vue";
+import LongChat from "./LongChat.vue";
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#666',
+    }"
+  >
+    <div
+      :style="{
+        top: 50,
+        width: 1280,
+        height: 600,
+        overflow: 'hidden',
+      }"
+    >
+      <LongChat />
+    </div>
+    <div
+      :style="{
+        width: 1280,
+        height: 50,
+        backgroundColor: '#666',
+        fontSize: 30,
+        color: '#fff',
+      }"
+    >
+      按ok键开始生成, 按上下键滚动
+    </div>
+  </div>
+</template>