perf: 优化文件里预览图片

This commit is contained in:
kuaifan 2024-06-04 20:11:48 +08:00
parent ff872c7dce
commit 376120b6d0
2 changed files with 23 additions and 43 deletions

View File

@ -75,7 +75,7 @@ export default {
this.lightbox = new PhotoSwipeLightbox({
dataSource,
escKey: false,
mainClass: this.className,
mainClass: this.className + ' no-dark-content',
showHideAnimationType: 'none',
pswpModule: () => import('photoswipe'),
});

View File

@ -415,12 +415,6 @@
<FileContent v-else ref="fileContent" v-model="fileShow" :file="fileInfo"/>
</DrawerOverlay>
<!--预览文件-->
<PreviewImage
v-model="imageShow"
:index="imageIndex"
:list="imageList"/>
<!--拖动上传提示-->
<Modal
v-model="pasteShow"
@ -443,7 +437,6 @@
import {mapState} from "vuex";
import {sortBy} from "lodash";
import DrawerOverlay from "../../components/DrawerOverlay";
import PreviewImage from "../../components/PreviewImage";
import longpress from "../../directives/longpress";
import UserSelect from "../../components/UserSelect.vue";
import UserAvatarTip from "../../components/UserAvatar/tip.vue";
@ -453,7 +446,7 @@ const FileContent = () => import('./components/FileContent');
const FileObject = {sort: null, mode: null, shared: null};
export default {
components: {UserAvatarTip, UserSelect, PreviewImage, FilePreview, DrawerOverlay, FileContent},
components: {UserAvatarTip, UserSelect, FilePreview, DrawerOverlay, FileContent},
directives: {longpress},
data() {
return {
@ -534,10 +527,6 @@ export default {
fileShow: false,
fileInfo: {permission: -1},
imageShow: false,
imageIndex: 0,
imageList:[],
uploadDir: false,
uploadIng: 0,
uploadShow: false,
@ -931,12 +920,6 @@ export default {
}
},
imageShow(val) {
if (!val) {
this.browseFile(0)
}
},
navigator: {
handler() {
this.$nextTick(_ => {
@ -1088,39 +1071,17 @@ export default {
openFileJudge() {
if (this.$route.name !== 'manage-file') {
this.fileShow = false;
this.imageShow = false;
return;
}
if (this.fid <= 0) {
this.fileShow = false;
this.imageShow = false;
return;
}
const item = this.fileList.find(({id}) => id === this.fid)
if (!item) {
this.fileShow = false;
this.imageShow = false;
return;
}
//
if (item.image_url) {
const list = this.fileList.filter(({image_url}) => !!image_url)
if (list.length > 0) {
this.imageIndex = list.findIndex(({id}) => item.id === id)
this.imageList = list.map(item => {
if (item.image_width) {
return {
src: item.image_url,
width: item.image_width,
height: item.image_height,
}
}
return item.image_url;
})
this.imageShow = true
return;
}
}
//
if (this.$Electron || this.$isEEUiApp) {
this.openFileSingle(item);
@ -1220,9 +1181,28 @@ export default {
}
if (item.type == 'folder') {
this.browseFolder(item.id)
} else {
this.browseFile(item.id)
return;
}
if (item.image_url) {
//
const list = this.fileList.filter(({image_url}) => !!image_url)
if (list.length > 0) {
const index = list.findIndex(({id}) => item.id === id)
const array = list.map(item => {
if (item.image_width) {
return {
src: item.image_url,
width: item.image_width,
height: item.image_height,
}
}
return item.image_url;
})
this.$store.dispatch("previewImage", {index, list: array})
return;
}
}
this.browseFile(item.id)
break;
case 'upperFolder':