@chenghongyu/xpt-file-viewer 1.1.0

package/src/components/file/preview/TextViewer.vue

@@ -0,0 +1,232 @@
+<template>
+    <VueCodeEditor v-if="fileContent" :fileName="fileName" :modelValue="fileContent" :language="fileSuffix" :readonly="!storageConfigStore.permission.upload"></VueCodeEditor>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import useStorageConfigStore from "~/stores/storage-config";
+let storageConfigStore = useStorageConfigStore();
+
+import { getFileSuffix } from "~/utils";
+import VueCodeEditor from "~/components/vue-codemirror/index.vue";
+
+// 组件接收的属性：
+//  fileUrl:    文件下载路径
+//  fileName:   文件名
+const props = defineProps({
+	fileUrl: String,
+	fileName: String
+});
+
+// 获取文件名后缀
+const fileSuffix = getFileSuffix(props.fileName);
+
+// 文件内容
+const fileContent = ref(null);
+
+import { getFileTextReq } from "~/api/home/common";
+
+// 挂载时，加载文件内容，并初始化播放器
+onMounted(() => {
+	let fileUrl = props.fileUrl;
+	getFileTextReq(fileUrl).then((res) => {
+		fileContent.value = res.request.response;
+	}).catch((e) => {
+    ElMessage({
+      message: `加载文本文件失败. 请检查此地址是否有效或是否限制了跨域访问.`,
+      type: 'error',
+      duration: 0,
+      showClose: true,
+      grouping: true,
+    })
+	});
+});
+</script>
+
+<style lang="scss">
+
+.toolbar {
+    display: grid;
+    grid-template-columns: repeat(1,minmax(0,1fr))
+}
+
+@media (min-width: 640px) {
+    .toolbar {
+        grid-template-columns:repeat(2,minmax(0,1fr))
+    }
+}
+
+@media (min-width: 768px) {
+    .toolbar {
+        grid-template-columns:repeat(3,minmax(0,1fr))
+    }
+}
+
+@media (min-width: 1280px) {
+    .toolbar {
+        grid-template-columns:repeat(5,minmax(0,1fr))
+    }
+}
+
+.toolbar .item {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+    display: -webkit-box;
+    display: flex
+}
+
+.toolbar .item>:not([hidden])~:not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(.25rem * var(--tw-space-x-reverse));
+    margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
+}
+
+@media (min-width: 640px) {
+    .toolbar .item {
+        max-width:80%
+    }
+}
+
+@media (min-width: 768px) {
+    .toolbar .item {
+        max-width:70%
+    }
+}
+
+@media (min-width: 1280px) {
+    .toolbar .item {
+        max-width:60%
+    }
+}
+
+.toolbar .item label {
+    white-space: nowrap
+}
+
+.editor .cm-editor {
+    height: 50vh
+}
+
+@media (min-width: 640px) {
+    .editor .cm-editor {
+        height:60vh
+    }
+}
+
+@media (min-width: 1024px) {
+    .editor .cm-editor {
+        height:65vh
+    }
+}
+
+.editor .divider {
+    height: 1px;
+    background-color: var(--theme-border)
+}
+
+.editor .main {
+    display: -webkit-box;
+    display: flex;
+    width: 100%
+}
+
+.editor .main .code {
+    width: 30%;
+    height: 100px;
+    margin: 0;
+    padding: .4em;
+    overflow: scroll;
+    border-left: 1px solid var(--theme-border);
+    font-family: monospace
+}
+
+.editor .footer {
+    height: 3rem;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
+    font-size: 90%;
+    width: 100%
+}
+
+@media not all and (min-width: 640px) {
+    .editor .footer {
+        -webkit-box-orient:vertical;
+        -webkit-box-direction: normal;
+        flex-direction: column
+    }
+}
+
+.editor .footer .buttons>:not([hidden])~:not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(.75rem * var(--tw-space-x-reverse));
+    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
+}
+
+@media not all and (min-width: 640px) {
+    .editor .footer .buttons {
+        width:100%
+    }
+}
+
+.editor .footer .buttons .item {
+    display: -webkit-inline-box;
+    display: inline-flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    background-color: transparent;
+    border: 1px dashed var(--theme-border);
+    font-size: 12px;
+    color: var(--text-secondary);
+    cursor: pointer
+}
+
+.editor .footer .buttons .item .iconfont {
+    margin-left: .309rem
+}
+
+.editor .footer .buttons .item:hover {
+    color: var(--text-color);
+    border-color: var(--text-color)
+}
+
+.editor .footer .infos>:not([hidden])~:not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(.75rem * var(--tw-space-x-reverse));
+    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
+}
+
+@media not all and (min-width: 640px) {
+    .editor .footer .infos {
+        width:100%
+    }
+}
+
+.editor .footer .infos .item {
+    display: inline-block;
+    -webkit-font-feature-settings: "tnum";
+    font-feature-settings: "tnum"
+}
+
+.example .divider {
+    height: 1px;
+    background-color: var(--theme-border)
+}
+
+.example .cm-editor {
+    height: var(--51369a7c)
+}
+
+.example .loading-box {
+    overflow: auto;
+    width: 100%;
+    min-height: 20rem;
+    max-height: 60rem;
+    height: calc(100vh - 42.2rem - 2px)
+}
+</style>

package/src/components/file/preview/TextViewerAsyncLoading.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="zfile-async-loading p-10 h-[75vh] w-full">
+    <div class="flex justify-between h-full">
+      <div class="w-1/4">
+        <el-skeleton animated :count="6" />
+      </div>
+      <div class="w-20 h-full">
+        <el-skeleton animated class="h-full">
+          <template #template>
+            <el-skeleton-item variant="rect" class="!h-full"></el-skeleton-item>
+          </template>
+        </el-skeleton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/file/preview/TextViewerDialog.vue

@@ -0,0 +1,53 @@
+<template>
+  <z-dialog
+    v-model="visible"
+    draggable
+    top="5vh"
+    class="zfile-text-viewer-dialog"
+    :title="name"
+    width="90%"
+    :showFooter="false"
+  >
+    <TextViewer :file-name="name"
+                :file-url="url"
+                v-if="visible && name.indexOf('.md') === -1"/>
+    <MarkdownViewer :file-name="name"
+                    :file-url="url"
+                    v-if="visible && name.indexOf('.md') !== -1"/>
+  </z-dialog>
+</template>
+
+<script setup>
+import ZDialog from "~/components/common/dialog/ZDialog.vue";
+import MarkdownViewerDialogAsyncLoading from "~/components/file/preview/MarkdownViewerDialogAsyncLoading.vue";
+
+const TextViewer = defineAsyncComponent({
+  loader: () => import("~/components/file/preview/TextViewer.vue"),
+  loadingComponent: MarkdownViewerDialogAsyncLoading
+})
+const MarkdownViewer = defineAsyncComponent({
+  loader: () => import("~/components/file/preview/MarkdownViewer.vue"),
+  loadingComponent: MarkdownViewerDialogAsyncLoading
+})
+
+import useTextViewerDialog from "~/composables/file/useTextViewerDialog";
+const { visible, name, url } = useTextViewerDialog();
+</script>
+
+<style scoped lang="scss">
+:deep(.zfile-text-viewer-dialog) {
+  overflow: hidden;
+  height: 90%;
+
+  .el-dialog__body {
+    @apply overflow-hidden p-0 h-full;
+  }
+
+  &.is-fullscreen {
+    .markdown-body {
+      height: 90vh;
+    }
+    height: 100%;
+  }
+}
+</style>

package/src/components/file/preview/Three3dPreview.vue

@@ -0,0 +1,114 @@
+<template>
+  <div ref="el">
+    <div class="float-right mb-1">
+      <span>背景颜色: </span>
+      <el-color-picker v-model="color" show-alpha :predefine="predefineColors" />
+    </div>
+    <vue3dLoader
+      v-if="loadFinish"
+      :key="resizeCount"
+      class="h-[75vh] clear-right"
+      :fileType="fileSuffix"
+      :mtlPath="mtlPath"
+      :backgroundColor="color"
+      :filePath='fileLinkUrl'>
+    </vue3dLoader>
+  </div>
+
+</template>
+
+<script setup>
+import { useResizeObserver } from '@vueuse/core'
+const el = ref(null)
+const resizeCount = ref(0);
+
+useResizeObserver(el, () => {
+  resizeCount.value++;
+})
+
+import { getFileNameIgnoreExt, getFileSuffix } from "~/utils";
+import { vue3dLoader } from "vue-3d-loader";
+
+import useRouterData from "~/composables/useRouterData";
+let { currentPath } = useRouterData();
+
+import useFileLink from "~/composables/file/useFileLink";
+let { batchGetFilePathLink } = useFileLink();
+
+const loadFinish = ref(false);
+let mtlPath = ref();
+
+// 组件接收的属性：
+//  fileUrl:    文件下载路径
+//  fileName:   文件名
+const props = defineProps({
+  fileUrl: String,
+  fileName: String
+});
+
+onMounted(() => {
+  init();
+})
+
+let fileSuffix = getFileSuffix(props.fileName);
+let fileLinkUrl = ref();
+
+const init = async () => {
+
+	let loadPathLinkFiles = [
+		{
+			path: currentPath.value,
+			name: props.fileName
+		}
+	]
+
+  if (fileSuffix === "obj") {
+    let basicName = getFileNameIgnoreExt(props.fileName);
+	  loadPathLinkFiles.push({
+		  path: currentPath.value,
+		  name: basicName + '.mtl',
+	  })
+  }
+
+	let generateLinkResult = await batchGetFilePathLink(loadPathLinkFiles);
+	if (generateLinkResult) {
+		fileLinkUrl.value = generateLinkResult[0];
+		if (generateLinkResult.length > 1) {
+			mtlPath.value = generateLinkResult[1];
+		}
+	} else {
+		console.log('加载文件直链失败，无法预览。');
+	}
+
+  loadFinish.value = true;
+}
+
+onUnmounted(() => {
+  mtlPath.value = null;
+})
+
+
+const color = useStorage('zfile-3d-color', '#ffffff');
+
+const predefineColors = ref([
+  '#ff4500',
+  '#ff8c00',
+  '#ffd700',
+  '#90ee90',
+  '#00ced1',
+  '#1e90ff',
+  '#c71585',
+  'rgba(255, 69, 0, 0.68)',
+  'rgb(255, 120, 0)',
+  'hsv(51, 100, 98)',
+  'hsva(120, 40, 94, 0.5)',
+  'hsl(181, 100%, 37%)',
+  'hsla(209, 100%, 56%, 0.73)',
+  '#c7158577',
+])
+
+</script>
+
+<style scoped>
+
+</style>

package/src/components/file/preview/Three3dPreviewDialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <z-dialog
+    v-model="visible"
+    draggable
+    top="5vh"
+    width="90%"
+    class="zfile-three-3d-dialog"
+    :title="name"
+    :showFooter="false"
+  >
+    <Three3dPreview v-if="visible" :fileName="name" :fileUrl="url"/>
+  </z-dialog>
+</template>
+
+<script setup>
+import ZDialog from "~/components/common/dialog/ZDialog.vue";
+import MarkdownViewerDialogAsyncLoading from "~/components/file/preview/MarkdownViewerDialogAsyncLoading.vue";
+
+const Three3dPreview = defineAsyncComponent({
+  loader: () => import("~/components/file/preview/Three3dPreview.vue"),
+  loadingComponent: MarkdownViewerDialogAsyncLoading
+})
+
+import useThree3dPreviewDialog from "~/composables/file/useThree3dPreviewDialog";
+const { visible, name, url } = useThree3dPreviewDialog();
+</script>
+
+<style scoped lang="scss">
+:deep(.el-dialog) {
+  // 内容无边框
+  @apply p-0;
+
+  // 标题有边框
+  .el-dialog__header {
+    @apply p-2;
+  }
+
+  // 全屏时，视频播放器高度 90vh
+  &.is-fullscreen {
+    .viewer-container {
+      height: calc(100vh - 41px - 32px - 4px);
+    }
+  }
+
+  // 隐藏底部按钮
+  .el-dialog__footer {
+    display: none;
+  }
+}
+</style>