init minio

frontend/src/api/schema/openapi.json

@@ -610,6 +610,44 @@
         }
       }
     },
+    "/iam/avatar/upload": {
+      "post": {
+        "tags": [
+          "identity-access-controller"
+        ],
+        "operationId": "uploadAvatar",
+        "requestBody": {
+          "content": {
+            "multipart/form-data": {
+              "schema": {
+                "required": [
+                  "file"
+                ],
+                "type": "object",
+                "properties": {
+                  "file": {
+                    "type": "string",
+                    "format": "binary"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "type": "string"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/department": {
       "post": {
         "tags": [
@@ -1300,6 +1338,9 @@
           },
           "enable": {
             "type": "boolean"
+          },
+          "avatar": {
+            "type": "string"
           }
         }
       },
@@ -1732,6 +1773,9 @@
             "type": "string",
             "writeOnly": true
           },
+          "avatar": {
+            "type": "string"
+          },
           "enable": {
             "type": "boolean"
           },

frontend/src/api/types/schema.d.ts

@@ -292,6 +292,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/iam/avatar/upload": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["uploadAvatar"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/department": {
         parameters: {
             query?: never;
@@ -631,6 +647,7 @@ export interface components {
             username: string;
             password?: string;
             enable: boolean;
+            avatar?: string;
         };
         RoleUpsertDto: {
             /** Format: int64 */
@@ -780,6 +797,7 @@ export interface components {
             id?: number;
             username?: string;
             password?: string;
+            avatar?: string;
             enable?: boolean;
             roles?: components["schemas"]["RoleDto"][];
             /** Format: date-time */
@@ -1402,6 +1420,33 @@ export interface operations {
             };
         };
     };
+    uploadAvatar: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "multipart/form-data": {
+                    /** Format: binary */
+                    file: string;
+                };
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
     upsertDepartment: {
         parameters: {
             query?: never;

frontend/src/components/Assistant.vue

@@ -111,8 +111,15 @@ import useUserStore from "../composables/store/useUserStore";
 import { useUserUpsert } from "../composables/user/useUserUpsert";
 import type { UserUpsertSubmitModel } from "../types/user";
 
-const { messages, chat, isLoading, cancel, searchAction, executeAction, clearConversation } =
-	useAiChat();
+const {
+	messages,
+	chat,
+	isLoading,
+	cancel,
+	searchAction,
+	executeAction,
+	clearConversation,
+} = useAiChat();
 const { user } = useUserStore();
 const userUpsertModal = ref<ModalInterface>();
 const departmentUpsertModal = ref<ModalInterface>();

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: "用户名不能为空",

frontend/src/composables/user/useUserUpsert.ts

@@ -1,20 +1,35 @@
-import { ref } from "vue";
 import client from "../../api/client";
 import type { UserUpsertSubmitModel } from "../../types/user";
 
 export const useUserUpsert = () => {
+	const uploadUserAvatar = async (file: File) => {
+		const { data } = await client.POST("/iam/avatar/upload", {
+			body: {
+				file: file as unknown as string,
+			},
+			bodySerializer: (body) => {
+				const formData = new FormData();
+				formData.set("file", body?.file as unknown as string);
+				return formData;
+			},
+			parseAs: "text",
+		});
+		return data;
+	};
 	const upsertUser = async (user: UserUpsertSubmitModel) => {
-		const { data } = await client.POST("/iam/user", {
+		await client.POST("/iam/user", {
 			body: {
 				id: user.id,
 				username: user.username,
 				password: user.password,
 				enable: user.enable,
+				avatar: user.avatar,
 			},
 		});
 	};
 
 	return {
+		uploadUserAvatar,
 		upsertUser,
 	};
 };

frontend/src/types/error.ts

@@ -1,3 +1,10 @@
+class ValidationError extends Error {
+	constructor(message: string) {
+		super(message);
+		this.name = "ValidationError";
+	}
+}
+
 class HttpError extends Error {
 	status: number;
 	detail?: string;
@@ -37,4 +44,10 @@ class InternalServerError extends HttpError {
 	}
 }
 
-export { UnAuthError, ForbiddenError, RequestError, InternalServerError };
+export {
+	UnAuthError,
+	ForbiddenError,
+	RequestError,
+	InternalServerError,
+	ValidationError,
+};

frontend/src/types/user.d.ts

@@ -3,6 +3,7 @@ export interface UserUpsertSubmitModel {
 	username: string;
 	password?: string;
 	enable: boolean;
+	avatar?: string;
 }
 
 export type User = UserRolePermissionModel | null;

frontend/src/utils/errorHandler.ts

@@ -5,6 +5,7 @@ import {
 	ForbiddenError,
 	InternalServerError,
 	RequestError,
+	ValidationError,
 	UnAuthError,
 } from "../types/error";
 import { z } from "zod";
@@ -23,7 +24,12 @@ const makeErrorHandler =
 	) =>
 	(err: unknown, instance: ComponentPublicInstance | null, info: string) => {
 		console.error(err);
-		if (err instanceof UnAuthError) {
+		if (err instanceof ValidationError) {
+			showAlert({
+				level: "error",
+				content: err.message,
+			});
+		} else if (err instanceof UnAuthError) {
 			signOut();
 			router.push(RoutePath.LOGIN);
 			showAlert({