tall4-pc/src/App.vue

<template>
  <div v-if="!token"></div>

  <a-config-provider v-else :locale="locale">
    <a-layout>
      <a-layout-header style="background: #fff"> <TopNavbar /> </a-layout-header>
      <a-layout>
        <!--      日历页-->
        <a-layout-sider v-show="collapsed" style="background: #fff"><Left /></a-layout-sider>

        <a-layout>
          <a-layout-sider class="project-detail"><ProjectDetail /></a-layout-sider>

          <a-layout>
            <!--        导航栏-->
            <a-layout-header style="background: #fff">
              <Navbar />
            </a-layout-header>
            <!--        内容区-->
            <a-layout-content><router-view></router-view></a-layout-content>
            <!--        脚部-->
            <!--        <a-layout-footer>Footer</a-layout-footer>-->
          </a-layout>
        </a-layout>
      </a-layout>
    </a-layout>
  </a-config-provider>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import Left from 'components/tall/left/Index.vue';
import Navbar from 'components/tall/top/Navbar.vue';
import TopNavbar from 'components/tall/top/TopNavbar.vue';
import ProjectDetail from 'components/tall/center/ProjectDetail.vue';

const locale = zhCN;
const store = useStore();
const collapsed = computed(() => store.state.layout.display.left); // 是否显示左栏

// 验证 获取query中u参数 获取token
const route = useRoute();
const router = useRouter();

useRouter()
  .isReady()
  .then(async () => {
    const u = computed(() => route.query.u);
    if (!u.value) {
      // 获取url中的u参数, 没有提示缺少参数
      console.log('缺少参数');
      router.push({ path: '/user/signIn' });
    } else {
      // 根据userId 获取token
      await store.dispatch('user/getTokenByUserId', u.value);
    }
  });

const token = computed(() => store.getters['user/token']);
</script>

<style>
html,
body,
#app,
#app > section {
  height: 100%;
}

.ant-layout-header {
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #cccccc;
}

.ant-layout-sider {
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  border-right: 1px solid #cccccc;
  flex: 0 0 300px !important;
}

.project-detail {
  width: 400px !important;
  max-width: 400px !important;
  min-width: 400px !important;
  border-right: 1px solid #cccccc;
  flex: 0 0 400px !important;
  background: #fff;
}
</style>