@shijiu/jsview-vue-samples 2.2.426-test.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/App.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <tab-content
+    :name="name"
+    :data="testData"
+    :tabLayout="{ width: 1200, height: 90 }"
+    :tabPadding="{ left: 20, right: 20, top: 20, height: 20 }"
+    :contentLayout="{ left: 20, top: 100, width: 1280, height: 500 }"
+    :tagItemGap="10"
+    :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: 370,
+        height: 300,
+        img: ironmanSmall,
+      },
+      {
+        width: 370,
+        height: 300,
+        img: spidermanSmall,
+      },
+      {
+        width: 370,
+        height: 300,
+        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/TabContent/ContentPage.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { MetroWidget, HORIZONTAL, 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: 20,
+  };
+};
+
+const widgetLayout = {
+  left: 0,
+  top: 80,
+  width: 1280,
+  height: 400,
+};
+
+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="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="{ left: 40, right: 40, top: 50, bottom: 50 }"
+  >
+    <template #renderItem="{ data, onAction }">
+      <page-item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>
+
+<style scoped></style>

package/DemoForOperator/TabContent/Item.vue

@@ -0,0 +1,85 @@
+<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,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>
+
+<style scoped></style>

package/DemoForOperator/TabContent/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>

package/DemoForOperator/TabContent/TabContent/CreepFocus.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { JsvNinePatch, getKeyFramesGroup, JsvTextureStoreApi } from "jsview";
+import { reactive, onBeforeUnmount, ref } from "vue";
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: "#e26c44" // 默认橙色，完全不透明
+  },
+  borderWidth: {
+    type: Number,
+    default: 3  // 边框宽度
+  },
+  initWidth: {
+    type: Number,
+    default: 0,
+  },
+  initHeight: {
+    type: Number,
+    default: 0,
+  },
+  initLeft: {
+    type: Number,
+    default: 0,
+  },
+  initTop: {
+    type: Number,
+    default: 0,
+  },
+});
+
+// 创建圆形纹理
+const sourceId = ref('');
+const circleSize = 35; // 保持原有imageWidth的大小
+const canvasRef = JsvTextureStoreApi.canvasTexture(
+  circleSize,
+  circleSize
+);
+
+// 创建圆形路径
+const radius = Math.floor(circleSize / 2);
+const customPath = canvasRef.circlePath(
+  radius,
+  radius,
+  radius - props.borderWidth/2
+);
+
+// 设置透明背景
+canvasRef.drawColor("rgba(0,0,0,0)");
+
+// 绘制圆形边框
+customPath?.fill(props.color);
+
+// 提交并获取纹理ID
+sourceId.value = canvasRef.commit();
+
+const styleShell = getKeyFramesGroup();
+
+const animationCache = {};
+const addAnimation = (fromRect, toRect, name) => {
+  if (animationCache.hasOwnProperty(name)) {
+    styleShell?.removeRule(name);
+    delete animationCache[name];
+  }
+  if (!(name in animationCache)) {
+    const animStr = `@keyframes ${name} {
+      0% {
+        left: ${fromRect.left};
+        top: ${fromRect.top};
+        width: ${fromRect.width};
+        height: ${fromRect.height};
+      }
+      50% {
+        left: ${Math.min(fromRect.left, toRect.left)};
+        top: ${Math.min(fromRect.top, toRect.top)};
+        width: ${
+          Math.max(fromRect.left + fromRect.width, toRect.left + toRect.width) -
+          Math.min(fromRect.left, toRect.left)
+        };
+        height: ${
+          Math.max(fromRect.top + fromRect.height, toRect.top + toRect.height) -
+          Math.min(fromRect.top, toRect.top)
+        };
+      }
+      100% {
+        left: ${toRect.left};
+        top: ${toRect.top};
+        width: ${toRect.width};
+        height: ${toRect.height};
+      }
+    }`;
+    animationCache[name] = animStr;
+    styleShell.insertRule(animStr);
+  }
+};
+const removeAnimation = (name) => {
+  styleShell?.removeRule(name);
+};
+
+const focusSize = reactive({
+  width: props.initWidth,
+  height: props.initHeight,
+  left: props.initLeft,
+  top: props.initTop,
+  animation: null,
+  onTransitionEnd: null,
+});
+
+let animateChange = 0; // A B版动画切换，解决animation属性不变化引起不刷新问题
+let preRect = null;
+let curRect = null;
+let first = true;
+
+const changeRect = (rect, doAnim = true) => {
+  preRect = curRect;
+  curRect = rect;
+  if (first) {
+    first = false;
+  } else if (doAnim) {
+    const animName = "test_focusMove_" + animateChange;
+    animateChange = animateChange == 0 ? 1 : 0; // A B 版切换
+    addAnimation(preRect, curRect, animName);
+    focusSize.animation = `${animName} 0.3s linear`;
+  }
+  focusSize.left = curRect.left;
+  focusSize.top = curRect.top;
+  focusSize.width = curRect.width;
+  focusSize.height = curRect.height;
+};
+
+onBeforeUnmount(() => {
+  for (let name in animationCache) {
+    removeAnimation(name);
+  }
+  JsvTextureStoreApi.deleteTexture(sourceId.value);
+});
+
+defineExpose({
+  changeRect,
+});
+</script>
+
+<template>
+  <jsv-nine-patch
+    :style="{
+      width: focusSize.width,
+      height: focusSize.height,
+      top: focusSize.top,
+      left: focusSize.left,
+    }"
+    :animation="focusSize.animation"
+    :imageUrl="`jsvtexturestore://${sourceId}`"
+    :imageWidth="circleSize"
+    :centerWidth="2"
+    :imageDspWidth="circleSize"
+    :borderOutset="borderWidth"
+    :animTime="0.2"
+    :waitForInit="true"
+  ></jsv-nine-patch>
+</template>

package/DemoForOperator/TabContent/TabContent/Item.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { onMounted } from "vue";
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+  onItemFocus: Function,
+  focusRectController: {
+    type: Object,
+  },
+  onItemClick: Function,
+});
+
+const customCallbacks = {};
+const selfOnAction = {
+  register: (name, func) => {
+    customCallbacks[name] = func;
+  },
+  unregister: (name) => {
+    delete customCallbacks[name];
+  },
+};
+
+const onFocus = (params) => {
+  const rect = props.query.templatePosition(props.query.index);
+  props.focusRectController?.onFocusChange(rect);
+  props.onItemFocus?.(props.data, rect);
+  customCallbacks.onFocus?.(params);
+};
+
+const onBlur = () => {
+  customCallbacks.onBlur?.();
+};
+
+const onClicked = () => {
+  console.log("item clicked", props.data);
+  props.onItemClick?.(props.data);
+  customCallbacks.onClick?.();
+};
+
+const onGaze = () => {
+  customCallbacks.onGaze?.();
+};
+
+const onIgnore = () => {
+  customCallbacks.onIgnore?.();
+};
+
+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);
+
+onMounted(() => {});
+</script>
+
+<template>
+  <slot name="tabItem" :data="data" :query="query" :onAction="selfOnAction"></slot>
+</template>
+
+<style scoped></style>