新增表单和对话框组件，优化头像处理逻辑，更新相关工具函数，提升用户界面和交互体验。

frontend/src/components/ui/Avatar.vue

@@ -1,8 +1,7 @@
 <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>
+		<img :src="processedSrc" class="w-full h-full object-cover" :alt="alt">
 	</div>
 </template>
 
@@ -10,34 +9,29 @@
 import { getUserAvatarUrl } from "@/utils/avatarUtil";
 import { computed } from "vue";
 
-const {
-	src = "",
-	alt = "用户头像",
-	size = "md",
-} = defineProps<{
+const props = defineProps<{
+	/** 头像图片源 */
 	src?: string;
+	/** 头像替代文本 */
 	alt?: string;
-	size?: "sm" | "md" | "lg";
+	/** 头像尺寸 */
+	size?: "xs" | "sm" | "md" | "lg" | "xl";
 }>();
 
+/** 尺寸样式映射 */
 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 sizes = {
+		xs: "w-6 h-6",
+		sm: "w-8 h-8",
+		md: "w-10 h-10",
+		lg: "w-12 h-12",
+		xl: "w-16 h-16"
+	};
+	return sizes[props.size || "md"];
 });
 
+/** 处理后的图片源 */
 const processedSrc = computed(() => {
-	if (!src) {
-		return "";
-	}
-	if (src === "/trump.jpg") {
-		return src;
-	}
-	return getUserAvatarUrl(src);
+	return getUserAvatarUrl(props.src);
 });
 </script>