155 lines
3.7 KiB
Vue
155 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import { toast } from 'vue-sonner'
|
|
import { editResource } from '~/api/course'
|
|
import type { IResource } from '~/types'
|
|
|
|
const props = defineProps<{
|
|
resource: IResource
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'refresh': []
|
|
'delete-resource': [resourceId: number]
|
|
}>()
|
|
|
|
const resourceIcon = computed(() => {
|
|
switch (props.resource.resourceName?.split('.').pop()) {
|
|
case 'mp4':
|
|
case 'avi':
|
|
case 'mov':
|
|
return 'tabler:video'
|
|
case 'jpg':
|
|
case 'jpeg':
|
|
case 'png':
|
|
case 'gif':
|
|
case 'webp':
|
|
return 'tabler:photo'
|
|
case 'ppt':
|
|
case 'pptx':
|
|
return 'tabler:file-type-ppt'
|
|
case 'doc':
|
|
case 'docx':
|
|
case 'txt':
|
|
case 'pdf':
|
|
case 'xls':
|
|
case 'xlsx':
|
|
case 'csv':
|
|
return 'tabler:file-type-doc'
|
|
|
|
default:
|
|
return 'tabler:file'
|
|
}
|
|
})
|
|
|
|
const onAllowDownloadSwitch = () => {
|
|
toast.promise(
|
|
editResource({
|
|
...props.resource,
|
|
allowDownload: !props.resource.allowDownload,
|
|
}),
|
|
{
|
|
loading: '正在修改资源下载权限...',
|
|
success: () => {
|
|
return `已${props.resource.allowDownload ? '禁止' : '允许'}下载资源`
|
|
},
|
|
error: () => {
|
|
return '修改资源下载权限失败'
|
|
},
|
|
finally: () => {
|
|
emit('refresh')
|
|
},
|
|
},
|
|
)
|
|
}
|
|
|
|
const onDeleteResource = () => {
|
|
const confirmDelete = confirm(
|
|
'将从课程中移除该资源，文件仍可在资源库中找到，是否继续？',
|
|
)
|
|
if (!confirmDelete) return
|
|
emit('delete-resource', props.resource.id)
|
|
}
|
|
|
|
const onPreviewResource = (url: string) => {
|
|
window.open(`/preview/${btoa(url)}`, 'xmts_resource_preview')
|
|
}
|
|
</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.resourceName }}
|
|
</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"
|
|
@click="onPreviewResource(resource.resourceUrl)"
|
|
>
|
|
<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.allowDownload,
|
|
}"
|
|
@click="onAllowDownloadSwitch"
|
|
>
|
|
<Icon
|
|
:name="
|
|
resource.allowDownload ? 'tabler:download-off' : 'tabler:download'
|
|
"
|
|
size="16px"
|
|
/>
|
|
<span>
|
|
{{ resource.allowDownload ? "关闭下载" : "开启下载" }}
|
|
</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="onDeleteResource"
|
|
>
|
|
<Icon
|
|
name="tabler:trash"
|
|
size="16px"
|
|
/>
|
|
<span>删除</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|