init

2025-12-02 10:37:49 +08:00
commit 1f645dad3e
1183 changed files with 147673 additions and 0 deletions
--- a/src/components/Material/preview.vue
+++ b/src/components/Material/preview.vue
@@ -0,0 +1,93 @@
+<template>
+  <div v-show="modelValue">
+    <div v-if="type == 'image'">
+      <el-image-viewer v-if="previewLists.length" :url-list="previewLists" hide-on-click-modal @close="handleClose"/>
+    </div>
+    <div v-if="type == 'video'">
+      <el-dialog v-model="visible" width="740px" :title="$t('material.preview')" :before-close="handleClose">
+        <video-player ref="playerRef" :src="url" width="100%" height="450px"/>
+      </el-dialog>
+    </div>
+    <div v-if="type == 'file'">
+      <el-drawer v-model="visible" size="100%">
+        <iframe
+            :src="src"
+            width="100%" height="100%" frameborder="0" class="h-screen" v-if="src"></iframe>
+        <span v-else>未配置预览服务器，请参考文档配置</span>
+      </el-drawer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {Base64} from 'js-base64';
+import {validateNull} from "/@/utils/validate";
+
+const VideoPlayer = defineAsyncComponent(() => import('/@/components/VideoPlayer/index.vue'));
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  url: {
+    type: String,
+    default: '',
+  },
+  fileName: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'image',
+  },
+});
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void;
+}>();
+
+const playerRef = shallowRef();
+
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+
+const handleClose = () => {
+  emit('update:modelValue', false);
+};
+
+const previewLists = ref<any[]>([]);
+
+watch(
+    () => props.modelValue,
+    (value) => {
+      if (value) {
+        nextTick(() => {
+          previewLists.value = [props.url];
+          playerRef.value?.play();
+        });
+      } else {
+        nextTick(() => {
+          previewLists.value = [];
+          playerRef.value?.pause();
+        });
+      }
+    }
+);
+
+const kkServerURL = import.meta.env.VITE_KK_SERVER_URL
+const localURL = import.meta.env.VITE_KK_LOCAL_URL
+const src = computed(() => {
+  if (validateNull(kkServerURL)) {
+    return undefined;
+  }
+  return `${kkServerURL}?url=` + encodeURIComponent(Base64.encode(`${localURL}${props.url}&fullfilename=${props.fileName}`));
+});
+</script>