628 lines
31 KiB
HTML
628 lines
31 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}插件管理 - 机器人管理后台{% endblock %}
|
|
|
|
{% block content %}
|
|
<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-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>
|
|
<el-button size="mini" type="warning" plain @click="showPluginGroupStatus(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 :type="selectedPlugin.status === 'RUNNING' ? 'success' : 'info'" 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" class="command-tag">
|
|
{% 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="12"
|
|
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>
|
|
|
|
<el-dialog title="插件群状态" :visible.sync="pluginGroupStatusVisible" width="72%" top="5vh">
|
|
<div class="plugin-group-status-dialog" v-loading="groupStatusLoading">
|
|
<div v-if="pluginGroupStatusData" class="group-status-header">
|
|
<div class="group-status-title">
|
|
{% raw %}{{ pluginGroupStatusData.plugin_name || '未知插件' }}{% endraw %}
|
|
<span class="group-status-subtitle">
|
|
{% raw %}{{ `共 ${pluginGroupStatusData.total_group_count || 0} 个群` }}{% endraw %}
|
|
</span>
|
|
</div>
|
|
<div class="group-status-summary">
|
|
<el-tag size="small" type="success">已开启 {% raw %}{{ pluginGroupStatusData.enabled_count || 0 }}{% endraw %}</el-tag>
|
|
<el-tag size="small" type="info">未开启 {% raw %}{{ pluginGroupStatusData.disabled_count || 0 }}{% endraw %}</el-tag>
|
|
</div>
|
|
</div>
|
|
|
|
<el-alert
|
|
v-if="pluginGroupStatusData && !pluginGroupStatusData.supports_group_switch"
|
|
title="该插件未接入群级开关能力，当前仅展示群列表，状态默认为未开启。"
|
|
type="warning"
|
|
:closable="false"
|
|
show-icon
|
|
class="group-status-alert">
|
|
</el-alert>
|
|
|
|
<el-row :gutter="16" v-if="pluginGroupStatusData">
|
|
<el-col :span="12">
|
|
<el-card shadow="never" class="group-status-card">
|
|
<div slot="header" class="group-status-card-header">
|
|
<span>已开启群</span>
|
|
<el-tag size="mini" type="success">{% raw %}{{ pluginGroupStatusData.enabled_count || 0 }}{% endraw %}</el-tag>
|
|
</div>
|
|
<el-table
|
|
:data="pluginGroupStatusData.enabled_groups || []"
|
|
size="mini"
|
|
max-height="420"
|
|
empty-text="暂无已开启群">
|
|
<el-table-column label="群名称" min-width="170">
|
|
<template slot-scope="scope">
|
|
{% raw %}{{ scope.row.group_name || scope.row.group_id }}{% endraw %}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="group_id" label="群ID" min-width="210" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="操作" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="danger"
|
|
plain
|
|
:disabled="groupStatusLoading || !pluginGroupStatusData.supports_group_switch"
|
|
@click="togglePluginGroupSwitch(scope.row, false)">
|
|
关闭
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-card shadow="never" class="group-status-card">
|
|
<div slot="header" class="group-status-card-header">
|
|
<span>未开启群</span>
|
|
<el-tag size="mini" type="info">{% raw %}{{ pluginGroupStatusData.disabled_count || 0 }}{% endraw %}</el-tag>
|
|
</div>
|
|
<el-table
|
|
:data="pluginGroupStatusData.disabled_groups || []"
|
|
size="mini"
|
|
max-height="420"
|
|
empty-text="暂无未开启群">
|
|
<el-table-column label="群名称" min-width="170">
|
|
<template slot-scope="scope">
|
|
{% raw %}{{ scope.row.group_name || scope.row.group_id }}{% endraw %}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="group_id" label="群ID" min-width="210" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="操作" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="success"
|
|
plain
|
|
:disabled="groupStatusLoading || !pluginGroupStatusData.supports_group_switch"
|
|
@click="togglePluginGroupSwitch(scope.row, true)">
|
|
开启
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</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',
|
|
pluginGroupStatusVisible: false,
|
|
groupStatusLoading: false,
|
|
pluginGroupStatusData: null,
|
|
currentGroupStatusPlugin: null
|
|
}
|
|
},
|
|
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.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 {
|
|
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(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('获取插件详情出错');
|
|
});
|
|
},
|
|
showPluginGroupStatus(plugin) {
|
|
// 打开弹窗前先进入加载态，避免用户在慢接口场景下看到旧数据。
|
|
this.pluginGroupStatusVisible = true;
|
|
this.groupStatusLoading = true;
|
|
this.pluginGroupStatusData = null;
|
|
// 记录当前正在查看群状态的插件，供“开启/关闭后刷新”复用。
|
|
this.currentGroupStatusPlugin = plugin;
|
|
|
|
// 统一使用插件模块名查询，和启用/禁用/重载接口参数保持一致。
|
|
return axios.get('/api/plugins/group_status', {
|
|
params: {
|
|
plugin_name: plugin.module_name
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
// 接口返回已按“已开启/未开启”拆分好，前端仅做展示。
|
|
this.pluginGroupStatusData = response.data.data || {
|
|
enabled_groups: [],
|
|
disabled_groups: [],
|
|
enabled_count: 0,
|
|
disabled_count: 0,
|
|
total_group_count: 0,
|
|
supports_group_switch: false
|
|
};
|
|
} else {
|
|
this.$message.error(response.data.message || '获取插件群状态失败');
|
|
this.pluginGroupStatusVisible = false;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取插件群状态出错:', error);
|
|
this.$message.error('获取插件群状态出错');
|
|
this.pluginGroupStatusVisible = false;
|
|
})
|
|
.finally(() => {
|
|
this.groupStatusLoading = false;
|
|
});
|
|
},
|
|
togglePluginGroupSwitch(group, enable) {
|
|
if (!this.currentGroupStatusPlugin || !group || !group.group_id) {
|
|
this.$message.error('缺少必要参数，无法切换');
|
|
return;
|
|
}
|
|
|
|
const actionText = enable ? '开启' : '关闭';
|
|
const pluginName = this.currentGroupStatusPlugin.name || this.currentGroupStatusPlugin.module_name;
|
|
const groupName = group.group_name || group.group_id;
|
|
|
|
this.$confirm(`确定要${actionText}群 "${groupName}" 的插件 "${pluginName}" 吗？`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.groupStatusLoading = true;
|
|
// 调用后端切换接口，后端内部复用 GroupBotManager 的原有缓存+Redis策略。
|
|
axios.post('/api/plugins/group_status/toggle', {
|
|
plugin_name: this.currentGroupStatusPlugin.module_name,
|
|
group_id: group.group_id,
|
|
status: enable ? 'enabled' : 'disabled'
|
|
})
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.$message.success(`${actionText}成功`);
|
|
// 切换后重新拉取当前插件群状态，保证统计与列表一致。
|
|
return this.showPluginGroupStatus(this.currentGroupStatusPlugin);
|
|
} else {
|
|
this.$message.error(response.data.message || `${actionText}失败`);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error(`${actionText}插件群状态出错:`, error);
|
|
this.$message.error(`${actionText}插件群状态出错`);
|
|
})
|
|
.finally(() => {
|
|
this.groupStatusLoading = false;
|
|
});
|
|
}).catch(() => {
|
|
this.$message.info('已取消操作');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
.page-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.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);
|
|
}
|
|
.page-eyebrow {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
color: #6366f1;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
.page-hero-copy h1 {
|
|
font-size: 30px;
|
|
line-height: 1.1;
|
|
margin-bottom: 10px;
|
|
color: #0f172a;
|
|
}
|
|
.page-hero-copy p {
|
|
color: #64748b;
|
|
font-size: 14px;
|
|
}
|
|
.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; }
|
|
.plugin-group-status-dialog { min-height: 240px; }
|
|
.group-status-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 14px;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.group-status-title { font-size: 16px; font-weight: 600; color: #0f172a; }
|
|
.group-status-subtitle { margin-left: 8px; font-size: 12px; color: #64748b; font-weight: 500; }
|
|
.group-status-summary { display: flex; align-items: center; gap: 8px; }
|
|
.group-status-alert { margin-bottom: 12px; }
|
|
.group-status-card { border-radius: 12px; }
|
|
.group-status-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 600;
|
|
color: #334155;
|
|
}
|
|
</style>
|
|
{% endblock %}
|