diff --git a/admin/dashboard/templates/plugins_manage.html b/admin/dashboard/templates/plugins_manage.html index 94c6e3c..a80e9aa 100644 --- a/admin/dashboard/templates/plugins_manage.html +++ b/admin/dashboard/templates/plugins_manage.html @@ -18,28 +18,28 @@ - +
插件总数
{% raw %}{{ plugins.length }}{% endraw %}
当前已注册插件模块
 - +
运行中
{% raw %}{{ runningPluginsCount }}{% endraw %}
可正常提供能力的插件
 - +
已停用
{% raw %}{{ stoppedPluginsCount }}{% endraw %}
待启用或排查状态
 - +
作者数量
{% raw %}{{ authorsCount }}{% endraw %}
@@ -56,7 +56,8 @@ - + + + +
+ +
暂无插件数据
+ +
+
+
{% raw %}{{ index + 1 }}{% endraw %}
+
+
{% raw %}{{ plugin.name }}{% endraw %}
+
模块：{% raw %}{{ plugin.module_name }}{% endraw %}
+
+
+ + {% raw %}{{ plugin.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %} + +
+
+ 版本：{% raw %}{{ plugin.version || '未知' }}{% endraw %} + 作者：{% raw %}{{ plugin.author || '未知' }}{% endraw %} +
+
+ {% raw %}{{ plugin.description || '暂无描述' }}{% endraw %} +
+
+ + {% raw %}{{ plugin.status === 'RUNNING' ? '禁用' : '启用' }}{% endraw %} + + + 重载 + + + 详情 + + + 群状态 + +
+ +
- +
查看插件基础信息、命令列表与配置内容，需要时可直接在这里编辑配置。
- + {% raw %}{{ selectedPlugin.name }}{% endraw %} {% raw %}{{ selectedPlugin.module_name }}{% endraw %} {% raw %}{{ selectedPlugin.version }}{% endraw %} @@ -152,7 +200,7 @@
- +
@@ -177,13 +225,15 @@ - +
已开启群 {% raw %}{{ pluginGroupStatusData.enabled_count || 0 }}{% endraw %}
+ +
+
暂无已开启群
+ +
{% raw %}{{ group.group_name || group.group_id }}{% endraw %}
+
群ID：{% raw %}{{ group.group_id }}{% endraw %}
+
+ + 关闭 + +
+ +
- +
未开启群 {% raw %}{{ pluginGroupStatusData.disabled_count || 0 }}{% endraw %}
+
+
暂无未开启群
+ +
{% raw %}{{ group.group_name || group.group_id }}{% endraw %}
+
群ID：{% raw %}{{ group.group_id }}{% endraw %}
+
+ + 开启 + +
+ +
@@ -265,7 +358,9 @@ pluginGroupStatusVisible: false, groupStatusLoading: false, pluginGroupStatusData: null, - currentGroupStatusPlugin: null + currentGroupStatusPlugin: null, + // 使用响应式视口状态切换移动端卡片布局，避免仅靠 CSS 隐藏后仍渲染宽表格。 + isMobileViewport: false } }, computed: { @@ -277,13 +372,34 @@ }, authorsCount() { return new Set((this.plugins || []).map(plugin => plugin.author).filter(Boolean)).size; + }, + // 弹窗宽度按视口分级收缩，保证手机上弹窗内容不会贴边或继续触发横向溢出。 + pluginInfoDialogWidth() { + return this.isMobileViewport ? '94%' : '64%'; + }, + groupStatusDialogWidth() { + return this.isMobileViewport ? '94%' : '72%'; + }, + pluginDescriptionsColumn() { + return this.isMobileViewport ? 1 : 2; } }, mounted() { this.currentView = '11'; + // 首次进入页面就同步一次屏幕宽度，确保移动端不会先闪出桌面表格。 + this.updateViewportState(); + window.addEventListener('resize', this.updateViewportState); this.loadPlugins(); }, + beforeDestroy() { + // 页面销毁时移除监听，避免重复绑定造成状态更新和内存占用问题。 + window.removeEventListener('resize', this.updateViewportState); + }, methods: { + updateViewportState() { + // 这里统一以 768px 作为移动端断点，和常见后台管理布局断点保持一致。 + this.isMobileViewport = window.innerWidth <= 768; + }, loadPlugins() { this.loading = true; axios.get('/api/plugins') @@ -603,6 +719,67 @@ .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; } + .mobile-plugin-list, + .mobile-group-list { + display: flex; + flex-direction: column; + gap: 12px; + } + .mobile-plugin-card, + .mobile-group-card { + border-radius: 16px; + } + .mobile-plugin-card__header, + .mobile-group-card__actions { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 10px; + } + .mobile-plugin-card__header { + margin-bottom: 12px; + } + .mobile-plugin-card__meta { + display: flex; + flex-wrap: wrap; + gap: 8px 14px; + margin-bottom: 10px; + font-size: 12px; + color: #64748b; + } + .mobile-plugin-card__desc, + .mobile-group-card__id { + font-size: 13px; + line-height: 1.7; + color: #475569; + word-break: break-word; + } + .mobile-plugin-card__actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 14px; + } + .mobile-group-card__title { + font-size: 14px; + font-weight: 600; + color: #0f172a; + margin-bottom: 6px; + word-break: break-word; + } + .mobile-group-card__actions { + margin-top: 12px; + justify-content: flex-end; + } + .mobile-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; + } .group-status-header { display: flex; align-items: center; @@ -623,5 +800,65 @@ font-weight: 600; color: #334155; } + /* 小屏重点做三件事： + 1. 让头部和操作区纵向排布，避免按钮把容器撑宽； + 2. 让弹窗内容与卡片内边距缩小，提升可视面积； + 3. 让配置编辑区和标签内容可换行，不再出现页面级横向滚动。 */ + @media (max-width: 768px) { + .page-hero { + flex-direction: column; + align-items: stretch; + padding: 18px 16px; + border-radius: 20px; + } + .page-hero-copy h1 { + font-size: 24px; + } + .page-hero-actions .el-button { + width: 100%; + } + .workspace-header { + flex-direction: column; + align-items: flex-start; + } + .workspace-card .el-card__body, + .group-status-card .el-card__body { + padding: 14px; + } + .entity-cell { + align-items: flex-start; + } + .entity-copy, + .group-status-title { + min-width: 0; + } + .entity-title, + .entity-subtitle, + .group-status-title, + .group-status-subtitle { + word-break: break-word; + } + .plugin-detail-container { + max-height: 72vh; + } + .config-container { + padding: 10px; + } + .config-actions { + flex-wrap: wrap; + } + .mobile-plugin-card__header { + flex-direction: column; + } + .mobile-plugin-card__actions .el-button, + .mobile-group-card__actions .el-button { + flex: 1 1 calc(50% - 8px); + min-width: 0; + margin-left: 0 !important; + } + .group-status-summary { + flex-wrap: wrap; + } + } {% endblock %}