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

package/MetroWidgetDemos/EpgFlowListType/App.vue

@@ -0,0 +1,206 @@
+<script setup>
+import {
+  MetroWidget,
+  VERTICAL,
+  useFocusHub,
+  EdgeDirection,
+  METRO_WIDGET_CONST,
+  SpatialNavProvider,
+  SeamlessSlide,
+} from "jsview";
+import { onMounted, shallowRef } from "vue";
+import LeftTabItem from "./components/LeftTabItem.vue";
+import FloorSection from "./components/FloorSection.vue";
+import { leftTabs, floorList } from "./data";
+
+const focusHub = useFocusHub();
+
+const leftWidgetRef = shallowRef();
+const rightWidgetRef = shallowRef();
+
+let curFloorId = 0;
+const LEFT_ITEM_HEIGHT = 72;
+const LEFT_ITEM_GAP = 14;
+const LEFT_WIDGET_HEIGHT = 620;
+
+const leftContentHeight =
+  leftTabs.length * LEFT_ITEM_HEIGHT +
+  Math.max(0, leftTabs.length - 1) * LEFT_ITEM_GAP;
+const leftVerticalPadding = Math.max(
+  0,
+  Math.floor((LEFT_WIDGET_HEIGHT - leftContentHeight) / 2)
+);
+
+const leftPadding = {
+  top: leftVerticalPadding,
+  bottom: leftVerticalPadding,
+  left: 0,
+  right: 0,
+};
+
+// 将焦点自动对齐区间压缩到可视区 0.4~0.6，减少贴边感
+const leftSlideSetting = new SeamlessSlide({
+  headRange: 0.4,
+  tailRange: 0.4,
+});
+
+const leftProvideData = () => {
+  return leftTabs.map((item) => {
+    return {
+      ...item,
+      width: 220,
+      height: 72,
+    };
+  });
+};
+
+const leftMeasures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginBottom: 14,
+  };
+};
+
+const rightProvideData = () => {
+  return floorList.map((floor) => {
+    const itemCount = floor.contentList.length;
+    const columnCount = Math.max(
+      1,
+      Math.floor((RIGHT_CONTENT_WIDTH + RIGHT_CONTENT_GAP_X) / (RIGHT_CONTENT_ITEM_WIDTH + RIGHT_CONTENT_GAP_X))
+    );
+    const rowCount = Math.max(1, Math.ceil(itemCount / columnCount));
+    // 与 contentMeasures 的 marginBottom 保持一致，末行也预留间距，避免子楼层出现内部可滚动空间
+    const contentHeight = rowCount * (RIGHT_CONTENT_ITEM_HEIGHT + RIGHT_CONTENT_GAP_Y);
+    const floorHeight = RIGHT_CONTENT_TOP + contentHeight + RIGHT_FLOOR_BOTTOM_SAFE_GAP;
+    return {
+      ...floor,
+      contentHeight,
+      floorHeight,
+    };
+  });
+};
+
+const RIGHT_FLOOR_GAP = 18;
+const RIGHT_CONTENT_WIDTH = 900;
+const RIGHT_CONTENT_TOP = 62;
+const RIGHT_CONTENT_ITEM_WIDTH = 220;
+const RIGHT_CONTENT_ITEM_HEIGHT = 64;
+const RIGHT_CONTENT_GAP_X = 12;
+const RIGHT_CONTENT_GAP_Y = 12;
+const RIGHT_FLOOR_BOTTOM_SAFE_GAP = 14;
+const rightVisiblePadding = 20;
+const rightPadding = {
+  top: rightVisiblePadding,
+  bottom: rightVisiblePadding,
+  left: 0,
+  right: 0,
+};
+
+// 右侧纵向楼层自动对齐时尽量将焦点落在可视区中间（0.4~0.6）
+const rightSlideSetting = new SeamlessSlide({
+  headRange: 0.4,
+  tailRange: 0.4,
+});
+
+const rightMeasures = (item) => {
+  return {
+    width: 940,
+    height: item.floorHeight ?? 214,
+    marginBottom: RIGHT_FLOOR_GAP,
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
+  };
+};
+
+const syncLeftTab = (id) => {
+  curFloorId = id;
+  if (leftWidgetRef.value) {
+    leftWidgetRef.value.setFocusId(id);
+  }
+};
+
+const leftOnFocusChange = (id) => {
+  curFloorId = id;
+  if (rightWidgetRef.value) {
+    rightWidgetRef.value.setFocusId(id, true, true);
+  }
+};
+
+const leftOnEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.right) {
+    if (rightWidgetRef.value) {
+      rightWidgetRef.value.setFocusId(curFloorId);
+    }
+    focusHub.setFocus(`epg-floor-content-${curFloorId}`);
+  }
+};
+
+const rightOnSpatialEdge = (edgeInfo) => {
+  if (edgeInfo.direction === EdgeDirection.left) {
+    if (leftWidgetRef.value) {
+      leftWidgetRef.value.setFocusId(curFloorId, true);
+    }
+    focusHub.setFocus("epg-left-widget");
+  }
+};
+
+onMounted(() => {
+  focusHub.setFocus("epg-left-widget");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#081529',
+    }"
+  ></div>
+
+  <metro-widget
+    ref="leftWidgetRef"
+    name="epg-left-widget"
+    :left="40"
+    :top="58"
+    :width="240"
+    :height="620"
+    :direction="VERTICAL"
+    :padding="leftPadding"
+    :slideSetting="leftSlideSetting"
+    :provideData="leftProvideData"
+    :measures="leftMeasures"
+    :onEdge="leftOnEdge"
+    :onFocusChange="leftOnFocusChange"
+  >
+    <template #renderItem="{ data, onAction }">
+      <left-tab-item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <SpatialNavProvider :onEdge="rightOnSpatialEdge" yDefaultMoveType="layerFirst">
+    <metro-widget
+      ref="rightWidgetRef"
+      name="epg-right-widget"
+      :left="300"
+      :top="40"
+      :width="960"
+      :height="650"
+      :direction="VERTICAL"
+      :padding="rightPadding"
+      :slideSetting="rightSlideSetting"
+      :provideData="rightProvideData"
+      :measures="rightMeasures"
+      :keepTraceRange="1.5"
+      :sendFocusRectEvent="true"
+    >
+      <template #renderItem="{ data, onAction }">
+        <floor-section
+          :data="data"
+          :onAction="onAction"
+          :onFloorFocus="syncLeftTab"
+        />
+      </template>
+    </metro-widget>
+  </SpatialNavProvider>
+</template>

package/MetroWidgetDemos/EpgFlowListType/components/ContentCard.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { ref, onBeforeUnmount } from "vue";
+import { JsvNinePatch, JsvTextureBuilder, JsvTextureStoreApi } from "jsview";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  onAction: {
+    type: Object,
+    required: true,
+  },
+  onFocus: {
+    type: Function,
+    required: false,
+    default: undefined,
+  },
+});
+
+const focused = ref(false);
+const focusTextureInfo = ref(null);
+const focusTextureUrl = ref("");
+
+const ensureFocusTexture = () => {
+  if (focusTextureInfo.value) {
+    return;
+  }
+  const info = JsvTextureBuilder.buildCircleNinePatchTexture({
+    cornerRadius: 5,
+    circleLineWidth: 2,
+    circleColor: "rgba(242,250,255,1)",
+  });
+  focusTextureInfo.value = info;
+  focusTextureUrl.value = `jsvtexturestore://${info.texAccessName}`;
+};
+
+const releaseFocusTexture = () => {
+  if (!focusTextureInfo.value) {
+    return;
+  }
+  JsvTextureStoreApi.deleteTexture(focusTextureInfo.value.texAccessName);
+  focusTextureInfo.value = null;
+  focusTextureUrl.value = "";
+};
+
+props.onAction.register("onFocus", () => {
+  ensureFocusTexture();
+  focused.value = true;
+  if (props.onFocus) {
+    props.onFocus();
+  }
+});
+
+props.onAction.register("onBlur", () => {
+  focused.value = false;
+  releaseFocusTexture();
+});
+
+onBeforeUnmount(() => {
+  releaseFocusTexture();
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: focused ? '#63D8FF' : '#1F314D',
+      borderRadius: 5,
+    }"
+  >
+    <jsv-nine-patch
+      v-if="focused && focusTextureInfo"
+      :style="{
+        left: 0,
+        top: 0,
+        width: data.width,
+        height: data.height,
+      }"
+      :imageUrl="focusTextureUrl"
+      :imageWidth="focusTextureInfo.ImageWidth"
+      :centerWidth="focusTextureInfo.CenterWidth"
+      :borderOutset="focusTextureInfo.BorderOutset"
+      :imageDspWidth="focusTextureInfo.ImageDspWidth"
+      :waitForInit="true"
+    />
+    <div
+      :style="{
+        left: 12,
+        top: 4,
+        width: data.width - 24,
+        height: data.height - 8,
+        color: focused ? '#09213F' : '#EAF3FF',
+        fontSize: 24,
+        lineHeight: 28,
+        whiteSpace: 'normal',
+        wordBreak: 'break-all',
+      }"
+    >
+      {{ data.title }}
+    </div>
+  </div>
+</template>

package/MetroWidgetDemos/EpgFlowListType/components/FloorSection.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { computed } from "vue";
+import {
+  MetroWidget,
+  VERTICAL,
+  ONEDGE_TYPE,
+  SeamlessSlide,
+  useFocusHub,
+  METRO_WIDGET_CONST,
+} from "jsview";
+import ContentCard from "./ContentCard.vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  onAction: {
+    type: Object,
+    required: true,
+  },
+  onFloorFocus: {
+    type: Function,
+    required: true,
+  },
+});
+const focusHub = useFocusHub();
+
+const contentWidgetName = computed(() => {
+  return `epg-floor-content-${props.data.id}`;
+});
+
+const floorHeight = computed(() => {
+  return props.data.floorHeight ?? 214;
+});
+
+const contentWidgetHeight = computed(() => {
+  return props.data.contentHeight ?? 138;
+});
+
+const provideContentData = () => {
+  return props.data.contentList.map((title, index) => {
+    return {
+      id: `${props.data.id}-${index}`,
+      title,
+      width: 220,
+      height: 64,
+    };
+  });
+};
+
+const contentMeasures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: 12,
+    marginBottom: 12,
+    bindSpatialNav: true,
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.DISABLE,
+  };
+};
+
+// 楼层内横向内容自动对齐时尽量把焦点控制在 0.4~0.6 区间
+const contentSlideSetting = new SeamlessSlide({
+  headRange: 0.4,
+  tailRange: 0.4,
+});
+
+// 焦点框是九宫格描边，会向 item 外扩（borderOutset）；
+// 子 MetroWidget 默认会 clip，可视区边缘（尤其左/上）容易被裁切，
+// 这里通过 padding 预留安全边距，保证圆角焦点框完整显示。
+const contentPadding = {
+  top: 6,
+  bottom: 0,
+  left: 6,
+  right: 0,
+};
+
+props.onAction.register("onFocus", () => {
+  props.onFloorFocus(props.data.id);
+  focusHub.setFocus(contentWidgetName.value);
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 940,
+      height: floorHeight,
+      backgroundColor: '#122540',
+      borderRadius: 12,
+    }"
+  >
+    <div
+      :style="{
+        left: 20,
+        top: 14,
+        width: 880,
+        height: 36,
+        lineHeight: '36px',
+        color: '#F2F8FF',
+        fontSize: 30,
+      }"
+    >
+      {{ data.title }}
+    </div>
+
+    <metro-widget
+      :name="contentWidgetName"
+      :left="20"
+      :top="62"
+      :width="900"
+      :height="contentWidgetHeight"
+      :direction="VERTICAL"
+      :padding="contentPadding"
+      :slideSetting="contentSlideSetting"
+      :provideData="provideContentData"
+      :measures="contentMeasures"
+      :onEdge="ONEDGE_TYPE.SPATIAL_NAV"
+      :sendFocusRectEvent="true"
+    >
+      <template #renderItem="{ data, onAction }">
+        <content-card
+          :data="data"
+          :onAction="onAction"
+          :onFocus="() => props.onFloorFocus(props.data.id)"
+        />
+      </template>
+    </metro-widget>
+  </div>
+</template>

package/MetroWidgetDemos/EpgFlowListType/components/LeftTabItem.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+  onAction: {
+    type: Object,
+    required: true,
+  },
+});
+
+const focused = ref(false);
+
+props.onAction.register("onFocus", () => {
+  focused.value = true;
+});
+
+props.onAction.register("onBlur", () => {
+  focused.value = false;
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      lineHeight: data.height + 'px',
+      textAlign: 'center',
+      fontSize: 30,
+      color: focused ? '#0D1E39' : '#FFFFFF',
+      backgroundColor: focused ? '#7AE3FF' : '#2E4B72',
+      borderRadius: 10,
+    }"
+  >
+    {{ data.title }}
+  </div>
+</template>

package/MetroWidgetDemos/EpgFlowListType/data.js

@@ -0,0 +1,78 @@
+export const leftTabs = [
+  { id: 0, title: "推荐" },
+  { id: 1, title: "电影" },
+  { id: 2, title: "电视剧" },
+  { id: 3, title: "综艺" },
+  { id: 4, title: "少儿" },
+];
+
+export const floorList = [
+  {
+    id: 0,
+    title: "推荐楼层",
+    contentList: [
+      "推荐内容 01",
+      "推荐内容 02",
+      "推荐内容 03",
+      "推荐内容 04",
+      "推荐内容 05",
+      "推荐内容 06",
+      "推荐内容 07",
+    ],
+  },
+  {
+    id: 1,
+    title: "电影楼层",
+    contentList: [
+      "电影内容 01",
+      "电影内容 02",
+      "电影内容 03",
+      "电影内容 04",
+      "电影内容 05",
+      "电影内容 06",
+      "电影内容 07",
+      "电影内容 08",
+    ],
+  },
+  {
+    id: 2,
+    title: "电视剧楼层",
+    contentList: [
+      "剧集内容 01",
+      "剧集内容 02",
+      "剧集内容 03",
+      "剧集内容 04",
+      "剧集内容 05",
+      "剧集内容 06",
+      "剧集内容 07",
+    ],
+  },
+  {
+    id: 3,
+    title: "综艺楼层",
+    contentList: [
+      "综艺内容 01",
+      "综艺内容 02",
+      "综艺内容 03",
+      "综艺内容 04",
+      "综艺内容 05",
+      "综艺内容 06",
+      "综艺内容 07",
+    ],
+  },
+  {
+    id: 4,
+    title: "少儿楼层",
+    contentList: [
+      "少儿内容 01",
+      "少儿内容 02",
+      "少儿内容 03",
+      "少儿内容 04",
+      "少儿内容 05",
+      "少儿内容 06",
+      "少儿内容 07",
+      "少儿内容 08",
+      "少儿内容 09",
+    ],
+  },
+];

package/MetroWidgetDemos/ListExpand/ChildItem.vue

@@ -0,0 +1,130 @@
+<!-- 通用item -->
+<script setup>
+import { JsvMarquee } from 'jsview'
+import { shallowRef, inject } from 'vue'
+const props = defineProps({
+    data: Object,
+    name: String,
+    onAction: Object,
+    query: Object,
+    onClick: Function,
+    onFocus: Function,
+    onBlur: Function,
+    onItemEdge: Function,
+})
+const focused = shallowRef(false)
+const gazed = shallowRef(false)
+const parentWidget = inject('parentWidget', {})
+const divRef = shallowRef(null)
+// item样式
+const itemStyle = {
+    ...props.data.itemStyle,
+}
+// 图片样式
+const imgStyle = {
+    ...props.data.imgStyle,
+}
+// 图标样式
+const iconStyle = {
+    ...props.data.iconStyle,
+}
+// 文本样式
+const textStyle = {
+    ...props.data.textStyle,
+    width: props.data.textStyle.padding
+        ? props.data.textStyle.width - (props.data.textStyle.padding.left || 0) - (props.data.textStyle.padding.right || 0)
+        : props.data.textStyle.width,
+    height: props.data.textStyle.padding
+        ? props.data.textStyle.height - (props.data.textStyle.padding.top || 0) - (props.data.textStyle.padding.bottom || 0)
+        : props.data.textStyle.height,
+    left: (props.data.textStyle.left || 0) + (props.data.textStyle.padding?.left || 0),
+    top: (props.data.textStyle.top || 0) + (props.data.textStyle.padding?.top || 0),
+}
+// 焦点样式
+const focusStyle = {
+    ...itemStyle,
+    ...props.data.focusStyle,
+}
+// 焦点图片样式
+const focusImgStyle = {
+    ...imgStyle,
+    ...props.data.focusImgStyle,
+}
+// 焦点图标样式
+const focusIconStyle = {
+    ...iconStyle,
+    ...props.data.focusIconStyle,
+}
+// 焦点文本样式
+const focusTextStyle = {
+    ...textStyle,
+    ...props.data.focusTextStyle
+}
+// 失焦样式
+const blurStyle = {
+    ...itemStyle,
+    ...props.data.blurStyle,
+}
+// 失焦图片样式
+const blurImgStyle = {
+    ...imgStyle,
+    ...props.data.blurImgStyle,
+}
+// 失焦图标样式
+const blurIconStyle = {
+    ...iconStyle,
+    ...props.data.blurIconStyle,
+}
+// 失焦文本样式
+const blurTextStyle = {
+    ...textStyle,
+    ...props.data.blurTextStyle,
+}
+//在回调中更改自身状态
+const onFocus = () => {
+    if (parentWidget.value) {
+        parentWidget.value.slideToDiv(divRef.value, true)
+    }
+    focused.value = true
+    if (props.onFocus) {
+        props.onFocus(props.data, props.query)
+    }
+}
+const onBlur = () => {
+    focused.value = false
+    if (props.onBlur) {
+        props.onBlur(props.data, props.query)
+    }
+}
+const onClick = () => {
+    if (props.onClick) {
+        props.onClick(props.data, props.query)
+    }
+}
+// 无论widget是否获焦 item获焦
+const onGaze = () => {
+    gazed.value = true
+}
+// 无论widget是否获焦 item失焦
+const onIgnore = () => {
+    gazed.value = false
+}
+// 注册回调
+props.onAction.register('onFocus', onFocus)
+props.onAction.register('onBlur', onBlur)
+props.onAction.register('onClick', onClick)
+props.onAction.register('onGaze', onGaze)
+props.onAction.register('onIgnore', onIgnore)
+</script>
+<template>
+    <div ref="divRef" :style="focused ? focusStyle : gazed ? blurStyle : itemStyle">
+        <div v-if="imgStyle" :style="focused ? focusImgStyle : gazed ? blurImgStyle : imgStyle"></div>
+        <div v-if="iconStyle" :style="iconStyle"></div>
+        <!-- 正常显示文字 -->
+        <div v-if="data.data.textVisible">
+            <jsv-marquee v-if="focused" :style="focusTextStyle" :text="data.data.name"></jsv-marquee>
+            <div v-else :style="gazed ? blurTextStyle : textStyle">{{ data.data?.name }}</div>
+        </div>
+    </div>
+</template>
+<style scoped></style>