feat: 屏蔽miaoDirectory底部工具栏，更新readme计划书

README.md

@@ -1,13 +1,15 @@
 ## TODO list:
 
-| 任务 | 状态 | 
+| 计划 | 状态 | 
 |---|---|
 | 拆分miaoDirectory | ✅ |
 | 完善视频插件 | ✅ |
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
-| 实现miaoDirectory的搜索功能 | ❌ |
+| 实现miaoDirectory的搜索功能 | ✅ |
 | 完善miaoDirectory的搜索功能 | ❌ |
+| 实现miaoDirectory的排序功能 | ❌ |
 | 完善图片浏览插件 | ❌ |
 | VirtualDirectory更新时更新文件信息 | ❌ |
+| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
 | miaoDirectory的复制文件/文件夹功能 | ❌ |

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h, onMounted, reactive, ref, shallowRef } from 'vue'
-import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
+import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
 import {
     EyeOffOutline,
     EyeOutline,
@@ -88,11 +88,11 @@ const openMenuOption = [
     }
 ]
 
-const handleMenuSelect = (key: string) => {
+const handleMenuSelect = async (key: string) => {
     if (key === 'share') {
         showModal.value = true
         modalData.value = {
-            component: NQrCode,
+            component: (await import('naive-ui/es/qr-code')).NQrCode,
             props: {
                 value: baseUrl,
                 size: 300,
@@ -114,49 +114,31 @@ onMounted(() => {
             <n-scrollbar x-scrollable>
                 <div class="tabs-container">
                     <transition-group name="tab">
-                        <div
+                        <div class="tab" v-for="(view, index) of views._views" :key="view.uid">
-                            class="tab"
+                            <span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
-                            v-for="(view, index) of views._views"
-                            :key="view.uid">
-                            <span
-                                class="tab-title"
-                                :title="view.title"
-                                @click="handleClickTitle(index)">
                                 {{
                                     view.title.length > 5 && 0
                                         ? `${view.title.substring(0, 5)}...`
                                         : view.title
                                 }}
                             </span>
-                            <div
+                            <div class="tab-point" :style="{ backgroundColor: view.color }"></div>
-                                class="tab-point"
-                                :style="{ backgroundColor: view.color }"></div>
                             <div class="tab-control">
-                                <n-icon
+                                <n-icon class="tag-control-icon icon" @click="view.switchShow()">
-                                    class="tag-control-icon icon"
+                                    <EyeOutline v-show="view.visible" class="icon-inner" />
-                                    @click="view.switchShow()">
+                                    <EyeOffOutline v-show="!view.visible" class="icon-inner" />
-                                    <EyeOutline
-                                        v-show="view.visible"
-                                        class="icon-inner" />
-                                    <EyeOffOutline
-                                        v-show="!view.visible"
-                                        class="icon-inner" />
                                 </n-icon>
-                                <n-icon
+                                <n-icon class="tag-control-icon icon" @click="
-                                    class="tag-control-icon icon"
+                                    createView(
-                                    @click="
+                                        view.component,
-                                        createView(
+                                        view.currentDirectories,
-                                            view.component,
+                                        view.currentFiles,
-                                            view.currentDirectories,
+                                        index + 1
-                                            view.currentFiles,
+                                    )
-                                            index + 1
-                                        )
                                     ">
                                     <CopyOutline />
                                 </n-icon>
-                                <n-icon
+                                <n-icon class="tag-control-icon icon" @click="deleteView(index)">
-                                    class="tag-control-icon icon"
-                                    @click="deleteView(index)">
                                     <CloseOutline class="icon-inner" />
                                 </n-icon>
                             </div>
@@ -166,10 +148,7 @@ onMounted(() => {
             </n-scrollbar>
             <div class="view-controller-menu">
                 <div class="view-controller-menu-item">
-                    <n-dropdown
+                    <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
-                        trigger="click"
-                        :options="openMenuOption"
-                        @select="handleMenuSelect">
                         <n-icon class="icon">
                             <EllipsisVertical class="icon-inner" />
                         </n-icon>
@@ -179,17 +158,10 @@ onMounted(() => {
         </div>
         <div class="view-container">
             <transition-group name="page">
-                <div
+                <div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
-                    class="view-container-item"
-                    v-for="(view, index) of views._views"
-                    v-show="view.visible"
                     :key="view.uid">
-                    <component
+                    <component :is="view.component" v-model:current-directories="view.currentDirectories"
-                        :is="view.component"
+                        v-model:current-files="view.currentFiles" :id="view.uid" :color="view.color"
-                        v-model:current-directories="view.currentDirectories"
-                        v-model:current-files="view.currentFiles"
-                        :id="view.uid"
-                        :color="view.color"
                         @exit="deleteView(index)"></component>
                 </div>
             </transition-group>
@@ -197,10 +169,8 @@ onMounted(() => {
     </div>
     <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
     <MiaoMask v-model:show="showModal" @click="showModal = false">
-        <component
+        <component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
-            @click="(e:any) => e.stopPropagation()"
+        </component>
-            :is="modalData?.component"
-            v-bind="modalData?.props"></component>
     </MiaoMask>
 </template>
 
@@ -246,6 +216,7 @@ $tag-width: 170px;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
+
                     span {
                         user-select: none;
                         cursor: pointer;
@@ -333,7 +304,7 @@ $tag-width: 170px;
         .view-container-item {
             flex: 1;
             height: 100%;
-            min-width: 200px;
+            min-width: 180px;
         }
 
         &::-webkit-scrollbar {
@@ -363,6 +334,7 @@ $tag-width: 170px;
 .view {
     .view-controller {
         .tabs-container {
+
             .tab-move,
             .tab-enter-active {
                 transition: all 0.2s ease;

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -7,7 +7,7 @@
                 <div class="item-main-info">
                     <div class="item-main-info-name">
                         <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-                        <n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
+                        <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
                     </div>
                     <div class="item-main-info-date" v-if="time">
                         {{ time }}
@@ -238,7 +238,7 @@ onMounted(() => {
 .miao-item {
     cursor: pointer;
     width: calc(100% - 20px);
-    min-width: 170px;
+    // min-width: 170px;
     // aspect-ratio: 66/9;
     height: 50px;
     position: relative;
@@ -276,7 +276,7 @@ onMounted(() => {
         .item-main-info {
             margin-left: 10px;
             height: 100%;
-            width: calc( 100% - 10px );
+            width: calc(100% - 10px);
             display: flex;
             flex-direction: column;
 

src/components/miaoDirectory/miaoDirectoryItemsContainer.vue

@@ -3,15 +3,13 @@
         backgroundColor:
             index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
     }">
-        <n-scrollbar ref="scrollbarRef">
+        <n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
-            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :disableLazy="index < 20"
+            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" min-height="50px">
-                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>
-            <miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
+            <miao-lazy-div v-for="(file) in showData_files" :key="file.uid" min-height="50px">
-                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)"
@@ -77,6 +75,7 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
 <style scoped lang="scss">
 .miao-directory-container-items {
     width: 100%;
-    height: calc(100% - 30px - 60px);
+    flex: 1;
+    min-height: 0;
 }
 </style>

src/components/miaoDropHandler.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
+    <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
-        class="container"
-        @dragover="handleDragOver"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop">
         <slot></slot>
         <miao-mask v-model:show="showMask"></miao-mask>
     </div>
@@ -63,8 +59,11 @@ const removeDirectory = async (files: File[]) => {
 }
 
 const handleDragOver = async (event: DragEvent) => {
-    showMask.value += 1
     event.preventDefault()
+    if (showMask.value === 1) {
+        return
+    }
+    showMask.value = 1
 }
 
 const handleDragLeave = async () => {

src/views/miaoDirectory.vue

@@ -14,7 +14,7 @@
         @item-drag-start="handleItemDragStart" @item-rename="handleItemRename" @item-select="handleItemSelect" />
 
       <!-- 底部工具栏 -->
-      <miao-directory-bottom :index="index" @add-new-item="handleAddNewItem"
+      <miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
         @pick-files-upload="handlePickFilesUpload" />
 
       <miao-mask v-model:show="showModel"></miao-mask>
@@ -44,8 +44,10 @@ import MiaoDropHandler from '@/components/miaoDropHandler.vue'
 import { NIcon } from 'naive-ui'
 import {
   CloseOutline, SearchOutline, FilterOutline, CheckmarkDoneOutline,
-  DocumentText,
+  DocumentText, ExtensionPuzzleOutline,
-  FileTray
+  FileTray,
+  AddOutline,
+  CloudUploadOutline
 } from '@vicons/ionicons5'
 import usePluginCenter from '@/hooks/usePluginCenter'
 
@@ -145,6 +147,16 @@ const showData_files = computed<VirtualFile[]>(() => {
 
 const topBarMenuOption = computed(() => {
   return [
+    {
+      label: '新建',
+      key: 'create',
+      icon: renderIcon(AddOutline)
+    },
+    {
+      label: '上传',
+      key: 'upload',
+      icon: renderIcon(CloudUploadOutline)
+    },
     {
       label: '搜索',
       key: 'search',
@@ -177,10 +189,17 @@ const topBarMenuOption = computed(() => {
       ],
       icon: renderIcon(FilterOutline)
     },
-    ...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
+    {
-      label: `插件:${v.name}`,
+      label: '插件',
-      key: `plugin:${v.key}`
+      key: 'plugin',
-    })),
+      children: [
+        ...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
+          label: `${v.name}`,
+          key: `plugin:${v.key}`
+        })),
+      ],
+      icon: renderIcon(ExtensionPuzzleOutline)
+    },
     {
       label: '关闭',
       key: 'close',
@@ -242,6 +261,10 @@ const handleTopBarMenuSelect = (key: string) => {
     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') {