web/src/layout/index.vue

<template>
  <t-layout class="app-layout">
    <t-aside class="app-menu" width="82px">
      <div class="app-menu-list">
        <div class="app-menu-logo">
          <img src="@/assets/imgs/menu-logo.png" alt="logo" />
        </div>
        <div
          v-for="item in userStore.headerMenus"
          :key="item.name"
          :class="[
            'app-menu-item',
            { 'is-active': userStore.curPageModule === item.name },
          ]"
          @click="moduleChange(item.name)"
        >
          <svg-icon
            v-if="item.meta.icon"
            prefix="icon-icon-fill"
            :name="item.meta.icon"
          ></svg-icon>
          <p>{{ item.meta.title }}</p>
        </div>
      </div>
      <div class="app-menu-footer"></div>
    </t-aside>
    <t-aside v-if="appStore.showSubmenu" class="app-submenu" width="232px">
      <left-menu class="app-submenu-body"></left-menu>
      <div class="app-submenu-footer">
        <t-dropdown
          :minColumnWidth="203"
          trigger="hover"
          :popupProps="{
            overlayInnerClassName: 'app-submenu-dropdown',
          }"
          @click="clickHandler"
        >
          <div class="app-submenu-user">
            <div class="app-submenu-user-content">
              <svg-icon name="user-circle"></svg-icon>
              <span class="real-name">{{ userStore.user?.realName }}</span>
              <span v-if="userStore.user?.mobileNumber" class="real-name">{{
                userStore.user?.mobileNumber
              }}</span>
            </div>
            <svg-icon name="more"></svg-icon>
          </div>
          <t-dropdown-menu>
            <t-dropdown-item :value="1">
              <template #prefixIcon>
                <svg-icon name="modify-pwd"></svg-icon>
              </template>
              修改密码
            </t-dropdown-item>
            <t-dropdown-item :value="2">
              <template #prefixIcon>
                <svg-icon name="logout"></svg-icon>
              </template>
              退出登录
            </t-dropdown-item>
          </t-dropdown-menu>
        </t-dropdown>
      </div>
    </t-aside>
    <t-content class="layout-content">
      <router-view v-slot="{ Component }">
        <transition name="fade-slide" mode="out-in" appear>
          <component :is="Component" />
        </transition>
      </router-view>
    </t-content>
  </t-layout>
</template>

<script setup name="Layout" lang="jsx">
import { ref, onMounted, watch } from 'vue';
import { useUserStore, useWorkStore, useAppStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import LeftMenu from './left-menu.vue';
import { moduleMap } from '@/router/asyncRoutes';
import { MessagePlugin } from 'tdesign-vue-next';
import useFullscreen from '@/hooks/useFullscreen';
const { registFullscreenChange } = useFullscreen();

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const workStore = useWorkStore();
const appStore = useAppStore();

const moduleChange = (name) => {
  userStore.setCurPageModule(name);
  const menu = userStore.moduleMenus.find((item) => !item.disabled);
  if (!menu) {
    MessagePlugin.error('权限配置错误！');
    return;
  }
  router.push({ name: menu.name });
};
const setModuleByPath = () => {
  let firstPath = route.path.split('/')[1];
  let curModuleName = moduleMap[firstPath];
  userStore.setCurPageModule(curModuleName);
};
onMounted(() => {
  setModuleByPath();
  registFullscreenChange();
});

const clickHandler = (data) => {
  if (data.value === 1) {
    router.push({ name: 'PasswordModify' });
  } else if (data.value === 2) {
    userStore.logout();
  }
};

watch(
  () => route.name,
  () => {
    if (userStore.curPageModule !== 'MyWorkbenches') return;
    workStore.updateWorkCounts();
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
.app-layout {
  background-color: #f2f3f5;
  height: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;

  .layout-content {
    flex-grow: 2;
    overflow: auto;
    border-left: 1px solid #e5e5e5;
  }
  .app-menu {
    background-color: #f2f3f5;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    flex-grow: 0;
    flex-shrink: 0;

    &-list {
      padding: 16px 8px 40px;
    }
    &-logo {
      height: 52px;
      padding: 12px 8px;
    }
    &-item {
      margin: 4px 0;
      padding: 8px 0;
      text-align: center;
      border-radius: 4px;
      color: #4e5969;

      cursor: pointer;
      &:hover {
        background-color: #e5e6eb;
      }
      &.is-active {
        background-color: #e5e6eb;
        color: var(--td-brand-color);

        :deep(.svg-icon use) {
          fill: var(--td-brand-color);
        }
      }

      > i {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
      }
      > p {
        margin: 0;
        line-height: 18px;
        font-size: 12px;
      }

      .svg-icon {
        display: block;
        margin: 0 auto 3px;
        width: 18px;
        height: 18px;
      }
    }

    &-footer {
      position: absolute;
      height: 24px;
      border-radius: 3px;
      padding: 8px;
      background-color: #f2f3f5;
      z-index: 9;
    }
  }
  .app-submenu {
    background-color: #fff;
    position: relative;
    color: #262626;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    flex-grow: 0;
    flex-shrink: 0;

    &-body {
      padding-bottom: 68px;
      height: 100%;
    }

    &-footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      padding: 16px 8px;
      background-color: #fff;
      z-index: 9;
    }
    &-user {
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background-color: #f2f3f5;
      }

      &-content {
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex-grow: 2;

        span {
          margin-left: 8px;
        }
      }
    }
    :deep(.t-menu__content) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-grow: 2;
    }
    :deep(.t-menu__count) {
      color: #fff;
      padding: 0 3px;
      background-color: var(--td-error-color);
      line-height: 20px;
      height: 20px;
      border-radius: 3px;
      min-width: 20px;
      text-align: center;
      font-size: 12px;
    }
    :deep(.t-menu__item .svg-icon) {
      margin-right: 8px;
    }
    :deep(.t-menu__item:not(.t-is-active)) {
      color: #262626;
    }
    :deep(.t-menu__item:not(.t-is-disabled):hover) {
      background-color: #e8f3ff;
    }
    :deep(.t-menu__item.t-is-active) {
      color: var(--td-brand-color);
      background-color: #e8f3ff;
    }
    :deep(.t-menu__item.t-is-active .svg-icon use) {
      fill: var(--td-brand-color);
    }
    :deep(.t-menu__item.t-is-disabled) {
      color: rgb(140, 140, 140);
    }
  }
}
</style>
<style lang="less">
.app-submenu-dropdown {
  .t-dropdown__item {
    padding-top: 8px;
    padding-bottom: 8px;
    &:hover {
      color: var(--td-brand-color);
      background-color: #e8f3ff;
      .svg-icon use {
        fill: var(--td-brand-color);
      }
    }
  }
}
</style>