feat: 添加用户信息组件，更新用户页面以显示用户头像和邮箱

src/views/user/components/user-info.vue

@@ -0,0 +1,60 @@
+<script lang='ts' setup>
+import { chevronForwardOutline, qrCodeOutline } from "ionicons/icons";
+
+const { user } = useAuth();
+</script>
+
+<template>
+  <div class="user-info-container">
+    <div class="user-info">
+      <ion-avatar>
+        <img alt="User avatar" :src="user?.image || 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'">
+      </ion-avatar>
+      <div>
+        <div class="user-name">
+          {{ user?.email }}
+        </div>
+        <div class="user-uid">
+          uid: xxxxxxxx
+        </div>
+      </div>
+    </div>
+    <div class="link">
+      <ion-icon :icon="qrCodeOutline" class="qr-code" />
+      <ion-icon :icon="chevronForwardOutline" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.user-info-container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+.user-name {
+  font-weight: 600;
+  font-size: 1.3em;
+}
+.user-uid {
+  color: var(--ion-text-secondary);
+  font-size: 0.9em;
+}
+.link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.qr-code {
+  font-size: 1.5em;
+}
+ion-icon {
+  font-size: 1em;
+}
+</style>

src/views/user/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import UserInfo from "./components/user-info.vue";
 </script>
 
 <template>
@@ -8,14 +9,8 @@
         <IonTitle>User</IonTitle>
       </IonToolbar>
     </IonHeader>
-    <IonContent :fullscreen="true">
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle size="large">
-            User
-          </IonTitle>
-        </IonToolbar>
-      </IonHeader>
+    <IonContent :fullscreen="true" class="ion-padding">
+      <UserInfo />
     </IonContent>
   </IonPage>
 </template>