From 210e251b2374f2872bc295d9c303cca3e7ce1039 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Fri, 30 Aug 2024 05:15:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E6=B2=A1=E5=95=A5=E5=8A=9F=E8=83=BD=E7=9A=84=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html               |   2 +-
 src/hooks/init.ts        |  17 ++++
 src/views/miaoImages.vue | 167 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 185 insertions(+), 1 deletion(-)
 create mode 100644 src/views/miaoImages.vue

diff --git a/index.html b/index.html
index cdd0520..121f524 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
+		<link rel="icon" type="image/svg+xml" href="./favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>MiaoDirectory</title>
 	</head>
diff --git a/src/hooks/init.ts b/src/hooks/init.ts
index ac28ef5..8364c27 100644
--- a/src/hooks/init.ts
+++ b/src/hooks/init.ts
@@ -98,4 +98,21 @@ export default function init() {
             return false
         }
     )
+	pluginCenter.registerComponent(
+		"miaoImages",
+		"图片浏览",
+		async () => (await import("@/views/miaoImages.vue")).default,
+		(vDirs, vFiles) => {
+			if (vDirs.length === 0 && vFiles.length === 0) {
+				return false;
+			}
+			miao: for (let vf of vFiles)
+				for (let end of [".xbm", ".tif", "pjp", ".svgz", "jpg", "jpeg", "ico", "tiff", ".gif", "svg", ".jfif", ".webp", ".png", ".bmp", "pjpeg", ".avif"]) {
+					if (vf.name.endsWith(end)) {
+						continue miao;
+					}
+				}
+			return true;
+		}
+	);
 }
diff --git a/src/views/miaoImages.vue b/src/views/miaoImages.vue
new file mode 100644
index 0000000..d3c9e95
--- /dev/null
+++ b/src/views/miaoImages.vue
@@ -0,0 +1,167 @@
+<template>
+    <div class="miaoImage" ref="rootRef">
+        <n-scrollbar ref="NScrollbarRef">
+            <div class="miaoImage-container">
+                <div class="miaoImage-container-row" v-for="(src, index) in imageSrcList" :key="index">
+                    <img :src="src" class="miaoImage-container-row-image" loading="lazy"
+                        :class="activeImageIndex === index ? 'miaoImage-container-row-image-active' : ''"
+                        @click="activeImageIndex = index" draggable="false" />
+                </div>
+            </div>
+        </n-scrollbar>
+        <miao-mask :show="activeImageIndex !== -1" @click="activeImageIndex = -1" class="miaoImage-mask">
+            <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageIndexBack" />
+            <img :src="imageSrcList[activeImageIndex]" class="miaoImage-mask-active" @click="e => e.stopPropagation()"
+                draggable="false">
+            <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
+                @click="handleActiveImageIndexForward" />
+        </miao-mask>
+    </div>
+</template>
+
+<script setup lang="ts">
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { uniq } from 'lodash';
+import { nextTick, onMounted, ref } from 'vue'
+import { NScrollbar } from 'naive-ui';
+import miaoMask from '@/components/miaoMask.vue';
+import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
+
+const imageSuffixList = [
+    'xbm',
+    'tif',
+    'pjp',
+    'svgz',
+    'jpg',
+    'jpeg',
+    'ico',
+    'tiff',
+    'gif',
+    'svg',
+    'jfif',
+    'webp',
+    'png',
+    'bmp',
+    'pjpeg',
+    'avif'
+]
+
+const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
+    required: true
+})
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+
+const NScrollbarRef = ref()
+const rootRef = ref<any>()
+
+const imageSrcList = ref<string[]>([])
+
+const activeImageIndex = ref(-1)
+
+const scrollToActiveImage = () => {
+    const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
+    console.log({ dom })
+    NScrollbarRef.value.scrollTo({
+        top: dom?.offsetTop - 30 ?? 0,
+        behavior: "smooth"
+    })
+}
+
+const handleActiveImageIndexBack = (e: any) => {
+    e.stopPropagation()
+    activeImageIndex.value = (activeImageIndex.value - 1 + imageSrcList.value.length) % imageSrcList.value.length
+    nextTick(scrollToActiveImage)
+}
+
+const handleActiveImageIndexForward = (e: any) => {
+    e.stopPropagation()
+    activeImageIndex.value = (activeImageIndex.value + 1 + imageSrcList.value.length) % imageSrcList.value.length
+    nextTick(scrollToActiveImage)
+}
+
+const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
+    let srcList: string[]
+    if (source.type === 'directory') {
+        await source.update()
+        srcList = source.files?.filter(v => imageSuffixList.includes(v.name.split('.').pop() ?? '')).map(v => v.url) ?? []
+    } else {
+        srcList = [source.url]
+    }
+    imageSrcList.value = uniq([...imageSrcList.value, ...srcList])
+}
+
+onMounted(() => {
+    [...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList)
+})
+</script>
+
+<style scoped lang="scss">
+.miaoImage {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .miaoImage-container {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+
+        .miaoImage-container-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 25%;
+            aspect-ratio: 1;
+
+            .miaoImage-container-row-image {
+                width: 80%;
+                aspect-ratio: 1;
+                object-fit: cover;
+                transition: width 0.25s;
+                box-shadow: 0 0 10px -5px;
+                cursor: pointer;
+                user-select: none;
+
+                &:hover {
+                    width: 90%;
+                }
+
+                &-active {
+                    width: 90%;
+                }
+            }
+        }
+    }
+
+    .miaoImage-mask {
+        background-color: rgba(0, 0, 0, 0.444);
+    }
+
+    .miaoImage-mask-active {
+        max-width: 80%;
+        max-height: 80%;
+        user-select: none;
+    }
+
+    .miaoImage-mask-btn {
+        color: #ffffff99;
+        width: 7%;
+        position: absolute;
+        cursor: pointer;
+
+        &-back {
+            left: 1%;
+        }
+
+        &-forward {
+            right: 1%;
+        }
+    }
+}
+</style>