xinyu-pro 0.21.0

package/app/game/[id]/page.tsx

@@ -0,0 +1,996 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useParams } from 'next/navigation';
+import { useRouterHistory } from '@/lib/router-history';
+import { ChatMessage, WorldSetting } from '@/lib/types';
+import { ChatWindow } from '@/components/ChatWindow';
+import { ChatInput } from '@/components/ChatInput';
+import { ThemeSwitcher } from '@/components/ui/ThemeSwitcher';
+import { PluginProvider, usePluginContext } from '@/components/ui/PluginProvider';
+import { PluginSlotRenderer } from '@/components/ui/PluginSlotRenderer';
+import { PluginModalRenderer } from '@/components/ui/PluginModalRenderer';
+import { PermissionConflictDialog } from '@/components/ui/PermissionConflictDialog';
+import { PluginFloatingLayer } from '@/components/ui/PluginFloatingLayer';
+import { PluginConfigForm } from '@/components/ui/PluginConfigForm';
+import { PluginIcon } from '@/components/ui/PluginIcon';
+import { getGameSession, saveGameSession, getAppSettings, StoredSession } from '@/lib/storage';
+import { getPluginRuntime } from '@/lib/plugin-runtime';
+import { buildSystemPrompt } from '@/lib/prompt-builder';
+import { PluginManifest, PluginBinding, PLUGIN_TYPE_LABELS } from '@/lib/plugin-types';
+import { getPlugins, getPluginBindings, upsertPluginBinding } from '@/lib/storage';
+import { useToast } from '@/components/ui/ToastProvider';
+import { broadcastPluginBindingChange } from '@/lib/plugin-events';
+import FullPageLoader from '@/components/FullPageLoader';
+import MathCurveLoader from '@/components/MathCurveLoader';
+
+// ==================== 插件侧边栏面板 ====================
+
+function PluginDrawer({
+  open,
+  onClose,
+  gameId,
+}: {
+  open: boolean;
+  onClose: () => void;
+  gameId: string;
+}) {
+  const { navigate } = useRouterHistory();
+  const { toast } = useToast();
+  const pluginCtx = usePluginContext();
+  const [plugins, setPlugins] = useState<PluginManifest[]>([]);
+  const [bindings, setBindings] = useState<Map<string, PluginBinding>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [drawerWidth, setDrawerWidth] = useState(320);
+  const [configValues, setConfigValues] = useState<Record<string, unknown>>({});
+  const isDraggingRef = useRef(false);
+
+  const loadData = useCallback(async () => {
+    try {
+      const [pluginList, globalBindingList, worldBindingList] = await Promise.all([
+        getPlugins(),
+        getPluginBindings('global'),
+        getPluginBindings('world', gameId),
+      ]);
+      setPlugins(pluginList);
+
+      // 合并：全局禁用优先，全局启用不传播到运行中的游戏
+      const globalMap = new Map<string, PluginBinding>();
+      for (const b of globalBindingList) globalMap.set(b.extensionId, b);
+      const worldMap = new Map<string, PluginBinding>();
+      for (const b of worldBindingList) worldMap.set(b.extensionId, b);
+
+      const map = new Map<string, PluginBinding>();
+      for (const plugin of pluginList) {
+        const global = globalMap.get(plugin.id);
+        const world = worldMap.get(plugin.id);
+        if (global && !global.enabled) {
+          // 全局禁用 → 强制禁用
+          map.set(plugin.id, global);
+        } else if (world) {
+          // 有世界级绑定 → 以世界级为准
+          map.set(plugin.id, world);
+        }
+        // 无世界级绑定 → 不加载（全局启用不影响运行中游戏）
+      }
+      setBindings(map);
+    } catch {
+      toast('加载插件数据失败', 'error');
+    } finally {
+      setLoading(false);
+    }
+  }, [toast, gameId]);
+
+  useEffect(() => {
+    if (open) loadData();
+  }, [open, loadData]);
+
+  const handleToggle = async (pluginId: string) => {
+    const binding = bindings.get(pluginId);
+    const newEnabled = !binding?.enabled;
+    try {
+      // 局内切换：操作世界级绑定
+      const ok = await upsertPluginBinding({
+        extensionId: pluginId,
+        scope: 'world',
+        worldId: gameId,
+        enabled: newEnabled,
+        config: binding?.config || {},
+      });
+      if (ok) {
+        const plugin = plugins.find(p => p.id === pluginId);
+        toast(newEnabled ? `已启用「${plugin?.name || pluginId}」` : `已禁用「${plugin?.name || pluginId}」`, 'success');
+
+        // 局内启用时：同步写回全局默认值为启用（覆盖局外默认值）
+        if (newEnabled) {
+          await upsertPluginBinding({
+            extensionId: pluginId,
+            scope: 'global',
+            worldId: '',
+            enabled: true,
+            config: binding?.config || {},
+          });
+          broadcastPluginBindingChange({ pluginId, enabled: true, source: 'world', worldId: gameId });
+        }
+
+        // 更新本地状态
+        setBindings(prev => {
+          const next = new Map(prev);
+          next.set(pluginId, {
+            id: binding?.id || 0,
+            extensionId: pluginId,
+            scope: 'world',
+            worldId: gameId,
+            enabled: newEnabled,
+            config: binding?.config || {},
+            sortOrder: binding?.sortOrder || 0,
+          });
+          return next;
+        });
+        // 只重新加载被操作的插件，不影响其他插件
+        await pluginCtx.updateAndReload(pluginId, {
+          id: binding?.id || 0,
+          extensionId: pluginId,
+          scope: 'world',
+          worldId: gameId,
+          enabled: newEnabled,
+          config: binding?.config || {},
+          sortOrder: binding?.sortOrder || 0,
+        });
+      } else {
+        toast('操作失败', 'error');
+      }
+    } catch {
+      toast('操作失败', 'error');
+    }
+  };
+
+  const typeLabel = (type: string) => {
+    const info = PLUGIN_TYPE_LABELS[type as keyof typeof PLUGIN_TYPE_LABELS];
+    return info ? `${info.icon} ${info.label}` : type;
+  };
+
+  // 配置变更处理（仅更新本地 state，持久化和运行时更新由 PluginConfigForm 负责）
+  const handleConfigChange = useCallback((_pluginId: string, key: string, value: unknown) => {
+    setConfigValues(prev => ({ ...prev, [key]: value }));
+  }, []);
+
+  // 展开插件时初始化配置值
+  useEffect(() => {
+    if (expandedId) {
+      const binding = bindings.get(expandedId);
+      setConfigValues(binding?.config ? { ...binding.config } : {});
+    }
+  }, [expandedId, bindings]);
+
+  // 抽屉宽度拖拽
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDraggingRef.current) return;
+      const newWidth = window.innerWidth - e.clientX;
+      setDrawerWidth(Math.max(240, Math.min(600, newWidth)));
+    };
+    const handleMouseUp = () => {
+      if (isDraggingRef.current) {
+        isDraggingRef.current = false;
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+      }
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+
+  const handleResizeMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    isDraggingRef.current = true;
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'col-resize';
+  };
+
+  // 遮罩层 + 侧边栏
+  return (
+    <>
+      {/* 遮罩 */}
+      {open && (
+        <div
+          className="fixed inset-0 z-40 transition-opacity"
+          style={{ backgroundColor: 'rgba(0,0,0,0.4)' }}
+          onClick={onClose}
+        />
+      )}
+
+      {/* 侧边栏 */}
+      <div
+        className="fixed top-0 right-0 z-50 h-full flex flex-col transition-transform duration-200"
+        style={{
+          width: drawerWidth + 'px',
+          backgroundColor: 'var(--color-bg-secondary)',
+          borderLeft: '1px solid var(--color-border)',
+          transform: open ? 'translateX(0)' : 'translateX(100%)',
+        }}
+      >
+        {/* 拖拽调节宽度手柄 */}
+        <div
+          onMouseDown={handleResizeMouseDown}
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: '4px',
+            cursor: 'col-resize',
+            backgroundColor: 'transparent',
+            zIndex: 10,
+          }}
+          className="hover:bg-[var(--color-accent)] transition-colors"
+        />
+        {/* 头部 */}
+        <div
+          className="shrink-0 px-4 py-3 flex items-center justify-between"
+          style={{ borderBottom: '1px solid var(--color-border)' }}
+        >
+          <h2 className="text-sm font-bold" style={{ color: 'var(--color-text-primary)' }}>
+            🧩 插件管理
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1 rounded-lg transition-colors"
+            style={{ color: 'var(--color-text-muted)' }}
+          >
+            <svg width="18" height="18" 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="shrink-0 px-4 py-2 flex gap-2"
+          style={{ borderBottom: '1px solid var(--color-border)' }}
+        >
+          <button
+            onClick={() => { onClose(); navigate('/extensions'); }}
+            className="flex-1 px-3 py-1.5 rounded-lg text-xs border transition-colors flex items-center justify-center gap-1.5"
+            style={{
+              borderColor: 'var(--color-border)',
+              color: 'var(--color-text-secondary)',
+              backgroundColor: 'transparent',
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <rect x="3" y="3" width="7" height="7" />
+              <rect x="14" y="3" width="7" height="7" />
+              <rect x="14" y="14" width="7" height="7" />
+              <rect x="3" y="14" width="7" height="7" />
+            </svg>
+            管理插件
+          </button>
+          <button
+            onClick={() => { onClose(); navigate('/extensions/create'); }}
+            className="flex-1 px-3 py-1.5 rounded-lg text-xs border transition-colors flex items-center justify-center gap-1.5"
+            style={{
+              borderColor: 'var(--color-accent)',
+              color: 'var(--color-accent)',
+              backgroundColor: 'transparent',
+            }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="12" y1="5" x2="12" y2="19" />
+              <line x1="5" y1="12" x2="19" y2="12" />
+            </svg>
+            创建插件
+          </button>
+          <button
+            onClick={async () => {
+              await pluginCtx.reloadPlugins();
+              await loadData();
+              toast('插件刷新成功', 'success');
+            }}
+            className="px-3 py-1.5 rounded-lg text-xs border transition-colors flex items-center justify-center gap-1.5"
+            style={{
+              borderColor: 'var(--color-border)',
+              color: 'var(--color-text-secondary)',
+              backgroundColor: 'transparent',
+            }}
+            title="刷新插件"
+          >
+            <i className="fa-solid fa-arrows-rotate" style={{ fontSize: '11px' }} />
+          </button>
+        </div>
+
+        {/* 插件列表 */}
+        <div className="flex-1 overflow-y-auto">
+          {loading ? (
+            <div className="flex flex-col items-center justify-center py-10 gap-3">
+              <MathCurveLoader size={48} strokeWidthScale={0.7} />
+            </div>
+          ) : plugins.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-10 gap-2">
+              <span className="text-2xl opacity-40">🧩</span>
+              <span className="text-xs" style={{ color: 'var(--color-text-muted)' }}>暂无插件</span>
+            </div>
+          ) : (
+            <div className="p-3 space-y-2">
+              {plugins.map(plugin => {
+                const binding = bindings.get(plugin.id);
+                const enabled = binding?.enabled ?? false;
+                const expanded = expandedId === plugin.id;
+
+                return (
+                  <div
+                    key={plugin.id}
+                    className="rounded-lg border overflow-hidden"
+                    style={{
+                      backgroundColor: 'var(--color-bg-tertiary)',
+                      borderColor: 'var(--color-border)',
+                    }}
+                  >
+                    {/* 插件卡片头部 */}
+                    <div className="px-3 py-2.5 flex items-center justify-between">
+                      <div
+                        className="flex-1 min-w-0 cursor-pointer"
+                        onClick={() => setExpandedId(expanded ? null : plugin.id)}
+                      >
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm"><PluginIcon icon={plugin.icon} pluginId={plugin.id} fallback="🧩" size={16} /></span>
+                          <span
+                            className="text-xs font-bold truncate"
+                            style={{ color: 'var(--color-text-primary)' }}
+                          >
+                            {plugin.name}
+                          </span>
+                          <span
+                            className="text-xs px-1.5 py-0.5 rounded shrink-0"
+                            style={{
+                              backgroundColor: 'var(--color-bg-primary)',
+                              color: 'var(--color-text-muted)',
+                              fontSize: '10px',
+                            }}
+                          >
+                            {typeLabel(plugin.type)}
+                          </span>
+                        </div>
+                      </div>
+
+                      {/* 启用/禁用开关 */}
+                      <button
+                        onClick={(e) => { e.stopPropagation(); handleToggle(plugin.id); }}
+                        className="ml-2 shrink-0 relative w-9 h-5 rounded-full transition-colors"
+                        style={{
+                          backgroundColor: enabled ? 'var(--color-accent)' : 'var(--color-bg-primary)',
+                          border: `1px solid ${enabled ? 'var(--color-accent)' : 'var(--color-border)'}`,
+                        }}
+                        title={enabled ? '点击禁用' : '点击启用'}
+                      >
+                        <div
+                          className="absolute top-0.5 w-3.5 h-3.5 rounded-full transition-all"
+                          style={{
+                            backgroundColor: enabled ? '#fff' : 'var(--color-text-muted)',
+                            left: enabled ? '18px' : '2px',
+                          }}
+                        />
+                      </button>
+                    </div>
+
+                    {/* 展开详情 */}
+                    {expanded && (
+                      <div
+                        className="px-3 pb-2.5 space-y-2"
+                        style={{ borderTop: '1px solid var(--color-border)' }}
+                      >
+                        <p className="text-xs leading-relaxed pt-2" style={{ color: 'var(--color-text-secondary)' }}>
+                          {plugin.description || '暂无描述'}
+                        </p>
+                        <div className="flex items-center gap-3 text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                          <span>{plugin.id}</span>
+                          <span>·</span>
+                          <span>v{plugin.version}</span>
+                          <span>·</span>
+                          <span>{plugin.author || '未知'}</span>
+                        </div>
+                        {/* 配置项编辑 */}
+                        {plugin.configSchema && plugin.configSchema.length > 0 && (
+                          <PluginConfigForm
+                            pluginId={plugin.id}
+                            configSchema={plugin.configSchema}
+                            configValues={configValues}
+                            onConfigChange={(key, value) => handleConfigChange(plugin.id, key, value)}
+                            binding={binding}
+                            gameId={gameId}
+                          />
+                        )}
+                        <div className="flex gap-2 pt-1">
+                          <button
+                            onClick={() => { onClose(); navigate(`/extensions/edit/${plugin.id}`); }}
+                            className="px-3 py-1 rounded-md text-xs border transition-colors"
+                            style={{
+                              borderColor: 'var(--color-border)',
+                              color: 'var(--color-text-secondary)',
+                              backgroundColor: 'transparent',
+                            }}
+                          >
+                            编辑
+                          </button>
+                          <button
+                            onClick={() => { onClose(); navigate('/extensions'); }}
+                            className="px-3 py-1 rounded-md text-xs border transition-colors"
+                            style={{
+                              borderColor: 'var(--color-accent)',
+                              color: 'var(--color-accent)',
+                              backgroundColor: 'transparent',
+                            }}
+                          >
+                            更多
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ==================== 游戏页面内部组件 ====================
+
+function GamePageInner() {
+  const params = useParams();
+    const { navigate, back } = useRouterHistory();
+  const gameId = params.id as string;
+  const pluginCtx = usePluginContext();
+  const { toast } = useToast();
+  const [pluginDrawerOpen, setPluginDrawerOpen] = useState(false);
+  const [sidebarLeftWidth, setSidebarLeftWidth] = useState(240);
+  const chatInputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const [worldSetting, setWorldSetting] = useState<WorldSetting | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [sessionLoading, setSessionLoading] = useState(true);
+  const createdAtRef = useRef<string>(new Date().toISOString());
+
+  // 注册插件回调
+  useEffect(() => {
+    pluginCtx.setInsertSystemMessageCallback((content: string) => {
+      const sysMsg: ChatMessage = { role: 'system', content };
+      setMessages(prev => [...prev, sysMsg]);
+    });
+
+    pluginCtx.setInsertNoticeCallback((html: string) => {
+      const noticeMsg: ChatMessage = { role: 'notice', content: html };
+      setMessages(prev => [...prev, noticeMsg]);
+    });
+
+    pluginCtx.setSendMessageCallback(async (content: string) => {
+      await handleSend(content);
+    });
+
+    pluginCtx.setGetMessagesCallback(() => {
+      return messages.map(m => ({ role: m.role, content: m.content }));
+    });
+
+    pluginCtx.setGetWorldSettingCallback(() => {
+      return (worldSetting || {}) as Record<string, unknown>;
+    });
+
+    pluginCtx.setSetWorldSettingCallback(async (data: Record<string, unknown>) => {
+      setWorldSetting(data);
+      const session: StoredSession = {
+        id: gameId,
+        worldSetting: data,
+        messages: messages.filter(m => m.role !== 'notice'),
+        createdAt: createdAtRef.current,
+        updatedAt: new Date().toISOString(),
+      };
+      await saveGameSession(session);
+      toast('世界设定已更新', 'success');
+    });
+
+    pluginCtx.setGetSessionIdCallback(() => gameId);
+
+    pluginCtx.setToastCallback((message: string, type?: 'info' | 'success' | 'warning' | 'error') => {
+      toast(message, type);
+    });
+
+    pluginCtx.setInputElementCallback((el: HTMLTextAreaElement | null) => {
+      chatInputRef.current = el;
+    });
+  }, [pluginCtx, worldSetting, messages, gameId, toast]);
+
+  // 加载游戏会话
+  useEffect(() => {
+    const loadSession = async () => {
+      try {
+        const session = await getGameSession(gameId);
+        if (!session) {
+          setError('未找到该游戏会话，可能已被删除');
+          return;
+        }
+        setWorldSetting(session.worldSetting);
+        setMessages(session.messages as ChatMessage[]);
+        createdAtRef.current = session.createdAt || new Date().toISOString();
+      } catch {
+        setError('加载游戏会话失败');
+      } finally {
+        setSessionLoading(false);
+      }
+    };
+    loadSession();
+  }, [gameId]);
+
+  // 游戏初始化：自动启用世界卡片关联插件 + 触发 onGameInit（仅首次进入、无聊天记录时执行）
+  const gameInitDoneRef = useRef(false);
+
+  useEffect(() => {
+    if (sessionLoading || !pluginCtx.initialized || messages.length > 0 || !worldSetting || gameInitDoneRef.current) {
+      return;
+    }
+
+    const pluginIds = (worldSetting as unknown as Record<string, unknown>)._plugins as string[] | undefined;
+
+    if (!pluginIds || pluginIds.length === 0 || !gameId) {
+      gameInitDoneRef.current = true;
+      pluginCtx.triggerGameInit();
+      return;
+    }
+
+    gameInitDoneRef.current = true;
+
+    (async () => {
+      try {
+        // 获取所有已安装插件的 manifest
+        const allPlugins = await getPlugins();
+        const manifestMap = new Map(allPlugins.map(p => [p.id, p]));
+        const missingPlugins: string[] = [];
+
+        // 获取当前世界已有的绑定记录（保留已有配置，避免覆盖）
+        const existingBindings = await getPluginBindings('world', gameId);
+        const existingBindingMap = new Map<string, import('@/lib/plugin-types').PluginBinding>();
+        for (const b of existingBindings) {
+          existingBindingMap.set(b.extensionId, b);
+        }
+
+        // 获取全局绑定，作为新建世界绑定的配置默认值
+        const globalBindings = await getPluginBindings('global');
+        const globalBindingMap = new Map<string, import('@/lib/plugin-types').PluginBinding>();
+        for (const b of globalBindings) {
+          globalBindingMap.set(b.extensionId, b);
+        }
+
+        // 仅创建绑定记录，然后逐个加载新绑定的插件（不重新加载全部）
+        for (const pid of pluginIds) {
+          const manifest = manifestMap.get(pid);
+          if (!manifest) {
+            missingPlugins.push(pid);
+            continue;
+          }
+          // 保留已有绑定的配置；新建时使用全局绑定的配置作为默认值
+          const existing = existingBindingMap.get(pid);
+          const globalBinding = globalBindingMap.get(pid);
+          const bindingConfig = existing?.config || globalBinding?.config || {};
+          const binding: import('@/lib/plugin-types').PluginBinding = {
+            extensionId: pid, scope: 'world', worldId: gameId,
+            enabled: true, config: bindingConfig, sortOrder: 0,
+          };
+          await upsertPluginBinding(binding);
+          // 只加载之前未绑定的插件（已有绑定的在 loadPlugins 中已加载）
+          if (!existing) {
+            await pluginCtx.reloadSinglePlugin(pid, binding);
+          }
+        }
+
+        // 刷新 UI 状态
+        pluginCtx.refreshUI();
+
+        // 提示缺失插件
+        if (missingPlugins.length > 0) {
+          const sysMsg: ChatMessage = {
+            role: 'system',
+            content: `以下插件未安装，已跳过启用：${missingPlugins.join('、')}。请安装后重新开始游戏。`,
+          };
+          setMessages(prev => [...prev, sysMsg]);
+        }
+
+        // 触发 onGameInit
+        pluginCtx.triggerGameInit();
+      } catch {
+        pluginCtx.triggerGameInit();
+      }
+    })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionLoading, pluginCtx.initialized, messages.length, worldSetting, gameId]);
+
+  // 保存会话
+  const persistSession = useCallback(
+    async (msgs: ChatMessage[]) => {
+      if (!worldSetting) return;
+      const session: StoredSession = {
+        id: gameId,
+        worldSetting,
+        // 过滤掉 notice 通知（notice 由插件 onLoad 动态插入，不应持久化）
+        messages: msgs.filter(m => m.role !== 'notice'),
+        createdAt: createdAtRef.current,
+        updatedAt: new Date().toISOString(),
+      };
+      await saveGameSession(session);
+    },
+    [gameId, worldSetting]
+  );
+
+  // 发送消息
+  const handleSend = async (content: string) => {
+    if (!worldSetting || isLoading) return;
+
+    // 检查是否为快捷指令（支持 /command、pluginId/command 格式）
+    if (content.startsWith('/')) {
+      const cmdResult = await pluginCtx.executeCommand(content);
+      if (cmdResult !== undefined) {
+        if (typeof cmdResult === 'string' && cmdResult !== 'handled') {
+          const userMessage: ChatMessage = { role: 'user', content: cmdResult };
+          const newMessages = [...messages, userMessage];
+          setMessages(newMessages);
+          return;
+        }
+        return; // 命令已处理（静默或指定插件未找到）
+      }
+      // cmdResult === undefined → 未匹配到命令，继续作为普通消息发送
+    }
+
+    const userMessage: ChatMessage = { role: 'user', content };
+    const newMessages = [...messages, userMessage];
+    setMessages(newMessages);
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      const appSettings = await getAppSettings();
+      const runtime = getPluginRuntime();
+
+      // Hook: 应用消息预处理（支持 async handler）
+      const processedMessages = await runtime.applyBeforeSendHandlers(
+        newMessages.map(m => ({ role: m.role, content: m.content }))
+      );
+
+      // Hook: 应用 prompt 修改器（支持 async handler）
+      const worldSettingRecord = (worldSetting || {}) as unknown as Record<string, unknown>;
+      const modifiedPromptExtra = await runtime.applyPromptModifiers(
+        appSettings.systemPromptExtra || '',
+        worldSettingRecord
+      );
+
+      // Hook: 应用请求配置修改器（支持 async handler）
+      const modifiedConfig = await runtime.applyRequestConfigModifiers({
+        temperature: appSettings.aiTemperature,
+        maxTokens: appSettings.aiMaxTokens,
+        model: appSettings.aiModel,
+      });
+
+      // 构建完整消息数组（system prompt + 用户/助手消息，过滤掉 notice 通知）
+      const systemPrompt = buildSystemPrompt(worldSettingRecord, modifiedPromptExtra);
+      const completeMessages = [
+        { role: 'system', content: systemPrompt },
+        ...processedMessages.filter(m => m.role !== 'notice'),
+      ];
+
+      // Hook: 应用完整消息数组预处理（角色合并、重排等，支持 async handler）
+      const finalMessages = await runtime.applyBeforeCompleteHandlers(completeMessages);
+
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          worldSetting,
+          messages: processedMessages,
+          prebuiltMessages: finalMessages,
+          apiConfig: {
+            apiKey: appSettings.aiApiKey,
+            apiBase: appSettings.aiApiBase,
+            model: modifiedConfig.model,
+            temperature: modifiedConfig.temperature,
+            maxTokens: modifiedConfig.maxTokens,
+          },
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'AI 回复失败');
+      }
+
+      // Hook: 应用响应后处理（支持 async）
+      const processedContent = await runtime.applyAfterReceiveHandlers(data.content);
+
+      const assistantMessage: ChatMessage = {
+        role: 'assistant',
+        content: processedContent,
+      };
+      const allMessages = [...newMessages, assistantMessage];
+      setMessages(allMessages);
+      persistSession(allMessages);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '发送消息失败');
+      setMessages(messages);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleBack = () => {
+    back();
+  };
+
+  if (sessionLoading || !pluginCtx.initialized) {
+    return <FullPageLoader />;
+  }
+
+  if (error && !worldSetting) {
+    return (
+      <div
+        className="min-h-screen flex flex-col items-center justify-center gap-4 px-4"
+        style={{ backgroundColor: 'var(--color-bg-primary)' }}
+      >
+        <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
+          {error}
+        </p>
+        <button
+          onClick={handleBack}
+          className="px-4 py-2 rounded-lg text-sm border"
+          style={{
+            borderColor: 'var(--color-border)',
+            color: 'var(--color-text-secondary)',
+          }}
+        >
+          返回首页
+        </button>
+      </div>
+    );
+  }
+
+  const sidebarLeftRegistrations = pluginCtx.getSlotRegistrations('sidebar-left');
+  const sidebarRightRegistrations = pluginCtx.getSlotRegistrations('sidebar-right');
+  const hasSidebar = sidebarLeftRegistrations.length > 0 || sidebarRightRegistrations.length > 0;
+
+  return (
+    <div
+      className="h-screen flex flex-col"
+      style={{ backgroundColor: 'var(--color-bg-primary)' }}
+    >
+      {/* 顶部栏 */}
+      <header
+        className="flex items-center justify-between px-4 py-2.5 border-b shrink-0"
+        style={{
+          borderColor: 'var(--color-border)',
+          backgroundColor: 'var(--color-bg-secondary)',
+        }}
+      >
+        <div className="flex items-center gap-3">
+          <button
+            onClick={handleBack}
+            className="p-1.5 rounded-lg transition-colors"
+            style={{ color: 'var(--color-text-secondary)' }}
+            title="返回首页"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M19 12H5M12 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <PluginSlotRenderer key={`header-left-${pluginCtx.slotVersion}`} slotId="header-left" direction="horizontal" registrations={pluginCtx.getSlotRegistrations('header-left')} />
+          <div>
+            <h1
+              className="text-sm font-bold"
+              style={{ color: 'var(--color-accent)' }}
+            >
+              {typeof worldSetting?.title === 'string'
+                    ? worldSetting.title
+                    : '加载中...'}
+            </h1>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <PluginSlotRenderer key={`header-right-${pluginCtx.slotVersion}`} slotId="header-right" direction="horizontal" registrations={pluginCtx.getSlotRegistrations('header-right')} />
+          {/* 插件管理按钮 */}
+          <button
+            onClick={() => setPluginDrawerOpen(true)}
+            className="p-1.5 rounded-lg transition-colors relative"
+            style={{ color: 'var(--color-text-secondary)' }}
+            title="插件管理"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+            </svg>
+            {/* 已启用插件数量角标 */}
+            {pluginCtx.enabledPlugins.length > 0 && (
+              <span
+                className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 flex items-center justify-center rounded-full text-xs font-bold"
+                style={{
+                  backgroundColor: 'var(--color-accent)',
+                  color: 'var(--color-bg-primary)',
+                  fontSize: '10px',
+                  padding: '0 4px',
+                }}
+              >
+                {pluginCtx.enabledPlugins.length}
+              </span>
+            )}
+          </button>
+          <button
+            onClick={() => navigate('/settings')}
+            className="p-1.5 rounded-lg transition-colors"
+            style={{ color: 'var(--color-text-secondary)' }}
+            title="设置"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="12" cy="12" r="3" />
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+            </svg>
+          </button>
+          <ThemeSwitcher />
+        </div>
+      </header>
+
+      {/* 主体区域：三栏布局（左 sidebar + 中间内容 + 右 sidebar） */}
+      <div className={`flex-1 flex flex-row overflow-hidden ${hasSidebar ? '' : ''}`}>
+        {/* 左侧边栏 */}
+        {sidebarLeftRegistrations.length > 0 && (
+          <aside
+            className="shrink-0 overflow-y-auto border-r relative"
+            style={{
+              width: sidebarLeftWidth + 'px',
+              minWidth: '180px',
+              maxWidth: '480px',
+              borderColor: 'var(--color-border)',
+              backgroundColor: 'var(--color-bg-secondary)',
+            }}
+          >
+            <PluginSlotRenderer key={`sidebar-left-${pluginCtx.slotVersion}`} slotId="sidebar-left" direction="vertical" gap="0px" registrations={sidebarLeftRegistrations} />
+            {/* 拖拽调整宽度手柄 */}
+            <div
+              className="absolute top-0 right-0 h-full cursor-col-resize hover:bg-[var(--color-accent)] active:bg-[var(--color-accent)] transition-colors"
+              style={{ width: '4px', zIndex: 10 }}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                const startX = e.clientX;
+                const startWidth = sidebarLeftWidth;
+                const onMove = (ev: MouseEvent) => {
+                  const delta = ev.clientX - startX;
+                  const newWidth = Math.max(180, Math.min(480, startWidth + delta));
+                  setSidebarLeftWidth(newWidth);
+                };
+                const onUp = () => {
+                  document.removeEventListener('mousemove', onMove);
+                  document.removeEventListener('mouseup', onUp);
+                  document.body.style.cursor = '';
+                  document.body.style.userSelect = '';
+                };
+                document.body.style.cursor = 'col-resize';
+                document.body.style.userSelect = 'none';
+                document.addEventListener('mousemove', onMove);
+                document.addEventListener('mouseup', onUp);
+              }}
+            />
+          </aside>
+        )}
+
+        {/* 中间主内容区 */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+
+      {/* 错误提示 */}
+      {error && (
+        <div
+          className="px-4 py-2 text-sm text-center shrink-0"
+          style={{
+            backgroundColor: 'rgba(220, 38, 38, 0.1)',
+            color: '#ef4444',
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* 游戏属性面板（插件注册的属性） */}
+      {pluginCtx.attributes.length > 0 && (
+        <div
+          className="px-4 py-2 border-b shrink-0 flex flex-wrap gap-3"
+          style={{
+            borderColor: 'var(--color-border)',
+            backgroundColor: 'var(--color-bg-secondary)',
+          }}
+        >
+          {pluginCtx.attributes.map(attr => (
+            <div
+              key={attr.key}
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs"
+              style={{
+                backgroundColor: 'var(--color-bg-tertiary)',
+                color: 'var(--color-text-primary)',
+              }}
+            >
+              <span>{attr.icon || '📊'}</span>
+              <span style={{ color: 'var(--color-text-secondary)' }}>{attr.label}:</span>
+              <span className="font-medium">{String(attr.value)}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 插件插槽：消息区域上方 */}
+      <PluginSlotRenderer key={`message-top-${pluginCtx.slotVersion}`} slotId="message-top" direction="vertical" registrations={pluginCtx.getSlotRegistrations('message-top')} />
+
+      {/* 对话区域 */}
+      <ChatWindow messages={messages} isLoading={isLoading} />
+
+      {/* 插件插槽：消息区域下方 */}
+      <PluginSlotRenderer key={`message-bottom-${pluginCtx.slotVersion}`} slotId="message-bottom" direction="vertical" registrations={pluginCtx.getSlotRegistrations('message-bottom')} />
+
+      {/* 插件插槽：输入框正上方 */}
+      <PluginSlotRenderer key={`input-above-${pluginCtx.slotVersion}`} slotId="input-above" direction="horizontal" registrations={pluginCtx.getSlotRegistrations('input-above')} />
+
+      {/* 插件插槽：输入工具栏（包含 registerInputToolbarButton 注册的按钮） */}
+      <PluginSlotRenderer key={`input-toolbar-${pluginCtx.slotVersion}`} slotId="input-toolbar" direction="horizontal" registrations={pluginCtx.getSlotRegistrations('input-toolbar')} />
+
+      {/* 输入区域 */}
+      <ChatInput onSend={handleSend} disabled={isLoading} inputRef={chatInputRef} />
+
+      {/* 插件插槽：底部状态栏 */}
+      <PluginSlotRenderer key={`status-bar-${pluginCtx.slotVersion}`} slotId="status-bar" direction="horizontal" registrations={pluginCtx.getSlotRegistrations('status-bar')} />
+
+      {/* 插件浮动层 */}
+      <PluginFloatingLayer key={`floating-${pluginCtx.slotVersion}`} registrations={pluginCtx.getSlotRegistrations('floating')} />
+
+      {/* 插件模态框渲染器 */}
+      <PluginModalRenderer modals={pluginCtx.modals} onClose={pluginCtx.closeModal} />
+      <PermissionConflictDialog />
+
+        </div>{/* 结束中间主内容区 */}
+
+        {/* 右侧边栏 */}
+        {sidebarRightRegistrations.length > 0 && (
+          <aside
+            className="shrink-0 overflow-y-auto border-l"
+            style={{
+              width: '240px',
+              borderColor: 'var(--color-border)',
+              backgroundColor: 'var(--color-bg-secondary)',
+            }}
+          >
+            <PluginSlotRenderer key={`sidebar-right-${pluginCtx.slotVersion}`} slotId="sidebar-right" direction="vertical" gap="0px" registrations={sidebarRightRegistrations} />
+          </aside>
+        )}
+      </div>{/* 结束三栏布局 */}
+
+      {/* 插件侧边栏抽屉 */}
+      <PluginDrawer
+        open={pluginDrawerOpen}
+        onClose={() => setPluginDrawerOpen(false)}
+        gameId={gameId}
+      />
+    </div>
+  );
+}
+
+/** 游戏页面（包裹 PluginProvider） */
+export default function GamePage() {
+  const params = useParams();
+  const gameId = params.id as string;
+
+  return (
+    <PluginProvider worldId={gameId}>
+      <GamePageInner />
+    </PluginProvider>
+  );
+}