539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

feat: 重构部分组件，使miaoDirectoryItem更加通用

Browse Source
This commit is contained in:
539943419 committed 2024-09-01 14:45:29 +08:00
1 parent 938dde4c1c
commit 9aec221ea3
6 files changed
+127 -113
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/miaoDirectory/miaoDirectoryItem.vue
+27 -86
View File
@@ -1,6 +1,6 @@
<template>
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
<miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
<div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
@@ -13,19 +13,12 @@
{{ time }}
</div>
</div>
<!-- 菜单现在通过右键/长按呼出 -->
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
<div class="item-main-option" @click="(e) => e.stopPropagation()">
<EllipsisVertical class="item-main-option-icon" />
</div>
</n-dropdown> -->
</div>
</miaoContextMenu>
</div>
</template>
<script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoContextMenu from '../miaoContextMenu.vue'
import {
DocumentText,
@@ -39,33 +32,37 @@ import {
PlayCircle,
Disc
} from '@vicons/ionicons5'
import { computed, onMounted, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import dateFormatter from '@/hooks/dateFormatter'
import { NEllipsis } from 'naive-ui'
import usePluginCenter from '@/hooks/usePluginCenter'
import { DropdownOption } from 'naive-ui/es/dropdown';
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
// const miaoFetchApi = useMiaoFetchApi()
const props = defineProps<{
item: VirtualDirectory | VirtualFile
item: {
name: string,
type: 'directory' | 'file'
stats: {
mtimeMs: number
}
}
name?: string
color: string
selectedItem: (VirtualDirectory | VirtualFile)[]
dropDownOptions?: DropdownOption[]
selected?: boolean
}>()
const emit = defineEmits<{
download: []
delete: []
rename: []
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
dragStart: [event: DragEvent]
onSelected: []
plugin: [plugin: string]
}>()
const pluginCenter = usePluginCenter()
const itemType = ref<'file' | 'directory'>(props.item.type)
const mainRef = ref<HTMLDivElement>()
// 使用ResizeObserver实现
@@ -73,9 +70,11 @@ const clientWidth = ref<number>(666)
const name = props.name ?? props.item.name
const selected = computed(() => {
return props.selectedItem.includes(props.item)
})
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
clientWidth.value = entry.contentRect.width;
}
});
const time = computed(() => {
return dateFormatter(
@@ -84,59 +83,6 @@ const time = computed(() => {
)
})
const dropDownOptions = computed(() => {
const items = [...props.selectedItem]
if (!selected.value) {
items.push(props.item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
const options = [
{
label: '重命名',
key: 'rename'
},
{
label: '删除',
key: 'delete'
},
]
if (itemType.value === 'file') {
options.push(
...[
{
label: '下载',
key: 'download'
}
]
)
}
if (selected.value === false) {
options.push(
...[
{
label: '多选:选择',
key: 'select'
}
]
)
} else {
options.push(
...[
{
label: '多选:取消',
key: 'select'
}
]
)
}
options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
label: `插件:${v.name}`,
key: `plugin:${v.key}`
})))
return options
})
// 是不是可以直接在这里面实现？
// 应该将所有事件emit出去才对
const handleDropdownSelect = (key: string) => {
@@ -149,14 +95,8 @@ const handleDropdownSelect = (key: string) => {
} else if (key === 'select') {
emit('onSelected')
} else if (key.startsWith('plugin:')) {
const items = [...props.selectedItem]
if (!selected.value) {
items.push(props.item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
const plugin = key.split(':')[1]
pluginCenter.usePlugin(plugin, vDirs, vFiles)
emit('plugin', plugin)
}
}
@@ -218,20 +158,21 @@ const Icon = computed(() => {
const itemRef = ref()
const handleDragStart = (event: DragEvent) => {
emit('dragStart', event, props.item)
emit('dragStart', event)
// dataBus.set('dragData', [props.item])
}
onMounted(() => {
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
clientWidth.value = entry.contentRect.width;
}
});
if (mainRef.value) {
observer.observe(mainRef.value);
}
})
onBeforeUnmount(() => {
if (mainRef.value) {
observer.unobserve(mainRef.value);
}
})
</script>
<style lang="scss" scoped>
src/components/miaoDirectory/miaoDirectoryItemsContainer.vue
+85 -12
View File
@@ -4,16 +4,19 @@
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
<miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" 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 v-for="(dir) in showData_directory" :key="dir.id" min-height="50px">
<miaoDirectoryItem :item="dir" :color="props.color" :selected="selectedItem.includes(dir)"
:drop-down-options="itemDropDownOptions(dir).value" @delete="handleItemDelete(dir)"
@plugin="p => handleItemUsePlugin(dir)(p)" @click="handleItemClick(dir)"
@drag-start="e => handleItemDragStart(dir)(e)" @rename="handleItemRename(dir)"
@on-selected="handleItemSelect(dir)" />
</miao-lazy-div>
<miao-lazy-div v-for="(file) in showData_files" :key="file.uid" 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 v-for="(file) in showData_files" :key="file.id" min-height="50px">
<miaoDirectoryItem :item="file" :color="props.color" :selected="selectedItem.includes(file)"
:drop-down-options="itemDropDownOptions(file).value" @click="handleItemClick(file)"
@download="handleItemDownload(file)" @delete="handleItemDelete(file)"
@drag-start="e => handleItemDragStart(file)(e)" @rename="handleItemRename(file)"
@plugin="p => handleItemUsePlugin(file)(p)" @on-selected="handleItemSelect(file)" />
</miao-lazy-div>
</n-scrollbar>
</div>
@@ -24,7 +27,10 @@ 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';
import { computed, ref } from 'vue';
import usePluginCenter from '@/hooks/usePluginCenter';
const pluginCenter = usePluginCenter()
const props = defineProps<{
color: string
@@ -45,7 +51,60 @@ const emit = defineEmits<{
const scrollbarRef = ref()
defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed(() => {
const items = [...props.selectedItem]
const selected = props.selectedItem.includes(item)
if (!selected) {
items.push(item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
const options = [
{
label: '重命名',
key: 'rename'
},
{
label: '删除',
key: 'delete'
},
]
if (item.type === 'file') {
options.push(
...[
{
label: '下载',
key: 'download'
}
]
)
}
if (selected === false) {
options.push(
...[
{
label: '多选:选择',
key: 'select'
}
]
)
} else {
options.push(
...[
{
label: '多选:取消',
key: 'select'
}
]
)
}
options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
label: `插件:${v.name}`,
key: `plugin:${v.key}`
})))
return options
})
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
emit('item-click', item)
@@ -59,7 +118,7 @@ const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
emit('item-delete', item)
}
const handleItemDragStart = (_event: DragEvent, item: VirtualDirectory | VirtualFile) => {
const handleItemDragStart = (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
emit('item-drag-start', _event, item)
}
@@ -70,6 +129,20 @@ const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
emit('item-select', item)
}
const handleItemUsePlugin = (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
const items = [...props.selectedItem]
const selected = props.selectedItem.includes(item)
if (!selected) {
items.push(item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
pluginCenter.usePlugin(plugin, vDirs, vFiles)
}
defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
</script>
<style scoped lang="scss">