xinyu-pro 0.21.0

package/components/ui/PageHeader.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import React from 'react';
+import { useRouterHistory } from '@/lib/router-history';
+
+interface PageHeaderProps {
+  /** 页面标题 */
+  title: React.ReactNode;
+  /** 副标题（可选） */
+  subtitle?: string;
+  /** 是否显示返回按钮（默认 true） */
+  showBack?: boolean;
+  /** 返回前确认回调，返回 true 表示可以返回 */
+  onBeforeBack?: () => boolean | Promise<boolean>;
+  /** 标题前的图标/标记（可选） */
+  icon?: React.ReactNode;
+  /** 标题右侧的标签（可选，如模板名称） */
+  badge?: React.ReactNode;
+  /** 右侧操作区（可选） */
+  actions?: React.ReactNode;
+  /** 是否固定在顶部 */
+  sticky?: boolean;
+  /** 额外的 className */
+  className?: string;
+  /** 额外的 style */
+  style?: React.CSSProperties;
+}
+
+export default function PageHeader({
+  title,
+  subtitle,
+  showBack = true,
+  onBeforeBack,
+  icon,
+  badge,
+  actions,
+  sticky = false,
+  className = '',
+  style,
+}: PageHeaderProps) {
+  const { back } = useRouterHistory();
+
+  const handleBack = async () => {
+    if (onBeforeBack) {
+      const canGo = await onBeforeBack();
+      if (!canGo) return;
+    }
+    back();
+  };
+
+  return (
+    <header
+      className={`flex items-center justify-between px-4 py-2.5 border-b shrink-0 ${sticky ? 'sticky top-0 z-30' : ''} ${className}`}
+      style={{
+        borderColor: 'var(--color-border)',
+        backgroundColor: 'var(--color-bg-secondary)',
+        ...style,
+      }}
+    >
+      {/* 左侧：返回按钮 + 标题 */}
+      <div className="flex items-center gap-2.5 min-w-0">
+        {showBack && (
+          <button
+            onClick={handleBack}
+            className="p-1.5 rounded-lg transition-colors shrink-0"
+            style={{ color: 'var(--color-text-secondary)' }}
+            title="返回"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M19 12H5M12 19l-7-7 7-7" />
+            </svg>
+          </button>
+        )}
+        <div className="flex items-center gap-2 min-w-0">
+          {icon && <span className="shrink-0">{icon}</span>}
+          <div className="min-w-0">
+            <div className="flex items-center gap-2 min-w-0">
+              <h1
+                className="text-sm font-bold truncate"
+                style={{ color: 'var(--color-accent)' }}
+              >
+                {title}
+              </h1>
+              {badge}
+            </div>
+            {subtitle && (
+              <p className="text-xs truncate" style={{ color: 'var(--color-text-muted)' }}>
+                {subtitle}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 右侧：操作区 */}
+      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+    </header>
+  );
+}

package/components/ui/PermissionConflictDialog.tsx

@@ -0,0 +1,206 @@
+// components/ui/PermissionConflictDialog.tsx - 权限冲突弹窗
+'use client';
+
+import React, { useState } from 'react';
+import { usePluginContext } from './PluginProvider';
+import { UI_PERMISSION_LABELS } from '@/lib/plugin-types';
+
+export function PermissionConflictDialog() {
+  const { permissionConflicts, resolvePermissionConflict, dismissPermissionConflicts } = usePluginContext();
+
+  if (!permissionConflicts || permissionConflicts.length === 0) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+      {/* 遮罩 */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={dismissPermissionConflicts} />
+
+      {/* 弹窗 */}
+      <div className="relative bg-[#1e1e2e] border border-[#313244] rounded-xl shadow-2xl max-w-lg w-full mx-4 max-h-[80vh] flex flex-col">
+        {/* 标题 */}
+        <div className="flex items-center gap-3 p-4 border-b border-[#313244]">
+          <span className="text-xl">⚠️</span>
+          <div>
+            <h2 className="text-sm font-bold text-[#cdd6f4]">插件启动失败：权限冲突</h2>
+            <p className="text-xs text-[#a6adc8] mt-0.5">
+              以下插件占用了冲突的权限，请处理
+            </p>
+          </div>
+          <button
+            onClick={dismissPermissionConflicts}
+            className="ml-auto text-[#a6adc8] hover:text-[#cdd6f4] transition-colors text-lg leading-none"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* 冲突列表 */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+          {permissionConflicts.map((conflict) => (
+            <ConflictGroup
+              key={conflict.manifest.id}
+              manifestName={conflict.manifest.name}
+              manifestIcon={conflict.manifest.icon || '📦'}
+              conflicts={conflict.conflicts}
+              missingRequired={conflict.missingRequired}
+              onResolve={resolvePermissionConflict}
+            />
+          ))}
+        </div>
+
+        {/* 底部提示 */}
+        <div className="p-4 border-t border-[#313244]">
+          <p className="text-xs text-[#a6adc8]">
+            💡 取消冲突权限：从该插件中移除非必要的权限声明
+          </p>
+          <p className="text-xs text-[#a6adc8] mt-1">
+            💡 禁用插件：完全禁用该插件
+          </p>
+          <p className="text-xs text-[#a6adc8] mt-1">
+            ✅ 所有冲突解决后，插件将自动重新启动
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface ConflictGroupProps {
+  manifestName: string;
+  manifestIcon: string;
+  conflicts: Array<{
+    permission: string;
+    conflictingPluginId: string;
+    conflictingPluginName: string;
+    conflictType: 'exclusive-vs-any' | 'common-vs-exclusive';
+  }>;
+  missingRequired: string[];
+  onResolve: (conflictingPluginId: string, permission: string, action: 'remove-permission' | 'disable-plugin') => Promise<void>;
+}
+
+function ConflictGroup({ manifestName, manifestIcon, conflicts, missingRequired, onResolve }: ConflictGroupProps) {
+  // 按冲突插件分组
+  const grouped = new Map<string, Array<{
+    permission: string;
+    conflictingPluginName: string;
+    conflictType: 'exclusive-vs-any' | 'common-vs-exclusive';
+  }>>();
+
+  for (const c of conflicts) {
+    if (!grouped.has(c.conflictingPluginId)) {
+      grouped.set(c.conflictingPluginId, []);
+    }
+    grouped.get(c.conflictingPluginId)!.push({
+      permission: c.permission,
+      conflictingPluginName: c.conflictingPluginName,
+      conflictType: c.conflictType,
+    });
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <span>{manifestIcon}</span>
+        <span className="text-sm font-medium text-[#cdd6f4]">{manifestName}</span>
+      </div>
+
+      {missingRequired.length > 0 && (
+        <div className="bg-[#45475a]/50 rounded-lg p-3 border border-[#f38ba8]/30">
+          <p className="text-xs text-[#f38ba8]">
+            ⛔ 必要权限未声明：{missingRequired.join(', ')}
+          </p>
+          <p className="text-xs text-[#a6adc8] mt-1">
+            请在插件编辑页面中添加这些权限到共享权限或排他权限中
+          </p>
+        </div>
+      )}
+
+      {Array.from(grouped.entries()).map(([pluginId, items]) => (
+        <ConflictItem
+          key={pluginId}
+          pluginId={pluginId}
+          pluginName={items[0].conflictingPluginName}
+          items={items}
+          onResolve={onResolve}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface ConflictItemProps {
+  pluginId: string;
+  pluginName: string;
+  items: Array<{
+    permission: string;
+    conflictType: 'exclusive-vs-any' | 'common-vs-exclusive';
+  }>;
+  onResolve: (conflictingPluginId: string, permission: string, action: 'remove-permission' | 'disable-plugin') => Promise<void>;
+}
+
+function ConflictItem({ pluginId, pluginName, items, onResolve }: ConflictItemProps) {
+  const [resolved, setResolved] = useState(false);
+  const [resolving, setResolving] = useState(false);
+
+  const handleResolve = async (action: 'remove-permission' | 'disable-plugin') => {
+    setResolving(true);
+    try {
+      // 逐个解决该插件的所有冲突
+      for (const item of items) {
+        await onResolve(pluginId, item.permission, action);
+      }
+      setResolved(true);
+      setTimeout(() => {}, 1000); // 保持显示 1 秒后由父组件移除
+    } catch (e) {
+      console.error('解决冲突失败:', e);
+    } finally {
+      setResolving(false);
+    }
+  };
+
+  const permLabels = items.map(item => {
+    const label = UI_PERMISSION_LABELS[item.permission as keyof typeof UI_PERMISSION_LABELS] || item.permission;
+    const typeLabel = item.conflictType === 'exclusive-vs-any' ? '排他' : '共享';
+    return `${label} (${typeLabel})`;
+  }).join('、');
+
+  if (resolved) {
+    return (
+      <div className="bg-[#a6e3a1]/10 border border-[#a6e3a1]/30 rounded-lg p-3 transition-all duration-500">
+        <div className="flex items-center gap-2">
+          <span className="text-[#a6e3a1]">✅</span>
+          <span className="text-sm text-[#a6e3a1]">{pluginName} — 已解决</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-[#45475a]/50 border border-[#313244] rounded-lg p-3 transition-all duration-300">
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0">
+          <p className="text-sm text-[#cdd6f4] font-medium">{pluginName}</p>
+          <p className="text-xs text-[#a6adc8] mt-1 break-all">
+            冲突权限：{permLabels}
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-2 mt-3">
+        <button
+          onClick={() => handleResolve('remove-permission')}
+          disabled={resolving}
+          className="flex-1 text-xs px-3 py-1.5 rounded-md bg-[#f9e2af]/10 text-[#f9e2af] border border-[#f9e2af]/30 hover:bg-[#f9e2af]/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          取消冲突权限
+        </button>
+        <button
+          onClick={() => handleResolve('disable-plugin')}
+          disabled={resolving}
+          className="flex-1 text-xs px-3 py-1.5 rounded-md bg-[#f38ba8]/10 text-[#f38ba8] border border-[#f38ba8]/30 hover:bg-[#f38ba8]/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          禁用插件
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/ui/PluginConfigForm.tsx

@@ -0,0 +1,192 @@
+// components/ui/PluginConfigForm.tsx - 插件配置表单组件
+'use client';
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { PluginConfigField } from '@/lib/plugin-types';
+import { usePluginContext } from '@/components/ui/PluginProvider';
+import { useToast } from '@/components/ui/ToastProvider';
+import { upsertPluginBinding } from '@/lib/storage';
+import { PluginBinding } from '@/lib/plugin-types';
+
+interface PluginConfigFormProps {
+  /** 插件 ID */
+  pluginId: string;
+  /** 配置 schema 定义 */
+  configSchema: PluginConfigField[];
+  /** 当前配置值（受控模式，由父组件管理） */
+  configValues: Record<string, unknown>;
+  /** 配置值变更回调 */
+  onConfigChange: (key: string, value: unknown) => void;
+  /** 当前插件的绑定信息（用于保存时获取 enabled 状态） */
+  binding?: PluginBinding;
+  /** 游戏世界 ID */
+  gameId: string;
+}
+
+/** 通用表单控件样式类名 */
+const INPUT_BASE = 'w-full px-2 py-1 text-xs rounded-md border outline-none transition-colors';
+const INPUT_STYLE = {
+  backgroundColor: 'var(--color-bg-primary)',
+  color: 'var(--color-text-primary)',
+  borderColor: 'var(--color-border)',
+} as const;
+
+export function PluginConfigForm({
+  pluginId,
+  configSchema,
+  configValues,
+  onConfigChange,
+  binding,
+  gameId,
+}: PluginConfigFormProps) {
+  const pluginCtx = usePluginContext();
+  const { toast } = useToast();
+  const configSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingConfigRef = useRef<Record<string, unknown>>({});
+  // 记录首次同步的配置快照，用于过滤"初始化赋值"误触保存
+  const initialConfigRef = useRef<Record<string, unknown> | null>(null);
+
+  // 防抖保存配置
+  const saveConfig = useCallback(async (config: Record<string, unknown>) => {
+    if (configSaveTimerRef.current) clearTimeout(configSaveTimerRef.current);
+    pendingConfigRef.current = config;
+
+    configSaveTimerRef.current = setTimeout(async () => {
+      try {
+        const enabled = binding?.enabled ?? true;
+        const ok = await upsertPluginBinding({
+          extensionId: pluginId,
+          scope: 'world',
+          worldId: gameId,
+          enabled,
+          config,
+        });
+        if (!ok) {
+          toast('保存配置失败', 'error');
+        }
+      } catch {
+        toast('保存配置失败', 'error');
+      }
+    }, 500);
+  }, [pluginId, gameId, binding?.enabled, toast]);
+
+  // 包装 onConfigChange，加入运行时更新和持久化
+  const handleConfigChange = useCallback((key: string, value: unknown) => {
+    onConfigChange(key, value);
+  }, [onConfigChange]);
+
+  // 监听 configValues 变化，触发运行时更新和持久化
+  // 使用 ref 跳过首次挂载（首次挂载时 configValues 由父组件初始化，无需保存）
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      // 首次挂载：仅同步运行时配置，不保存到 DB，不触发 hook
+      pluginCtx.updatePluginConfig(pluginId, configValues, { persist: false, broadcast: false, triggerHook: false });
+      // 记录快照，后续如果 configValues 变化到与此相同（父组件异步初始化），也跳过
+      initialConfigRef.current = configValues;
+      return;
+    }
+    // 父组件异步初始化 configValues 时会触发第二次执行，如果和快照相同则跳过
+    if (initialConfigRef.current && JSON.stringify(configValues) === JSON.stringify(initialConfigRef.current)) {
+      initialConfigRef.current = null; // 只跳过一次
+      return;
+    }
+    // 后续变更：保存到 DB + 更新运行时
+    saveConfig(configValues);
+    pluginCtx.updatePluginConfig(pluginId, configValues);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configValues]);
+
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (configSaveTimerRef.current) clearTimeout(configSaveTimerRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="space-y-2 pt-1">
+      {configSchema.map((field) => (
+        <div key={field.key}>
+          <div className="flex items-center justify-between mb-1">
+            <div>
+              <span
+                className="text-xs font-medium"
+                style={{ color: 'var(--color-text-secondary)' }}
+              >
+                {field.label}
+              </span>
+              {field.description && (
+                <p
+                  className="mt-0.5"
+                  style={{ color: 'var(--color-text-muted)', fontSize: '10px' }}
+                >
+                  {field.description}
+                </p>
+              )}
+            </div>
+            {field.type === 'boolean' && (
+              <button
+                type="button"
+                onClick={() => handleConfigChange(field.key, !configValues[field.key])}
+                className="relative w-9 h-5 rounded-full transition-colors shrink-0"
+                style={{
+                  backgroundColor: configValues[field.key]
+                    ? 'var(--color-accent)'
+                    : 'var(--color-bg-primary)',
+                  border: `1px solid ${configValues[field.key] ? 'var(--color-accent)' : 'var(--color-border)'}`,
+                }}
+              >
+                <div
+                  className="absolute top-0.5 w-3.5 h-3.5 rounded-full transition-all"
+                  style={{
+                    backgroundColor: configValues[field.key] ? '#fff' : 'var(--color-text-muted)',
+                    left: configValues[field.key] ? '18px' : '2px',
+                  }}
+                />
+              </button>
+            )}
+          </div>
+          {field.type !== 'boolean' && (
+            field.type === 'select' && field.options ? (
+              <select
+                value={String(configValues[field.key] ?? field.defaultValue)}
+                onChange={(e) => handleConfigChange(field.key, e.target.value)}
+                className={INPUT_BASE}
+                style={INPUT_STYLE}
+              >
+                {field.options.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            ) : field.type === 'textarea' ? (
+              <textarea
+                value={String(configValues[field.key] ?? field.defaultValue)}
+                onChange={(e) => handleConfigChange(field.key, e.target.value)}
+                placeholder={field.description}
+                rows={3}
+                className={`${INPUT_BASE} resize-vertical`}
+                style={INPUT_STYLE}
+              />
+            ) : (
+              <input
+                type={field.type === 'number' ? 'number' : 'text'}
+                value={String(configValues[field.key] ?? field.defaultValue)}
+                onChange={(e) => handleConfigChange(
+                  field.key,
+                  field.type === 'number' ? Number(e.target.value) : e.target.value,
+                )}
+                placeholder={field.description}
+                className={INPUT_BASE}
+                style={INPUT_STYLE}
+              />
+            )
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/ui/PluginFloatingLayer.tsx

@@ -0,0 +1,52 @@
+// components/ui/PluginFloatingLayer.tsx - 浮动层容器组件
+// 渲染插件在 floating 插槽中注册的所有内容
+'use client';
+
+import React, { useCallback } from 'react';
+import { SlotRegistration } from '@/lib/plugin-types';
+import { getPluginRuntime } from '@/lib/plugin-runtime';
+
+interface PluginFloatingLayerProps {
+  registrations: SlotRegistration[];
+}
+
+export function PluginFloatingLayer({ registrations }: PluginFloatingLayerProps) {
+  // 事件委托：处理 data-action 属性的点击事件
+  const handleClick = 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 pluginId = actionEl.closest<HTMLElement>('[data-plugin-id]')?.getAttribute('data-plugin-id');
+    const payload = actionEl.getAttribute('data-payload') || undefined;
+
+    if (actionName && pluginId) {
+      e.preventDefault();
+      e.stopPropagation();
+      const runtime = getPluginRuntime();
+      runtime.dispatchAction(pluginId, actionName, actionEl, payload);
+    }
+  }, []);
+
+  // 始终渲染容器（即使没有注册内容），确保 getContainerElement('floating') 能找到它
+  return (
+    <div
+      id="xinyu-floating"
+      data-plugin-slot="floating"
+      className="fixed inset-0 pointer-events-none z-50"
+      style={{ overflow: 'hidden' }}
+      onClick={handleClick}
+    >
+      {registrations.map((reg) => (
+        <div
+          key={reg.id}
+          data-plugin-registration-id={reg.id}
+          data-plugin-id={reg.pluginId}
+          className="pointer-events-auto"
+          dangerouslySetInnerHTML={{ __html: reg.content }}
+        />
+      ))}
+    </div>
+  );
+}

package/components/ui/PluginIcon.tsx

@@ -0,0 +1,53 @@
+// components/ui/PluginIcon.tsx - 插件图标组件（支持 emoji 和资源文件图片）
+
+'use client';
+
+import React, { useState } from 'react';
+
+/**
+ * 判断图标值是否为资源文件路径（非 emoji）
+ */
+function isResourcePath(icon: string): boolean {
+  if (!icon || icon.startsWith('http')) return false;
+  return /\.\w{2,5}$/.test(icon);
+}
+
+interface PluginIconProps {
+  /** 图标值：emoji 字符串或资源文件路径（如 icon.png） */
+  icon?: string;
+  /** 插件 ID，用于构建资源文件 URL */
+  pluginId?: string;
+  /** 默认图标（当 icon 为空时显示） */
+  fallback?: string;
+  /** CSS 类名 */
+  className?: string;
+  /** 内联样式 */
+  style?: React.CSSProperties;
+  /** 图片尺寸（px），默认 24 */
+  size?: number;
+}
+
+export function PluginIcon({ icon, pluginId, fallback = '🧩', className, style, size = 24 }: PluginIconProps) {
+  const [imgError, setImgError] = useState(false);
+  const displayIcon = icon || fallback;
+
+  if (isResourcePath(displayIcon) && pluginId && !imgError) {
+    return (
+      <img
+        src={`/api/plugins/resources?pluginId=${encodeURIComponent(pluginId)}&path=${encodeURIComponent(displayIcon)}`}
+        alt=""
+        width={size}
+        height={size}
+        className={className}
+        style={{ objectFit: 'contain', ...style }}
+        onError={() => setImgError(true)}
+      />
+    );
+  }
+
+  return (
+    <span className={className} style={style} role="img">
+      {imgError ? fallback : displayIcon}
+    </span>
+  );
+}