xinyu-pro 0.21.0

package/components/ui/PluginModalRenderer.tsx

@@ -0,0 +1,185 @@
+// components/ui/PluginModalRenderer.tsx - 模态框渲染器组件
+// 负责渲染插件创建的模态框和确认对话框
+'use client';
+
+import React, { useState, useCallback } from 'react';
+import { ModalRegistration } from '@/lib/plugin-types';
+import { getPluginRuntime } from '@/lib/plugin-runtime';
+
+interface PluginModalRendererProps {
+  modals: ModalRegistration[];
+  onClose: (modalId: string) => void;
+}
+
+export function PluginModalRenderer({ modals, onClose }: PluginModalRendererProps) {
+  if (!modals || modals.length === 0) return null;
+
+  return (
+    <>
+      {modals.map((modal) => (
+        <PluginModal
+          key={modal.id}
+          modal={modal}
+          onClose={() => onClose(modal.id)}
+        />
+      ))}
+    </>
+  );
+}
+
+function PluginModal({
+  modal,
+  onClose,
+}: {
+  modal: ModalRegistration;
+  onClose: () => void;
+}) {
+  const [visible, setVisible] = useState(true);
+
+  // 事件委托：处理模态框内容中 data-action 属性的点击事件
+  const handleContentClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    const actionEl = target.closest<HTMLElement>('[data-action]');
+    if (!actionEl) return;
+
+    const actionName = actionEl.getAttribute('data-action');
+    const payload = actionEl.getAttribute('data-payload') || undefined;
+
+    if (actionName && modal.pluginId) {
+      e.preventDefault();
+      e.stopPropagation();
+      const runtime = getPluginRuntime();
+      runtime.dispatchAction(modal.pluginId, actionName, actionEl, payload);
+    }
+  }, [modal.pluginId]);
+
+  const handleClose = useCallback(() => {
+    setVisible(false);
+    // 等待动画完成后真正关闭
+    setTimeout(() => {
+      onClose();
+    }, 200);
+  }, [onClose]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] flex items-center justify-center"
+      style={{
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 0.2s ease',
+      }}
+    >
+      {/* 遮罩 */}
+      {modal.backdrop !== false && (
+        <div
+          className="absolute inset-0"
+          style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+          onClick={modal.closable !== false ? handleClose : undefined}
+        />
+      )}
+
+      {/* 模态框主体 */}
+      <div
+        id={`xinyu-modal-${modal.id}`}
+        data-plugin-slot="modal"
+        data-plugin-id={modal.pluginId}
+        className="relative rounded-xl shadow-2xl flex flex-col max-h-[80vh]"
+        style={{
+          backgroundColor: 'var(--color-bg-secondary)',
+          border: '1px solid var(--color-border)',
+          width: modal.width || '480px',
+          maxWidth: '90vw',
+          animation: 'pluginModalIn 0.2s ease',
+          ...modal.style,
+        }}
+      >
+        {/* 标题栏 */}
+        <div
+          className="flex items-center justify-between px-5 py-3.5 shrink-0"
+          style={{ borderBottom: '1px solid var(--color-border)' }}
+        >
+          <h3
+            className="text-sm font-bold"
+            style={{ color: 'var(--color-text-primary)' }}
+          >
+            {modal.title}
+          </h3>
+          {modal.closable !== false && (
+            <button
+              onClick={handleClose}
+              className="p-1 rounded-lg transition-colors"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          )}
+        </div>
+
+        {/* 内容区 */}
+        <div
+          className="flex-1 overflow-y-auto px-5 py-4"
+          style={{ color: 'var(--color-text-secondary)' }}
+          onClick={handleContentClick}
+          data-plugin-id={modal.pluginId}
+        >
+          <div dangerouslySetInnerHTML={{ __html: modal.content }} />
+        </div>
+
+        {/* 底部按钮 */}
+        {modal.actions && modal.actions.length > 0 && (
+          <div
+            className="flex items-center justify-end gap-2 px-5 py-3.5 shrink-0"
+            style={{ borderTop: '1px solid var(--color-border)' }}
+          >
+            {modal.actions.map((action, idx) => (
+              <button
+                key={idx}
+                onClick={() => {
+                  try {
+                    action.onClick();
+                  } catch (e) {
+                    console.error('[PluginModal] 按钮点击出错:', e);
+                  }
+                }}
+                className="px-4 py-2 rounded-lg text-xs font-medium transition-colors"
+                style={{
+                  backgroundColor: action.primary
+                    ? 'var(--color-accent)'
+                    : action.danger
+                      ? 'rgba(220, 38, 38, 0.9)'
+                      : 'transparent',
+                  color: action.primary || action.danger
+                    ? '#fff'
+                    : 'var(--color-text-secondary)',
+                  border: action.primary || action.danger
+                    ? 'none'
+                    : '1px solid var(--color-border)',
+                }}
+              >
+                {action.text}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <style jsx>{`
+        @keyframes pluginModalIn {
+          from {
+            opacity: 0;
+            transform: scale(0.95) translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}