74 lines
2.8 KiB
JavaScript
74 lines
2.8 KiB
JavaScript
window.PluginList = {
|
|
setup() {
|
|
const { ref, onMounted } = Vue;
|
|
const api = useApi();
|
|
|
|
const plugins = ref([]);
|
|
const loaded = ref(false);
|
|
const dialogVisible = ref(false);
|
|
const dialogPluginName = ref('');
|
|
|
|
async function load() {
|
|
const json = await api.getPlugins();
|
|
if (json) { plugins.value = json.plugins; loaded.value = true; }
|
|
}
|
|
|
|
async function toggle(plugin, enable) {
|
|
const json = await api.togglePlugin(plugin.name, enable);
|
|
if (json) {
|
|
ElementPlus.ElMessage.success((enable ? '已启用: ' : '已禁用: ') + plugin.name);
|
|
await load();
|
|
}
|
|
}
|
|
|
|
function openConfig(name) {
|
|
dialogPluginName.value = name;
|
|
dialogVisible.value = true;
|
|
}
|
|
|
|
onMounted(load);
|
|
|
|
return { plugins, loaded, toggle, openConfig, dialogVisible, dialogPluginName };
|
|
},
|
|
template: `
|
|
<div class="panel-scroll">
|
|
<template v-if="loaded">
|
|
<el-card v-for="p in plugins" :key="p.name" shadow="hover" class="plugin-card">
|
|
<div class="plugin-main">
|
|
<div class="plugin-info">
|
|
<div class="plugin-title">
|
|
<span class="plugin-name">{{ p.name }}</span>
|
|
<span class="plugin-version">
|
|
v{{ p.version }}
|
|
</span>
|
|
</div>
|
|
<div class="plugin-desc">
|
|
{{ p.description }}
|
|
</div>
|
|
<div class="plugin-meta">
|
|
作者: {{ p.author }} · 目录: {{ p.directory }}
|
|
</div>
|
|
</div>
|
|
<div class="plugin-actions">
|
|
<el-button v-if="p.has_config" size="small" @click="openConfig(p.name)">
|
|
配置
|
|
</el-button>
|
|
<el-tag :type="p.enabled ? 'success' : 'danger'" size="small">
|
|
{{ p.enabled ? '已启用' : '已禁用' }}
|
|
</el-tag>
|
|
<el-switch :model-value="p.enabled"
|
|
@update:model-value="toggle(p, $event)"
|
|
:disabled="p.name === 'ManagePlugin'"
|
|
active-text="开" inactive-text="关" />
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
<div v-else class="panel-loading">
|
|
加载中...
|
|
</div>
|
|
<PluginConfigDialog v-model:visible="dialogVisible" :plugin-name="dialogPluginName" />
|
|
</div>
|
|
`
|
|
};
|