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

package/DemoForOperator/Stretch/Stretch/Stretch.vue

@@ -15,40 +15,90 @@ import Item from "./Item.vue";
 import { ref, provide, onMounted } from "vue";
 
 const props = defineProps({
+  /**
+   * 组件名称标识
+   * @type {string}
+   */
   name: {
     type: String,
     required: true,
   },
-  // { smallWidth: 0, largeWidth: 0, height: 0, marginRight: 10}
+  /**
+   * 元素尺寸配置对象
+   * @type {Object}
+   * @property {number} smallWidth - 小元素宽度
+   * @property {number} largeWidth - 大元素宽度
+   * @property {number} height - 元素高度
+   * @property {number} [marginRight=10] - 元素右侧间距
+   */
   itemSizeInfo: {
     type: Object,
     required: true,
   },
+  /**
+   * 数据源数组
+   * @type {Array<Object>}
+   */
   datas: {
     type: Array,
     required: true,
   },
+  /**
+   * 布局配置对象
+   * @type {Object}
+   * @property {number} width - 容器宽度
+   * @property {number} height - 容器高度
+   * @property {number} left - 左侧位置
+   * @property {number} top - 顶部位置
+   */
   layout: {
     type: Object,
     required: true,
   },
+  /**
+   * 初始大元素索引
+   * @type {number}
+   * @default 0
+   */
   initLargeIndex: {
     type: Number,
     default: 0,
   },
+  /**
+   * 获取焦点时的回调函数
+   * @type {Function}
+   */
   onFocus: {
     type: Function,
   },
+  /**
+   * 失去焦点时的回调函数
+   * @type {Function}
+   */
   onBlur: {
     type: Function,
   },
+  /**
+   * 到达边缘时的回调函数
+   * @type {Function}
+   * @param {Object} edgeInfo - 边缘信息对象
+   */
   onEdge: {
     type: Function,
   },
+  /**
+   * 元素点击事件回调
+   * @type {Function}
+   * @param {Object} itemData - 被点击元素的数据
+   */
   onItemClick: {
     type: Function,
   },
-  //动画时长, 单位秒
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {number}
+   * @default 0.2
+   */
   duration: {
     type: Number,
     default: 0.2,

package/DemoForOperator/Swiper/App.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-10 14:45:39
+ * @Description: file content
+-->
+
+<script setup>
+import { JsvSwiper2, useFocusHub, EdgeDirection } from "jsview";
+import { onMounted, ref } from "vue";
+import Item from "./Item.vue";
+
+const focusHub = useFocusHub();
+const imgSrcList = [
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228543_img_20230610184253.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228544_img_20230610184145.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228545_img_20230610184110.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228542_img_20230610184253.png",
+];
+let itemSize = {
+  width: 400,
+  height: 600,
+};
+let data = [];
+for (let i = 0; i < 10; i++) {
+  data.push({
+    width: itemSize.width,
+    height: itemSize.height,
+    index: i,
+    src: imgSrcList[i % imgSrcList.length],
+  });
+}
+
+const currentIndex = ref(0);
+const swiper1 = {
+  onChange: (currentId) => {
+    currentIndex.value = currentId;
+    console.log("swiper1: onChange", currentId);
+  },
+  onClick: (currentId) => {
+    console.log("swiper1: onClick", currentId);
+  },
+  onEdge: (info) => {},
+};
+
+onMounted(() => {
+  focusHub.setFocus("mySwiper1");
+});
+const duration = 600;
+</script>
+
+<template>
+  <div
+    :style="{ width: 1280, height: 720, backgroundColor: '#000000cc' }"
+  ></div>
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      fontSize: 30,
+      textAlign: 'center',
+      lineHeight: 100,
+      color: '#ffffff',
+    }"
+  >
+    左右键切换轮播图显示海报
+  </div>
+  <div :style="{ left: (1280 - 700) / 2, top: 100 }">
+    <jsv-swiper2
+      name="mySwiper1"
+      ref="mySwiper1"
+      :totalFrame="data.length"
+      :layoutInfo="{
+        width: 700,
+        height: 600,
+      }"
+      :itemSize="itemSize"
+      :animation="{
+        duration: duration,
+        easing: 'jsv-ease(0.4, 0.8, 1.2)',
+      }"
+      :autoplayInterval="1000"
+      :onChange="swiper1.onChange"
+      :onClick="swiper1.onClick"
+      :onEdge="swiper1.onEdge"
+      :itemGap="10"
+    >
+      <template #itemView="{ dataIndex, focused, distanceToCenter }">
+        <item
+          :data="data[dataIndex]"
+          :index="dataIndex"
+          :currentIndex="currentIndex"
+          :focused="focused"
+          :borderRadius="40"
+          :collapseWidth="140"
+          :duration="duration"
+          :distanceToCenter="distanceToCenter"
+        />
+      </template>
+    </jsv-swiper2>
+  </div>
+</template>

package/DemoForOperator/Swiper/Item.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: '#00ff00',
+      borderRadius: borderRadius,
+    }"
+  ></div>
+  <ParallaxSlide
+    ref="pandaAnim"
+    :imgUrl="data.src"
+    :width="data.width"
+    :height="data.height"
+    :collapseWidth="collapseWidth"
+    :duration="duration"
+    :borderRadius="borderRadius"
+    :initPosition="initPosition"
+    easing="jsv-ease(0.4, 0.8, 1.2)"
+  ></ParallaxSlide>
+</template>
+<script setup>
+import ParallaxSlide from "./ParallaxSlide.vue";
+import { shallowRef, watch } from "vue";
+const props = defineProps({
+  data: Object,
+  focused: Boolean,
+  duration: Number,
+  borderRadius: Number,
+  collapseWidth: Number,
+  currentIndex: Number,
+  index: Number,
+  distanceToCenter: Number,
+});
+const initPosition =
+  props.distanceToCenter === 0
+    ? "center"
+    : props.distanceToCenter > 0
+    ? "right"
+    : "left";
+
+const pandaAnim = shallowRef(null);
+
+watch(
+  () => props.distanceToCenter,
+  (newVal) => {
+    if (newVal === 0) {
+      pandaAnim.value.slide("center");
+    } else if (newVal == 1) {
+      pandaAnim.value.slide("right");
+    } else if (newVal == -1) {
+      pandaAnim.value.slide("left");
+    }
+  }
+);
+</script>

package/DemoForOperator/Swiper/ParallaxSlide.vue

@@ -0,0 +1,164 @@
+<template>
+  <jsv-preload
+    key="preload"
+    :preloadList="[preloadInfo]"
+    :onPreloadDone="handlePreloadDone"
+  ></jsv-preload>
+  <jsv-texture-anim
+    v-if="isPreloadDone"
+    ref="pandaAnim"
+    :src="props.imgUrl"
+    :width="props.width"
+    :height="props.height"
+    :animation="appliedAnim"
+    :duration="props.duration"
+    :transform="appliedTrans"
+    :borderRadius="props.borderRadius"
+    :autoStart="false"
+    :easing="props.easing"
+    :onAnimationEnd="onAnimEnd"
+  ></jsv-texture-anim>
+</template>
+
+<script setup>
+import { ref, shallowRef, computed } from "vue";
+import { JsvPreload, buildPreloadInfo } from "jsview";
+import { JsvTextureAnim } from "jsview";
+
+const props = defineProps({
+  imgUrl: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  collapseWidth: {
+    type: Number,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 200,
+  },
+  easing: {
+    type: String,
+    default: "linear",
+  },
+  borderRadius: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 初始位置
+   * @type {"left" | "right" | "center"}
+   */
+  initPosition: {
+    type: String,
+    default: "center",
+  },
+});
+
+const isPreloadDone = ref(false);
+const preloadInfo = buildPreloadInfo(props.imgUrl);
+
+const pandaAnim = shallowRef(null);
+
+const imageW = ref(0);
+const imageH = ref(0);
+const imageRatio = computed(() => imageW.value / imageH.value);
+
+const imageShowWidth = computed(() => props.height * imageRatio.value);
+const offset = computed(() => (imageShowWidth.value - props.width) / 2);
+
+const baseScale = computed(
+  () => `scale3d(${imageShowWidth.value / props.width}, 1, 1)`
+);
+// const baseScale = computed(
+//   () => `rotate3d(0,0,1,45deg)`
+// );
+
+const leftTranslate = computed(
+  () =>
+    `translate3d(${
+      ((props.width - props.collapseWidth - -offset.value) / props.width) * 100
+    }%, 0, 0) ${baseScale.value}`
+);
+const rightTranslate = computed(
+  () =>
+    `translate3d(${
+      ((-(imageShowWidth.value - props.collapseWidth) - -offset.value) /
+        props.width) *
+      100
+    }%, 0, 0) ${baseScale.value}`
+);
+const centerTranslate = computed(() => `translate3d(0,0,0) ${baseScale.value}`);
+const curPosition = ref(props.initPosition);
+
+const transform = computed(
+  () =>
+    (curPosition.value === "left"
+      ? leftTranslate.value
+      : curPosition.value === "right"
+      ? rightTranslate.value
+      : centerTranslate.value)
+);
+const appliedTrans = ref(null);
+const appliedAnim = ref(null);
+
+//TODO JsvPreload 的回调会执行多次，所以需要一个标志来判断是否已经执行过
+let loadDone = false;
+const handlePreloadDone = (resultMap) => {
+  if (loadDone) return;
+  loadDone = true;
+  console.log("ccht 图片预加载完成", resultMap);
+  imageW.value = resultMap[props.imgUrl].width;
+  imageH.value = resultMap[props.imgUrl].height;
+  appliedTrans.value = transform.value;
+  isPreloadDone.value = true;
+};
+
+let onAnimEnd = (normalEnd) => {
+  console.log("ccht 动画结束", transform.value);
+  if (normalEnd) {
+    appliedTrans.value = transform.value;
+  }
+  appliedAnim.value = null;
+};
+
+let translateMap = {
+  left: leftTranslate,
+  right: rightTranslate,
+  center: centerTranslate,
+};
+/**
+ * 滑动
+ * @param {"left" | "right" | "center"} to 结束位置
+ */
+function slide(to) {
+  if (
+    curPosition.value === to ||
+    (curPosition.value === "left" && to === "right") ||
+    (curPosition.value === "right" && to === "left")
+  ) {
+    console.warn(`滑动失败，当前位置：${curPosition.value}，目标位置：${to}`);
+    return;
+  }
+  appliedTrans.value = null;
+  appliedAnim.value = `{from {transform: ${
+    translateMap[curPosition.value].value
+  };} to {transform: ${translateMap[to].value};}}`;
+  console.log("ccht slide ", curPosition.value, to, appliedAnim.value);
+  curPosition.value = to;
+  pandaAnim.value?.start(appliedAnim.value);
+}
+
+defineExpose({
+  slide,
+});
+</script>

package/DemoForOperator/TabContent/TabContent/TabContent.vue

@@ -42,56 +42,79 @@
 </template>
 
 <script setup>
+/**
+ * @slot tabItem - 自定义标签项内容
+ * @property {Object} data - 当前标签项数据
+ * @property {Object} query - 查询参数对象
+ * @property {Function} onAction - 动作处理函数
+ * 
+ * @slot content - 自定义内容区域
+ * @property {Object} data - 内容区域数据
+ * @property {Function} onEdge - 边缘事件处理函数
+ */
+
 import TabWidget from "./TabWidget.vue";
 import ViewSwiper from "./ViewSwiper.vue";
 import { ref, reactive, provide } from "vue";
 import { useFocusHub, EdgeDirection } from "jsview";
 
 const props = defineProps({
+  /** @type {String} 组件唯一标识名称 */
   name: {
     type: String,
     required: true,
   },
+  /** @type {Array} 标签数据源 */
   data: {
     type: Array,
     required: true,
   },
+  /** @type {Object} 标签栏布局配置 */
   tabLayout: {
     type: Object,
     required: true,
   },
+  /** @type {Object} 标签栏内边距配置 */
   tabPadding: {
     type: Object,
     required: true,
   },
+  /** @type {Number} 标签项之间的间隔 */
   tagItemGap: {
     type: Number,
     required: true,
   },
+  /** @type {Object} 内容区域布局配置 */
   contentLayout: {
     type: Object,
     required: true,
   },
+  /** @type {Function} 内容区域数据加载器 */
   contentDataLoader: {
     type: Function,
     required: true,
   },
+  /** @type {Number} 初始聚焦项的ID，默认0 */
   initFocusId: {
     type: Number,
     default: 0,
   },
+  /** @type {Number} 标签文字字体大小，默认30px */
   tabTextFontSize: {
     type: Number,
     default: 30,
   },
+  /** @type {Function} 内容区域获取焦点时的回调 */
   contentOnFocus: {
     type: Function,
     default: () => {},
   },
+  /** @type {Function} 内容区域失去焦点时的回调 */
   contentOnBlur: {
     type: Function,
     default: () => {},
-  },  
+  },
+  /** @type {String} 聚焦时的颜色，默认#e26c44 */
   creepFocusColor: {
     type: String,
     default: "#e26c44",
@@ -114,11 +137,19 @@ const tabFocus = ref(false);
 const modeIsKey = () => {
   return true;
 };
+
+/**
+ * 处理组件获取焦点事件
+ */
 function onFocus() {
   console.log("ccht onFocus", focusName);
   focusHub.setFocus(focusName);
 }
 
+/**
+ * 处理标签栏边缘事件
+ * @param {Object} edgeInfo - 边缘事件信息
+ */
 function tabOnEdge(edgeInfo) {
   console.log("testtest tab on edge");
   if (edgeInfo.direction == EdgeDirection.bottom) {
@@ -127,6 +158,10 @@ function tabOnEdge(edgeInfo) {
   }
 }
 
+/**
+ * 处理内容区域边缘事件
+ * @param {Object} edgeInfo - 边缘事件信息
+ */
 function contentOnEdge(edgeInfo) {
   if (edgeInfo.direction == EdgeDirection.top) {
     focusHub.setFocus(tabName);
@@ -134,6 +169,9 @@ function contentOnEdge(edgeInfo) {
   }
 }
 
+/**
+ * 处理按键抬起事件，更新当前标签ID
+ */
 const onDispatchKeyUp = () => {
   globalInfo.updateTabId = globalInfo.tabId;
 };

package/DemoForOperator/TabContentVertical/App.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <tab-content
+    :name="name"
+    :data="testData"
+    :tabLayout="{ width: 120, height: 650 }"
+    :tabPadding="{ left: 20, right: 20, top: 20, height: 20 }"
+    :contentLayout="{ left: 140, top: 50, width: 1000, height: 600 }"
+    :tabItemGap="30"
+    :contentDataLoader="pageDataLoader"
+    :initFocusId="2"
+    :contentOnFocus="contentOnFocus"
+    :contentOnBlur="contentOnBlur"
+    creepFocusColor="#e26c44"
+  >
+    <template #tabItem="{ data, onAction, query }">
+      <item :data="data" :onAction="onAction" :query="query"></item>
+    </template>
+    <template #content="{ data, onEdge }">
+      <content-page
+        name="contentPage"
+        :pageData="data"
+        :onEdge="onEdge"
+      ></content-page>
+    </template>
+  </tab-content>
+</template>
+
+<script setup>
+import TabContent from "./TabContent/TabContent.vue";
+import { onMounted } from "vue";
+import { useFocusHub } from "jsview";
+/** 注意, tab数据中有子tab的, 子tab的数据必须在childTab字段下, 类似这里的testData */
+import { testData } from "./testData.js";
+import Item from "./Item.vue";
+import ContentPage from "./ContentPage.vue";
+
+const focusHub = useFocusHub();
+const name = "tab-content";
+
+const ironmanSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/ironman_small.png";
+const spidermanSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/spiderman_small.png";
+const captainSmall =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/captain_small.png";
+
+async function pageDataLoader(tabId) {
+  return {
+    title: "page " + tabId,
+    list: [
+      {
+        width: 360,
+        height: 290,
+        img: ironmanSmall,
+      },
+      {
+        width: 360,
+        height: 290,
+        img: spidermanSmall,
+      },
+      {
+        width: 360,
+        height: 290,
+        img: captainSmall,
+      },
+      {
+        width: 360,
+        height: 290,
+        img: ironmanSmall,
+      },
+      {
+        width: 360,
+        height: 290,
+        img: spidermanSmall,
+      },
+      {
+        width: 360,
+        height: 290,
+        img: captainSmall,
+      },
+    ],
+  };
+}
+
+function contentOnFocus() {
+  console.log("content on focus");
+  focusHub.setFocus("contentPage");
+}
+
+function contentOnBlur() {
+  console.log("content on blur");
+}
+
+onMounted(() => {
+  focusHub.setFocus(name);
+});
+</script>

package/DemoForOperator/TabContentVertical/ContentPage.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
+import { ref, onMounted } from "vue";
+import PageItem from "./PageItem.vue";
+
+const props = defineProps({
+  pageData: Object,
+  name: String,
+  onEdge: Function,
+});
+
+console.log("content page on edge", props.pageData);
+
+const provideData = () => {
+  return props.pageData.list;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: 10,
+    marginBottom: 10,
+  };
+};
+
+const widgetLayout = {
+  left: 0,
+  top: 20,
+  width: 1280,
+  height: 600,
+};
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div
+    :style="{
+      fontSize: 40,
+      width: 1280,
+      height: 80,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ pageData.title }}
+  </div>
+
+  <metro-widget
+    :name="name"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="{ left: 20, right: 30, top: 50, bottom: 50 }"
+  >
+    <template #renderItem="{ data, onAction }">
+      <page-item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>
+
+<style scoped></style>