|
|
|
|
@ -39,23 +39,22 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="file-preview-wrapper flex" v-if="preview"> |
|
|
|
|
<div class="file-list"> |
|
|
|
|
<section |
|
|
|
|
v-for="(item, index) in fileList" |
|
|
|
|
:key="index" |
|
|
|
|
class="flex gap v-center pointer" |
|
|
|
|
:active="fileList.indexOf(activeFile) === index" |
|
|
|
|
@click="filePreview(item)" |
|
|
|
|
> |
|
|
|
|
<icon :name="getIconName(item.type)" :size="24" /> |
|
|
|
|
<span>{{ item.orgiinFilename }}</span> |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
class="file-content flex center v-center" |
|
|
|
|
@click="preview = false" |
|
|
|
|
> |
|
|
|
|
<div class="file-preview-wrapper flex overlay" v-if="preview"> |
|
|
|
|
<el-scrollbar height="100vh"> |
|
|
|
|
<div class="file-list"> |
|
|
|
|
<section |
|
|
|
|
v-for="(item, index) in fileList" |
|
|
|
|
:key="index" |
|
|
|
|
class="flex gap v-center pointer" |
|
|
|
|
:active="fileList.indexOf(activeFile) === index" |
|
|
|
|
@click="filePreview(item)" |
|
|
|
|
> |
|
|
|
|
<icon :name="getIconName(item.type)" :size="24" /> |
|
|
|
|
<span>{{ item.orgiinFilename }}</span> |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
<div class="file-content flex center v-center" @click="preview = false" @wheel="wheel"> |
|
|
|
|
<div |
|
|
|
|
class="img-container flex center" |
|
|
|
|
v-if="activeFile.type.indexOf('image') > -1" |
|
|
|
|
@ -64,18 +63,23 @@
|
|
|
|
|
:src="`${VITE_API_URL}/api/file/stream/${activeFile.filepath}`" |
|
|
|
|
ref="imgRef" |
|
|
|
|
@click.stop |
|
|
|
|
:style="{transform: `rotate(${rotate}deg) scale(${scale})`}" |
|
|
|
|
/> |
|
|
|
|
<button |
|
|
|
|
class="rotate-left-btn pointer" |
|
|
|
|
@click.stop="rotateLeft" |
|
|
|
|
size="small" |
|
|
|
|
title="左旋转" |
|
|
|
|
> |
|
|
|
|
<icon name="el-icon-Back" :size="28" /> |
|
|
|
|
<icon name="local-icon-rotate-left" :size="28" /> |
|
|
|
|
</button> |
|
|
|
|
<button |
|
|
|
|
class="rotate-right-btn pointer" |
|
|
|
|
@click.stop="rotateRight" |
|
|
|
|
size="small" |
|
|
|
|
title="右旋转" |
|
|
|
|
> |
|
|
|
|
<icon name="el-icon-Right" :size="28" /> |
|
|
|
|
<icon name="local-icon-rotate-right" :size="28" /> |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
<template v-else-if="activeFile.type.indexOf('audio') > -1"> |
|
|
|
|
@ -165,6 +169,7 @@ import "@vue-office/excel/lib/index.css";
|
|
|
|
|
|
|
|
|
|
import VueOfficeDocx from "@vue-office/docx"; |
|
|
|
|
import VueOfficeExcel from "@vue-office/excel"; |
|
|
|
|
import { nextTick, onMounted } from "vue"; |
|
|
|
|
|
|
|
|
|
const { VITE_API_URL } = process.env; |
|
|
|
|
const router = useRouter(); |
|
|
|
|
@ -193,39 +198,51 @@ watch(
|
|
|
|
|
const preview = ref(false); |
|
|
|
|
const activeFile = ref({}); |
|
|
|
|
const fileRrror = ref(false); |
|
|
|
|
const imgRef = ref(); |
|
|
|
|
let rotate = 0; |
|
|
|
|
|
|
|
|
|
const rotate = ref(0); |
|
|
|
|
const scale = ref(0); |
|
|
|
|
function prev() { |
|
|
|
|
const index = fileList.value.indexOf(activeFile.value); |
|
|
|
|
if (index === 0) { |
|
|
|
|
filePreview(fileList.value[fileList.value.length - 1]) |
|
|
|
|
filePreview(fileList.value[fileList.value.length - 1]); |
|
|
|
|
} else { |
|
|
|
|
filePreview(fileList.value[index - 1]) |
|
|
|
|
filePreview(fileList.value[index - 1]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
function next() { |
|
|
|
|
const index = fileList.value.indexOf(activeFile.value); |
|
|
|
|
if (index === fileList.value.length - 1) { |
|
|
|
|
filePreview(fileList.value[0]) |
|
|
|
|
filePreview(fileList.value[0]); |
|
|
|
|
} else { |
|
|
|
|
filePreview(fileList.value[index + 1]) |
|
|
|
|
filePreview(fileList.value[index + 1]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
function filePreview(file) { |
|
|
|
|
preview.value = true; |
|
|
|
|
fileRrror.value = false; |
|
|
|
|
activeFile.value = file; |
|
|
|
|
rotate = 0 |
|
|
|
|
imgRef.value.style.transform = `rotate(0deg)`; |
|
|
|
|
rotate.value = 0; |
|
|
|
|
scale.value = 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function wheel(event) { |
|
|
|
|
if (activeFile.value.type.indexOf('image') === -1) { |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
if (event.deltaY > 0) { |
|
|
|
|
scale.value += 0.08; |
|
|
|
|
} |
|
|
|
|
if (event.deltaY < 0 && scale.value > 0.2) { |
|
|
|
|
scale.value -= 0.08; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function rotateLeft() { |
|
|
|
|
imgRef.value.style.transform = `rotate(${(rotate += 90)}deg)`; |
|
|
|
|
rotate.value += 90 |
|
|
|
|
console.log(rotate.value) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function rotateRight() { |
|
|
|
|
imgRef.value.style.transform = `rotate(${(rotate -= 90)}deg)`; |
|
|
|
|
rotate.value -= 90 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getIconName(filetype) { |
|
|
|
|
@ -323,18 +340,12 @@ function getDocFilepath() {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.file-preview-wrapper { |
|
|
|
|
position: fixed; |
|
|
|
|
left: 0; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
background-color: rgba(0, 0, 0, 0.7); |
|
|
|
|
z-index: 999; |
|
|
|
|
.file-list { |
|
|
|
|
width: 14vw; |
|
|
|
|
width: 15vw; |
|
|
|
|
height: 100vh; |
|
|
|
|
padding: 16px 8px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
section { |
|
|
|
|
padding: 8px 16px; |
|
|
|
|
border: 2px solid transparent; |
|
|
|
|
@ -385,7 +396,7 @@ function getDocFilepath() {
|
|
|
|
|
.rotate-left-btn { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 12px; |
|
|
|
|
right: 108px; |
|
|
|
|
right: 118px; |
|
|
|
|
background-color: transparent; |
|
|
|
|
border: none; |
|
|
|
|
color: #fff; |
|
|
|
|
|
wxc
2 years ago
