Genarrative/apps/ai-game-creator-shell/src/features/plugins/PluginPanelHost.tsx

import { useEffect, useState } from 'react';

import type { AgcPluginPanel } from '../../app/types';
import { ThemedModal } from '../../components/modal/ThemedModal';
import { readAgcPluginPanel } from '../../services/pluginHost';

export type PluginPanelHostProps = {
  pluginId: string;
  panel: AgcPluginPanel;
  onClose: () => void;
};

const PANEL_CSP =
  "<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:;\">";

/** Renders registered plugin panels and removes their iframe on unmount. */
export function PluginPanelHost({
  pluginId,
  panel,
  onClose,
}: PluginPanelHostProps) {
  const [html, setHtml] = useState<string | null>(null);
  const [error, setError] = useState('');

  useEffect(() => {
    let active = true;
    setHtml(null);
    setError('');
    void readAgcPluginPanel(pluginId, panel.id).then(
      (result) => {
        if (active) setHtml(result.html);
      },
      () => {
        if (active) setError('插件面板加载失败');
      },
    );
    return () => {
      active = false;
    };
  }, [panel.id, pluginId]);

  return (
    <ThemedModal
      open
      ariaLabel={panel.title}
      onClose={onClose}
      panelClassName="agc-plugin-panel"
      overlayClassName="agc-plugin-panel-overlay"
    >
      <header>
        <strong>{panel.title}</strong>
        <button
          type="button"
          aria-label={`关闭 ${panel.title}`}
          onClick={onClose}
        >
          关闭
        </button>
      </header>
      {error ? (
        <p role="alert">{error}</p>
      ) : html === null ? (
        <p role="status">正在加载</p>
      ) : (
        <iframe
          title={panel.title}
          srcDoc={PANEL_CSP + html}
          sandbox="allow-scripts"
        />
      )}
    </ThemedModal>
  );
}