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<{
|
|
(e: "delete-resource", resourceId: string): void;
|
|
}>();
|
|
|
|
const resourceIcon = computed(() => {
|
|
switch (props.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.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>
|