文本预览

src/client/components/fileView/views/MarkdownPlayer.vue

@@ -39,7 +39,6 @@ onMounted( async ()=>{
       <div class="markdown-body" v-html="innerHTML"></div>
     </div>
   </template>
-
 </div>
 </template>
 

src/client/components/fileView/views/PreTextPlayer.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import {FrontmatterFileData} from "../../../../type/index.js";
+import {onMounted, ref} from "vue";
+import {putNotification} from "../../../js/notification/notification.js";
+import Loading from "./Loading.vue";
+import LoadError from "./LoadError.vue";
+const props = defineProps<{file:FrontmatterFileData}>()
+
+const loading = ref(true);
+const loadError = ref(false);
+const innerText = ref<string>();
+onMounted( async ()=>{
+  try{
+    const res = await fetch(props.file.url);
+    if(!res.ok){
+      putNotification({message:"加载 文本 文件失败!",type:"error",time:10000});
+    }
+    innerText.value = await res.text();
+  }catch (e){
+    putNotification({message:"加载 文本 文件失败!",type:"error",time:10000});
+    loadError.value = true;
+  }
+  loading.value = false;
+});
+
+</script>
+
+<template>
+  <div class="pre-text">
+    <LoadError v-if="loadError" message="加载 文本 文件失败!"></LoadError>
+    <Loading v-else-if="loading"></Loading>
+    <template v-else>
+      <div class="title">{{props.file.name}}</div>
+      <pre class="body">{{innerText}}</pre>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.title{
+  border: 0.1rem solid #e1e4e8;
+  border-bottom: none;
+  border-radius: 0.8rem 0.8rem 0 0;
+  width: calc(100% - 2rem);
+  padding: 0.5rem 1rem;
+  background-color: #f0f2f4;
+  font-size: 0.9rem;
+  font-weight: bolder;
+}
+.body{
+  border: 0.1rem solid #e1e4e8;
+  border-radius: 0 0 0.8rem 0.8rem;
+  padding: 1rem;
+  width: calc(100% - 2rem);
+  max-height: 70vh;
+  margin: 0;
+  overflow: auto;
+}
+.pre-text{
+  padding: 1rem 0;
+}
+</style>

src/client/components/fileView/views/suffix.ts

@@ -2,8 +2,6 @@ import {type Component, defineAsyncComponent} from "vue";
 import {FrontmatterFileData} from "../../../../type/index.js";
 import LoadError from "./LoadError.vue";
 import Loading from "./Loading.vue";
-import FileImageO from "../../../imgs/fileTypes/FileImageO.vue";
-
 export type ViewComponent = {
     component:Component<{file:FrontmatterFileData}>,
     name:string
@@ -25,12 +23,14 @@ const MusicPlayer = defineViewComponent("音乐播放",()=>import("./MusicPlayer
 const MarkdownPlayer = defineViewComponent("Markdown预览",()=>import("./MarkdownPlayer.vue"));
 const ImgPlayer = defineViewComponent("图片预览",()=>import("./ImgPlayer.vue"));
 const PDFPlayer = defineViewComponent("PDF预览",()=>import("./PDFPlayer.vue"));
+const PreTextPlayer = defineViewComponent("文本预览",()=>import("./PreTextPlayer.vue"));
 const fileTypesSuffixConfig:[string[],ViewComponent[]][] = [
     [[".mp4",".mkv",".webm",".m3u8",".ts",".avi",".mov",".wmv",".flv"],[VideoPlayer]],
     [[".mp3",".flac",".wav"],[MusicPlayer]],
     [[".md"],[MarkdownPlayer]],
     [[".jpg",".jpeg",".png",".gif",".bmp",".webp",".svg",".ico",".tiff",],[ImgPlayer]],
     [[".pdf"],[PDFPlayer]],
+    [[".txt",".text",".md"],[PreTextPlayer]],
 ]
 
 const fileTypesSuffix:{[suffix:string]:ViewComponent[]} = {}