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

package/MetroWidgetDemos/SpatialNav/TvSection/TvSection.vue

@@ -0,0 +1,91 @@
+<script setup>
+import {
+  MetroWidget,
+  VERTICAL,
+  HORIZONTAL,
+  useFocusHub,
+  METRO_WIDGET_CONST,
+  ONEDGE_TYPE
+} from "jsview";
+import { onMounted, ref, shallowRef } from "vue";
+import List from "./List.vue";
+import Item from "../Item.vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+  queryInfo: Object,
+});
+
+const focusHub = useFocusHub();
+
+const provideData = () => {
+  const data = [
+    {
+      width: 180,
+      height: 500,
+      name: "leftList",
+      type: "leftList",
+    },
+    {
+      width: 500,
+      height: 500,
+      marginRight: 10,
+      content: "video",
+      color: "#009900",
+      type: "video",
+    },
+    {
+      width: 180,
+      height: 500,
+      name: "rightList",
+      type: "rightList",
+    },
+  ];
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
+    bindSpatialNav: item.type === "video" ? true : false,
+  };
+};
+
+onMounted(() => {});
+
+const onFocus = (rect) => {
+  focusHub.setFocus(props.data.name);
+};
+props.onAction.register("onFocus", onFocus);
+</script>
+
+<template>
+  <metro-widget
+    :name="data.name"
+    :top="0"
+    :left="0"
+    :width="900"
+    :height="520"
+    :provideData="provideData"
+    :padding="{ left: 10, right: 10, top: 20, }"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="ONEDGE_TYPE.SPATIAL_NAV"
+    :sendFocusRectEvent="true"
+  >
+    <template #renderItem="{ data, onAction, query }">
+      <list
+        v-if="data.type === 'leftList' || data.type === 'rightList'"
+        :data="data"
+        :onAction="onAction"
+        :queryInfo="query"
+      />
+      <item v-else :data="data" :onAction="onAction" :queryInfo="query" />
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/basic2/App.vue

@@ -0,0 +1,407 @@
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
+import { onMounted } from "vue";
+import Item from "./Item.vue";
+
+const focusHub = useFocusHub();
+
+const widgetLayout = {
+  left: 60,
+  top: 120,
+  width: 990,
+  height: 572,
+};
+
+// EPG 网格参数（方块跨行/跨列 = width/height 由数据决定）
+const grid = {
+  colW: 190,
+  gapX: 10,
+  rowH: 50,
+  gapY: 8,
+};
+
+const dayCount = 5; // 列数（Mon~Fri）
+const timeRowCount = 10; // 行数（用于覆盖所有块的 rowSpan）
+
+const dayNames = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+
+const timeAxis = ["10:00", "10:30", "11:00", "11:30", "12:00"];
+
+const mkBlock = ({
+  col,
+  row,
+  colSpan = 1,
+  rowSpan = 1,
+  title,
+  timeText,
+  color,
+}) => {
+  // relative layout 下，MetroWidget 会根据 width/height + marginRight/marginBottom
+  // 自动计算 left/top，所以 measures 不再依赖 left/top。
+  // 这里仍保留 left/top 仅用于稳定排序（让自动布局插入顺序更贴近我们预期的 EPG 网格）。
+  const left = col * (grid.colW + grid.gapX);
+  const top = row * (grid.rowH + grid.gapY);
+
+  const width = colSpan * grid.colW + (colSpan - 1) * grid.gapX;
+  const height = rowSpan * grid.rowH + (rowSpan - 1) * grid.gapY;
+
+  // 末尾不预留“尾巴间隙”，避免 relative 的 Fence 计算把右/下边界挤出容器。
+  const marginRight = col + colSpan < dayCount ? grid.gapX : 0;
+  const marginBottom = row + rowSpan < timeRowCount ? grid.gapY : 0;
+
+  return {
+    left,
+    top,
+    width,
+    height,
+    marginRight,
+    marginBottom,
+    title,
+    timeText,
+    color,
+    col,
+    row,
+  };
+};
+
+// 通过“多尺寸块”在绝对坐标中拼成 EPG 豆腐块布局
+const provideData = () => {
+  // 尽量按“从上到下、从左到右”的顺序插入，让 relative 的 Fence 算法把块落在我们预期的位置附近
+  const blocks = [
+    // row 0
+    mkBlock({
+      // index=0
+      // 推导坐标: left=0, top=0
+      col: 0,
+      row: 0,
+      rowSpan: 2,
+      title: "Show A",
+      timeText: "10:00",
+      color: "#ff4d6d",
+    }),
+    mkBlock({
+      // index=1
+      // 推导坐标: left=200, top=0
+      col: 1,
+      row: 0,
+      rowSpan: 3,
+      title: "Series F",
+      timeText: "10:00",
+      color: "#ff8fab",
+    }),
+    mkBlock({
+      // index=2
+      // 推导坐标: left=400, top=0
+      col: 2,
+      row: 0,
+      colSpan: 2,
+      rowSpan: 3,
+      title: "Block J",
+      timeText: "10:00",
+      color: "#b565f2",
+    }),
+    mkBlock({
+      // index=3
+      // 推导坐标: left=800, top=0
+      col: 4,
+      row: 0,
+      rowSpan: 2,
+      title: "Morning R",
+      timeText: "10:00",
+      color: "#118ab2",
+    }),
+
+    // row 2
+    mkBlock({
+      // index=4
+      // 推导坐标: left=0, top=116
+      col: 0,
+      row: 2,
+      rowSpan: 2,
+      title: "News B",
+      timeText: "11:00",
+      color: "#4dabf7",
+    }),
+    mkBlock({
+      // index=5
+      // 推导坐标: left=800, top=116
+      col: 4,
+      row: 2,
+      rowSpan: 4,
+      title: "Variety S",
+      timeText: "11:00",
+      color: "#ffd166",
+    }),
+
+    // row 3
+    mkBlock({
+      // index=6
+      // 推导坐标: left=200, top=174
+      col: 1,
+      row: 3,
+      rowSpan: 2,
+      title: "Doc G",
+      timeText: "11:30",
+      color: "#90be6d",
+    }),
+    mkBlock({
+      // index=7
+      // 推导坐标: left=400, top=174
+      col: 2,
+      row: 3,
+      rowSpan: 2,
+      title: "Drama K",
+      timeText: "11:30",
+      color: "#ffbe0b",
+    }),
+    mkBlock({
+      // index=8
+      // 推导坐标: left=600, top=174
+      col: 3,
+      row: 3,
+      rowSpan: 1,
+      title: "Show L",
+      timeText: "11:30",
+      color: "#00bbf9",
+    }),
+
+    // row 4
+    mkBlock({
+      // index=9
+      // 推导坐标: left=0, top=232
+      col: 0,
+      row: 4,
+      rowSpan: 1,
+      title: "Movie C",
+      timeText: "12:00",
+      color: "#845ec2",
+    }),
+    mkBlock({
+      // index=10
+      // 推导坐标: left=600, top=232
+      col: 3,
+      row: 4,
+      rowSpan: 2,
+      title: "News M",
+      timeText: "12:00",
+      color: "#fb5607",
+    }),
+
+    // row 5
+    mkBlock({
+      // index=11
+      // 推导坐标: left=0, top=290
+      col: 0,
+      row: 5,
+      colSpan: 2,
+      rowSpan: 2,
+      title: "Special D",
+      timeText: "12:30",
+      color: "#2ec4b6",
+    }),
+    mkBlock({
+      // index=12
+      // 推导坐标: left=400, top=290
+      col: 2,
+      row: 5,
+      rowSpan: 2,
+      title: "Movie N",
+      timeText: "12:30",
+      color: "#3a86ff",
+    }),
+
+    // row 6
+    mkBlock({
+      // index=14
+      // 推导坐标: left=800, top=348
+      col: 4,
+      row: 6,
+      rowSpan: 2,
+      title: "Quiz T",
+      timeText: "13:00",
+      color: "#073b4c",
+    }),
+    mkBlock({
+      // index=13
+      // 推导坐标: left=600, top=348
+      col: 3,
+      row: 6,
+      rowSpan: 3,
+      title: "Special O",
+      timeText: "13:30",
+      color: "#8338ec",
+    }),
+
+    // row 7
+    mkBlock({
+      // index=15
+      // 推导坐标: left=0, top=406
+      col: 0,
+      row: 7,
+      rowSpan: 3,
+      title: "Sports E",
+      timeText: "14:00",
+      color: "#f9c74f",
+    }),
+    mkBlock({
+      // index=17
+      // 推导坐标: left=400, top=406
+      col: 2,
+      row: 7,
+      rowSpan: 3,
+      title: "Sports P",
+      timeText: "14:00",
+      color: "#06d6a0",
+    }),
+    mkBlock({
+      // index=16
+      // 推导坐标: left=200, top=406
+      col: 1,
+      row: 7,
+      rowSpan: 2,
+      title: "Talk H",
+      timeText: "14:00",
+      color: "#43aa8b",
+    }),
+
+    // row 8
+    mkBlock({
+      // index=18
+      // 推导坐标: left=800, top=464
+      col: 4,
+      row: 8,
+      rowSpan: 2,
+      title: "Night U",
+      timeText: "14:00",
+      color: "#9b5de5",
+    }),
+
+    // row 9
+    mkBlock({
+      // index=19
+      // 推导坐标: left=200, top=522
+      col: 1,
+      row: 9,
+      rowSpan: 1,
+      title: "Late I",
+      timeText: "15:00",
+      color: "#577590",
+    }),
+    mkBlock({
+      // index=20
+      // 推导坐标: left=600, top=522
+      col: 3,
+      row: 9,
+      rowSpan: 1,
+      title: "Late Q",
+      timeText: "15:00",
+      color: "#ef476f",
+    }),
+  ];
+
+  return blocks
+    .slice()
+    .sort((a, b) => a.top - b.top || a.left - b.left)
+    .map((b, idx) => {
+      return {
+        ...b,
+        index: idx,
+      };
+    });
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+    focusable: true,
+    enableTap: true,
+  };
+};
+
+// 单一 MetroWidget：不需要多区域 onEdge 跳转
+const onEdge = () => false;
+
+onMounted(() => {
+  focusHub.setFocus("epgMw");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#002233',
+    }"
+  />
+
+  <div
+    :style="{
+      left: widgetLayout.left,
+      top: widgetLayout.top - 75,
+      width: widgetLayout.width,
+      height: 40,
+      fontSize: 26,
+      lineHeight: 40,
+      color: '#FFFFFF',
+    }"
+  >
+    EPG tofu blocks (arbitrary block sizes)
+  </div>
+
+  <!-- day headers (non-focus) -->
+  <div
+    v-for="(d, idx) in dayNames"
+    :key="d"
+    :style="{
+      left: widgetLayout.left + idx * (grid.colW + grid.gapX),
+      top: widgetLayout.top - 35,
+      width: grid.colW,
+      height: 26,
+      fontSize: 18,
+      lineHeight: 26,
+      color: '#E6F6FF',
+      backgroundColor: 'rgba(255,255,255,0.08)',
+    }"
+  >
+    {{ d }}
+  </div>
+
+  <!-- time labels (非焦点展示) -->
+  <div
+    v-for="(t, idx) in timeAxis"
+    :key="t"
+    :style="{
+      left: 10,
+      top: widgetLayout.top + idx * (grid.rowH * 2 + grid.gapY * 2),
+      width: 90,
+      height: 26,
+      fontSize: 18,
+      lineHeight: 26,
+      color: 'rgba(255,255,255,0.9)',
+    }"
+  >
+    {{ t }}
+  </div>
+
+  <metro-widget
+    name="epgMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+    layoutType="relative"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, onAction }">
+      <Item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>
+

package/MetroWidgetDemos/basic2/Item.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Author: JsView Bot
+ * @Date: 2026-03-25
+ * @Description: file content
+-->
+<script setup>
+import { computed, 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("epg item onclick", props.data);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+const outerStyle = computed(() => ({
+  width: props.data.width,
+  height: props.data.height,
+  backgroundColor: props.data.color,
+  color: focused.value ? "#FFE66D" : "#FFFFFF",
+  fontSize: 22,
+  overflow: "hidden",
+}));
+
+const timeStyle = computed(() => ({
+  width: props.data.width,
+  height: 24,
+  lineHeight: 24,
+  fontSize: 16,
+  color: focused.value ? "#001b2a" : "rgba(255,255,255,0.95)",
+}));
+
+const titleStyle = computed(() => ({
+  top: 24,
+  width: props.data.width,
+  height: 24,
+  lineHeight: 24,
+  fontSize: 20,
+  color: focused.value ? "#001b2a" : "#FFFFFF",
+}));
+</script>
+
+<template>
+  <div :style="outerStyle">
+    <div :style="timeStyle">{{ data.timeText }}</div>
+    <div :style="titleStyle">
+      {{ data.title }}  IDX {{ data.index }}
+    </div>
+  </div>
+</template>
+

package/MetroWidgetDemos/direction/App.vue

@@ -35,6 +35,28 @@ for (let i = 0; i < 30; i++) {
   });
 }
 
+// HORIZONTAL(容器: 300x200, item: 90x90, marginRight:10, marginBottom:10)
+// 依据 MetroWidgetSetup -> CommonMetroTemplate(relative) 推测:
+// - lineMax = contentHeight = 200, 单列可放 2 个(步长 100)
+// - 排列顺序: 从上到下，再从左到右
+// - 位置公式: col = Math.floor(i / 2), row = i % 2, left = col * 100, top = row * 100
+// 0:(0,0) 1:(0,100) 2:(100,0) 3:(100,100) 4:(200,0) 5:(200,100)
+// 6:(300,0) 7:(300,100) 8:(400,0) 9:(400,100) 10:(500,0) 11:(500,100)
+// 12:(600,0) 13:(600,100) 14:(700,0) 15:(700,100) 16:(800,0) 17:(800,100)
+// 18:(900,0) 19:(900,100) 20:(1000,0) 21:(1000,100) 22:(1100,0) 23:(1100,100)
+// 24:(1200,0) 25:(1200,100) 26:(1300,0) 27:(1300,100) 28:(1400,0) 29:(1400,100)
+//
+// VERTICAL(容器: 200x300, item: 90x90, marginRight:10, marginBottom:10)
+// 依据 MetroWidgetSetup -> CommonMetroTemplate(relative) 推测:
+// - lineMax = contentWidth = 200, 单行可放 2 个(步长 100)
+// - 排列顺序: 从左到右，再从上到下
+// - 位置公式: row = Math.floor(i / 2), col = i % 2, left = col * 100, top = row * 100
+// 0:(0,0) 1:(100,0) 2:(0,100) 3:(100,100) 4:(0,200) 5:(100,200)
+// 6:(0,300) 7:(100,300) 8:(0,400) 9:(100,400) 10:(0,500) 11:(100,500)
+// 12:(0,600) 13:(100,600) 14:(0,700) 15:(100,700) 16:(0,800) 17:(100,800)
+// 18:(0,900) 19:(100,900) 20:(0,1000) 21:(100,1000) 22:(0,1100) 23:(100,1100)
+// 24:(0,1200) 25:(100,1200) 26:(0,1300) 27:(100,1300) 28:(0,1400) 29:(100,1400)
+
 const horizontalWidget = {
   provideData: () => {
     return data;

package/MetroWidgetDemos/gazeFocusDiff/App.vue

@@ -0,0 +1,126 @@
+<!--
+ * @file
+ *
+ * 【界面概述】
+ * 对比 MetroWidget item 的 onGaze/onIgnore vs onFocus/onBlur：
+ * - onFocus/onBlur：仅在该 item 处于“focus-tree 焦点”时触发（且一般要求 widget 自身处于获焦状态）
+ * - onGaze/onIgnore：即便 widget 未获焦，item 的凝视状态仍会触发
+ *
+ * 【交互提示】
+ * - 用方向键移动 focus：观察“FOCUS”高亮变化
+ * - 用鼠标/凝视交互跨过 item：观察“GAZE”高亮变化
+ -->
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
+import { onMounted, ref } from "vue";
+import Item from "./Item.vue";
+
+const focusHub = useFocusHub();
+
+const listData = [
+  { id: 0, title: "Item 0", width: 420, height: 80, marginBottom: 16 },
+  { id: 1, title: "Item 1", width: 420, height: 80, marginBottom: 16 },
+  { id: 2, title: "Item 2", width: 420, height: 80, marginBottom: 16 },
+  { id: 3, title: "Item 3", width: 420, height: 80, marginBottom: 16 },
+  { id: 4, title: "Item 4", width: 420, height: 80, marginBottom: 16 },
+];
+
+const measures = (item) => ({
+  width: item.width,
+  height: item.height,
+  marginBottom: item.marginBottom,
+});
+
+const mirrorWidgetRef = ref(null);
+
+const onDriverFocusChange = (id) => {
+  // 关键点 1：左侧 driver widget 作为 focusBlock owner，切换焦点时触发 onFocusChange(id)
+  // 关键点 2：把右侧 mirror widget 的同 index item“对齐到同一个焦点 id”
+  //   - setFocusId(id, needSlide, doAnim)
+  //   - 此处传 false,false 目的是：不做滚动/动画干扰，仅用于“切换 item 内部状态”观察回调差异
+  //
+  // 关键点 3（验证目标）：
+  // - 右侧 mirror widget 本身不作为 focusBlock owner（我们没有给它 setFocus）
+  // - 因此：右侧 item 的 onGaze/onIgnore 仍会跟随凝视/关注变化
+  // - 但右侧 item 的 onFocus/onBlur 应当不会触发（onFocus/onBlur 依赖 widget 获焦状态）
+  mirrorWidgetRef.value?.setFocusId(id, false, false);
+};
+
+onMounted(() => {
+  // 关键点 0：初始焦点只落在左侧 driver widget
+  // - 这样才能确保右侧 mirror widget 不处于“widget 获焦状态”
+  // - 进而只出现 onGaze/onIgnore（不出现 onFocus/onBlur）
+  focusHub.setFocus("gazeFocusDriverWidget");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#0C1B30',
+      position: 'relative',
+    }"
+  >
+    <div
+      :style="{
+        left: 80,
+        top: 30,
+        width: 460,
+        color: '#FFFFFF',
+        fontSize: 16,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+      }"
+    >
+      {{ "Left: focusBlock (FOCUS+GAZE callbacks)" }}
+    </div>
+    <div
+      :style="{
+        left: 560,
+        top: 30,
+        width: 460,
+        color: '#FFFFFF',
+        fontSize: 16,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+      }"
+    >
+      {{ "Right: setFocusId mirror (GAZE only expected)" }}
+    </div>
+
+    <metro-widget
+      name="gazeFocusDriverWidget"
+      :left="80"
+      :top="90"
+      :width="460"
+      :height="620"
+      :direction="VERTICAL"
+      :data="listData"
+      :measures="measures"
+      :onFocusChange="onDriverFocusChange"
+    >
+      <template #renderItem="{ data, onAction }">
+        <item :data="data" :onAction="onAction" widget-tag="L" />
+      </template>
+    </metro-widget>
+
+    <metro-widget
+      ref="mirrorWidgetRef"
+      name="gazeFocusMirrorWidget"
+      :left="560"
+      :top="90"
+      :width="460"
+      :height="620"
+      :direction="VERTICAL"
+      :data="listData"
+      :measures="measures"
+    >
+      <template #renderItem="{ data, onAction }">
+        <item :data="data" :onAction="onAction" widget-tag="R" />
+      </template>
+    </metro-widget>
+  </div>
+</template>
+