diff --git a/README.md b/README.md
index 4a4098e..fb458f9 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,13 @@
 ## TODO list:
 
-| 计划 | 状态 | 
+| 计划 | 状态 |
 |---|---|
 | 拆分miaoDirectory | ✅ |
 | 完善视频插件 | ✅ |
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
 | 实现miaoDirectory的搜索功能 | ✅ |
-| plugin增加些选项，icon之类的 | ❌ |
+| plugin增加些属性，icon, disable, group之类的 | ❌ |
 | 完善miaoDirectory的搜索功能 | ❌ |
 | 实现miaoDirectory的排序功能 | ❌ |
 | 完善图片浏览插件 | ❌ |
diff --git a/src/App.vue b/src/App.vue
index 61599ed..1357920 100644
--- a/src/App.vue
+++ b/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,31 +115,49 @@ 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">
-                            <span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
+                        <div
+                            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()">
-                                    <EyeOutline v-show="view.visible" class="icon-inner" />
-                                    <EyeOffOutline v-show="!view.visible" class="icon-inner" />
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @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="
-                                    createView(
-                                        view.component,
-                                        view.currentDirectories,
-                                        view.currentFiles,
-                                        index + 1
-                                    )
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="
+                                        createView(
+                                            view.component,
+                                            view.currentDirectories,
+                                            view.currentFiles,
+                                            index + 1
+                                        )
                                     ">
                                     <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"
-                        v-model:current-files="view.currentFiles" :id="view.id" :color="view.color"
+                    <component
+                        :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;
diff --git a/src/class/PluginCenter.ts b/src/class/PluginCenter.ts
index 01bfd8c..50c75e3 100644
--- a/src/class/PluginCenter.ts
+++ b/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(
-        key: string,
-        name: string,
-        getComponent: () => Promise<any>,
+    registerComponent(option: {
+        key: string
+        name: string
+        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[],
-        VFiles: VirtualFile[]
+        VDirectories?: VirtualDirectory[],
+        VFiles?: VirtualFile[],
+        ...args: any[]
     ) {
-        this.pluginsMap[key].func(VDirectories, VFiles)
+        this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args)
     }
 }
diff --git a/src/components/miaoDirectory/miaoDirectoryItemsContainer.vue b/src/components/miaoDirectory/miaoDirectoryItemsContainer.vue
index 7acca3d..bb2f1dd 100644
--- a/src/components/miaoDirectory/miaoDirectoryItemsContainer.vue
+++ b/src/components/miaoDirectory/miaoDirectoryItemsContainer.vue
@@ -1,22 +1,42 @@
 <template>
-    <div class="miao-directory-container-items" :style="{
-        backgroundColor:
-            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-    }">
-        <n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
-            <miao-lazy-div v-for="(dir) in showData_directory" :key="dir.id" min-height="50px">
-                <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)"
+    <div
+        class="miao-directory-container-items"
+        :style="{
+            backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+        }">
+        <n-scrollbar ref="scrollbarRef" style="max-height: 100%">
+            <miao-lazy-div
+                v-for="dir in showData_directory"
+                :key="dir.id"
+                min-height="50px">
+                <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">
-                <miaoDirectoryItem :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
+                v-for="file in showData_files"
+                :key="file.id"
+                min-height="50px">
+                <miaoDirectoryItem
+                    :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 usePluginCenter from '@/hooks/usePluginCenter';
+import { computed, ref } from 'vue'
+import usePluginCenter from '@/hooks/usePluginCenter'
+import { renderIcon } from '@/hooks/miaoTools'
 
 const pluginCenter = usePluginCenter()
 
@@ -51,60 +72,63 @@ const emit = defineEmits<{
 
 const scrollbarRef = ref()
 
-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 vFiles = items.filter(v => v.type === 'file')
-    const options = [
-        {
-            label: '重命名',
-            key: 'rename'
-        },
-        {
-            label: '删除',
-            key: 'delete'
-        },
-    ]
-    if (item.type === 'file') {
+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 vFiles = items.filter((v) => v.type === 'file')
+        const options = [
+            {
+                label: '重命名',
+                key: 'rename'
+            },
+            {
+                label: '删除',
+                key: 'delete'
+            }
+        ]
+        if (item.type === 'file') {
+            options.push(
+                ...[
+                    {
+                        label: '下载',
+                        key: 'download'
+                    }
+                ]
+            )
+        }
+        if (selected === false) {
+            options.push(
+                ...[
+                    {
+                        label: '多选:选择',
+                        key: 'select'
+                    }
+                ]
+            )
+        } else {
+            options.push(
+                ...[
+                    {
+                        label: '多选:取消',
+                        key: 'select'
+                    }
+                ]
+            )
+        }
         options.push(
-            ...[
-                {
-                    label: '下载',
-                    key: 'download'
-                }
-            ]
+            ...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
+                label: `插件:${v.name}`,
+                key: `plugin:${v.key}`,
+                icon: v.icon ? renderIcon(v.icon) : undefined
+            }))
         )
-    }
-    if (selected === false) {
-        options.push(
-            ...[
-                {
-                    label: '多选:选择',
-                    key: 'select'
-                }
-            ]
-        )
-    } else {
-        options.push(
-            ...[
-                {
-                    label: '多选:取消',
-                    key: 'select'
-                }
-            ]
-        )
-    }
-    options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
-        label: `插件:${v.name}`,
-        key: `plugin:${v.key}`
-    })))
-    return options
-})
-
+        return options
+    })
 
 const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
     emit('item-click', item)
@@ -118,9 +142,10 @@ const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
     emit('item-delete', item)
 }
 
-const handleItemDragStart = (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
-    emit('item-drag-start', _event, item)
-}
+const handleItemDragStart =
+    (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
+        emit('item-drag-start', _event, item)
+    }
 
 const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
     emit('item-rename', item)
@@ -130,19 +155,21 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
     emit('item-select', item)
 }
 
-const handleItemUsePlugin = (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
-    const items = [...props.selectedItem]
-    const selected = props.selectedItem.includes(item)
-    if (!selected) {
-        items.push(item)
+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 vFiles = items.filter((v) => v.type === 'file')
+        pluginCenter.usePlugin(plugin, vDirs, vFiles)
     }
-    const vDirs = items.filter(v => v.type === 'directory')
-    const vFiles = items.filter(v => v.type === 'file')
-    pluginCenter.usePlugin(plugin, vDirs, vFiles)
-}
 
-
-defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
+defineExpose({
+    scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
+})
 </script>
 
 <style scoped lang="scss">
@@ -151,4 +178,4 @@ defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
     flex: 1;
     min-height: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/miaoPopupInput.vue b/src/components/miaoPopupInput.vue
index 62b6ddc..53d8c93 100644
--- a/src/components/miaoPopupInput.vue
+++ b/src/components/miaoPopupInput.vue
@@ -1,83 +1,102 @@
 <template>
-  <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"
-        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"
-          :type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
-      </div>
-    </n-card>
-  </miao-mask>
+    <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"
+                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"
+                    :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 { NCard, NInput, NButton } from "naive-ui";
-import miaoMask from "./miaoMask.vue";
-import { InputProps } from "naive-ui";
+import { ref, nextTick } from 'vue'
+import { NCard, NInput, NButton } from 'naive-ui'
+import miaoMask from './miaoMask.vue'
+import { InputProps } from 'naive-ui'
 
-const showMask = ref(false);
-const inputValue = ref<string>("");
+const showMask = ref(false)
+const inputValue = ref<string>('')
 const _resolve = ref()
 
 type popupConfigType = {
-  title: string
-  content?: string
-  inputValue?: string,
-  inputProps?: InputProps
-  options: {
-    label: string
-    key: unknown
-    type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
-  }[]
+    title: string
+    content?: string
+    inputValue?: string
+    inputProps?: InputProps
+    options: {
+        label: string
+        key: unknown
+        type:
+            | 'default'
+            | 'tertiary'
+            | 'primary'
+            | 'success'
+            | 'info'
+            | 'warning'
+            | 'error'
+    }[]
 }
 
 const popupConfig = ref<popupConfigType>()
 
 const popup = async (config: popupConfigType) => {
-  popupConfig.value = config
-  inputValue.value = config.inputValue ?? ''
-  showMask.value = true
-  const key = await new Promise((resolve: (key: unknown) => unknown) => {
-    _resolve.value = resolve
-  })
-  const text = inputValue.value
-  showMask.value = false;
-  nextTick(() => {
-    inputValue.value = ''
-    _resolve.value = undefined
-  })
-  return {
-    text,
-    key
-  };
-};
+    popupConfig.value = config
+    inputValue.value = config.inputValue ?? ''
+    showMask.value = true
+    const key = await new Promise((resolve: (key: unknown) => unknown) => {
+        _resolve.value = resolve
+    })
+    const text = inputValue.value
+    showMask.value = false
+    nextTick(() => {
+        inputValue.value = ''
+        _resolve.value = undefined
+    })
+    return {
+        text,
+        key
+    }
+}
 
-defineExpose({ popup });
+defineExpose({ popup })
 </script>
 
 <style scoped lang="scss">
 .popup-card {
-  width: 80%;
+    width: 80%;
 
-  .popup-input {
-    margin-bottom: 10px;
-  }
-
-  .popup-button-container {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-
-    .popup-button-container-button {
-      margin-top: 3px;
-      &:not(:last-child) {
-        margin-right: 5px;
-      }
+    .popup-input {
+        margin-bottom: 10px;
+    }
+
+    .popup-button-container {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+
+        .popup-button-container-button {
+            margin-top: 3px;
+            &:not(:last-child) {
+                margin-right: 5px;
+            }
+        }
     }
-  }
 }
 </style>
diff --git a/src/hooks/init.ts b/src/hooks/init.ts
index 9c07cb3..358db3c 100644
--- a/src/hooks/init.ts
+++ b/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
+        }
+    })
 }
diff --git a/src/hooks/miaoTools.ts b/src/hooks/miaoTools.ts
index 47352c4..8d8b287 100644
--- a/src/hooks/miaoTools.ts
+++ b/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
+}
diff --git a/src/views/miaoDirectory.vue b/src/views/miaoDirectory.vue
index c142689..6e8a3fa 100644
--- a/src/views/miaoDirectory.vue
+++ b/src/views/miaoDirectory.vue
@@ -1,37 +1,59 @@
 <template>
-  <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"
-        :open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
-        @set-current-directory="setCurrentDirectory" @search="handleSearch" @menu-select="handleTopBarMenuSelect" />
+    <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"
+                :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"
-        :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-items
+                ref="miaoDirectoryItemRef"
+                :color="props.color"
+                :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"
-        @pick-files-upload="handlePickFilesUpload" />
+            <!-- 底部工具栏 -->
+            <miao-directory-bottom
+                :index="index"
+                @add-new-item="handleAddNewItem"
+                v-if="false"
+                @pick-files-upload="handlePickFilesUpload" />
 
-      <miao-mask v-model:show="showModel"></miao-mask>
-      <miao-popup-input ref="popupInput"></miao-popup-input>
-    </div>
-  </miao-drop-handler>
+            <miao-mask v-model:show="showModel"></miao-mask>
+            <miao-popup-input ref="popupInput"></miao-popup-input>
+        </div>
+    </miao-drop-handler>
 </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,13 +63,16 @@ 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,
-  DocumentText, ExtensionPuzzleOutline,
-  FileTray,
-  AddOutline,
-  CloudUploadOutline
+    CloseOutline,
+    SearchOutline,
+    FilterOutline,
+    CheckmarkDoneOutline,
+    DocumentText,
+    ExtensionPuzzleOutline,
+    FileTray,
+    AddOutline,
+    CloudUploadOutline
 } from '@vicons/ionicons5'
 import usePluginCenter from '@/hooks/usePluginCenter'
 
@@ -59,12 +84,12 @@ const miaoFetchApi = useMiaoFetchApi()
 const pluginCenter = usePluginCenter()
 
 const props = defineProps<{
-  color: string
-  id: number
+    color: string
+    id: number
 }>()
 
 const emit = defineEmits<{
-  exit: []
+    exit: []
 }>()
 
 const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
@@ -76,464 +101,477 @@ const showFiles = ref<boolean>(true)
 const miaoDirectoryItemRef = ref()
 
 class SelectedItem {
-  constructor() {
-    this._selectedItem = []
-  }
-  _selectedItem: (VirtualDirectory | VirtualFile)[]
-  push(item: VirtualDirectory | VirtualFile) {
-    this._selectedItem = [item, ...this._selectedItem]
-  }
-  remove(item: VirtualDirectory | VirtualFile) {
-    this._selectedItem = this._selectedItem.filter((v) => v !== item)
-  }
-  clear() {
-    this._selectedItem = []
-  }
-  // 保证内容仍然存在于dir中且各个元素不重复
-  get value() {
-    const _filterList = [
-      ...(currentDirectory.value?.directories ?? []),
-      ...(currentDirectory.value?.files ?? []),
-    ]
-    return uniq(this._selectedItem).filter((v) => {
-      if (currentDirectory.value === undefined) {
-        return false
-      }
-      // @ts-ignore
-      return _filterList.includes(v)
-    })
-  }
+    constructor() {
+        this._selectedItem = []
+    }
+    _selectedItem: (VirtualDirectory | VirtualFile)[]
+    push(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = [item, ...this._selectedItem]
+    }
+    remove(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = this._selectedItem.filter((v) => v !== item)
+    }
+    clear() {
+        this._selectedItem = []
+    }
+    // 保证内容仍然存在于dir中且各个元素不重复
+    get value() {
+        const _filterList = [
+            ...(currentDirectory.value?.directories ?? []),
+            ...(currentDirectory.value?.files ?? [])
+        ]
+        return uniq(this._selectedItem).filter((v) => {
+            if (currentDirectory.value === undefined) {
+                return false
+            }
+            // @ts-ignore
+            return _filterList.includes(v)
+        })
+    }
 }
 // 已选择的item，用于多选功能
 const selectedItem = reactive(new SelectedItem())
 
-const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
-  required: true,
-})
+const currentDirectories = defineModel<VirtualDirectory[]>(
+    'currentDirectories',
+    {
+        required: true
+    }
+)
 
 // 目前展示的Dir
 const currentDirectory = computed(() => {
-  return currentDirectories.value[0]
+    return currentDirectories.value[0]
 })
 
 // 当前组件在views中的序号
 const index = computed(() => {
-  return views.getIndex(props.id)
+    return views.getIndex(props.id)
 })
 
 // 用于展示的数据，后续会增加排序等操作
 const showData_directory = computed<VirtualDirectory[]>(() => {
-  if (showDirs.value === false) {
-    return []
-  }
-  let data = currentDirectory.value?.directories
-    ? [...currentDirectory.value?.directories]
-    : []
-  if (searchText.value !== '') {
-    data = data.filter(vd => vd.name.includes(searchText.value))
-  }
-  return data
+    if (showDirs.value === false) {
+        return []
+    }
+    let data = currentDirectory.value?.directories
+        ? [...currentDirectory.value?.directories]
+        : []
+    if (searchText.value !== '') {
+        data = data.filter((vd) => vd.name.includes(searchText.value))
+    }
+    return data
 })
 const showData_files = computed<VirtualFile[]>(() => {
-  if (showFiles.value === false) {
-    return []
-  }
-  let data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : []
-  if (searchText.value !== '') {
-    data = data.filter(vd => vd.name.includes(searchText.value))
-  }
-  return data
+    if (showFiles.value === false) {
+        return []
+    }
+    let data = currentDirectory.value?.files
+        ? [...currentDirectory.value?.files]
+        : []
+    if (searchText.value !== '') {
+        data = data.filter((vd) => vd.name.includes(searchText.value))
+    }
+    return data
 })
 
 const topBarMenuOption = computed(() => {
-  return [
-    {
-      label: '新建',
-      key: 'create',
-      icon: renderIcon(AddOutline)
-    },
-    {
-      label: '上传',
-      key: 'upload',
-      icon: renderIcon(CloudUploadOutline)
-    },
-    {
-      label: '搜索',
-      key: 'search',
-      icon: renderIcon(SearchOutline)
-    },
-    searchText.value !== '' ? {
-      label: '重置搜索',
-      key: 'searchReset',
-      icon: renderIcon(SearchOutline)
-    } : undefined,
-    selectedItem.value.length !== 0 ? {
-      label: '重置多选',
-      key: 'selectedItemReset',
-      icon: renderIcon(CheckmarkDoneOutline)
-    } : undefined,
-    {
-      label: '筛选',
-      key: 'filter',
-      children: [
+    return [
         {
-          label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
-          key: 'showDirs',
-          icon: renderIcon(FileTray)
+            label: '新建',
+            key: 'create',
+            icon: renderIcon(AddOutline)
         },
         {
-          label: `${showFiles.value ? '隐藏' : '显示'}文件`,
-          key: 'showFiles',
-          icon: renderIcon(DocumentText)
+            label: '上传',
+            key: 'upload',
+            icon: renderIcon(CloudUploadOutline)
         },
-      ],
-      icon: renderIcon(FilterOutline)
-    },
-    {
-      label: '插件',
-      key: 'plugin',
-      children: [
-        ...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
-          label: `${v.name}`,
-          key: `plugin:${v.key}`
-        })),
-      ],
-      icon: renderIcon(ExtensionPuzzleOutline)
-    },
-    {
-      label: '关闭',
-      key: 'close',
-      icon: renderIcon(CloseOutline)
-    },
-  ].filter(v => v !== undefined)
+        {
+            label: '搜索',
+            key: 'search',
+            icon: renderIcon(SearchOutline)
+        },
+        searchText.value !== ''
+            ? {
+                  label: '重置搜索',
+                  key: 'searchReset',
+                  icon: renderIcon(SearchOutline)
+              }
+            : undefined,
+        selectedItem.value.length !== 0
+            ? {
+                  label: '重置多选',
+                  key: 'selectedItemReset',
+                  icon: renderIcon(CheckmarkDoneOutline)
+              }
+            : undefined,
+        {
+            label: '筛选',
+            key: 'filter',
+            children: [
+                {
+                    label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
+                    key: 'showDirs',
+                    icon: renderIcon(FileTray)
+                },
+                {
+                    label: `${showFiles.value ? '隐藏' : '显示'}文件`,
+                    key: 'showFiles',
+                    icon: renderIcon(DocumentText)
+                }
+            ],
+            icon: renderIcon(FilterOutline)
+        },
+        {
+            label: '插件',
+            key: 'plugin',
+            children: [
+                ...pluginCenter
+                    .getUsablePlugin([currentDirectories.value[0]], [])
+                    .map((v) => ({
+                        label: `${v.name}`,
+                        key: `plugin:${v.key}`,
+                        icon: v.icon ? renderIcon(v.icon) : undefined
+                    }))
+            ],
+            icon: renderIcon(ExtensionPuzzleOutline)
+        },
+        {
+            label: '关闭',
+            key: 'close',
+            icon: renderIcon(CloseOutline)
+        }
+    ].filter((v) => v !== undefined)
 })
 
-const renderIcon = (icon: any) => {
-  return () => {
-    return h(NIcon, null, {
-      default: () => h(icon)
-    })
-  }
-}
-
 // 设置显示的dir
 const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
-  // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
-  if (virtualDirectory.files === undefined || virtualDirectory.directories === undefined) {
-    await virtualDirectory.update()
-  } else {
-    virtualDirectory.update()
-  }
-  if (currentDirectories.value[0] !== virtualDirectory) {
-    selectedItem.clear()
-    handleSearchReset()
-    nextTick(() => {
-      miaoDirectoryItemRef.value.scrollTo({
-        top: 0,
-        behavior: "instant"
-      })
-    })
-  }
-  currentDirectories.value[0] = virtualDirectory
+    // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
+    if (
+        virtualDirectory.files === undefined ||
+        virtualDirectory.directories === undefined
+    ) {
+        await virtualDirectory.update()
+    } else {
+        virtualDirectory.update()
+    }
+    if (currentDirectories.value[0] !== virtualDirectory) {
+        selectedItem.clear()
+        handleSearchReset()
+        nextTick(() => {
+            miaoDirectoryItemRef.value.scrollTo({
+                top: 0,
+                behavior: 'instant'
+            })
+        })
+    }
+    currentDirectories.value[0] = virtualDirectory
 }
 
 const reload = () => {
-  setCurrentDirectory(currentDirectory.value)
+    setCurrentDirectory(currentDirectory.value)
 }
 
 const openUrl = (
-  href: string,
-  config?: {
-    download?: string
-    target?: string
-  },
+    href: string,
+    config?: {
+        download?: string
+        target?: string
+    }
 ) => {
-  let { target, download } = config ?? {}
-  const a = document.createElement('a')
-  a.setAttribute('href', href)
-  a.setAttribute('target', target ?? '_blank')
-  download && a.setAttribute('download', download)
-  a.click()
+    let { target, download } = config ?? {}
+    const a = document.createElement('a')
+    a.setAttribute('href', href)
+    a.setAttribute('target', target ?? '_blank')
+    download && a.setAttribute('download', download)
+    a.click()
 }
 
 const handleTopBarMenuSelect = (key: string) => {
-  if (key === 'close') {
-    emit('exit')
-  } else if (key === 'search') {
-    handleSearch()
-  } else if (key === 'upload') {
-    handlePickFilesUpload()
-  } else if (key === 'create') {
-    handleAddNewItem()
-  } else if (key === 'searchReset') {
-    handleSearchReset()
-  } else if (key === 'selectedItemReset') {
-    selectedItem.clear()
-  } else if (key === 'showDirs') {
-    showDirs.value = !showDirs.value
-  } else if (key === 'showFiles') {
-    showFiles.value = !showFiles.value
-  } else if (key.startsWith('plugin:')) {
-    const pluginName = key.split(':')[1]
-    pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
-  }
+    if (key === 'close') {
+        emit('exit')
+    } else if (key === 'search') {
+        handleSearch()
+    } else if (key === 'upload') {
+        handlePickFilesUpload()
+    } else if (key === 'create') {
+        handleAddNewItem()
+    } else if (key === 'searchReset') {
+        handleSearchReset()
+    } else if (key === 'selectedItemReset') {
+        selectedItem.clear()
+    } else if (key === 'showDirs') {
+        showDirs.value = !showDirs.value
+    } else if (key === 'showFiles') {
+        showFiles.value = !showFiles.value
+    } else if (key.startsWith('plugin:')) {
+        const pluginName = key.split(':')[1]
+        pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
+    }
 }
 
 const handleBack = () => {
-  if (currentDirectory.value?.parent) {
-    setCurrentDirectory(currentDirectory.value.parent)
-  }
+    if (currentDirectory.value?.parent) {
+        setCurrentDirectory(currentDirectory.value.parent)
+    }
 }
 
 const handleReload = () => {
-  reload()
+    reload()
 }
 
 const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
-  if (selectedItem.value.length > 0) {
-    handleItemSelect(item)
-  } else {
-    if (item.type === 'file') {
-      openUrl(`${baseUrl}${api.get}${item.path}`)
-    } else if (item.type === 'directory') {
-      setCurrentDirectory(item)
+    if (selectedItem.value.length > 0) {
+        handleItemSelect(item)
+    } else {
+        if (item.type === 'file') {
+            openUrl(`${baseUrl}${api.get}${item.path}`)
+        } else if (item.type === 'directory') {
+            setCurrentDirectory(item)
+        }
     }
-  }
 }
 
 const handleItemDownload = (item: VirtualFile) => {
-  openUrl(`${baseUrl}${api.get}${item.path}`, {
-    download: item.name,
-  })
-}
-
-const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
-  for (let item of uniq([...selectedItem.value, _item])) {
-    ; (async () => {
-      const { response } = miaoFetchApi.delete(item, {
-        retry: 5,
-      })
-      // todo: 将删除事件统一用一个事件管理中心管理
-      const id = (await response).eventId
-      const { response: res } = miaoFetchApi.query(id)
-      const eventResult = await res
-      if (eventResult.status === 'success') {
-        reload()
-      }
-    })()
-  }
-}
-
-const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
-  const popupRes = await popupInput.value?.popup({
-    title: '重命名',
-    inputValue: item.name,
-    inputProps: {
-      placeholder: item.name,
-    },
-    options: [
-      {
-        label: '取消',
-        key: false,
-        type: 'error',
-      },
-      {
-        label: '确认',
-        key: true,
-        type: 'success',
-      },
-    ],
-  })
-  if (popupRes?.key === false) {
-    return
-  }
-  const newName = popupRes?.text
-  if (!newName) {
-    return
-  }
-  const { response } = miaoFetchApi.rename(item, newName, {
-    retry: 5,
-  })
-  const id = (await response).eventId
-  const { response: res } = miaoFetchApi.query(id)
-  const eventResult = await res
-  if (eventResult.status === 'success') {
-    reload()
-  }
-}
-
-const handleItemDragStart = async (
-  _event: DragEvent,
-  item: VirtualDirectory | VirtualFile,
-) => {
-  const items = uniq([item, ...selectedItem.value])
-  dataBus.set('dragData_vFiles', items.filter((v) => v.type === 'file'))
-  dataBus.set('dragData_vDirectory', items.filter((v) => v.type === 'directory'))
-  // selectedItem.clear()
-}
-
-const handleDropFiles = async (files: File[]) => {
-  currentDirectory.value &&
-    uploadQueue.push(files, currentDirectory.value, {
-      onFinish() {
-        reload()
-      },
+    openUrl(`${baseUrl}${api.get}${item.path}`, {
+        download: item.name
     })
 }
 
-const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
-  // 不能移到自己或自己的子文件夹内
-  for (let vDir of vDirs) {
-    if (currentDirectory.value.getParents.includes(vDir)) {
-      return
+const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
+    for (let item of uniq([...selectedItem.value, _item])) {
+        ;(async () => {
+            const { response } = miaoFetchApi.delete(item, {
+                retry: 5
+            })
+            // todo: 将删除事件统一用一个事件管理中心管理
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+            }
+        })()
     }
-    if (vDir.parent === currentDirectory.value) {
-      return
+}
+
+const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
+    const popupRes = await popupInput.value?.popup({
+        title: '重命名',
+        inputValue: item.name,
+        inputProps: {
+            placeholder: item.name
+        },
+        options: [
+            {
+                label: '取消',
+                key: false,
+                type: 'error'
+            },
+            {
+                label: '确认',
+                key: true,
+                type: 'success'
+            }
+        ]
+    })
+    if (popupRes?.key === false) {
+        return
     }
-  }
-  for (let dir of vDirs) {
-    ; (async () => {
-      const _from = dir.parent
-      const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
-      const id = (await response).eventId
-      const { response: res } = miaoFetchApi.query(id)
-      const eventResult = await res
-      if (eventResult.status === 'success') {
+    const newName = popupRes?.text
+    if (!newName) {
+        return
+    }
+    const { response } = miaoFetchApi.rename(item, newName, {
+        retry: 5
+    })
+    const id = (await response).eventId
+    const { response: res } = miaoFetchApi.query(id)
+    const eventResult = await res
+    if (eventResult.status === 'success') {
         reload()
-        _from && _from.update()
-      }
-    })()
-  }
+    }
+}
+
+const handleItemDragStart = async (
+    _event: DragEvent,
+    item: VirtualDirectory | VirtualFile
+) => {
+    const items = uniq([item, ...selectedItem.value])
+    dataBus.set(
+        'dragData_vFiles',
+        items.filter((v) => v.type === 'file')
+    )
+    dataBus.set(
+        'dragData_vDirectory',
+        items.filter((v) => v.type === 'directory')
+    )
+    // selectedItem.clear()
+}
+
+const handleDropFiles = async (files: File[]) => {
+    currentDirectory.value &&
+        uploadQueue.push(files, currentDirectory.value, {
+            onFinish() {
+                reload()
+            }
+        })
+}
+
+const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
+    // 不能移到自己或自己的子文件夹内
+    for (let vDir of vDirs) {
+        if (currentDirectory.value.getParents.includes(vDir)) {
+            return
+        }
+        if (vDir.parent === currentDirectory.value) {
+            return
+        }
+    }
+    for (let dir of vDirs) {
+        ;(async () => {
+            const _from = dir.parent
+            const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+                _from && _from.update()
+            }
+        })()
+    }
 }
 
 const handleDropVirtualFiles = (files: VirtualFile[]) => {
-  if (files[0].parent === currentDirectory.value) {
-    return
-  }
-  for (let file of files) {
-    ; (async () => {
-      const _from = file.parent
-      const { response } = miaoFetchApi.cut(file, currentDirectory.value)
-      const id = (await response).eventId
-      const { response: res } = miaoFetchApi.query(id)
-      const eventResult = await res
-      if (eventResult.status === 'success') {
-        reload()
-        _from.update()
-      }
-    })()
-  }
+    if (files[0].parent === currentDirectory.value) {
+        return
+    }
+    for (let file of files) {
+        ;(async () => {
+            const _from = file.parent
+            const { response } = miaoFetchApi.cut(file, currentDirectory.value)
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+                _from.update()
+            }
+        })()
+    }
 }
 
 const handlePickFilesUpload = async () => {
-  const files = await filePicker({
-    multiple: true,
-  })
-  const _currDir = currentDirectory.value
-  uploadQueue.push(files, _currDir, {
-    onFinish() {
-      _currDir.update()
-    },
-  })
+    const files = await filePicker({
+        multiple: true
+    })
+    const _currDir = currentDirectory.value
+    uploadQueue.push(files, _currDir, {
+        onFinish() {
+            _currDir.update()
+        }
+    })
 }
 
 const handleAddNewItem = async () => {
-  const popupRes = await popupInput.value?.popup({
-    title: '新建文件/文件夹',
-    inputProps: {
-      placeholder: '',
-    },
-    options: [
-      {
-        label: '取消',
-        key: 'cancel',
-        type: 'error',
-      },
-      {
-        label: '文件',
-        key: 'file',
-        type: 'success',
-      },
-      {
-        label: '文件夹',
-        key: 'dir',
-        type: 'success',
-      },
-    ],
-  })
-  // todo: 上传前如重名文件夹等等的错误提前检查
-  if (popupRes?.key === 'cancel' || popupRes?.text === '') {
-    return
-  }
-  const _currDir = currentDirectory.value
-  const name = popupRes?.text
-  if (!name) {
-    return
-  }
-  // @ts-ignore
-  const opType: 'file' | 'dir' = popupRes?.key
-  if (opType === 'dir') {
-    const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
-    if (res.message === 'success') {
-      _currDir.update()
+    const popupRes = await popupInput.value?.popup({
+        title: '新建文件/文件夹',
+        inputProps: {
+            placeholder: ''
+        },
+        options: [
+            {
+                label: '取消',
+                key: 'cancel',
+                type: 'error'
+            },
+            {
+                label: '文件',
+                key: 'file',
+                type: 'success'
+            },
+            {
+                label: '文件夹',
+                key: 'dir',
+                type: 'success'
+            }
+        ]
+    })
+    // todo: 上传前如重名文件夹等等的错误提前检查
+    if (popupRes?.key === 'cancel' || popupRes?.text === '') {
+        return
     }
-  } else {
-    const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
-    const res = await response
-    if (res.message === 'success') {
-      _currDir.update()
+    const _currDir = currentDirectory.value
+    const name = popupRes?.text
+    if (!name) {
+        return
+    }
+    // @ts-ignore
+    const opType: 'file' | 'dir' = popupRes?.key
+    if (opType === 'dir') {
+        const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
+        if (res.message === 'success') {
+            _currDir.update()
+        }
+    } else {
+        const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
+        const res = await response
+        if (res.message === 'success') {
+            _currDir.update()
+        }
     }
-  }
 }
 
 const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
-  if (!selectedItem.value.includes(item)) {
-    selectedItem.push(item)
-  } else {
-    selectedItem.remove(item)
-  }
+    if (!selectedItem.value.includes(item)) {
+        selectedItem.push(item)
+    } else {
+        selectedItem.remove(item)
+    }
 }
 
 const handleSearch = async () => {
-  const popupRes = await popupInput.value?.popup({
-    title: '搜索当前文件夹',
-    inputValue: searchText.value,
-    inputProps: {
-      placeholder: '',
-    },
-    options: [
-      {
-        label: '取消',
-        key: 'cancel',
-        type: 'default',
-      },
-      {
-        label: '重置',
-        key: 'reset',
-        type: 'default',
-      },
-      {
-        label: '搜索',
-        key: 'search',
-        type: 'success',
-      },
-    ],
-  })
-  if (!popupRes) {
-    return
-  }
-  if (popupRes.key === 'search') {
-    searchText.value = popupRes.text
-  } else if (popupRes.key === 'reset') {
-    handleSearchReset()
-  }
+    const popupRes = await popupInput.value?.popup({
+        title: '搜索当前文件夹',
+        inputValue: searchText.value,
+        inputProps: {
+            placeholder: ''
+        },
+        options: [
+            {
+                label: '取消',
+                key: 'cancel',
+                type: 'default'
+            },
+            {
+                label: '重置',
+                key: 'reset',
+                type: 'default'
+            },
+            {
+                label: '搜索',
+                key: 'search',
+                type: 'success'
+            }
+        ]
+    })
+    if (!popupRes) {
+        return
+    }
+    if (popupRes.key === 'search') {
+        searchText.value = popupRes.text
+    } else if (popupRes.key === 'reset') {
+        handleSearchReset()
+    }
 }
 
 const handleSearchReset = () => {
-  searchText.value = ''
+    searchText.value = ''
 }
 onMounted(async () => {
-  await setCurrentDirectory(currentDirectory.value)
+    await setCurrentDirectory(currentDirectory.value)
 })
 </script>
 
@@ -542,12 +580,12 @@ $top-height: 30px;
 $bottom-bar-height: 60px;
 
 .miao-directory-item-container {
-  position: relative;
-  height: 100%;
-  width: inherit;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-width: 170px;
+    position: relative;
+    height: 100%;
+    width: inherit;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-width: 170px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/miaoImages.vue b/src/views/miaoImages.vue
index 37817f9..2879341 100644
--- a/src/views/miaoImages.vue
+++ b/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 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" />
+                <div
+                    class="miaoImage-container"
+                    v-for="imageGroup in imageGroupList">
+                    <div class="miaoImage-container-day">
+                        <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">
-                <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
+                :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"
+                    @click="handleActiveImageForward" />
             </miao-mask>
         </div>
     </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
-import miaoMask from '@/components/miaoMask.vue';
-import miaoDropHandler from '@/components/miaoDropHandler.vue';
+import miaoMask from '@/components/miaoMask.vue'
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { uniq } from 'lodash';
-import { nextTick, onMounted, ref } from 'vue'
-import { NScrollbar } from 'naive-ui';
+import { uniq } from 'lodash'
+import { computed, nextTick, onMounted, ref } from 'vue'
+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', {
-    required: true
-})
+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 groupByDay = (array: VirtualFile[]) => {
+    const result = []
+    let currentDay = null
+    let currentGroup: VirtualFile[] = []
+
+    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
+        })
+    }
+
+    return result
+}
 
 const scrollToActiveImage = () => {
-    const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
+    const dom = rootRef.value?.querySelector(
+        '.miaoImage-container-row-image-active'
+    )
     NScrollbarRef.value.scrollTo({
         top: dom.offsetTop - 30,
-        behavior: "smooth"
+        behavior: 'smooth'
     })
 }
 
-const handleActiveImageIndexBack = (e: any) => {
+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;
diff --git a/src/views/miaoPDF.vue b/src/views/miaoPDF.vue
index e592561..e92718c 100644
--- a/src/views/miaoPDF.vue
+++ b/src/views/miaoPDF.vue
@@ -1,44 +1,74 @@
 <template>
-    <div class="miao-container">
-        <div class="miao-container-topBar">
-            <div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</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 ref="pdfEl" class="miao-container-pdf-content" :style="{ width: `calc( 100% - ${pdfMargin}px)`}">
+    <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
+                    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-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' :
-            `渲染进度：${canvasList.length}/${pdfPageCount}` }}</div>
-    </div>
+            <NScrollbar>
+                <div
+                    class="miao-container-pdf"
+                    :style="{
+                        alignItems: pdfMargin < 0 ? 'baseline' : 'center'
+                    }">
+                    <div
+                        ref="pdfEl"
+                        class="miao-container-pdf-content"
+                        :style="{
+                            width: `calc( 100% - ${pdfMargin}px)`
+                        }"></div>
+                </div>
+            </NScrollbar>
+        </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>