修复InviteTeamMemberDialog.vue错误

dashboard/src/components/settings/InviteTeamMemberDialog.vue

@@ -21,16 +21,16 @@
 				/>
 			</n-form-item>
 			<div v-if="$resources.roles.data?.length > 0" class="space-y-4">
-				<div class="flex items-end gap-2">
-					<n-form-item :label="$t('Select Role')" class="flex-1">
+				<div class="role-select-row">
+					<label class="role-select-label">{{ $t('Select Role') }}</label>
+					<div class="flex items-center gap-2">
 						<n-select
 							v-model:value="selectedRole"
 							:options="roleOptions"
-							:placeholder="$t('Select a role')"
+							placeholder=""
 							:size="inputSize"
-							class="w-full"
+							class="flex-1"
 						/>
-					</n-form-item>
 						<n-button
 							type="primary"
 							:disabled="!selectedRole"
@@ -43,6 +43,7 @@
 							{{ $t('Add') }}
 						</n-button>
 					</div>
+				</div>
 				<div v-if="selectedRoles.length > 0" class="space-y-2">
 					<div
 						v-for="role in selectedRoles"
@@ -64,9 +65,9 @@
 				</div>
 			</div>
 			<n-alert
-				v-if="$team.inviteTeamMember.error"
+				v-if="$team?.inviteTeamMember?.error"
 				type="error"
-				:title="getErrorMessage($team.inviteTeamMember.error)"
+				:title="getErrorMessage($team?.inviteTeamMember?.error)"
 			/>
 		</n-space>
 		<template #action>
@@ -76,7 +77,7 @@
 				</n-button>
 				<n-button
 					type="primary"
-					:loading="$team.inviteTeamMember.loading"
+					:loading="$team?.inviteTeamMember?.loading"
 					@click="inviteMember"
 					:block="isMobile"
 					:size="buttonSize"
@@ -153,7 +154,7 @@ export default {
 			return this.isMobile ? 'medium' : 'large';
 		},
 		buttonSize() {
-			return this.isMobile ? 'medium' : 'medium';
+			return this.isMobile ? 'medium' : 'large';
 		},
 		roleOptions() {
 			if (!this.$resources.roles.data) return [];
@@ -182,12 +183,18 @@ export default {
 		},
 		getErrorMessage(error) {
 			if (!error) return '';
+			try {
 				if (typeof error === 'string') return error;
+				if (error && typeof error === 'object') {
 					if (error.message) return error.message;
 					if (error.messages && Array.isArray(error.messages)) {
 						return error.messages.join('\n');
 					}
+				}
 				return String(error);
+			} catch (e) {
+				return String(error || 'Unknown error');
+			}
 		},
 		addRole() {
 			if (this.selectedRole) {
@@ -206,18 +213,23 @@ export default {
 				(role) => role.value !== roleToRemove,
 			);
 		},
-		inviteMember() {
+		async inviteMember() {
 			if (!this.username) {
 				toast.error(this.$t('Username is required'));
 				return;
 			}
+			if (!this.$team?.inviteTeamMember) {
+				toast.error(this.$t('Team service is not available'));
+				return;
+			}
 			if (this.$team.inviteTeamMember.loading) return;
 			
-			toast.success(this.$t('Member added to team'), { duration: 2000 });
-			this.$team.inviteTeamMember.submit({
+			try {
+				await this.$team.inviteTeamMember.submit({
 					username: this.username,
 					roles: this.selectedRoles.map((role) => role.value),
 				});
+				toast.success(this.$t('Member added to team'), { duration: 2000 });
 				this.hide();
 				setTimeout(() => {
 					if (this.$team?.getTeamMembers) {
@@ -225,6 +237,10 @@ export default {
 					}
 					this.$emit('success');
 				}, 500);
+			} catch (error) {
+				// Error will be displayed in the alert component
+				console.error('Failed to invite team member:', error);
+			}
 		},
 		hide() {
 			this.showDialog = false;
@@ -266,6 +282,29 @@ export default {
 	width: 100%;
 }
 
+.role-select-row {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.role-select-label {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--n-text-color);
+	margin-bottom: 0;
+}
+
+.role-select-row .flex {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.role-select-row .n-select {
+	flex: 1;
+}
+
 :deep(.invite-member-modal .n-card__action) {
 	padding: 16px 24px;
 }