📄 修改配置和细节优化

pack/manifest.json

@@ -203,6 +203,9 @@
                     "xhdpi" : "", /*720P高分屏启动图片，分辨率：720x1242*/
                     "xxhdpi" : "" /*1080P高分屏启动图片，分辨率：1080x1882*/
                 }
+            },
+            "ios" : {
+                "dSYMs" : false
             }
         }
     },

package.json

@@ -14,6 +14,7 @@
     "@imengyu/imengyu-utils": "^0.0.14",
     "@imengyu/js-request-transform": "^0.3.5",
     "@imengyu/vue-scroll-rect": "^0.1.7",
+    "@vitejs/plugin-legacy": "^7.2.1",
     "ant-design-vue": "^4.2.6",
     "md5": "^2.3.0",
     "pinia": "^3.0.3",

src/App.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 import { RouterView } from 'vue-router'
+import { useTvFocusImprovement } from './composeable/TvFocusImprovement';
+
+useTvFocusImprovement(true);
 </script>
 
 <template>
-  
   <a-config-provider
     :locale="zhCN"
     :theme="{

src/composeable/TvFocusImprovement.ts

@@ -0,0 +1,90 @@
+import { Debounce } from "@imengyu/imengyu-utils";
+import { onBeforeUnmount, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+/**
+ * 安卓电视焦点控制帮助类
+ * @param fromApp 是否从应用启动
+ * @returns 
+ */
+export function useTvFocusImprovement(fromApp = false) {
+  
+  const router = useRouter()
+  if (fromApp) {
+    router.afterEach( (to, from) => {
+      setTimeout(() => {
+        focusFirstElement();
+      }, 1000);
+    });
+  }
+
+  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"])'
+    );
+  }
+
+  const backDebounce = new Debounce(1000, () => router.back());
+
+  function handleKeyUp(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      if (document.activeElement)
+        (document.activeElement as HTMLElement).click();
+    } else if (e.key === 'Backspace') {
+      handleBackButton();
+    }
+  }
+  function handleBackButton() {
+    if (router.currentRoute.value.name === 'Home')
+      plus.runtime.quit();
+    else
+      backDebounce.execute();
+  }
+
+  
+  if (fromApp) {
+    if(window.plus) {
+      plusReady();  
+    } else {
+      document.addEventListener("plusready", plusReady, false);  
+    }  
+    // 扩展API准备完成后要执行的操作  
+    function plusReady(){ 
+      console.log('plusReady!');
+      plus.key.addEventListener("backbutton", handleBackButton);
+    }  
+
+    onMounted(() => {
+      window.addEventListener('keyup', handleKeyUp);
+      setTimeout(() => {
+        focusFirstElement();
+      }, 2000);
+    })
+    onBeforeUnmount(() => {
+      window.removeEventListener('keyup', handleKeyUp);
+    });
+  }
+
+  return {
+    focusFirstElement,
+    getFocusableElement,
+  }
+}

src/views/HomeView.vue

@@ -14,8 +14,8 @@ function goMenu() {
   <main class="main-bg main-bg1 d-flex flex-col align-center justify-center">
     <div class="d-flex flex-col align-center" @click="goMenu">
       <img class="w-15 mt-3 mb-3" src="@/assets/images/Index/StartBanner.png"></img>
-      <div class="d-flex flex-row w-60">
-        <img class="w-100 h-100" src="@/assets/images/Index/StartTitle.png"></img>
+      <div class="d-flex flex-row w-70">
+        <img class="w-100 logo" src="@/assets/images/Index/StartTitle.png"></img>
         <img class="ml-3" src="@/assets/images/ImgPrintWithText.png"></img>
       </div>
       <div class="size-s color-second mt-3 mb-4">Huli Cultural Heritage Protection Center</div>
@@ -34,3 +34,9 @@ function goMenu() {
     </div>
   </main>
 </template>
+
+<style lang="scss" scoped>
+.logo {
+  object-fit: contain;
+}
+</style>

vite.config.ts

@@ -5,12 +5,18 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import Components from 'unplugin-vue-components/vite';
+import legacy from '@vitejs/plugin-legacy';
 import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    legacy({
+      targets: ['chrome < 60', 'edge < 15'],
+      renderLegacyChunks: true,
+      renderModernChunks: false,
+    }),
     vueJsx(),
     vueDevTools(),
     Components({