🎨 优化TV导航

env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 
 declare const plus: any;
+declare module 'spatial-navigation-js';
 
 declare interface Window {
   plus: any;

package-lock.json

@@ -23,6 +23,7 @@
         "echarts": "^5.6.0",
         "md5": "^2.3.0",
         "pinia": "^3.0.3",
+        "spatial-navigation-js": "^1.0.0",
         "sweetalert2": "^11.22.4",
         "vue": "^3.5.17",
         "vue-echarts": "^7.0.3",
@@ -7092,6 +7093,12 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/spatial-navigation-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/spatial-navigation-js/-/spatial-navigation-js-1.0.0.tgz",
+      "integrity": "sha512-RZ0/q7LCL/x4Hz8oUEwkkBIOx4YZt6Nn6o1YhXm6bVDjxZykJQ2tDeVZrYCbq+jDaneszRctl55WedO+l1LePg==",
+      "license": "ISC"
+    },
     "node_modules/speakingurl": {
       "version": "14.0.1",
       "resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",

package.json

@@ -27,6 +27,7 @@
     "echarts": "^5.6.0",
     "md5": "^2.3.0",
     "pinia": "^3.0.3",
+    "spatial-navigation-js": "^1.0.0",
     "sweetalert2": "^11.22.4",
     "vue": "^3.5.17",
     "vue-echarts": "^7.0.3",

src/composeable/TvFocusImprovement.ts

@@ -1,6 +1,7 @@
 import { Debounce } from "@imengyu/imengyu-utils";
 import { onBeforeUnmount, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import SpatialNavigation from 'spatial-navigation-js';
 
 /**
  * 安卓电视焦点控制帮助类
@@ -11,35 +12,19 @@ export function useTvFocusImprovement(fromApp = false) {
   
   const router = useRouter()
   if (fromApp) {
-    router.afterEach( (to, from) => {
-      setTimeout(() => {
-        focusFirstElement();
-      }, 1000);
+    router.afterEach((to, from) => {
+      setTimeout(initSpatialNavigation, 500);
     });
   }
 
-  function focusFirstElement() {
-    const focusableElements = getFocusableElement();
-    if (focusableElements.length) {
-      for (const element of focusableElements) {
-        if (element.classList.contains('active')) {//优先激活选中条目
-          element.focus();
-          return;
-        }
-      }
-      focusableElements[0].focus();
-    }
-  }
-  function getFocusableElement() {
-    return document.querySelectorAll<
-      | HTMLButtonElement
-      | HTMLAnchorElement
-      | HTMLInputElement
-      | HTMLSelectElement
-      | HTMLTextAreaElement
-    >(
-      'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
+  function initSpatialNavigation() {
+    SpatialNavigation.add({
+      selector: '.focusable, a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    });
+    // Make the *currently existing* navigable elements focusable.
+    SpatialNavigation.makeFocusable();
+    // Focus the first navigable element.
+    SpatialNavigation.focus();
   }
 
   const backDebounce = new Debounce(1000, () => router.back());
@@ -74,17 +59,10 @@ export function useTvFocusImprovement(fromApp = false) {
 
     onMounted(() => {
       window.addEventListener('keyup', handleKeyUp);
-      setTimeout(() => {
-        focusFirstElement();
-      }, 2000);
+      setTimeout(initSpatialNavigation, 2000);
     })
     onBeforeUnmount(() => {
       window.removeEventListener('keyup', handleKeyUp);
     });
   }
-
-  return {
-    focusFirstElement,
-    getFocusableElement,
-  }
 }

src/main.ts

@@ -11,6 +11,7 @@ import { createPinia } from 'pinia'
 
 import Vue3Marquee from 'vue3-marquee'
 import VueScrollRect from '@imengyu/vue-scroll-rect';
+import SpatialNavigation from 'spatial-navigation-js';
 import App from './App.vue'
 import router from './router'
 import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap';
@@ -30,6 +31,7 @@ app.use(Vue3Marquee);
 app.use(VueAMap);
 
 app.mount('#app').$nextTick(() => {
+  SpatialNavigation.init();
   registryConvert();
 })