From 2b378b03430920542fad2f7f1b4f621dba8d746d Mon Sep 17 00:00:00 2001
From: Zhoujiahui <539943419@qq.com>
Date: Thu, 15 Aug 2024 13:05:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0miaoDropHandler?=
 =?UTF-8?q?=E7=B5=84=E4=BB=B6=E7=94=A8=E6=96=BC=E7=B5=B1=E4=B8=80=E8=99=95?=
 =?UTF-8?q?=E7=90=86drop=E4=BA=8B=E4=BB=B6=EF=BC=8C=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96=E4=BB=A3=E7=A2=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 601 ++++++++--------
 ...irtualDirectory.ts => VirtualDirectory.ts} |   0
 src/class/{virtualPage.ts => VirtualPage.ts}  |   0
 .../miaoDirectory/miaoDirectoryItem.vue       | 194 ++++--
 src/components/miaoDropHandler.vue            | 106 +++
 src/components/miaoMask.vue                   |   2 +-
 src/views/miaoDirectory.vue                   | 642 +++++++++---------
 7 files changed, 892 insertions(+), 653 deletions(-)
 rename src/class/{virtualDirectory.ts => VirtualDirectory.ts} (100%)
 rename src/class/{virtualPage.ts => VirtualPage.ts} (100%)
 create mode 100644 src/components/miaoDropHandler.vue

diff --git a/src/App.vue b/src/App.vue
index 7a25985..cd82cf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,150 +1,202 @@
 <script setup lang="ts">
-
-import { h, onMounted, reactive, ref, shallowRef } from 'vue';
-import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui';
-import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical, QrCodeOutline } from '@vicons/ionicons5'
-import miaoDirectory from './views/miaoDirectory.vue';
-import VirtualPage from './class/VirtualPage';
-import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory';
-import MiaoMask from './components/miaoMask.vue';
-import config from './config';
-import useViretualPages from './hooks/useVirtualPages';
+import { h, onMounted, reactive, ref, shallowRef } from 'vue'
+import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
+import {
+    EyeOffOutline,
+    EyeOutline,
+    CloseOutline,
+    CopyOutline,
+    EllipsisVertical,
+    QrCodeOutline
+} from '@vicons/ionicons5'
+import miaoDirectory from './views/miaoDirectory.vue'
+import VirtualPage from './class/VirtualPage'
+import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
+import MiaoMask from './components/miaoMask.vue'
+import config from './config'
+import useViretualPages from './hooks/useVirtualPages'
 
 const { baseUrl } = config
 
 const showModal = ref<boolean>(false)
 
 const modalData = shallowRef<{
-  component: any
-  props: any
+    component: any
+    props: any
 }>()
 
 const views = useViretualPages()
 
-const rootDirectory = reactive(new VirtualDirectory({
-  name: '根目录',
-  stats: {
-    atimeMs: 0,
-    birthtimeMs: 0,
-    ctimeMs: 0,
-    mtimeMs: 0,
-  }
-}))
+const rootDirectory = reactive(
+    new VirtualDirectory({
+        name: '根目录',
+        stats: {
+            atimeMs: 0,
+            birthtimeMs: 0,
+            ctimeMs: 0,
+            mtimeMs: 0
+        }
+    })
+)
 
 // component就是一个vue组件，类似于miaoDirectory
-const createView = (component: any, currentObjects: (VirtualDirectory | VirtualFile)[], index?: number) => {
-  index ?? (index = views.length)
-  views.splice(index, 0, reactive<VirtualPage>(new VirtualPage(component, [...currentObjects])))
+const createView = (
+    component: any,
+    currentObjects: (VirtualDirectory | VirtualFile)[],
+    index?: number
+) => {
+    index ?? (index = views.length)
+    views.splice(
+        index,
+        0,
+        reactive<VirtualPage>(new VirtualPage(component, [...currentObjects]))
+    )
 }
 
 const deleteView = (index: number) => {
-  views.splice(index, 1)
-  if (views.length === 0) {
-    createView(miaoDirectory, [rootDirectory])
-  }
+    views.splice(index, 1)
+    if (views.length === 0) {
+        createView(miaoDirectory, [rootDirectory])
+    }
 }
 
 // 点击标题是隐藏其他标签或显示其他标签，还挺好用的
 const handleClickTitle = (index: number) => {
-  let count = views.filter(v => v.visible).length
-  let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
-  let _index = 0
-  while (_index < views.length) {
-    if (_index !== index) {
-      views[_index].visible = op === 'hideOthers' ? false : true
-    } else {
-      views[_index].visible = true
+    let count = views.filter((v) => v.visible).length
+    let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
+    let _index = 0
+    while (_index < views.length) {
+        if (_index !== index) {
+            views[_index].visible = op === 'hideOthers' ? false : true
+        } else {
+            views[_index].visible = true
+        }
+        _index += 1
     }
-    _index += 1
-  }
 }
 
-
 // 顶部菜单相关
 function renderIcon(icon: any) {
-  return () => {
-    return h(NIcon, null, {
-      default: () => h(icon)
-    })
-  }
+    return () => {
+        return h(NIcon, null, {
+            default: () => h(icon)
+        })
+    }
 }
 
 const openMenuOption = [
-  {
-    label: '分享',
-    key: 'share',
-    icon: renderIcon(QrCodeOutline)
-  }
+    {
+        label: '分享',
+        key: 'share',
+        icon: renderIcon(QrCodeOutline)
+    }
 ]
 
 const handleMenuSelect = (key: string) => {
-  if (key === 'share') {
-    showModal.value = true
-    modalData.value = {
-      component: NQrCode,
-      props: {
-        value: baseUrl,
-        size: 300,
-        errorCorrectionLevel: 'H'
-      }
+    if (key === 'share') {
+        showModal.value = true
+        modalData.value = {
+            component: NQrCode,
+            props: {
+                value: baseUrl,
+                size: 300,
+                errorCorrectionLevel: 'H'
+            }
+        }
     }
-  }
 }
 
 onMounted(() => {
-  createView(miaoDirectory, [rootDirectory])
+    createView(miaoDirectory, [rootDirectory])
 })
 </script>
 
 <template>
-  <div class="view">
-    <div class="view-controler">
-      <n-scrollbar x-scrollable>
-        <div class="tags-container">
-          <transition-group name="tab">
-            <div class="tab" v-for="(view, index) of views" :key="view.uid">
-              <div class="tab-title" @click="handleClickTitle(index)">{{ view.title }}</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>
-                <n-icon class="tag-control-icon icon"
-                  @click="createView(view.component, view.currentObjects, index + 1)">
-                  <CopyOutline />
-                </n-icon>
-                <n-icon class="tag-control-icon icon" @click="deleteView(index)">
-                  <CloseOutline class="icon-inner" />
-                </n-icon>
-              </div>
+    <div class="view">
+        <div class="view-controler">
+            <n-scrollbar x-scrollable>
+                <div class="tags-container">
+                    <transition-group name="tab">
+                        <div
+                            class="tab"
+                            v-for="(view, index) of views"
+                            :key="view.uid">
+                            <div
+                                class="tab-title"
+                                @click="handleClickTitle(index)">
+                                {{ view.title }}
+                            </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>
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="
+                                        createView(
+                                            view.component,
+                                            view.currentObjects,
+                                            index + 1
+                                        )
+                                    ">
+                                    <CopyOutline />
+                                </n-icon>
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="deleteView(index)">
+                                    <CloseOutline class="icon-inner" />
+                                </n-icon>
+                            </div>
+                        </div>
+                    </transition-group>
+                </div>
+            </n-scrollbar>
+            <div class="view-controller-menu">
+                <div class="view-controller-menu-item">
+                    <n-dropdown
+                        trigger="click"
+                        :options="openMenuOption"
+                        @select="handleMenuSelect">
+                        <n-icon class="icon">
+                            <EllipsisVertical class="icon-inner" />
+                        </n-icon>
+                    </n-dropdown>
+                </div>
             </div>
-          </transition-group>
         </div>
-      </n-scrollbar>
-      <div class="view-controler-menu">
-        <div class="view-controler-menu-item">
-          <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
-            <n-icon class="icon">
-              <EllipsisVertical class="icon-inner" />
-            </n-icon>
-          </n-dropdown>
+        <div class="view-container">
+            <transition-group name="page">
+                <div
+                    class="view-container-item"
+                    v-for="(view, index) of views"
+                    v-show="view.visible"
+                    :key="view.uid">
+                    <component
+                        :is="view.component"
+                        v-model:current-objects="view.currentObjects"
+                        :id="view.uid"
+                        :color="view.color"
+                        @exit="deleteView(index)"></component>
+                </div>
+            </transition-group>
         </div>
-      </div>
     </div>
-    <div class="view-container">
-      <transition-group name="page">
-        <div class="view-container-item" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
-          <component :is="view.component" v-model:current-objects="view.currentObjects" :id="view.uid"
-            :color="view.color" @exit="deleteView(index)"></component>
-        </div>
-      </transition-group>
-    </div>
-  </div>
-  <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
-  <MiaoMask v-model:show="showModal" @click="showModal = false">
-    <component :is="modalData?.component" v-bind="modalData?.props"></component>
-  </MiaoMask>
+    <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
+    <MiaoMask v-model:show="showModal" @click="showModal = false">
+        <component
+            :is="modalData?.component"
+            v-bind="modalData?.props"></component>
+    </MiaoMask>
 </template>
 
 <style lang="scss" scoped>
@@ -152,197 +204,194 @@ $controler-height: 25px;
 $tag-width: 170px;
 
 .view {
-  position: relative;
-  height: 100%;
-  width: 100%;
-
-  .view-controler {
-    display: flex;
-    height: $controler-height;
-    width: 100%;
-    background-color: #dadada;
-    // overflow: hidden;
-
-    .tags-container {
-      display: flex;
-      margin-left: 5px;
-      flex: 1;
-
-      // overflow-x: scroll;
-      .tab {
-        position: relative;
-        width: $tag-width;
-        margin: 0 5px;
-        // flex: 1;
-        display: flex;
-        border-radius: 5px 5px 0 0;
-        align-items: center;
-
-        .tab-title {
-          margin-left: 4px;
-          // width: 70%;
-          user-select: none;
-          cursor: pointer;
-        }
-
-        .tab-point {
-          height: 5px;
-          aspect-ratio: 1;
-          border-radius: 66px;
-          margin-left: 5px;
-        }
-
-        .tab-control {
-          position: absolute;
-          right: 10px;
-          display: flex;
-          align-items: center;
-
-          .tab-control-icon:not(:last-child) {
-            margin-right: 5px;
-          }
-        }
-
-        &:not(:last-child)::after {
-          content: '';
-          height: calc($controler-height*0.6);
-          width: 1px;
-          border-right: 1px solid black;
-          position: absolute;
-          right: 0px;
-        }
-      }
-    }
-
-    .view-controler-menu {
-      position: relative;
-      display: flex;
-      align-items: center;
-      padding: 0 5px;
-
-      .view-controler-menu-item {
-        height: 100%;
-        aspect-ratio: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      &::before {
-        content: '';
-        height: calc($controler-height*0.6);
-        width: 1px;
-        border-right: 1px solid black;
-        position: absolute;
-        left: 2px;
-      }
-    }
-
-    .icon {
-      height: calc($controler-height * 0.7);
-      width: calc($controler-height * 0.7);
-      border-radius: 5px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      background-color: rgba(128, 128, 128, 0);
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: rgba(128, 128, 128, 0.4);
-      }
-    }
-  }
-
-  .view-container {
     position: relative;
-    display: flex;
-    // flex-direction: column;
-    height: calc(100% - $controler-height);
-    overflow-y: overlay;
-    overflow-x: overlay;
+    height: 100%;
+    width: 100%;
 
-    .view-container-item {
-      flex: 1;
-      height: 100%;
+    .view-controler {
+        display: flex;
+        height: $controler-height;
+        width: 100%;
+        background-color: #dadada;
+        // overflow: hidden;
+
+        .tags-container {
+            display: flex;
+            margin-left: 5px;
+            flex: 1;
+
+            // overflow-x: scroll;
+            .tab {
+                position: relative;
+                width: $tag-width;
+                margin: 0 5px;
+                // flex: 1;
+                display: flex;
+                border-radius: 5px 5px 0 0;
+                align-items: center;
+
+                .tab-title {
+                    margin-left: 4px;
+                    // width: 70%;
+                    user-select: none;
+                    cursor: pointer;
+                }
+
+                .tab-point {
+                    height: 5px;
+                    aspect-ratio: 1;
+                    border-radius: 66px;
+                    margin-left: 5px;
+                }
+
+                .tab-control {
+                    position: absolute;
+                    right: 10px;
+                    display: flex;
+                    align-items: center;
+
+                    .tab-control-icon:not(:last-child) {
+                        margin-right: 5px;
+                    }
+                }
+
+                &:not(:last-child)::after {
+                    content: '';
+                    height: calc($controler-height * 0.6);
+                    width: 1px;
+                    border-right: 1px solid black;
+                    position: absolute;
+                    right: 0px;
+                }
+            }
+        }
+
+        .view-controller-menu {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 0 5px;
+
+            .view-controller-menu-item {
+                height: 100%;
+                aspect-ratio: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            &::before {
+                content: '';
+                height: calc($controler-height * 0.6);
+                width: 1px;
+                border-right: 1px solid black;
+                position: absolute;
+                left: 2px;
+            }
+        }
+
+        .icon {
+            height: calc($controler-height * 0.7);
+            width: calc($controler-height * 0.7);
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            background-color: rgba(128, 128, 128, 0);
+            transition: background-color 0.3s;
+
+            &:hover {
+                background-color: rgba(128, 128, 128, 0.4);
+            }
+        }
     }
 
-    &::-webkit-scrollbar {
-      position: absolute;
-      width: 4px;
-    }
+    .view-container {
+        position: relative;
+        display: flex;
+        // flex-direction: column;
+        height: calc(100% - $controler-height);
+        overflow-y: overlay;
+        overflow-x: overlay;
 
-    // 滚动条轨道
-    &::-webkit-scrollbar-track {
-      // background: rgb(239, 239, 239);
-      border-radius: 2px;
-    }
+        .view-container-item {
+            flex: 1;
+            height: 100%;
+        }
 
-    // 小滑块
-    &::-webkit-scrollbar-thumb {
-      background: #e0e0e0;
-      // border-radius: 5px;
-    }
+        &::-webkit-scrollbar {
+            position: absolute;
+            width: 4px;
+        }
 
-    &::-webkit-scrollbar-thumb:hover {
-      background: #999999;
+        // 滚动条轨道
+        &::-webkit-scrollbar-track {
+            // background: rgb(239, 239, 239);
+            border-radius: 2px;
+        }
+
+        // 小滑块
+        &::-webkit-scrollbar-thumb {
+            background: #e0e0e0;
+            // border-radius: 5px;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background: #999999;
+        }
     }
-  }
 }
 
 // transition动画相关
 .view {
-  .view-controler {
-    .tags-container {
+    .view-controler {
+        .tags-container {
+            .tab-move,
+            .tab-enter-active {
+                transition: all 0.2s ease;
+            }
 
-      .tab-move,
-      .tab-enter-active {
-        transition: all 0.2s ease;
-      }
+            .tab-leave-active {
+                transition: none;
+            }
 
-      .tab-leave-active {
-        transition: none;
-      }
+            .tab-enter-from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
 
-      .tab-enter-from {
-        opacity: 0;
-        transform: translateY(-30px);
-      }
+            // .tab-leave-to {
+            //   opacity: 0;
+            //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
+            // }
 
-      // .tab-leave-to {
-      //   opacity: 0;
-      //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
-      // }
-
-      .tab-leave-active {
-        position: absolute;
-      }
+            .tab-leave-active {
+                position: absolute;
+            }
+        }
     }
-  }
 
-  .view-container {
+    // .view-container {
+    //     .page-move {
+    //       transition: all 0.2s ease;
+    //     }
 
-    // .page-move {
-    //   transition: all 0.2s ease;
+    //     .page-enter-active {
+
+    //     }
+
+    //     .page-leave-active {
+    //       transition: none;
+    //     }
+
+    //     .page-enter-from {
+    //       opacity: 0;
+    //     }
+
+    //     .page-leave-active {
+    //       position: absolute;
+    //     }
     // }
-
-
-    // .page-enter-active {
-
-    // }
-
-    // .page-leave-active {
-    //   transition: none;
-    // }
-
-    // .page-enter-from {
-    //   opacity: 0;
-    // }
-
-    // .page-leave-active {
-    //   position: absolute;
-    // }
-  }
 }
 </style>
diff --git a/src/class/virtualDirectory.ts b/src/class/VirtualDirectory.ts
similarity index 100%
rename from src/class/virtualDirectory.ts
rename to src/class/VirtualDirectory.ts
diff --git a/src/class/virtualPage.ts b/src/class/VirtualPage.ts
similarity index 100%
rename from src/class/virtualPage.ts
rename to src/class/VirtualPage.ts
diff --git a/src/components/miaoDirectory/miaoDirectoryItem.vue b/src/components/miaoDirectory/miaoDirectoryItem.vue
index 40a80b1..29afc10 100644
--- a/src/components/miaoDirectory/miaoDirectoryItem.vue
+++ b/src/components/miaoDirectory/miaoDirectoryItem.vue
@@ -1,116 +1,169 @@
 <template>
-	<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
-		<div class="item-main">
-			<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
-			<Icon class="item-main-icon"></Icon>
-			<div class="item-main-info">
-				<div class="item-main-info-name">
-					{{ name }}
-				</div>
-				<div class="item-main-info-date" v-if="time">
-					{{ time }}
-				</div>
-			</div>
-			<n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
-				<div class="item-main-option" @click="e=>e.stopPropagation()">
-					<EllipsisVertical class="item-main-option-icon" />
-				</div>
-			</n-dropdown>
-		</div>
-	</div>
+    <div
+        class="miao-item"
+        draggable="true"
+        ref="itemRef"
+        @dragstart="handleDragStart">
+        <div class="item-main">
+            <div
+                class="item-main-front"
+                :style="{ backgroundColor: props.color }"></div>
+            <Icon class="item-main-icon"></Icon>
+            <div class="item-main-info">
+                <div class="item-main-info-name">
+                    {{ name }}
+                </div>
+                <div class="item-main-info-date" v-if="time">
+                    {{ time }}
+                </div>
+            </div>
+            <n-dropdown
+                trigger="click"
+                :options="dropDownOptions"
+                @select="handleDropdownSelect">
+                <div
+                    class="item-main-option"
+                    @click="(e) => e.stopPropagation()">
+                    <EllipsisVertical class="item-main-option-icon" />
+                </div>
+            </n-dropdown>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import {
+    DocumentText,
+    FileTray,
+    Help,
+    Image,
+    LogoChrome,
+    LogoCss3,
+    LogoJavascript,
+    LogoVue,
+    PlayCircle,
+    EllipsisVertical,
+    Disc
+} from '@vicons/ionicons5'
+import { computed, ref } from 'vue'
+import dateFormatter from '@/hooks/dateFormatter'
+// import useDataBus from '@/hooks/useDataBus'
+import { NDropdown } from 'naive-ui'
 
-import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
-import { DocumentText, FileTray, Help, Image, LogoChrome, LogoCss3, LogoJavascript, LogoVue, PlayCircle, EllipsisVertical, Disc } from '@vicons/ionicons5';
-import { computed, ref } from 'vue';
-import dateFormatter from '@/hooks/dateFormatter';
-import useDataBus from '@/hooks/useDataBus';
-import { NDropdown } from 'naive-ui';
+// const dataBus = useDataBus()
 
-const dataBus = useDataBus()
+const props = defineProps<{
+    item: VirtualDirectory | VirtualFile
+    name?: string
+    color: string
+}>()
 
 const emit = defineEmits<{
     download: []
     delete: []
-    dragStart: []
-}>()
-
-const props = defineProps<{
-  item: VirtualDirectory | VirtualFile
-  name?: string
-  color:string
+    dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
 }>()
 
 const itemType = ref<'file' | 'directory'>(props.item.type)
 
 const name = props.name ?? props.item.name
 
-const time = computed(()=>{
-    return dateFormatter(new Date(props.item.stats.mtimeMs), "yyyy-MM-dd hh:mm:ss");
+const time = computed(() => {
+    return dateFormatter(
+        new Date(props.item.stats.mtimeMs),
+        'yyyy-MM-dd hh:mm:ss'
+    )
 })
 
-const dropDownOptions = computed(()=> {
-    const options = [{
-        label: '删除',
-        key: 'delete'
-    }]
-    if(itemType.value === 'file'){
-        options.push(...[
-            {
-                label: '下载',
-                key: 'download',
-            }
-        ])
+const dropDownOptions = computed(() => {
+    const options = [
+        {
+            label: '删除',
+            key: 'delete'
+        }
+    ]
+    if (itemType.value === 'file') {
+        options.push(
+            ...[
+                {
+                    label: '下载',
+                    key: 'download'
+                }
+            ]
+        )
     }
     return options
 })
 
 const handleDropdownSelect = (key: 'download' | 'delete') => {
-    if(key === 'download'){
+    if (key === 'download') {
         emit('download')
     } else if (key === 'delete') {
         emit('delete')
     }
 }
 
-const Icon = computed(()=>{
-    try{
-        if(props.item.type === 'directory') {
+const Icon = computed(() => {
+    try {
+        if (props.item.type === 'directory') {
             return FileTray
-        } else if(props.item.type === 'file') {
+        } else if (props.item.type === 'file') {
             const aft = props.item.name.split('.').at(-1)?.toLowerCase()
-            if(!aft){
-                throw(1)
-            }else if(['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)){
+            if (!aft) {
+                throw 1
+            } else if (
+                ['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
+            ) {
                 return DocumentText
-            }else if(['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)){
+            } else if (
+                ['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)
+            ) {
                 return Disc
-            }else if(['.xbm','.tif','pjp','.svgz','jpg','jpeg','ico','tiff','.gif','svg','.jfif','.webp','.png','.bmp','pjpeg','.avif'].includes(aft)){
+            } else if (
+                [
+                    '.xbm',
+                    '.tif',
+                    'pjp',
+                    '.svgz',
+                    'jpg',
+                    'jpeg',
+                    'ico',
+                    'tiff',
+                    '.gif',
+                    'svg',
+                    '.jfif',
+                    '.webp',
+                    '.png',
+                    '.bmp',
+                    'pjpeg',
+                    '.avif'
+                ].includes(aft)
+            ) {
                 return Image
-            }else if(['mp4', 'm2v', 'mkv'].includes(aft)){
+            } else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
                 return PlayCircle
-            }else if(['js', 'jsx', 'ts', 'tsx'].includes(aft)){
+            } else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
                 return LogoJavascript
-            }else if(['html'].includes(aft)){
+            } else if (['html'].includes(aft)) {
                 return LogoChrome
-            }else if(['css', 'scss', 'less'].includes(aft)){
+            } else if (['css', 'scss', 'less'].includes(aft)) {
                 return LogoCss3
-            }else if(['vue'].includes(aft)){
+            } else if (['vue'].includes(aft)) {
                 return LogoVue
             }
             return DocumentText
         }
-    }catch{
+    } catch {
         return Help
     }
 })
 
 const itemRef = ref()
 
-const handleDragStart = () => {
-    dataBus.set('dragData', [ props.item ])
+const handleDragStart = (event: DragEvent) => {
+    emit('dragStart', event, props.item)
+    // dataBus.set('dragData', [props.item])
 }
 </script>
 
@@ -138,7 +191,7 @@ const handleDragStart = () => {
         .item-main-front {
             height: 100%;
             width: 10px;
-            border-radius: 7px 0 0 7px ;
+            border-radius: 7px 0 0 7px;
             background-color: rgb(0, 0, 0);
         }
         .item-main-icon {
@@ -176,17 +229,18 @@ const handleDragStart = () => {
                 color: #000;
                 transition: color 0.15s;
             }
-            &:hover, &:active {
+            &:hover,
+            &:active {
                 background-color: #8b8b8b;
                 .item-main-option-icon {
-                    color: #FFF;
+                    color: #fff;
                 }
             }
         }
-        &:hover, &:active {
+        &:hover,
+        &:active {
             background-color: #d2d2d2;
         }
-
     }
 }
 </style>
diff --git a/src/components/miaoDropHandler.vue b/src/components/miaoDropHandler.vue
new file mode 100644
index 0000000..03c2c6c
--- /dev/null
+++ b/src/components/miaoDropHandler.vue
@@ -0,0 +1,106 @@
+<template>
+    <div
+        class="container"
+        @dragover="handleDragOver"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop">
+        <slot></slot>
+        <miao-mask v-model:show="showMask"></miao-mask>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import miaoMask from './miaoMask.vue'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import config from '@/config'
+import useDataBus from '@/hooks/useDataBus'
+
+const dataBus = useDataBus()
+
+const { uploadSizeLimit } = config
+
+const emit = defineEmits<{
+    onFiles: [files: File[]]
+    onVirtualFiles: [vFiles: VirtualFile[]]
+    onVirtualDirectory: [vDirectory: VirtualDirectory[]]
+}>()
+
+const showMask = ref<number>(0)
+
+// File類型的數據可能爲文件夾，通過FileReader進行判斷
+const isFile = (file: File) =>
+    new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.onload = () => {
+            resolve(true)
+            reader.abort()
+        }
+        reader.onerror = () => {
+            resolve(false)
+            reader.abort()
+        }
+        reader.readAsText(file)
+    })
+
+/**
+ * 只保留文件，移去文件夹
+ * @param {File[]} files
+ */
+const removeDirectory = async (files: File[]) => {
+    let index = 0
+    while (index < files.length) {
+        const currentFile = files[index]
+        const _isFile = await isFile(currentFile)
+        if (_isFile) {
+            index += 1
+            continue
+        } else {
+            files.splice(index, 1)
+            continue
+        }
+    }
+}
+
+const handleDragOver = async (event: DragEvent) => {
+    showMask.value += 1
+    event.preventDefault()
+}
+
+const handleDragLeave = async () => {
+    showMask.value = 0
+}
+
+const handleDrop = async (event: DragEvent) => {
+    showMask.value = 0
+    event.preventDefault()
+    event.stopPropagation()
+    // todo: uploadSize的限制不應該在這裏
+    const files = [...(event.dataTransfer?.files ?? [])].filter(
+        (file) => file.size < uploadSizeLimit
+    )
+    await removeDirectory(files)
+    const virtualFiles: VirtualFile[] = dataBus.pop('dragData_vFiles')
+    const virtualDirectory: VirtualDirectory[] = dataBus.pop(
+        'dragData_vDirectory'
+    )
+    // console.log({ virtualDirectory, virtualFiles })
+    if (files && files.length) {
+        emit('onFiles', files)
+    }
+    if (virtualFiles && virtualFiles.length) {
+        emit('onVirtualFiles', virtualFiles)
+    }
+    if (virtualDirectory && virtualDirectory.length) {
+        emit('onVirtualDirectory', virtualDirectory)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>
diff --git a/src/components/miaoMask.vue b/src/components/miaoMask.vue
index fc55001..7e3c660 100644
--- a/src/components/miaoMask.vue
+++ b/src/components/miaoMask.vue
@@ -2,7 +2,7 @@
 	<transition name="transition">
 		<div class="mask-body" ref="maskBodyRef" v-show="showMask">
       <div @click="e=>e.stopPropagation()">
-        <slot> {{}} </slot>
+        <slot></slot>
       </div>
 		</div>
 	</transition>
diff --git a/src/views/miaoDirectory.vue b/src/views/miaoDirectory.vue
index b1e4fa9..4d662d6 100644
--- a/src/views/miaoDirectory.vue
+++ b/src/views/miaoDirectory.vue
@@ -1,240 +1,270 @@
 <template>
-  <div class="miao-directory-item-container" ref="rootDomRef">
-    <div
-      class="container-top"
-      :style="{ backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }"
-    >
-      <div class="container-top-colorbar" :style="{ backgroundColor: props.color }"></div>
-      <div class="container-top-breadcrumb">
-        <!-- <n-scrollbar x-scrollable> -->
-        <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?.directoryArray"
-              @click="setCurrentDirectory(dir)"
-              :clickable="true"
-            >
-              <div>{{ dir.name }}</div>
-            </n-breadcrumb-item>
-          </n-breadcrumb>
+    <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles">
+        <div class="miao-directory-item-container" ref="rootDomRef">
+            <div
+                class="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">
+                    <!-- <n-scrollbar x-scrollable> -->
+                    <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?.directoryArray"
+                                @click="setCurrentDirectory(dir)"
+                                :clickable="true">
+                                <div>{{ dir.name }}</div>
+                            </n-breadcrumb-item>
+                        </n-breadcrumb>
+                    </div>
+                    <!-- </n-scrollbar> -->
+                </div>
+                <div class="container-top-tools">
+                    <n-icon
+                        class="container-top-tools-item"
+                        size="15"
+                        @click="handleBack">
+                        <ChevronBackOutline />
+                    </n-icon>
+                    <n-icon
+                        class="container-top-tools-item"
+                        size="14"
+                        @click="handleReload">
+                        <ReloadOutline
+                            class="container-top-tools-item-reload" />
+                    </n-icon>
+                    <n-icon
+                        class="container-top-tools-item"
+                        size="20"
+                        @click="emit('exit')">
+                        <CloseOutline />
+                    </n-icon>
+                </div>
+            </div>
+            <div
+                class="container-items"
+                :style="{
+                    backgroundColor:
+                        index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+                }">
+                <n-scrollbar>
+                    <transition-group name="dirItem">
+                        <miaoDirectoryItem
+                            v-for="dir in showData_directory"
+                            @click="setCurrentDirectory(dir)"
+                            :item="dir"
+                            :key="dir.uid"
+                            :color="props.color"
+                            @delete="handleItemDelete(dir)"
+                            @drag-start="handleItemDragStart" />
+                    </transition-group>
+                    <transition-group name="dirItem">
+                        <miaoDirectoryItem
+                            v-for="file in showData_files"
+                            :item="file"
+                            :key="file.uid"
+                            @click="openUrl(`${baseUrl}${api.get}${file.path}`)"
+                            @download="
+                                openUrl(`${baseUrl}${api.get}${file.path}`, {
+                                    download: file.name
+                                })
+                            "
+                            @delete="handleItemDelete(file)"
+                            @drag-start="handleItemDragStart"
+                            :color="props.color" />
+                    </transition-group>
+                </n-scrollbar>
+            </div>
+            <div
+                class="container-bottom"
+                :style="{
+                    backgroundColor:
+                        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+                }"></div>
+            <miao-mask v-model:show="showModel"></miao-mask>
+            <!-- <miao-popup-input ref="popupInput"></miao-popup-input> -->
         </div>
-        <!-- </n-scrollbar> -->
-      </div>
-      <div class="container-top-tools">
-        <n-icon class="container-top-tools-item" size="15" @click="handleBack">
-          <ChevronBackOutline />
-        </n-icon>
-        <n-icon class="container-top-tools-item" size="14" @click="handleReload">
-          <ReloadOutline class="container-top-tools-item-reload" />
-        </n-icon>
-        <n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
-          <CloseOutline />
-        </n-icon>
-      </div>
-    </div>
-    <div
-      class="container-items"
-      :style="{ backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }"
-    >
-      <n-scrollbar>
-        <transition-group name="dirItem">
-          <miaoDirectoryItem
-            v-for="dir in showData_directory"
-            @click="setCurrentDirectory(dir)"
-            :item="dir"
-            :key="dir.uid"
-            :color="props.color"
-            @delete="handleItemDelete(dir)"
-          />
-        </transition-group>
-        <transition-group name="dirItem">
-          <miaoDirectoryItem
-            v-for="file in showData_files"
-            :item="file"
-            :key="file.uid"
-            @click="openUrl(`${baseUrl}${api.get}${file.path}`)"
-            @download="
-              openUrl(`${baseUrl}${api.get}${file.path}`, { download: file.name })
-            "
-            @delete="handleItemDelete(file)"
-            :color="props.color"
-          />
-        </transition-group>
-      </n-scrollbar>
-    </div>
-    <div
-      class="container-bottom"
-      :style="{ backgroundColor: index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"
-    ></div>
-    <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 { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from "naive-ui";
-import type { file, directory } from "@/types/type.ts";
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
-import { computed, onMounted, ref } from "vue";
-import Config from "@/config";
-import dropHandler, { dropHandlerHooks } from "@/hooks/dropHandler";
-import miaoMask from "@/components/miaoMask.vue";
-import miaoPopupInput from "@/components/miaoPopupInput.vue";
-import miaoDirectoryItem from "@/components/miaoDirectory/miaoDirectoryItem.vue";
-import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
-import useDataBus from "@/hooks/useDataBus";
+import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
+import type { file, directory } from '@/types/type.ts'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { computed, onMounted, ref } from 'vue'
+import Config from '@/config'
+import miaoMask from '@/components/miaoMask.vue'
+import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
+// import miaoPopupInput from "@/components/miaoPopupInput.vue";
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import useDataBus from '@/hooks/useDataBus'
 import {
-  CloudOutline,
-  ChevronBackOutline,
-  ReloadOutline,
-  CloseOutline,
-} from "@vicons/ionicons5";
-import useUploadQueue from "@/hooks/useUploadQueue";
-import useViretualPages from "@/hooks/useVirtualPages";
+    CloudOutline,
+    ChevronBackOutline,
+    ReloadOutline,
+    CloseOutline
+} from '@vicons/ionicons5'
+import useUploadQueue from '@/hooks/useUploadQueue'
+import useVirtualPages from '@/hooks/useVirtualPages'
 
-const { baseUrl, api } = Config;
-const dataBus = useDataBus();
-const views = useViretualPages();
+const { baseUrl, api } = Config
+const dataBus = useDataBus()
+const views = useVirtualPages()
 
-const miaoFetchApi = useMiaoFetchApi();
+const miaoFetchApi = useMiaoFetchApi()
 
 const props = defineProps<{
-  color: string;
-  id: number;
-}>();
+    color: string
+    id: number
+}>()
 
 const emit = defineEmits<{
-  exit: [];
-}>();
+    exit: []
+}>()
 
 const popupInput = ref()
 // 是否显示模态框
-const showModel = ref(0);
+const showModel = ref(0)
 
-const currentObjects = defineModel<VirtualDirectory[]>("currentObjects", {
-  required: true,
-});
+const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
+    required: true
+})
 
 // 目前展示的Dir
 const currentDirectory = computed(() => {
-  return currentObjects.value[0];
-});
+    return currentObjects.value[0]
+})
 
 const index = computed(() => {
-  for (let i in views) {
-    if (views[i].uid === props.id) {
-      return parseInt(i);
+    for (let i in views) {
+        if (views[i].uid === props.id) {
+            return parseInt(i)
+        }
     }
-  }
-  return 0;
-});
+    return 0
+})
 
 // 用于展示的数据，后续会增加排序等操作
 const showData_directory = computed<VirtualDirectory[]>(() => {
-  const data = currentDirectory.value?.directorys
-    ? [...currentDirectory.value?.directorys]
-    : [];
-  return data;
-});
+    const data = currentDirectory.value?.directorys
+        ? [...currentDirectory.value?.directorys]
+        : []
+    return data
+})
 const showData_files = computed<VirtualFile[]>(() => {
-  const data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : [];
-  return data;
-});
+    const data = currentDirectory.value?.files
+        ? [...currentDirectory.value?.files]
+        : []
+    return data
+})
 
 // 用于监听拖拽文件事件
-const rootDomRef = ref<HTMLDivElement>();
+const rootDomRef = ref<HTMLDivElement>()
 
-const uploadQueue = useUploadQueue();
+const uploadQueue = useUploadQueue()
 
 // 设置显示的dir
 const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
-  // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
-  if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
-    const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory);
-    virtualDirectory.updateContent(data);
-  } else {
-    (async () => {
-      const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory);
-      virtualDirectory.updateContent(data);
-    })();
-  }
-  currentObjects.value[0] = virtualDirectory;
-};
+    // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
+    if (
+        virtualDirectory.files === undefined ||
+        virtualDirectory.directorys === undefined
+    ) {
+        const data: (file | directory)[] = await miaoFetchApi.get(
+            virtualDirectory
+        )
+        virtualDirectory.updateContent(data)
+    } else {
+        ;(async () => {
+            const data: (file | directory)[] = await miaoFetchApi.get(
+                virtualDirectory
+            )
+            virtualDirectory.updateContent(data)
+        })()
+    }
+    currentObjects.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 handleBack = () => {
-  if (currentDirectory.value?.parent) {
-    setCurrentDirectory(currentDirectory.value.parent);
-  }
-};
+    if (currentDirectory.value?.parent) {
+        setCurrentDirectory(currentDirectory.value.parent)
+    }
+}
 
 const handleReload = () => {
-  reload();
-};
+    reload()
+}
 
 const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
-  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 { 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 handleItemDragStart = async (
+    _event: DragEvent,
+    item: VirtualDirectory | VirtualFile
+) => {
+    if (item.type === 'file') {
+        dataBus.set('dragData_vFiles', [item])
+    } else {
+        dataBus.set('dragData_vDirectory', [item])
+    }
+}
+
+const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
+    setCurrentDirectory(vDirs[0])
+}
+
+const handleDropFiles = async (files: File[]) => {
+    currentDirectory.value &&
+        uploadQueue.push(files, currentDirectory.value, {
+            onFinish() {
+                reload()
+            }
+        })
+}
 
 onMounted(async () => {
-  await setCurrentDirectory(currentDirectory.value);
-  // 拖动事件处理
-  const dropFileOption: dropHandlerHooks = {
-    onDropFiles(files: File[]) {
-      const dragData = dataBus.pop("dragData");
-      console.log({ dragData, files });
-      if (files && files.length > 0) {
-        currentDirectory.value &&
-          uploadQueue.push(files, currentDirectory.value, {
-            onFinish() {
-              reload();
-            },
-          });
-      }
-    },
-    onEnter() {
-      showModel.value += 1;
-    },
-    onEnd() {
-      showModel.value -= 1;
-    },
-  };
-  rootDomRef.value && dropHandler(rootDomRef.value, dropFileOption);
-
-  console.log(await popupInput.value.popup())
-});
+    await setCurrentDirectory(currentDirectory.value)
+})
 </script>
 
 <style scoped lang="scss">
@@ -242,137 +272,137 @@ $top-height: 30px;
 $bottom-bar-height: 60px;
 
 .miao-directory-item-container {
-  position: relative;
-  height: 100%;
-  width: inherit;
-  min-width: 266px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .container-top {
-    height: $top-height;
-    width: 100%;
-    user-select: none;
     position: relative;
+    height: 100%;
+    width: inherit;
+    min-width: 266px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
     overflow: hidden;
-    background-color: #f1f1f1;
 
-    .container-top-colorbar {
-      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%;
+    .container-top {
+        height: $top-height;
+        width: 100%;
+        user-select: none;
+        position: relative;
         display: flex;
-        justify-content: flex-start;
         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;
+                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);
+                }
+            }
+
+            // &::after {
+            //     content: '';
+            //     height: 60%;
+            //     position: absolute;
+            //     right: -2px;
+            //     width: 2px;
+            //     background-color: #828282;
+            // }
+        }
     }
 
-    .container-top-tools {
-      position: relative;
-      height: 100%;
-      width: 70px;
-      padding: 0 5px;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
+    .container-items {
+        width: 100%;
+        height: calc(100% - $top-height - $bottom-bar-height);
+        // flex: 1;
+    }
 
-      .container-top-tools-item {
-        width: 20px;
-        height: 20px;
+    .container-bottom {
+        height: $bottom-bar-height;
+        background-color: bisque;
         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);
-        }
-      }
-
-      // &::after {
-      //     content: '';
-      //     height: 60%;
-      //     position: absolute;
-      //     right: -2px;
-      //     width: 2px;
-      //     background-color: #828282;
-      // }
+        user-select: none;
+        box-shadow: 0px 1px 10px #888888;
+        z-index: 2;
     }
-  }
-
-  .container-items {
-    width: 100%;
-    height: calc(100% - $top-height - $bottom-bar-height);
-    // flex: 1;
-  }
-
-  .container-bottom {
-    height: $bottom-bar-height;
-    background-color: bisque;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    user-select: none;
-    box-shadow: 0px 1px 10px #888888;
-    z-index: 2;
-  }
 }
 
 // transition动画相关
-.miao-directory-item-container {
-  .container-items {
-    .dirItem-move {
-      transition: all 0.2s ease;
-    }
+// .miao-directory-item-container {
+//     .container-items {
+//         .dirItem-move {
+//             transition: all 0.2s ease;
+//         }
 
-    .dirItem-leave-active {
-      transition: none;
-    }
+//         .dirItem-leave-active {
+//             transition: none;
+//         }
 
-    .dirItem-enter-from {
-      opacity: 0;
-    }
+//         .dirItem-enter-from {
+//             opacity: 0;
+//         }
 
-    .dirItem-leave-active {
-      position: absolute;
-    }
-  }
-}
+//         .dirItem-leave-active {
+//             position: absolute;
+//         }
+//     }
+// }
 </style>