搜索结果列表页面开发

src/components/UserAvatar/README.md

@@ -0,0 +1,9 @@
+TS接口文档可以查看同文件夹下的types.ts
+
+### Props
+
+| 参数        | 说明     | 类型                                                              | 可选值       | 默认值  |
+|-----------|--------|-----------------------------------------------------------------|-----------|------|
+| userInfo  | 用户信息   | {nickname?: string;name?: string;imgSrc: string;path?: string;} | —         | —    |
+| size?     | 头像尺寸   | number                                                          | —            | 30   |
+| showName? | 是否显示名称 | boolean                                                         | —            | true |

src/components/UserAvatar/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <router-link v-if="userInfo.path" :to="userInfo.path">
+    <div class="g-user-avatar">
+      <GAvatar
+        :src="userInfo.imgSrc"
+        :width="size"
+        :height="size"
+        :name="userInfo.nickname || userInfo.name"
+      >
+      </GAvatar>
+      <span v-if="showName" class="g-user-avatar-name">{{ userInfo.nickname || userInfo.name }}</span>
+    </div>
+  </router-link>
+  <div v-else class="g-user-avatar">
+    <GAvatar
+      :src="userInfo.imgSrc"
+      :width="size"
+      :height="size"
+      :name="userInfo.nickname || userInfo.name"
+    >
+      </GAvatar>
+    <span v-if="showName" class="g-user-avatar-name">{{ userInfo.nickname || userInfo.name }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'user-avatar'
+};
+</script>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'UserAvatar'
+});
+withDefaults(defineProps<{
+  userInfo: {
+    nickname?: string;
+    name?: string;
+    imgSrc: string;
+    path?: string;
+    iam_id?:string;
+  },
+  size?: number;
+  showName?: boolean;
+}>(), {
+  userInfo: () => ({
+    imgSrc: '',
+    path: ''
+  }),
+  size: 30,
+  showName: true
+});
+</script>
+
+<style scoped lang="scss">
+$g-user-avatar-color: #243042;
+.g-user-avatar {
+  display: inline-flex;
+  align-items: center;
+  &-name {
+    margin-left: 2px;
+    color: $g-user-avatar-color;
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+</style>