优化修改密码界面：显示用户名和昵称，更新v0.4.12发布说明

Author: funnywwh

docs/v0.4.12发布说明.md

@@ -4,7 +4,7 @@
 
 ## 版本概述
 
-v0.4.12 版本合并了 v0.4.10 和 v0.4.11 的所有更新，并新增了数据库自动备份功能。本次更新包括用户体验优化、安全修复和重要的数据安全保障功能。
+v0.4.12 版本合并了 v0.4.10 和 v0.4.11 的所有更新，并新增了数据库自动备份功能。本次更新包括用户体验优化、安全修复和重要的数据安全保障功能。同时优化了首次登录修改密码界面，显示用户名和昵称信息，提升用户体验。
 
 ## 主要更新
 
@@ -74,6 +74,14 @@ v0.4.12 版本合并了 v0.4.10 和 v0.4.11 的所有更新，并新增了数据
 - 修复路由守卫时序问题
 - 修复 AppHeader 中修改密码未清除状态问题
 
+### 8. 初始化修改密码界面优化 🎨
+
+优化了首次登录修改密码界面的用户体验：
+- **显示用户信息**：在修改密码表单上方显示用户名和昵称
+- **信息确认**：用户可以在设置密码前确认当前账号信息
+- **自动加载**：如果用户信息未加载，自动从后端获取并显示
+- **样式优化**：使用描述列表组件展示用户信息，界面更清晰美观
+
 ## 更新内容
 
 ### 新增文件
@@ -107,7 +115,7 @@ v0.4.12 版本合并了 v0.4.10 和 v0.4.11 的所有更新，并新增了数据
 - `frontend/src/types/user.ts` - User 接口添加 is_first_login 字段
 - `frontend/src/stores/auth.ts` - 添加 isFirstLogin 状态
 - `frontend/src/router/index.ts` - 路由守卫增强，添加备份设置路由
-- `frontend/src/views/auth/*.vue` - 登录和修改密码相关页面状态同步
+- `frontend/src/views/auth/*.vue` - 登录和修改密码相关页面状态同步，修改密码界面显示用户信息
 - `frontend/src/components/AppHeader.vue` - 修改密码状态清除
 - `frontend/src/config/menu.ts` - 添加备份设置菜单项
 

frontend/src/views/auth/ChangePassword.vue

@@ -5,6 +5,17 @@
         <h2>修改密码</h2>
       </template>
       <div class="change-password-content">
+        <!-- 显示用户信息 -->
+        <div v-if="authStore.user" class="user-info-section">
+          <a-descriptions :column="1" bordered size="small">
+            <a-descriptions-item label="用户名">
+              {{ authStore.user.username }}
+            </a-descriptions-item>
+            <a-descriptions-item v-if="authStore.user.nickname" label="昵称">
+              {{ authStore.user.nickname }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
         <a-alert
           v-if="!hasPassword"
           message="首次登录"
@@ -66,7 +77,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
-import { changePassword, getUserInfo } from '@/api/auth'
+import { changePassword } from '@/api/auth'
 import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
@@ -138,7 +149,10 @@ const changePasswordRules = {
 // 检查用户是否已有密码
 const checkUserPassword = async () => {
   try {
-    await getUserInfo() // 验证用户已登录
+    // 如果 authStore 中没有用户信息，则加载
+    if (!authStore.user) {
+      await authStore.loadUserInfo()
+    }
     // 如果用户有密码，后端会在GetUserInfo中返回相关信息
     // 这里我们通过尝试修改密码时的错误来判断
     // 但为了简化，我们可以假设首次登录的用户没有密码
@@ -217,5 +231,14 @@ onMounted(() => {
 .change-password-content {
   padding: 20px 0;
 }
+
+.user-info-section {
+  margin-bottom: 24px;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 500;
+  width: 80px;
+}
 </style>