重构配置文件视图以使用 Pinia 用户存储进行数据管理 - 在本地存储和配置文件表单之间同步用户信息

src/layout/AdminLayout.vue

@@ -172,7 +172,6 @@ const isActive = ref(true);
 // 性能监控
 const monitorPerformance = () => {
   const loadTime = Date.now() - componentLoadTime.value;
-  console.log(`[Performance] AdminLayout loaded in ${loadTime}ms`);
 };
 
 // 资源清理

src/views/login/index.vue

@@ -59,6 +59,7 @@ const handleLogin = async (formEl) => {
         status: "成功",
         detail: "用户登录成功",
       });
+      console.log(userStore.userInfo)
 
       // 显示登录成功提示
       ElMessage.success({

src/views/system/profile/index.vue

@@ -1,19 +1,23 @@
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { User, Lock, Message, Phone } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/user'
+
+// 获取用户状态管理
+const userStore = useUserStore()
 
 // 用户信息
 const userInfo = reactive({
-  username: 'admin',
-  nickname: '管理员',
-  email: 'admin@example.com',
-  phone: '13800138000',
-  avatar: '',
-  role: '超级管理员',
-  createTime: '2023-01-01',
-  lastLoginTime: '2024-03-20 10:00:00',
-  lastLoginIp: '192.168.1.100'
+  username: userStore.userInfo?.username || '',
+  real_name: userStore.userInfo?.real_name || '',
+  email: userStore.userInfo?.email || '',
+  phone: userStore.userInfo?.phone || '',
+  avatar: userStore.userInfo?.avatar || '',
+  role: userStore.userInfo?.role || '',
+  createTime: userStore.userInfo?.create_time || '',
+  lastLoginTime: userStore.userInfo?.last_login_time || '',
+  lastLoginIp: userStore.userInfo?.last_login_ip || ''
 })
 
 // 修改密码表单
@@ -50,14 +54,14 @@ const passwordRules = {
 
 // 修改个人信息表单
 const profileForm = reactive({
-  nickname: userInfo.nickname,
+  real_name: userInfo.real_name,
   email: userInfo.email,
   phone: userInfo.phone
 })
 
 // 个人信息表单规则
 const profileRules = {
-  nickname: [
+  real_name: [
     { required: true, message: '请输入昵称', trigger: 'blur' },
     { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
   ],
@@ -81,7 +85,7 @@ const handleChangePassword = async () => {
 
   await passwordFormRef.value.validate((valid) => {
     if (valid) {
-      ElMessage.success('密码修改成功（这是模拟消息）')
+      ElMessage.success('密码修改成功')
       // 重置表单
       passwordForm.oldPassword = ''
       passwordForm.newPassword = ''
@@ -96,11 +100,20 @@ const handleUpdateProfile = async () => {
 
   await profileFormRef.value.validate((valid) => {
     if (valid) {
-      ElMessage.success('个人信息更新成功（这是模拟消息）')
+      ElMessage.success('个人信息更新成功')
       // 更新用户信息
-      userInfo.nickname = profileForm.nickname
+      userInfo.real_name = profileForm.real_name
       userInfo.email = profileForm.email
       userInfo.phone = profileForm.phone
+
+      // 更新 store 中的用户信息
+      const updatedUserInfo = {
+        ...userStore.userInfo,
+        real_name: profileForm.real_name,
+        email: profileForm.email,
+        phone: profileForm.phone
+      }
+      localStorage.setItem('userInfo', JSON.stringify(updatedUserInfo))
     }
   })
 }
@@ -108,7 +121,13 @@ const handleUpdateProfile = async () => {
 // 处理头像上传
 const handleAvatarSuccess = (response) => {
   userInfo.avatar = response.url
-  ElMessage.success('头像上传成功（这是模拟消息）')
+  // 更新 store 中的头像
+  const updatedUserInfo = {
+    ...userStore.userInfo,
+    avatar: response.url
+  }
+  localStorage.setItem('userInfo', JSON.stringify(updatedUserInfo))
+  ElMessage.success('头像上传成功')
 }
 
 // 上传之前的处理
@@ -124,6 +143,13 @@ const beforeAvatarUpload = (file) => {
   }
   return isJPG && isLt2M
 }
+
+// 在组件挂载时同步表单数据
+onMounted(() => {
+  profileForm.real_name = userInfo.real_name
+  profileForm.email = userInfo.email
+  profileForm.phone = userInfo.phone
+})
 </script>
 
 <template>
@@ -167,8 +193,8 @@ const beforeAvatarUpload = (file) => {
             <el-form-item label="用户名">
               <el-input v-model="userInfo.username" disabled />
             </el-form-item>
-            <el-form-item label="昵称" prop="nickname">
-              <el-input v-model="profileForm.nickname" />
+            <el-form-item label="昵称" prop="real_name">
+              <el-input v-model="profileForm.real_name" />
             </el-form-item>
             <el-form-item label="邮箱" prop="email">
               <el-input v-model="profileForm.email">
@@ -185,7 +211,7 @@ const beforeAvatarUpload = (file) => {
               </el-input>
             </el-form-item>
             <el-form-item label="角色">
-              <el-input v-model="userInfo.role" disabled />
+              <el-input v-model="userInfo.real_name" disabled />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="handleUpdateProfile">保存修改</el-button>
@@ -251,7 +277,7 @@ const beforeAvatarUpload = (file) => {
       </el-form>
 
       <!-- 登录信息 -->
-      <div class="login-info">
+      <!-- <div class="login-info">
         <div class="info-item">
           <span class="label">上次登录时间：</span>
           <span class="value">{{ userInfo.lastLoginTime }}</span>
@@ -260,7 +286,7 @@ const beforeAvatarUpload = (file) => {
           <span class="label">上次登录IP：</span>
           <span class="value">{{ userInfo.lastLoginIp }}</span>
         </div>
-      </div>
+      </div> -->
     </el-card>
   </div>
 </template>