yoe-shop-web/src/layout/index.vue

<template>
  <div class="app-wrapper">
    <!-- 根据 permission.ts 的判断逻辑决定显示哪个header -->
    <template v-if="headerType == 'dataHeader'">
      <dataHeader :userInfo="userStore.userInfo" v-if="whiteList.indexOf(route.path) == -1" />
    </template>
    <template v-else-if="headerType == 'jdHeader'">
      <jdHeader v-if="whiteList.indexOf(route.path) == -1" />
    </template>
    <template v-else-if="headerType == 'default'">
      <Header v-if="meta.header != 'hide'" />
      <Search v-if="meta.search != 'hide' && whiteList.indexOf(route.path) == -1" :meta="meta" />
    </template>
    <Nav v-if="meta.nav" :meta="meta" />
    <Breadcrumb v-if="meta.breadcrumb" />
    <div class="pages-bos" :class="meta.workbench ? 'pages-bos1' : 'pages-bos2'" :style="{ minHeight: boxHeight }">
      <Workbench ref="WorkbenchRef" v-if="meta.workbench" />
      <router-view> </router-view>
    </div>
    <Foot />
  </div>
</template>

<script setup lang="ts">
import { Header, Search, Nav, Breadcrumb, Foot, Workbench } from './components';
import dataHeader from '@/views/home/datacomponents/JDHeader.vue';
import jdHeader from '@/views/home/jdcomponents/JDHeader.vue';
import { stationStore } from '@/store/modules/station';
import { useUserStore } from '@/store/modules/user';

const route = useRoute();
const meta = ref<any>({});
const WorkbenchRef = ref<any>(null);
const boxHeight = ref<any>('0px');
const station = stationStore();
const userStore = useUserStore();
const whiteList = [
  '/index',
  '/',
  '/indexDiy',
  '/indexMro',
  '/indexMroDiy',
  '/indexFuli',
  '/indexFuliDiy',
  '/indexData',
  '/indexDataDiy',
  '/indexEnterprise'
];

// 根据 permission.ts 中的逻辑判断应该显示哪个 Header
const headerType = computed(() => {
  if (station.stationData && Object.keys(station.stationData).length > 0) {
    const data = station.stationData.data || station.stationData;
    const isDiy = data?.isDiy;

    if (isDiy === 0 || isDiy === '0') {
      return 'dataHeader';
    } else if (isDiy !== undefined && isDiy !== null) {
      return 'dataHeader';
    }
  }
  // 2. 判断是否显示 jdHeader（userSonType 为 '3' 且允许 /indexEnterprise）
  if (userStore.userInfo?.user?.userSonType == '3') {
    return 'jdHeader';
  }

  // 3. 其他情况显示普通 Header
  return 'default';
});

const observeHeight = () => {
  if (!WorkbenchRef.value?.$el) return;

  const resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      boxHeight.value = entry.contentRect.height + 'px';
    }
  });

  resizeObserver.observe(WorkbenchRef.value.$el);

  // 组件卸载时清理
  onUnmounted(() => {
    resizeObserver.disconnect();
  });
};

onMounted(() => {
  nextTick(() => {
    if (route.meta.workbench) {
      observeHeight();
    }
  });
});

watch(
  () => route.meta.workbench,
  (newVal) => {
    if (newVal) {
      nextTick(() => observeHeight());
    }
  }
);

meta.value = route.meta;
watch(route, () => {
  meta.value = route.meta;
});
</script>

<style lang="scss" scoped>
@use '@/assets/styles/mixin.scss';
@use '@/assets/styles/variables.module.scss' as *;

.app-wrapper {
  min-height: 100vh;
  width: 100%;
  min-width: 1200px;
  background: #f4f4f4;
  display: flex;
  flex-direction: column;

  .pages-bos {
    display: flex;
    flex: 1;
    position: relative;

    &.pages-bos1 {
      max-width: 1500px;
      min-width: 1200px;
      width: 100%;
      margin: 20px auto;
      gap: 0 15px;
    }

    &.pages-bos2 {
      width: 100%;
    }

    .page-container {
      flex: 1;
      background-color: #ffffff;
      padding: 15px;
      margin-bottom: 20px;
    }
  }
}
</style>