64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import type { ICourseTeamMember } from "~/api/course";
|
|
|
|
defineProps<{
|
|
member: ICourseTeamMember;
|
|
isCurrentUser?: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
delete: [recordId: number];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="member-card relative group/member-card">
|
|
<div
|
|
class="absolute top-0 right-0 flex flex-col gap-1 invisible group-hover/member-card:visible"
|
|
>
|
|
<Button
|
|
v-if="!isCurrentUser"
|
|
variant="link"
|
|
size="icon"
|
|
@click="emit('delete', member.id)"
|
|
>
|
|
<Icon name="tabler:logout" size="20px" class="text-red-500" />
|
|
</Button>
|
|
</div>
|
|
|
|
<Avatar size="base">
|
|
<AvatarImage
|
|
:src="member.teacher.avatar || ''"
|
|
:alt="member.teacher.userName"
|
|
/>
|
|
<AvatarFallback class="rounded-lg">
|
|
{{ member.teacher.userName.slice(0, 2).toUpperCase() }}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<h1
|
|
class="text-sm font-medium text-ellipsis line-clamp-1"
|
|
:class="`${isCurrentUser ? 'text-amber-500' : ''}`"
|
|
>
|
|
{{ member.teacher.userName || "未知教师" }}
|
|
</h1>
|
|
<p class="text-xs text-muted-foreground/80">
|
|
工号：{{ member.teacher.employeeId || "未知" }}
|
|
</p>
|
|
<p class="text-xs text-muted-foreground/80">
|
|
{{ member.teacher.schoolName || "未知学校" }}
|
|
</p>
|
|
<p class="text-xs text-muted-foreground/80">
|
|
{{ member.teacher.collegeName || "未知学院" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.member-card {
|
|
@apply p-4 flex justify-start items-center gap-4 border border-muted-foreground/20 rounded-lg bg-background/50 shadow-md transition duration-300 ease-in-out hover:shadow-lg hover:ring-4 hover:ring-secondary;
|
|
}
|
|
</style>
|