fix(holiday): 加大折线图纵向间距并同步 Word 尺寸

xyc

1 天以前 54e10aee11aa4a10926df02782ca07d41eeb9b98

 traffic-audit-web/src/components/AppHeader.vue

@@ -1,37 +1,130 @@
<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 }}
      </span>
      <el-button type="text" class="header-link" @click="openChangePwd">
        <i class="el-icon-key"></i> 修改密码
      </el-button>
      <el-button type="text" class="header-logout" @click="logout">
        <i class="el-icon-switch-button"></i> 退出登录
      </el-button>
    </div>

    <el-dialog title="修改密码" :visible.sync="pwdDialogVisible" width="420px" @closed="resetPwdForm">
      <el-form ref="pwdForm" :model="pwdForm" :rules="pwdRules" label-width="90px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="pwdForm.oldPassword" type="password" show-password placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="pwdForm.newPassword" type="password" show-password placeholder="至少 6 位"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="pwdForm.confirmPassword" type="password" show-password placeholder="再次输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="pwdDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="pwdSaving" @click="submitPwd">保存</el-button>
      </div>
    </el-dialog>
  </el-header>
</template>

<script>
import api from '@/api'

export default {
  name: 'AppHeader',
  props: {
    title: { type: String, required: true }
  },
  computed: {
    username() {
      return localStorage.getItem('username') || 'admin'
  data() {
    return {
      version: '',
      pwdDialogVisible: false,
      pwdSaving: false,
      pwdForm: { oldPassword: '', newPassword: '', confirmPassword: '' },
      pwdRules: {
        oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '新密码长度不能少于 6 位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          {
            validator: (rule, value, cb) => (value === this.pwdForm.newPassword ? cb() : cb(new Error('两次输入的密码不一致'))),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  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() {
      this.pwdForm = { oldPassword: '', newPassword: '', confirmPassword: '' }
      this.pwdDialogVisible = true
      this.$nextTick(() => this.$refs.pwdForm && this.$refs.pwdForm.clearValidate())
    },
    resetPwdForm() {
      this.$refs.pwdForm && this.$refs.pwdForm.clearValidate()
    },
    submitPwd() {
      this.$refs.pwdForm.validate(valid => {
        if (!valid) return
        this.pwdSaving = true
        api.post('/auth/change-password', {
          oldPassword: this.pwdForm.oldPassword,
          newPassword: this.pwdForm.newPassword
        })
          .then(() => {
            this.$message.success('密码修改成功')
            this.pwdDialogVisible = false
          })
          .catch(err => {
            if (err && err._toast) return
            const d = err && err.response && err.response.data
            this.$message.error((d && d.message) || '密码修改失败')
          })
          .finally(() => { this.pwdSaving = false })
      })
    },
    logout() {
      this.$confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('token')
        localStorage.removeItem('username')
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('username')
        sessionStorage.removeItem('realName')
        sessionStorage.removeItem('modules')
        this.$message.success('已退出登录')
        this.$router.push('/login')
      }).catch(() => {})
@@ -60,6 +153,16 @@
  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; }
.header-logout:hover { color: #ffd04b; }
</style>
</style>