Compare commits
4
Commits
2.0.0
...
7574acdad2
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
7574acdad2 | ||
|
|
704c80e019 | ||
|
|
210e251b23 | ||
|
|
93ca2a29a6 |
No files matched your search
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
|
<link rel="icon" type="image/svg+xml" href="./favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>MiaoDirectory</title>
|
<title>MiaoDirectory</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
+4
-4
@@ -42,11 +42,11 @@ const rootDirectory = reactive(
|
|||||||
// component就是一个vue组件,类似于miaoDirectory
|
// component就是一个vue组件,类似于miaoDirectory
|
||||||
const createView = (
|
const createView = (
|
||||||
component: any,
|
component: any,
|
||||||
currentDirectorys?: VirtualDirectory[],
|
currentDirectories?: VirtualDirectory[],
|
||||||
currentFiles?: VirtualFile[],
|
currentFiles?: VirtualFile[],
|
||||||
index?: number
|
index?: number
|
||||||
) => {
|
) => {
|
||||||
views.push(component, currentDirectorys, currentFiles, index)
|
views.push(component, currentDirectories, currentFiles, index)
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteView = (index: number) => {
|
const deleteView = (index: number) => {
|
||||||
@@ -147,7 +147,7 @@ onMounted(() => {
|
|||||||
@click="
|
@click="
|
||||||
createView(
|
createView(
|
||||||
view.component,
|
view.component,
|
||||||
view.currentDirectorys,
|
view.currentDirectories,
|
||||||
view.currentFiles,
|
view.currentFiles,
|
||||||
index + 1
|
index + 1
|
||||||
)
|
)
|
||||||
@@ -186,7 +186,7 @@ onMounted(() => {
|
|||||||
:key="view.uid">
|
:key="view.uid">
|
||||||
<component
|
<component
|
||||||
:is="view.component"
|
:is="view.component"
|
||||||
v-model:current-directorys="view.currentDirectorys"
|
v-model:current-directories="view.currentDirectories"
|
||||||
v-model:current-files="view.currentFiles"
|
v-model:current-files="view.currentFiles"
|
||||||
:id="view.uid"
|
:id="view.uid"
|
||||||
:color="view.color"
|
:color="view.color"
|
||||||
|
|||||||
+10
-10
@@ -6,8 +6,8 @@ type plugin = {
|
|||||||
name: string
|
name: string
|
||||||
// 判断是否可以使用这个组件
|
// 判断是否可以使用这个组件
|
||||||
// 使用组件即调用下面的func
|
// 使用组件即调用下面的func
|
||||||
filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
||||||
func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void
|
func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class PluginCenter {
|
export default class PluginCenter {
|
||||||
@@ -30,7 +30,7 @@ export default class PluginCenter {
|
|||||||
name: string,
|
name: string,
|
||||||
getComponent: () => Promise<any>,
|
getComponent: () => Promise<any>,
|
||||||
filter: (
|
filter: (
|
||||||
VDirectorys: VirtualDirectory[],
|
VDirectories: VirtualDirectory[],
|
||||||
VFiles: VirtualFile[]
|
VFiles: VirtualFile[]
|
||||||
) => boolean
|
) => boolean
|
||||||
): void {
|
): void {
|
||||||
@@ -40,22 +40,22 @@ export default class PluginCenter {
|
|||||||
name,
|
name,
|
||||||
filter,
|
filter,
|
||||||
func: async (
|
func: async (
|
||||||
VDirectorys: VirtualDirectory[],
|
VDirectories: VirtualDirectory[],
|
||||||
VFiles: VirtualFile[]
|
VFiles: VirtualFile[]
|
||||||
) => {
|
) => {
|
||||||
if (filter(VDirectorys, VFiles) === false) {
|
if (filter(VDirectories, VFiles) === false) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (_component === undefined) _component = await getComponent()
|
if (_component === undefined) _component = await getComponent()
|
||||||
views.push(_component, VDirectorys, VFiles)
|
views.push(_component, VDirectories, VFiles)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
|
getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
|
||||||
const usableList = []
|
const usableList = []
|
||||||
for (let key of Object.keys(this.pluginsMap)) {
|
for (let key of Object.keys(this.pluginsMap)) {
|
||||||
if (this.pluginsMap[key].filter(VDirectorys, VFiles)) {
|
if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
|
||||||
usableList.push(key)
|
usableList.push(key)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -67,9 +67,9 @@ export default class PluginCenter {
|
|||||||
|
|
||||||
usePlugin(
|
usePlugin(
|
||||||
key: string,
|
key: string,
|
||||||
VDirectorys: VirtualDirectory[],
|
VDirectories: VirtualDirectory[],
|
||||||
VFiles: VirtualFile[]
|
VFiles: VirtualFile[]
|
||||||
) {
|
) {
|
||||||
this.pluginsMap[key].func(VDirectorys, VFiles)
|
this.pluginsMap[key].func(VDirectories, VFiles)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -43,7 +43,7 @@ class VirtualDirectory {
|
|||||||
// 子文件
|
// 子文件
|
||||||
files?: VirtualFile[];
|
files?: VirtualFile[];
|
||||||
// 子目录
|
// 子目录
|
||||||
directorys?: VirtualDirectory[];
|
directories?: VirtualDirectory[];
|
||||||
// 没啥意义,标注一下就是了
|
// 没啥意义,标注一下就是了
|
||||||
type: "directory";
|
type: "directory";
|
||||||
// 文件夹创建时间等杂项属性
|
// 文件夹创建时间等杂项属性
|
||||||
@@ -98,9 +98,9 @@ class VirtualDirectory {
|
|||||||
|
|
||||||
updateContent(content: (file | directory)[]) {
|
updateContent(content: (file | directory)[]) {
|
||||||
this.files = this.files ?? [];
|
this.files = this.files ?? [];
|
||||||
this.directorys = this.directorys ?? [];
|
this.directories = this.directories ?? [];
|
||||||
const fileNames: string[] = this.files.map(v => v.name);
|
const fileNames: string[] = this.files.map(v => v.name);
|
||||||
const dirNames: string[] = this.directorys.map(v => v.name);
|
const dirNames: string[] = this.directories.map(v => v.name);
|
||||||
const itemNames: string[] = content.map(v => v.name);
|
const itemNames: string[] = content.map(v => v.name);
|
||||||
// 删去远程端已不存在的文件与文件夹
|
// 删去远程端已不存在的文件与文件夹
|
||||||
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
||||||
@@ -114,7 +114,7 @@ class VirtualDirectory {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
_delete(this.files);
|
_delete(this.files);
|
||||||
_delete(this.directorys);
|
_delete(this.directories);
|
||||||
// 加入新的文件与文件夹
|
// 加入新的文件与文件夹
|
||||||
for (let item of content) {
|
for (let item of content) {
|
||||||
if (item.type === "file") {
|
if (item.type === "file") {
|
||||||
@@ -123,7 +123,7 @@ class VirtualDirectory {
|
|||||||
}
|
}
|
||||||
} else if (item.type === "directory") {
|
} else if (item.type === "directory") {
|
||||||
if (!dirNames.includes(item.name)) {
|
if (!dirNames.includes(item.name)) {
|
||||||
this.directorys.push(new VirtualDirectory(item, this));
|
this.directories.push(new VirtualDirectory(item, this));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -131,7 +131,7 @@ class VirtualDirectory {
|
|||||||
|
|
||||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
||||||
if (item.type === "directory") {
|
if (item.type === "directory") {
|
||||||
return this.directorys?.includes(item) ?? false;
|
return this.directories?.includes(item) ?? false;
|
||||||
} else {
|
} else {
|
||||||
return this.files?.includes(item) ?? false;
|
return this.files?.includes(item) ?? false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,9 +13,9 @@ const getRandomWebSafeColor = (() => {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
export default class VirtualPage {
|
export default class VirtualPage {
|
||||||
constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) {
|
constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
|
||||||
this.component = shallowRef(component);
|
this.component = shallowRef(component);
|
||||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
this.currentDirectories = initObjects?.directories ?? [];
|
||||||
this.currentFiles = initObjects?.files ?? [];
|
this.currentFiles = initObjects?.files ?? [];
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
this.uid = generateId();
|
this.uid = generateId();
|
||||||
@@ -27,7 +27,7 @@ export default class VirtualPage {
|
|||||||
// 是否可见
|
// 是否可见
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
// 当前正在使用的文件夹
|
// 当前正在使用的文件夹
|
||||||
currentDirectorys: VirtualDirectory[];
|
currentDirectories: VirtualDirectory[];
|
||||||
// 当前正在使用的文件
|
// 当前正在使用的文件
|
||||||
currentFiles: VirtualFile[];
|
currentFiles: VirtualFile[];
|
||||||
// 区分每一个页面的唯一id
|
// 区分每一个页面的唯一id
|
||||||
@@ -43,7 +43,7 @@ export default class VirtualPage {
|
|||||||
if (this._title) {
|
if (this._title) {
|
||||||
return this._title;
|
return this._title;
|
||||||
}
|
}
|
||||||
return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
|
return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
|
||||||
}
|
}
|
||||||
|
|
||||||
setTitle(title: string) {
|
setTitle(title: string) {
|
||||||
@@ -101,14 +101,14 @@ export class VirtualPages {
|
|||||||
/**
|
/**
|
||||||
* 推入一个新的页面
|
* 推入一个新的页面
|
||||||
*/
|
*/
|
||||||
push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
|
push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
|
||||||
index ?? (index = this.length);
|
index ?? (index = this.length);
|
||||||
this._views.splice(
|
this._views.splice(
|
||||||
index,
|
index,
|
||||||
0,
|
0,
|
||||||
reactive<VirtualPage>(
|
reactive<VirtualPage>(
|
||||||
new VirtualPage(component, {
|
new VirtualPage(component, {
|
||||||
directorys: [...(currentDirectorys ?? [])],
|
directories: [...(currentDirectories ?? [])],
|
||||||
files: [...(currentFiles ?? [])]
|
files: [...(currentFiles ?? [])]
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -0,0 +1,95 @@
|
|||||||
|
<!-- 只适合用于渲染过程较为复杂的组件,不然可能得不偿失
|
||||||
|
这么泛用的组件,性能差点也能理解 -->
|
||||||
|
<template>
|
||||||
|
<div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
|
||||||
|
<slot v-if="show" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
disableLazy: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 仅在内容未加载时生效,用于占位
|
||||||
|
minHeight: {
|
||||||
|
type: String,
|
||||||
|
default: 'none',
|
||||||
|
},
|
||||||
|
minWidth: {
|
||||||
|
type: String,
|
||||||
|
default: 'none',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const miaoLazyRoot = ref<HTMLDivElement>()
|
||||||
|
|
||||||
|
const show = ref<boolean>(props.disableLazy)
|
||||||
|
|
||||||
|
const isVisible = (dom: HTMLDivElement) => {
|
||||||
|
const offset = dom.getBoundingClientRect().top
|
||||||
|
return offset > 0 && offset < 2000
|
||||||
|
}
|
||||||
|
|
||||||
|
const { showSlot, hideSlot, clearTimer } = (() => {
|
||||||
|
let timer: any
|
||||||
|
let timerInterval: any
|
||||||
|
const clearTimer = () => {
|
||||||
|
timer && clearTimeout(timer)
|
||||||
|
timerInterval && clearInterval(timerInterval)
|
||||||
|
timer = undefined
|
||||||
|
timerInterval = undefined
|
||||||
|
}
|
||||||
|
const hideSlot = () => {
|
||||||
|
clearTimer()
|
||||||
|
show.value = false
|
||||||
|
}
|
||||||
|
const showSlot = () => {
|
||||||
|
if (show.value === true) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
clearTimer()
|
||||||
|
// timer = setTimeout(() => {
|
||||||
|
if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
show.value = true
|
||||||
|
timerInterval = setInterval(() => {
|
||||||
|
if (show.value === false || miaoLazyRoot.value === undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (isVisible(miaoLazyRoot.value) === false) {
|
||||||
|
hideSlot()
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
return { showSlot, hideSlot, clearTimer }
|
||||||
|
})()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (show.value === false) {
|
||||||
|
let options = {
|
||||||
|
threshold: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting) {
|
||||||
|
showSlot()
|
||||||
|
// miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
|
||||||
|
// observer = undefined
|
||||||
|
} else {
|
||||||
|
hideSlot()
|
||||||
|
}
|
||||||
|
}, options);
|
||||||
|
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
clearTimer()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -98,4 +98,21 @@ export default function init() {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
pluginCenter.registerComponent(
|
||||||
|
"miaoImages",
|
||||||
|
"图片浏览",
|
||||||
|
async () => (await import("@/views/miaoImages.vue")).default,
|
||||||
|
(vDirs, vFiles) => {
|
||||||
|
if (vDirs.length === 0 && vFiles.length === 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
miao: for (let vf of vFiles)
|
||||||
|
for (let end of [".xbm", ".tif", "pjp", ".svgz", "jpg", "jpeg", "ico", "tiff", ".gif", "svg", ".jfif", ".webp", ".png", ".bmp", "pjpeg", ".avif"]) {
|
||||||
|
if (vf.name.endsWith(end)) {
|
||||||
|
continue miao;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@@ -3,7 +3,7 @@ import { Reactive, reactive } from "vue"
|
|||||||
|
|
||||||
let views: Reactive<VirtualPages>
|
let views: Reactive<VirtualPages>
|
||||||
|
|
||||||
export default function useViretualPages(){
|
export default function useVirtualPages(){
|
||||||
if(views === undefined) {
|
if(views === undefined) {
|
||||||
// views = reactive<VirtualPage[]>([])
|
// views = reactive<VirtualPage[]>([])
|
||||||
views = reactive(new VirtualPages())
|
views = reactive(new VirtualPages())
|
||||||
|
|||||||
+40
-22
@@ -40,19 +40,24 @@
|
|||||||
backgroundColor:
|
backgroundColor:
|
||||||
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||||
}">
|
}">
|
||||||
<n-scrollbar>
|
<n-scrollbar ref="scrollbarRef">
|
||||||
<transition-group name="dirItem">
|
<transition-group name="dirItem">
|
||||||
<miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
|
<miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid"
|
||||||
:color="props.color" :selectedItem="selectedItem.value" @delete="handleItemDelete(dir)"
|
:disableLazy="index < 20" min-height="50px">
|
||||||
@click="handleItemClick(dir)" @drag-start="handleItemDragStart"
|
<miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem.value"
|
||||||
@rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
|
@delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
|
||||||
|
@drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
|
||||||
|
@on-selected="handleItemSelect(dir)" />
|
||||||
|
</miao-lazy-div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
<transition-group name="dirItem">
|
<transition-group name="dirItem">
|
||||||
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
|
<miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
|
||||||
:color="props.color" :selectedItem="selectedItem.value" @click="handleItemClick(file)"
|
min-height="50px">
|
||||||
@download="handleItemDownload(file)" @delete="handleItemDelete(file)"
|
<miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem.value"
|
||||||
@drag-start="handleItemDragStart" @rename="handleItemRename(file)"
|
@click="handleItemClick(file)" @download="handleItemDownload(file)"
|
||||||
@on-selected="handleItemSelect(file)" />
|
@delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
|
||||||
|
@rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
|
||||||
|
</miao-lazy-div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
<!-- <n-virtual-list :item="showData_all" :item-size="50">
|
<!-- <n-virtual-list :item="showData_all" :item-size="50">
|
||||||
|
|
||||||
@@ -93,10 +98,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
|
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
import { computed, onMounted, reactive, ref } from 'vue'
|
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
import Config from '@/config'
|
import Config from '@/config'
|
||||||
import miaoMask from '@/components/miaoMask.vue'
|
import miaoMask from '@/components/miaoMask.vue'
|
||||||
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
|
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
|
||||||
|
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
|
||||||
import miaoPopupInput from '@/components/miaoPopupInput.vue'
|
import miaoPopupInput from '@/components/miaoPopupInput.vue'
|
||||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||||
@@ -130,6 +136,9 @@ const emit = defineEmits<{
|
|||||||
}>()
|
}>()
|
||||||
|
|
||||||
const popupInput = ref()
|
const popupInput = ref()
|
||||||
|
|
||||||
|
const scrollbarRef = ref()
|
||||||
|
|
||||||
// 是否显示模态框
|
// 是否显示模态框
|
||||||
const showModel = ref(0)
|
const showModel = ref(0)
|
||||||
|
|
||||||
@@ -149,25 +158,26 @@ class SelectedItem {
|
|||||||
}
|
}
|
||||||
// 保证内容仍然存在于dir中且各个元素不重复
|
// 保证内容仍然存在于dir中且各个元素不重复
|
||||||
get value() {
|
get value() {
|
||||||
|
const _filterList = [...(currentDirectory.value?.directories ?? []), ...(currentDirectory.value?.files ?? [])]
|
||||||
return uniq(this._selectedItem).filter(v => {
|
return uniq(this._selectedItem).filter(v => {
|
||||||
if (currentDirectory.value === undefined) {
|
if (currentDirectory.value === undefined) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
|
return _filterList.includes(v)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 已选择的item,用于多选功能
|
// 已选择的item,用于多选功能
|
||||||
const selectedItem = reactive(new SelectedItem())
|
const selectedItem = reactive(new SelectedItem())
|
||||||
|
|
||||||
const currentDirectorys = defineModel<VirtualDirectory[]>('currentDirectorys', {
|
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
|
||||||
required: true
|
required: true
|
||||||
})
|
})
|
||||||
|
|
||||||
// 目前展示的Dir
|
// 目前展示的Dir
|
||||||
const currentDirectory = computed(() => {
|
const currentDirectory = computed(() => {
|
||||||
return currentDirectorys.value[0]
|
return currentDirectories.value[0]
|
||||||
})
|
})
|
||||||
|
|
||||||
// 当前组件在views中的序号
|
// 当前组件在views中的序号
|
||||||
@@ -177,8 +187,8 @@ const index = computed(() => {
|
|||||||
|
|
||||||
// 用于展示的数据,后续会增加排序等操作
|
// 用于展示的数据,后续会增加排序等操作
|
||||||
const showData_directory = computed<VirtualDirectory[]>(() => {
|
const showData_directory = computed<VirtualDirectory[]>(() => {
|
||||||
const data = currentDirectory.value?.directorys
|
const data = currentDirectory.value?.directories
|
||||||
? [...currentDirectory.value?.directorys]
|
? [...currentDirectory.value?.directories]
|
||||||
: []
|
: []
|
||||||
return data
|
return data
|
||||||
})
|
})
|
||||||
@@ -189,8 +199,8 @@ const showData_files = computed<VirtualFile[]>(() => {
|
|||||||
return data
|
return data
|
||||||
})
|
})
|
||||||
// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
|
// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
|
||||||
// const data = currentDirectory.value?.directorys
|
// const data = currentDirectory.value?.directories
|
||||||
// ? [...currentDirectory.value?.directorys]
|
// ? [...currentDirectory.value?.directories]
|
||||||
// : []
|
// : []
|
||||||
// data.push(...currentDirectory.value?.files)
|
// data.push(...currentDirectory.value?.files)
|
||||||
// return data
|
// return data
|
||||||
@@ -206,13 +216,22 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
|||||||
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
|
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
|
||||||
if (
|
if (
|
||||||
virtualDirectory.files === undefined ||
|
virtualDirectory.files === undefined ||
|
||||||
virtualDirectory.directorys === undefined
|
virtualDirectory.directories === undefined
|
||||||
) {
|
) {
|
||||||
await virtualDirectory.update()
|
await virtualDirectory.update()
|
||||||
} else {
|
} else {
|
||||||
virtualDirectory.update()
|
virtualDirectory.update()
|
||||||
}
|
}
|
||||||
currentDirectorys.value[0] = virtualDirectory
|
if (currentDirectories.value[0] !== virtualDirectory) {
|
||||||
|
selectedItem.clear()
|
||||||
|
nextTick(() => {
|
||||||
|
scrollbarRef.value.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: "instant"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
currentDirectories.value[0] = virtualDirectory
|
||||||
}
|
}
|
||||||
|
|
||||||
const reload = () => {
|
const reload = () => {
|
||||||
@@ -607,5 +626,4 @@ $bottom-bar-height: 60px;
|
|||||||
// position: absolute;
|
// position: absolute;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }
|
// }</style>
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
|
||||||
|
<div class="miaoImage" ref="rootRef">
|
||||||
|
<n-scrollbar ref="NScrollbarRef">
|
||||||
|
<div class="miaoImage-container">
|
||||||
|
<div class="miaoImage-container-row" v-for="(src, index) in imageSrcList" :key="index">
|
||||||
|
<img :src="src" class="miaoImage-container-row-image" loading="lazy"
|
||||||
|
:class="activeImageIndex === index ? 'miaoImage-container-row-image-active' : ''"
|
||||||
|
@click="activeImageIndex = index" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-scrollbar>
|
||||||
|
<miao-mask :show="activeImageIndex !== -1" @click="activeImageIndex = -1" class="miaoImage-mask">
|
||||||
|
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageIndexBack" />
|
||||||
|
<img :src="imageSrcList[activeImageIndex]" class="miaoImage-mask-active"
|
||||||
|
@click="e => e.stopPropagation()" draggable="false">
|
||||||
|
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
|
||||||
|
@click="handleActiveImageIndexForward" />
|
||||||
|
</miao-mask>
|
||||||
|
</div>
|
||||||
|
</miao-drop-handler>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import miaoMask from '@/components/miaoMask.vue';
|
||||||
|
import miaoDropHandler from '@/components/miaoDropHandler.vue';
|
||||||
|
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
|
import { uniq } from 'lodash';
|
||||||
|
import { nextTick, onMounted, ref } from 'vue'
|
||||||
|
import { NScrollbar } from 'naive-ui';
|
||||||
|
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
|
||||||
|
|
||||||
|
const imageSuffixList = [
|
||||||
|
'xbm',
|
||||||
|
'tif',
|
||||||
|
'pjp',
|
||||||
|
'svgz',
|
||||||
|
'jpg',
|
||||||
|
'jpeg',
|
||||||
|
'ico',
|
||||||
|
'tiff',
|
||||||
|
'gif',
|
||||||
|
'svg',
|
||||||
|
'jfif',
|
||||||
|
'webp',
|
||||||
|
'png',
|
||||||
|
'bmp',
|
||||||
|
'pjpeg',
|
||||||
|
'avif'
|
||||||
|
]
|
||||||
|
|
||||||
|
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
|
||||||
|
required: true
|
||||||
|
})
|
||||||
|
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||||
|
required: true
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const NScrollbarRef = ref()
|
||||||
|
const rootRef = ref<any>()
|
||||||
|
|
||||||
|
const imageSrcList = ref<string[]>([])
|
||||||
|
|
||||||
|
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,
|
||||||
|
behavior: "smooth"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleActiveImageIndexBack = (e: any) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
activeImageIndex.value = (activeImageIndex.value - 1 + imageSrcList.value.length) % imageSrcList.value.length
|
||||||
|
nextTick(scrollToActiveImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleActiveImageIndexForward = (e: any) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
activeImageIndex.value = (activeImageIndex.value + 1 + imageSrcList.value.length) % imageSrcList.value.length
|
||||||
|
nextTick(scrollToActiveImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDrop = (vItems: (VirtualFile | VirtualDirectory)[]) => {
|
||||||
|
if (vItems[0].type === 'directory') {
|
||||||
|
// @ts-ignore
|
||||||
|
currentDirectories.value = [...currentDirectories.value, ...vItems]
|
||||||
|
} else {
|
||||||
|
// @ts-ignore
|
||||||
|
currentFiles.value = [...currentFiles, ...vItems]
|
||||||
|
}
|
||||||
|
vItems.forEach(v => {
|
||||||
|
updateImageSrcList(v)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
|
||||||
|
let srcList: string[]
|
||||||
|
if (source.type === 'directory') {
|
||||||
|
await source.update()
|
||||||
|
srcList = source.files?.filter(v => imageSuffixList.includes(v.name.split('.').pop() ?? '')).map(v => v.url) ?? []
|
||||||
|
} else {
|
||||||
|
srcList = [source.url]
|
||||||
|
}
|
||||||
|
imageSrcList.value = uniq([...imageSrcList.value, ...srcList])
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
[...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.miaoImage {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.miaoImage-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.miaoImage-container-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 25%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
.miaoImage-container-row-image {
|
||||||
|
width: 80%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: width 0.25s;
|
||||||
|
box-shadow: 0 0 10px -5px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.miaoImage-mask {
|
||||||
|
background-color: rgba(0, 0, 0, 0.444);
|
||||||
|
}
|
||||||
|
|
||||||
|
.miaoImage-mask-active {
|
||||||
|
max-width: 80%;
|
||||||
|
max-height: 80%;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.miaoImage-mask-btn {
|
||||||
|
color: #ffffff99;
|
||||||
|
width: 7%;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&-back {
|
||||||
|
left: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-forward {
|
||||||
|
right: 1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||||
// import useViretualPages from '@/hooks/useVirtualPages';
|
// import useVirtualPages from '@/hooks/useVirtualPages';
|
||||||
import XGPlayer from 'xgplayer'
|
import XGPlayer from 'xgplayer'
|
||||||
import '@/style/xgplayer.scss'
|
import '@/style/xgplayer.scss'
|
||||||
import TextTrack from 'xgplayer/es/plugins/track'
|
import TextTrack from 'xgplayer/es/plugins/track'
|
||||||
@@ -26,7 +26,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|||||||
required: true
|
required: true
|
||||||
})
|
})
|
||||||
|
|
||||||
// const views = useViretualPages()
|
// const views = useVirtualPages()
|
||||||
// const view = views.getView(props.id)
|
// const view = views.getView(props.id)
|
||||||
|
|
||||||
// const videoPath = ref<string>('');
|
// const videoPath = ref<string>('');
|
||||||
|
|||||||
Reference in new issue
Block a user