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
+170 -75
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更新时更新文件信息 | ❌ |
| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
| 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,
QrCodeOutline
} from '@vicons/ionicons5'
// import miaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
import MiaoMask from './components/miaoMask.vue'
import config from './config'
@@ -48,7 +47,7 @@ const createView = (
currentFiles?: VirtualFile[],
index?: number
) => {
views.push(component, currentDirectories, currentFiles, index)
views.push(component, currentDirectories, currentFiles, { index })
}
const deleteView = (index: number) => {
src/class/PluginCenter.ts
+11 -3
View File
@@ -14,6 +14,8 @@ export interface registerComponentOption {
getComponent: () => Promise<any>
group?: PluginGroup[]
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
disable?: boolean
exitConfirm?: boolean
}
type Plugin = {
@@ -57,7 +59,9 @@ export default class PluginCenter {
getComponent,
icon,
filter,
group = [PluginGroup.default]
group = [PluginGroup.default],
disable = false,
exitConfirm = false
} = option
let _component: any
const views = useVirtualPages()
@@ -66,7 +70,7 @@ export default class PluginCenter {
filter,
icon: shallowRef(icon),
group,
disable: false,
disable,
func: async (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
@@ -75,7 +79,11 @@ export default class PluginCenter {
return
}
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 VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
import generateId from "@/hooks/generateId";
import { reactive, shallowRef } from 'vue'
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import generateId from '@/hooks/generateId'
export interface VirtualPageOption {
exitConfirm?: boolean
}
export interface ViewsPushOption {
index?: number
VirtualPageOption?: VirtualPageOption
}
const getRandomWebSafeColor = (() => {
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
let counter = 0;
const webSafeColors = [
'#009900',
'#999900',
'#009999',
'#990099',
'#0000ee'
]
let counter = 0
return () => {
const color = webSafeColors[counter % webSafeColors.length];
counter += 1;
return color;
};
})();
const color = webSafeColors[counter % webSafeColors.length]
counter += 1
return color
}
})()
export default class VirtualPage {
constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
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();
constructor(
component: any,
initObjects?: {
directories?: VirtualDirectory[]
files?: VirtualFile[]
option?: VirtualPageOption
}
) {
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: number;
id: number
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
refreshKey: number;
refreshKey: number
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
color: string;
color: string
// 用于展示的title
_title?: string;
_title?: string
// 关闭时是否需要确认
exitConfirm: boolean
get 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) {
this._title = title;
this._title = title
}
// 切换显示状态
switchShow() {
this.visible = !this.visible;
this.visible = !this.visible
}
// 刷新，不过好像没有用得到的时候吧
// 事实上也不应该用得到，因为更新应该是响应式的
refresh() {
this.refreshKey = Math.random();
this.refreshKey = Math.random()
}
}
export class VirtualPages {
constructor() {
this._views = reactive<VirtualPage[]>([]);
this._views = reactive<VirtualPage[]>([])
}
_views: VirtualPage[];
_views: VirtualPage[]
get length() {
return this._views.length;
return this._views.length
}
/**
@@ -80,10 +109,10 @@ export class VirtualPages {
getIndex(id: number) {
for (let i in this._views) {
if (this._views[i].id === id) {
return parseInt(i);
return parseInt(i)
}
}
return -1;
return -1
}
/**
* 根据id得到view
@@ -92,32 +121,38 @@ export class VirtualPages {
getView(id: number) {
for (let v of this._views) {
if (v.id === id) {
return v;
return v
}
}
return undefined;
return undefined
}
/**
* 推入一个新的页面
*/
push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
index ?? (index = this.length);
push(
component: any,
currentDirectories?: VirtualDirectory[],
currentFiles?: VirtualFile[],
option?: ViewsPushOption
) {
const { index = this.length, VirtualPageOption } = option ?? {}
this._views.splice(
index,
0,
reactive<VirtualPage>(
new VirtualPage(component, {
directories: [...(currentDirectories ?? [])],
files: [...(currentFiles ?? [])]
files: [...(currentFiles ?? [])],
option: VirtualPageOption
})
)
);
)
}
/**
* 根据次序删除一个页面
*/
deleteView(index: number) {
this._views.splice(index, 1);
this._views.splice(index, 1)
}
}
src/plugins/miaoImages/miaoImages.vue
+77 -25
View File
@@ -1,9 +1,13 @@
<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">
<div class="miaoImage" ref="rootRef">
<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-divide miaoImage-container-divide-before">
<div class="miaoImage-container-divide-line"></div>
@@ -15,19 +19,39 @@
<div class="miaoImage-container-divide-line"></div>
</div> -->
</div>
<div 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
<div
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'
: ''
" @click="activeImage = vFile" />
"
@click="activeImage = vFile" />
</div>
</div>
</n-scrollbar>
<miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask">
<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" />
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
<miao-mask
:show="activeImage !== undefined"
@click="activeImage = undefined"
class="miaoImage-mask"
@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" />
</miao-mask>
</div>
@@ -41,7 +65,7 @@ import miaoDropHandler from '@/components/miaoDropHandler.vue'
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
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 { ChevronBack, ChevronForward } from '@vicons/ionicons5'
@@ -77,13 +101,18 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
const NScrollbarRef = ref()
const rootRef = ref<any>()
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
const imgViewScale = ref(1)
const imageFileList = ref<VirtualFile[]>([])
const activeImage = ref<VirtualFile>()
const imageGroupList = computed(() => {
return groupByDay(imageFileList.value)
})
const activeImage = ref<VirtualFile>()
watch(activeImage, () => {
nextTick(scrollToActiveImage)
imgViewScale.value = 1
})
const groupByDay = (array: VirtualFile[]) => {
const result = []
@@ -140,7 +169,6 @@ const handleActiveImageBack = (e: any) => {
(index - 1 + imageFileList.value.length) %
imageFileList.value.length
]
nextTick(scrollToActiveImage)
}
const handleActiveImageForward = (e: any) => {
@@ -154,7 +182,6 @@ const handleActiveImageForward = (e: any) => {
(index + 1 + imageFileList.value.length) %
imageFileList.value.length
]
nextTick(scrollToActiveImage)
}
const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
@@ -172,10 +199,18 @@ const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
// @ts-ignore
await updateImageSrcList(vItems)
}
miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何可添加图片' : `导入${imageFileList.value.length - length_before}张图片`, {
type: length_before === imageFileList.value.length ? 'info' : 'success'
, timeout: 5000
})
miaoMessageRef.value?.message(
length_before === imageFileList.value.length
? '未发现任何可添加图片'
: `导入${imageFileList.value.length - length_before}张图片`,
{
type:
length_before === imageFileList.value.length
? 'info'
: 'success',
timeout: 5000
}
)
}
const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
@@ -195,19 +230,35 @@ const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
]
}
imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
(a, b) => - a.stats.mtimeMs + b.stats.mtimeMs
(a, b) => -a.stats.mtimeMs + b.stats.mtimeMs
)
}
const handleWheel = (e: WheelEvent) => {
if (e.deltaY < 0) {
imgViewScale.value *= 1.42857
} else {
imgViewScale.value /= 1.42857
}
}
onMounted(async () => {
const length_before = imageFileList.value.length;
const length_before = imageFileList.value.length
for (const i of [currentFiles.value, ...currentDirectories.value]) {
await updateImageSrcList(i)
}
miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何新增图片' : `导入${imageFileList.value.length - length_before}张图片`, {
type: length_before === imageFileList.value.length ? 'info' : 'success'
, timeout: 5000
})
miaoMessageRef.value?.message(
length_before === imageFileList.value.length
? '未发现任何新增图片'
: `导入${imageFileList.value.length - length_before}张图片`,
{
type:
length_before === imageFileList.value.length
? 'info'
: 'success',
timeout: 5000
}
)
})
</script>
@@ -290,6 +341,7 @@ onMounted(async () => {
.miaoImage-mask {
background-color: rgba(0, 0, 0, 0.444);
overflow: hidden;
}
.miaoImage-mask-active {