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

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>

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

package/DemoForOperator/TabContentVertical/TabContent/TabContent.vue

@@ -0,0 +1,184 @@
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onFocus,
+      onDispatchKeyUp,
+    }"
+  >
+    <tab-widget
+      :data="data"
+      :name="tabName"
+      :onEdge="tabOnEdge"
+      :layout="tabLayout"
+      :padding="tabPadding"
+      :itemGap="tabItemGap"
+      :initFocusId="initFocusId"
+      :tabTextFontSize="tabTextFontSize"
+      :creepFocusColor="creepFocusColor"
+    >
+      <template #tabItem="{ data, onAction, query }">
+        <slot
+          name="tabItem"
+          :data="data"
+          :query="query"
+          :onAction="onAction"
+        ></slot>
+      </template>
+    </tab-widget>
+    <view-swiper
+      :name="contentName"
+      :dataLoader="contentDataLoader"
+      :onEdge="contentOnEdge"
+      :layout="contentLayout"
+      :onFocus="contentOnFocus"
+      :onBlur="contentOnBlur"
+    >
+      <template #default="{ data, onEdge }">
+        <slot name="content" :data="data" :onEdge="onEdge"></slot>
+      </template>
+    </view-swiper>
+  </jsv-focus-block>
+</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} 标签项之间的间隔 */
+  tabItemGap: {
+    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",
+  },
+});
+const focusHub = useFocusHub();
+const tabName = `${props.name}-tab`;
+const contentName = `${props.name}-content`;
+let focusName = tabName;
+
+const animState = ref(0);
+const globalInfo = reactive({
+  tabId: -1,
+  updateTabId: -1,
+});
+const getTouchFlag = () => {
+  return 0;
+};
+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.right) {
+    focusHub.setFocus(contentName);
+    focusName = contentName;
+  }
+}
+
+/**
+ * 处理内容区域边缘事件
+ * @param {Object} edgeInfo - 边缘事件信息
+ */
+function contentOnEdge(edgeInfo) {
+  if (edgeInfo.direction == EdgeDirection.left) {
+    focusHub.setFocus(tabName);
+    focusName = tabName;
+  }
+}
+
+/**
+ * 处理按键抬起事件，更新当前标签ID
+ */
+const onDispatchKeyUp = () => {
+  globalInfo.updateTabId = globalInfo.tabId;
+};
+
+provide("animState", animState);
+provide("globalInfo", globalInfo);
+provide("tabFocus", tabFocus);
+provide("modeIsKey", modeIsKey);
+provide("getTouchFlag", getTouchFlag);
+</script>