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
94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<script lang="ts" setup>
|
|
import type { ICourseResource } from "~/types";
|
|
|
|
const props = defineProps<{
|
|
resource: ICourseResource;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
"delete-resource": [resourceId: number];
|
|
}>();
|
|
|
|
const resourceIcon = computed(() => {
|
|
switch (props.resource.resource_type) {
|
|
case "video":
|
|
return "tabler:video";
|
|
case "image":
|
|
return "tabler:photo";
|
|
case "ppt":
|
|
return "tabler:file-type-ppt";
|
|
case "doc":
|
|
return "tabler:file-type-doc";
|
|
|
|
default:
|
|
return "tabler:file";
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="px-4 pl-8 py-1 flex justify-between group/resource hover:bg-muted/50"
|
|
>
|
|
<div class="flex items-center gap-2 relative text-muted-foreground">
|
|
<div
|
|
class="absolute inset-y-0 top-3 left-1.5 w-4 h-[1px] bg-gray-300 dark:bg-gray-700 z-0"
|
|
/>
|
|
<div class="w-[7px] h-[7px] rounded-full bg-foreground/50 z-10" />
|
|
<Icon :name="resourceIcon" class="ml-6" size="20px" />
|
|
<span class="text-ellipsis line-clamp-1 text-xs font-medium">
|
|
{{ resource.resource_name }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-2 mr-8 opacity-0 group-hover/resource:opacity-100"
|
|
>
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="flex items-center gap-1 text-muted-foreground"
|
|
>
|
|
<Icon name="tabler:eye" size="16px" />
|
|
<span>预览</span>
|
|
</Button>
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="flex items-center gap-1 text-muted-foreground"
|
|
:class="{
|
|
'text-amber-500': resource.allow_download,
|
|
}"
|
|
>
|
|
<Icon
|
|
:name="
|
|
resource.allow_download ? 'tabler:download-off' : 'tabler:download'
|
|
"
|
|
size="16px"
|
|
/>
|
|
<span>
|
|
{{ resource.allow_download ? "禁止下载" : "允许下载" }}
|
|
</span>
|
|
</Button>
|
|
<!-- <Tooltip :delay-duration="0">
|
|
<TooltipTrigger>
|
|
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{{ `当前${resource.allow_download ? "允许" : "禁止"}下载` }}
|
|
</TooltipContent>
|
|
</Tooltip> -->
|
|
<Button
|
|
variant="link"
|
|
size="xs"
|
|
class="flex items-center gap-1 text-red-500"
|
|
@click="emit('delete-resource', resource.id)"
|
|
>
|
|
<Icon name="tabler:trash" size="16px" />
|
|
<span>删除</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|