Timothy Yin
b05f954923
fix: update home page background image and remove unnecessary redirect code chore: update pnpm lock file with new dependencies for auto-animate and svg spinners delete: remove unused images from public directory refactor: modify course and user types for better clarity and structure feat: implement course API with CRUD operations and teacher team management feat: create user authentication page with login functionality and validation feat: add login state management with Pinia for user session handling style: create reusable UI components for cards and tabs chore: implement HTTP utility for API requests with error handling
63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
||
import type { ICourseTeamMember } from "~/api/course";
|
||
|
||
defineProps<{
|
||
member: ICourseTeamMember;
|
||
isCurrentUser?: boolean;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
delete: [teacherId: 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
|
||
variant="link"
|
||
size="icon"
|
||
@click.stop="emit('delete', member.teacherId)"
|
||
>
|
||
<Icon name="tabler:trash" size="16px" 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.schoolId || "未知学校" }}
|
||
</p>
|
||
<p class="text-xs text-muted-foreground/80">
|
||
{{ member.teacher.collegeId || "未知学院" }}
|
||
</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>
|