无人机管理后台前端(已迁走)
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9
src/page/index/top/index.vue
@@ -1,39 +1,25 @@
<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div
        class="avue-breadcrumb"
        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="setting.collapse && !isHorizontal"
      >
      <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="setting.collapse && !isHorizontal">
        <i class="icon-navicon" @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <top-menu ref="topMenu" v-if="setting.menu"></top-menu>
<!--<top-menu ref="topMenu" v-if="setting.menu"></top-menu>-->
      <top-search class="top-bar__item" v-if="setting.search"></top-search>
    </div>
    <div class="top-bar__right">
      <div v-if="setting.color" class="top-bar__item">
        <top-color></top-color>
      </div>
      <div v-if="setting.theme" class="top-bar__item">
        <top-theme></top-theme>
      </div>
      <div v-if="setting.lock" class="top-bar__item">
        <top-lock></top-lock>
      </div>
      <div class="top-bar__item">
        <top-lang></top-lang>
      </div>
      <div class="top-bar__item" v-if="setting.fullscreen">
        <top-full></top-full>
      </div>
      <div class="top-bar__item" v-if="setting.debug">
        <top-logs></top-logs>
      <div class="icon-box">
        <top-lock v-if="setting.lock"/>
        <top-qna />
        <top-full v-if="setting.fullscreen" title="全屏"/>
        <img class="gateway" @click="jumpMH" src="@/assets/images/mh.png" alt="进入门户" title="进入门户" width="20" height="20">
      </div>
      <div class="top-user">
        <img class="top-bar__img" :src="userInfo.avatar" />
        <img class="top-bar__img" :src="userInfo.avatar "  alt=""/>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.real_name }}
@@ -43,14 +29,13 @@
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
<!--              <el-dropdown-item>
                <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
              </el-dropdown-item>
              </el-dropdown-item>-->
              <el-dropdown-item>
                <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click="logout" divided
                >{{ $t('navbar.logOut') }}
              <el-dropdown-item @click="logout" divided>{{ $t('navbar.logOut') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
@@ -60,17 +45,19 @@
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import topLock from './top-lock.vue';
import topMenu from './top-menu.vue';
import topSearch from './top-search.vue';
import topTheme from './top-theme.vue';
import topLogs from './top-logs.vue';
import topColor from './top-color.vue';
import topLang from './top-lang.vue';
import topFull from './top-full.vue';
import topSetting from '../setting.vue';
import { mapGetters } from 'vuex'
import topLock from './top-lock.vue'
import topMenu from './top-menu.vue'
import topSearch from './top-search.vue'
import topTheme from './top-theme.vue'
import topLogs from './top-logs.vue'
import topColor from './top-color.vue'
import topLang from './top-lang.vue'
import topFull from './top-full.vue'
import topQna from './top-qna.vue'
import topSetting from '../setting.vue'
export default {
  components: {
@@ -82,20 +69,21 @@
    topColor,
    topLang,
    topFull,
    topQna,
    topSetting,
  },
  name: 'top',
  data() {
    return {};
  data () {
    return {}
  },
  filters: {},
  created() {},
  created () { },
  computed: {
    ...mapGetters([
      'setting',
      'userInfo',
      'tagWel',
      'tagList',
      'bsTagList',
      'isCollapse',
      'tag',
      'logsLen',
@@ -104,22 +92,95 @@
    ]),
  },
  methods: {
    setCollapse() {
      this.$store.commit('SET_COLLAPSE');
    setCollapse () {
      this.$store.commit('SET_COLLAPSE')
    },
    logout() {
    logout () {
      this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning',
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: '/login' });
        });
      });
        const env = import.meta.env.VITE_APP_ENV
          const adminUrl = import.meta.env.VITE_APP_DASHBOARD_URL
           env === 'development' ? this.$router.push({ path: '/login' }):window.location.replace(`${adminUrl}#/login`)
        })
      })
    },
    jumpMH () {
      const adminUrl = import.meta.env.VITE_APP_DASHBOARD_URL
      window.location.href = `${adminUrl}#/gatewayPage`
    },
  },
};
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.avue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.top-bar__left {
  flex: 0 0 auto;
}
.top-bar__title {
  flex: 1;
  display: flex;
  align-items: center;
  height: pxToVh(80);
}
.top-bar__right {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  height: 100%;
  .icon-box{
    display: flex;
    align-items: center;
    gap: 0 20px;
    .gateway{
      width: 25px;
      height: 25px;
    }
    >*{
      cursor: pointer;
    }
  }
}
.top-bar__item {
  margin-right: 15px;
  display: inline-block !important;
}
.top-user {
  display: flex;
  align-items: center;
}
.top-bar__img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #606266;
}
.el-dropdown-link:hover {
  color: #409EFF;
}
</style>