init minio

frontend/src/components/UserUpsertModal.vue

@@ -41,6 +41,10 @@
 								class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
 								required placeholder="编辑时非必填" />
 						</div>
+						<label class="block mb-2 text-sm font-medium text-gray-900" for="file_input">上传头像</label>
+						<input
+							class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none"
+							id="file_input" type="file" accept="image/*" @change="handleFileChange">
 						<div class="w-full">
 							<label for="status" class="block mb-2 text-sm font-medium text-gray-900">状态</label>
 							<select id="status" v-model="formData.enable"
@@ -61,11 +65,15 @@
 
 </template>
 <script setup lang="ts">
+import { useUserUpsert } from "@/composables/user/useUserUpsert";
 import type { UserUpsertSubmitModel } from "@/types/user";
+import Compressor from "compressorjs";
 import { initFlowbite } from "flowbite";
 import { onMounted, ref, watch } from "vue";
 import { z } from "zod";
 import type { components } from "../api/types/schema";
+import { ValidationError } from "@/types/error";
+import useAlertStore from "@/composables/store/useAlertStore";
 
 const { user, onSubmit } = defineProps<{
 	user?: components["schemas"]["UserRolePermissionDto"];
@@ -74,12 +82,15 @@ const { user, onSubmit } = defineProps<{
 }>();
 
 const formData = ref();
+const { uploadUserAvatar } = useUserUpsert();
+const { showAlert } = useAlertStore();
 
 const updateFormData = (newUser: typeof user) => {
 	formData.value = {
 		id: newUser?.id,
 		username: newUser?.username,
 		password: undefined,
+		avatar: newUser?.avatar ?? undefined,
 		enable: newUser?.enable ?? true,
 		confirmPassword: undefined,
 	};
@@ -89,10 +100,51 @@ watch(() => user, updateFormData, {
 	immediate: true,
 });
 
+const validateFile = (file?: File) => {
+	if (!file) {
+		throw new ValidationError("您未选择文件");
+	}
+	const allowedTypes = ["image/jpeg", "image/png", "image/gif"];
+	if (!allowedTypes.includes(file.type)) {
+		throw new ValidationError("不支持的文件类型");
+	}
+	const maxSize = 200 * 1024; // 200KB
+	if (file.size > maxSize) {
+		throw new ValidationError("文件大小超过限制(200KB)");
+	}
+};
+
+const handleFileChange = (event: Event) => {
+	const file = (event.target as HTMLInputElement).files?.[0];
+	try {
+		validateFile(file);
+		new Compressor(file!, {
+			quality: 0.8, // 压缩质量，0-1之间
+			maxWidth: 800, // 最大宽度
+			maxHeight: 800, // 最大高度
+			mimeType: "auto", // 自动选择最佳格式
+			success: async (compressedFile: File) => {
+				formData.value.avatar = await uploadUserAvatar(compressedFile);
+				showAlert({
+					content: "上传成功",
+					level: "success",
+				});
+			},
+			error: (err: Error) => {
+				throw err;
+			},
+		});
+	} catch (error) {
+		(event.target as HTMLInputElement).value = "";
+		throw error;
+	}
+};
+
 const handleSubmit = async () => {
 	const userSchema = z
 		.object({
 			id: z.number().optional(),
+			avatar: z.string().optional(),
 			username: z
 				.string({
 					message: "用户名不能为空",