✨ 使用后端提供的头像url

Author: shoucandanghehe

src/shared/components/avatar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Avatar from '@/shared/types/avatar'
+import Avatar from '@/shared/schemas/avatar.ts'
 import Identicon from 'identicon.js'
 import { isString } from 'remeda'
 

src/shared/types/avatar.d.ts

@@ -21,6 +21,7 @@ const test = async () => {
 				return {
 					id: user._id,
 					name: user.username,
+					avatar: '',
 					country: user.country ?? null,
 					verified: user.verified,
 

src/v2/components/common/avatar.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-import avatar from '@/v2/components/common/avatar.vue'
+import AvatarCard from '@/shared/components/avatar.vue'
+import type AvatarType from '@/shared/schemas/avatar.ts'
 
 defineProps<{
 	readonly id: string
 	readonly name: string
+	readonly avatar: AvatarType
 }>()
 </script>
 
 <template>
 	<n-card class="w-fit">
 		<div class="flex flex-col justify-center items-center h-full">
 			<n-flex align="center" vertical>
-				<avatar :user_id="id" class="[&,&>img]:size-32"/>
+				<avatar-card :avatar="avatar" class="[&,&>img]:size-32"/>
 
 				<n-text class="text-(6 current) fw-bold leading-none">
 					{{ name }}

src/v2/components/tests/tetrio_user_list.vue

@@ -71,7 +71,7 @@ const type = computed(() => {
 		/>
 
 		<n-flex :wrap="false">
-			<sprint_user :id="data.user.id" :name="data.user.name"/>
+			<sprint_user :id="data.user.id" :avatar="data.user.avatar" :name="data.user.name"/>
 
 			<n-flex class="flex-1" vertical>
 				<n-flex :wrap="false">

src/v2/pages/tetrio/record/40l/_user.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-import avatar from '@/v2/components/common/avatar.vue'
+import AvatarCard from '@/shared/components/avatar.vue'
+import type AvatarType from '@/shared/schemas/avatar.ts'
 
 defineProps<{
 	readonly id: string
 	readonly name: string
+	readonly avatar: AvatarType
 }>()
 </script>
 
 <template>
 	<n-card class="w-fit">
 		<div class="flex flex-col justify-center items-center h-full">
 			<n-flex align="center" vertical>
-				<avatar :user_id="id" class="[&,&>img]:size-32"/>
+				<avatar-card :avatar="avatar" class="[&,&>img]:size-32"/>
 
 				<n-text class="text-(6 current) fw-bold leading-none">
 					{{ name }}

src/v2/pages/tetrio/record/40l/index.vue

@@ -64,7 +64,7 @@ const type = computed(() => {
 		/>
 
 		<n-flex :wrap="false">
-			<blitz_user :id="data.user.id" :name="data.user.name"/>
+			<blitz_user :id="data.user.id" :avatar="data.user.avatar" :name="data.user.name"/>
 
 			<n-flex class="flex-1" vertical>
 				<n-flex :wrap="false">
@@ -105,4 +105,4 @@ const type = computed(() => {
 
 <style lang="scss">
 @import "@/v2/styles/main";
-</style>
+</style>

src/v2/pages/tetrio/record/blitz/_user.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
+import AvatarCard from '@/shared/components/avatar.vue'
+import type AvatarType from '@/shared/schemas/avatar.ts'
 import logo from '@/v2/assets/images/logos/tetrio.svg'
-import avatar from '@/v2/components/common/avatar.vue'
 import country from '@/v2/components/common/country.vue'
 
 import { HeartFilled, StarFilled } from '@vicons/antd'
 import { isNonNullish } from 'remeda'
 
 const props = defineProps<{
 	readonly banner: string | null
+	readonly avatar: AvatarType
 
 	readonly name: string
 	readonly id: string
@@ -28,7 +30,7 @@ const { define: LogoDefine, reuse: Logo } = createReusableTemplate()
 			<div>
 				<n-flex size="small" vertical>
 					<n-flex align="center" size="small">
-						<avatar :user_id="id" class="[&,&>img]:size-12"/>
+						<avatar-card :avatar="avatar" class="[&,&>img]:size-12"/>
 
 						<n-flex :size="0" vertical>
 							<n-text class="text-(6 current) fw-bold leading-none">

src/v2/pages/tetrio/record/blitz/index.vue

@@ -144,6 +144,7 @@ import { isNonNullish } from 'remeda'
 	<layout content_class="max-w-320">
 		<info_header
 			:id="data.user.id"
+			:avatar="data.user.avatar"
 			:banner="data.user.banner"
 			:country="data.user.country"
 			:friend_count="data.user.friend_count"