| | |
| | | <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 }} |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | version: '', |
| | | pwdDialogVisible: false, |
| | | pwdSaving: false, |
| | | pwdForm: { oldPassword: '', newPassword: '', confirmPassword: '' }, |
| | |
| | | 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() { |
| | |
| | | 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; } |