From c1373de5732e03a9cf0154084a309e0943b64c2c Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Sat, 23 Aug 2025 03:07:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(miaoImages):=20=E5=B0=86=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=9F=A5=E7=9C=8B=E5=8A=9F=E8=83=BD=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E4=B8=BA=E7=8B=AC=E7=AB=8B=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

提取图片查看逻辑到独立的 MiaoImageViewer 组件，提高代码复用性和可维护性
移除原文件中的重复代码，统一处理图片缩放和拖拽功能
---
 src/plugins/miaoImages/miaoImageViewer.vue | 129 +++++++++++++++++++++
 src/plugins/miaoImages/miaoImages.vue      |  29 ++---
 2 files changed, 138 insertions(+), 20 deletions(-)
 create mode 100644 src/plugins/miaoImages/miaoImageViewer.vue

diff --git a/src/plugins/miaoImages/miaoImageViewer.vue b/src/plugins/miaoImages/miaoImageViewer.vue
new file mode 100644
index 0000000..19e38c0
--- /dev/null
+++ b/src/plugins/miaoImages/miaoImageViewer.vue
@@ -0,0 +1,129 @@
+<template>
+  <miao-mask :show="show" @click="$emit('close')" class="miaoImage-mask" @wheel="handleWheel">
+    <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click.stop="$emit('back')" />
+    <MiaoDraggableDiv
+      v-if="file"
+      :is-draggable="isDraggable"
+      :bind-virtual-files="[file]"
+      @dragend="handleDragEnd"
+      @pointerdown="handlePressStart"
+      @pointerup="handlePressEnd"
+      @pointercancel="handlePressEnd"
+      @pointerleave="handlePressEnd"
+      @touchstart.passive="handleTouchStart"
+      @touchend="handleTouchEnd"
+    >
+      <img :src="file.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()" draggable="false" :style="{ transform: `scale(${imgViewScale})` }" />
+    </MiaoDraggableDiv>
+    <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward" @click.stop="$emit('forward')" />
+  </miao-mask>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import miaoMask from '@/components/miaoMask.vue'
+import MiaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
+import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
+import type { VirtualFile } from '@/class/VirtualDirectory'
+
+const props = defineProps<{
+  show: boolean
+  file?: VirtualFile
+}>()
+
+const emit = defineEmits<{
+  close: []
+  back: []
+  forward: []
+}>()
+
+const imgViewScale = ref(1)
+const isDraggable = ref(false)
+let pressTimer: number | undefined
+
+const clearPress = () => {
+  if (pressTimer !== undefined) {
+    clearTimeout(pressTimer)
+    pressTimer = undefined
+  }
+}
+
+const handlePressStart = () => {
+  clearPress()
+  pressTimer = window.setTimeout(() => {
+    isDraggable.value = true
+  }, 100)
+}
+
+const handlePressEnd = () => {
+  clearPress()
+  // 延迟复位，避免影响 drop
+  setTimeout(() => {
+    isDraggable.value = false
+  }, 0)
+}
+
+const handleTouchStart = () => handlePressStart()
+const handleTouchEnd = () => handlePressEnd()
+
+const handleDragEnd = () => {
+  isDraggable.value = false
+}
+
+const handleWheel = (e: WheelEvent) => {
+  if (e.deltaY < 0) {
+    imgViewScale.value *= 1.42857
+  } else {
+    imgViewScale.value /= 1.42857
+  }
+}
+
+watch(
+  () => props.file,
+  () => {
+    imgViewScale.value = 1
+    isDraggable.value = false
+    clearPress()
+  }
+)
+
+watch(
+  () => props.show,
+  (v) => {
+    if (!v) {
+      imgViewScale.value = 1
+      isDraggable.value = false
+      clearPress()
+    }
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.miaoImage-mask {
+  background-color: rgba(0, 0, 0, 0.444);
+  overflow: hidden;
+}
+
+.miaoImage-mask-active {
+  max-width: 80%;
+  max-height: 80%;
+  user-select: none;
+}
+
+.miaoImage-mask-btn {
+  color: #ffffff99;
+  width: 7%;
+  position: absolute;
+  cursor: pointer;
+  z-index: 9999;
+
+  &-back {
+    left: 1%;
+  }
+
+  &-forward {
+    right: 1%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/plugins/miaoImages/miaoImages.vue b/src/plugins/miaoImages/miaoImages.vue
index ca521d6..7d1be54 100644
--- a/src/plugins/miaoImages/miaoImages.vue
+++ b/src/plugins/miaoImages/miaoImages.vue
@@ -25,28 +25,26 @@
                   </div>
                </div>
             </n-scrollbar>
-            <miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask"
-               @wheel="handleWheel">
-               <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageBack" />
-               <img :src="activeImage?.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()"
-                  draggable="false" :style="{ transform: `scale(${imgViewScale})` }" />
-               <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
-                  @click="handleActiveImageForward" />
-            </miao-mask>
+            <MiaoImageViewer
+               :show="activeImage !== undefined"
+               :file="activeImage"
+               @close="activeImage = undefined"
+               @back="handleActiveImageBack"
+               @forward="handleActiveImageForward"
+            />
          </div>
       </miao-message-provider>
    </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
-import miaoMask from '@/components/miaoMask.vue'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import uniq from 'lodash/uniq'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { NScrollbar } from 'naive-ui'
-import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
+import MiaoImageViewer from './miaoImageViewer.vue'
 
 const imageSuffixList = [
    'xbm',
@@ -80,7 +78,6 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 const NScrollbarRef = ref()
 const rootRef = ref<any>()
 const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
-const imgViewScale = ref(1)
 const imageFileList = ref<VirtualFile[]>([])
 const activeImage = ref<VirtualFile>()
 
@@ -90,7 +87,6 @@ const imageGroupList = computed(() => {
 
 watch(activeImage, () => {
    nextTick(scrollToActiveImage)
-   imgViewScale.value = 1
 })
 
 const groupByDay = (array: VirtualFile[]) => {
@@ -210,14 +206,6 @@ const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
    )
 }
 
-const handleWheel = (e: WheelEvent) => {
-   if (e.deltaY < 0) {
-      imgViewScale.value *= 1.42857
-   } else {
-      imgViewScale.value /= 1.42857
-   }
-}
-
 onMounted(async () => {
    const length_before = imageFileList.value.length
    for (const i of [currentFiles.value, ...currentDirectories.value]) {
@@ -329,6 +317,7 @@ onMounted(async () => {
       width: 7%;
       position: absolute;
       cursor: pointer;
+      z-index: 9999;
 
       &-back {
          left: 1%;