From eb37d58b00bc8b6cda8331c8b1283632328a0b7b Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Sun, 7 Apr 2024 16:11:18 +0800
Subject: [PATCH 1/9] style(users): added blank-page on question and answer

---
 src/components/user/UserCard.vue |   2 +-
 src/views/user/Answer.vue        | 106 +++++++++++++++++++------------
 src/views/user/Question.vue      |  11 +++-
 3 files changed, 74 insertions(+), 45 deletions(-)

diff --git a/src/components/user/UserCard.vue b/src/components/user/UserCard.vue
index 8b2f0e4..46816ec 100644
--- a/src/components/user/UserCard.vue
+++ b/src/components/user/UserCard.vue
@@ -104,7 +104,7 @@
                 color="black"
                 :to="{ name: 'UserFollowing', params: { id: $route.params.id } }"
               >
-                {{ profile.fans_count }} <br />关注
+                {{ profile.fans_count }}<br />关注
               </v-btn>
               |
               <v-btn
diff --git a/src/views/user/Answer.vue b/src/views/user/Answer.vue
index fea9f64..62c2e9d 100644
--- a/src/views/user/Answer.vue
+++ b/src/views/user/Answer.vue
@@ -1,31 +1,39 @@
 <template>
-  <v-card v-for="item in answerList" :key="item.id" flat class="pt-2 pb-2 rounded-lg pl-2 pr-2">
-    <v-card-title
-      ><span class="text-h6 font-weight-bold">{{ item.id }}</span></v-card-title
-    >
-    <v-card-text>
-      <p class="text-body-1">{{ item.author.nickname }}：{{ item.content }}</p>
-    </v-card-text>
-    <v-card-actions>
-      <v-btn color="primary" variant="tonal">
-        <v-icon size="24" class="me-2">mdi-menu-up</v-icon>
-        {{ item.attitudes.difference }}
-      </v-btn>
-      <v-btn color="primary" variant="tonal" min-width="32px">
-        <v-icon size="24">mdi-menu-down</v-icon>
-      </v-btn>
-      <v-btn variant="plain" color="on-background">
-        <v-icon size="18" class="me-2">mdi-comment-outline</v-icon>
-        {{ item.comment_count }}评论
-      </v-btn>
-      <v-btn variant="plain" color="on-background">
-        <v-icon size="18" class="me-2">mdi-star-outline</v-icon>
-        {{ item.favorite_count }}收藏
-      </v-btn>
-      <v-btn variant="plain" color="on-background" min-width="32px">
-        <v-icon size="18">mdi-dots-horizontal</v-icon>
-      </v-btn>
-    </v-card-actions>
+  <template v-if="refreshing">
+    <v-skeleton-loader v-for="i in 5" :key="i" type="list-item-avatar, paragraph, button@2" />
+  </template>
+  <template v-else>
+    <v-card v-for="item in answerList" :key="item.id" flat class="pt-2 pb-2 rounded-lg pl-2 pr-2">
+      <v-card-title
+        ><span class="text-h6 font-weight-bold">{{ item.id }}</span></v-card-title
+      >
+      <v-card-text>
+        <p class="text-body-1">{{ item.author.nickname }}：{{ item.content }}</p>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="primary" variant="tonal">
+          <v-icon size="24" class="me-2">mdi-menu-up</v-icon>
+          {{ item.attitudes.difference }}
+        </v-btn>
+        <v-btn color="primary" variant="tonal" min-width="32px">
+          <v-icon size="24">mdi-menu-down</v-icon>
+        </v-btn>
+        <v-btn variant="plain" color="on-background">
+          <v-icon size="18" class="me-2">mdi-comment-outline</v-icon>
+          {{ item.comment_count }}评论
+        </v-btn>
+        <v-btn variant="plain" color="on-background">
+          <v-icon size="18" class="me-2">mdi-star-outline</v-icon>
+          {{ item.favorite_count }}收藏
+        </v-btn>
+        <v-btn variant="plain" color="on-background" min-width="32px">
+          <v-icon size="18">mdi-dots-horizontal</v-icon>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </template>
+  <v-card v-if="isEmpty" flat class="pt-2 pb-2 rounded-lg mx-auto pl-5 pr-5">
+    <blank-page />
   </v-card>
 </template>
 
@@ -33,28 +41,42 @@
 import { ref, onMounted, computed } from 'vue'
 import { UserApi } from '@/network/api/users'
 import { useRoute } from 'vue-router'
-import { Answer } from '@/types'
-import { Page } from '@/types'
+import { usePaging } from '@/utils/paging'
+import BlankPage from '@/components/common/BlankPage.vue'
 
 const route = useRoute()
 const userID = computed(() => parseInt(route.params.id[0], 10))
-const answerList = ref<Answer[]>([])
-const pageData = ref<Page>()
-const loaded = ref(false)
+const isEmpty = ref(true)
 
-onMounted(async () => {
-  await fetchData()
-})
-
-async function fetchData() {
+const {
+  data: answerList,
+  refresh,
+  refreshing,
+} = usePaging(async () => {
   const {
-    data: { answers, page },
+    data: { answers: data, page },
   } = await UserApi.getAnswerList(userID.value, {
     pageStart: 0,
     pageSize: 10,
   })
-  answerList.value = answers
-  pageData.value = page
-  loaded.value = true
-}
+  isEmpty.value = data.length === 0
+  return { data, page }
+})
+
+onMounted(refresh)
+// onMounted(async () => {
+//   await fetchData()
+// })
+
+// async function fetchData() {
+//   const {
+//     data: { answers, page },
+//   } = await UserApi.getAnswerList(userID.value, {
+//     pageStart: 0,
+//     pageSize: 10,
+//   })
+//   answerList.value = answers
+//   pageData.value = page
+//   isEmpty.value = answers.length === 0
+// }
 </script>
diff --git a/src/views/user/Question.vue b/src/views/user/Question.vue
index 3770aee..f1c949c 100644
--- a/src/views/user/Question.vue
+++ b/src/views/user/Question.vue
@@ -5,18 +5,24 @@
   <template v-else>
     <question-card v-for="question in questionList" :key="question.id" :data="question" />
   </template>
+  <v-card v-if="isEmpty" flat class="pt-2 pb-2 rounded-lg mx-auto pl-5 pr-5">
+    <blank-page />
+  </v-card>
 </template>
 
 <script setup lang="ts">
-import { onMounted, computed } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { UserApi } from '@/network/api/users'
 import { useRoute } from 'vue-router'
-import QuestionCard from '@/components/questions/QuestionCard.vue'
 import { usePaging } from '@/utils/paging'
+import QuestionCard from '@/components/questions/QuestionCard.vue'
+import BlankPage from '@/components/common/BlankPage.vue'
 
 const route = useRoute()
 const userID = computed(() => parseInt(route.params.id[0], 10))
 
+const isEmpty = ref(true)
+
 const {
   data: questionList,
   refresh,
@@ -25,6 +31,7 @@ const {
   const {
     data: { questions: data, page },
   } = await UserApi.getQuestionList(userID.value, pageStart)
+  isEmpty.value = data.length === 0
   return { data, page }
 })
 

From 38bc6d077be88b91864209c3115f6fde203e1fcc Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Mon, 8 Apr 2024 15:00:12 +0800
Subject: [PATCH 2/9] refactor(avatar): add package vue-advance-cropper

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index b6f3705..f2b5440 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "vee-validate": "^4.12.6",
     "viewerjs": "^1.11.6",
     "vue": "^3.4.21",
+    "vue-advanced-cropper": "^2.8.8",
     "vue-i18n": "^9.10.2",
     "vue-router": "^4.3.0",
     "vuetify": "^3.5.13",

From ea730e9494d254d9636dd3be9186b9b358ccd8ce Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Mon, 8 Apr 2024 15:02:00 +0800
Subject: [PATCH 3/9] build(avatar): add dependency for vue-advanced-cropper

---
 pnpm-lock.yaml | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d89fb8b..fddbecd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,6 +116,9 @@ dependencies:
   vue:
     specifier: ^3.4.21
     version: 3.4.21(typescript@5.4.3)
+  vue-advanced-cropper:
+    specifier: ^2.8.8
+    version: 2.8.8(vue@3.4.21)
   vue-i18n:
     specifier: ^9.10.2
     version: 9.10.2(vue@3.4.21)
@@ -2111,6 +2114,10 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+    dev: false
+
   /cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -2699,6 +2706,10 @@ packages:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
 
+  /debounce@1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+    dev: false
+
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -2871,6 +2882,10 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
+  /easy-bem@1.1.1:
+    resolution: {integrity: sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==}
+    dev: false
+
   /editorconfig@1.0.4:
     resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
     engines: {node: '>=14'}
@@ -5995,6 +6010,18 @@ packages:
       - terser
     dev: true
 
+  /vue-advanced-cropper@2.8.8(vue@3.4.21):
+    resolution: {integrity: sha512-yDM7Jb/gnxcs//JdbOogBUoHr1bhCQSto7/ohgETKAe4wvRpmqIkKSppMm1huVQr+GP1YoVlX/fkjKxvYzwwDQ==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      classnames: 2.5.1
+      debounce: 1.2.1
+      easy-bem: 1.1.1
+      vue: 3.4.21(typescript@5.4.3)
+    dev: false
+
   /vue-component-type-helpers@2.0.7:
     resolution: {integrity: sha512-7e12Evdll7JcTIocojgnCgwocX4WzIYStGClBQ+QuWPinZo/vQolv2EMq4a3lg16TKfwWafLimG77bxb56UauA==}
     dev: true

From daa41bc8442716c61fd09a297ebabf770cb54bb5 Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Mon, 8 Apr 2024 15:03:47 +0800
Subject: [PATCH 4/9] feat(avatar): finished AvatarApi

---
 src/network/api/avatars/index.ts | 11 +++++++++++
 src/network/api/avatars/types.ts |  3 +++
 2 files changed, 14 insertions(+)
 create mode 100644 src/network/api/avatars/index.ts
 create mode 100644 src/network/api/avatars/types.ts

diff --git a/src/network/api/avatars/index.ts b/src/network/api/avatars/index.ts
new file mode 100644
index 0000000..cde3704
--- /dev/null
+++ b/src/network/api/avatars/index.ts
@@ -0,0 +1,11 @@
+import ApiInstance from '../index'
+import { UploadAvatarResponseDataType } from './types'
+
+export namespace AvatarApi {
+  export const uploadAvatar = (data: FormData) =>
+    ApiInstance.request<UploadAvatarResponseDataType>({
+      url: '/avatars',
+      method: 'POST',
+      data,
+    })
+}
diff --git a/src/network/api/avatars/types.ts b/src/network/api/avatars/types.ts
new file mode 100644
index 0000000..e207687
--- /dev/null
+++ b/src/network/api/avatars/types.ts
@@ -0,0 +1,3 @@
+export type UploadAvatarResponseDataType = {
+  avatarid: number
+}

From 80f2ad97de44a8dadbddef8f23577417ba7a8d1d Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Mon, 8 Apr 2024 15:05:32 +0800
Subject: [PATCH 5/9] feat(users): added updateUserInfo method in UserApi

---
 src/network/api/users/index.ts | 9 +++++++++
 src/network/api/users/types.ts | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/src/network/api/users/index.ts b/src/network/api/users/index.ts
index 0f3871c..099c3d8 100644
--- a/src/network/api/users/index.ts
+++ b/src/network/api/users/index.ts
@@ -5,6 +5,7 @@ import {
   GetAnswerListResponse,
   GetQuestionListResponse,
   GetUserInfoResponse,
+  UpdateUserInfoResponse,
   UserList,
 } from './types'
 
@@ -131,4 +132,12 @@ export namespace UserApi {
       url: `/users/${userId}/followers`,
       method: 'DELETE',
     })
+
+  export const updateUserInfo = (userId: number, data: { nickname: string; intro: string; avatarId: number }) =>
+    ApiInstance.request<UpdateUserInfoResponse>({
+      url: `/users/${userId}`,
+      method: 'PUT',
+      data,
+      withCredentials: true,
+    })
 }
diff --git a/src/network/api/users/types.ts b/src/network/api/users/types.ts
index b752796..f11fd4b 100644
--- a/src/network/api/users/types.ts
+++ b/src/network/api/users/types.ts
@@ -22,3 +22,8 @@ export type GetUserInfoResponse = {
 export type FollowUserResponse = {
   follow_count: number
 }
+
+export type UpdateUserInfoResponse = {
+  code: number
+  message: string
+}

From 11a8533c53e63d33e144b54058d95e52f5ea6aba Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Mon, 8 Apr 2024 15:07:09 +0800
Subject: [PATCH 6/9] refactor(users): change avatar item in User from avatar
 to avatarId

---
 src/types/users.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/users.ts b/src/types/users.ts
index 13d3db6..095fb90 100644
--- a/src/types/users.ts
+++ b/src/types/users.ts
@@ -2,7 +2,7 @@ export type User = {
   id: number
   username: string
   nickname: string
-  avatar: string
+  avatarId: number
   intro: string
   follow_count: number
   fans_count: number

From c580a89493598460ad5a197336b5b8770d55ce8b Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Mon, 8 Apr 2024 15:07:57 +0800
Subject: [PATCH 7/9] feat: added avatar upload and crop functions

---
 src/components/user/UserCard.vue | 224 ++++++++++++++++++++++---------
 1 file changed, 161 insertions(+), 63 deletions(-)

diff --git a/src/components/user/UserCard.vue b/src/components/user/UserCard.vue
index 46816ec..fa1323d 100644
--- a/src/components/user/UserCard.vue
+++ b/src/components/user/UserCard.vue
@@ -10,7 +10,13 @@
         cover
       />
       <v-container class="cut-align-center">
-        <user-avatar :has-avatar="hasAvatar" :avatar="profile.avatar" :size="120" :class="'rounded-lg'" :rounded="0" />
+        <user-avatar
+          :has-avatar="true"
+          :avatar="getUrlByAvatarId(profile.avatarId)"
+          :size="120"
+          :class="'rounded-lg'"
+          :rounded="0"
+        />
         <v-container class="info-wrapper">
           <v-row>
             <v-col class="text-h4 font-weight-bold me-4">
@@ -30,7 +36,7 @@
                 </v-btn>
               </div>
               <div v-else>
-                <v-dialog width="800">
+                <v-dialog v-model="isEditDialogVisible" width="800">
                   <template #activator="{ props }">
                     <v-btn v-bind="props" color="primary" variant="flat" @click="handleReset">
                       <v-icon left>mdi-cog</v-icon>
@@ -40,48 +46,76 @@
                   <template #default="{ isActive }">
                     <v-card title="修改信息">
                       <form class="pt-2 pl-5 pr-5" @submit.prevent="submit">
-                        <v-row>
-                          <v-col cols="8">
+                        <div class="d-flex flex-row justify-space-between">
+                          <div class="flex-grow-1 me-5">
                             <v-list-subheader inset>昵称</v-list-subheader>
-                            <v-text-field v-model="selectedNickname" v-bind="nicknameProps"></v-text-field>
+                            <v-text-field
+                              ref="nicknameField"
+                              v-model="selectedNickname"
+                              v-bind="nicknameProps"
+                            ></v-text-field>
                             <v-list-subheader inset>个人简介</v-list-subheader>
                             <v-text-field v-model="selectedIntro" :counter="60" v-bind="introProps"></v-text-field>
-
-                            <v-list-subheader inset>头像</v-list-subheader>
-                            <v-file-input
-                              v-model="selectedAvatar"
-                              accept="image/*"
-                              prepend-icon="mdi-plus"
-                              label="选择文件"
-                              chips
-                              show-size
-                              outlined
-                              v-bind="avatarProps"
-                              @change="handleFileChange"
-                            />
-                          </v-col>
-                          <v-col cols="4">
-                            <v-list-subheader inset>预览</v-list-subheader>
-                            <v-img
-                              :src="previewUrl"
-                              aspect-ratio="1"
-                              class="rounded-lg"
-                              rounded="0"
-                              size="180"
-                              color="grey-darken-1"
-                            />
-                          </v-col>
-                        </v-row>
+                          </div>
+                          <div>
+                            <v-list-subheader inset>头像预览</v-list-subheader>
+                            <div class="position-relative" style="width: 175px; height: 175px">
+                              <div
+                                class="overlay rounded-lg"
+                                @click="avatarInput.click()"
+                                @mouseover="overlay = true"
+                                @mouseleave="overlay = false"
+                              >
+                                <v-icon v-show="overlay" class="position-absolute" color="white">mdi-upload</v-icon>
+                              </div>
+                              <user-avatar
+                                v-if="croppedUrl == ''"
+                                :has-avatar="true"
+                                :avatar="getUrlByAvatarId(profile.avatarId)"
+                                :size="175"
+                                :class="'rounded-lg'"
+                                :rounded="0"
+                              />
+                              <img v-else :src="croppedUrl" style="width: 175px; height: 175px" class="rounded-lg" />
+                              <input
+                                ref="avatarInput"
+                                accept="image/*"
+                                type="file"
+                                style="display: none"
+                                @change="previewAvatar"
+                              />
+                            </div>
+                          </div>
+                        </div>
                       </form>
                       <v-card-actions>
                         <v-btn @click="submit"> 提交 </v-btn>
-                        <v-btn @click="handleReset"> 重置 </v-btn>
+                        <v-btn @click="reset"> 重置 </v-btn>
                         <v-spacer />
                         <v-btn @click="isActive.value = false"> 关闭 </v-btn>
                       </v-card-actions>
                     </v-card>
                   </template>
                 </v-dialog>
+                <v-dialog v-model="isCropperDialogVisible" max-width="450">
+                  <template #default="{ isActive }">
+                    <v-card>
+                      <cropper
+                        ref="avatarCropper"
+                        class="cropper"
+                        :src="previewUrl"
+                        :stencil-props="{
+                          aspectRatio: 1,
+                        }"
+                      />
+                      <v-card-actions>
+                        <v-btn @click="cropAvatar"> 确认 </v-btn>
+                        <v-spacer />
+                        <v-btn @click="isActive.value = false"> 取消 </v-btn>
+                      </v-card-actions>
+                    </v-card>
+                  </template>
+                </v-dialog>
               </div>
             </v-col>
           </v-row>
@@ -125,20 +159,24 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed, inject, watch, Ref } from 'vue'
+import { toast } from 'vuetify-sonner'
 import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
+import { number, z } from 'zod'
 import { User } from '@/types/users'
 import { UserApi } from '@/network/api/users'
-import { ImageApi } from '@/network/api/image'
+import { AvatarApi } from '@/network/api/avatars'
 import { useForm } from 'vee-validate'
 import { vuetifyConfig } from '@/utils/form'
+import { Cropper } from 'vue-advanced-cropper'
+import { getUrlByAvatarId } from '@/utils/user'
 import AccountService from '@/services/account'
 import UserAvatar from '../common/UserAvatar.vue'
+import 'vue-advanced-cropper/dist/style.css'
+import { getErrorMessage } from '@/utils/errors'
 
 const profile = inject<Ref<User>>('userData', ref({} as User))
-
-const hasAvatar = computed(() => {
-  return !!profile?.value.avatar && profile?.value.avatar != 'default.jpg' && profile?.value.avatar != 'deafult.jpg'
+const userRefresh = inject<Function>('userRefresh', () => {
+  toast.error('userRefresh not provided.')
 })
 
 const myId = computed(() => AccountService._user.value?.id as number)
@@ -149,6 +187,16 @@ const isActivatedUser = computed(() => {
 const isFollowLoading = ref(false)
 const isFollowing = ref(true)
 
+const previewUrl = ref('')
+const croppedUrl = ref('')
+const croppedBlob = ref({} as Blob)
+const overlay = ref(false)
+const isCropperDialogVisible = ref(false)
+const isEditDialogVisible = ref(false)
+const avatarInput = ref(null)
+const avatarCropper = ref(null)
+const nicknameField = ref(null)
+
 const followUser = async () => {
   const result = await UserApi.followUser(profile?.value.id as number)
   isFollowing.value = true
@@ -179,7 +227,7 @@ const { handleSubmit, defineField, handleReset, resetForm } = useForm({
       nickname: z.string().min(4).max(16),
       intro: z.string().max(60),
       avatar: z
-        .array(z.instanceof(File).refine((v) => v.size < 2 * 1024 * 1024, { message: '文件大小不能超过 2MB' }))
+        .array(z.instanceof(File).refine((v) => v.size < 1024 * 1024, { message: '文件大小不能超过 2MB' }))
         .optional(),
     })
   ),
@@ -197,48 +245,83 @@ watch(
         intro: newVal.intro,
       },
     })
+    croppedUrl.value = ''
   },
   { immediate: true }
 )
 
 const [selectedNickname, nicknameProps] = defineField('nickname', vuetifyConfig)
 const [selectedIntro, introProps] = defineField('intro', vuetifyConfig)
-const [selectedAvatar, avatarProps] = defineField('avatar', vuetifyConfig)
-const previewUrl = ref('')
-const handleFileChange = () => {
-  previewUrl.value = ''
-  const length = selectedAvatar.value?.length ?? 0
-  if (length > 0) {
-    readAvatar()
-  }
+// const [selectedAvatar, avatarProps] = defineField('avatar', vuetifyConfig)
+
+const reset = () => {
+  croppedUrl.value = ''
+  if (avatarInput.value) avatarInput.value.value = ''
+  handleReset()
 }
-const readAvatar = () => {
-  if (!selectedAvatar.value) return
-  if (selectedAvatar.value.length === 0) return
-  const file = selectedAvatar.value[0]
+
+const previewAvatar = (event: Event) => {
+  const fileInput = event.target as HTMLInputElement
+  const file = fileInput.files?.[0]
+
+  if (!file) {
+    return
+  }
+
   const reader = new FileReader()
+  reader.onload = (e) => {
+    const target = e.target as FileReader
+    previewUrl.value = target.result as string
+    isCropperDialogVisible.value = true
+  }
   reader.readAsDataURL(file)
-  reader.onload = (event) => {
-    previewUrl.value = event.target?.result as string
+}
+
+const cropAvatar = () => {
+  if (avatarCropper.value) {
+    croppedUrl.value = avatarCropper.value.getResult().canvas.toDataURL()
+    avatarCropper.value.getResult().canvas.toBlob((blob: Blob) => {
+      croppedBlob.value = blob
+    })
+    isCropperDialogVisible.value = false
   }
 }
-const uploadAvatar = () => {
-  if (!selectedAvatar.value) return
-  if (selectedAvatar.value.length === 0) return
-  const file = selectedAvatar.value[0]
+
+watch(isCropperDialogVisible, () => {
+  if (isCropperDialogVisible.value == false) {
+    nicknameField.value?.focus()
+  }
+})
+
+const uploadAvatar = async () => {
   const formData = new FormData()
-  formData.append('file', file)
-  const result = ImageApi.upload(formData)
-  return result
+  const blob = croppedBlob.value
+  formData.append('avatar', blob)
+  try {
+    const { data: result } = await AvatarApi.uploadAvatar(formData)
+    return result.avatarid
+  } catch (e) {
+    toast.error('头像大小不能超过1MB，请重新调整')
+  }
+  return -1
 }
-const submit = handleSubmit((values) => {
-  // uploadAvatar()
+
+const submit = handleSubmit(async (values) => {
+  const avatarId = croppedUrl.value == '' ? profile.value.avatarId : await uploadAvatar()
+  if (avatarId == -1) return
   const submitData = {
     nickname: values.nickname,
     intro: values.intro,
-    avatar: 'default.jpg',
+    avatarId: avatarId,
   }
-  alert(JSON.stringify(submitData, null, 2))
+  try {
+    await UserApi.updateUserInfo(profile.value.id, submitData)
+  } catch (e) {
+    toast.error(getErrorMessage(e))
+  }
+  toast.success('用户信息更新成功')
+  isEditDialogVisible.value = false
+  userRefresh()
 })
 </script>
 
@@ -264,4 +347,19 @@ const submit = handleSubmit((values) => {
   padding-top: 0;
   padding-bottom: 0;
 }
+.overlay {
+  position: absolute;
+  z-index: 10;
+  width: 175px;
+  height: 175px;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s;
+}
+
+.overlay:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
 </style>

From c9d68363a1303e6df0f4c5810d22920ac9fe4d2f Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Mon, 8 Apr 2024 15:09:45 +0800
Subject: [PATCH 8/9] fix(users): switch from avatar url to avatarId

---
 src/layouts/user/User.vue | 6 ++++++
 src/utils/user.ts         | 6 ++++++
 2 files changed, 12 insertions(+)
 create mode 100644 src/utils/user.ts

diff --git a/src/layouts/user/User.vue b/src/layouts/user/User.vue
index e579b35..84afe3f 100644
--- a/src/layouts/user/User.vue
+++ b/src/layouts/user/User.vue
@@ -42,6 +42,7 @@ const fetchData = async (userId: number) => {
     data: { user },
   } = await UserApi.getUserInfo(userId)
   userData.value = user
+  // console.log(user)
   loaded.value = true
 }
 
@@ -54,9 +55,14 @@ onBeforeRouteUpdate(async (to, from) => {
   }
 })
 
+const userRefresh = async () => {
+  await fetchData(userId.value)
+}
+
 console.log(route)
 
 provide('userData', userData)
+provide('userRefresh', userRefresh)
 
 const links = [
   {
diff --git a/src/utils/user.ts b/src/utils/user.ts
new file mode 100644
index 0000000..6b37baf
--- /dev/null
+++ b/src/utils/user.ts
@@ -0,0 +1,6 @@
+// import { AvatarApi } from '@/network/api/avatars'
+import { API_BASE_URL } from '@/network/utils'
+
+export const getUrlByAvatarId = (avatarId: number) => {
+  return API_BASE_URL + '/avatars/' + avatarId
+}

From dee12b22827c3d4fe3661e1b7c572dafc1cf6f14 Mon Sep 17 00:00:00 2001
From: ce-amtic <fyh516@126.com>
Date: Mon, 8 Apr 2024 15:10:25 +0800
Subject: [PATCH 9/9] refactor(users): added loading animations

---
 src/components/answer/AnswerCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/answer/AnswerCard.vue b/src/components/answer/AnswerCard.vue
index d3cab98..77bc212 100644
--- a/src/components/answer/AnswerCard.vue
+++ b/src/components/answer/AnswerCard.vue
@@ -5,7 +5,7 @@
       <v-card-title>{{ answer.author.nickname }}</v-card-title>
       <v-card-subtitle>{{ answer.author.intro }}</v-card-subtitle>
       <template #prepend>
-        <user-avatar :avatar="answer.author.avatar" />
+        <user-avatar :avatar="answer.author.avatarId" />
       </template>
     </v-card-item>
     <v-card-text class="text-body-1 font-weight-regular answer-body-text pb-1 px-3">