frontend/src/views/authentication/Profile.vue

<script setup>
import {onMounted, ref} from 'vue';
import 'element-plus/dist/index.css';
import {useStore} from 'vuex';

const store = useStore();

const nickname = ref('');
const phoneNumber = ref('');
const email = ref('');
const department = ref('');
const role = ref('');
const createdAt = ref('');

onMounted(async () => {
  const response = await store.dispatch('authentication/fetchUserProfile');
  if (response.status === 200) {
    const user = response.data;
    nickname.value = user.nickname;
    phoneNumber.value = user.phoneNumber;
    email.value = user.email;
    department.value = user.department;
    role.value = user.role;
    createdAt.value = user.createdAt;
  }
});
</script>


<template>
  <div class="profile-container">
    <div class="profile-box">
      <h2>个人信息</h2>
      <div class="profile-image">
        <img src="@assets/avatar.jpg" alt="Profile Image"/>
      </div>
      <div class="profile-info">
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">用户昵称：</span>
          <span class="info-value">{{ nickname }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">手机号码：</span>
          <span class="info-value">{{ phoneNumber }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">用户邮箱：</span>
          <span class="info-value">{{ email }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">所属部门：</span>
          <span class="info-value">{{ department }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">所属角色：</span>
          <span class="info-value">{{ role }}</span>
        </div>
        <div class="divider"></div>
        <div class="info-item">
          <span class="info-label">创建日期：</span>
          <span class="info-value">{{ createdAt }}</span>
        </div>
        <div class="divider"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: white;
}

.profile-box {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 30%;
  max-width: 300px;
  text-align: center;
}

.profile-image img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.profile-info {
  text-align: left;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.info-label {
  font-weight: bold;
}

.info-value {
  color: #555;
}

.divider {
  height: 1px;
  background: #e0e0e0;
  margin: 0.5rem 0;
}
</style>