101 lines
1.7 KiB
Vue
101 lines
1.7 KiB
Vue
<template>
|
|
<div class="file-icon">
|
|
<img class="file-icon-img" :src="getIcon(file)" alt="file-icon" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { FileInfo } from "../utils/fileMgr";
|
|
|
|
const props = defineProps<{
|
|
file: FileInfo;
|
|
}>();
|
|
const iconMap = {
|
|
"/static/icons/IMG.webp": [
|
|
"jpg",
|
|
"png",
|
|
"jpeg",
|
|
"gif",
|
|
"bmp",
|
|
"tiff",
|
|
"ico",
|
|
"webp",
|
|
],
|
|
"/static/icons/PPT.webp": ["ppt", "pptx"],
|
|
"/static/icons/TXT.webp": ["txt", "md", "markdown"],
|
|
"/static/icons/WORD.webp": ["doc", "docx"],
|
|
"/static/icons/PDF.webp": ["pdf"],
|
|
"/static/icons/VIDEO.webp": [
|
|
"mp4",
|
|
"avi",
|
|
"mov",
|
|
"wmv",
|
|
"flv",
|
|
"mkv",
|
|
"rmvb",
|
|
"rm",
|
|
"asf",
|
|
"wmv",
|
|
"mpg",
|
|
"mpeg",
|
|
"mpe",
|
|
"m4v",
|
|
"3gp",
|
|
"3g2",
|
|
"flv",
|
|
"f4v",
|
|
"swf",
|
|
"vob",
|
|
],
|
|
"/static/icons/MUSIC.webp": [
|
|
"mp3",
|
|
"wav",
|
|
"wma",
|
|
"aac",
|
|
"flac",
|
|
"ape",
|
|
"m4a",
|
|
"ogg",
|
|
"m3u",
|
|
"m3u8",
|
|
"pls",
|
|
"qmc",
|
|
"qmcflac",
|
|
"qmcogg",
|
|
"qmcwma",
|
|
"rm",
|
|
"rmvb",
|
|
"wavpack",
|
|
],
|
|
"/static/icons/ZIP.webp": [
|
|
"zip",
|
|
"rar",
|
|
"7z",
|
|
"tar",
|
|
"gz",
|
|
"bz2",
|
|
"iso",
|
|
"7zip",
|
|
],
|
|
"/static/icons/XML.webp": ["xml", "html", "htm", "xhtml", "shtml", "shtm"],
|
|
};
|
|
//根据文件类型与后缀生成icon
|
|
const getIcon = (file: FileInfo): string => {
|
|
if (file.isDirectory) {
|
|
return "/static/icons/wenjianjia.webp";
|
|
}
|
|
for (const [iconUrl, extensions] of Object.entries(iconMap)) {
|
|
if (extensions.includes(file.name.split(".").pop()!)) {
|
|
return iconUrl;
|
|
}
|
|
}
|
|
return "/static/icons/OTHER.webp";
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.file-icon-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|