xyc
2 天以前 8b71049bcca61723d586c7c8bceb791c82af7601
traffic-audit-web/src/components/AppHeader.vue
@@ -1,6 +1,9 @@
<template>
  <el-header class="app-header">
    <span class="header-title">{{ title }}</span>
    <span class="header-title">
      {{ systemName }}<span class="header-version" v-if="version">V{{ version }}</span>
      <template v-if="pageName"> - {{ pageName }}</template>
    </span>
    <div class="header-right">
      <span class="header-user">
        <i class="el-icon-user"></i> {{ username }}
@@ -43,6 +46,7 @@
  },
  data() {
    return {
      version: '',
      pwdDialogVisible: false,
      pwdSaving: false,
      pwdForm: { oldPassword: '', newPassword: '', confirmPassword: '' },
@@ -65,7 +69,22 @@
  computed: {
    username() {
      return sessionStorage.getItem('username') || 'admin'
    },
    // The system name always comes first so the version can sit right after it.
    systemName() {
      return this.title.split(' - ')[0]
    },
    pageName() {
      const parts = this.title.split(' - ')
      return parts.length > 1 ? parts.slice(1).join(' - ') : ''
    }
  },
  created() {
    api.get('/version')
      .then(res => {
        if (res && res.data && res.data.version) this.version = res.data.version
      })
      .catch(() => {})
  },
  methods: {
    openChangePwd() {
@@ -134,6 +153,14 @@
  line-height: normal;
}
.header-user { opacity: 0.92; }
.header-version {
  font-size: 12px;
  line-height: 1.6;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
}
.header-link { color: #fff; font-size: 14px; padding: 0; }
.header-link:hover { color: #ffd04b; }
.header-logout { color: #fff; font-size: 14px; padding: 0; }