From 7b8ef54e7baa0ddc6577c6b15c92024297ab42b6 Mon Sep 17 00:00:00 2001
From: Chuck1sn <chuck1inzl@gmail.com>
Date: Sun, 15 Jun 2025 22:14:52 +0800
Subject: [PATCH] avatar fix

---
 frontend/src/components/Assistant.vue | 10 ++++---
 frontend/src/components/Avatar.vue    | 43 +++++++++++++++++++++++++++
 frontend/src/components/Headbar.vue   |  7 ++---
 frontend/src/views/UserView.vue       | 11 ++-----
 4 files changed, 54 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/Avatar.vue

diff --git a/frontend/src/components/Assistant.vue b/frontend/src/components/Assistant.vue
index e1bd97c..8f097bf 100644
--- a/frontend/src/components/Assistant.vue
+++ b/frontend/src/components/Assistant.vue
@@ -4,17 +4,18 @@
 		ref="chatContainer">
 		<div class="flex flex-col gap-y-5 flex-1 pb-2">
 			<li v-for="chatElement in messages" :key="chatElement.content"
-				:class="['flex items-start gap-2.5', chatElement.isUser ? 'flex-row-reverse max-w-full break-words' : 'flex-row']">
-				<img class="w-8 h-8 rounded-full" :src="chatElement.isUser ? '/java.svg' : '/trump.jpg'" alt="avatar">
+				:class="['flex items-start gap-2.5', chatElement.isUser ? 'flex-row-reverse' : 'flex-row']">
+				<Avatar :src="chatElement.isUser ? user.avatar : '/trump.jpg'" size="sm"
+					:alt="chatElement.isUser ? '用户头像' : 'AI头像'" />
 				<div
-					:class="['flex flex-col leading-1.5 p-4 border-gray-200 rounded-e-xl rounded-es-xl ', chatElement.isUser ? 'bg-blue-100' : 'bg-gray-100']">
+					:class="['flex flex-col leading-1.5 p-4 border-gray-200 rounded-e-xl rounded-es-xl max-w-[calc(100%-40px)]', chatElement.isUser ? 'bg-blue-100' : 'bg-gray-100']">
 					<div class="flex items-center space-x-2">
 						<span class="text-sm font-semibold text-gray-900 ">{{ chatElement.username }}</span>
 						<LoadingIcon :textColor="'text-gray-900'"
 							v-if="isLoading && !chatElement.isUser && chatElement.content === ''" />
 					</div>
 					<div>
-						<div class="markdown-content markdown-body text-base font-normal py-2.5 text-gray-900 "
+						<div class="markdown-content markdown-body text-base font-normal py-2.5 text-gray-900 break-words"
 							v-html="renderMarkdown(chatElement.content)">
 						</div>
 						<button
@@ -90,6 +91,7 @@
 </template>
 
 <script setup lang="ts">
+import Avatar from "@/components/Avatar.vue";
 import InputButton from "@/components/InputButton.vue";
 import UserDeleteModal from "@/components/PopupModal.vue";
 import DepartmentDeleteModal from "@/components/PopupModal.vue";
diff --git a/frontend/src/components/Avatar.vue b/frontend/src/components/Avatar.vue
new file mode 100644
index 0000000..c3b0776
--- /dev/null
+++ b/frontend/src/components/Avatar.vue
@@ -0,0 +1,43 @@
+<template>
+	<div class="rounded-full border border-gray-200 flex items-center justify-center overflow-hidden flex-shrink-0"
+		:class="sizeClass">
+		<img v-if="processedSrc" :src="processedSrc" class="w-full h-full object-cover" :alt="alt">
+		<div v-else class="w-full h-full bg-gray-100"></div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { getUserAvatarUrl } from "@/utils/avatarUtil";
+import { computed } from "vue";
+
+const { 
+	src = "", 
+	alt = "用户头像", 
+	size = "md" 
+} = defineProps<{
+	src?: string;
+	alt?: string;
+	size?: "sm" | "md" | "lg";
+}>();
+
+const sizeClass = computed(() => {
+	switch (size) {
+		case "sm":
+			return "w-8 h-8";
+		case "lg":
+			return "w-12 h-12";
+		default:
+			return "w-10 h-10";
+	}
+});
+
+const processedSrc = computed(() => {
+	if (!src) {
+		return "";
+	}
+	if (src === "/trump.jpg") {
+		return src;
+	} 
+	return getUserAvatarUrl(src);
+});
+</script>
diff --git a/frontend/src/components/Headbar.vue b/frontend/src/components/Headbar.vue
index cd5dc88..3565c2e 100644
--- a/frontend/src/components/Headbar.vue
+++ b/frontend/src/components/Headbar.vue
@@ -39,10 +39,7 @@
               <button type="button" id="dropdown-button" class="flex text-sm rounded-full cursor-pointer"
                 aria-expanded="false" data-dropdown-toggle="dropdown-user">
                 <span class="sr-only">打开用户菜单</span>
-                <div
-                  class="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center overflow-hidden">
-                  <img v-if="user.avatar" :src="getUserAvatarUrl(user.avatar)" class="object-cover">
-                </div>
+                <Avatar :src="user.avatar" size="sm" />
               </button>
             </div>
             <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-sm shadow-sm  "
@@ -97,8 +94,8 @@ import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import useUserAuth from "../composables/auth/useUserAuth";
 import { RouteName, RoutePath } from "../router/constants";
+import Avatar from "./Avatar.vue";
 import AiChatIcon from "./icons/AiChatIcon.vue";
-import { getUserAvatarUrl } from "@/utils/avatarUtil";
 
 const props = defineProps<{
 	changeAssistantVisible: () => void;
diff --git a/frontend/src/views/UserView.vue b/frontend/src/views/UserView.vue
index 1a4b5b1..4ab81e3 100644
--- a/frontend/src/views/UserView.vue
+++ b/frontend/src/views/UserView.vue
@@ -22,9 +22,7 @@
       <div v-for="user in users" :key="user.id" class="p-4 bg-white rounded-lg shadow">
         <div class="flex justify-between items-start mb-3">
           <div class="flex items-center gap-2">
-            <div class="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center overflow-hidden">
-              <img v-if="user.avatar" :src="getUserAvatarUrl(user.avatar)" class="object-cover">
-            </div>
+            <Avatar :src="user.avatar" />
             <div class="font-medium text-gray-900">{{ user.username }}</div>
           </div>
           <div class="flex items-center">
@@ -90,9 +88,7 @@
           <SortIcon :sortField="getSortField(field)" />
         </template>
         <template #avatar="{ item }">
-          <div class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center overflow-hidden">
-            <img v-if="item.avatar" :src="getUserAvatarUrl(item.avatar)" class="object-cover">
-          </div>
+          <Avatar :src="item.avatar" />
         </template>
         <template #createTime="{ item }">
           {{ dayjs(item.createTime).format("llll") }}
@@ -162,8 +158,8 @@
 </template>
 
 <script setup lang="ts">
+import Avatar from "@/components/Avatar.vue";
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
-
 import UserDeleteModal from "@/components/PopupModal.vue";
 import SortIcon from "@/components/SortIcon.vue";
 import TableButton from "@/components/TableButton.vue";
@@ -180,7 +176,6 @@ import useUserDelete from "@/composables/user/useUserDelete";
 import { useUserQuery } from "@/composables/user/useUserQuery";
 import { RouteName } from "@/router/constants";
 import type { UserUpsertSubmitModel } from "@/types/user";
-import { getUserAvatarUrl } from "@/utils/avatarUtil";
 import { dayjs, formatDate } from "@/utils/dateUtil";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { nextTick, onMounted, reactive, ref } from "vue";