479 lines
18 KiB
HTML
479 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}命令索引 - 机器人管理后台{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-shell command-catalog-page">
|
|
<div class="page-hero">
|
|
<div class="page-hero-copy">
|
|
<div class="page-eyebrow">Command Catalog</div>
|
|
<h1>命令索引</h1>
|
|
<p>集中查看当前插件命令、群可用状态、自动能力与管理员触发示例，减少靠记忆找功能的成本。</p>
|
|
</div>
|
|
<div class="page-hero-actions">
|
|
<el-select v-model="selectedGroupId" clearable filterable placeholder="选择群查看实际可用状态" @change="loadCatalog" class="hero-select">
|
|
<el-option
|
|
v-for="group in groupOptions"
|
|
:key="group.group_id"
|
|
:label="group.group_name"
|
|
:value="group.group_id">
|
|
</el-option>
|
|
</el-select>
|
|
<el-button type="primary" @click="loadCatalog">
|
|
<i class="el-icon-refresh"></i> 刷新索引
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-row :gutter="16" class="overview-grid">
|
|
<el-col :xs="24" :sm="12" :md="6">
|
|
<el-card class="overview-card overview-card--primary" shadow="hover">
|
|
<div class="overview-label">可用手动命令</div>
|
|
<div class="overview-value">{% raw %}{{ summary.available_manual_count || 0 }}{% endraw %}</div>
|
|
<div class="overview-note">当前群可以直接触发的消息命令</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="6">
|
|
<el-card class="overview-card" shadow="hover">
|
|
<div class="overview-label">自动能力</div>
|
|
<div class="overview-value">{% raw %}{{ summary.available_auto_count || 0 }}{% endraw %}</div>
|
|
<div class="overview-note">无需手动发送指令的自动/定时能力</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="6">
|
|
<el-card class="overview-card overview-card--soft" shadow="hover">
|
|
<div class="overview-label">未启用命令</div>
|
|
<div class="overview-value">{% raw %}{{ summary.unavailable_manual_count || 0 }}{% endraw %}</div>
|
|
<div class="overview-note">管理员视角下可看到但当前群不可用的命令</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="6">
|
|
<el-card class="overview-card" shadow="hover">
|
|
<div class="overview-label">管理命令</div>
|
|
<div class="overview-value">{% raw %}{{ summary.admin_command_count || 0 }}{% endraw %}</div>
|
|
<div class="overview-note">群开关、管理员维护等后台辅助命令</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-card class="workspace-card workspace-card--filters" shadow="hover">
|
|
<div class="workspace-header workspace-header--compact">
|
|
<div>
|
|
<h3>筛选条件</h3>
|
|
<p>支持按命令、插件名、描述关键词快速定位。</p>
|
|
</div>
|
|
<el-input
|
|
v-model.trim="searchKeyword"
|
|
clearable
|
|
placeholder="搜索命令 / 插件 / 描述"
|
|
class="search-input">
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
</el-input>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card class="workspace-card" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>当前可用命令</h3>
|
|
<p>这里展示的是当前群在管理员视角下“真实可触发”的命令入口。</p>
|
|
</div>
|
|
<div class="workspace-meta">
|
|
{% raw %}{{ activeGroupLabel }}{% endraw %}
|
|
</div>
|
|
</div>
|
|
|
|
<el-table :data="filteredAvailableManual" style="width: 100%" v-loading="loading" empty-text="当前没有可直接使用的命令">
|
|
<el-table-column label="插件" min-width="180">
|
|
<template slot-scope="scope">
|
|
<div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
|
|
<div class="entity-subtitle">{% raw %}{{ scope.row.description }}{% endraw %}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="主指令" min-width="180">
|
|
<template slot-scope="scope">
|
|
<span class="mono-text">{% raw %}{{ scope.row.primary_command || '-' }}{% endraw %}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="别名" min-width="220">
|
|
<template slot-scope="scope">
|
|
<div class="tag-row" v-if="scope.row.alias_commands && scope.row.alias_commands.length">
|
|
<el-tag v-for="alias in scope.row.alias_commands" :key="alias" size="mini" effect="plain">
|
|
{% raw %}{{ alias }}{% endraw %}
|
|
</el-tag>
|
|
</div>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="类别" width="110" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag size="small" type="success">{% raw %}{{ scope.row.category_label }}{% endraw %}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="可用原因" min-width="150">
|
|
<template slot-scope="scope">
|
|
{% raw %}{{ scope.row.availability_reason || '-' }}{% endraw %}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="Feature Key" min-width="150">
|
|
<template slot-scope="scope">
|
|
<span class="mono-text">{% raw %}{{ scope.row.feature_key || '-' }}{% endraw %}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<el-row :gutter="16" class="insight-grid">
|
|
<el-col :xs="24" :lg="12">
|
|
<el-card class="workspace-card" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>未启用命令</h3>
|
|
<p>这部分只在后台管理员视角展示，便于你知道还有哪些能力没在当前群打开。</p>
|
|
</div>
|
|
</div>
|
|
<el-table :data="filteredUnavailableManual" style="width: 100%" v-loading="loading" empty-text="当前没有未启用命令">
|
|
<el-table-column label="插件" min-width="160">
|
|
<template slot-scope="scope">
|
|
<div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
|
|
<div class="entity-subtitle">{% raw %}{{ scope.row.description }}{% endraw %}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="命令" min-width="150">
|
|
<template slot-scope="scope">
|
|
<span class="mono-text">{% raw %}{{ scope.row.primary_command || '-' }}{% endraw %}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="原因" min-width="140">
|
|
<template slot-scope="scope">
|
|
<el-tag size="mini" type="warning">{% raw %}{{ scope.row.availability_reason || '-' }}{% endraw %}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :lg="12">
|
|
<el-card class="workspace-card" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>自动/定时能力</h3>
|
|
<p>用于提醒你哪些功能不是靠用户发命令触发，而是自动执行。</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-list">
|
|
<div v-if="filteredAutoCommands.length === 0" class="empty-state">当前没有已启用的自动能力</div>
|
|
<div v-for="item in filteredAutoCommands" :key="item.module_name" class="info-item">
|
|
<div class="info-item__head">
|
|
<div class="info-item__title">{% raw %}{{ item.name }}{% endraw %}</div>
|
|
<el-tag size="mini" type="info">{% raw %}{{ item.category_label }}{% endraw %}</el-tag>
|
|
</div>
|
|
<div class="info-item__desc">{% raw %}{{ item.description }}{% endraw %}</div>
|
|
<div class="info-item__meta">{% raw %}{{ item.availability_reason || '自动执行' }}{% endraw %}</div>
|
|
</div>
|
|
</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>
|
|
<div class="info-list info-list--grid">
|
|
<div v-if="!adminCommands.length" class="empty-state">当前没有管理命令示例</div>
|
|
<div v-for="item in adminCommands" :key="item.example" class="info-item">
|
|
<div class="info-item__head">
|
|
<div class="info-item__title">{% raw %}{{ item.title }}{% endraw %}</div>
|
|
</div>
|
|
<div class="info-item__command mono-text">{% raw %}{{ item.example }}{% endraw %}</div>
|
|
<div class="info-item__desc">{% raw %}{{ item.description }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
mixins: [baseApp],
|
|
data() {
|
|
return {
|
|
currentView: '18',
|
|
loading: false,
|
|
searchKeyword: '',
|
|
selectedGroupId: '',
|
|
groupOptions: [],
|
|
summary: {
|
|
available_manual_count: 0,
|
|
available_auto_count: 0,
|
|
unavailable_manual_count: 0,
|
|
admin_command_count: 0
|
|
},
|
|
availableManual: [],
|
|
unavailableManual: [],
|
|
autoCommands: [],
|
|
adminCommands: [],
|
|
generatedAt: ''
|
|
};
|
|
},
|
|
computed: {
|
|
activeGroupLabel() {
|
|
if (!this.selectedGroupId) {
|
|
return '当前视角：全部运行中插件（未指定群）';
|
|
}
|
|
const matched = (this.groupOptions || []).find(item => item.group_id === this.selectedGroupId);
|
|
return `当前视角：${matched ? matched.group_name : this.selectedGroupId}`;
|
|
},
|
|
filteredAvailableManual() {
|
|
return this.filterCommandItems(this.availableManual);
|
|
},
|
|
filteredUnavailableManual() {
|
|
return this.filterCommandItems(this.unavailableManual);
|
|
},
|
|
filteredAutoCommands() {
|
|
return this.filterCommandItems(this.autoCommands);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentView = '18';
|
|
this.loadCatalog();
|
|
},
|
|
methods: {
|
|
filterCommandItems(items) {
|
|
const keyword = String(this.searchKeyword || '').trim().toLowerCase();
|
|
if (!keyword) return items || [];
|
|
return (items || []).filter(item => {
|
|
const aliasText = ((item.alias_commands || []).join(' ') || '').toLowerCase();
|
|
const fullText = [
|
|
item.name,
|
|
item.description,
|
|
item.primary_command,
|
|
aliasText,
|
|
item.feature_key,
|
|
item.availability_reason
|
|
].join(' ').toLowerCase();
|
|
return fullText.includes(keyword);
|
|
});
|
|
},
|
|
loadCatalog() {
|
|
this.loading = true;
|
|
axios.get('/api/plugins/command_catalog', {
|
|
params: {
|
|
group_id: this.selectedGroupId
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
const payload = response.data.data || {};
|
|
this.groupOptions = payload.group_options || [];
|
|
this.summary = payload.summary || this.summary;
|
|
this.availableManual = payload.available_manual || [];
|
|
this.unavailableManual = payload.unavailable_manual || [];
|
|
this.autoCommands = payload.available_auto || [];
|
|
this.adminCommands = payload.admin_commands || [];
|
|
this.generatedAt = payload.generated_at || '';
|
|
} else {
|
|
this.$message.error(response.data.message || '加载命令索引失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载命令索引出错:', error);
|
|
this.$message.error('加载命令索引出错');
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
<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.92));
|
|
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;
|
|
}
|
|
.page-hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.hero-select {
|
|
width: 280px;
|
|
max-width: 100%;
|
|
}
|
|
.overview-grid .el-col,
|
|
.insight-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--compact {
|
|
align-items: flex-end;
|
|
}
|
|
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
|
|
.workspace-header p { font-size: 13px; color: #64748b; }
|
|
.workspace-meta {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
white-space: nowrap;
|
|
}
|
|
.search-input {
|
|
width: 280px;
|
|
max-width: 100%;
|
|
}
|
|
.entity-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
.entity-subtitle {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
line-height: 1.6;
|
|
}
|
|
.mono-text {
|
|
font-family: Consolas, "SFMono-Regular", Menlo, monospace;
|
|
color: #334155;
|
|
}
|
|
.tag-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.info-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.info-list--grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.info-item {
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
background: rgba(248,250,252,0.82);
|
|
border: 1px solid rgba(148,163,184,0.12);
|
|
}
|
|
.info-item__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.info-item__title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
.info-item__command {
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
}
|
|
.info-item__desc {
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
color: #475569;
|
|
word-break: break-word;
|
|
}
|
|
.info-item__meta {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
}
|
|
.empty-state {
|
|
padding: 16px 12px;
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
font-size: 13px;
|
|
background: rgba(248, 250, 252, 0.9);
|
|
border: 1px dashed rgba(148, 163, 184, 0.35);
|
|
border-radius: 14px;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.page-hero,
|
|
.workspace-header,
|
|
.workspace-header--compact {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.page-hero-actions,
|
|
.hero-select,
|
|
.search-input {
|
|
width: 100%;
|
|
}
|
|
.info-list--grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.page-hero {
|
|
padding: 18px 16px;
|
|
border-radius: 20px;
|
|
}
|
|
.page-hero-copy h1 {
|
|
font-size: 24px;
|
|
}
|
|
.workspace-card .el-card__body {
|
|
padding: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|