eiacloud-mcp-ui/src/pages/pc/index.vue

<template>
  <div ref="pageShellRef" class="page-shell">
    <Header
      v-if="showDesktopHeader && !isFullScreen"
      :is-logged-in="Boolean(WEBSID)"
      :user-avatar="userInfo?.completeImgUrl ?? defaultAvatar"
      @login="openLoginDialog"
    />
    <div class="page-main">
      <router-view></router-view>
    </div>
  </div>
  <Login
    v-if="loginVisable && route.name !== 'login'"
    @save-user="(data) => saveUserInfo(data)"
  />
</template>

<script setup>
import { computed, nextTick, onBeforeMount, ref, watch } from "vue";
import Header from "@/components/pcHeader.vue";
import Login from "@/components/login.vue";
import globalStore from "@/store/modules/global";
import { useRoute, useRouter } from "vue-router";
import { getMenuPromission } from "@/api/login";
import { IsPC } from "@/utils/common";
import { ensureMcpToken } from "@/utils/mcpToken";

const isPC = IsPC();
const route = useRoute();
const router = useRouter();
const global = globalStore();
const pageShellRef = ref(null);

const WEBSID = computed(() => global.WEBSID);
const loginVisable = computed(() => global.loginVisable);
const defaultAvatar =
  "https://cdntest.eiacloud.com/ai/approval/icons/avatar.png";
const userInfo = computed(() => global.userInfo);
const isFullScreen = computed(() => Boolean(route.meta?.fullScreen));
const showDesktopHeader = computed(() => isPC);

const scrollPageToTop = () => {
  nextTick(() => {
    if (pageShellRef.value) {
      pageShellRef.value.scrollTop = 0;
    }
    window.scrollTo(0, 0);
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
  });
};

watch(
  () => route.fullPath,
  () => {
    scrollPageToTop();
  },
);

const openLoginDialog = () => {
  if (route.name === "login") return;
  router.push({
    name: "login",
    query: { redirect: route.fullPath || "/" },
  });
};

const saveUserInfo = async (userInfo) => {
  global.setUserInfo(userInfo.data);
  global.setWebsid(userInfo?.extraMap?.WEBSID ?? "");
  global.setUserId(userInfo?.data?.id ?? "");
  global.setYundian(userInfo?.ydCount);
  const res = await getMenuPromission();
  globalStore().promission = res?.data ?? [];
  await ensureMcpToken();
};

onBeforeMount(async () => {
  const res = await getMenuPromission();
  globalStore().promission = res?.data ?? [];
});
</script>

<style scoped lang="less">
.page-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.page-main {
  flex: 0 0 auto;
  min-height: 0;
  background-color: transparent;
}
</style>