liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI改版测试V0

Browse Source
This commit is contained in:
liuwei
2026-03-09 11:32:08 +08:00
parent 8b95fbc2a9
commit 14720f48a4
17 changed files with 3054 additions and 4559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

330
admin/dashboard/templates/plugins_manage.html
View File

@@ -3,67 +3,112 @@
{% 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>
<div class="page-shell plugins-page">
<div class="page-hero">
<div class="page-hero-copy">
<div class="page-eyebrow">Plugins Workspace</div>
<h1>插件管理</h1>
<p>统一查看插件状态、版本、说明与配置，减少传统后台式碎片操作。</p>
</div>
<div class="page-hero-actions">
<el-button type="primary" @click="refreshPlugins">
<i class="el-icon-refresh"></i> 刷新插件
</el-button>
</div>
</div>
<el-row :gutter="16" class="overview-grid">
<el-col :span="6">
<el-card class="overview-card overview-card--primary" shadow="hover">
<div class="overview-label">插件总数</div>
<div class="overview-value">{% raw %}{{ plugins.length }}{% endraw %}</div>
<div class="overview-note">当前已注册插件模块</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="overview-card" shadow="hover">
<div class="overview-label">运行中</div>
<div class="overview-value">{% raw %}{{ runningPluginsCount }}{% endraw %}</div>
<div class="overview-note">可正常提供能力的插件</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="overview-card" shadow="hover">
<div class="overview-label">已停用</div>
<div class="overview-value">{% raw %}{{ stoppedPluginsCount }}{% endraw %}</div>
<div class="overview-note">待启用或排查状态</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="overview-card overview-card--soft" shadow="hover">
<div class="overview-label">作者数量</div>
<div class="overview-value">{% raw %}{{ authorsCount }}{% endraw %}</div>
<div class="overview-note">参与维护的作者规模</div>
</el-card>
</el-col>
</el-row>
<!-- 插件详情对话框 -->
<el-dialog title="插件详情" {% raw %}:visible.sync="pluginInfoVisible"{% endraw %} width="60%" top="5vh">
<el-card class="workspace-card" shadow="hover">
<div slot="header" class="workspace-header">
<div>
<h3>插件列表</h3>
<p>优先关注状态和说明，再进入单个插件详情与配置编辑。</p>
</div>
</div>
<el-table :data="plugins" style="width: 100%" v-loading="loading">
<el-table-column label="插件信息" min-width="260">
<template slot-scope="scope">
<div class="entity-cell">
<div class="entity-badge">{% raw %}{{ scope.$index + 1 }}{% endraw %}</div>
<div class="entity-copy">
<div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
<div class="entity-subtitle">模块：{% raw %}{{ scope.row.module_name }}{% endraw %}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="version" label="版本" width="120"></el-table-column>
<el-table-column prop="author" label="作者" width="140"></el-table-column>
<el-table-column prop="description" label="描述" min-width="280" show-overflow-tooltip></el-table-column>
<el-table-column label="状态" width="120" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.status === 'RUNNING' ? 'success' : 'info'">
{% raw %}{{ scope.row.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" min-width="290">
<template slot-scope="scope">
<div class="action-row">
<el-button
size="mini"
:type="scope.row.status === 'RUNNING' ? 'danger' : 'success'"
@click="togglePluginStatus(scope.row)">
{% raw %}{{ scope.row.status === 'RUNNING' ? '禁用' : '启用' }}{% endraw %}
</el-button>
<el-button size="mini" type="primary" plain @click="reloadPlugin(scope.row)">
重载
</el-button>
<el-button size="mini" type="info" plain @click="showPluginInfo(scope.row)">
详情
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="插件详情" :visible.sync="pluginInfoVisible" width="64%" top="5vh">
<div v-if="selectedPlugin" class="plugin-detail-container">
<div class="dialog-intro">查看插件基础信息、命令列表与配置内容，需要时可直接在这里编辑配置。</div>
<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">
<el-tag :type="selectedPlugin.status === 'RUNNING' ? 'success' : 'info'" size="small">
{% raw %}{{ selectedPlugin.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %}
</el-tag>
</el-descriptions-item>
@@ -73,7 +118,7 @@
<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;">
<el-tag v-for="cmd in selectedPlugin.commands" :key="cmd" size="mini" class="command-tag">
{% raw %}{{ cmd }}{% endraw %}
</el-tag>
</div>
@@ -81,15 +126,9 @@
<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>
<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>
@@ -98,10 +137,10 @@
<el-input
type="textarea"
v-model="editedConfig"
:rows="10"
:rows="12"
placeholder="请输入TOML格式的配置"
class="config-editor"
></el-input>
class="config-editor">
</el-input>
<div class="config-error" v-if="configError">{% raw %}{{ configError }}{% endraw %}</div>
</div>
</div>
@@ -126,11 +165,22 @@
isEditingConfig: false,
editedConfig: '',
configError: '',
configFormat: 'toml' // 默认为toml格式
configFormat: 'toml'
}
},
computed: {
runningPluginsCount() {
return this.plugins.filter(plugin => plugin.status === 'RUNNING').length;
},
stoppedPluginsCount() {
return this.plugins.filter(plugin => plugin.status !== 'RUNNING').length;
},
authorsCount() {
return new Set((this.plugins || []).map(plugin => plugin.author).filter(Boolean)).size;
}
},
mounted() {
this.currentView = '11'; // 设置当前菜单项
this.currentView = '11';
this.loadPlugins();
},
methods: {
@@ -159,7 +209,7 @@
togglePluginStatus(plugin) {
const action = plugin.status === 'RUNNING' ? 'disable' : 'enable';
const actionText = plugin.status === 'RUNNING' ? '禁用' : '启用';
this.$confirm(`确定要${actionText}插件 "${plugin.name}" 吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@@ -171,7 +221,7 @@
.then(response => {
if (response.data.success) {
this.$message.success(`${actionText}插件成功`);
this.loadPlugins(); // 重新加载插件列表
this.loadPlugins();
} else {
this.$message.error(response.data.message || `${actionText}插件失败`);
}
@@ -196,7 +246,7 @@
.then(response => {
if (response.data.success) {
this.$message.success('重载插件成功');
this.loadPlugins(); // 重新加载插件列表
this.loadPlugins();
} else {
this.$message.error(response.data.message || '重载插件失败');
}
@@ -209,27 +259,19 @@
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,
@@ -239,12 +281,8 @@
if (response.data.success) {
this.$message.success('配置保存成功');
this.isEditingConfig = false;
// 更新本地配置显示
this.selectedPlugin.configText = this.editedConfig;
this.selectedPlugin.config = configObj;
// 询问是否要重载插件以应用新配置
this.$confirm('配置已保存，是否要重载插件以应用新配置?', '提示', {
confirmButtonText: '重载插件',
cancelButtonText: '稍后手动重载',
@@ -266,15 +304,11 @@
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;
@@ -282,8 +316,7 @@
this.configError = '';
return;
}
// 如果没有配置文本，获取原始配置文件内容
axios.get(`/api/plugins/config/raw?plugin_name=${plugin.module_name}`)
.then(configResponse => {
if (configResponse.data.success) {
@@ -316,72 +349,77 @@
});
</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: var(--tech-panel-2);
border: 1px solid var(--tech-border);
border-radius: 4px;
padding: 8px;
font-size: 12px;
color: var(--tech-text);
}
.config-container pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
.command-tags {
.page-shell {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 16px;
}
/* 自定义滚动条样式 */
.plugin-detail-container::-webkit-scrollbar,
.config-container::-webkit-scrollbar {
width: 6px;
height: 6px;
.page-hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
padding: 24px 26px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}
.plugin-detail-container::-webkit-scrollbar-thumb,
.config-container::-webkit-scrollbar-thumb {
background: #d7d1c8;
border-radius: 3px;
.page-eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: #6366f1;
font-weight: 700;
margin-bottom: 8px;
}
.plugin-detail-container::-webkit-scrollbar-track,
.config-container::-webkit-scrollbar-track {
background: #fcfaf8;
}
/* ... 现有样式保持不变 ... */
.config-actions {
.page-hero-copy h1 {
font-size: 30px;
line-height: 1.1;
margin-bottom: 10px;
display: flex;
gap: 10px;
color: #0f172a;
}
.config-editor {
font-family: monospace;
font-size: 12px;
.page-hero-copy p {
color: #64748b;
font-size: 14px;
}
.config-error {
color: var(--tech-danger);
font-size: 12px;
margin-top: 5px;
.overview-grid .el-col { margin-bottom: 16px; }
.overview-card { min-height: 112px; }
.overview-card--primary {
background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important;
}
.overview-card--soft {
background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important;
}
.overview-label { font-size: 13px; color: #64748b; margin-bottom: 14px; }
.overview-value { font-size: 30px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.overview-note { font-size: 12px; color: #94a3b8; }
.workspace-header {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.entity-cell { display: flex; align-items: center; gap: 12px; }
.entity-badge {
width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; background: rgba(79,70,229,0.10); color: #4f46e5; font-size: 12px;
font-weight: 700; flex-shrink: 0;
}
.entity-title { font-size: 14px; font-weight: 600; color: #0f172a; }
.entity-subtitle { margin-top: 4px; font-size: 12px; color: #94a3b8; }
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plugin-detail-container { max-height: 70vh; overflow-y: auto; }
.plugin-descriptions { width: 100%; }
.dialog-intro { margin-bottom: 14px; color: #64748b; font-size: 13px; }
.config-container {
max-height: 320px; overflow-y: auto; background: rgba(248,250,252,0.82); border: 1px solid rgba(148,163,184,0.12);
border-radius: 14px; padding: 12px; font-size: 12px; color: #334155;
}
.config-container pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.command-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.command-tag { margin: 0 !important; }
.config-actions { margin-bottom: 10px; display: flex; gap: 10px; }
.config-editor { font-family: monospace; font-size: 12px; }
.config-error { color: #ef4444; font-size: 12px; margin-top: 5px; }
</style>
{% endblock %}