388 lines
17 KiB
HTML
388 lines
17 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">
|
||
<div class="config-actions">
|
||
<el-button type="primary" size="mini" @click="editConfig" :disabled="isEditingConfig">
|
||
编辑配置
|
||
</el-button>
|
||
<el-button type="success" size="mini" @click="saveConfig" v-if="isEditingConfig">
|
||
保存配置
|
||
</el-button>
|
||
<el-button type="info" size="mini" @click="cancelEditConfig" v-if="isEditingConfig">
|
||
取消
|
||
</el-button>
|
||
</div>
|
||
<div v-if="!isEditingConfig">
|
||
<pre>{% raw %}{{ selectedPlugin.configText }}{% endraw %}</pre>
|
||
</div>
|
||
<div v-else>
|
||
<el-input
|
||
type="textarea"
|
||
v-model="editedConfig"
|
||
:rows="10"
|
||
placeholder="请输入TOML格式的配置"
|
||
class="config-editor"
|
||
></el-input>
|
||
<div class="config-error" v-if="configError">{% raw %}{{ configError }}{% endraw %}</div>
|
||
</div>
|
||
</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,
|
||
isEditingConfig: false,
|
||
editedConfig: '',
|
||
configError: '',
|
||
configFormat: 'toml' // 默认为toml格式
|
||
}
|
||
},
|
||
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('已取消操作');
|
||
});
|
||
},
|
||
// 编辑配置
|
||
editConfig() {
|
||
this.isEditingConfig = true;
|
||
this.editedConfig = this.selectedPlugin.configText || '';
|
||
this.configError = '';
|
||
},
|
||
|
||
// 取消编辑配置
|
||
cancelEditConfig() {
|
||
this.isEditingConfig = false;
|
||
this.editedConfig = '';
|
||
this.configError = '';
|
||
},
|
||
|
||
// 保存配置
|
||
saveConfig() {
|
||
try {
|
||
// 验证TOML格式
|
||
let configObj;
|
||
|
||
// 发送到后端保存
|
||
axios.post('/api/plugins/config/update', {
|
||
plugin_name: this.selectedPlugin.module_name,
|
||
config_text: this.editedConfig,
|
||
format: 'toml'
|
||
})
|
||
.then(response => {
|
||
if (response.data.success) {
|
||
this.$message.success('配置保存成功');
|
||
this.isEditingConfig = false;
|
||
|
||
// 更新本地配置显示
|
||
this.selectedPlugin.configText = this.editedConfig;
|
||
this.selectedPlugin.config = configObj;
|
||
|
||
// 询问是否要重载插件以应用新配置
|
||
this.$confirm('配置已保存，是否要重载插件以应用新配置?', '提示', {
|
||
confirmButtonText: '重载插件',
|
||
cancelButtonText: '稍后手动重载',
|
||
type: 'info'
|
||
}).then(() => {
|
||
this.reloadPlugin(this.selectedPlugin);
|
||
}).catch(() => {
|
||
this.$message.info('您可以稍后手动重载插件以应用新配置');
|
||
});
|
||
} else {
|
||
this.configError = response.data.message || '保存配置失败';
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('保存配置出错:', error);
|
||
this.configError = '保存配置出错: ' + (error.response?.data?.message || error.message);
|
||
});
|
||
} catch (e) {
|
||
this.configError = '处理配置时出错: ' + e.message;
|
||
}
|
||
},
|
||
|
||
// 修改现有的showPluginInfo方法，获取原始配置文本
|
||
showPluginInfo(plugin) {
|
||
// 获取插件详细信息
|
||
axios.get(`/api/plugins/info?plugin_name=${plugin.module_name}`)
|
||
.then(response => {
|
||
if (response.data.success) {
|
||
this.selectedPlugin = response.data.data;
|
||
// 如果有配置文本，直接使用
|
||
if (this.selectedPlugin.configText) {
|
||
this.pluginInfoVisible = true;
|
||
this.isEditingConfig = false;
|
||
this.editedConfig = '';
|
||
this.configError = '';
|
||
return;
|
||
}
|
||
|
||
// 如果没有配置文本，获取原始配置文件内容
|
||
axios.get(`/api/plugins/config/raw?plugin_name=${plugin.module_name}`)
|
||
.then(configResponse => {
|
||
if (configResponse.data.success) {
|
||
this.selectedPlugin.configText = configResponse.data.data;
|
||
this.configFormat = configResponse.data.format || 'toml';
|
||
} else {
|
||
this.selectedPlugin.configText = '# 无法获取原始配置文件';
|
||
console.error('获取配置文件失败:', configResponse.data.message);
|
||
}
|
||
this.pluginInfoVisible = true;
|
||
this.isEditingConfig = false;
|
||
this.editedConfig = '';
|
||
this.configError = '';
|
||
})
|
||
.catch(error => {
|
||
console.error('获取配置文件出错:', error);
|
||
this.selectedPlugin.configText = '# 获取配置文件时出错';
|
||
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: #0f2545;
|
||
border: 1px solid #1b3d66;
|
||
border-radius: 4px;
|
||
padding: 8px;
|
||
font-size: 12px;
|
||
color: #cfe6ff;
|
||
}
|
||
|
||
.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: #2a4d78;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.plugin-detail-container::-webkit-scrollbar-track,
|
||
.config-container::-webkit-scrollbar-track {
|
||
background: #0b1d33;
|
||
}
|
||
|
||
/* ... 现有样式保持不变 ... */
|
||
|
||
.config-actions {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.config-editor {
|
||
font-family: monospace;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.config-error {
|
||
color: #ff8a8a;
|
||
font-size: 12px;
|
||
margin-top: 5px;
|
||
}
|
||
</style>
|
||
{% endblock %}
|