Compare commits

2 Commits
Author SHA1 Message Date
539943419 37791ab04e feat: 添加插件优先级 2024-09-27 16:34:06 +08:00
539943419 e155524e3e style: 样式修改 2024-09-27 16:08:34 +08:00
7 changed files with 37 additions and 9 deletions

No files matched your search

+9 -3
View File
@@ -20,6 +20,7 @@ export interface registerComponentOption {
exitConfirm?: boolean;
// 若为true,则只会创建一个页面,当存在已创建页面则会直接将VFile和VDir加到curr里面
single?: boolean;
priority?: number;
}
export type Plugin = {
@@ -31,6 +32,8 @@ export type Plugin = {
disable: boolean;
// 插件所属的group,用于区分插件使用的场合
group: PluginGroup[];
// 插件优先级
priority: number;
// 判断在未禁用时是否可以使用这个组件
// 使用组件即调用下面的func
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
@@ -56,7 +59,7 @@ export default class PluginCenter {
* 便捷地注册一个组件为插件,触发时直接用新页面打开
*/
registerComponent(option: registerComponentOption): void {
const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false, single = false } = option;
const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false, single = false, priority = 0 } = option;
let _component: any;
const views = useVirtualPages();
this.register(key, {
@@ -65,6 +68,7 @@ export default class PluginCenter {
icon: shallowRef(icon),
group,
disable,
priority,
func: async (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => {
if (filter(VDirectories, VFiles) === false) {
return;
@@ -110,10 +114,12 @@ export default class PluginCenter {
usableList.push(key);
}
}
return usableList.map(key => ({
const res = usableList.map(key => ({
key,
...this.pluginsMap[key]
}));
}))
res.sort((a, b) => b.priority - a.priority);
return res
}
usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
+5 -1
View File
@@ -1,7 +1,7 @@
<!-- 只适合用于渲染过程较为复杂的组件,不然可能得不偿失
这么泛用的组件,性能差点也能理解 -->
<template>
<div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
<div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth, margin } : {}">
<slot v-if="show" />
</div>
</template>
@@ -22,6 +22,10 @@ const props = defineProps({
minWidth: {
type: String,
default: 'none',
},
margin: {
type: String,
default: 'none',
}
})
@@ -197,7 +197,7 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
transition: background-color 0.3s ease;
overflow-x: hidden;
.item-main-front {
height: 100%;
min-width: 10px;
@@ -8,7 +8,8 @@
<miao-lazy-div
v-for="dir in showData_directory"
:key="dir.id"
min-height="50px">
min-height="50px"
margin="10px">
<miaoDirectoryItem
:item="dir"
:color="props.color"
@@ -376,7 +376,12 @@ const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
handleItemSelect(item)
} else {
if (item.type === 'file') {
const useablePlugins = pluginCenter.getUsablePlugin([], [item])
if(useablePlugins.length > 0){
pluginCenter.usePlugin(useablePlugins[0].key, [], [item])
} else {
openUrl(`${baseUrl}${api.get}${item.path}`)
}
} else if (item.type === 'directory') {
setCurrentDirectory(item)
}
+2 -1
View File
@@ -26,7 +26,8 @@ const pluginConfig: registerComponentOption = {
return vFiles[0].name.endsWith('?')
},
disable: false,
single: true
single: true,
priority: 5,
}
export default pluginConfig
@@ -10,7 +10,7 @@
<span class="aplayer-list-title">{{ element.name }}</span>
<div class="aplayer-list-control">
<div class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
@click.stop="switchAudio(index)" v-if="activeAudioIndex !== index">
@click.stop="switchAudio(index)">
<PlayOutline class="aplayer-list-control-btn-svg" />
</div>
<div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
@@ -151,6 +151,7 @@ onMounted(() => {
display: inline-block;
width: 20px;
margin-right: 4px !important;
cursor: default !important;
}
}
@@ -185,7 +186,7 @@ onMounted(() => {
}
</style>
<style>
<style lang="scss">
.aplayer svg circle,
.aplayer .aplayer-list-new svg path {
fill: #ffffff00;
@@ -195,4 +196,14 @@ onMounted(() => {
opacity: 0.5;
background: #60e8a2 !important;
}
.aplayer-list-light {
background: unset !important;
.aplayer-list-title {
color: #60e8a2;
}
}
.aplayer .aplayer-list ol li:hover {
background: #efefef !important;
}
</style>