Timothy Yin
3a8b78ea7b
- Expanded CourseResourceType to include "resource" and "temp". - Renamed ICourseResource to IResource and updated its properties for consistency. - Introduced ICreateResource type for resource creation. - Modified ICourseSection and ICourseChapter interfaces to use the new IResource type and updated property names for camelCase. - Implemented uploadFile function in file API for handling file uploads. - Created ResourceUploader component for uploading resources with validation and feedback. - Developed Card component for displaying course class details and managing student enrollment. - Added AlertDialog components for consistent alert dialog UI. - Enhanced table components for better data presentation and management. - Implemented preview page for displaying various resource types based on file extension.
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import VueOfficePptx from "@vue-office/pptx";
|
|
|
|
const {
|
|
params: { resource_url },
|
|
} = useRoute();
|
|
|
|
const url = computed(() => {
|
|
return atob(resource_url as string);
|
|
});
|
|
|
|
const fileExtension = computed(() => {
|
|
const lastDotIndex = url.value.lastIndexOf(".");
|
|
if (lastDotIndex === -1) return "";
|
|
return url.value.substring(lastDotIndex + 1).toLowerCase();
|
|
});
|
|
|
|
const fileType = computed(() => {
|
|
const ext = fileExtension.value;
|
|
if (ext === "pdf") return "pdf";
|
|
if (ext === "doc" || ext === "docx") return "word";
|
|
if (ext === "ppt" || ext === "pptx") return "ppt";
|
|
if (ext === "xls" || ext === "xlsx") return "excel";
|
|
if (ext === "txt") return "txt";
|
|
if (ext === "jpg" || ext === "jpeg" || ext === "png" || ext === "gif")
|
|
return "image";
|
|
if (ext === "mp4" || ext === "avi" || ext === "mov") return "video";
|
|
if (ext === "mp3" || ext === "wav") return "audio";
|
|
return "";
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-screen">
|
|
<div v-if="!url">
|
|
<div class="flex items-center justify-center h-full">
|
|
<p class="text-muted-foreground">资源链接无效</p>
|
|
</div>
|
|
</div>
|
|
<div v-else class="w-full h-full">
|
|
<VueOfficePptx
|
|
v-if="fileType === 'ppt'"
|
|
:src="url"
|
|
class="w-full h-full"
|
|
:options="{
|
|
autoSize: true,
|
|
autoHeight: true,
|
|
autoWidth: true,
|
|
autoScale: true,
|
|
autoRotate: true,
|
|
autoFit: true,
|
|
}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|