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

package/DemoForOperator/TabContent/TabContent/TabWidget.vue

@@ -0,0 +1,243 @@
+<script setup>
+import { onMounted, inject, ref, provide, shallowRef, computed } from "vue";
+import {
+  getTextWidth,
+  ListWidget,
+  useFocusHub,
+  FixPositionSlide,
+  EdgeDirection,
+  HORIZONTAL,
+} from "jsview";
+import TabItem from "./TabItem.vue";
+import CreepFocus from "./CreepFocus.vue";
+import { getTouchFlag } from "./Util.js";
+
+const touchFlag = getTouchFlag();
+const modeIsKey = inject("modeIsKey");
+
+const tabFocus = inject("tabFocus");
+const focusHub = useFocusHub();
+const props = defineProps({
+  data: Array,
+  name: String,
+  onEdge: Function,
+  layout: Object,
+  padding: Object,
+  itemGap: Number,
+  initFocusId: Number,
+  tabTextFontSize: Number,
+  creepFocusColor: String,
+});
+console.log("layout", props.layout);
+const itemWidthExpand = 60;
+const globalInfo = inject("globalInfo");
+const slideType = new FixPositionSlide();
+
+const creepFocus = ref(null);
+const showFocus = ref(true);
+let currentFocusRect = {};
+const focusFrameController = {
+  focusVisible: (visible) => {
+    showFocus.value = visible ? true : false;
+  },
+  onFocusChange: (rect, focusIndex, doAnim) => {
+    creepFocus.value?.changeRect(rect, doAnim);
+    currentFocusRect = rect;
+  },
+};
+provide("focusFrameController", focusFrameController);
+const itemHeight = computed(
+  () =>
+    props.layout.height -
+    (props.padding?.top ?? 0) -
+    (props.padding?.bottom ?? 0)
+);
+
+const SizeObj = {
+  fontSize: props.tabTextFontSize,
+};
+const data = [];
+const getChildTabList = (childTab) => {
+  if (!childTab) {
+    return null;
+  }
+  const list = [];
+  for (let i = 0; i < childTab.length; ++i) {
+    const childTextSize = getTextWidth(childTab[i].itemTitle, SizeObj);
+    let obj = {
+      width: childTextSize + itemWidthExpand,
+      height: itemHeight.value,
+      marginRight: props.itemGap,
+      content: childTab[i].itemTitle,
+      index: i,
+      ...childTab[i],
+    };
+    list.push(obj);
+  }
+  return list;
+};
+
+for (let i = 0; i < props.data.length; ++i) {
+  const textSize = getTextWidth(props.data[i].itemTitle, SizeObj);
+  const childList = getChildTabList(props.data[i].childTab);
+  let totalWidth = 0;
+  if (childList) {
+    childList.forEach((item) => {
+      totalWidth += item.width + item.marginRight;
+    });
+  }
+  let obj = {
+    width: textSize + itemWidthExpand,
+    height: itemHeight.value,
+    content: props.data[i].itemTitle,
+    marginRight: props.itemGap,
+    name: "item_" + i, // focus name
+    ...props.data[i],
+  };
+  if (childList) {
+    obj.childTab = {
+      width: totalWidth,
+      list: childList,
+    };
+  }
+  data.push(obj);
+}
+const provideData = () => {
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    enableTap: touchFlag == 1,
+  };
+};
+
+const widgetRef = shallowRef();
+onMounted(() => {
+  provide("parentWidget", widgetRef);
+});
+
+const onFocusRectChange = () => {
+  //展开时的滑动不需要更新焦点大小
+  if (showFocus.value) {
+    const curFocusIndex = widgetRef.value.getCurrentFocusIndex();
+    const rect = widgetRef.value.getTemplatePosition(curFocusIndex);
+    focusFrameController.onFocusChange(rect, curFocusIndex);
+  }
+};
+const onAllResizeDone = () => {
+  console.log("onAllResizeDone");
+};
+
+const onItemFocus = (item_data, onBlur) => {
+  console.log("testtest onItemFocus", item_data);
+  globalInfo.tabId = item_data.indexId;
+  if (globalInfo.updateTabId == -1 || !modeIsKey()) {
+    globalInfo.updateTabId = item_data.indexId;
+  }
+  if (globalInfo.tabCode != item_data.itemCode) {
+    globalInfo.tabCode = item_data.itemCode;
+    // if (props.data.icon4) {
+    //   changeBg(props.data.icon4);
+    // }
+  }
+};
+
+const onEdge = (edgeInfo) => {
+  props.onEdge(edgeInfo);
+};
+
+const onItemClick = (data, onBlur, onFocus) => {
+  // manager.onItemTap({ onBlur: onBlur, onFocus: onFocus });
+  // if (data) {
+  //   focusHub.setFocus(props.name);
+  //   widgetRef.value.setFocusId(data.index);
+  // }
+};
+
+const onBlur = () => {
+  showFocus.value = false;
+  tabFocus.value = false;
+};
+
+const onFocus = () => {
+  showFocus.value = true;
+  tabFocus.value = true;
+};
+
+// Manager 实现
+const manager = {
+  previousItem: null,
+
+  // 注册 onBlur 方法
+  registerOnBlur(item) {
+    if (this.previousItem && this.previousItem.onBlur) {
+      this.previousItem.onBlur(); // 调用上一个 item 的 onBlur
+    }
+    if (item.onFocus) {
+      item.onFocus();
+    }
+    this.previousItem = item; // 更新上一个 item
+  },
+
+  // 处理 item 被点击
+  onItemTap(item) {
+    this.registerOnBlur(item);
+  },
+};
+</script>
+
+<template>
+  <div :style="{ left: layout.left, top: layout.top }">
+    <list-widget
+      ref="widgetRef"
+      :name="name"
+      :onFocusRectChange="onFocusRectChange"
+      :onAllItemResizeDone="onAllResizeDone"
+      :width="layout.width"
+      :height="layout.height"
+      :slideSetting="slideType"
+      :direction="HORIZONTAL"
+      :provideData="provideData"
+      :measures="measures"
+      :padding="padding"
+      :initFocusId="initFocusId"
+      :onEdge="onEdge"
+      :onFocus="onFocus"
+      :onBlur="onBlur"
+      :touchFlag="touchFlag"
+    >
+      <template #renderItem="{ data, onAction, query, onItemEdge }">
+        <tab-item
+          :data="data"
+          :onAction="onAction"
+          :query="query"
+          :onItemEdge="onItemEdge"
+          :onItemFocus="onItemFocus"
+          :onItemClick="onItemClick"
+          :creepFocusColor="creepFocusColor"
+        >
+          <template #tabItem="{ data, onAction, query }">
+            <slot
+              name="tabItem"
+              :data="data"
+              :query="query"
+              :onAction="onAction"
+            ></slot>
+          </template>
+        </tab-item>
+      </template>
+      <template #background>
+        <creep-focus
+          v-show="showFocus && modeIsKey()"
+          ref="creepFocus"
+          :color="creepFocusColor"
+        >
+        </creep-focus>
+      </template>
+    </list-widget>
+  </div>
+</template>

package/DemoForOperator/TabContent/TabContent/Util.js

@@ -0,0 +1,3 @@
+export function getTouchFlag() {
+  return 0;
+}

package/DemoForOperator/TabContent/TabContent/ViewSwiper.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { onMounted, inject, ref, watch } from "vue";
+
+const props = defineProps({
+  onEdge: Function,
+  name: String,
+  layout: Object,
+  dataLoader: Function, // (tabId) => Promise
+  animDuration: { type: Number, default: 200 },
+  onFocus: Function,
+  onBlur: Function,
+});
+
+const globalInfo = inject("globalInfo");
+const animState = inject("animState");
+
+const page0Show = ref(false);
+let page0Data = null;
+const page0Anim = ref({ anim: null, onend: null });
+const appSwiper_onFocus = () => {
+  console.log("testtest swiper on focus")
+  props.onFocus();
+};
+const appSwiper_onBlur = () => {
+  console.log("testtest swiper on blur")
+  props.onBlur();
+};
+
+const appSwiper_tabIdWatcher = (newValue, oldValue) => {
+  let direction = newValue > oldValue ? "left" : "right";
+  page0Show.value = false;
+  page0Data = null;
+  page0Anim.value = ref({ anim: null, onend: null });
+  props.dataLoader(newValue).then((data) => {
+    console.log("testtest swiper data", data);
+    if (oldValue > -1) {
+      animState.value = 1;
+    }
+    page0Anim.value = {
+      anim:
+        oldValue != -1
+          ? `app-swiper-${direction}-slide-in ${
+              props.animDuration / 1000
+            }s cubic-bezier(0.05, 0.55, 0.13, 0.78) 1`
+          : null,
+      onend: () => {
+        animState.value = 0;
+      },
+    };
+    page0Data = data;
+    page0Show.value = true;
+  });
+};
+
+watch(
+  () => globalInfo.updateTabId,
+  (newValue, oldValue) => {
+    console.log("ccht updateTabId changed", globalInfo.updateTabId);
+    appSwiper_tabIdWatcher(newValue, oldValue);
+  }
+);
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    ref="focusNode"
+    :onAction="{
+      onFocus: appSwiper_onFocus,
+      onBlur: appSwiper_onBlur,
+    }"
+  >
+    <div
+      id="page0"
+      :style="{
+        left: layout.left,
+        top: layout.top,
+        width: layout.width,
+        height: layout.height,
+        animation: page0Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      @animationend="page0Anim.onend"
+    >
+      <slot v-if="page0Show" :data="page0Data" :onEdge="onEdge"></slot>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style>
+@keyframes app-swiper-left-slide-in {
+  from {
+    transform: translate3d(280px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+    /* animation-timing-function: cubic-bezier(0.05, 0.55, 0.13, 0.78); */
+  }
+}
+
+@keyframes app-swiper-right-slide-in {
+  from {
+    transform: translate3d(-280px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+    /* animation-timing-function: cubic-bezier(0.05, 0.55, 0.13, 0.78); */
+  }
+}
+</style>

package/DemoForOperator/TabContent/testData.js

@@ -0,0 +1,241 @@
+export const testData = [
+  {
+    "indexId": 0,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_89605309/images/biz_89605309_bg_20230610145407.jpg",
+    "itemTitle": "更多",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_89605309",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_89605309.json",
+    "title": "更多",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_89605309/images/biz_89605309_bg_20230610145407.jpg"
+  },
+  {
+    "indexId": 1,
+    "itemTitle": "短视频",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_520",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_520.json",
+    "title": "短视频",
+    "icon": ""
+  },
+  {
+    "indexId": 2,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_84518310/images/biz_84518310_bg_20230607114159.jpg",
+    "itemTitle": "推荐",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_84518310",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_84518310.json",
+    "title": "推荐",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_84518310/images/biz_84518310_bg_20230607114159.jpg",
+    "subTitle": "default"
+  },
+  {
+    "indexId": 3,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_36146605/images/biz_36146605_bg_20230607140144.png",
+    "itemTitle": "直播",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_36146605",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_36146605.json",
+    "title": "直播",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_36146605/images/biz_36146605_bg_20230607140144.png"
+  },
+  {
+    "indexId": 4,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_51744660/biz_01028457/images/biz_01028457_bg_20230607140144.jpg",
+    "itemTitle": "电影 ",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_01028457",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_01028457.json",
+    "childTab": [
+      {
+        "indexId": 4,
+        "isSubTab": true,
+        "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_51744660/biz_01028457/images/biz_01028457_bg_20230607140144.jpg",
+        "itemTitle": "电影 ",
+        "itemSubTitle": "",
+        "itemType": "biz",
+        "itemCode": "biz_01028457",
+        "itemIcon": "",
+        "hImg": "",
+        "vImg": "",
+        "opimg1": "",
+        "opimg2": "",
+        "linkType": "",
+        "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_01028457.json"
+      },
+      {
+        "indexId": 5,
+        "isSubTab": true,
+        "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_25950192/images/biz_25950192_bg_20230607140145.png",
+        "itemTitle": "电视剧",
+        "itemSubTitle": "",
+        "itemType": "biz",
+        "itemCode": "biz_25950192",
+        "itemIcon": "",
+        "hImg": "",
+        "vImg": "",
+        "opimg1": "",
+        "opimg2": "",
+        "linkType": "",
+        "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_25950192.json"
+      },
+      {
+        "indexId": 6,
+        "isSubTab": true,
+        "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_51744660/biz_91290873/images/biz_91290873_bg_20230608154804.jpg",
+        "itemTitle": "综艺",
+        "itemSubTitle": "",
+        "itemType": "biz",
+        "itemCode": "biz_91290873",
+        "itemIcon": "",
+        "hImg": "",
+        "vImg": "",
+        "opimg1": "",
+        "opimg2": "",
+        "linkType": "",
+        "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_91290873.json"
+      },
+      {
+        "indexId": 7,
+        "isSubTab": true,
+        "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_71011586/biz_48135919/images/biz_48135919_bg_20230607171837.png",
+        "itemTitle": "少儿",
+        "itemSubTitle": "",
+        "itemType": "biz",
+        "itemCode": "biz_48135919",
+        "itemIcon": "",
+        "hImg": "",
+        "vImg": "",
+        "opimg1": "",
+        "opimg2": "",
+        "linkType": "",
+        "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_48135919.json"
+      }
+    ],
+    "title": "电影 ",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_51744660/biz_01028457/images/biz_01028457_bg_20230607140144.jpg"
+  },
+  {
+    "indexId": 8,
+    "itemTitle": "动漫",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_46299945",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_46299945.json",
+    "title": "动漫",
+    "icon": ""
+  },
+  {
+    "indexId": 9,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_71011586/biz_80556920/images/biz_80556920_bg_20230608180100.png",
+    "itemTitle": "新闻",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_80556920",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_80556920.json",
+    "title": "新闻",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_71011586/biz_80556920/images/biz_80556920_bg_20230608180100.png"
+  },
+  {
+    "indexId": 10,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_21417580/images/biz_21417580_bg_20230610165411.png",
+    "itemTitle": "体育",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_21417580",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_21417580.json",
+    "title": "体育",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_21417580/images/biz_21417580_bg_20230610165411.png"
+  },
+  {
+    "indexId": 11,
+    "itemTitle": "电影票",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_82694109",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_82694109.json",
+    "title": "电影票",
+    "icon": ""
+  },
+  {
+    "indexId": 12,
+    "itemTitle": "放映厅",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_15167730",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_15167730.json",
+    "title": "放映厅",
+    "icon": ""
+  }
+]

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>