From 3d1f83d0ff818416e0dae9c1009a30ce12453aef Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Tue, 13 Aug 2024 21:04:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2=E5=8A=A0?=
 =?UTF-8?q?=E5=85=A5/=E5=88=A0=E9=99=A4/=E6=96=87=E4=BB=B6=E5=8A=A0?=
 =?UTF-8?q?=E5=85=A5/=E5=88=A0=E9=99=A4=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                    |  12 +-
 src/App.vue                  | 207 +++++++++++++++++++++++------------
 src/class/virtualPage.ts     |   2 +
 src/hooks/useDataBus.ts      |   9 +-
 src/hooks/useUploadQueue.ts  |  10 +-
 src/hooks/useVirtualPages.ts |  11 ++
 src/views/miaoDirectory.vue  | 189 ++++++++++++++++++--------------
 7 files changed, 283 insertions(+), 157 deletions(-)
 create mode 100644 src/hooks/useVirtualPages.ts

diff --git a/README.md b/README.md
index 33895ab..4083689 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+todo: 标签页，miaoDirectory切换动画                      [finish]
+todo: 重构virtualPage，所有page以插件形式使用             []
+todo: miaoDirectory插件化，为后续插件功能开发做准备        []
+todo: miaoPopupInput, 弹出一个输入框
+todo: miaoDirectory的新建文件/文件夹功能
+todo: miaoDirectory的重命名功能
+todo: miaoDirectory的多选功能
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 22e43c4..0367a48 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,5 @@
 <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'
@@ -7,17 +8,18 @@ import VirtualPage from './class/VirtualPage';
 import VirtualDirectory from './class/VirtualDirectory';
 import MiaoMask from './components/miaoMask.vue';
 import config from './config';
+import useViretualPages from './hooks/useVirtualPages';
 
-const {baseUrl} = config
+const { baseUrl } = config
 
 const showModal = ref<boolean>(false)
 
 const modalData = shallowRef<{
-    component: any
-    props: any
+  component: any
+  props: any
 }>()
 
-const views = reactive<VirtualPage[]>([])
+const views = useViretualPages()
 
 const rootDirectory = new VirtualDirectory({
   name: '根目录',
@@ -42,15 +44,15 @@ const deleteView = (index: number) => {
   }
 }
 
-// 若存在两个以上标签页可见则除点击的标签页以外其他全部隐藏，若只有一个标签页可见则全部展示
-// 这个逻辑以后再研究吧，平时感觉用不到
+// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
 const handleClickTitle = (index: number) => {
-  let count = views.filter(v=>v.visible).length
+  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 = count > 1 ? false : true
-    }else {
+  while (_index < views.length) {
+    if (_index !== index) {
+      views[_index].visible = op === 'hideOthers' ? false : true
+    } else {
       views[_index].visible = true
     }
     _index += 1
@@ -69,15 +71,15 @@ function renderIcon(icon: any) {
 
 const openMenuOption = [
   {
-      label: '分享',
-      key: 'share',
-      icon: renderIcon(QrCodeOutline)
+    label: '分享',
+    key: 'share',
+    icon: renderIcon(QrCodeOutline)
   }
 ]
 
 const handleMenuSelect = (key: string) => {
   console.log(key)
-  if(key === 'share') {
+  if (key === 'share') {
     showModal.value = true
     modalData.value = {
       component: NQrCode,
@@ -96,52 +98,60 @@ onMounted(() => {
 </script>
 
 <template>
-	<div class="view">
-		<div class="view-controler">
-			<n-scrollbar x-scrollable>
-				<div class="tags-container">
-					<div class="tag" v-for="(view, index) of views" :key="view.uid">
-						<div class="tag-title" @click="handleClickTitle(index)">{{ view.title }}</div>
-						<div class="tag-point" :style="{ backgroundColor: view.color } "></div>
-						<div class="tag-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.currentDirectory, index + 1)">
-								<CopyOutline />
-							</n-icon>
-							<n-icon class="tag-control-icon icon" @click="deleteView(index)">
-								<CloseOutline class="icon-inner" />
-							</n-icon>
-						</div>
-					</div>
-				</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>
-			</div>
-		</div>
-		<div class="view-container">
-			<div class="view-container-item" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
-				<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index" @exit="deleteView(index)"></miao-directory>
-			</div>
-		</div>
-	</div>
-  <MiaoMask v-model:show="showModal" @click="showModal = false" >
+  <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.currentDirectory, 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-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>
+      </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">
+          <miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index"
+            @exit="deleteView(index)"></miao-directory>
+        </div>
+      </transition-group>
+    </div>
+  </div>
+  <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
+  <MiaoMask v-model:show="showModal" @click="showModal = false">
     <component :is="modalData?.component" v-bind="modalData?.props"></component>
   </MiaoMask>
 </template>
 
 <style lang="scss" scoped>
 $controler-height: 25px;
-.view{
+$tag-width: 170px;
+
+.view {
   position: relative;
   height: 100%;
   width: 100%;
@@ -157,37 +167,38 @@ $controler-height: 25px;
       display: flex;
       margin-left: 5px;
       flex: 1;
+
       // overflow-x: scroll;
-      .tag {
+      .tab {
         position: relative;
-        width: 170px;
+        width: $tag-width;
         margin: 0 5px;
         // flex: 1;
         display: flex;
         border-radius: 5px 5px 0 0;
         align-items: center;
 
-        .tag-title {
+        .tab-title {
           margin-left: 4px;
           // width: 70%;
           user-select: none;
           cursor: pointer;
         }
 
-        .tag-point {
+        .tab-point {
           height: 5px;
           aspect-ratio: 1;
           border-radius: 66px;
           margin-left: 5px;
         }
 
-        .tag-control {
+        .tab-control {
           position: absolute;
           right: 10px;
           display: flex;
           align-items: center;
 
-          .tag-control-icon:not(:last-child) {
+          .tab-control-icon:not(:last-child) {
             margin-right: 5px;
           }
         }
@@ -208,6 +219,7 @@ $controler-height: 25px;
       display: flex;
       align-items: center;
       padding: 0 5px;
+
       .view-controler-menu-item {
         height: 100%;
         aspect-ratio: 1;
@@ -215,13 +227,14 @@ $controler-height: 25px;
         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;
+        content: '';
+        height: calc($controler-height*0.6);
+        width: 1px;
+        border-right: 1px solid black;
+        position: absolute;
+        left: 2px;
       }
     }
 
@@ -249,28 +262,88 @@ $controler-height: 25px;
     height: calc(100% - $controler-height);
     overflow-y: overlay;
     overflow-x: overlay;
+
     .view-container-item {
       flex: 1;
       height: 100%;
     }
+
     &::-webkit-scrollbar {
       position: absolute;
       width: 4px;
     }
+
     // 滚动条轨道
     &::-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 {
 
+      .tab-move,
+      .tab-enter-active {
+        transition: all 0.2s ease;
+      }
+
+      .tab-leave-active {
+        transition: none;
+      }
+
+      .tab-enter-from {
+        opacity: 0;
+        transform: translateY(-30px);
+      }
+
+      // .tab-leave-to {
+      //   opacity: 0;
+      //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
+      // }
+
+      .tab-leave-active {
+        position: absolute;
+      }
+    }
+  }
+
+  .view-container {
+
+    .page-move,
+    .page-enter-active {
+      transition: all 0.2s ease;
+    }
+
+    .page-leave-active {
+      transition: none;
+    }
+
+    .page-enter-from {
+      opacity: 0;
+      // transform: translateY(-100px);
+    }
+
+    // .page-leave-to {
+    //   opacity: 0;
+    //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
+    // }
+
+    .page-leave-active {
+      position: absolute;
+    }
   }
 }
 </style>
diff --git a/src/class/virtualPage.ts b/src/class/virtualPage.ts
index ae584dc..7fd64ec 100644
--- a/src/class/virtualPage.ts
+++ b/src/class/virtualPage.ts
@@ -42,6 +42,8 @@ export default class VirtualPage {
 		this.currentDirectory = currDir;
 	}
 
+	// 刷新，不过好像没有用得到的时候吧
+	// 事实上也不应该用得到，因为更新应该是响应式的
 	refresh() {
 		this.refreshKey = Math.random();
 	}
diff --git a/src/hooks/useDataBus.ts b/src/hooks/useDataBus.ts
index 23bbb73..a3f5222 100644
--- a/src/hooks/useDataBus.ts
+++ b/src/hooks/useDataBus.ts
@@ -1,6 +1,13 @@
-const dataStorage: any = {};
+import { reactive } from "vue";
+
+let dataStorage: {
+	[key: string | number] : any
+};
 
 export default function useDataBus() {
+	if(dataStorage === undefined) {
+		dataStorage = reactive({})
+	}
 	return {
 		set(key: string | number, value: any) {
 			dataStorage[key] = value;
diff --git a/src/hooks/useUploadQueue.ts b/src/hooks/useUploadQueue.ts
index a30a819..ca44b2e 100644
--- a/src/hooks/useUploadQueue.ts
+++ b/src/hooks/useUploadQueue.ts
@@ -1,5 +1,11 @@
 import UploadQueue from "@/class/UploadQueue";
+import { reactive } from "vue";
 
-const uploadQueue = new UploadQueue()
+let uploadQueue: UploadQueue
 
-export default () => uploadQueue
\ No newline at end of file
+export default () => {
+    if(uploadQueue === undefined){
+        uploadQueue = reactive(new UploadQueue())
+    }
+    return uploadQueue
+}
\ No newline at end of file
diff --git a/src/hooks/useVirtualPages.ts b/src/hooks/useVirtualPages.ts
new file mode 100644
index 0000000..ad6f799
--- /dev/null
+++ b/src/hooks/useVirtualPages.ts
@@ -0,0 +1,11 @@
+import VirtualPage from "@/class/VirtualPage"
+import { Reactive, reactive } from "vue"
+
+let views: Reactive<VirtualPage[]>
+
+export default function useViretualPages(){
+    if(views === undefined) {
+        views = reactive<VirtualPage[]>([])
+    }
+    return views
+}
\ No newline at end of file
diff --git a/src/views/miaoDirectory.vue b/src/views/miaoDirectory.vue
index a52f991..7be62e3 100644
--- a/src/views/miaoDirectory.vue
+++ b/src/views/miaoDirectory.vue
@@ -1,62 +1,59 @@
 <template>
-	<div class="miao-directory-item-container" ref="rootDomRef">
-		<div class="container-top" :style="{ backgroundColor: props.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>
-				</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: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
-			<n-scrollbar>
-				<miaoDirectoryItem
-					v-for="(dir) in showData_directory"
-					@click="setCurrentDirectory(dir)"
-					:item="dir"
-					:key="dir.uid"
-					:color="props.color"
-					@delete="handleItemDelete(dir)"
-				/>
-				<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"
-				/>
-			</n-scrollbar>
-		</div>
-		<div class="container-bottom" :style="{ backgroundColor: props.index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"></div>
-		<miaoMask v-model:show="showModel"></miaoMask>
-	</div>
+    <div class="miao-directory-item-container" ref="rootDomRef">
+        <div class="container-top" :style="{ backgroundColor: props.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>
+                </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: props.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: props.index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"></div>
+        <miaoMask v-model:show="showModel"></miaoMask>
+    </div>
 </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';
@@ -87,15 +84,15 @@ const emit = defineEmits<{
 const showModel = ref(0)
 
 // 目前展示的Dir
-const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
+const currentDirectory = defineModel<VirtualDirectory>('currentDirectory', { required: true })
 
 // 用于展示的数据，后续会增加排序等操作
 const showData_directory = computed<VirtualDirectory[]>(() => {
-    const data = currentDirectory.value?.directorys ? [...currentDirectory.value?.directorys ] : []
+    const data = currentDirectory.value?.directorys ? [...currentDirectory.value?.directorys] : []
     return data
 })
 const showData_files = computed<VirtualFile[]>(() => {
-    const data = currentDirectory.value?.files ? [...currentDirectory.value?.files ] : []
+    const data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : []
     return data
 })
 
@@ -114,27 +111,22 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
         ; (async () => {
             const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory)
             virtualDirectory.updateContent(data)
-            currentDirectory.value = undefined
-            currentDirectory.value = virtualDirectory
         })()
     }
-    // 刷新一下
-    currentDirectory.value = undefined
     currentDirectory.value = virtualDirectory
-    // emit("onCurrentDirectoryChange", currentDirectory.value)
 }
 
 const reload = () => {
-    currentDirectory.value && setCurrentDirectory(currentDirectory.value)
+    setCurrentDirectory(currentDirectory.value)
 }
 
 const openUrl = (href: string, config?: {
     download?: string
     target?: string
 }) => {
-    let {target, download} = config ?? {}
+    let { target, download } = config ?? {}
 
-    console.log({target, download, href})
+    console.log({ target, download, href })
     const a = document.createElement('a');
     a.setAttribute('href', href);
     a.setAttribute('target', target ?? '_blank')
@@ -143,7 +135,7 @@ const openUrl = (href: string, config?: {
 }
 
 const handleBack = () => {
-    if(currentDirectory.value?.parent){
+    if (currentDirectory.value?.parent) {
         setCurrentDirectory(currentDirectory.value.parent)
     }
 }
@@ -153,12 +145,14 @@ const handleReload = () => {
 }
 
 const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
-    const {response} = miaoFetchApi.delete(item)
+    const { response } = miaoFetchApi.delete(item, {
+        retry: 5
+    })
     // todo: 将删除事件统一用一个事件管理中心管理
     const id = (await response).eventId
-    const {response : res} = miaoFetchApi.query(id)
+    const { response: res } = miaoFetchApi.query(id)
     const eventResult = await res
-    if(eventResult.status === 'success'){
+    if (eventResult.status === 'success') {
         reload()
     }
 }
@@ -166,11 +160,11 @@ const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
 onMounted(async () => {
     currentDirectory.value && await setCurrentDirectory(currentDirectory.value)
     // 拖动事件处理
-    const dropFileOption:dropHandlerHooks = {
+    const dropFileOption: dropHandlerHooks = {
         onDropFiles(files: File[]) {
             const dragData = dataBus.pop('dragData')
-            console.log({dragData, files})
-            if(files && files.length > 0){
+            console.log({ dragData, files })
+            if (files && files.length > 0) {
                 currentDirectory.value && uploadQueue.push(files, currentDirectory.value, {
                     onFinish() {
                         reload()
@@ -201,6 +195,7 @@ $bottom-bar-height: 60px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+
     .container-top {
         height: $top-height;
         width: 100%;
@@ -210,12 +205,14 @@ $bottom-bar-height: 60px;
         align-items: center;
         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%;
@@ -229,6 +226,7 @@ $bottom-bar-height: 60px;
             background-color: #ffffff;
             padding: 0 5px;
             border-radius: 0 3px 3px 0;
+
             .container-top-breadcrumb-container {
                 position: absolute;
                 height: 100%;
@@ -240,6 +238,7 @@ $bottom-bar-height: 60px;
                 align-items: center;
             }
         }
+
         .container-top-tools {
             position: relative;
             height: 100%;
@@ -248,6 +247,7 @@ $bottom-bar-height: 60px;
             display: flex;
             justify-content: space-around;
             align-items: center;
+
             .container-top-tools-item {
                 width: 20px;
                 height: 20px;
@@ -258,30 +258,37 @@ $bottom-bar-height: 60px;
                 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);
+                    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;
-            }
+
+            // &::after {
+            //     content: '';
+            //     height: 60%;
+            //     position: absolute;
+            //     right: -2px;
+            //     width: 2px;
+            //     background-color: #828282;
+            // }
         }
     }
+
     .container-items {
         width: 100%;
         height: calc(100% - $top-height - $bottom-bar-height);
+        // flex: 1;
     }
+
     .container-bottom {
         height: $bottom-bar-height;
         background-color: bisque;
@@ -293,4 +300,22 @@ $bottom-bar-height: 60px;
         z-index: 2;
     }
 }
+// transition动画相关
+.miao-directory-item-container {
+    .container-items {
+        .dirItem-move,
+        .dirItem-enter-active {
+            transition: all 0.2s ease;
+        }
+        .dirItem-leave-active {
+            transition: none;
+        }
+        .dirItem-enter-from {
+            opacity: 0;
+        }
+        .dirItem-leave-active {
+            position: absolute;
+        }
+    }
+}
 </style>