Compare commits

3 Commits
9 changed files with 535 additions and 322 deletions

No files matched your search

+13 -11
View File
@@ -1,11 +1,13 @@
todo: 标签页,miaoDirectory切换动画 [finish]
todo: 重构virtualPage,所有page以插件形式使用 [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 list:
| 任务 | 状态 |
|---|---|
| 拆分miaoDirectory | ✅ |
| 完善视频插件 | ✅ |
| 完善PDF插件 | ✅ |
| 完善Code插件 | ✅ |
| 实现miaoDirectory的搜索功能 | ❌ |
| 完善miaoDirectory的搜索功能 | ❌ |
| 完善图片浏览插件 | ❌ |
| VirtualDirectory更新时更新文件信息 | ❌ |
| miaoDirectory的复制文件/文件夹功能 | ❌ |
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./favicon.ico" />
<link rel="icon" type="image/svg+xml" href="./icon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MiaoDirectory</title>
</head>
+1 -1
View File
@@ -7,7 +7,7 @@
"dev": "vite",
"dev:host": "vite --host 0.0.0.0",
"build": "vue-tsc -b && vite build",
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go build && mv ./miao-directory.exe ../",
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
"build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
"preview": "vite preview"
},
@@ -0,0 +1,77 @@
<template>
<div class="miao-directory-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="$emit('add-new-item')" />
</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="$emit('pick-files-upload')" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
defineProps<{
index: number
}>()
const emit = defineEmits<{
'add-new-item': []
'pick-files-upload': []
}>()
</script>
<style scoped lang="scss">
.miao-directory-container-bottom {
height: 60px;
background-color: bisque;
display: flex;
justify-content: space-around;
align-items: center;
user-select: none;
box-shadow: 0px 1px 10px #888888;
z-index: 2;
.container-bottom-item {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
.container-bottom-item-icon {
svg {
width: 30px;
height: 30px;
transition: width 0.3s ease;
transition: height 0.3s ease;
cursor: pointer;
}
&:hover {
svg {
width: 40px;
height: 40px;
}
}
}
}
}
</style>
@@ -138,6 +138,7 @@ const dropDownOptions = computed(() => {
})
// 是不是可以直接在这里面实现?
// 应该将所有事件emit出去才对
const handleDropdownSelect = (key: string) => {
if (key === 'rename') {
emit('rename')
@@ -177,22 +178,22 @@ const Icon = computed(() => {
return Disc
} else if (
[
'.xbm',
'.tif',
'xbm',
'tif',
'pjp',
'.svgz',
'svgz',
'jpg',
'jpeg',
'ico',
'tiff',
'.gif',
'gif',
'svg',
'.jfif',
'.webp',
'.png',
'.bmp',
'jfif',
'webp',
'png',
'bmp',
'pjpeg',
'.avif'
'avif'
].includes(aft)
) {
return Image
@@ -0,0 +1,86 @@
<template>
<div class="miao-directory-container-items" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar ref="scrollbarRef">
<transition-group name="dirItem">
<miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :disableLazy="index < 20"
min-height="50px">
<miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem"
@delete="handleItemDelete(dir)" @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
@rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
</miao-lazy-div>
</transition-group>
<transition-group name="dirItem">
<miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
min-height="50px">
<miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem"
@click="handleItemClick(file)" @download="handleItemDownload(file)"
@delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
@rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
</miao-lazy-div>
</transition-group>
</n-scrollbar>
</div>
</template>
<script setup lang="ts">
import { NScrollbar } from 'naive-ui'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
import { ref } from 'vue';
const props = defineProps<{
color: string
index: number
showData_directory: VirtualDirectory[]
showData_files: VirtualFile[]
selectedItem: (VirtualFile | VirtualDirectory)[]
}>()
const emit = defineEmits<{
'item-click': [item: VirtualDirectory | VirtualFile]
'item-download': [item: VirtualFile]
'item-delete': [item: VirtualDirectory | VirtualFile]
'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
'item-rename': [item: VirtualDirectory | VirtualFile]
'item-select': [item: VirtualDirectory | VirtualFile]
}>()
const scrollbarRef = ref()
defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
emit('item-click', item)
}
const handleItemDownload = (item: VirtualFile) => {
emit('item-download', item)
}
const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
emit('item-delete', item)
}
const handleItemDragStart = (_event: DragEvent, item: VirtualDirectory | VirtualFile) => {
emit('item-drag-start', _event, item)
}
const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
emit('item-rename', item)
}
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
emit('item-select', item)
}
</script>
<style scoped lang="scss">
.miao-directory-container-items {
width: 100%;
height: calc(100% - 30px - 60px);
}
</style>
@@ -0,0 +1,152 @@
<template>
<div class="miao-directory-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">
<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?.getParents"
@click="handleClickBreadcrumbItem(dir)" :clickable="true">
<div>{{ dir.name }}</div>
</n-breadcrumb-item>
</n-breadcrumb>
</div>
</div>
<div class="container-top-tools">
<n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
<ChevronBackOutline />
</n-icon>
<n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
<ReloadOutline class="container-top-tools-item-reload" />
</n-icon>
<n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
<n-icon class="container-top-tools-item" size="14">
<EllipsisVertical />
</n-icon>
</n-dropdown>
</div>
</div>
</template>
<script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
import {
CloudOutline,
ChevronBackOutline,
ReloadOutline,
EllipsisVertical,
} from '@vicons/ionicons5'
import VirtualDirectory from '@/class/VirtualDirectory'
const props = defineProps<{
color: string;
index: number
currentDirectory: VirtualDirectory | undefined;
openMenuOption: {
key: string,
label: string,
[key: string]: any,
}[]
}>()
const emit = defineEmits<{
back: [],
reload: [],
menuSelect: [key: string]
'set-current-directory': [virtualDirectory: VirtualDirectory]
}>()
const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
emit('set-current-directory', virtualDirectory)
}
</script>
<style scoped lang="scss">
.miao-directory-container-top {
height: 30px;
width: 100%;
user-select: none;
position: relative;
display: flex;
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;
margin: 0 1px;
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);
}
}
}
}
</style>
+194 -298
View File
@@ -2,93 +2,21 @@
<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-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?.getParents"
@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 ref="scrollbarRef">
<transition-group name="dirItem">
<miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid"
:disableLazy="index < 20" min-height="50px">
<miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem.value"
@delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
@drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
@on-selected="handleItemSelect(dir)" />
</miao-lazy-div>
</transition-group>
<transition-group name="dirItem">
<miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
min-height="50px">
<miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem.value"
@click="handleItemClick(file)" @download="handleItemDownload(file)"
@delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
@rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
</miao-lazy-div>
</transition-group>
<!-- <n-virtual-list :item="showData_all" :item-size="50">
<!-- 顶部面包屑导航和工具栏 -->
<miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
:open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
@set-current-directory="setCurrentDirectory" @search="handleSearch" @menu-select="handleTopBarMenuSelect" />
<!-- 文件和文件夹列表 -->
<miao-directory-items ref='miaoDirectoryItemRef' :color="props.color" :showData_directory="showData_directory"
:showData_files="showData_files" :selected-item="selectedItem.value" :index="index"
@item-click="handleItemClick" @item-download="handleItemDownload" @item-delete="handleItemDelete"
@item-drag-start="handleItemDragStart" @item-rename="handleItemRename" @item-select="handleItemSelect" />
<!-- 底部工具栏 -->
<miao-directory-bottom :index="index" @add-new-item="handleAddNewItem"
@pick-files-upload="handlePickFilesUpload" />
</n-virtual-list> -->
</n-scrollbar>
</div>
<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" />
</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" />
</div>
</div>
</div>
<miao-mask v-model:show="showModel"></miao-mask>
<miao-popup-input ref="popupInput"></miao-popup-input>
</div>
@@ -96,35 +24,37 @@
</template>
<script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import Config from '@/config'
import miaoMask from '@/components/miaoMask.vue'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoLazyDiv from '@/components/miaoLazyDiv.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,
CloudUploadOutline,
AddOutline
} from '@vicons/ionicons5'
import useUploadQueue from '@/hooks/useUploadQueue'
import useVirtualPages from '@/hooks/useVirtualPages'
import { filePicker } from '@/hooks/miaoTools'
import { uniq } from 'lodash'
// 导入子组件
import MiaoDirectoryTop from '@/components/miaoDirectory/miaoDirectoryTop.vue'
import MiaoDirectoryItems from '@/components/miaoDirectory/miaoDirectoryItemsContainer.vue'
import MiaoDirectoryBottom from '@/components/miaoDirectory/miaoDirectoryBottom.vue'
import MiaoMask from '@/components/miaoMask.vue'
import MiaoPopupInput from '@/components/miaoPopupInput.vue'
import MiaoDropHandler from '@/components/miaoDropHandler.vue'
import { NIcon } from 'naive-ui'
import {
CloseOutline, SearchOutline, FilterOutline, CheckmarkDoneOutline,
DocumentText,
FileTray
} from '@vicons/ionicons5'
import usePluginCenter from '@/hooks/usePluginCenter'
const { baseUrl, api } = Config
const dataBus = useDataBus()
const views = useVirtualPages()
const uploadQueue = useUploadQueue()
const miaoFetchApi = useMiaoFetchApi()
const pluginCenter = usePluginCenter()
const props = defineProps<{
color: string
@@ -136,11 +66,12 @@ const emit = defineEmits<{
}>()
const popupInput = ref()
const scrollbarRef = ref()
// 是否显示模态框
const showModel = ref(0)
const searchText = ref<string>('')
const showDirs = ref<boolean>(true)
const showFiles = ref<boolean>(true)
const miaoDirectoryItemRef = ref()
class SelectedItem {
constructor() {
@@ -151,15 +82,18 @@ class SelectedItem {
this._selectedItem = [item, ...this._selectedItem]
}
remove(item: VirtualDirectory | VirtualFile) {
this._selectedItem = this._selectedItem.filter(v => v !== item)
this._selectedItem = this._selectedItem.filter((v) => v !== item)
}
clear() {
this._selectedItem = []
}
// 保证内容仍然存在于dir中且各个元素不重复
get value() {
const _filterList = [...(currentDirectory.value?.directories ?? []), ...(currentDirectory.value?.files ?? [])]
return uniq(this._selectedItem).filter(v => {
const _filterList = [
...(currentDirectory.value?.directories ?? []),
...(currentDirectory.value?.files ?? []),
]
return uniq(this._selectedItem).filter((v) => {
if (currentDirectory.value === undefined) {
return false
}
@@ -172,7 +106,7 @@ class SelectedItem {
const selectedItem = reactive(new SelectedItem())
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
required: true
required: true,
})
// 目前展示的Dir
@@ -187,45 +121,95 @@ const index = computed(() => {
// 用于展示的数据,后续会增加排序等操作
const showData_directory = computed<VirtualDirectory[]>(() => {
const data = currentDirectory.value?.directories
if (showDirs.value === false) {
return []
}
let data = currentDirectory.value?.directories
? [...currentDirectory.value?.directories]
: []
if (searchText.value !== '') {
data = data.filter(vd => vd.name.includes(searchText.value))
}
return data
})
const showData_files = computed<VirtualFile[]>(() => {
const data = currentDirectory.value?.files
? [...currentDirectory.value?.files]
: []
if (showFiles.value === false) {
return []
}
let data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : []
if (searchText.value !== '') {
data = data.filter(vd => vd.name.includes(searchText.value))
}
return data
})
// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
// const data = currentDirectory.value?.directories
// ? [...currentDirectory.value?.directories]
// : []
// data.push(...currentDirectory.value?.files)
// return data
// })
// 用于监听拖拽文件事件
const rootDomRef = ref<HTMLDivElement>()
const topBarMenuOption = computed(() => {
return [
{
label: '搜索',
key: 'search',
icon: renderIcon(SearchOutline)
},
searchText.value !== '' ? {
label: '重置搜索',
key: 'searchReset',
icon: renderIcon(SearchOutline)
} : undefined,
selectedItem.value.length !== 0 ? {
label: '重置多选',
key: 'selectedItemReset',
icon: renderIcon(CheckmarkDoneOutline)
} : undefined,
{
label: '筛选',
key: 'filter',
children: [
{
label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
key: 'showDirs',
icon: renderIcon(FileTray)
},
{
label: `${showFiles.value ? '隐藏' : '显示'}文件`,
key: 'showFiles',
icon: renderIcon(DocumentText)
},
],
icon: renderIcon(FilterOutline)
},
...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
label: `插件:${v.name}`,
key: `plugin:${v.key}`
})),
{
label: '关闭',
key: 'close',
icon: renderIcon(CloseOutline)
},
].filter(v => v !== undefined)
})
const uploadQueue = useUploadQueue()
const renderIcon = (icon: any) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
})
}
}
// 设置显示的dir
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
if (
virtualDirectory.files === undefined ||
virtualDirectory.directories === undefined
) {
if (virtualDirectory.files === undefined || virtualDirectory.directories === undefined) {
await virtualDirectory.update()
} else {
virtualDirectory.update()
}
if (currentDirectories.value[0] !== virtualDirectory) {
selectedItem.clear()
handleSearchReset()
nextTick(() => {
scrollbarRef.value.scrollTo({
miaoDirectoryItemRef.value.scrollTo({
top: 0,
behavior: "instant"
})
@@ -243,7 +227,7 @@ const openUrl = (
config?: {
download?: string
target?: string
}
},
) => {
let { target, download } = config ?? {}
const a = document.createElement('a')
@@ -253,6 +237,25 @@ const openUrl = (
a.click()
}
const handleTopBarMenuSelect = (key: string) => {
if (key === 'close') {
emit('exit')
} else if (key === 'search') {
handleSearch()
} else if (key === 'searchReset') {
handleSearchReset()
} else if (key === 'selectedItemReset') {
selectedItem.clear()
} else if (key === 'showDirs') {
showDirs.value = !showDirs.value
} else if (key === 'showFiles') {
showFiles.value = !showFiles.value
} else if (key.startsWith('plugin:')) {
const pluginName = key.split(':')[1]
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
}
}
const handleBack = () => {
if (currentDirectory.value?.parent) {
setCurrentDirectory(currentDirectory.value.parent)
@@ -277,7 +280,7 @@ const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
const handleItemDownload = (item: VirtualFile) => {
openUrl(`${baseUrl}${api.get}${item.path}`, {
download: item.name
download: item.name,
})
}
@@ -285,7 +288,7 @@ const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
for (let item of uniq([...selectedItem.value, _item])) {
; (async () => {
const { response } = miaoFetchApi.delete(item, {
retry: 5
retry: 5,
})
// todo: 将删除事件统一用一个事件管理中心管理
const id = (await response).eventId
@@ -304,27 +307,27 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
showInput: true,
inputValue: item.name,
inputProps: {
placeholder: item.name
placeholder: item.name,
},
options: [
{
label: '取消',
key: false,
type: 'error'
type: 'error',
},
{
label: '确认',
key: true,
type: 'success'
}
]
type: 'success',
},
],
})
if (popupRes.key === false) {
return
}
const newName = popupRes.text
const { response } = miaoFetchApi.rename(item, newName, {
retry: 5
retry: 5,
})
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
@@ -336,11 +339,11 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
const handleItemDragStart = async (
_event: DragEvent,
item: VirtualDirectory | VirtualFile
item: VirtualDirectory | VirtualFile,
) => {
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'))
dataBus.set('dragData_vFiles', items.filter((v) => v.type === 'file'))
dataBus.set('dragData_vDirectory', items.filter((v) => v.type === 'directory'))
// selectedItem.clear()
}
@@ -349,7 +352,7 @@ const handleDropFiles = async (files: File[]) => {
uploadQueue.push(files, currentDirectory.value, {
onFinish() {
reload()
}
},
})
}
@@ -359,6 +362,9 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
if (currentDirectory.value.getParents.includes(vDir)) {
return
}
if(vDir.parent === currentDirectory.value) {
return
}
}
for (let dir of vDirs) {
; (async () => {
@@ -396,13 +402,13 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
const handlePickFilesUpload = async () => {
const files = await filePicker({
multiple: true
multiple: true,
})
const _currDir = currentDirectory.value
uploadQueue.push(files, _currDir, {
onFinish() {
_currDir.update()
}
},
})
}
@@ -411,25 +417,25 @@ const handleAddNewItem = async () => {
title: '新建文件/文件夹',
showInput: true,
inputProps: {
placeholder: ''
placeholder: '',
},
options: [
{
label: '取消',
key: 'cancel',
type: 'error'
type: 'error',
},
{
label: '文件',
key: 'file',
type: 'success'
type: 'success',
},
{
label: '文件夹',
key: 'dir',
type: 'success'
}
]
type: 'success',
},
],
})
// todo: 上传前如重名文件夹等等的错误提前检查
if (popupRes.key === 'cancel' || popupRes.text === '') {
@@ -459,6 +465,44 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
selectedItem.remove(item)
}
}
const handleSearch = async () => {
const popupRes = await popupInput.value.popup({
title: '搜索当前文件夹',
showInput: true,
inputValue: searchText.value,
inputProps: {
placeholder: '',
},
options: [
{
label: '取消',
key: 'cancel',
type: 'default',
},
{
label: '重置',
key: 'reset',
type: 'default',
},
{
label: '搜索',
key: 'search',
type: 'success',
},
],
})
console.log(popupRes)
if (popupRes.key === 'search') {
searchText.value = popupRes.text
} else if (popupRes.key === 'reset') {
handleSearchReset()
}
}
const handleSearchReset = () => {
searchText.value = ''
}
onMounted(async () => {
await setCurrentDirectory(currentDirectory.value)
})
@@ -477,153 +521,5 @@ $bottom-bar-height: 60px;
flex-direction: column;
overflow: hidden;
min-width: 170px;
.container-top {
height: $top-height;
width: 100%;
user-select: none;
position: relative;
display: flex;
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-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: space-around;
align-items: center;
user-select: none;
box-shadow: 0px 1px 10px #888888;
z-index: 2;
.container-bottom-item {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
.container-bottom-item-icon {
svg {
width: 30px;
height: 30px;
transition: all 0.3s ease;
cursor: pointer;
}
&:hover {
svg {
width: 40px;
height: 40px;
}
}
}
}
}
}
// transition动画相关
// .miao-directory-item-container {
// .container-items {
// .dirItem-move {
// transition: all 0.2s ease;
// }
// .dirItem-leave-active {
// transition: none;
// }
// .dirItem-enter-from {
// opacity: 0;
// }
// .dirItem-leave-active {
// position: absolute;
// }
// }
// }</style>
</style>
+1 -2
View File
@@ -66,9 +66,8 @@ const activeImageIndex = ref(-1)
const scrollToActiveImage = () => {
const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
console.log({ dom })
NScrollbarRef.value.scrollTo({
top: dom?.offsetTop - 30 ?? 0,
top: dom.offsetTop - 30,
behavior: "smooth"
})
}