wallet_app/src/App.vue

<template>
  <van-nav-bar
    v-if="route.meta.navbar"
    :left-arrow="route.meta.leftArrow"
    @click-left="goBack()"
    :title="$t(route.meta.title)"
    class="app-bar-header"
    :style="notchStyle"
  />
  <div class="main" :style="appMainViewStyle">
    <RouterView />
  </div>
</template>

<script setup>
import { checkAndUpdate } from "@/updater/index";
import { getNotchHeight } from "@/utils/statusBar";
import { setupNotifications } from "@/utils/notifications.js";
import { useWalletStore } from "@/stores/modules/walletStore";
import { useWebSocketStore } from "@/stores/modules/webSocketStore.js";

const route = useRoute();
const router = useRouter();

const walletStore = useWalletStore();
const wsStore = useWebSocketStore();

const height = ref(0);
const notchStyle = ref({});

const appMainViewStyle = computed(() => {
  let mainHeight = 0;
  if (route.meta.navbar) mainHeight = height.value + 46;
  if (route.meta.tabbar) mainHeight = mainHeight + 60;
  return {
    height: `calc(100vh - ${mainHeight}px)`,
  };
});

const goBack = () => {
  if (route.meta.navbar) {
    if (route.meta.to) {
      router.push({
        path: route.meta.to,
      });
      return;
    }
    router.back();
  }
};

onBeforeMount(async () => {
  const getLoadingNode = document.getElementById("Loading");
  const { body } = document;
  if (getLoadingNode) {
    body.removeChild(getLoadingNode);
  }

  height.value = await getNotchHeight();
  notchStyle.value = {
    paddingTop: `${height.value}px`,
  };
  console.log("process.env.NODE_ENV=",process.env.NODE_ENV)
  // 检查更新：开发环境不检测更新
  if (process.env.NODE_ENV !== "development") {
    checkAndUpdate();
  }
});

onMounted(() => {
  // 0.5秒后执行
  // setTimeout(() => {
  //    setupNotifications(2);
  // }, 500);
  // setTimeout(() => {
  //    setupNotifications(3);
  // }, 500);
  //  setTimeout(() => {
  //    setupNotifications(4);
  // }, 500);
  //  setTimeout(() => {
  //    setupNotifications(5);
  // }, 500);
  //  setTimeout(() => {
  //    setupNotifications(5);
  // }, 2500);
  //  setTimeout(() => {
  //    setupNotifications(15);
  // }, 1500);
  // setupNotifications(5);
  // setupNotifications(6);
});

watch(
  () => walletStore.account,
  (val) => {
    if (val) {
      wsStore.connect(walletStore.getAccount);
    }
  },
  {
    immediate: true, // 默认立即执行
  }
);

onUnmounted(() => {
  wsStore.close();
});
</script>

<style lang="less">
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  background-color: @bg-color2;
}
</style>

<style scoped lang="less">
.app-container {
  background-color: #000;
}
.app-bar-header {
  :deep(.van-nav-bar__title) {
    font-weight: 500;
    font-size: 19px;
    color: #000000;
  }
  :deep(.van-icon) {
    color: @font-color3;
  }
}
</style>