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

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>

package/DemoForOperator/TabContentVertical/Item.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref, inject, shallowRef, onMounted, computed } from "vue";
+const modeIsKey = inject("modeIsKey");
+const tabFocus = inject("tabFocus");
+const globalInfo = inject("globalInfo");
+const colorList = ["#FFD700", "#FF1493", "#1E90FF"];
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const divRef = shallowRef();
+
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClicked = () => {
+  console.log("item clicked", props.data);
+};
+
+const onGaze = () => {};
+
+const onIgnore = () => {};
+
+const isSlect = computed(() => {
+  if (modeIsKey()) {
+    return (
+      !tabFocus.value &&
+      !focused.value &&
+      globalInfo.updateTabId == props.data.indexId
+    );
+  } else {
+    return globalInfo.updateTabId == props.data.indexId;
+  }
+});
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+props.onAction.register("onGaze", onGaze);
+props.onAction.register("onIgnore", onIgnore);
+
+// indexId为4时，是有子tab的电影tab
+const fontSize = computed(() => {
+  return props.data.isSubTab && props.data.indexId != 4 ? 26 : 30;
+});
+const fontWeight = computed(() => {
+  return props.data.isSubTab && props.data.indexId != 4 ? "bold" : null;
+});
+const textColor = computed(() => {
+  return props.data.isSubTab && props.data.indexId != 4
+    ? colorList[props.data.indexId % 3]
+    : "#ffffff";
+});
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div
+    :style="{
+      fontSize: fontSize,
+      width: data.width,
+      height: data.height,
+      color: textColor,
+      backgroundColor: isSlect ? 'rgba(211,115,78,0.4)' : 'rgba(0,0,0,0)',
+      borderRadius: 15,
+      textAlign: 'center',
+      lineHeight: data.height,
+      transform: focused ? 'scale3d(1.1,1.1,1)' : 'scale3d(1,1,1)',
+      fontWeight: fontWeight,
+      transition: 'transform 0.2s',
+    }"
+  >
+    <img
+      :src="data.icon"
+      :style="{
+        left: 10,
+        top: 10,
+        width: data.width - 20,
+        height: data.height - 20,
+      }"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/DemoForOperator/TabContentVertical/PageItem.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClick = () => {
+  console.log("page item clicked:", props.data);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundImage: `url(${data.img})`,
+      borderRadius: 15,
+      transform: focused ? 'scale3d(1.1, 1.1, 1)' : 'scale3d(1, 1, 1)',
+      transition: 'transform 0.2s',
+    }"
+  />
+</template>