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

components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     IMaterialIconThemeGoogle: typeof import('~icons/material-icon-theme/google')['default']
     IonApp: typeof import('@ionic/vue')['IonApp']
+    IonAvatar: typeof import('@ionic/vue')['IonAvatar']
     IonButton: typeof import('@ionic/vue')['IonButton']
     IonButtons: typeof import('@ionic/vue')['IonButtons']
     IonContent: typeof import('@ionic/vue')['IonContent']
@@ -42,6 +43,7 @@ declare module 'vue' {
 declare global {
   const IMaterialIconThemeGoogle: typeof import('~icons/material-icon-theme/google')['default']
   const IonApp: typeof import('@ionic/vue')['IonApp']
+  const IonAvatar: typeof import('@ionic/vue')['IonAvatar']
   const IonButton: typeof import('@ionic/vue')['IonButton']
   const IonButtons: typeof import('@ionic/vue')['IonButtons']
   const IonContent: typeof import('@ionic/vue')['IonContent']

package.json

@@ -25,6 +25,7 @@
     "@vueuse/core": "^14.1.0",
     "better-auth": "^1.4.6",
     "ionicons": "^8.0.13",
+    "lodash-es": "^4.17.21",
     "vue": "^3.5.25",
     "vue-router": "^4.6.3"
   },
@@ -34,6 +35,7 @@
     "@iconify-json/ic": "^1.2.4",
     "@iconify-json/material-icon-theme": "^1.2.44",
     "@iconify/vue": "^5.0.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.2",
     "@vitejs/plugin-legacy": "^7.2.1",
     "@vitejs/plugin-vue": "^6.0.2",

pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       ionicons:
         specifier: ^8.0.13
         version: 8.0.13
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
       vue:
         specifier: ^3.5.25
         version: 3.5.25(typescript@5.9.3)
@@ -63,6 +66,9 @@ importers:
       '@iconify/vue':
         specifier: ^5.0.0
         version: 5.0.0(vue@3.5.25(typescript@5.9.3))
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
       '@types/node':
         specifier: ^24.10.2
         version: 24.10.2
@@ -1388,6 +1394,12 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.21':
+    resolution: {integrity: sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -2901,6 +2913,9 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
@@ -5556,6 +5571,12 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.21
+
+  '@types/lodash@4.17.21': {}
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -7225,6 +7246,8 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash-es@4.17.21: {}
+
   lodash.debounce@4.0.8: {}
 
   lodash.merge@4.6.2: {}

src/main.ts

@@ -33,6 +33,7 @@ import "@ionic/vue/css/palettes/dark.system.css";
 
 /* Theme variables */
 import "./theme/variables.css";
+import "./theme/ionic.css";
 
 const app = createApp(App)
   .use(IonicVue)

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">
+    <IonContent :fullscreen="true" class="ion-padding">
-      <IonHeader collapse="condense">
+      <UserInfo />
-        <IonToolbar>
-          <IonTitle size="large">
-            User
-          </IonTitle>
-        </IonToolbar>
-      </IonHeader>
     </IonContent>
   </IonPage>
 </template>