feat: 插件注册增加disable和exitConfirm

2024-09-04 14:19:11 +08:00
1 parent 4d2bd3867f
commit 282bf327bb
@@ -14,6 +14,8 @@
 | VirtualDirectory更新时更新文件信息 | ❌ |
 | 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
 | miaoDirectory的复制文件/文件夹功能 | ❌ |
+| 重构miaoDropHandler的实现 | ❌ |
+| 重构主界面，拆分主界面组件的实现 | ❌ |


 | 长期计划 |
@@ -23,5 +25,4 @@

 ## 碎碎念：

-为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。
-不过可能我对插件的价值也是有所高估吧。
+为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。md想这么多干嘛，反正都快岩壁了，mdmdmdmd
@@ -9,7 +9,6 @@ import {
    EllipsisVertical,
    QrCodeOutline
 } from '@vicons/ionicons5'
-// import miaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
 import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
 import MiaoMask from './components/miaoMask.vue'
 import config from './config'
@@ -48,7 +47,7 @@ const createView = (
    currentFiles?: VirtualFile[],
    index?: number
 ) => {
-    views.push(component, currentDirectories, currentFiles, index)
+    views.push(component, currentDirectories, currentFiles, { index })
 }

 const deleteView = (index: number) => {
@@ -14,6 +14,8 @@ export interface registerComponentOption {
    getComponent: () => Promise<any>
    group?: PluginGroup[]
    filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
+    disable?: boolean
+    exitConfirm?: boolean
 }

 type Plugin = {
@@ -57,7 +59,9 @@ export default class PluginCenter {
            getComponent,
            icon,
            filter,
-            group = [PluginGroup.default]
+            group = [PluginGroup.default],
+            disable = false,
+            exitConfirm = false
        } = option
        let _component: any
        const views = useVirtualPages()
@@ -66,7 +70,7 @@ export default class PluginCenter {
            filter,
            icon: shallowRef(icon),
            group,
-            disable: false,
+            disable,
            func: async (
                VDirectories: VirtualDirectory[],
                VFiles: VirtualFile[]
@@ -75,7 +79,11 @@ export default class PluginCenter {
                    return
                }
                if (_component === undefined) _component = await getComponent()
-                views.push(_component, VDirectories, VFiles)
+                views.push(_component, VDirectories, VFiles, {
+                    VirtualPageOption: {
+                        exitConfirm
+                    }
+                })
            }
        })
    }
@@ -1,123 +1,158 @@
-import { reactive, shallowRef } from "vue";
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
-import generateId from "@/hooks/generateId";
+import { reactive, shallowRef } from 'vue'
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
+import generateId from '@/hooks/generateId'
+
+export interface VirtualPageOption {
+    exitConfirm?: boolean
+}
+
+export interface ViewsPushOption {
+    index?: number
+    VirtualPageOption?: VirtualPageOption
+}

 const getRandomWebSafeColor = (() => {
-	const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
-	let counter = 0;
-	return () => {
-		const color = webSafeColors[counter % webSafeColors.length];
-		counter += 1;
-		return color;
-	};
-})();
+    const webSafeColors = [
+        '#009900',
+        '#999900',
+        '#009999',
+        '#990099',
+        '#0000ee'
+    ]
+    let counter = 0
+    return () => {
+        const color = webSafeColors[counter % webSafeColors.length]
+        counter += 1
+        return color
+    }
+})()

 export default class VirtualPage {
-	constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
-		this.component = shallowRef(component);
-		this.currentDirectories = initObjects?.directories ?? [];
-		this.currentFiles = initObjects?.files ?? [];
-		this.visible = true;
-		this.id = generateId();
-		this.refreshKey = Math.random();
-		this.color = getRandomWebSafeColor();
-	}
-	// 页面使用的组件
-	component: any;
-	// 是否可见
-	visible: boolean;
-	// 当前正在使用的文件夹
-	currentDirectories: VirtualDirectory[];
-	// 当前正在使用的文件
-	currentFiles: VirtualFile[];
-	// 区分每一个页面的唯一id
-	id: number;
-	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
-	refreshKey: number;
-	// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
-	color: string;
-	// 用于展示的title
-	_title?: string;
+    constructor(
+        component: any,
+        initObjects?: {
+            directories?: VirtualDirectory[]
+            files?: VirtualFile[]
+            option?: VirtualPageOption
+        }
+    ) {
+        this.component = shallowRef(component)
+        this.currentDirectories = initObjects?.directories ?? []
+        this.currentFiles = initObjects?.files ?? []
+        this.visible = true
+        this.id = generateId()
+        this.refreshKey = Math.random()
+        this.color = getRandomWebSafeColor()
+        this.exitConfirm = initObjects?.option?.exitConfirm ?? false
+    }
+    // 页面使用的组件
+    component: any
+    // 是否可见
+    visible: boolean
+    // 当前正在使用的文件夹
+    currentDirectories: VirtualDirectory[]
+    // 当前正在使用的文件
+    currentFiles: VirtualFile[]
+    // 区分每一个页面的唯一id
+    id: number
+    // 当refreshKey改变时需要刷新页面，目前还没接入刷新
+    refreshKey: number
+    // 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
+    color: string
+    // 用于展示的title
+    _title?: string
+    // 关闭时是否需要确认
+    exitConfirm: boolean

-	get title() {
-		if (this._title) {
-			return this._title;
-		}
-		return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
-	}
+    get title() {
+        if (this._title) {
+            return this._title
+        }
+        return (
+            this?.currentDirectories[0]?.name ??
+            this?.currentFiles[0]?.name ??
+            '未命名标签'
+        )
+    }

-	setTitle(title: string) {
-		this._title = title;
-	}
+    setTitle(title: string) {
+        this._title = title
+    }

-	// 切换显示状态
-	switchShow() {
-		this.visible = !this.visible;
-	}
+    // 切换显示状态
+    switchShow() {
+        this.visible = !this.visible
+    }

-	// 刷新，不过好像没有用得到的时候吧
-	// 事实上也不应该用得到，因为更新应该是响应式的
-	refresh() {
-		this.refreshKey = Math.random();
-	}
+    // 刷新，不过好像没有用得到的时候吧
+    // 事实上也不应该用得到，因为更新应该是响应式的
+    refresh() {
+        this.refreshKey = Math.random()
+    }
 }

 export class VirtualPages {
-	constructor() {
-		this._views = reactive<VirtualPage[]>([]);
-	}
-	_views: VirtualPage[];
+    constructor() {
+        this._views = reactive<VirtualPage[]>([])
+    }
+    _views: VirtualPage[]

-	get length() {
-		return this._views.length;
-	}
+    get length() {
+        return this._views.length
+    }

-	/**
-	 * 查询一个页面位于_views中的次序
-	 * @param {any} id 要查询的页面的id
-	 * @returns {any}
-	 */
-	getIndex(id: number) {
-		for (let i in this._views) {
-			if (this._views[i].id === id) {
-				return parseInt(i);
-			}
-		}
-		return -1;
-	}
-	/**
-	 * 根据id得到view
-	 * @param {any} id 要查询的页面的id
-	 */
-	getView(id: number) {
-		for (let v of this._views) {
-			if (v.id === id) {
-				return v;
-			}
-		}
-		return undefined;
-	}
+    /**
+     * 查询一个页面位于_views中的次序
+     * @param {any} id 要查询的页面的id
+     * @returns {any}
+     */
+    getIndex(id: number) {
+        for (let i in this._views) {
+            if (this._views[i].id === id) {
+                return parseInt(i)
+            }
+        }
+        return -1
+    }
+    /**
+     * 根据id得到view
+     * @param {any} id 要查询的页面的id
+     */
+    getView(id: number) {
+        for (let v of this._views) {
+            if (v.id === id) {
+                return v
+            }
+        }
+        return undefined
+    }

-	/**
-	 * 推入一个新的页面
-	 */
-	push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
-		index ?? (index = this.length);
-		this._views.splice(
-			index,
-			0,
-			reactive<VirtualPage>(
-				new VirtualPage(component, {
-					directories: [...(currentDirectories ?? [])],
-					files: [...(currentFiles ?? [])]
-				})
-			)
-		);
-	}
-	/**
-	 * 根据次序删除一个页面
-	 */
-	deleteView(index: number) {
-		this._views.splice(index, 1);
-	}
+    /**
+     * 推入一个新的页面
+     */
+    push(
+        component: any,
+        currentDirectories?: VirtualDirectory[],
+        currentFiles?: VirtualFile[],
+        option?: ViewsPushOption
+    ) {
+        const { index = this.length, VirtualPageOption } = option ?? {}
+        this._views.splice(
+            index,
+            0,
+            reactive<VirtualPage>(
+                new VirtualPage(component, {
+                    directories: [...(currentDirectories ?? [])],
+                    files: [...(currentFiles ?? [])],
+                    option: VirtualPageOption
+                })
+            )
+        )
+    }
+    /**
+     * 根据次序删除一个页面
+     */
+    deleteView(index: number) {
+        this._views.splice(index, 1)
+    }
 }
@@ -1,9 +1,13 @@
 <template>
-    <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
+    <miao-drop-handler
+        @on-virtual-directory="handleDrop"
+        @on-virtual-files="handleDrop">
        <miao-message-provider ref="miaoMessageRef">
            <div class="miaoImage" ref="rootRef">
                <n-scrollbar ref="NScrollbarRef">
-                    <div class="miaoImage-container" v-for="imageGroup in imageGroupList">
+                    <div
+                        class="miaoImage-container"
+                        v-for="imageGroup in imageGroupList">
                        <div class="miaoImage-container-day">
                            <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
                            <div class="miaoImage-container-divide-line"></div>
@@ -15,19 +19,39 @@
                            <div class="miaoImage-container-divide-line"></div>
                        </div> -->
                        </div>
-                        <div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id">
-                            <img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile
-                                ? 'miaoImage-container-row-image-active'
-                                : ''
-                                " @click="activeImage = vFile" />
+                        <div
+                            class="miaoImage-container-row"
+                            v-for="vFile in imageGroup.items"
+                            :key="vFile.id">
+                            <img
+                                :src="vFile.url"
+                                class="miaoImage-container-row-image"
+                                loading="lazy"
+                                :class="
+                                    activeImage === vFile
+                                        ? 'miaoImage-container-row-image-active'
+                                        : ''
+                                "
+                                @click="activeImage = vFile" />
                        </div>
                    </div>
                </n-scrollbar>
-                <miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask">
-                    <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" />
-                    <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
+                <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>
            </div>
@@ -41,7 +65,7 @@ import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import { uniq } from 'lodash'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { NScrollbar } from 'naive-ui'
 import { ChevronBack, ChevronForward } from '@vicons/ionicons5'

@@ -77,13 +101,18 @@ 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>()

 const imageGroupList = computed(() => {
    return groupByDay(imageFileList.value)
 })
-const activeImage = ref<VirtualFile>()
+
+watch(activeImage, () => {
+    nextTick(scrollToActiveImage)
+    imgViewScale.value = 1
+})

 const groupByDay = (array: VirtualFile[]) => {
    const result = []
@@ -137,10 +166,9 @@ const handleActiveImageBack = (e: any) => {
    const index = imageFileList.value.indexOf(activeImage.value)
    activeImage.value =
        imageFileList.value[
-        (index - 1 + imageFileList.value.length) %
-        imageFileList.value.length
+            (index - 1 + imageFileList.value.length) %
+                imageFileList.value.length
        ]
-    nextTick(scrollToActiveImage)
 }

 const handleActiveImageForward = (e: any) => {
@@ -151,10 +179,9 @@ const handleActiveImageForward = (e: any) => {
    const index = imageFileList.value.indexOf(activeImage.value)
    activeImage.value =
        imageFileList.value[
-        (index + 1 + imageFileList.value.length) %
-        imageFileList.value.length
+            (index + 1 + imageFileList.value.length) %
+                imageFileList.value.length
        ]
-    nextTick(scrollToActiveImage)
 }

 const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
@@ -172,10 +199,18 @@ const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
        // @ts-ignore
        await updateImageSrcList(vItems)
    }
-    miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何可添加图片' : `导入${imageFileList.value.length - length_before}张图片`, {
-        type: length_before === imageFileList.value.length ? 'info' : 'success'
-        , timeout: 5000
-    })
+    miaoMessageRef.value?.message(
+        length_before === imageFileList.value.length
+            ? '未发现任何可添加图片'
+            : `导入${imageFileList.value.length - length_before}张图片`,
+        {
+            type:
+                length_before === imageFileList.value.length
+                    ? 'info'
+                    : 'success',
+            timeout: 5000
+        }
+    )
 }

 const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
@@ -195,19 +230,35 @@ const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
        ]
    }
    imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
-        (a, b) => - a.stats.mtimeMs + b.stats.mtimeMs
+        (a, b) => -a.stats.mtimeMs + b.stats.mtimeMs
    )
 }

+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;
+    const length_before = imageFileList.value.length
    for (const i of [currentFiles.value, ...currentDirectories.value]) {
        await updateImageSrcList(i)
    }
-    miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何新增图片' : `导入${imageFileList.value.length - length_before}张图片`, {
-        type: length_before === imageFileList.value.length ? 'info' : 'success'
-        , timeout: 5000
-    })
+    miaoMessageRef.value?.message(
+        length_before === imageFileList.value.length
+            ? '未发现任何新增图片'
+            : `导入${imageFileList.value.length - length_before}张图片`,
+        {
+            type:
+                length_before === imageFileList.value.length
+                    ? 'info'
+                    : 'success',
+            timeout: 5000
+        }
+    )
 })
 </script>

@@ -290,6 +341,7 @@ onMounted(async () => {

    .miaoImage-mask {
        background-color: rgba(0, 0, 0, 0.444);
+        overflow: hidden;
    }

    .miaoImage-mask-active {