为 Web 设置界面提供只读插件清单标签页，以可搜索的双列折…

# Discord插件清单页面方案

一、方案选型

• 单HTML文件：无需服务器，本地打开即可用，方便随时更新。
• 技术栈：纯HTML + CSS + 原生JS（无依赖），约100行代码。

二、核心代码模板

```html

<!DOCTYPE html>

<html>

<head>

<style>

.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.card { border:1px solid #ccc; border-radius:8px; padding:10px; }

.card.running { border-left:5px solid green; }

.card.stopped { border-left:5px solid red; }

.detail { display:none; }

.card.open .detail { display:block; }

.search { width:100%; padding:8px; margin-bottom:12px; }

</style>

</head>

<body>

<input class="search" oninput="filter(this.value)" placeholder="搜索插件...">

<div class="grid" id="grid"></div>

<script>

const plugins = [

{name:"MEE6", status:"运行中", desc:"等级系统", config:"前缀:!；等级频道:#level-up"},

{name:"Carl-bot", status:"已停用", desc:"自动回复", config:"触发词:hello"},

// 按此格式继续添加40+条

];

function render(list){

document.getElementById("grid").innerHTML = list.map((p,i)=>`

<div class="card ${p.status==='运行中'?'running':'stopped'}" onclick="this.classList.toggle('open')">

<b>${p.name}</b> <span>${p.status}</span>

<div class="detail">${p.desc}<br>配置：${p.config}</div>

</div>`).join("");

}

function filter(v){

render(plugins.filter(p=>p.name+p.desc+p.config).toLowerCase().includes(v.toLowerCase()));

}

render(plugins);

</script>

</body>

</html>

```

三、使用步骤

• 录入数据：在JS的plugins数组中逐条填入插件名、状态、描述、配置（建议用表格批量整理后粘贴）。
• 状态标记：运行中显示绿边，已停用显示红边，一眼可辨。
• 交互逻辑：点击卡片展开/折叠配置详情；顶部搜索框实时过滤（支持名称、描述、配置关键词）。

四、进阶建议

• 若需自动同步真实启停状态，可调用Bot的API接口定时拉取，需自建服务器。
• 数据可存为独立JSON文件，便于与其他成员共享维护。
• 移动端访问可将grid-template-columns改为`auto-fit, m