smart-screen-demo-web/src/App.vue

<template>
  <div id="app">
    <div class="app-bg"></div>

    <!--    <div class="safe-area-inset-bottom">
      <div class="tabbar-height-inset-bottom">
        <router-view />
      </div>
    </div>-->

    <router-view v-slot="{ Component }">
      <keep-alive :include="componentNameList">
        <component :is="Component" class="x-component" />
      </keep-alive>
    </router-view>

    <x-footer></x-footer>

    <!--    未来可能需要封装组件-->
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { provide, inject } from "vue";
import { $commonService } from "@/services/framework/dependency-injection-service";
import { $commonService0, testFun } from "@/app-import";

// console.log(useRouter());
const $route = useRoute();
const router = useRouter(); //用来进行路由跳转

console.log("window.$commonService", window.$commonService);
// 推荐使用 $commonService
console.log($commonService.$i18nService.getI18nLocale());

// test 在单独js中引用公共服务
testFun();

// debugger
const title = ref("");

// 生命周期
// 组件被挂载时
onMounted(() => {});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 获取缓存组件
const componentNameList: any = ref([]);
getKeepAlive(router.options.routes as object[]);

// console.log("componentNameList",componentNameList)

function getKeepAlive(routesArr: object[]) {
  // console.log(routesArr)
  routesArr.forEach((item: any) => {
    if (
      !item.meta ||
      item.meta.notKeepAlive === undefined ||
      item.meta.notKeepAlive === false
    ) {
      // console.warn('item',item)
      // console.warn('item.component',item.component)
      if (item.component) {
        componentNameList.value.push(
          getComponentName(item.component.toString())
        );
      }
    }
    // 是否有子级
    if (item.children) {
      getKeepAlive(item.children);
    }
  });
}

// 获取组件名
function getComponentName(url: string) {
  const regex = /\/([^\/]+)\.(?=[^\/]*$)/;
  const match = regex.exec(url); // 执行正则匹配
  if (match) {
    const name = match[1]; // 获取第一个捕获组的值
    return name;
  }
  return "";
}
</script>

<style lang="scss">
@import "src/styles/index";
body {
  min-height: 100vh;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  //background: #9c26b0;

  .app-bg {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    // 海信内页渐变
    background: linear-gradient(
      0.44deg,
      #e5effb 2.48%,
      #e5f0f5 88.5%,
      #e9f4f9 90.37%,
      #f7fdff 100.97%
    );
    //background: red;
  }
}
// 延长自动填充背景色的时间 为达到修改自动填充时input的背景色问题
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 111111s;
  -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
}
</style>