fix: 修复依赖缺失及 lock 文件不一致错误

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",

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

src/views/setting/profile/LeftBox.vue

@@ -5,15 +5,15 @@
       <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>
             <icon-edit :size="16" class="btn" @click="onEditNickName" />
           </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>