252 lines
11 KiB
HTML
252 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}插件管理 - 机器人管理后台{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- 插件管理 -->
|
|
<div>
|
|
<el-row {% raw %}:gutter="20"{% endraw %}>
|
|
<el-col {% raw %}:span="24"{% endraw %}>
|
|
<el-card shadow="hover">
|
|
<div slot="header">
|
|
<span>插件管理</span>
|
|
<el-button style="float: right; padding: 3px 0" type="text" {% raw %}@click="refreshPlugins"{% endraw %}>
|
|
<i class="el-icon-refresh"></i> 刷新
|
|
</el-button>
|
|
</div>
|
|
<el-table {% raw %}:data="plugins"{% endraw %} style="width: 100%" border>
|
|
<el-table-column prop="name" label="插件名称"></el-table-column>
|
|
<el-table-column prop="module_name" label="模块名称"></el-table-column>
|
|
<el-table-column prop="version" label="版本"></el-table-column>
|
|
<el-table-column prop="author" label="作者"></el-table-column>
|
|
<el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="状态">
|
|
<template slot-scope="scope">
|
|
<el-tag {% raw %}:type="scope.row.status === 'RUNNING' ? 'success' : 'danger'"{% endraw %}>
|
|
{% raw %}{{ scope.row.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="280">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
{% raw %}:type="scope.row.status === 'RUNNING' ? 'danger' : 'success'"{% endraw %}
|
|
{% raw %}@click="togglePluginStatus(scope.row)"{% endraw %}>
|
|
{% raw %}{{ scope.row.status === 'RUNNING' ? '禁用' : '启用' }}{% endraw %}
|
|
</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="primary"
|
|
{% raw %}@click="reloadPlugin(scope.row)"{% endraw %}>
|
|
重载
|
|
</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="info"
|
|
{% raw %}@click="showPluginInfo(scope.row)"{% endraw %}>
|
|
详情
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 插件详情对话框 -->
|
|
<el-dialog title="插件详情" {% raw %}:visible.sync="pluginInfoVisible"{% endraw %} width="60%" top="5vh">
|
|
<div v-if="selectedPlugin" class="plugin-detail-container">
|
|
<el-descriptions border direction="vertical" :column="2" size="small" class="plugin-descriptions">
|
|
<el-descriptions-item label="插件名称" :span="1">{% raw %}{{ selectedPlugin.name }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="模块名称" :span="1">{% raw %}{{ selectedPlugin.module_name }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="版本" :span="1">{% raw %}{{ selectedPlugin.version }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="作者" :span="1">{% raw %}{{ selectedPlugin.author }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="状态" :span="1">
|
|
<el-tag {% raw %}:type="selectedPlugin.status === 'RUNNING' ? 'success' : 'danger'"{% endraw %} size="small">
|
|
{% raw %}{{ selectedPlugin.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="命令前缀" :span="1" v-if="selectedPlugin.command_prefix !== undefined">
|
|
{% raw %}{{ selectedPlugin.command_prefix || '无' }}{% endraw %}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="描述" :span="2">{% raw %}{{ selectedPlugin.description }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="命令列表" :span="2" v-if="selectedPlugin.commands && selectedPlugin.commands.length > 0">
|
|
<div class="command-tags">
|
|
<el-tag v-for="cmd in selectedPlugin.commands" :key="cmd" size="mini" style="margin-right: 5px; margin-bottom: 5px;">
|
|
{% raw %}{{ cmd }}{% endraw %}
|
|
</el-tag>
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="配置信息" :span="2" v-if="selectedPlugin.config">
|
|
<div class="config-container">
|
|
<pre>{% raw %}{{ JSON.stringify(selectedPlugin.config, null, 2) }}{% endraw %}</pre>
|
|
</div>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
mixins: [baseApp],
|
|
data() {
|
|
return {
|
|
plugins: [],
|
|
selectedPlugin: null,
|
|
pluginInfoVisible: false,
|
|
loading: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentView = '11'; // 设置当前菜单项
|
|
this.loadPlugins();
|
|
},
|
|
methods: {
|
|
loadPlugins() {
|
|
this.loading = true;
|
|
axios.get('/api/plugins')
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.plugins = response.data.data || [];
|
|
} else {
|
|
this.$message.error(response.data.message || '加载插件列表失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载插件列表出错:', error);
|
|
this.$message.error('加载插件列表出错');
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
refreshPlugins() {
|
|
this.loadPlugins();
|
|
this.$message.success('插件列表已刷新');
|
|
},
|
|
togglePluginStatus(plugin) {
|
|
const action = plugin.status === 'RUNNING' ? 'disable' : 'enable';
|
|
const actionText = plugin.status === 'RUNNING' ? '禁用' : '启用';
|
|
|
|
this.$confirm(`确定要${actionText}插件 "${plugin.name}" 吗?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
axios.post(`/api/plugins/${action}`, {
|
|
plugin_name: plugin.module_name
|
|
})
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.$message.success(`${actionText}插件成功`);
|
|
this.loadPlugins(); // 重新加载插件列表
|
|
} else {
|
|
this.$message.error(response.data.message || `${actionText}插件失败`);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error(`${actionText}插件出错:`, error);
|
|
this.$message.error(`${actionText}插件出错`);
|
|
});
|
|
}).catch(() => {
|
|
this.$message.info('已取消操作');
|
|
});
|
|
},
|
|
reloadPlugin(plugin) {
|
|
this.$confirm(`确定要重载插件 "${plugin.name}" 吗?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
axios.post('/api/plugins/reload', {
|
|
plugin_name: plugin.module_name
|
|
})
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.$message.success('重载插件成功');
|
|
this.loadPlugins(); // 重新加载插件列表
|
|
} else {
|
|
this.$message.error(response.data.message || '重载插件失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('重载插件出错:', error);
|
|
this.$message.error('重载插件出错');
|
|
});
|
|
}).catch(() => {
|
|
this.$message.info('已取消操作');
|
|
});
|
|
},
|
|
showPluginInfo(plugin) {
|
|
// 获取插件详细信息
|
|
axios.get(`/api/plugins/info?plugin_name=${plugin.module_name}`)
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.selectedPlugin = response.data.data;
|
|
this.pluginInfoVisible = true;
|
|
} else {
|
|
this.$message.error(response.data.message || '获取插件详情失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取插件详情出错:', error);
|
|
this.$message.error('获取插件详情出错');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
.plugin-detail-container {
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.plugin-descriptions {
|
|
width: 100%;
|
|
}
|
|
|
|
.config-container {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
background-color: #f5f7fa;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.config-container pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.command-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
.plugin-detail-container::-webkit-scrollbar,
|
|
.config-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.plugin-detail-container::-webkit-scrollbar-thumb,
|
|
.config-container::-webkit-scrollbar-thumb {
|
|
background: #c0c4cc;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.plugin-detail-container::-webkit-scrollbar-track,
|
|
.config-container::-webkit-scrollbar-track {
|
|
background: #f5f7fa;
|
|
}
|
|
</style>
|
|
{% endblock %} |