tiaozhan-exam-2/src/views/HeaderView.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { NDropdown, NButton, useMessage, NInput, NGradientText } from 'naive-ui';
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()
const message = useMessage()

var edit = reactive({
  state: false,
  userInfo: {
    name: null,
    password: null
  }
})

if (sessionStorage.getItem('user_info') === null) {
  axios({
    method: 'get',
    url: 'user/state'
  }).then((res) => {
    if (res.status == 200 && res.data.success) {
      var userInfo = {
        id: res.data.data.id,
        name: res.data.data.name
      }
      store.commit('set', userInfo)
      sessionStorage.setItem('user_info', JSON.stringify(userInfo))
    }
  })
}

else {
  if (store.state.id === null) {
    var userInfo = JSON.parse(sessionStorage.getItem('user_info'))
    store.commit('set', userInfo)
    edit.userInfo = userInfo
  }
}

var options = ref([
  {
    label: '查看个人资料',
    key: 'profile',
  },
  {
    label: '编辑用户资料',
    key: 'editProfile',
  },
  {
    label: '退出登录',
    key: 'logout',
  }
])

const JSONHeader = {
  'Content-Type': 'application/json'
}

function handleSelect(key: string | number) {
  switch (key) {
    case 'profile': {
      message.info(
        "ID: " + store.state.id + " 丨 姓名：" + store.state.name,
        {
          keepAliveOnHover: true
        }
      )
      break
    }
    case 'editProfile': {
      router.push('/edit')
      break
    }
    case 'logout': {
      axios({
        method: 'delete',
        url: 'user'
      }).then((res) => {
        if (res.status == 200 && res.data.success) {
          sessionStorage.removeItem('user_info')
          store.commit('clear')
          router.push('/login')
        }
      })
      break
    }
  }
}
</script>

<template>
  <div class="header" v-if='router.currentRoute.value.path != "/login"
  && router.currentRoute.value.path != "/edit"
  && router.currentRoute.value.path != "/404"'>
    <n-dropdown :options="options" @select="handleSelect">
      <n-button quaternary class="header_but" size="large">{{ store.state.name }}</n-button>
    </n-dropdown>
  </div>
  <div class="editarea" v-if="edit.state">
    <div class="buts flexdiv">
      <n-gradient-text type="success">
        修改信息
      </n-gradient-text>
      <div class="butts">
        <n-button @click="edit.state = false">取消</n-button>
        <n-button @click="editProfile">修改</n-button>
      </div>
    </div>
    <div class="row flexdiv">
      <div class="r_label">用户名</div>
      <n-input v-model:value="edit.userInfo.name" type="text" placeholder="请输入你的用户名" />
    </div>
    <div class="row flexdiv">
      <div class="r_label">密码</div>
      <n-input v-model:value="edit.userInfo.password" type="password" show-password-on="mousedown"
        placeholder="请输入你的密码" />
    </div>
  </div>

</template>

<style scoped>
.header {
  display: flex;
  position: relative;
  flex-direction: row-reverse;
  width: 100%;
  height: 5vh;
}

.header_but {
  justify-self: flex-end;
  display: flex;
  max-width: 100px;
  margin-top: 10px;
  border-bottom: 1px solid hsla(160, 100%, 37%, 1);
}

.editarea {
  position: absolute;
  margin-top: 30px;
  border: 1px solid hsla(160, 100%, 37%, 1);
  border-radius: 0.25rem;
  padding: 10px 20px;
}

.flexdiv {
  display: flex;
  align-items: center;
  justify-content: center;
}

.erralert {
  width: 30vw;
}

.n-alert-body {
  flex-direction: column;
}

.n-gradient-text {
  font-weight: 500;
  font-size: 1.4rem;
}

.n-button {
  width: 100px;
}

.row {
  margin-top: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.r_label {
  justify-content: flex-start;
  width: 70px;
}

.buts {
  justify-content: space-between;
}
</style>