feat: 1.拆分miaoDirectory，右上角退出按钮改为小菜单，增加搜索，屏蔽文件夹等功能。2.更新readme

README.md

@@ -1,11 +1,13 @@
-todo: 标签页，miaoDirectory切换动画                      [finish]
-todo: 重构virtualPage，所有page以插件形式使用             [finish]
-todo: miaoDirectory插件化，为后续插件功能开发做准备        [finish]
-todo: miaoPopupInput, 弹出一个输入框                     [finish]
-todo: miaoDirectory的重命名功能                          [finish]
-todo: miaoDirectory的剪切功能                            [finish]
-todo: miaoDirectory的上传按钮                            [finish]
-todo: miaoDirectory的新建文件/文件夹功能                  [finish]
-todo: miaoDirectory的多选功能                            [finish]
-todo: VirtualDirectory更新时更新文件信息
-todo: miaoDirectory的复制文件/文件夹功能
+## TODO list:
+
+| 任务 | 状态 | 
+|---|---|
+| 拆分miaoDirectory | ✅ |
+| 完善视频插件 | ✅ |
+| 完善PDF插件 | ✅ |
+| 完善Code插件 | ✅ |
+| 实现miaoDirectory的搜索功能 | ❌ |
+| 完善miaoDirectory的搜索功能 | ❌ |
+| 完善图片浏览插件 | ❌ |
+| VirtualDirectory更新时更新文件信息 | ❌ |
+| miaoDirectory的复制文件/文件夹功能 | ❌ |

src/components/miaoDirectory/miaoDirectoryBottom.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="miao-directory-container-bottom" :style="{
+      backgroundColor:
+        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+    }">
+      <div class="container-bottom-item">
+        <div class="container-bottom-item-icon">
+          <add-outline :style="{
+            color:
+              index % 2 === 0
+                ? 'rgb(0 0 0)'
+                : 'rgb(255 255 255)'
+          }" @click="$emit('add-new-item')" />
+        </div>
+      </div>
+      <div class="container-bottom-item">
+        <div class="container-bottom-item-icon">
+          <cloud-upload-outline :style="{
+            color:
+              index % 2 === 0
+                ? 'rgb(0 0 0)'
+                : 'rgb(255 255 255)'
+          }" @click="$emit('pick-files-upload')" />
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
+  defineProps<{
+    index: number
+  }>()
+  
+  const emit = defineEmits<{
+    'add-new-item': []
+    'pick-files-upload': []
+  }>()
+  </script>
+  
+  <style scoped lang="scss">
+  .miao-directory-container-bottom {
+    height: 60px;
+    background-color: bisque;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    user-select: none;
+    box-shadow: 0px 1px 10px #888888;
+    z-index: 2;
+  
+    .container-bottom-item {
+      height: 40px;
+      width: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+  
+      .container-bottom-item-icon {
+        svg {
+          width: 30px;
+          height: 30px;
+          transition: width 0.3s ease;
+          transition: height 0.3s ease;
+          cursor: pointer;
+        }
+  
+        &:hover {
+          svg {
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+    }
+  }
+  </style>

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -138,6 +138,7 @@ const dropDownOptions = computed(() => {
 })
 
 // 是不是可以直接在这里面实现？
+// 应该将所有事件emit出去才对
 const handleDropdownSelect = (key: string) => {
     if (key === 'rename') {
         emit('rename')

src/components/miaoDirectory/miaoDirectoryItemsContainer.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="miao-directory-container-items" :style="{
+        backgroundColor:
+            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+    }">
+        <n-scrollbar ref="scrollbarRef">
+            <transition-group name="dirItem">
+                <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :disableLazy="index < 20"
+                    min-height="50px">
+                    <miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem"
+                        @delete="handleItemDelete(dir)" @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
+                        @rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
+                </miao-lazy-div>
+            </transition-group>
+            <transition-group name="dirItem">
+                <miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
+                    min-height="50px">
+                    <miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem"
+                        @click="handleItemClick(file)" @download="handleItemDownload(file)"
+                        @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
+                        @rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
+                </miao-lazy-div>
+            </transition-group>
+        </n-scrollbar>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
+import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
+
+const props = defineProps<{
+    color: string
+    index: number
+    showData_directory: VirtualDirectory[]
+    showData_files: VirtualFile[]
+    selectedItem: (VirtualFile | VirtualDirectory)[]
+}>()
+
+const emit = defineEmits<{
+    'item-click': [item: VirtualDirectory | VirtualFile]
+    'item-download': [item: VirtualFile]
+    'item-delete': [item: VirtualDirectory | VirtualFile]
+    'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
+    'item-rename': [item: VirtualDirectory | VirtualFile]
+    'item-select': [item: VirtualDirectory | VirtualFile]
+}>()
+
+const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-click', item)
+}
+
+const handleItemDownload = (item: VirtualFile) => {
+    emit('item-download', item)
+}
+
+const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-delete', item)
+}
+
+const handleItemDragStart = (_event: DragEvent, item: VirtualDirectory | VirtualFile) => {
+    emit('item-drag-start', _event, item)
+}
+
+const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-rename', item)
+}
+
+const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-select', item)
+}
+</script>
+
+<style scoped lang="scss">
+.miao-directory-container-items {
+    width: 100%;
+    height: calc(100% - 30px - 60px);
+}
+</style>

src/components/miaoDirectory/miaoDirectoryTop.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="miao-directory-container-top" :style="{
+        backgroundColor:
+            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+    }">
+        <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
+        <div class="container-top-breadcrumb">
+            <div class="container-top-breadcrumb-container">
+                <n-breadcrumb separator=">" style="margin-left: 5px">
+                    <n-breadcrumb-item :clickable="false">
+                        <n-icon size="18">
+                            <CloudOutline />
+                        </n-icon>
+                    </n-breadcrumb-item>
+                    <n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
+                        @click="handleClickBreadcrumbItem(dir)" :clickable="true">
+                        <div>{{ dir.name }}</div>
+                    </n-breadcrumb-item>
+                </n-breadcrumb>
+            </div>
+        </div>
+        <div class="container-top-tools">
+            <n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
+                <ChevronBackOutline />
+            </n-icon>
+            <n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
+                <ReloadOutline class="container-top-tools-item-reload" />
+            </n-icon>
+            <n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
+                <n-icon class="container-top-tools-item" size="14">
+                    <EllipsisVertical />
+                </n-icon>
+            </n-dropdown>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
+import {
+    CloudOutline,
+    ChevronBackOutline,
+    ReloadOutline,
+    EllipsisVertical,
+} from '@vicons/ionicons5'
+import VirtualDirectory from '@/class/VirtualDirectory'
+
+const props = defineProps<{
+    color: string;
+    index: number
+    currentDirectory: VirtualDirectory | undefined;
+    openMenuOption: {
+        key: string,
+        label: string,
+        [key: string]: any,
+    }[]
+}>()
+
+const emit = defineEmits<{
+    back: [],
+    reload: [],
+    menuSelect: [key: string]
+    'set-current-directory': [virtualDirectory: VirtualDirectory]
+}>()
+
+const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
+    emit('set-current-directory', virtualDirectory)
+}
+
+</script>
+
+<style scoped lang="scss">
+.miao-directory-container-top {
+    height: 30px;
+    width: 100%;
+    user-select: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    background-color: #f1f1f1;
+
+    .container-top-colorfulBar {
+        height: 70%;
+        width: 5px;
+        margin-left: 10px;
+        border-radius: 3px 0 0 3px;
+    }
+
+    .container-top-breadcrumb {
+        position: relative;
+        height: 70%;
+        width: calc(100% - 95px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        // overflow: hidden;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        background-color: #ffffff;
+        padding: 0 5px;
+        border-radius: 0 3px 3px 0;
+
+        .container-top-breadcrumb-container {
+            position: absolute;
+            height: 100%;
+            right: 0;
+            top: 0;
+            min-width: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+        }
+    }
+
+    .container-top-tools {
+        position: relative;
+        height: 100%;
+        // width: 70px;
+        padding: 0 5px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .container-top-tools-item {
+            width: 20px;
+            height: 20px;
+            margin: 0 1px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #ffffff00;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+            cursor: pointer;
+
+            .container-top-tools-item-reload {
+                transition: transform 0.6s ease-in-out;
+            }
+
+            &:hover {
+                background-color: rgba(128, 128, 128, 0.4);
+            }
+
+            &:active .container-top-tools-item-reload {
+                transform: rotate(360deg);
+            }
+        }
+
+    }
+}
+</style>

src/views/miaoImages.vue

@@ -66,9 +66,8 @@ const activeImageIndex = ref(-1)
 
 const scrollToActiveImage = () => {
     const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
-    console.log({ dom })
     NScrollbarRef.value.scrollTo({
-        top: dom?.offsetTop - 30 ?? 0,
+        top: dom.offsetTop - 30,
         behavior: "smooth"
     })
 }