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

feat: 插件注册增加disable和exitConfirm

Browse Source
This commit is contained in:
539943419 committed 2024-09-04 14:19:11 +08:00
1 parent 4d2bd3867f
commit 282bf327bb
5 files changed
+169 -74
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+3 -2
View File
@@ -14,6 +14,8 @@
| VirtualDirectory更新时更新文件信息 | ❌ | | VirtualDirectory更新时更新文件信息 | ❌ |
| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ | | 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
| miaoDirectory的复制文件/文件夹功能 | ❌ | | miaoDirectory的复制文件/文件夹功能 | ❌ |
| 重构miaoDropHandler的实现 | ❌ |
| 重构主界面，拆分主界面组件的实现 | ❌ |
| 长期计划 | | 长期计划 |
@@ -23,5 +25,4 @@
## 碎碎念： ## 碎碎念：
为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。 为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。md想这么多干嘛，反正都快岩壁了，mdmdmdmd
不过可能我对插件的价值也是有所高估吧。
src/App.vue
+1 -2
View File
@@ -9,7 +9,6 @@ import {
EllipsisVertical, EllipsisVertical,
QrCodeOutline QrCodeOutline
} from '@vicons/ionicons5' } from '@vicons/ionicons5'
// import miaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory' import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
import MiaoMask from './components/miaoMask.vue' import MiaoMask from './components/miaoMask.vue'
import config from './config' import config from './config'
@@ -48,7 +47,7 @@ const createView = (
currentFiles?: VirtualFile[], currentFiles?: VirtualFile[],
index?: number index?: number
) => { ) => {
views.push(component, currentDirectories, currentFiles, index) views.push(component, currentDirectories, currentFiles, { index })
} }
const deleteView = (index: number) => { const deleteView = (index: number) => {
src/class/PluginCenter.ts
+11 -3
View File
@@ -14,6 +14,8 @@ export interface registerComponentOption {
getComponent: () => Promise<any> getComponent: () => Promise<any>
group?: PluginGroup[] group?: PluginGroup[]
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
disable?: boolean
exitConfirm?: boolean
} }
type Plugin = { type Plugin = {
@@ -57,7 +59,9 @@ export default class PluginCenter {
getComponent, getComponent,
icon, icon,
filter, filter,
group = [PluginGroup.default] group = [PluginGroup.default],
disable = false,
exitConfirm = false
} = option } = option
let _component: any let _component: any
const views = useVirtualPages() const views = useVirtualPages()
@@ -66,7 +70,7 @@ export default class PluginCenter {
filter, filter,
icon: shallowRef(icon), icon: shallowRef(icon),
group, group,
disable: false, disable,
func: async ( func: async (
VDirectories: VirtualDirectory[], VDirectories: VirtualDirectory[],
VFiles: VirtualFile[] VFiles: VirtualFile[]
@@ -75,7 +79,11 @@ export default class PluginCenter {
return return
} }
if (_component === undefined) _component = await getComponent() if (_component === undefined) _component = await getComponent()
views.push(_component, VDirectories, VFiles) views.push(_component, VDirectories, VFiles, {
VirtualPageOption: {
exitConfirm
}
})
} }
}) })
} }
src/class/VirtualPage.ts
+78 -43
View File
@@ -1,75 +1,104 @@
import { reactive, shallowRef } from "vue"; import { reactive, shallowRef } from 'vue'
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory"; import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import generateId from "@/hooks/generateId"; import generateId from '@/hooks/generateId'
export interface VirtualPageOption {
exitConfirm?: boolean
}
export interface ViewsPushOption {
index?: number
VirtualPageOption?: VirtualPageOption
}
const getRandomWebSafeColor = (() => { const getRandomWebSafeColor = (() => {
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"]; const webSafeColors = [
let counter = 0; '#009900',
'#999900',
'#009999',
'#990099',
'#0000ee'
]
let counter = 0
return () => { return () => {
const color = webSafeColors[counter % webSafeColors.length]; const color = webSafeColors[counter % webSafeColors.length]
counter += 1; counter += 1
return color; return color
}; }
})(); })()
export default class VirtualPage { export default class VirtualPage {
constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) { constructor(
this.component = shallowRef(component); component: any,
this.currentDirectories = initObjects?.directories ?? []; initObjects?: {
this.currentFiles = initObjects?.files ?? []; directories?: VirtualDirectory[]
this.visible = true; files?: VirtualFile[]
this.id = generateId(); option?: VirtualPageOption
this.refreshKey = Math.random(); }
this.color = getRandomWebSafeColor(); ) {
this.component = shallowRef(component)
this.currentDirectories = initObjects?.directories ?? []
this.currentFiles = initObjects?.files ?? []
this.visible = true
this.id = generateId()
this.refreshKey = Math.random()
this.color = getRandomWebSafeColor()
this.exitConfirm = initObjects?.option?.exitConfirm ?? false
} }
// 页面使用的组件 // 页面使用的组件
component: any; component: any
// 是否可见 // 是否可见
visible: boolean; visible: boolean
// 当前正在使用的文件夹 // 当前正在使用的文件夹
currentDirectories: VirtualDirectory[]; currentDirectories: VirtualDirectory[]
// 当前正在使用的文件 // 当前正在使用的文件
currentFiles: VirtualFile[]; currentFiles: VirtualFile[]
// 区分每一个页面的唯一id // 区分每一个页面的唯一id
id: number; id: number
// 当refreshKey改变时需要刷新页面，目前还没接入刷新 // 当refreshKey改变时需要刷新页面，目前还没接入刷新
refreshKey: number; refreshKey: number
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上 // 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
color: string; color: string
// 用于展示的title // 用于展示的title
_title?: string; _title?: string
// 关闭时是否需要确认
exitConfirm: boolean
get title() { get title() {
if (this._title) { if (this._title) {
return this._title; return this._title
} }
return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签"; return (
this?.currentDirectories[0]?.name ??
this?.currentFiles[0]?.name ??
'未命名标签'
)
} }
setTitle(title: string) { setTitle(title: string) {
this._title = title; this._title = title
} }
// 切换显示状态 // 切换显示状态
switchShow() { switchShow() {
this.visible = !this.visible; this.visible = !this.visible
} }
// 刷新，不过好像没有用得到的时候吧 // 刷新，不过好像没有用得到的时候吧
// 事实上也不应该用得到，因为更新应该是响应式的 // 事实上也不应该用得到，因为更新应该是响应式的
refresh() { refresh() {
this.refreshKey = Math.random(); this.refreshKey = Math.random()
} }
} }
export class VirtualPages { export class VirtualPages {
constructor() { constructor() {
this._views = reactive<VirtualPage[]>([]); this._views = reactive<VirtualPage[]>([])
} }
_views: VirtualPage[]; _views: VirtualPage[]
get length() { get length() {
return this._views.length; return this._views.length
} }
/** /**
@@ -80,10 +109,10 @@ export class VirtualPages {
getIndex(id: number) { getIndex(id: number) {
for (let i in this._views) { for (let i in this._views) {
if (this._views[i].id === id) { if (this._views[i].id === id) {
return parseInt(i); return parseInt(i)
} }
} }
return -1; return -1
} }
/** /**
* 根据id得到view * 根据id得到view
@@ -92,32 +121,38 @@ export class VirtualPages {
getView(id: number) { getView(id: number) {
for (let v of this._views) { for (let v of this._views) {
if (v.id === id) { if (v.id === id) {
return v; return v
} }
} }
return undefined; return undefined
} }
/** /**
* 推入一个新的页面 * 推入一个新的页面
*/ */
push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) { push(
index ?? (index = this.length); component: any,
currentDirectories?: VirtualDirectory[],
currentFiles?: VirtualFile[],
option?: ViewsPushOption
) {
const { index = this.length, VirtualPageOption } = option ?? {}
this._views.splice( this._views.splice(
index, index,
0, 0,
reactive<VirtualPage>( reactive<VirtualPage>(
new VirtualPage(component, { new VirtualPage(component, {
directories: [...(currentDirectories ?? [])], directories: [...(currentDirectories ?? [])],
files: [...(currentFiles ?? [])] files: [...(currentFiles ?? [])],
option: VirtualPageOption
}) })
) )
); )
} }
/** /**
* 根据次序删除一个页面 * 根据次序删除一个页面
*/ */
deleteView(index: number) { deleteView(index: number) {
this._views.splice(index, 1); this._views.splice(index, 1)
} }
} }
src/plugins/miaoImages/miaoImages.vue
+76 -24
View File
@@ -1,9 +1,13 @@
<template> <template>
<miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop"> <miao-drop-handler
@on-virtual-directory="handleDrop"
@on-virtual-files="handleDrop">
<miao-message-provider ref="miaoMessageRef"> <miao-message-provider ref="miaoMessageRef">
<div class="miaoImage" ref="rootRef"> <div class="miaoImage" ref="rootRef">
<n-scrollbar ref="NScrollbarRef"> <n-scrollbar ref="NScrollbarRef">
<div class="miaoImage-container" v-for="imageGroup in imageGroupList"> <div
class="miaoImage-container"
v-for="imageGroup in imageGroupList">
<div class="miaoImage-container-day"> <div class="miaoImage-container-day">
<!-- <div class="miaoImage-container-divide miaoImage-container-divide-before"> <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
<div class="miaoImage-container-divide-line"></div> <div class="miaoImage-container-divide-line"></div>
@@ -15,19 +19,39 @@
<div class="miaoImage-container-divide-line"></div> <div class="miaoImage-container-divide-line"></div>
</div> --> </div> -->
</div> </div>
<div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id"> <div
<img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile class="miaoImage-container-row"
v-for="vFile in imageGroup.items"
:key="vFile.id">
<img
:src="vFile.url"
class="miaoImage-container-row-image"
loading="lazy"
:class="
activeImage === vFile
? 'miaoImage-container-row-image-active' ? 'miaoImage-container-row-image-active'
: '' : ''
" @click="activeImage = vFile" /> "
@click="activeImage = vFile" />
</div> </div>
</div> </div>
</n-scrollbar> </n-scrollbar>
<miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask"> <miao-mask
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageBack" /> :show="activeImage !== undefined"
<img :src="activeImage?.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()" @click="activeImage = undefined"
draggable="false" /> class="miaoImage-mask"
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward" @wheel="handleWheel">
<ChevronBack
class="miaoImage-mask-btn miaoImage-mask-btn-back"
@click="handleActiveImageBack" />
<img
:src="activeImage?.url"
class="miaoImage-mask-active"
@click="(e) => e.stopPropagation()"
draggable="false"
:style="{transform: `scale(${imgViewScale})`}" />
<ChevronForward
class="miaoImage-mask-btn miaoImage-mask-btn-forward"
@click="handleActiveImageForward" /> @click="handleActiveImageForward" />
</miao-mask> </miao-mask>
</div> </div>
@@ -41,7 +65,7 @@ import miaoDropHandler from '@/components/miaoDropHandler.vue'
import miaoMessageProvider from '@/components/miaoMessageProvider.vue' import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory' import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { uniq } from 'lodash' import { uniq } from 'lodash'
import { computed, nextTick, onMounted, ref } from 'vue' import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { NScrollbar } from 'naive-ui' import { NScrollbar } from 'naive-ui'
import { ChevronBack, ChevronForward } from '@vicons/ionicons5' import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
@@ -77,13 +101,18 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
const NScrollbarRef = ref() const NScrollbarRef = ref()
const rootRef = ref<any>() const rootRef = ref<any>()
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>() const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
const imgViewScale = ref(1)
const imageFileList = ref<VirtualFile[]>([]) const imageFileList = ref<VirtualFile[]>([])
const activeImage = ref<VirtualFile>()
const imageGroupList = computed(() => { const imageGroupList = computed(() => {
return groupByDay(imageFileList.value) return groupByDay(imageFileList.value)
}) })
const activeImage = ref<VirtualFile>()
watch(activeImage, () => {
nextTick(scrollToActiveImage)
imgViewScale.value = 1
})
const groupByDay = (array: VirtualFile[]) => { const groupByDay = (array: VirtualFile[]) => {
const result = [] const result = []
@@ -140,7 +169,6 @@ const handleActiveImageBack = (e: any) => {
(index - 1 + imageFileList.value.length) % (index - 1 + imageFileList.value.length) %
imageFileList.value.length imageFileList.value.length
] ]
nextTick(scrollToActiveImage)
} }
const handleActiveImageForward = (e: any) => { const handleActiveImageForward = (e: any) => {
@@ -154,7 +182,6 @@ const handleActiveImageForward = (e: any) => {
(index + 1 + imageFileList.value.length) % (index + 1 + imageFileList.value.length) %
imageFileList.value.length imageFileList.value.length
] ]
nextTick(scrollToActiveImage)
} }
const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => { const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
@@ -172,10 +199,18 @@ const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
// @ts-ignore // @ts-ignore
await updateImageSrcList(vItems) await updateImageSrcList(vItems)
} }
miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何可添加图片' : `导入${imageFileList.value.length - length_before}张图片`, { miaoMessageRef.value?.message(
type: length_before === imageFileList.value.length ? 'info' : 'success' length_before === imageFileList.value.length
, timeout: 5000 ? '未发现任何可添加图片'
}) : `导入${imageFileList.value.length - length_before}张图片`,
{
type:
length_before === imageFileList.value.length
? 'info'
: 'success',
timeout: 5000
}
)
} }
const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => { const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
@@ -199,15 +234,31 @@ const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
) )
} }
const handleWheel = (e: WheelEvent) => {
if (e.deltaY < 0) {
imgViewScale.value *= 1.42857
} else {
imgViewScale.value /= 1.42857
}
}
onMounted(async () => { onMounted(async () => {
const length_before = imageFileList.value.length; const length_before = imageFileList.value.length
for (const i of [currentFiles.value, ...currentDirectories.value]) { for (const i of [currentFiles.value, ...currentDirectories.value]) {
await updateImageSrcList(i) await updateImageSrcList(i)
} }
miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何新增图片' : `导入${imageFileList.value.length - length_before}张图片`, { miaoMessageRef.value?.message(
type: length_before === imageFileList.value.length ? 'info' : 'success' length_before === imageFileList.value.length
, timeout: 5000 ? '未发现任何新增图片'
}) : `导入${imageFileList.value.length - length_before}张图片`,
{
type:
length_before === imageFileList.value.length
? 'info'
: 'success',
timeout: 5000
}
)
}) })
</script> </script>
@@ -290,6 +341,7 @@ onMounted(async () => {
.miaoImage-mask { .miaoImage-mask {
background-color: rgba(0, 0, 0, 0.444); background-color: rgba(0, 0, 0, 0.444);
overflow: hidden;
} }
.miaoImage-mask-active { .miaoImage-mask-active {