frontend/src/views/shared/UserHomeLayout.vue

<template>
  <div class="user-home-layout">
    <div class="main-container">
      <div class="menu-container-large">
        <template v-for="tab of tabs">
          <icon-button
            :size="50"
            :theme="currentRouteName.match(tab.name) ? 'blue' : ''"
            :key="tab.name"
            @click="handleIconButtonClick(tab.name)"
            :title="tab.title"
          >
            {{tab.icon}}
          </icon-button>
        </template>
      </div>
      <div class="tab-container">
        <slide-in-transition>
          <router-view/>
        </slide-in-transition>
      </div>
    </div>

    <div class="menu-container-small">
      <template v-for="tab of tabs">
        <icon-button
          :size="50"
          :theme="currentRouteName.match(tab.name) ? 'blue' : ''"
          :key="tab.name"
          @click="handleIconButtonClick(tab.name)"
        >
        </icon-button>
      </template>
    </div>
    <div class="exit" @click="handleLogout">
      <icon-button>exit_to_app</icon-button>
      退出登录
    </div>
  </div>
</template>

<script>
import IconButton from '@/components/Basic/IconButton'
import { logout } from '@/server/user'
import SlideInTransition from '@/animations/SlideInSameTransition'

export default {
  components: { IconButton, SlideInTransition },
  props: ['tabs', 'role'],
  data () {
    return {
      currentRouteName: this.$route.name
    }
  },
  mounted () {
    this.resizeHandler()
    window.addEventListener('resize', this.resizeHandler)
  },
  destroyed () {
    window.removeEventListener('resize', this.resizeHandler)
  },
  watch: {
    $route () {
      this.currentRouteName = this.$route.path
    }
  },
  methods: {
    resizeHandler () {
      if (window.innerWidth < 900) {
        this.componentType = 'full-screen-component'
      } else {
        this.componentType = 'tab-side-component'
      }
    },
    handleIconButtonClick (name) {
      this.$router.push(`/${this.role}/${name}`)
    },
    handleLogout () {
      logout()
      this.$setSuccessMessage('您已退出登录')
      this.$router.push({ name: 'login' })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/style/theme.scss';

.user-home-layout {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-container {
  display: flex;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}

.tab-container {
  overflow: hidden;
  transition: width .2s;
}

// 大屏幕情况
@media (min-width: 600px) {
  .menu-container-large {
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .icon-button {
      margin: 16px 0;
    }
  }

  .tab-container {
    display: flex;
    padding: 24px 18px;
    max-width: 800px;
  }

  .menu-container-small {
    display: none;
  }
}

// 小屏幕情况
@media (max-width: 599px) {
  .menu-container-large {
    display: none;
  }

  .tab-container {
    box-sizing: border-box;
    height: calc(100vh - 54px);
    padding: 48px 24px;
    margin-bottom: 30px;
    width: 100%;
    flex: 1;
  }

  .user-home-layout {
    justify-content: unset;
    min-height: calc(100vh - 54px);
  }

  .menu-container-small {
    z-index: 2;
    backdrop-filter: saturate(180%) blur(15px);
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    position: fixed;
    padding: 12px 0;
    height: 54px;
    box-sizing: border-box;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .tab {
    min-width: unset;
    padding: unset;
  }
}

.exit {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 24px;
  display: flex;
  align-items: center;
  color: #6a7a8a;
}

@supports (not(backdrop-filter: saturate(180%) blur(15px))) {
  .menu-container-small {
    background: rgb(255, 255, 255);
  }
}
</style>