Browse Source

feat: 添加头像组件并优化评论项,替换原有图片展示方式

EvilDragon 3 months ago
parent
commit
081adc5496

+ 8 - 0
packages/app/src/pages/common/components/avatar.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { NetImages } from '../../../core/libs/net-images'
+
+const props = withDefaults(defineProps<{ size?: number; src?: string }>(), {})
+</script>
+<template>
+  <wd-img round :width="size" :height="size" :src="src || NetImages.DefaultAvatar"></wd-img>
+</template>

+ 6 - 13
packages/app/src/pages/home/components/comment-item.vue

@@ -12,18 +12,8 @@ import { Comment } from '../../../core/libs/models'
 import { dayjs } from 'wot-design-uni'
 import { storeToRefs } from 'pinia'
 import CommentItem from './comment-item.vue'
+import Avatar from '@/pages/common/components/avatar.vue'
 
-// const props = defineProps({
-//   options: {
-//     type: Object as PropType<Comment>,
-//     default: () => ({}),
-//   },
-//   isChild: {
-//     type: Boolean,
-//     default: false,
-//   },
-
-// })
 const props = withDefaults(
   defineProps<{ options: Partial<Comment>; isChild?: boolean; index?: number }>(),
   {
@@ -99,12 +89,15 @@ defineExpose({
         isChild ? 'ml-9 gap-1.25 grid-cols-[22px_1fr_28px]' : 'gap-2.5 grid-cols-[28px_1fr_28px]'
       "
     >
-      <wd-img
+      <!-- <wd-img
         custom-class="rounded-full overflow-hidden col-start-1 row-start-1"
         :width="isChild ? 22 : 28"
         :height="isChild ? 22 : 28"
         :src="options.userAvatar"
-      />
+      /> -->
+      <div class="col-start-1 row-start-1">
+        <Avatar :src="options.userAvatar" :size="isChild ? 22 : 28"></Avatar>
+      </div>
       <view class="col-start-2 row-start-1">
         <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]">
           {{ options.userName }}