DIIA/src/layout/index.vue

<template>
    <!-- 路由出口 -->
    <router-layout />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { useI18n } from 'vue-i18n';
  import { message } from 'ant-design-vue';
  import {toggleFullscreen, isFullscreen} from 'ele-admin-pro';
  import { useTenantStore } from '@/store/modules/tenant';
  import { useThemeStore } from '@/store/modules/theme';
  import RouterLayout from '@/components/RouterLayout/index.vue';
  import {
    HIDE_SIDEBARS,
    HIDE_FOOTERS,
    REPEATABLE_TABS,
    HOME_TITLE,
    HOME_PATH,
    LAYOUT_PATH,
    REDIRECT_PATH,
    I18N_ENABLE
  } from '@/config/setting';
  import {
    addPageTab,
    removePageTab,
    removeAllPageTab,
    removeLeftPageTab,
    removeRightPageTab,
    removeOtherPageTab,
    reloadPageTab,
    setHomeComponents
  } from '@/utils/page-tab-util';
  import type { TabCtxMenuOption } from 'ele-admin-pro/es/ele-pro-layout/types';
  import {useUserStore} from "@/store/modules/user";

  const { push } = useRouter();
  const { t, locale } = useI18n();
  const tenantStore = useTenantStore();
  const themeStore = useThemeStore();
  const userStore = useUserStore();
  // 租户信息
  const { menus } = storeToRefs(userStore);
  const { siteInfo } = storeToRefs(tenantStore);
  console.log(siteInfo.value.websiteName,'siteInfo.')
  // 网站名称
  const projectName = siteInfo.value?.websiteName || '网站名称';
  // 网站LOGO
  const logoPath =
      siteInfo.value?.websiteLogo || 'https://www.gxwebsoft.com/ws-logo.svg';
  // 是否全屏
  const fullscreen = ref(false);
  // 布局风格
  const {
    tabs,
    collapse,
    sideNavCollapse,
    bodyFullscreen,
    showTabs,
    showFooter,
    headStyle,
    sideStyle,
    layoutStyle,
    sideMenuStyle,
    tabStyle,
    fixedHeader,
    fixedSidebar,
    fixedBody,
    bodyFull,
    logoAutoSize,
    colorfulIcon,
    sideUniqueOpen,
    styleResponsive
  } = storeToRefs(themeStore);

  /* 侧栏折叠切换 */
  const updateCollapse = (value: boolean) => {
    themeStore.setCollapse(value);
  };

  /* 双侧栏一级折叠切换 */
  const updateSideNavCollapse = (value: boolean) => {
    themeStore.setSideNavCollapse(value);
  };

  /* 内容区域全屏切换 */
  const updateBodyFullscreen = (value: boolean) => {
    themeStore.setBodyFullscreen(value);
  };

  /* logo 点击事件 */
  const onLogoClick = (isHome: boolean) => {
    isHome || push(LAYOUT_PATH);
  };

  /* 监听屏幕尺寸改变 */
  const screenSizeChange = () => {
    themeStore.updateScreenSize();
    fullscreen.value = isFullscreen();
  };

  /* 全屏切换 */
  const onFullscreen = () => {
    try {
      fullscreen.value = toggleFullscreen();
    } catch (e) {
      message.error('您的浏览器不支持全屏模式');
    }
  };

  /* 页签右键菜单点击事件 */
  const onTabContextMenu = ({
    key,
    tabKey,
    item,
    active
  }: TabCtxMenuOption) => {
    switch (key) {
      case 'reload': // 刷新
        reloadPageTab({
          isHome: !item,
          fullPath: item?.fullPath ?? tabKey
        });
        break;
      case 'close': // 关闭当前
        removePageTab({
          key: item?.fullPath ?? tabKey,
          active
        });
        break;
      case 'left': // 关闭左侧
        removeLeftPageTab({
          key: tabKey,
          active
        });
        break;
      case 'right': // 关闭右侧
        removeRightPageTab({
          key: tabKey,
          active
        });
        break;
      case 'other': // 关闭其他
        removeOtherPageTab({
          key: tabKey,
          active
        });
        break;
    }
  };

  /* 菜单标题国际化 */
  const i18n = (_path: string, key?: string) => {
    if (!I18N_ENABLE || !key) {
      return;
    }
    const k = 'route.' + key + '._name';
    const title = t(k);
    if (title !== k) {
      return title;
    }
  };
</script>

<script lang="ts">
  import * as MenuIcons from './menu-icons';

  export default {
    name: 'Layout',
    components: MenuIcons
  };
</script>

<style lang="less">
</style>