From 5719012c2c4c5ec30e90aae36221b254f3fe947f Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Tue, 20 Aug 2024 00:28:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20miaoDirectory=E7=9A=84=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=A4=9A=E9=80=89=E5=90=8E?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4/=E7=A7=BB=E5=8A=A8=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9=E6=9C=89=E9=A2=9D=E5=A4=96=E6=95=88=E6=9E=9C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   6 +-
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   3 +
 src/class/VirtualDirectory.ts                 |   1 +
 src/components/miaoContextMenu.vue            |   3 +-
 .../miaoDirectory/miaoDirectoryItem.vue       |  45 +++-
 src/components/miaoPopupInput.vue             |   2 +
 src/views/miaoDirectory.vue                   | 226 +++++++++---------
 8 files changed, 167 insertions(+), 120 deletions(-)

diff --git a/README.md b/README.md
index efc7857..21db9f3 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
 todo: 标签页，miaoDirectory切换动画                      [finish]
 todo: 重构virtualPage，所有page以插件形式使用             [finish]
-todo: miaoDirectory插件化，为后续插件功能开发做准备       [finish]
+todo: miaoDirectory插件化，为后续插件功能开发做准备        [finish]
 todo: miaoPopupInput, 弹出一个输入框                     [finish]
 todo: miaoDirectory的重命名功能                          [finish]
 todo: miaoDirectory的剪切功能                            [finish]
 todo: miaoDirectory的上传按钮                            [finish]
 todo: miaoDirectory的新建文件/文件夹功能                  [finish]
+todo: miaoDirectory的多选功能                            [finish]
 todo: VirtualDirectory更新时更新文件信息
-todo: miaoDirectory的复制文件/文件夹功能
-todo: miaoDirectory的多选功能
\ No newline at end of file
+todo: miaoDirectory的复制文件/文件夹功能
\ No newline at end of file
diff --git a/package.json b/package.json
index 529c8ee..1f0ee8c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@vicons/ionicons5": "^0.12.0",
     "axios": "^1.7.3",
+    "lodash": "^4.17.21",
     "naive-ui": "^2.39.0",
     "sass": "^1.77.8",
     "vue": "^3.4.35"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32d8790..47a85c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       axios:
         specifier: ^1.7.3
         version: 1.7.3
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       naive-ui:
         specifier: ^2.39.0
         version: 2.39.0(vue@3.4.37(typescript@5.5.4))
diff --git a/src/class/VirtualDirectory.ts b/src/class/VirtualDirectory.ts
index c5ac422..9f5c33d 100644
--- a/src/class/VirtualDirectory.ts
+++ b/src/class/VirtualDirectory.ts
@@ -1,5 +1,6 @@
 import generateId from "@/hooks/generateId";
 import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
+// import { debounce } from "lodash";
 import type { stats, file, directory } from "@/types/type.ts";
 
 const miaoFetchApi = useMiaoFetchApi();
diff --git a/src/components/miaoContextMenu.vue b/src/components/miaoContextMenu.vue
index d4f339b..dbb1af8 100644
--- a/src/components/miaoContextMenu.vue
+++ b/src/components/miaoContextMenu.vue
@@ -37,7 +37,7 @@ const onClickoutside = async () => {
 const handleMainMouseLeave = async () => {
     setTimeout(() => {
         showContextMenu.value -= 1
-    }, 100)
+    }, 20)
     // nextTick(()=>{
     //     showContextMenu.value -= 1
     // })
@@ -45,6 +45,7 @@ const handleMainMouseLeave = async () => {
 
 const handleSelect = async (key: string) => {
     emit('select', key)
+    showContextMenu.value = 0
 }
 
 const handleContextMenu = (e: MouseEvent) => {
diff --git a/src/components/miaoDirectory/miaoDirectoryItem.vue b/src/components/miaoDirectory/miaoDirectoryItem.vue
index b3adf0b..57d3ffd 100644
--- a/src/components/miaoDirectory/miaoDirectoryItem.vue
+++ b/src/components/miaoDirectory/miaoDirectoryItem.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
         <miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
-            <div class="item-main" ref="mainRef">
+            <div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef">
                 <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
-                <Icon class="item-main-icon" v-show="clientWidth > 200"></Icon>
+                <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
                 <div class="item-main-info">
                     <div class="item-main-info-name">
-                        <Icon class="item-main-info-name-icon" v-show="clientWidth <= 200"></Icon>
-                        {{ name }}
+                        <Icon class="item-main-info-name-icon" v-show="clientWidth <= 250"></Icon>
+                        <n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
                     </div>
                     <div class="item-main-info-date" v-if="time">
                         {{ time }}
@@ -41,6 +41,7 @@ import {
 } from '@vicons/ionicons5'
 import { computed, onMounted, ref } from 'vue'
 import dateFormatter from '@/hooks/dateFormatter'
+import { NEllipsis } from 'naive-ui'
 // import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
 // const miaoFetchApi = useMiaoFetchApi()
@@ -49,6 +50,7 @@ const props = defineProps<{
     item: VirtualDirectory | VirtualFile
     name?: string
     color: string
+    selected: boolean
 }>()
 
 const emit = defineEmits<{
@@ -56,6 +58,7 @@ const emit = defineEmits<{
     delete: []
     rename: []
     dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
+    onSelected: []
 }>()
 
 const itemType = ref<'file' | 'directory'>(props.item.type)
@@ -95,6 +98,25 @@ const dropDownOptions = computed(() => {
             ]
         )
     }
+    if (props.selected === false) {
+        options.push(
+            ...[
+                {
+                    label: '多选:选择',
+                    key: 'select'
+                }
+            ]
+        )
+    } else {
+        options.push(
+            ...[
+                {
+                    label: '多选:取消',
+                    key: 'select'
+                }
+            ]
+        )
+    }
     return options
 })
 
@@ -106,6 +128,8 @@ const handleDropdownSelect = (key: string) => {
         emit('download')
     } else if (key === 'delete') {
         emit('delete')
+    } else if (key === 'select') {
+        emit('onSelected')
     }
 }
 
@@ -187,7 +211,7 @@ onMounted(() => {
 .miao-item {
     cursor: pointer;
     width: calc(100% - 20px);
-    min-width: 150px;
+    min-width: 170px;
     // aspect-ratio: 66/9;
     height: 50px;
     position: relative;
@@ -204,7 +228,7 @@ onMounted(() => {
         border-radius: 7px;
         display: flex;
         align-items: center;
-        transition: background-color 0.3s;
+        transition: background-color 0.3s ease;
 
         .item-main-front {
             height: 100%;
@@ -217,6 +241,7 @@ onMounted(() => {
             margin-left: 10px;
             height: 80%;
             color: #00403e;
+            transition: color 0.15s ease-out;
         }
 
         .item-main-info {
@@ -226,6 +251,7 @@ onMounted(() => {
             flex-direction: column;
 
             &-name {
+                position: relative;
                 user-select: none;
                 display: flex;
                 align-items: center;
@@ -235,6 +261,7 @@ onMounted(() => {
                     color: #00403e;
                     width: 20px;
                     margin-right: 5px;
+                    transition: color 0.15s ease-out;
                 }
             }
 
@@ -278,5 +305,11 @@ onMounted(() => {
             background-color: #d2d2d2;
         }
     }
+    .item-main-selected {
+        background-color: rgba(0, 128, 207, 0.32);
+        &:hover {
+            background-color: rgba(0, 128, 207, 0.64);;
+        }
+    }
 }
 </style>
diff --git a/src/components/miaoPopupInput.vue b/src/components/miaoPopupInput.vue
index 23096cd..62b6ddc 100644
--- a/src/components/miaoPopupInput.vue
+++ b/src/components/miaoPopupInput.vue
@@ -70,8 +70,10 @@ defineExpose({ popup });
     width: 100%;
     display: flex;
     justify-content: flex-end;
+    flex-wrap: wrap;
 
     .popup-button-container-button {
+      margin-top: 3px;
       &:not(:last-child) {
         margin-right: 5px;
       }
diff --git a/src/views/miaoDirectory.vue b/src/views/miaoDirectory.vue
index a803deb..ef8f026 100644
--- a/src/views/miaoDirectory.vue
+++ b/src/views/miaoDirectory.vue
@@ -1,18 +1,12 @@
 <template>
-    <miao-drop-handler
-        @on-virtual-directory="handleDropVDirectory"
-        @on-files="handleDropFiles"
+    <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
         @on-virtual-files="handleDropVirtualFiles">
         <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" :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">
@@ -22,10 +16,8 @@
                                     <CloudOutline />
                                 </n-icon>
                             </n-breadcrumb-item>
-                            <n-breadcrumb-item
-                                v-for="dir in currentDirectory?.getParents"
-                                @click="setCurrentDirectory(dir)"
-                                :clickable="true">
+                            <n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
+                                @click="setCurrentDirectory(dir)" :clickable="true">
                                 <div>{{ dir.name }}</div>
                             </n-breadcrumb-item>
                         </n-breadcrumb>
@@ -33,87 +25,60 @@
                     <!-- </n-scrollbar> -->
                 </div>
                 <div class="container-top-tools">
-                    <n-icon
-                        class="container-top-tools-item"
-                        size="15"
-                        @click="handleBack">
+                    <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 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')">
+                    <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)'
-                }">
+            <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"
-                            @rename="handleItemRename(dir)" />
+                        <miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
+                            :color="props.color" :selected="selectedItem.value.includes(dir)"
+                            @delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
+                            @drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
+                            @on-selected="handleItemSelect(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="handleItemDownload(file)"
-                            @delete="handleItemDelete(file)"
-                            @drag-start="handleItemDragStart"
-                            @rename="handleItemRename(file)"
-                            :color="props.color" />
+                        <miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
+                            :color="props.color" :selected="selectedItem.value.includes(file)"
+                            @click="handleItemClick(file)" @download="handleItemDownload(file)"
+                            @delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
+                            @rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
                     </transition-group>
                 </n-scrollbar>
             </div>
-            <div
-                class="container-bottom"
-                :style="{
-                    backgroundColor:
-                        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
-                }">
+            <div class="container-bottom" :style="{
+                backgroundColor:
+                    index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+            }">
                 <div class="container-bottom-item">
                     <div class="container-bottom-item-icon">
-                        <add-outline
-                            :style="{
-                                color:
-                                    index % 2 === 0
-                                        ? 'rgb(0 0 0)'
-                                        : 'rgb(255 255 255)'
-                            }"
-                            @click="handleAddNewItem" />
+                        <add-outline :style="{
+                            color:
+                                index % 2 === 0
+                                    ? 'rgb(0 0 0)'
+                                    : 'rgb(255 255 255)'
+                        }" @click="handleAddNewItem" />
                     </div>
                 </div>
                 <div class="container-bottom-item">
                     <div class="container-bottom-item-icon">
-                        <cloud-upload-outline
-                            :style="{
-                                color:
-                                    index % 2 === 0
-                                        ? 'rgb(0 0 0)'
-                                        : 'rgb(255 255 255)'
-                            }"
-                            @click="handlePickFilesUpload" />
+                        <cloud-upload-outline :style="{
+                            color:
+                                index % 2 === 0
+                                    ? 'rgb(0 0 0)'
+                                    : 'rgb(255 255 255)'
+                        }" @click="handlePickFilesUpload" />
                     </div>
                 </div>
             </div>
@@ -125,9 +90,8 @@
 
 <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 { computed, onMounted, reactive, ref } from 'vue'
 import Config from '@/config'
 import miaoMask from '@/components/miaoMask.vue'
 import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
@@ -146,6 +110,7 @@ import {
 import useUploadQueue from '@/hooks/useUploadQueue'
 import useVirtualPages from '@/hooks/useVirtualPages'
 import { filePicker } from '@/hooks/miaoTools'
+import { uniq } from 'lodash'
 
 const { baseUrl, api } = Config
 const dataBus = useDataBus()
@@ -166,6 +131,34 @@ const popupInput = ref()
 // 是否显示模态框
 const showModel = ref(0)
 
+class SelectedItem {
+    constructor() {
+        this._selectedItem = []
+    }
+    _selectedItem: (VirtualDirectory | VirtualFile)[]
+    push(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = [item, ...this._selectedItem]
+    }
+    remove(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = this._selectedItem.filter(v => v !== item)
+    }
+    clear() {
+        this._selectedItem = []
+    }
+    // 保证内容仍然存在于dir中且各个元素不重复
+    get value() {
+        return uniq(this._selectedItem).filter(v => {
+            if (currentDirectory.value === undefined) {
+                return false
+            }
+            // @ts-ignore
+            return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
+        })
+    }
+}
+// 已选择的item，用于多选功能
+const selectedItem = reactive(new SelectedItem())
+
 const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
     required: true
 })
@@ -211,17 +204,9 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
         virtualDirectory.files === undefined ||
         virtualDirectory.directorys === undefined
     ) {
-        const data: (file | directory)[] = await miaoFetchApi.get(
-            virtualDirectory
-        )
-        virtualDirectory.updateContent(data)
+        await virtualDirectory.update()
     } else {
-        ;(async () => {
-            const data: (file | directory)[] = await miaoFetchApi.get(
-                virtualDirectory
-            )
-            virtualDirectory.updateContent(data)
-        })()
+        virtualDirectory.update()
     }
     currentObjects.value[0] = virtualDirectory
 }
@@ -255,22 +240,38 @@ const handleReload = () => {
     reload()
 }
 
+const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
+    if (selectedItem.value.length > 0) {
+        handleItemSelect(item)
+    } else {
+        if (item.type === 'file') {
+            openUrl(`${baseUrl}${api.get}${item.path}`)
+        } else if (item.type === 'directory') {
+            setCurrentDirectory(item)
+        }
+    }
+}
+
 const handleItemDownload = (item: VirtualFile) => {
     openUrl(`${baseUrl}${api.get}${item.path}`, {
         download: item.name
     })
 }
 
-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 handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
+    for (let item of uniq([...selectedItem.value, _item])) {
+        ; (async () => {
+            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()
+            }
+        })()
     }
 }
 
@@ -314,11 +315,10 @@ const handleItemDragStart = async (
     _event: DragEvent,
     item: VirtualDirectory | VirtualFile
 ) => {
-    if (item.type === 'file') {
-        dataBus.set('dragData_vFiles', [item])
-    } else {
-        dataBus.set('dragData_vDirectory', [item])
-    }
+    const items = uniq([item, ...selectedItem.value])
+    dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
+    dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
+    selectedItem.clear()
 }
 
 const handleDropFiles = async (files: File[]) => {
@@ -338,7 +338,7 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
         }
     }
     for (let dir of vDirs) {
-        ;(async () => {
+        ; (async () => {
             const _from = dir.parent
             const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
             const id = (await response).eventId
@@ -350,7 +350,6 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
             }
         })()
     }
-    // setCurrentDirectory(vDirs[0])
 }
 
 const handleDropVirtualFiles = (files: VirtualFile[]) => {
@@ -358,7 +357,7 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
         return
     }
     for (let file of files) {
-        ;(async () => {
+        ; (async () => {
             const _from = file.parent
             const { response } = miaoFetchApi.cut(file, currentDirectory.value)
             const id = (await response).eventId
@@ -413,7 +412,6 @@ const handleAddNewItem = async () => {
     if (popupRes.key === 'cancel' || popupRes.text === '') {
         return
     }
-    console.log(popupRes)
     const _currDir = currentDirectory.value
     const name = popupRes.text
     const opType: 'file' | 'dir' = popupRes.key
@@ -430,6 +428,14 @@ const handleAddNewItem = async () => {
         }
     }
 }
+
+const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
+    if (!selectedItem.value.includes(item)) {
+        selectedItem.push(item)
+    } else {
+        selectedItem.remove(item)
+    }
+}
 onMounted(async () => {
     await setCurrentDirectory(currentDirectory.value)
 })
@@ -557,6 +563,7 @@ $bottom-bar-height: 60px;
             display: flex;
             justify-content: center;
             align-items: center;
+
             .container-bottom-item-icon {
                 svg {
                     width: 30px;
@@ -595,5 +602,4 @@ $bottom-bar-height: 60px;
 //             position: absolute;
 //         }
 //     }
-// }
-</style>
+// }</style>