diff --git a/package.json b/package.json
index 0998760..4469e67 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "vue": "^3.4.21",
     "vue-codemirror6": "^1.1.27",
     "vue-color-kit": "^1.0.5",
+    "vue-cropper": "^0.6.4",
     "vue-draggable-plus": "^0.3.5",
     "vue-echarts": "^6.5.5",
     "vue-json-pretty": "^2.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 279f48d..c329b31 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,8 +105,8 @@ dependencies:
     specifier: ^1.0.5
     version: 1.0.6(vue@3.4.21)
   vue-cropper:
-    specifier: ^1.1.2
-    version: 1.1.2
+    specifier: ^0.6.4
+    version: 0.6.4
   vue-draggable-plus:
     specifier: ^0.3.5
     version: 0.3.5(@types/sortablejs@1.15.8)
@@ -6295,8 +6295,8 @@ packages:
       vue: 3.4.21(typescript@5.0.4)
     dev: false
 
-  /vue-cropper@1.1.2:
-    resolution: {integrity: sha512-S4cmvQzdNiVpNGigFwgULSwxWp55bdD1xf+RIEH+4mLDpD9/MUjNoHf970V3nFX7SerUrPZbOXG/ZBaD6pxfWQ==}
+  /vue-cropper@0.6.4:
+    resolution: {integrity: sha512-U3bm17Li/Xwfw2t3pr8/hFE/tYhvwIWqepHK9IFC1TnX1KFd64VyfCD9nMBhPY91RyvMC6jSQgT/DyDNKuTpIQ==}
     dev: false
 
   /vue-demi@0.13.11(vue@3.4.21):
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
index 929d335..acdff91 100644
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@@ -8,7 +8,8 @@ import { resetHasRouteFlag } from '@/router/permission'
 import getAvatar from '@/utils/avatar'
 
 const storeSetup = () => {
-  const userInfo = reactive<Pick<UserInfo, 'nickname' | 'avatar' | 'email' | 'phone' | 'registrationDate'>>({
+  const userInfo = reactive<Pick<UserInfo, 'id' | 'nickname' | 'avatar' | 'email' | 'phone' | 'registrationDate'>>({
+    id: '',
     nickname: '',
     avatar: '',
     email: '',
@@ -67,6 +68,7 @@ const storeSetup = () => {
   // 获取用户信息
   const getInfo = async () => {
     const res = await getUserInfoApi()
+    userInfo.id = res.data.id
     userInfo.nickname = res.data.nickname
     userInfo.avatar = getAvatar(res.data.avatar, res.data.gender)
     userInfo.email = res.data.email
diff --git a/src/views/setting/profile/LeftBox.vue b/src/views/setting/profile/LeftBox.vue
index a4bd882..2bf0e3e 100644
--- a/src/views/setting/profile/LeftBox.vue
+++ b/src/views/setting/profile/LeftBox.vue
@@ -5,7 +5,7 @@
       <div class="body">
         <section>
           <div class="avatar">
-            <img src="https://q1.itc.cn/q_70/images03/20240320/fcf023d835c54f78bac6c7efc98fbb4c.jpeg" />
+            <img :src="userStore.avatar" alt="avatar" />
           </div>
           <div class="name">
             <span style="margin-right: 10px">{{ userInfo.nickname }}</span>
@@ -13,7 +13,7 @@
           </div>
           <div class="id">
             <GiSvgIcon name="id" :size="16" />
-            <span style="margin-left: 10px">88888888</span>
+            <span style="margin-left: 10px">{{ userInfo.id }}</span>
           </div>
         </section>
         <footer>