添加页面加入/删除/文件加入/删除动画

README.md

@@ -1,5 +1,7 @@
-# Vue 3 + TypeScript + Vite
+todo: 标签页，miaoDirectory切换动画                      [finish]
-
+todo: 重构virtualPage，所有page以插件形式使用             []
-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.
+todo: miaoDirectory插件化，为后续插件功能开发做准备        []
-
+todo: miaoPopupInput, 弹出一个输入框
-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的新建文件/文件夹功能
+todo: miaoDirectory的重命名功能
+todo: miaoDirectory的多选功能

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,8 +8,9 @@ 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)
 
@@ -17,7 +19,7 @@ const modalData = shallowRef<{
   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) {
+  while (_index < views.length) {
-    if(_index !== index) {
+    if (_index !== index) {
-      views[_index].visible = count > 1 ? false : true
+      views[_index].visible = op === 'hideOthers' ? false : true
-    }else {
+    } else {
       views[_index].visible = true
     }
     _index += 1
@@ -77,7 +79,7 @@ const openMenuOption = [
 
 const handleMenuSelect = (key: string) => {
   console.log(key)
-  if(key === 'share') {
+  if (key === 'share') {
     showModal.value = true
     modalData.value = {
       component: NQrCode,
@@ -100,10 +102,11 @@ onMounted(() => {
     <div class="view-controler">
       <n-scrollbar x-scrollable>
         <div class="tags-container">
-					<div class="tag" v-for="(view, index) of views" :key="view.uid">
+          <transition-group name="tab">
-						<div class="tag-title" @click="handleClickTitle(index)">{{ view.title }}</div>
+            <div class="tab" v-for="(view, index) of views" :key="view.uid">
-						<div class="tag-point" :style="{ backgroundColor: view.color } "></div>
+              <div class="tab-title" @click="handleClickTitle(index)">{{ view.title }}</div>
-						<div class="tag-control">
+              <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" />
@@ -116,6 +119,7 @@ onMounted(() => {
                 </n-icon>
               </div>
             </div>
+          </transition-group>
         </div>
       </n-scrollbar>
       <div class="view-controler-menu">
@@ -129,19 +133,25 @@ onMounted(() => {
       </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>
+          <miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index"
+            @exit="deleteView(index)"></miao-directory>
+        </div>
+      </transition-group>
     </div>
   </div>
-	</div>
+  <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
-  <MiaoMask v-model:show="showModal" @click="showModal = false" >
+  <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,6 +227,7 @@ $controler-height: 25px;
         justify-content: center;
         align-items: center;
       }
+
       &::before {
         content: '';
         height: calc($controler-height*0.6);
@@ -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>

src/class/virtualPage.ts

@@ -42,6 +42,8 @@ export default class VirtualPage {
 		this.currentDirectory = currDir;
 	}
 
+	// 刷新，不过好像没有用得到的时候吧
+	// 事实上也不应该用得到，因为更新应该是响应式的
 	refresh() {
 		this.refreshKey = Math.random();
 	}

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;

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
+export default () => {
+    if(uploadQueue === undefined){
+        uploadQueue = reactive(new UploadQueue())
+    }
+    return uploadQueue
+}

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
+}

src/views/miaoDirectory.vue

@@ -11,7 +11,8 @@
                                 <CloudOutline />
                             </n-icon>
                         </n-breadcrumb-item>
-						<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray" @click="setCurrentDirectory(dir)" :clickable="true">
+                        <n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray"
+                            @click="setCurrentDirectory(dir)" :clickable="true">
                             <div>{{ dir.name }}</div>
                         </n-breadcrumb-item>
                     </n-breadcrumb>
@@ -30,33 +31,29 @@
                 </n-icon>
             </div>
         </div>
-		<div class="container-items" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
+        <div class="container-items"
+            :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
             <n-scrollbar>
-				<miaoDirectoryItem
+                <transition-group name="dirItem">
-					v-for="(dir) in showData_directory"
+                    <miaoDirectoryItem v-for="(dir) in showData_directory" @click="setCurrentDirectory(dir)" :item="dir"
-					@click="setCurrentDirectory(dir)"
+                        :key="dir.uid" :color="props.color" @delete="handleItemDelete(dir)" />
-					:item="dir"
+                </transition-group>
-					:key="dir.uid"
+                <transition-group name="dirItem">
-					:color="props.color"
+                    <miaoDirectoryItem v-for="(file) in showData_files" :item="file" :key="file.uid"
-					@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})"
+                        @download="openUrl(`${baseUrl}${api.get}${file.path}`, { download: file.name })"
-					@delete="handleItemDelete(file)"
+                        @delete="handleItemDelete(file)" :color="props.color" />
-					: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>
+        <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})
+            console.log({ dragData, files })
-            if(files && files.length > 0){
+            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: '';
+            // &::after {
-                height: 60%;
+            //     content: '';
-                position: absolute;
+            //     height: 60%;
-                right: -2px;
+            //     position: absolute;
-                width: 2px;
+            //     right: -2px;
-                background-color: #828282;
+            //     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>