Cyrene_v2/frontend/web/src/admin/modules/Plugins.tsx

import { useState } from "react";
import { useAsyncData } from "../../lib/useAsyncData";
import { adminListPlugins, adminSetPluginPolicy, adminPluginInstall, adminPluginUninstall, getStoredRole } from "../../lib/api";
import type { AdminPluginRecord } from "../../lib/types";
import { useAutoReload } from "../hooks";
import { useAuditStore } from "../audit";
import { AdminTable, Notice, PageHeader, type AdminColumn } from "../components";
import { Button, Surface, Switch, Tag } from "../../components/primitives";

export function PluginsModule(): React.ReactNode {
  const { data, loading, error, reload } = useAsyncData(adminListPlugins, []);
  useAutoReload(reload, 10000);
  const isOwner = getStoredRole() === "owner";
  const log = useAuditStore((s) => s.log);
  const [busy, setBusy] = useState<string | null>(null);
  const [fail, setFail] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);

  const install = () => {
    setBusy("__install__");
    setFail(null);
    setMsg(null);
    adminPluginInstall({ name: "sample-plugin", kind: "tool", description: "手工安装示例" })
      .then(() => {
        log("plugin.install", "ok");
        setMsg("插件安装成功");
        reload();
      })
      .catch((err: unknown) => {
        log("plugin.install", "error");
        setFail(err instanceof Error ? err.message : "插件安装失败");
      })
      .finally(() => setBusy(null));
  };

  const uninstall = (name: string) => {
    setBusy(name);
    setFail(null);
    setMsg(null);
    adminPluginUninstall({ name })
      .then(() => {
        log("plugin.uninstall", "ok");
        setMsg(`已卸载 ${name}`);
        reload();
      })
      .catch((err: unknown) => {
        log("plugin.uninstall", "error");
        setFail(err instanceof Error ? err.message : "卸载失败");
      })
      .finally(() => setBusy(null));
  };

  const setPolicy = (name: string, allowInGroup: boolean, allowInStranger: boolean) => {
    setBusy(name);
    setFail(null);
    adminSetPluginPolicy(name, allowInGroup, allowInStranger)
      .then(() => {
        log(`policy.set:${name}`, "ok");
        reload();
      })
      .catch((err: unknown) => {
        log(`policy.set:${name}`, "error");
        setFail(err instanceof Error ? err.message : "策略更新失败");
      })
      .finally(() => setBusy(null));
  };

  const columns: AdminColumn<AdminPluginRecord>[] = [
    { key: "name", title: "名称", render: (p) => <span className="font-medium">{p.name}</span> },
    { key: "kind", title: "类型", render: (p) => <Tag tone="accent">{p.kind}</Tag> },
    { key: "desc", title: "描述", render: (p) => <span className="block max-w-sm truncate text-[var(--mu-text-mid)]">{p.description || "—"}</span> },
    {
      key: "policy",
      title: "环境授权（owner）",
      render: (p) => (
        <span className="flex items-center gap-4">
          <label className="flex items-center gap-1.5">
            <Switch
              checked={p.allowInGroup}
              disabled={!isOwner || busy === p.name}
              onChange={(v) => setPolicy(p.name, v, p.allowInStranger)}
            />
            <span className="text-xs text-[var(--mu-text-mid)]">群聊</span>
          </label>
          <label className="flex items-center gap-1.5">
            <Switch
              checked={p.allowInStranger}
              disabled={!isOwner || busy === p.name}
              onChange={(v) => setPolicy(p.name, p.allowInGroup, v)}
            />
            <span className="text-xs text-[var(--mu-text-mid)]">陌生人</span>
          </label>
          {busy === p.name ? <span className="text-xs text-[var(--mu-text-lo)]">保存中…</span> : null}
        </span>
      ),
    },
    {
      key: "actions",
      title: "操作",
      render: (p) => (
        <Button size="sm" variant="ghost" disabled={!isOwner || busy !== null} onClick={() => uninstall(p.name)}>
          卸载
        </Button>
      ),
    },
  ];

  return (
    <div className="space-y-5">
      <PageHeader
        title="插件与能力"
        subtitle="GET /api/v1/admin/plugins · 启停/安装/卸载/MCP 连接 · POST /api/v1/admin/plugins/policy (owner-only)"
        actions={
          <Button variant="primary" disabled={busy !== null} onClick={install}>
            安装插件
          </Button>
        }
      />

      {!isOwner ? <Notice tone="warn">当前角色为 {getStoredRole()}，工具策略仅 owner 可写（读取/查看可见）。</Notice> : null}
      {fail ? <Notice tone="err">{fail}</Notice> : null}
      {msg ? <Notice tone="ok">{msg}</Notice> : null}

      <Surface className="space-y-2">
        <AdminTable
          columns={columns}
          rows={loading ? null : data}
          loading={loading}
          error={error}
          emptyTitle="无插件数据"
          rowKey={(p) => p.name}
        />
      </Surface>

      <Notice>工具 schema / 技能 / MCP 服务器列表为后端 M10+ 提供；此页展示已注册能力及其环境可见性标记（群聊 / 陌生人默认关闭）。</Notice>
    </div>
  );
}