更新Dashboard页，但有bug，因为使用ref所以输入个人信息时会导致左栏dom内容意外刷新

src/views/portal/Dashboard.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import {onBeforeMount, ref, computed} from 'vue';
+import { ref, computed} from 'vue';
   import {userInfo, userInfoUpdate} from '../../api/user.ts'
 import {router} from '../../router'
+import {UserFilled} from "@element-plus/icons-vue";
 
   const name = ref('')
   const tel = ref('')
   const address = ref('')
+  const regTime = ref()
+
+  const displayInfoCard = ref(false)
 
   const password = ref('')
   const confirmPassword = ref('')
@@ -17,22 +21,24 @@ import {router} from '../../router'
   const isCustomer = ref('true')
   const isStaff = ref('false')
 
-  onBeforeMount(() => {
-    userInfo()
-        .then(res => {
-          console.log(res)
 
-          name.value = res.result.name
-          tel.value = res.result.phone
-          address.value = res.result.address
+  userInfo()
+      .then(res => {
+        console.log(res)
+
+        name.value = res.result.name
+        tel.value = res.result.phone
+        address.value = res.result.address
+        regTime.value = res.result.createTime
+
+        isCustomer.value = (res.result.role == 'CUSTOMER')
+        isStaff.value = (res.result.role == 'STAFF')
+      })
+      .catch(e => {
+        console.error(e.message)
+        //todo: 处理错误
+      })
 
-          isCustomer.value = (res.result.role == 'CUSTOMER')
-          isStaff.value = (res.result.role == 'STAFF')
-        })
-        .catch(e => {
-          //todo: 处理错误
-        })
-  })
 
 
   function updateInfo() {
@@ -40,7 +46,7 @@ import {router} from '../../router'
     const payload = {
       name: name.value,
       password: null,
-      address: null
+      address: address.value,
     }
 
     userInfoUpdate(payload)
@@ -52,6 +58,7 @@ import {router} from '../../router'
           })
         })
         .catch(e => {
+          console.error(e.message)
           ElMessage({
             customClass: 'customMessage',
             type: 'error',
@@ -91,6 +98,7 @@ import {router} from '../../router'
 
         })
         .catch(e => {
+          console.error(e.message)
           ElMessage({
             customClass: 'customMessage',
             type: 'error',
@@ -103,131 +111,161 @@ import {router} from '../../router'
         })
   }
 
-  function updateAddress() {
-
-    const payload = {
-      name: null,
-      password: null,
-      address: address.value
-    }
-
-    userInfoUpdate(payload)
-        .then(() => {
-          ElMessage({
-            customClass: 'customMessage',
-            type: 'success',
-            message: '更新成功！',
-          })
-        })
-        .catch(e => {
-          ElMessage({
-            customClass: 'customMessage',
-            type: 'error',
-            message: '更新失败！',
-          })
-        })
-        .finally(() =>{
-          userInfo().then(res => {
-            address.value = res.result.address
-          })
-        })
-  }
-
 </script>
 
 <template>
+    <el-main class="main-container">
 
-  <el-container>
 
-    <el-aside width="20%">
+      <el-card class="aside-card">
 
-      <div>
-        <el-avatar :size="100">
-          <span> 头像 </span>
-        </el-avatar>
+        <div class="avatar-area">
+          <el-avatar :icon="UserFilled" :size="80">
+          </el-avatar>
 
-        <label v-if="isCustomer">顾客</label>
-        <label v-else-if="isStaff">工作人员</label>
+          <span class="avatar-text"> 欢迎您，{{name}}</span>
+        </div>
 
-      </div>
+        <el-divider></el-divider>
+
+        <el-descriptions
+          :column="1"
+          border
+          title="个人信息"
+        >
+        <template #extra>
+          <el-button type="primary"
+                     @click="displayInfoCard = displayInfoCard === false;">
+            <span v-if="displayInfoCard">修改密码</span>
+            <span v-else>修改个人信息</span>
+          </el-button>
+        </template>
 
-    </el-aside>
+          <el-descriptions-item label="身份">
+            <el-tag v-if="isCustomer">顾客</el-tag>
+            <el-tag v-else-if="isStaff">工作人员</el-tag>
+          </el-descriptions-item>
 
+          <el-descriptions-item label="联系电话">
+            {{tel}}
+          </el-descriptions-item>
 
-    <el-main>
+          <el-descriptions-item label="地址">
+            {{address}}
+          </el-descriptions-item>
 
-      <el-card>
+          <el-descriptions-item label="注册时间">
+            {{regTime}}
+          </el-descriptions-item>
+
+        </el-descriptions>
 
-        <div>
-          <span>个人信息</span>
-          <el-button type="submit" @click="updateInfo">更新</el-button>
-        </div>
 
-        <form>
-          <div>
-            <div>
-              <label for="name" >昵称</label>
-              <el-input type="text" id="name" v-model="name" />
-            </div>
 
-            <div>
-              <label for="phone" >手机号</label>
-              <el-input type="tel" id="phone" v-model="tel" disabled />
-            </div>
-          </div>
-        </form>
       </el-card>
 
 
-      <el-card>
+      <el-card v-if="displayInfoCard" class="change-card">
 
-        <div>
-          <span >密码</span>
-          <el-button type="submit" @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical">更新</el-button>
+        <div class="card-header">
+          <span>个人信息</span>
+          <el-button @click="updateInfo">更新</el-button>
         </div>
 
+        <el-divider></el-divider>
+
         <el-form>
             <el-form-item>
-              <label for="password">密码</label>
-              <el-input type="password" id="password" v-model="password" placeholder="•••••••••" required />
+              <label for="name" >昵称</label>
+              <el-input type="text" id="name" v-model="name" />
+            </el-form-item>
+
+            <el-form-item>
+              <label for="phone" >手机号</label>
+              <el-input id="phone" v-model="tel" disabled />
             </el-form-item>
+
             <el-form-item>
-              <label v-if="!hasConfirmPasswordInput" for="confirm_password" >确认密码</label>
-              <label v-else-if="!isPasswordIdentical" for="confirm_password">密码不一致</label>
-              <label v-else for="confirm_password">确认密码</label>
+              <label for="address" >收货地址</label>
+              <el-input id="address" type="textarea"
+                        rows="4"
+                        v-model="address" placeholder="中华门"></el-input>
 
-              <el-input type="password" id="confirm_password" v-model="confirmPassword" placeholder="•••••••••" required />
             </el-form-item>
         </el-form>
-
       </el-card>
 
 
-      <el-card>
+      <el-card v-if="!displayInfoCard" class="change-card">
 
-        <div>
-          <span>地址信息</span>
-          <el-button @click="updateAddress" type="button">
-            更新地址
-          </el-button>
+        <div class="card-header">
+          <span >修改密码</span>
+          <el-button @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical">修改</el-button>
         </div>
 
-        <div>
-          <textarea id="address"
-                    v-model="address" placeholder="中华门"></textarea>
+        <el-divider></el-divider>
 
-        </div>
+        <el-form>
+          <el-form-item>
+            <label for="password">密码</label>
+            <el-input type="password" id="password" v-model="password" placeholder="•••••••••" required />
+          </el-form-item>
+          <el-form-item>
+            <label v-if="!hasConfirmPasswordInput" for="confirm_password" >确认密码</label>
+            <label v-else-if="!isPasswordIdentical" for="confirm_password" class="error-warn">密码不一致</label>
+            <label v-else for="confirm_password" >确认密码</label>
+
+            <el-input type="password" id="confirm_password" v-model="confirmPassword"
+                      :class="{'error-warn-input' :(hasConfirmPasswordInput && !isPasswordIdentical)}" placeholder="•••••••••" required />
+          </el-form-item>
+        </el-form>
 
       </el-card>
-
-
     </el-main>
 
-  </el-container>
-
 </template>
 
 
 <style scoped>
 
+.error-warn {
+  color: red;
+}
+
+.error-warn-input {
+  --el-input-focus-border-color: red;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: row;
+  padding: 15px;
+  gap: 5px;
+  justify-content: center;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.change-card {
+  width: 66%;
+}
+
+.avatar-area {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap:30px;
+}
+
+.avatar-text {
+  font-size: x-large;
+  font-weight: bolder;
+  padding-right: 40px;
+}
+
+
 </style>