查看图片

src/libs/globalFunction/file.js

@@ -1,16 +1,10 @@
 import * as Vue from 'vue'
-import { getCurrentInstance } from 'vue' // 添加这一行
 import router from '@/router'
 import config from '@/config/reSource'
 import { message } from 'ant-design-vue'
 import { fileImgMap, unknownImg, fileSuffixCodeModeMap, markdownFileType } from '@/libs/map.js'
 import { officeFileType } from '@/libs/map.js'
-
-// 获取全局属性的辅助函数
-function getGlobalProperties() {
-	const instance = getCurrentInstance()
-	return instance ? instance.appContext.config.globalProperties : null
-}
+import fileOperationPlugins from '@/libs/fileOperationPlugins.js'
 
 // 全局函数 - 文件相关
 const fileFunction = {
@@ -226,10 +220,7 @@ const fileFunction = {
 						}
 				  ]
 		const defaultIndex = Number(router.currentRoute.value.query.fileType.fileType) === 1 ? currentIndex : 0
-		const globalProps = getGlobalProperties()
-		if (globalProps) {
-			globalProps.$openBox.imgPreview({ imgList, defaultIndex })
-		}
+		fileOperationPlugins.openBox.imgPreview({ imgList, defaultIndex })
 	},
 	/**
 	 * 视频预览
@@ -256,10 +247,7 @@ const fileFunction = {
 						}
 				  ]
 		const defaultIndex = Number(router.currentRoute.value.query.fileType.fileType) === 3 ? currentIndex : 0
-		const globalProps = getGlobalProperties()
-		if (globalProps) {
-			globalProps.$openBox.videoPreview({ videoList, defaultIndex })
-		}
+		fileOperationPlugins.openBox.videoPreview({ videoList, defaultIndex })
 	},
 	/**
 	 * 音频预览
@@ -286,10 +274,7 @@ const fileFunction = {
 						}
 				  ]
 		const defaultIndex = Number(router.currentRoute.value.query.fileType.fileType) === 4 ? currentIndex : 0
-		const globalProps = getGlobalProperties()
-		if (globalProps) {
-			globalProps.$openBox.audioPreview({ audioList, defaultIndex })
-		}
+		fileOperationPlugins.openBox.audioPreview({ audioList, defaultIndex })
 	},
 	/**
 	 * 文件预览
@@ -357,22 +342,15 @@ const fileFunction = {
 			}
 			// 无格式文件也可以在线编辑
 			if (fileSuffixCodeModeMap.has(codeFileSuffix) || (row.isDir === 0 && row.extendName === '')) {
-				const globalProps = getGlobalProperties()
-				if (globalProps) {
-					globalProps.$openBox.codePreview({ fileInfo: row, isEdit: false })
-				}
-
+				fileOperationPlugins.openBox.codePreview({ fileInfo: row, isEdit: false })
 				return false
 			}
 			//  若当前点击项是 markdown 文档
 			if (markdownFileType.includes(row.extendName.toLowerCase())) {
-				const globalProps = getGlobalProperties()
-				if (globalProps) {
-					globalProps.$openBox.markdownPreview({
-						fileInfo: row,
-						editable: false
-					})
-				}
+				fileOperationPlugins.openBox.markdownPreview({
+					fileInfo: row,
+					editable: false
+				})
 				return false
 			}
 			//  若当前点击项是视频mp4格式

src/style/myResource/varibles.less

@@ -45,4 +45,5 @@
 @Warning: #E6A23C;
 @scrollbar-thumb-color: #909399;
 @scrollbar-track-color: #EBEEF5;
-@primary-hover: #ecf5ff;
+@primary-hover: #ecf5ff;
+@primary-text: #303133;

src/views/myResource/file/box/imgPreview/BoxMask.vue

@@ -1,21 +1,20 @@
 <template>
-	<transition
-		name="fade"
-		enter-active-class="ant-fade-enter ant-fade-enter-active"
-		leave-active-class="ant-fade-leave ant-fade-leave-active"
-	>
+	<transition name="fade">
 		<div class="img-preview-wrapper" v-show="visible">
-			<!-- 顶部信息栏 -->
+			<!-- 顶部信息栏 & 工具栏 -->
 			<div class="tip-wrapper" v-if="visible">
-				<left-outlined
+				<span
 					class="fold-icon"
-					:class="{ 'no-fold': isShowMinImgList }"
+					:class="isShowMinImgList ? 'no-fold' : 'fold'"
 					:title="isShowMinImgList ? '折叠缩略图' : '展开缩略图'"
 					@click="isShowMinImgList = !isShowMinImgList"
-				/>
-
-				<div class="name" :title="activeImageName">{{ activeImageName }}</div>
-
+				>
+					<left-outlined v-if="isShowMinImgList" />
+					<right-outlined v-else />
+				</span>
+				<div class="name" :title="activeImageName">
+					{{ activeImageName }}
+				</div>
 				<div class="opera-btn-group">
 					<a-input-number
 						v-model:value="inputActiveIndex"
@@ -26,22 +25,22 @@
 					/>
 					<span class="split-line">/</span>{{ imgList.length }}
 				</div>
-
 				<div class="tool-wrapper">
-					<rotate-right-outlined class="item" title="向右旋转" @click="handleRotateImg" />
-
+					<span class="item" title="向右旋转" @click="handleRotateImg">
+						<redo-outlined />
+					</span>
 					<a class="item download-link" target="_blank" :href="activeDownloadLink" :download="activeImageName">
 						<download-outlined title="保存到本地" />
 					</a>
-
 					<a-tooltip placement="bottom">
 						<template #title>
 							<div style="line-height: 1.5">
 								1. 点击图片以外的区域可退出预览<br />
 								2. 按 Escape 键可退出预览<br />
-								3. 按左、右方向键可切换图片<br />
+								3. 按左、右方向键可切换为上一张、下一张图片<br />
 								4. 鼠标滚轮可放大、缩小图片<br />
-								5. 点击左上角箭头图标可折叠、展开缩略图
+								5. 点击左上角
+								<left-outlined /> 图标可折叠、展开缩略图<br />
 							</div>
 						</template>
 						<div class="item text-wrapper">
@@ -49,12 +48,12 @@
 							<bulb-outlined />
 						</div>
 					</a-tooltip>
-
-					<close-outlined class="item close-icon" title="关闭预览" @click="handleCloseImgPreview" />
+					<span class="item close-icon" title="关闭预览" @click="handleCloseImgPreview">
+						<close-outlined />
+					</span>
 				</div>
 			</div>
-
-			<!-- 缩略图列表 -->
+			<!-- 左侧缩略图 -->
 			<ul class="min-img-list" ref="minImgListRef" v-show="isShowMinImgList">
 				<li
 					class="min-img-item"
@@ -68,8 +67,7 @@
 					<img class="min-img" :src="$file.setFileImg(item)" :alt="`${item.fileName} 缩略图`" />
 				</li>
 			</ul>
-
-			<!-- 预览区域 -->
+			<!-- 右侧预览区域 -->
 			<div
 				class="img-wrapper"
 				:class="{ 'full-width': !isShowMinImgList }"
@@ -86,27 +84,31 @@
 					v-show="index === activeIndex"
 				/>
 				<!-- 左右切换图标 -->
-				<i
-					class="pre-icon el-icon-arrow-left"
+				<span
+					class="pre-icon"
 					title="上一张"
 					v-show="activeIndex > 0"
 					@click.stop="handleChangeActiveImg(activeIndex - 1)"
-				></i>
-				<i
-					class="next-icon el-icon-arrow-right"
+				>
+					<left-outlined />
+				</span>
+				<span
+					class="next-icon"
 					title="下一张"
 					v-show="activeIndex < imgList.length - 1"
 					@click.stop="handleChangeActiveImg(activeIndex + 1)"
-				></i>
+				>
+					<right-outlined />
+				</span>
 				<!-- 底部显示放大缩小比例 -->
 				<div class="zoom-bar">
-					<el-slider
-						v-model="imgZoom"
+					<a-slider
+						v-model:value="imgZoom"
 						:min="imgZoomMin"
 						:max="imgZoomMax"
-						:format-tooltip="formatZoomSize"
-						@input="handleZoomImg"
-					></el-slider>
+						:tip-formatter="formatZoomSize"
+						@update:value="handleZoomImg"
+					/>
 					<div class="zoom-count">{{ imgZoom }}%</div>
 				</div>
 			</div>
@@ -115,71 +117,109 @@
 </template>
 
 <script setup>
-	import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+	import { ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
+	import { useMyResourceStore } from '@/store/myResource'
 	import {
 		LeftOutlined,
 		RightOutlined,
-		RotateRightOutlined,
+		RedoOutlined,
 		DownloadOutlined,
 		BulbOutlined,
 		CloseOutlined
 	} from '@ant-design/icons-vue'
-	import { useMyResourceStore } from '@/store/myResource'
 
-	// Props & Emits
+	// 获取全局变量
+	const { proxy } = getCurrentInstance()
+
+	// 获取store
+	const myResourceStore = useMyResourceStore()
+
+	// 定义props
 	const props = defineProps({
-		imgList: Array,
-		defaultIndex: Number,
-		callback: Function
+		imgList: {
+			type: Array,
+			default: () => []
+		},
+		defaultIndex: {
+			type: Number,
+			default: 0
+		},
+		callback: {
+			type: Function,
+			default: () => {}
+		}
 	})
 
-	// Store & Utils
-	const store = useMyResourceStore()
-
-	// Refs
+	// 响应式数据
 	const visible = ref(false)
 	const inputActiveIndex = ref(1)
 	const rotate = ref(0)
 	const activeIndex = ref(0)
 	const imgZoom = ref(100)
+	const imgZoomMin = ref(1)
+	const imgZoomMax = ref(200)
 	const isShowMinImgList = ref(true)
-	const minImgListRef = ref(null)
-	const minImgRef = ref([])
-	const imgLarge = ref([])
-
-	// Constants
-	const IMG_ZOOM_MIN = 1
-	const IMG_ZOOM_MAX = 200
 
-	// Computed properties
-	const activeImage = computed(() => {
-		return props.imgList[activeIndex.value]
-	})
-	const activeImageName = computed(() => {
-		return $file.getFileNameComplete(activeImage.value)
-	})
-	const imageHeight = computed(() => {
-		return activeImage.value.imageHeight
-	})
-	const imageWidth = computed(() => {
-		return activeImage.value.imageWidth
+	// DOM引用
+	const minImgListRef = ref(null)
+	const minImgRef = ref(null)
+	const imgLarge = ref(null)
+
+	// 计算属性
+	const activeImage = computed(() => props.imgList[activeIndex.value])
+	const activeImageName = computed(() => proxy.$file.getFileNameComplete(activeImage.value))
+	const imageHeight = computed(() => activeImage.value.imageHeight)
+	const imageWidth = computed(() => activeImage.value.imageWidth)
+	const activeDownloadLink = computed(() => activeImage.value.downloadLink)
+	const screenWidth = computed(() => myResourceStore.screenWidth)
+	// 监听器
+	watch(visible, (val) => {
+		if (val) {
+			activeIndex.value = props.defaultIndex
+			document.addEventListener('keyup', handleAddKeyupEvent) // 添加键盘相关事件
+			// 获取用户是否显示缩略图的操作习惯设置
+			isShowMinImgList.value = localStorage.getItem('qiwen_file_img_preview_show_min') === 'false' ? false : true
+			nextTick(() => {
+				handleCalculateImgZoom(activeIndex.value) // 确定图片缩放比例
+				handleScrollMinImg() // 将当前查看图片对应的缩略图滚动到视野中
+			})
+		} else {
+			// 移除键盘相关事件
+			document.removeEventListener('keyup', handleAddKeyupEvent)
+		}
 	})
-	// 当前显示的图片下载链接
-	const activeDownloadLink = computed(() => {
-		return activeImage.value.downloadLink
+
+	watch(activeIndex, (newValue) => {
+		rotate.value = 0
+		nextTick(() => {
+			if (imgLarge.value[newValue].style.zoom) {
+				imgZoom.value = Number(imgLarge.value[newValue].style.zoom.split('%')[0])
+			} else {
+				// 确定图片缩放比例
+				handleCalculateImgZoom(newValue)
+			}
+		})
 	})
-	// 屏幕宽度
-	const screenWidth = computed(() => {
-		return store.state.common.screenWidth
+
+	watch(isShowMinImgList, (val) => {
+		localStorage.setItem('qiwen_file_img_preview_show_min', val)
 	})
 
-	// Methods
-	const handleChangeInputIndex = (value) => {
-		activeIndex.value = value - 1
-		handleChangeActiveImg(value - 1)
+	// 方法
+	/**
+	 * 顶部栏输入框绑定值被改变时触发
+	 * @param {number} currentValue 当前值
+	 */
+	const handleChangeInputIndex = (currentValue) => {
+		activeIndex.value = currentValue - 1
+		handleChangeActiveImg(currentValue - 1)
 	}
 
-	const handleKeyEvents = (event) => {
+	/**
+	 * DOM 绑定 Esc 键、左方向键、右方向键的键盘按下事件
+	 * @param {event} event 事件
+	 */
+	const handleAddKeyupEvent = (event) => {
 		switch (event.key) {
 			case 'Escape': {
 				handleCloseImgPreview() // 关闭预览
@@ -257,10 +297,10 @@
 	 * 鼠标滚动事件
 	 * @description 缩放图片
 	 */
-	const handleMouseWheel = () => {
+	const handleMouseWheel = (event) => {
 		let zoom = parseInt(imgLarge.value[activeIndex.value].style.zoom) || 100
 		zoom += event.wheelDelta / 12
-		if (zoom >= IMG_ZOOM_MIN && zoom < IMG_ZOOM_MAX) {
+		if (zoom >= imgZoomMin.value && zoom < imgZoomMax.value) {
 			imgZoom.value = zoom
 			imgLarge.value[activeIndex.value].style.zoom = zoom + '%'
 		}
@@ -302,45 +342,7 @@
 		}
 	}
 
-	// Watchers
-	watch(visible, (val) => {
-		if (val) {
-			activeIndex.value = props.defaultIndex
-			document.addEventListener('keyup', handleKeyEvents)
-			// 获取用户是否显示缩略图的操作习惯设置
-			isShowMinImgList.value = localStorage.getItem('qiwen_file_img_preview_show_min') === 'false' ? false : true
-			nextTick(() => {
-				handleCalculateImgZoom(activeIndex.value) // 确定图片缩放比例
-				handleScrollMinImg() // 将当前查看图片对应的缩略图滚动到视野中
-			})
-		} else {
-			document.removeEventListener('keyup', handleKeyEvents)
-		}
-	})
-	watch(activeIndex, (newValue) => {
-		rotate.value = 0
-		nextTick(() => {
-			if (imgLarge.value[newValue].style.zoom) {
-				imgZoom.value = Number(imgLarge.value[newValue].style.zoom.split('%')[0])
-			} else {
-				// 确定图片缩放比例
-				handleCalculateImgZoom(newValue)
-			}
-		})
-	})
-	watch(isShowMinImgList, (val) => {
-		localStorage.setItem('qiwen_file_img_preview_show_min', val)
-	})
-
-	// Lifecycle
-	onMounted(() => {
-		// 初始化逻辑
-	})
-
-	onUnmounted(() => {
-		document.removeEventListener('keyup', handleKeyEvents)
-	})
-
+	// 对外暴露方法
 	defineExpose({
 		visible
 	})
@@ -349,6 +351,7 @@
 <style lang="less" scoped>
 	@import '@/style/myResource/varibles.less';
 	@import '@/style/myResource/mixins.less';
+
 	.img-preview-wrapper {
 		position: fixed;
 		top: 0;
@@ -362,13 +365,16 @@
 		text-align: center;
 		display: flex;
 		align-items: center;
-		animation: imgPreviewAnimation 0.3s forwards;
+		animation: imgPreviewAnimation 0.3s;
+		animation-iteration-count: 0.3;
+		animation-fill-mode: forwards;
 
 		@keyframes imgPreviewAnimation {
-			from {
+			0% {
 				background: transparent;
 			}
-			to {
+
+			100% {
 				background: rgba(0, 0, 0, 0.8);
 			}
 		}
@@ -388,6 +394,7 @@
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
+
 			.fold-icon {
 				margin-right: 16px;
 				font-size: 24px;
@@ -402,6 +409,7 @@
 					width: 64px;
 				}
 			}
+
 			.name {
 				flex: 1;
 				padding-right: 16px;
@@ -410,36 +418,61 @@
 				text-overflow: ellipsis;
 				white-space: nowrap;
 			}
+
 			.opera-btn-group {
 				width: 100px;
 				display: flex;
 
+				:deep(.ant-input-number) {
+					width: 40px;
+
+					.ant-input-number-handler-wrap {
+						display: none;
+					}
+
+					.ant-input-number-input {
+						margin-top: 14px;
+						background: rgba(0, 0, 0, 0.5);
+						height: 20px;
+						line-height: 20px;
+						padding: 0;
+						font-size: 16px;
+						color: #fff;
+					}
+				}
+
 				.split-line {
 					margin: 0 8px;
 				}
 			}
+
 			.tool-wrapper {
 				flex: 1;
 				display: flex;
 				justify-content: flex-end;
 				align-items: center;
+
 				.item {
 					margin-left: 16px;
 					cursor: pointer;
+
 					&:hover {
 						opacity: 0.7;
 					}
 				}
-				.el-icon-refresh-right,
+
 				.close-icon,
 				.download-link {
 					font-size: 18px;
 				}
+
 				.download-link {
 					color: inherit;
 				}
+
 				.text-wrapper {
 					margin-left: 32px;
+
 					.text {
 						margin-right: 8px;
 					}
@@ -455,7 +488,14 @@
 			padding: 8px 16px;
 			overflow-y: auto;
 			list-style: none;
-			.setScrollbar(8px, transparent, #C0C4CC);
+			&::-webkit-scrollbar {
+				width: 8px;
+				background: transparent;
+			}
+			&::-webkit-scrollbar-thumb {
+				background: #c0c4cc;
+			}
+
 			.min-img-item {
 				position: relative;
 				margin-bottom: 4px;
@@ -504,6 +544,7 @@
 				margin: 0 auto;
 				transition: transform 0.5s;
 			}
+
 			.pre-icon,
 			.next-icon {
 				font-size: 60px;
@@ -512,16 +553,20 @@
 				top: 50%;
 				cursor: pointer;
 				z-index: 3;
+
 				&:hover {
 					opacity: 0.7;
 				}
 			}
+
 			.pre-icon {
 				left: 64px;
 			}
+
 			.next-icon {
 				right: 64px;
 			}
+
 			.zoom-bar {
 				position: absolute;
 				right: 0;
@@ -530,15 +575,19 @@
 				margin: 0 auto;
 				width: 600px;
 				display: flex;
-				//   >>> .el-slider {
-				//     flex: 1;
-				//     .el-slider__bar {
-				//       background: $PrimaryText;
-				//     }
-				//     .el-slider__button {
-				//       border-color: $PrimaryText;
-				//     }
-				//   }
+
+				:deep(.ant-slider) {
+					flex: 1;
+
+					.ant-slider-track {
+						background: @primary-text;
+					}
+
+					.ant-slider-handle {
+						border-color: @primary-text;
+					}
+				}
+
 				.zoom-count {
 					width: 60px;
 					height: 38px;
@@ -549,4 +598,13 @@
 			}
 		}
 	}
+
+	.fade-enter-active,
+	.fade-leave-active {
+		transition: opacity 0.3s;
+	}
+	.fade-enter-from,
+	.fade-leave-to {
+		opacity: 0;
+	}
 </style>

src/views/myResource/file/box/imgPreview/index.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import Antd from 'ant-design-vue'
 // 导入组件
 import ImgPreview from './BoxMask.vue'
+import snowy from '@/snowy'
 
 let imgPreviewInstance = null
 let imgPreviewApp = null
@@ -21,6 +22,7 @@ const initInstanceImgPreview = (imgList, defaultIndex, callback) => {
 	})
 	// 注册 Ant Design Vue 组件
 	imgPreviewApp.use(Antd)
+	imgPreviewApp.use(snowy)
 	imgPreviewInstance = imgPreviewApp.mount(mountNode)
 	return mountNode
 }