magic_node_web/src/App.vue

<template>
  <router-view />
  <loading-view />
  <Toaster position="top-center" richColors />
  <bind-parent-popup ref="bindParentPopupRef" />
  <!-- 音乐播放器 -->
  <music-player />
  <!-- 语言选择栏弹出容器 -->
  <div id="language-popover-teleport"></div>
</template>

<script setup lang="ts">
import loadingView from "./components/loadingView.vue";
import "vue-sonner/style.css";
import { Toaster } from "vue-sonner";
import { onMounted, ref, computed, watch } from "vue";
import BindParentPopup from "@/components/BindParentDialog/index.vue";
import MusicPlayer from "@/components/MusicPlayer/index.vue";
import { useGlobalStore } from "./store/modules/globalStore";
import { useThemeStore } from "./store/modules/themeStore";
const bindParentPopupRef = ref(null);

const globalStore = useGlobalStore();
const themeStore = useThemeStore();

// 初始化主题
themeStore.initTheme();

const showBindModal = computed(() => globalStore.showBindModal);
watch(
  () => showBindModal.value,
  newVal => {
    if (newVal) {
      bindParentPopupRef.value?.open();
    }
  }
);

onMounted(() => {
  // 检查登录状态
  const token = localStorage.getItem("token");
  if (token) {
    globalStore.setIsLoggedIn(true);
  }
});
</script>
<style lang="scss">
.van-sticky--fixed {
  background: var(--bg-sticky, #161617);
}

@media screen and (min-width: 1000px) {
  .van-popup {
    max-width: 468px !important;
  }
}

html,
body {
  overscroll-behavior-y: none;
  height: 100%;
  background: var(--bg-primary, #161617);
  overflow: hidden;
}

#app {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  color: var(--text-primary, #ffffff);
}

body {
  font-size: 14px;
  line-height: 22px;
  color: var(--text-primary, #fff);
  font-family: PingFangSC, "PingFang SC", sans-serif;
  font-family: "Chakra Petch" !important;
  --van-popover-light-background: none;
  --van-popover-radius: none;
  --van-padding-md: 16px;
  padding-bottom: env(safe-area-inset-bottom);
}

.w-100 {
  width: 100%;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-start {
  justify-content: flex-start;
}

.flex-center {
  justify-content: center;
}

.flex-end {
  justify-content: flex-end;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.no-shrink {
  flex-shrink: 0;
}

.gray {
  color: var(--text-secondary, #8b8b8b);
}

.theme-color {
  color: var(--color-accent, #000);
}

.font-14 {
  font-size: 14px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.color-theme {
  color: var(--color-accent, #000);
}

.din {
  font-family: "DIN", sans-serif;
}

.pointer {
  cursor: pointer;
}

#language-popover-teleport {
  --van-popover-light-background: var(--bg-popover, #161617);
  --van-popover-horizontal-action-height: 44px;
  --van-popover-radius: 4px;
}
</style>