From 43a85f5b3935b9c82d8fe9b16f38da2fd675c2b2 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Wed, 2 Jul 2025 15:16:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20`FaImagePreview`=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E5=BC=8F=E8=B0=83=E7=94=A8=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=9A=E5=9B=BE=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/FaImagePreview/index.ts    |  3 +-
 src/ui/components/FaImagePreview/preview.vue | 40 ++++++++++++++++++--
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/ui/components/FaImagePreview/index.ts b/src/ui/components/FaImagePreview/index.ts
index 380fd7b3..6eff811a 100644
--- a/src/ui/components/FaImagePreview/index.ts
+++ b/src/ui/components/FaImagePreview/index.ts
@@ -1,13 +1,14 @@
 import Preview from './preview.vue'
 
 export function useFaImagePreview() {
-  function open(src: string) {
+  function open(src: string | string[], index = 0) {
     const container = document.createElement('div')
     const app = createApp({
       render() {
         return h(Preview, {
           modelValue: true,
           src,
+          index,
         })
       },
     })
diff --git a/src/ui/components/FaImagePreview/preview.vue b/src/ui/components/FaImagePreview/preview.vue
index 50917a9d..8c8e160c 100644
--- a/src/ui/components/FaImagePreview/preview.vue
+++ b/src/ui/components/FaImagePreview/preview.vue
@@ -1,12 +1,35 @@
 <script setup lang="ts">
 import { Dialog, DialogContent } from './dialog'
 
-defineProps<{
-  src: string
+const props = defineProps<{
+  src: string | string[]
+  index?: number
 }>()
 
 const isOpen = defineModel<boolean>()
 
+// 多图操作
+const index = ref(props.index ?? 0)
+const srcList = computed(() => {
+  if (Array.isArray(props.src)) {
+    return props.src
+  }
+  return [props.src]
+})
+function handlePrev() {
+  index.value = index.value - 1
+  if (index.value < 0) {
+    index.value = srcList.value.length - 1
+  }
+}
+function handleNext() {
+  index.value = index.value + 1
+  if (index.value >= srcList.value.length) {
+    index.value = 0
+  }
+}
+watch(index, resetImageState)
+
 // 图片操作相关状态
 const scale = ref(1)
 const rotate = ref(0)
@@ -101,7 +124,7 @@ function handleAnimationEnd() {
     <DialogContent class="size-full" @animation-end="handleAnimationEnd">
       <div class="relative size-full flex-center" @wheel="handleWheel">
         <img
-          :src="src"
+          :src="srcList[index]"
           class="mx-auto max-h-full max-w-full object-contain"
           :class="{
             'transition-all duration-300': !isDragging,
@@ -112,6 +135,17 @@ function handleAnimationEnd() {
           }"
           @mousedown.prevent="handleMouseDown"
         >
+        <template v-if="srcList.length > 1">
+          <div class="absolute bottom-20 left-1/2 text-sm text-muted-foreground -translate-x-1/2">
+            {{ index + 1 }} / {{ srcList.length }}
+          </div>
+          <FaButton variant="ghost" size="icon" class="absolute left-4 top-1/2 rounded-full bg-muted/50 -translate-y-1/2" @click="handlePrev">
+            <FaIcon name="i-lucide:chevron-left" class="size-6" />
+          </FaButton>
+          <FaButton variant="ghost" size="icon" class="absolute right-4 top-1/2 rounded-full bg-muted/50 -translate-y-1/2" @click="handleNext">
+            <FaIcon name="i-lucide:chevron-right" class="size-6" />
+          </FaButton>
+        </template>
         <FaButtonGroup class="absolute bottom-4 left-1/2 scale-125 -translate-x-1/2">
           <FaButton variant="outline" size="icon" class="border-none bg-muted/50" @click="handleZoomIn">
             <FaIcon name="i-carbon:zoom-in" class="size-5" />