feat: 1.给插件新增一些属性。2.重构图片浏览组件，根据时间分组浏览

src/hooks/init.ts

@@ -1,24 +1,35 @@
 import MiaoDirectory from '@/views/miaoDirectory.vue'
 import usePluginCenter from './usePluginCenter'
+import {
+    DocumentText,
+    FileTray,
+    Image,
+    LogoChrome,
+    CodeOutline,
+    PlayCircle,
+} from '@vicons/ionicons5'
 
 export default function init() {
     const pluginCenter = usePluginCenter()
-    pluginCenter.registerComponent(
-        'miaoDirectory',
-        '文件夹',
-        async () => MiaoDirectory,
-        (vDirs, vFiles) => {
+    pluginCenter.registerComponent({
+        key: 'miaoDirectory',
+        name: '文件夹',
+        icon: FileTray,
+        getComponent: async () => MiaoDirectory,
+        filter: (vDirs, vFiles) => {
             if (vFiles.length) {
                 return false
             }
             return vDirs.length === 1
         }
-    )
-    pluginCenter.registerComponent(
-        'miaoVideoPlayer',
-        '视频',
-        async () => (await import('@/views/miaoVideoPlayer.vue')).default,
-        (vDirs, vFiles) => {
+    })
+    pluginCenter.registerComponent({
+        key: 'miaoVideoPlayer',
+        name: '视频',
+        icon: PlayCircle,
+        getComponent: async () =>
+            (await import('@/views/miaoVideoPlayer.vue')).default,
+        filter: (vDirs, vFiles) => {
             if (vDirs.length !== 0) {
                 return false
             }
@@ -34,12 +45,15 @@ export default function init() {
             }
             return false
         }
-    )
-    pluginCenter.registerComponent(
-        'miaoIframe',
-        '框架',
-        async () => (await import('@/views/miaoIframe.vue')).default,
-        (vDirs, vFiles) => {
+    })
+
+    pluginCenter.registerComponent({
+        key: 'miaoIframe',
+        name: '框架',
+        icon: LogoChrome,
+        getComponent: async () =>
+            (await import('@/views/miaoIframe.vue')).default,
+        filter: (vDirs, vFiles) => {
             if (vDirs.length !== 0) {
                 return false
             }
@@ -48,12 +62,14 @@ export default function init() {
             }
             return vFiles[0].name.endsWith('html')
         }
-    )
-    pluginCenter.registerComponent(
-        'miaoPDF',
-        'PDF浏览',
-        async () => (await import('@/views/miaoPDF.vue')).default,
-        (vDirs, vFiles) => {
+    })
+
+    pluginCenter.registerComponent({
+        key: 'miaoPDF',
+        name: 'PDF浏览',
+        icon: DocumentText,
+        getComponent: async () => (await import('@/views/miaoPDF.vue')).default,
+        filter: (vDirs, vFiles) => {
             if (vDirs.length !== 0) {
                 return false
             }
@@ -62,12 +78,15 @@ export default function init() {
             }
             return vFiles[0].name.endsWith('pdf')
         }
-    )
-    pluginCenter.registerComponent(
-        'miaoCodeMirror',
-        '代码编辑',
-        async () => (await import('@/views/miaoCodeMirror.vue')).default,
-        (vDirs, vFiles) => {
+    })
+
+    pluginCenter.registerComponent({
+        key: 'miaoCodeMirror',
+        name: '代码编辑',
+        icon: CodeOutline,
+        getComponent: async () =>
+            (await import('@/views/miaoCodeMirror.vue')).default,
+        filter: (vDirs, vFiles) => {
             if (vDirs.length !== 0) {
                 return false
             }
@@ -89,7 +108,7 @@ export default function init() {
                 'yaml',
                 'txt',
                 'xml',
-                'vue',
+                'vue'
             ]) {
                 if (vFiles[0].name.endsWith(end)) {
                     return true
@@ -97,25 +116,45 @@ 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;
-			}
-            if( vDirs.length ) {
+    })
+
+    pluginCenter.registerComponent({
+        key: 'miaoImages',
+        name: '图片浏览',
+        icon: Image,
+        getComponent: async () =>
+            (await import('@/views/miaoImages.vue')).default,
+        filter: (vDirs, vFiles) => {
+            if (vDirs.length === 0 && vFiles.length === 0) {
+                return false
+            }
+            if (vDirs.length) {
                 return true
             }
-			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)) {
-						return true
-					}
-				}
-			return false;
-		}
-	);
+            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)) {
+                        return true
+                    }
+                }
+            return false
+        }
+    })
 }

src/hooks/miaoTools.ts

@@ -1,47 +1,59 @@
+import { NIcon } from 'naive-ui'
+import { h } from 'vue'
+
 export const filePicker = (() => {
-	let _resolve: ((files: File[]) => void) | undefined;
-	return (option?: { accept?: "string"; multiple: boolean }) => {
-		if (_resolve) {
-			_resolve([]);
-			_resolve = undefined;
-		}
-		return new Promise<File[]>(resolve => {
-			const inpEle = document.createElement("input");
-			inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
-			inpEle.type = "file";
-			inpEle.style.display = "none";
-			_resolve = resolve;
-			// 文件类型限制
-			// inpEle.accept="image/*"
-			option?.accept && (inpEle.accept = option?.accept);
-			// 多选限制
-			option?.multiple && (inpEle.multiple = option?.multiple);
-			// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
-			inpEle.addEventListener(
-				"change",
-				() => {
-					if (!inpEle.files) {
-						return;
-					}
-					const files: File[] = [];
-					let i = 0;
-					while (i < inpEle.files?.length) {
-						const _file = inpEle?.files?.item(i);
-						if (_file !== null) {
-							files.push(_file);
-						}
-						i += 1;
-					}
-					resolve(files);
+    let _resolve: ((files: File[]) => void) | undefined
+    return (option?: { accept?: 'string'; multiple: boolean }) => {
+        if (_resolve) {
+            _resolve([])
+            _resolve = undefined
+        }
+        return new Promise<File[]>((resolve) => {
+            const inpEle = document.createElement('input')
+            inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
+            inpEle.type = 'file'
+            inpEle.style.display = 'none'
+            _resolve = resolve
+            // 文件类型限制
+            // inpEle.accept="image/*"
+            option?.accept && (inpEle.accept = option?.accept)
+            // 多选限制
+            option?.multiple && (inpEle.multiple = option?.multiple)
+            // inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
+            inpEle.addEventListener(
+                'change',
+                () => {
+                    if (!inpEle.files) {
+                        return
+                    }
+                    const files: File[] = []
+                    let i = 0
+                    while (i < inpEle.files?.length) {
+                        const _file = inpEle?.files?.item(i)
+                        if (_file !== null) {
+                            files.push(_file)
+                        }
+                        i += 1
+                    }
+                    resolve(files)
                     _resolve = undefined
-				},
-				{ once: true }
-			);
-			inpEle.click();
-		});
-	};
-})();
+                },
+                { once: true }
+            )
+            inpEle.click()
+        })
+    }
+})()
+
+export const renderIcon = (icon: any) => {
+    return () => {
+        return h(NIcon, null, {
+            default: () => h(icon)
+        })
+    }
+}
 
 export default {
-	filePicker,
-};
+    filePicker,
+    renderIcon
+}