feat: 添加一个没啥功能的图片浏览插件

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>

src/App.vue

@@ -42,11 +42,11 @@ const rootDirectory = reactive(
 // component就是一个vue组件，类似于miaoDirectory
 const createView = (
     component: any,
-    currentDirectorys?: VirtualDirectory[],
+    currentDirectories?: VirtualDirectory[],
     currentFiles?: VirtualFile[],
     index?: number
 ) => {
-    views.push(component, currentDirectorys, currentFiles, index)
+    views.push(component, currentDirectories, currentFiles, index)
 }
 
 const deleteView = (index: number) => {
@@ -147,7 +147,7 @@ onMounted(() => {
                                     @click="
                                         createView(
                                             view.component,
-                                            view.currentDirectorys,
+                                            view.currentDirectories,
                                             view.currentFiles,
                                             index + 1
                                         )
@@ -186,7 +186,7 @@ onMounted(() => {
                     :key="view.uid">
                     <component
                         :is="view.component"
-                        v-model:current-directorys="view.currentDirectorys"
+                        v-model:current-directories="view.currentDirectories"
                         v-model:current-files="view.currentFiles"
                         :id="view.uid"
                         :color="view.color"

src/class/PluginCenter.ts

@@ -6,8 +6,8 @@ type plugin = {
     name: string
     // 判断是否可以使用这个组件
     // 使用组件即调用下面的func
-    filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
-    func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void
+    filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
+    func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void
 }
 
 export default class PluginCenter {
@@ -30,7 +30,7 @@ export default class PluginCenter {
         name: string,
         getComponent: () => Promise<any>,
         filter: (
-            VDirectorys: VirtualDirectory[],
+            VDirectories: VirtualDirectory[],
             VFiles: VirtualFile[]
         ) => boolean
     ): void {
@@ -40,22 +40,22 @@ export default class PluginCenter {
             name,
             filter,
             func: async (
-                VDirectorys: VirtualDirectory[],
+                VDirectories: VirtualDirectory[],
                 VFiles: VirtualFile[]
             ) => {
-                if (filter(VDirectorys, VFiles) === false) {
+                if (filter(VDirectories, VFiles) === false) {
                     return
                 }
                 if (_component === undefined) _component = await getComponent()
-                views.push(_component, VDirectorys, VFiles)
+                views.push(_component, VDirectories, VFiles)
             }
         })
     }
 
-    getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
+    getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
         const usableList = []
         for (let key of Object.keys(this.pluginsMap)) {
-            if (this.pluginsMap[key].filter(VDirectorys, VFiles)) {
+            if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
                 usableList.push(key)
             }
         }
@@ -67,9 +67,9 @@ export default class PluginCenter {
 
     usePlugin(
         key: string,
-        VDirectorys: VirtualDirectory[],
+        VDirectories: VirtualDirectory[],
         VFiles: VirtualFile[]
     ) {
-        this.pluginsMap[key].func(VDirectorys, VFiles)
+        this.pluginsMap[key].func(VDirectories, VFiles)
     }
 }

src/class/VirtualDirectory.ts

@@ -43,7 +43,7 @@ class VirtualDirectory {
 	// 子文件
 	files?: VirtualFile[];
 	// 子目录
-	directorys?: VirtualDirectory[];
+	directories?: VirtualDirectory[];
 	// 没啥意义，标注一下就是了
 	type: "directory";
 	// 文件夹创建时间等杂项属性
@@ -98,9 +98,9 @@ class VirtualDirectory {
 
 	updateContent(content: (file | directory)[]) {
 		this.files = this.files ?? [];
-		this.directorys = this.directorys ?? [];
+		this.directories = this.directories ?? [];
 		const fileNames: string[] = this.files.map(v => v.name);
-		const dirNames: string[] = this.directorys.map(v => v.name);
+		const dirNames: string[] = this.directories.map(v => v.name);
 		const itemNames: string[] = content.map(v => v.name);
 		// 删去远程端已不存在的文件与文件夹
 		const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
@@ -114,7 +114,7 @@ class VirtualDirectory {
 			}
 		};
 		_delete(this.files);
-		_delete(this.directorys);
+		_delete(this.directories);
 		// 加入新的文件与文件夹
 		for (let item of content) {
 			if (item.type === "file") {
@@ -123,7 +123,7 @@ class VirtualDirectory {
 				}
 			} else if (item.type === "directory") {
 				if (!dirNames.includes(item.name)) {
-					this.directorys.push(new VirtualDirectory(item, this));
+					this.directories.push(new VirtualDirectory(item, this));
 				}
 			}
 		}
@@ -131,7 +131,7 @@ class VirtualDirectory {
 
 	hasChild(item: VirtualDirectory | VirtualFile): boolean {
 		if (item.type === "directory") {
-			return this.directorys?.includes(item) ?? false;
+			return this.directories?.includes(item) ?? false;
 		} else {
 			return this.files?.includes(item) ?? false;
 		}

src/class/VirtualPage.ts

@@ -13,9 +13,9 @@ const getRandomWebSafeColor = (() => {
 })();
 
 export default class VirtualPage {
-	constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) {
+	constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
 		this.component = shallowRef(component);
-		this.currentDirectorys = initObjects?.directorys ?? [];
+		this.currentDirectories = initObjects?.directories ?? [];
 		this.currentFiles = initObjects?.files ?? [];
 		this.visible = true;
 		this.uid = generateId();
@@ -27,7 +27,7 @@ export default class VirtualPage {
 	// 是否可见
 	visible: boolean;
 	// 当前正在使用的文件夹
-	currentDirectorys: VirtualDirectory[];
+	currentDirectories: VirtualDirectory[];
 	// 当前正在使用的文件
 	currentFiles: VirtualFile[];
 	// 区分每一个页面的唯一id
@@ -43,7 +43,7 @@ export default class VirtualPage {
 		if (this._title) {
 			return this._title;
 		}
-		return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
+		return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
 	}
 
 	setTitle(title: string) {
@@ -101,14 +101,14 @@ export class VirtualPages {
 	/**
 	 * 推入一个新的页面
 	 */
-	push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
+	push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
 		index ?? (index = this.length);
 		this._views.splice(
 			index,
 			0,
 			reactive<VirtualPage>(
 				new VirtualPage(component, {
-					directorys: [...(currentDirectorys ?? [])],
+					directories: [...(currentDirectories ?? [])],
 					files: [...(currentFiles ?? [])]
 				})
 			)

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;
+		}
+	);
 }

src/hooks/useVirtualPages.ts

@@ -3,7 +3,7 @@ import { Reactive, reactive } from "vue"
 
 let views: Reactive<VirtualPages>
 
-export default function useViretualPages(){
+export default function useVirtualPages(){
     if(views === undefined) {
         // views = reactive<VirtualPage[]>([])
         views = reactive(new VirtualPages())

src/views/miaoDirectory.vue

@@ -154,20 +154,20 @@ class SelectedItem {
                 return false
             }
             // @ts-ignore
-            return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
+            return [...currentDirectory.value?.directories, ...currentDirectory.value?.files].includes(v)
         })
     }
 }
 // 已选择的item，用于多选功能
 const selectedItem = reactive(new SelectedItem())
 
-const currentDirectorys = defineModel<VirtualDirectory[]>('currentDirectorys', {
+const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
     required: true
 })
 
 // 目前展示的Dir
 const currentDirectory = computed(() => {
-    return currentDirectorys.value[0]
+    return currentDirectories.value[0]
 })
 
 // 当前组件在views中的序号
@@ -177,8 +177,8 @@ const index = computed(() => {
 
 // 用于展示的数据，后续会增加排序等操作
 const showData_directory = computed<VirtualDirectory[]>(() => {
-    const data = currentDirectory.value?.directorys
-        ? [...currentDirectory.value?.directorys]
+    const data = currentDirectory.value?.directories
+        ? [...currentDirectory.value?.directories]
         : []
     return data
 })
@@ -189,8 +189,8 @@ const showData_files = computed<VirtualFile[]>(() => {
     return data
 })
 // const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
-//     const data = currentDirectory.value?.directorys
-//         ? [...currentDirectory.value?.directorys]
+//     const data = currentDirectory.value?.directories
+//         ? [...currentDirectory.value?.directories]
 //         : []
 //     data.push(...currentDirectory.value?.files)
 //     return data
@@ -206,13 +206,13 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
     // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
     if (
         virtualDirectory.files === undefined ||
-        virtualDirectory.directorys === undefined
+        virtualDirectory.directories === undefined
     ) {
         await virtualDirectory.update()
     } else {
         virtualDirectory.update()
     }
-    currentDirectorys.value[0] = virtualDirectory
+    currentDirectories.value[0] = virtualDirectory
 }
 
 const reload = () => {

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>

src/views/miaoVideoPlayer.vue

@@ -10,7 +10,7 @@
 import { VirtualFile } from '@/class/VirtualDirectory'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
-// import useViretualPages from '@/hooks/useVirtualPages';
+// import useVirtualPages from '@/hooks/useVirtualPages';
 import XGPlayer from 'xgplayer'
 import '@/style/xgplayer.scss'
 import TextTrack from 'xgplayer/es/plugins/track'
@@ -26,7 +26,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
 
-// const views = useViretualPages()
+// const views = useVirtualPages()
 // const view = views.getView(props.id)
 
 // const videoPath = ref<string>('');