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

README.md

@@ -7,7 +7,7 @@
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
 | 实现miaoDirectory的搜索功能 | ✅ |
-| plugin增加些选项，icon之类的 | ❌ |
+| plugin增加些属性，icon, disable, group之类的 | ❌ |
 | 完善miaoDirectory的搜索功能 | ❌ |
 | 实现miaoDirectory的排序功能 | ❌ |
 | 完善图片浏览插件 | ❌ |

src/App.vue

@@ -59,7 +59,8 @@ const deleteView = (index: number) => {
 // 点击标题是隐藏其他标签或显示其他标签，还挺好用的
 const handleClickTitle = (index: number) => {
     let count = views._views.filter((v) => v.visible).length
-    let op = !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
+    let op =
+        !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
     let _index = 0
     while (_index < views._views.length) {
         if (_index !== index) {
@@ -114,21 +115,37 @@ onMounted(() => {
             <n-scrollbar x-scrollable>
                 <div class="tabs-container">
                     <transition-group name="tab">
-                        <div class="tab" v-for="(view, index) of views._views" :key="view.id">
+                        <div
-                            <span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
+                            class="tab"
+                            v-for="(view, index) of views._views"
+                            :key="view.id">
+                            <span
+                                class="tab-title"
+                                :title="view.title"
+                                @click="handleClickTitle(index)">
                                 {{
                                     view.title.length > 5 && 0
                                         ? `${view.title.substring(0, 5)}...`
                                         : view.title
                                 }}
                             </span>
-                            <div class="tab-point" :style="{ backgroundColor: view.color }"></div>
+                            <div
+                                class="tab-point"
+                                :style="{ backgroundColor: view.color }"></div>
                             <div class="tab-control">
-                                <n-icon class="tag-control-icon icon" @click="view.switchShow()">
+                                <n-icon
-                                    <EyeOutline v-show="view.visible" class="icon-inner" />
+                                    class="tag-control-icon icon"
-                                    <EyeOffOutline v-show="!view.visible" class="icon-inner" />
+                                    @click="view.switchShow()">
+                                    <EyeOutline
+                                        v-show="view.visible"
+                                        class="icon-inner" />
+                                    <EyeOffOutline
+                                        v-show="!view.visible"
+                                        class="icon-inner" />
                                 </n-icon>
-                                <n-icon class="tag-control-icon icon" @click="
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="
                                         createView(
                                             view.component,
                                             view.currentDirectories,
@@ -138,7 +155,9 @@ onMounted(() => {
                                     ">
                                     <CopyOutline />
                                 </n-icon>
-                                <n-icon class="tag-control-icon icon" @click="deleteView(index)">
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="deleteView(index)">
                                     <CloseOutline class="icon-inner" />
                                 </n-icon>
                             </div>
@@ -148,7 +167,10 @@ onMounted(() => {
             </n-scrollbar>
             <div class="view-controller-menu">
                 <div class="view-controller-menu-item">
-                    <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
+                    <n-dropdown
+                        trigger="click"
+                        :options="openMenuOption"
+                        @select="handleMenuSelect">
                         <n-icon class="icon">
                             <EllipsisVertical class="icon-inner" />
                         </n-icon>
@@ -158,10 +180,19 @@ onMounted(() => {
         </div>
         <div class="view-container">
             <transition-group name="page">
-                <div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
+                <div
+                    class="view-container-item"
+                    v-for="(view, index) of views._views"
+                    v-show="view.visible"
                     :key="view.id">
-                    <component :is="view.component" v-model:current-directories="view.currentDirectories"
+                    <component
-                        v-model:current-files="view.currentFiles" :id="view.id" :color="view.color"
+                        :is="view.component"
+                        v-model:current-directories="view.currentDirectories"
+                        v-model:current-files="view.currentFiles"
+                        :id="view.id"
+                        :color="view.color"
+                        :view="view"
+                        :views="views"
                         @exit="deleteView(index)"></component>
                 </div>
             </transition-group>
@@ -169,8 +200,10 @@ onMounted(() => {
     </div>
     <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
     <MiaoMask v-model:show="showModal" @click="showModal = false">
-        <component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
+        <component
-        </component>
+            @click="(e: any) => e.stopPropagation()"
+            :is="modalData?.component"
+            v-bind="modalData?.props"></component>
     </MiaoMask>
 </template>
 
@@ -334,7 +367,6 @@ $tag-width: 170px;
 .view {
     .view-controller {
         .tabs-container {
-
             .tab-move,
             .tab-enter-active {
                 transition: all 0.2s ease;

src/class/PluginCenter.ts

@@ -1,13 +1,29 @@
 import useVirtualPages from '@/hooks/useVirtualPages'
 import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
+import { ShallowRef, shallowRef } from 'vue'
 
-type plugin = {
+export enum PluginGroup {
+    default = 'default',
+    mainMenu = 'mainMenu'
+}
+
+type Plugin = {
     // 用于显示的名字
     name: string
-    // 判断是否可以使用这个组件
+    // 代表插件的icon
+    icon?: ShallowRef<any>
+    // 是否禁用插件
+    disable: boolean
+    // 插件所属的group，用于区分插件使用的场合
+    group: PluginGroup[]
+    // 判断在未禁用时是否可以使用这个组件
     // 使用组件即调用下面的func
     filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
-    func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void
+    func: (
+        VDirectories: VirtualDirectory[],
+        VFiles: VirtualFile[],
+        ...args: any[]
+    ) => void
 }
 
 export default class PluginCenter {
@@ -15,30 +31,43 @@ export default class PluginCenter {
         this.pluginsMap = {}
     }
     pluginsMap: {
-        [key: string]: plugin
+        [key: string]: Plugin
     }
 
-    register(key: string, plugin: plugin) {
+    register(key: string, plugin: Plugin) {
         this.pluginsMap[key] = plugin
     }
 
     /**
      * 便捷地注册一个组件为插件，触发时直接用新页面打开
      */
-    registerComponent(
+    registerComponent(option: {
-        key: string,
+        key: string
-        name: string,
+        name: string
-        getComponent: () => Promise<any>,
+        icon?: any
+        getComponent: () => Promise<any>
+        group?: PluginGroup[]
         filter: (
             VDirectories: VirtualDirectory[],
             VFiles: VirtualFile[]
         ) => boolean
-    ): void {
+    }): void {
+        const {
+            key,
+            name,
+            getComponent,
+            icon,
+            filter,
+            group = [PluginGroup.default]
+        } = option
         let _component: any
         const views = useVirtualPages()
         this.register(key, {
             name,
             filter,
+            icon: shallowRef(icon),
+            group,
+            disable: false,
             func: async (
                 VDirectories: VirtualDirectory[],
                 VFiles: VirtualFile[]
@@ -52,10 +81,22 @@ export default class PluginCenter {
         })
     }
 
-    getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
+    getUsablePlugin(
+        VDirectories: VirtualDirectory[],
+        VFiles: VirtualFile[],
+        option?: {
+            group?: PluginGroup[]
+        }
+    ) {
+        const { group = [PluginGroup.default] } = option ?? {}
         const usableList = []
         for (let key of Object.keys(this.pluginsMap)) {
-            if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
+            const _plugin = this.pluginsMap[key]
+            if (
+                !_plugin.disable &&
+                _plugin.group.filter((v) => group.includes(v)).length > 0 &&
+                _plugin.filter(VDirectories, VFiles)
+            ) {
                 usableList.push(key)
             }
         }
@@ -67,9 +108,10 @@ export default class PluginCenter {
 
     usePlugin(
         key: string,
-        VDirectories: VirtualDirectory[],
+        VDirectories?: VirtualDirectory[],
-        VFiles: VirtualFile[]
+        VFiles?: VirtualFile[],
+        ...args: any[]
     ) {
-        this.pluginsMap[key].func(VDirectories, VFiles)
+        this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args)
     }
 }

src/components/miaoDirectory/miaoDirectoryItemsContainer.vue

@@ -1,22 +1,42 @@
 <template>
-    <div class="miao-directory-container-items" :style="{
+    <div
-        backgroundColor:
+        class="miao-directory-container-items"
-            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+        :style="{
+            backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
         }">
-        <n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
+        <n-scrollbar ref="scrollbarRef" style="max-height: 100%">
-            <miao-lazy-div v-for="(dir) in showData_directory" :key="dir.id" min-height="50px">
+            <miao-lazy-div
-                <miaoDirectoryItem :item="dir" :color="props.color" :selected="selectedItem.includes(dir)"
+                v-for="dir in showData_directory"
-                    :drop-down-options="itemDropDownOptions(dir).value" @delete="handleItemDelete(dir)"
+                :key="dir.id"
-                    @plugin="p => handleItemUsePlugin(dir)(p)" @click="handleItemClick(dir)"
+                min-height="50px">
-                    @drag-start="e => handleItemDragStart(dir)(e)" @rename="handleItemRename(dir)"
+                <miaoDirectoryItem
+                    :item="dir"
+                    :color="props.color"
+                    :selected="selectedItem.includes(dir)"
+                    :drop-down-options="itemDropDownOptions(dir).value"
+                    @delete="handleItemDelete(dir)"
+                    @plugin="(p) => handleItemUsePlugin(dir)(p)"
+                    @click="handleItemClick(dir)"
+                    @drag-start="(e) => handleItemDragStart(dir)(e)"
+                    @rename="handleItemRename(dir)"
                     @on-selected="handleItemSelect(dir)" />
             </miao-lazy-div>
-            <miao-lazy-div v-for="(file) in showData_files" :key="file.id" min-height="50px">
+            <miao-lazy-div
-                <miaoDirectoryItem :item="file" :color="props.color" :selected="selectedItem.includes(file)"
+                v-for="file in showData_files"
-                    :drop-down-options="itemDropDownOptions(file).value" @click="handleItemClick(file)"
+                :key="file.id"
-                    @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
+                min-height="50px">
-                    @drag-start="e => handleItemDragStart(file)(e)" @rename="handleItemRename(file)"
+                <miaoDirectoryItem
-                    @plugin="p => handleItemUsePlugin(file)(p)" @on-selected="handleItemSelect(file)" />
+                    :item="file"
+                    :color="props.color"
+                    :selected="selectedItem.includes(file)"
+                    :drop-down-options="itemDropDownOptions(file).value"
+                    @click="handleItemClick(file)"
+                    @download="handleItemDownload(file)"
+                    @delete="handleItemDelete(file)"
+                    @drag-start="(e) => handleItemDragStart(file)(e)"
+                    @rename="handleItemRename(file)"
+                    @plugin="(p) => handleItemUsePlugin(file)(p)"
+                    @on-selected="handleItemSelect(file)" />
             </miao-lazy-div>
         </n-scrollbar>
     </div>
@@ -27,8 +47,9 @@ import { NScrollbar } from 'naive-ui'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
 import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
-import { computed, ref } from 'vue';
+import { computed, ref } from 'vue'
-import usePluginCenter from '@/hooks/usePluginCenter';
+import usePluginCenter from '@/hooks/usePluginCenter'
+import { renderIcon } from '@/hooks/miaoTools'
 
 const pluginCenter = usePluginCenter()
 
@@ -51,14 +72,15 @@ const emit = defineEmits<{
 
 const scrollbarRef = ref()
 
-const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed(() => {
+const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
+    computed(() => {
         const items = [...props.selectedItem]
         const selected = props.selectedItem.includes(item)
         if (!selected) {
             items.push(item)
         }
-    const vDirs = items.filter(v => v.type === 'directory')
+        const vDirs = items.filter((v) => v.type === 'directory')
-    const vFiles = items.filter(v => v.type === 'file')
+        const vFiles = items.filter((v) => v.type === 'file')
         const options = [
             {
                 label: '重命名',
@@ -67,7 +89,7 @@ const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed((
             {
                 label: '删除',
                 key: 'delete'
-        },
+            }
         ]
         if (item.type === 'file') {
             options.push(
@@ -98,14 +120,16 @@ const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed((
                 ]
             )
         }
-    options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
+        options.push(
+            ...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
                 label: `插件:${v.name}`,
-        key: `plugin:${v.key}`
+                key: `plugin:${v.key}`,
-    })))
+                icon: v.icon ? renderIcon(v.icon) : undefined
+            }))
+        )
         return options
     })
 
-
 const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
     emit('item-click', item)
 }
@@ -118,7 +142,8 @@ const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
     emit('item-delete', item)
 }
 
-const handleItemDragStart = (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
+const handleItemDragStart =
+    (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
         emit('item-drag-start', _event, item)
     }
 
@@ -130,19 +155,21 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
     emit('item-select', item)
 }
 
-const handleItemUsePlugin = (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
+const handleItemUsePlugin =
+    (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
         const items = [...props.selectedItem]
         const selected = props.selectedItem.includes(item)
         if (!selected) {
             items.push(item)
         }
-    const vDirs = items.filter(v => v.type === 'directory')
+        const vDirs = items.filter((v) => v.type === 'directory')
-    const vFiles = items.filter(v => v.type === 'file')
+        const vFiles = items.filter((v) => v.type === 'file')
         pluginCenter.usePlugin(plugin, vDirs, vFiles)
     }
 
-
+defineExpose({
-defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
+    scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
+})
 </script>
 
 <style scoped lang="scss">

src/components/miaoPopupInput.vue

@@ -2,34 +2,53 @@
     <miao-mask v-model:show="showMask">
         <n-card class="popup-card" :title="popupConfig?.title" size="medium">
             {{ popupConfig?.content }}
-      <n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
+            <n-input
+                class="popup-input"
+                v-model:value="inputValue"
+                type="text"
+                v-bind="popupConfig?.inputProps"
+                passively-activated
+                autofocus
                 v-if="popupConfig?.inputProps" />
             <div class="popup-button-container">
-        <n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
+                <n-button
-          :type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
+                    class="popup-button-container-button"
+                    v-for="option in popupConfig?.options"
+                    :key="option.label"
+                    :type="option.type"
+                    @click="_resolve && _resolve(option.key)">
+                    {{ option.label }}
+                </n-button>
             </div>
         </n-card>
     </miao-mask>
 </template>
 <script lang="ts" setup>
-import { ref, nextTick } from "vue";
+import { ref, nextTick } from 'vue'
-import { NCard, NInput, NButton } from "naive-ui";
+import { NCard, NInput, NButton } from 'naive-ui'
-import miaoMask from "./miaoMask.vue";
+import miaoMask from './miaoMask.vue'
-import { InputProps } from "naive-ui";
+import { InputProps } from 'naive-ui'
 
-const showMask = ref(false);
+const showMask = ref(false)
-const inputValue = ref<string>("");
+const inputValue = ref<string>('')
 const _resolve = ref()
 
 type popupConfigType = {
     title: string
     content?: string
-  inputValue?: string,
+    inputValue?: string
     inputProps?: InputProps
     options: {
         label: string
         key: unknown
-    type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
+        type:
+            | 'default'
+            | 'tertiary'
+            | 'primary'
+            | 'success'
+            | 'info'
+            | 'warning'
+            | 'error'
     }[]
 }
 
@@ -43,7 +62,7 @@ const popup = async (config: popupConfigType) => {
         _resolve.value = resolve
     })
     const text = inputValue.value
-  showMask.value = false;
+    showMask.value = false
     nextTick(() => {
         inputValue.value = ''
         _resolve.value = undefined
@@ -51,10 +70,10 @@ const popup = async (config: popupConfigType) => {
     return {
         text,
         key
-  };
+    }
-};
+}
 
-defineExpose({ popup });
+defineExpose({ popup })
 </script>
 
 <style scoped lang="scss">

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(
+    pluginCenter.registerComponent({
-        'miaoDirectory',
+        key: 'miaoDirectory',
-        '文件夹',
+        name: '文件夹',
-        async () => MiaoDirectory,
+        icon: FileTray,
-        (vDirs, vFiles) => {
+        getComponent: async () => MiaoDirectory,
+        filter: (vDirs, vFiles) => {
             if (vFiles.length) {
                 return false
             }
             return vDirs.length === 1
         }
-    )
+    })
-    pluginCenter.registerComponent(
+    pluginCenter.registerComponent({
-        'miaoVideoPlayer',
+        key: 'miaoVideoPlayer',
-        '视频',
+        name: '视频',
-        async () => (await import('@/views/miaoVideoPlayer.vue')).default,
+        icon: PlayCircle,
-        (vDirs, vFiles) => {
+        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',
+    pluginCenter.registerComponent({
-        '框架',
+        key: 'miaoIframe',
-        async () => (await import('@/views/miaoIframe.vue')).default,
+        name: '框架',
-        (vDirs, vFiles) => {
+        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',
+    pluginCenter.registerComponent({
-        'PDF浏览',
+        key: 'miaoPDF',
-        async () => (await import('@/views/miaoPDF.vue')).default,
+        name: 'PDF浏览',
-        (vDirs, vFiles) => {
+        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',
+    pluginCenter.registerComponent({
-        '代码编辑',
+        key: 'miaoCodeMirror',
-        async () => (await import('@/views/miaoCodeMirror.vue')).default,
+        name: '代码编辑',
-        (vDirs, vFiles) => {
+        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",
+    pluginCenter.registerComponent({
-		"图片浏览",
+        key: 'miaoImages',
-		async () => (await import("@/views/miaoImages.vue")).default,
+        name: '图片浏览',
-		(vDirs, vFiles) => {
+        icon: Image,
+        getComponent: async () =>
+            (await import('@/views/miaoImages.vue')).default,
+        filter: (vDirs, vFiles) => {
             if (vDirs.length === 0 && vFiles.length === 0) {
-				return false;
+                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"]) {
+                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;
+            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;
+    let _resolve: ((files: File[]) => void) | undefined
-	return (option?: { accept?: "string"; multiple: boolean }) => {
+    return (option?: { accept?: 'string'; multiple: boolean }) => {
         if (_resolve) {
-			_resolve([]);
+            _resolve([])
-			_resolve = undefined;
+            _resolve = undefined
         }
-		return new Promise<File[]>(resolve => {
+        return new Promise<File[]>((resolve) => {
-			const inpEle = document.createElement("input");
+            const inpEle = document.createElement('input')
-			inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
+            inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
-			inpEle.type = "file";
+            inpEle.type = 'file'
-			inpEle.style.display = "none";
+            inpEle.style.display = 'none'
-			_resolve = resolve;
+            _resolve = resolve
             // 文件类型限制
             // inpEle.accept="image/*"
-			option?.accept && (inpEle.accept = option?.accept);
+            option?.accept && (inpEle.accept = option?.accept)
             // 多选限制
-			option?.multiple && (inpEle.multiple = option?.multiple);
+            option?.multiple && (inpEle.multiple = option?.multiple)
             // inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
             inpEle.addEventListener(
-				"change",
+                'change',
                 () => {
                     if (!inpEle.files) {
-						return;
+                        return
                     }
-					const files: File[] = [];
+                    const files: File[] = []
-					let i = 0;
+                    let i = 0
                     while (i < inpEle.files?.length) {
-						const _file = inpEle?.files?.item(i);
+                        const _file = inpEle?.files?.item(i)
                         if (_file !== null) {
-							files.push(_file);
+                            files.push(_file)
                         }
-						i += 1;
+                        i += 1
                     }
-					resolve(files);
+                    resolve(files)
                     _resolve = undefined
                 },
                 { once: true }
-			);
+            )
-			inpEle.click();
+            inpEle.click()
-		});
+        })
-	};
+    }
-})();
+})()
+
+export const renderIcon = (icon: any) => {
+    return () => {
+        return h(NIcon, null, {
+            default: () => h(icon)
+        })
+    }
+}
 
 export default {
     filePicker,
-};
+    renderIcon
+}

src/views/miaoDirectory.vue

@@ -1,20 +1,42 @@
 <template>
-  <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
+    <miao-drop-handler
+        @on-virtual-directory="handleDropVDirectory"
+        @on-files="handleDropFiles"
         @on-virtual-files="handleDropVirtualFiles">
         <div class="miao-directory-item-container" ref="rootDomRef">
             <!-- 顶部面包屑导航和工具栏 -->
-      <miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
+            <miao-directory-top
-        :open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
+                :color="props.color"
-        @set-current-directory="setCurrentDirectory" @search="handleSearch" @menu-select="handleTopBarMenuSelect" />
+                :current-directory="currentDirectory"
+                @back="handleBack"
+                :open-menu-option="topBarMenuOption"
+                @reload="handleReload"
+                @exit="emit('exit')"
+                :index="index"
+                @set-current-directory="setCurrentDirectory"
+                @search="handleSearch"
+                @menu-select="handleTopBarMenuSelect" />
 
             <!-- 文件和文件夹列表 -->
-      <miao-directory-items ref='miaoDirectoryItemRef' :color="props.color" :showData_directory="showData_directory"
+            <miao-directory-items
-        :showData_files="showData_files" :selected-item="selectedItem.value" :index="index"
+                ref="miaoDirectoryItemRef"
-        @item-click="handleItemClick" @item-download="handleItemDownload" @item-delete="handleItemDelete"
+                :color="props.color"
-        @item-drag-start="handleItemDragStart" @item-rename="handleItemRename" @item-select="handleItemSelect" />
+                :showData_directory="showData_directory"
+                :showData_files="showData_files"
+                :selected-item="selectedItem.value"
+                :index="index"
+                @item-click="handleItemClick"
+                @item-download="handleItemDownload"
+                @item-delete="handleItemDelete"
+                @item-drag-start="handleItemDragStart"
+                @item-rename="handleItemRename"
+                @item-select="handleItemSelect" />
 
             <!-- 底部工具栏 -->
-      <miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
+            <miao-directory-bottom
+                :index="index"
+                @add-new-item="handleAddNewItem"
+                v-if="false"
                 @pick-files-upload="handlePickFilesUpload" />
 
             <miao-mask v-model:show="showModel"></miao-mask>
@@ -24,14 +46,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import Config from '@/config'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import useDataBus from '@/hooks/useDataBus'
 import useUploadQueue from '@/hooks/useUploadQueue'
 import useVirtualPages from '@/hooks/useVirtualPages'
-import { filePicker } from '@/hooks/miaoTools'
+import { filePicker, renderIcon } from '@/hooks/miaoTools'
 import { uniq } from 'lodash'
 
 // 导入子组件
@@ -41,10 +63,13 @@ import MiaoDirectoryBottom from '@/components/miaoDirectory/miaoDirectoryBottom.
 import MiaoMask from '@/components/miaoMask.vue'
 import MiaoPopupInput from '@/components/miaoPopupInput.vue'
 import MiaoDropHandler from '@/components/miaoDropHandler.vue'
-import { NIcon } from 'naive-ui'
 import {
-  CloseOutline, SearchOutline, FilterOutline, CheckmarkDoneOutline,
+    CloseOutline,
-  DocumentText, ExtensionPuzzleOutline,
+    SearchOutline,
+    FilterOutline,
+    CheckmarkDoneOutline,
+    DocumentText,
+    ExtensionPuzzleOutline,
     FileTray,
     AddOutline,
     CloudUploadOutline
@@ -93,7 +118,7 @@ class SelectedItem {
     get value() {
         const _filterList = [
             ...(currentDirectory.value?.directories ?? []),
-      ...(currentDirectory.value?.files ?? []),
+            ...(currentDirectory.value?.files ?? [])
         ]
         return uniq(this._selectedItem).filter((v) => {
             if (currentDirectory.value === undefined) {
@@ -107,9 +132,12 @@ class SelectedItem {
 // 已选择的item，用于多选功能
 const selectedItem = reactive(new SelectedItem())
 
-const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
+const currentDirectories = defineModel<VirtualDirectory[]>(
-  required: true,
+    'currentDirectories',
-})
+    {
+        required: true
+    }
+)
 
 // 目前展示的Dir
 const currentDirectory = computed(() => {
@@ -130,7 +158,7 @@ const showData_directory = computed<VirtualDirectory[]>(() => {
         ? [...currentDirectory.value?.directories]
         : []
     if (searchText.value !== '') {
-    data = data.filter(vd => vd.name.includes(searchText.value))
+        data = data.filter((vd) => vd.name.includes(searchText.value))
     }
     return data
 })
@@ -138,9 +166,11 @@ const showData_files = computed<VirtualFile[]>(() => {
     if (showFiles.value === false) {
         return []
     }
-  let data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : []
+    let data = currentDirectory.value?.files
+        ? [...currentDirectory.value?.files]
+        : []
     if (searchText.value !== '') {
-    data = data.filter(vd => vd.name.includes(searchText.value))
+        data = data.filter((vd) => vd.name.includes(searchText.value))
     }
     return data
 })
@@ -162,16 +192,20 @@ const topBarMenuOption = computed(() => {
             key: 'search',
             icon: renderIcon(SearchOutline)
         },
-    searchText.value !== '' ? {
+        searchText.value !== ''
+            ? {
                   label: '重置搜索',
                   key: 'searchReset',
                   icon: renderIcon(SearchOutline)
-    } : undefined,
+              }
-    selectedItem.value.length !== 0 ? {
+            : undefined,
+        selectedItem.value.length !== 0
+            ? {
                   label: '重置多选',
                   key: 'selectedItemReset',
                   icon: renderIcon(CheckmarkDoneOutline)
-    } : undefined,
+              }
+            : undefined,
         {
             label: '筛选',
             key: 'filter',
@@ -185,7 +219,7 @@ const topBarMenuOption = computed(() => {
                     label: `${showFiles.value ? '隐藏' : '显示'}文件`,
                     key: 'showFiles',
                     icon: renderIcon(DocumentText)
-        },
+                }
             ],
             icon: renderIcon(FilterOutline)
         },
@@ -193,10 +227,13 @@ const topBarMenuOption = computed(() => {
             label: '插件',
             key: 'plugin',
             children: [
-        ...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
+                ...pluginCenter
+                    .getUsablePlugin([currentDirectories.value[0]], [])
+                    .map((v) => ({
                         label: `${v.name}`,
-          key: `plugin:${v.key}`
+                        key: `plugin:${v.key}`,
-        })),
+                        icon: v.icon ? renderIcon(v.icon) : undefined
+                    }))
             ],
             icon: renderIcon(ExtensionPuzzleOutline)
         },
@@ -204,22 +241,17 @@ const topBarMenuOption = computed(() => {
             label: '关闭',
             key: 'close',
             icon: renderIcon(CloseOutline)
-    },
-  ].filter(v => v !== undefined)
-})
-
-const renderIcon = (icon: any) => {
-  return () => {
-    return h(NIcon, null, {
-      default: () => h(icon)
-    })
-  }
         }
+    ].filter((v) => v !== undefined)
+})
 
 // 设置显示的dir
 const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
     // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
-  if (virtualDirectory.files === undefined || virtualDirectory.directories === undefined) {
+    if (
+        virtualDirectory.files === undefined ||
+        virtualDirectory.directories === undefined
+    ) {
         await virtualDirectory.update()
     } else {
         virtualDirectory.update()
@@ -230,7 +262,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
         nextTick(() => {
             miaoDirectoryItemRef.value.scrollTo({
                 top: 0,
-        behavior: "instant"
+                behavior: 'instant'
             })
         })
     }
@@ -246,7 +278,7 @@ const openUrl = (
     config?: {
         download?: string
         target?: string
-  },
+    }
 ) => {
     let { target, download } = config ?? {}
     const a = document.createElement('a')
@@ -303,7 +335,7 @@ const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
 
 const handleItemDownload = (item: VirtualFile) => {
     openUrl(`${baseUrl}${api.get}${item.path}`, {
-    download: item.name,
+        download: item.name
     })
 }
 
@@ -311,7 +343,7 @@ const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
     for (let item of uniq([...selectedItem.value, _item])) {
         ;(async () => {
             const { response } = miaoFetchApi.delete(item, {
-        retry: 5,
+                retry: 5
             })
             // todo: 将删除事件统一用一个事件管理中心管理
             const id = (await response).eventId
@@ -329,20 +361,20 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
         title: '重命名',
         inputValue: item.name,
         inputProps: {
-      placeholder: item.name,
+            placeholder: item.name
         },
         options: [
             {
                 label: '取消',
                 key: false,
-        type: 'error',
+                type: 'error'
             },
             {
                 label: '确认',
                 key: true,
-        type: 'success',
+                type: 'success'
-      },
+            }
-    ],
+        ]
     })
     if (popupRes?.key === false) {
         return
@@ -352,7 +384,7 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
         return
     }
     const { response } = miaoFetchApi.rename(item, newName, {
-    retry: 5,
+        retry: 5
     })
     const id = (await response).eventId
     const { response: res } = miaoFetchApi.query(id)
@@ -364,11 +396,17 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
 
 const handleItemDragStart = async (
     _event: DragEvent,
-  item: VirtualDirectory | VirtualFile,
+    item: VirtualDirectory | VirtualFile
 ) => {
     const items = uniq([item, ...selectedItem.value])
-  dataBus.set('dragData_vFiles', items.filter((v) => v.type === 'file'))
+    dataBus.set(
-  dataBus.set('dragData_vDirectory', items.filter((v) => v.type === 'directory'))
+        'dragData_vFiles',
+        items.filter((v) => v.type === 'file')
+    )
+    dataBus.set(
+        'dragData_vDirectory',
+        items.filter((v) => v.type === 'directory')
+    )
     // selectedItem.clear()
 }
 
@@ -377,7 +415,7 @@ const handleDropFiles = async (files: File[]) => {
         uploadQueue.push(files, currentDirectory.value, {
             onFinish() {
                 reload()
-      },
+            }
         })
 }
 
@@ -427,13 +465,13 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
 
 const handlePickFilesUpload = async () => {
     const files = await filePicker({
-    multiple: true,
+        multiple: true
     })
     const _currDir = currentDirectory.value
     uploadQueue.push(files, _currDir, {
         onFinish() {
             _currDir.update()
-    },
+        }
     })
 }
 
@@ -441,25 +479,25 @@ const handleAddNewItem = async () => {
     const popupRes = await popupInput.value?.popup({
         title: '新建文件/文件夹',
         inputProps: {
-      placeholder: '',
+            placeholder: ''
         },
         options: [
             {
                 label: '取消',
                 key: 'cancel',
-        type: 'error',
+                type: 'error'
             },
             {
                 label: '文件',
                 key: 'file',
-        type: 'success',
+                type: 'success'
             },
             {
                 label: '文件夹',
                 key: 'dir',
-        type: 'success',
+                type: 'success'
-      },
+            }
-    ],
+        ]
     })
     // todo: 上传前如重名文件夹等等的错误提前检查
     if (popupRes?.key === 'cancel' || popupRes?.text === '') {
@@ -499,25 +537,25 @@ const handleSearch = async () => {
         title: '搜索当前文件夹',
         inputValue: searchText.value,
         inputProps: {
-      placeholder: '',
+            placeholder: ''
         },
         options: [
             {
                 label: '取消',
                 key: 'cancel',
-        type: 'default',
+                type: 'default'
             },
             {
                 label: '重置',
                 key: 'reset',
-        type: 'default',
+                type: 'default'
             },
             {
                 label: '搜索',
                 key: 'search',
-        type: 'success',
+                type: 'success'
-      },
+            }
-    ],
+        ]
     })
     if (!popupRes) {
         return

src/views/miaoImages.vue

@@ -1,33 +1,61 @@
 <template>
-    <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
+    <miao-drop-handler
+        @on-virtual-directory="handleDrop"
+        @on-virtual-files="handleDrop">
         <div class="miaoImage" ref="rootRef">
             <n-scrollbar ref="NScrollbarRef">
-                <div class="miaoImage-container">
+                <div
-                    <div class="miaoImage-container-row" v-for="(src, index) in imageSrcList" :key="index">
+                    class="miaoImage-container"
-                        <img :src="src" class="miaoImage-container-row-image" loading="lazy"
+                    v-for="imageGroup in imageGroupList">
-                            :class="activeImageIndex === index ? 'miaoImage-container-row-image-active' : ''"
+                    <div class="miaoImage-container-day">
-                            @click="activeImageIndex = index" />
+                        <span class="miaoImage-container-day-text">
+                            {{ imageGroup.day }}
+                        </span>
+                    </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>
                 </div>
             </n-scrollbar>
-            <miao-mask :show="activeImageIndex !== -1" @click="activeImageIndex = -1" class="miaoImage-mask">
+            <miao-mask
-                <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageIndexBack" />
+                :show="activeImage !== undefined"
-                <img :src="imageSrcList[activeImageIndex]" class="miaoImage-mask-active"
+                @click="activeImage = undefined"
-                    @click="e => e.stopPropagation()" draggable="false">
+                class="miaoImage-mask">
-                <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
+                <ChevronBack
-                    @click="handleActiveImageIndexForward" />
+                    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"
+                    @click="handleActiveImageForward" />
             </miao-mask>
         </div>
     </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
-import miaoMask from '@/components/miaoMask.vue';
+import miaoMask from '@/components/miaoMask.vue'
-import miaoDropHandler from '@/components/miaoDropHandler.vue';
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { uniq } from 'lodash';
+import { uniq } from 'lodash'
-import { nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
-import { NScrollbar } from 'naive-ui';
+import { NScrollbar } from 'naive-ui'
 import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
 
 const imageSuffixList = [
@@ -49,38 +77,95 @@ const imageSuffixList = [
     'avif'
 ]
 
-const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
+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 imageFileList = ref<VirtualFile[]>([])
 
-const activeImageIndex = ref(-1)
+const imageGroupList = computed(() => {
+    return groupByDay(imageFileList.value)
+})
+const activeImage = ref<VirtualFile>()
 
-const scrollToActiveImage = () => {
+const groupByDay = (array: VirtualFile[]) => {
-    const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
+    const result = []
-    NScrollbarRef.value.scrollTo({
+    let currentDay = null
-        top: dom.offsetTop - 30,
+    let currentGroup: VirtualFile[] = []
-        behavior: "smooth"
+
+    for (const item of array) {
+        const date = new Date(item.stats.mtimeMs)
+        const day = `${date.getFullYear()}年 ${String(
+            date.getMonth() + 1
+        ).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
+
+        if (day !== currentDay) {
+            if (currentGroup.length > 0) {
+                result.push({
+                    day: currentDay,
+                    items: currentGroup
+                })
+            }
+            currentDay = day
+            currentGroup = [item]
+        } else {
+            currentGroup.push(item)
+        }
+    }
+    if (currentGroup.length > 0) {
+        result.push({
+            day: currentDay,
+            items: currentGroup
         })
     }
 
-const handleActiveImageIndexBack = (e: any) => {
+    return result
+}
+
+const scrollToActiveImage = () => {
+    const dom = rootRef.value?.querySelector(
+        '.miaoImage-container-row-image-active'
+    )
+    NScrollbarRef.value.scrollTo({
+        top: dom.offsetTop - 30,
+        behavior: 'smooth'
+    })
+}
+
+const handleActiveImageBack = (e: any) => {
     e.stopPropagation()
-    activeImageIndex.value = (activeImageIndex.value - 1 + imageSrcList.value.length) % imageSrcList.value.length
+    if (!activeImage.value) {
+        return
+    }
+    const index = imageFileList.value.indexOf(activeImage.value)
+    activeImage.value =
+        imageFileList.value[
+            (index - 1 + imageFileList.value.length) %
+                imageFileList.value.length
+        ]
     nextTick(scrollToActiveImage)
 }
 
-const handleActiveImageIndexForward = (e: any) => {
+const handleActiveImageForward = (e: any) => {
     e.stopPropagation()
-    activeImageIndex.value = (activeImageIndex.value + 1 + imageSrcList.value.length) % imageSrcList.value.length
+    if (!activeImage.value) {
+        return
+    }
+    const index = imageFileList.value.indexOf(activeImage.value)
+    activeImage.value =
+        imageFileList.value[
+            (index + 1 + imageFileList.value.length) %
+                imageFileList.value.length
+        ]
     nextTick(scrollToActiveImage)
 }
 
@@ -92,27 +177,43 @@ const handleDrop = (vItems: (VirtualFile | VirtualDirectory)[]) => {
         // @ts-ignore
         currentFiles.value = [...currentFiles, ...vItems]
     }
-    vItems.forEach(v => {
+    vItems.forEach((v) => {
         updateImageSrcList(v)
     })
 }
 
 const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
     let newSrcList: string[]
+    let newFileList: VirtualFile[]
     if (source.type === 'directory') {
         await source.update()
-        newSrcList = source.files?.filter(v => imageSuffixList.includes(v.name.split('.').pop() ?? '')).map(v => v.url) ?? []
+        newFileList = [
+            ...(source.files?.filter((v) =>
+                imageSuffixList.includes(v.name.split('.').pop() ?? '')
+            ) ?? [])
+        ]
+        newSrcList =
+            source.files
+                ?.filter((v) =>
+                    imageSuffixList.includes(v.name.split('.').pop() ?? '')
+                )
+                .map((v) => v.url) ?? []
     } else {
         if (!imageSuffixList.includes(source.name.split('.').pop() ?? '')) {
             return
         }
+        newFileList = [source]
         newSrcList = [source.url]
     }
-    imageSrcList.value = uniq([...imageSrcList.value, ...newSrcList])
+    imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
+        (a, b) => a.stats.mtimeMs - b.stats.mtimeMs
+    )
 }
 
 onMounted(() => {
-    [...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList)
+    ;[...currentFiles.value, ...currentDirectories.value].forEach(
+        updateImageSrcList
+    )
 })
 </script>
 
@@ -129,6 +230,17 @@ onMounted(() => {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
+        margin-bottom: 20px;
+        margin-top: 20px;
+        .miaoImage-container-day {
+            width: 100%;
+            .miaoImage-container-day-text {
+                margin-left: 40px;
+                font-size: 20px;
+                user-select: none;
+                letter-spacing: 1px;
+            }
+        }
 
         .miaoImage-container-row {
             display: flex;

src/views/miaoPDF.vue

@@ -1,44 +1,74 @@
 <template>
+    <miao-message-provider ref="miaoMessageRef">
         <div class="miao-container">
             <div class="miao-container-topBar">
-            <div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</div>
+                <div
-            <div class="miao-container-topBar-btn" @click="() => handleZoom()" title="缩小">-</div>
+                    class="miao-container-topBar-btn"
-            <div class="miao-container-topBar-btn" @click="() => handleResetMargin()" title="还原">还原缩放</div>
+                    @click="() => handleZoom(10)"
-            <div class="miao-container-topBar-btn" @click="() => handleShrink()" title="放大">+</div>
+                    title="快速缩小">
-            <div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div>
+                    --
+                </div>
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleZoom()"
+                    title="缩小">
+                    -
+                </div>
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleResetMargin()"
+                    title="还原">
+                    还原缩放
+                </div>
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleShrink()"
+                    title="放大">
+                    +
+                </div>
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleShrink(10)"
+                    title="快速放大">
+                    ++
+                </div>
             </div>
             <NScrollbar>
-            <div class="miao-container-pdf" :style="{alignItems: pdfMargin < 0 ? 'baseline' : 'center'}">
+                <div
-                <div ref="pdfEl" class="miao-container-pdf-content" :style="{ width: `calc( 100% - ${pdfMargin}px)`}">
+                    class="miao-container-pdf"
-                </div>
+                    :style="{
+                        alignItems: pdfMargin < 0 ? 'baseline' : 'center'
+                    }">
+                    <div
+                        ref="pdfEl"
+                        class="miao-container-pdf-content"
+                        :style="{
+                            width: `calc( 100% - ${pdfMargin}px)`
+                        }"></div>
                 </div>
             </NScrollbar>
-        <div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' :
-            `渲染进度：${canvasList.length}/${pdfPageCount}` }}</div>
         </div>
+    </miao-message-provider>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, shallowReactive } from 'vue'
+import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import { onMounted, ref, shallowReactive } from 'vue'
 import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
 import { VirtualFile } from '@/class/VirtualDirectory'
-import { NScrollbar } from 'naive-ui';
+import { NScrollbar } from 'naive-ui'
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
 
 const pdfEl = ref<HTMLDivElement>()
-
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
 // 通过margin来实现缩小功能
 const pdfMargin = ref<number>(0)
 
 const pdfPageCount = ref<number>(-1)
 
-const isLoading = computed(() => {
-    return canvasList.length !== pdfPageCount.value
-})
-
 const canvasList = shallowReactive<HTMLCanvasElement[]>([])
 
 const handleZoom = (index?: number) => {
@@ -58,14 +88,11 @@ const handleResetMargin = () => {
     pdfMargin.value = 0
 }
 
-const loadingPercent = computed(() => {
-    if (pdfPageCount.value === -1) {
-        return -1
-    }
-    return canvasList.length / pdfPageCount.value
-})
-
 onMounted(async () => {
+    const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
+        type: 'info',
+        timeout: -1
+    })
     const pdfSrc = currentFiles.value[0].url
     // @ts-ignore
     const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
@@ -79,6 +106,7 @@ onMounted(async () => {
     pdfPageCount.value = pdf.numPages
     // 循环渲染每一页
     for (let i = 1; i <= pdf.numPages; i++) {
+        setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
         const page = await pdf.getPage(i)
         let pixelRatio = 3
         let viewport = page.getViewport({ scale: 1 })
@@ -96,6 +124,11 @@ onMounted(async () => {
         }
         await page.render(renderContext).promise // 一页一页的渲染
     }
+    setLoadingMessage &&
+        setLoadingMessage(`渲染PDF完成`, {
+            type: 'success',
+            timeout: 3456
+        })
 })
 </script>