xinyu-pro 0.21.0

package/app/extensions/tutorial/page.tsx

@@ -0,0 +1,4258 @@
+// app/extensions/tutorial/page.tsx - 插件开发教程页面
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import PageHeader from '@/components/ui/PageHeader';
+import { useRouterHistory } from '@/lib/router-history';
+import { ThemeSwitcher } from '@/components/ui/ThemeSwitcher';
+import { presetThemes } from '@/lib/themes';
+
+const s = {
+  bgPrimary: 'var(--color-bg-primary)',
+  bgSecondary: 'var(--color-bg-secondary)',
+  bgTertiary: 'var(--color-bg-tertiary)',
+  textPrimary: 'var(--color-text-primary)',
+  textSecondary: 'var(--color-text-secondary)',
+  textMuted: 'var(--color-text-muted)',
+  accent: 'var(--color-accent)',
+  accentHover: 'var(--color-accent-hover)',
+  border: 'var(--color-border)',
+  shadow: 'var(--color-shadow)',
+};
+
+// ==================== 代码块常量 ====================
+
+const CODE_OVERVIEW_MINIMAL = [
+  'function setup(xinyu) {',
+  "  // 插件加载时执行",
+  "  xinyu.ui.toast('插件已启用！', 'success');",
+  '}',
+].join('\n');
+
+const CODE_ARCHITECTURE_EXEC = [
+  '// 运行时内部执行方式（简化）',
+  'const wrappedCode = `',
+  "  'use strict';",
+  '  ${pluginCode};',
+  "  if (typeof setup === 'function') {",
+  '    return { setup };',
+  '  }',
+  '  return {};',
+  '`;',
+  "const factory = new Function('xinyu', wrappedCode);",
+  'const exports = factory(xinyuBridge);',
+  'exports.setup(xinyuBridge);  // 调用插件入口',
+].join('\n');
+
+const CODE_LIFECYCLE_EXAMPLE = [
+  'function setup(xinyu) {',
+  "  xinyu.plugin.on('onLoad', function() {",
+  "    xinyu.ui.toast('插件已加载', 'success');",
+  '  });',
+  '',
+  "  xinyu.plugin.on('onGameInit', function() {",
+  '    xinyu.game.registerAttribute({',
+  "      key: 'hp', label: '生命值', type: 'number',",
+  "      value: 100, icon: '❤️'",
+  '    });',
+  '  });',
+  '',
+  "  xinyu.plugin.on('onUnload', function() {",
+  '    // 资源会自动清理，通常不需要手动处理',
+  '  });',
+  '}',
+].join('\n');
+
+const CODE_UI_SLOT = [
+  '// 在状态栏显示自定义信息',
+  "xinyu.ui.registerSlot('status-bar',",
+  '  \'<div style="font-size:11px;color:var(--color-text-muted)">自定义状态</div>\',',
+  '  { priority: 1 }',
+  ');',
+  '',
+  '// 在顶部导航栏右侧注入元素',
+  "xinyu.ui.registerSlot('header-right',",
+  '  \'<span style="font-size:12px">🔔 3</span>\',',
+  '  { priority: 10 }',
+  ');',
+  '',
+  '// 移除注册的内容',
+  'xinyu.ui.unregisterSlot(registrationId);',
+].join('\n');
+
+const CODE_UI_MODAL = [
+  '// 确认对话框（返回 Promise<boolean>）',
+  'var ok = await xinyu.ui.confirm(',
+  "  '确认操作',",
+  "  '确定要重置属性吗？',",
+  "  { confirmText: '重置', cancelText: '取消', danger: true }",
+  ');',
+  '',
+  '// 自定义模态框',
+  'var modalId = xinyu.ui.showModal({',
+  "  title: '角色属性编辑',",
+  "  content: '<div style=\"padding:12px\">自定义内容</div>',",
+  "  width: '400px',",
+  '  closable: true,',
+  '  backdrop: true,',
+  "  style: 'border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);',  // 自定义模态框容器样式",
+  '  actions: [',
+  "    { text: '保存', primary: true, onClick: function(ctx) { /* 保存逻辑 */ ctx.close(); } },",
+  "    { text: '取消', onClick: function(ctx) { ctx.close(); } }",
+  '  ],',
+  '  onClose: function() { /* 关闭回调 */ }',
+  '});',
+  '',
+  '// 更新模态框（无需关闭重开，可动态修改 title、content、width、style）',
+  'xinyu.ui.updateModal(modalId, {',
+  "  title: '角色属性编辑（已修改）',",
+  "  content: '<div style=\"padding:12px\">更新后的内容</div>',",
+  "  width: '500px',",
+  "  style: 'border-radius: 16px; background: #1a1a2e;'",
+  '});',
+  '',
+  '// 关闭模态框',
+  'xinyu.ui.closeModal(modalId);',
+].join('\n');
+
+const CODE_UI_STYLE = [
+  '// 注入自定义 CSS（使用 CSS 变量保持主题一致）',
+  'var styleId = xinyu.ui.injectStyle(`',
+  '  .my-plugin-panel {',
+  '    background: var(--color-bg-tertiary);',
+  '    border: 1px solid var(--color-border);',
+  '    border-radius: 8px;',
+  '    padding: 12px;',
+  '  }',
+  '  .my-plugin-highlight {',
+  '    color: var(--color-accent);',
+  '    font-weight: bold;',
+  '  }',
+  '`);',
+  '',
+  '// 需要时移除',
+  'xinyu.ui.removeStyle(styleId);',
+].join('\n');
+
+const CODE_UI_HOST_EVENT = [
+  '// 监听消息接收事件',
+  "xinyu.ui.onHostEvent('message:received', function(data) {",
+  "  console.log('新消息:', data.message);",
+  '});',
+  '',
+  '// 监听游戏状态变更',
+  "xinyu.ui.onHostEvent('game:stateChange', function(data) {",
+  "  console.log('变更的键:', data.changedKeys);",
+  '});',
+  '',
+  '// 可用事件：',
+  '// message:received / message:sent / game:stateChange',
+  '// sidebar:open / sidebar:close / input:focus / input:blur',
+  '// theme:change / plugin:enabled / plugin:disabled',
+].join('\n');
+
+const CODE_DOM_API = [
+  '// 创建元素',
+  "var el = xinyu.ui.dom.create('div', {",
+  "  className: 'my-panel',",
+  "  style: 'position:absolute;top:10px;right:10px;'",
+  "}, 'Hello World');",
+  '',
+  '// 追加到容器（支持插槽 ID）',
+  "xinyu.ui.dom.append('floating', el);",
+  '',
+  '// 也可以直接追加 HTML 字符串',
+  "xinyu.ui.dom.append('floating', '<div class=\"my-panel\">Hello</div>');",
+  '',
+  '// 更新元素',
+  'xinyu.ui.dom.update(el.id, {',
+  "  style: 'position:absolute;top:20px;',",
+  "  textContent: 'Updated!'",
+  '});',
+  '',
+  '// 查询元素（仅限插件自己的元素）',
+  "var results = xinyu.ui.dom.query('floating', '.my-panel');",
+  '',
+  '// 绑定事件',
+  "xinyu.ui.dom.on(el.id, 'click', function() {",
+  "  xinyu.ui.toast('被点击了！', 'info');",
+  '});',
+  '',
+  '// 移除元素',
+  'xinyu.ui.dom.remove(el.id);',
+].join('\n');
+
+const CODE_PERMS_DEFAULT = "['slot:input-toolbar', 'style:inject', 'modal:confirm']";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const CODE_PERMS_MANIFEST = [
+  '// 在插件代码中查看自身权限',
+  'var manifest = xinyu.plugin.getManifest();',
+  'console.log(manifest.commonPermissions);',
+  'console.log(manifest.exclusivePermissions);',
+  'console.log(manifest.requiredPermissions);',
+].join('\n');
+
+const CODE_SLOTS_DIAGRAM = [
+  '┌──────────────────────────────────────────────────┐',
+  '│  [header-left]  [header-center]  [header-right]  │  ← 顶部导航栏(header)',
+  '├──────────────┬───────────────────┬───────────────┤',
+  '│              │   [message-top]   │               │  ← 消息上方(message-top)',
+  '│              │                   │               │',
+  '│              │ Message List Area │               │',
+  '│[sidebar-left]│                   │[sidebar-right]│',
+  '│              │  [message-bottom] │               │  ← 消息下方(message-bottom)',
+  '│  Left Side   │   [input-above]   │  Right Side   │  ← 输入框正上方(input-above)',
+  '│   Bar Area   │  [input-toolbar]  │   Bar  Area   │  ← 工具栏(input-toolbar)',
+  '│              ├───────────────────┤               │',
+  '│              │     Input Area    │               │',
+  '│              ├───────────────────┤               │',
+  '│              │    [status-bar]   │               │  ← 底部状态栏(status-bar)',
+  '└──────────────┴───────────────────┴───────────────┘',
+  '[model]     ← 模态框（由平台系统控制）',
+  '[floating]  ← 浮动层（fixed 定位，自由放置）',
+  '[overlay]   ← 全屏遮罩层（最高 z-index）',
+].join('\n');
+
+const CODE_SLOTS_PRIORITY = [
+  "xinyu.ui.registerSlot('status-bar', '插件A', { priority: 1 });  // 最前",
+  "xinyu.ui.registerSlot('status-bar', '插件B', { priority: 10 }); // 中间",
+  "xinyu.ui.registerSlot('status-bar', '插件C');                  // 最后（默认100）",
+].join('\n');
+
+const CODE_EXAMPLE_1 = [
+  'function setup(xinyu) {',
+  '  // 在状态栏显示游戏时间',
+  '  var startTime = Date.now();',
+  '',
+  "  xinyu.ui.registerSlot('status-bar',",
+  '    \'<div id="game-timer" style="font-size:11px;color:var(--color-text-muted)">\' +',
+  "    '⏱️ 游戏时间: 0分0秒</div>',",
+  '    { priority: 1 }',
+  '  );',
+  '',
+  '  // 每秒更新',
+  '  setInterval(function() {',
+  '    var elapsed = Math.floor((Date.now() - startTime) / 1000);',
+  '    var min = Math.floor(elapsed / 60);',
+  '    var sec = elapsed % 60;',
+  "    var el = document.querySelector('#game-timer');",
+  "    if (el) el.textContent = '⏱️ 游戏时间: ' + min + '分' + sec + '秒';",
+  '  }, 1000);',
+  '}',
+].join('\n');
+
+const CODE_EXAMPLE_2 = [
+  'function setup(xinyu) {',
+  '  var msgCount = 0;',
+  '',
+  "  xinyu.ui.onHostEvent('message:received', function() {",
+  '    msgCount++;',
+  '    // 更新状态栏',
+  "    xinyu.ui.registerSlot('status-bar',",
+  '      \'<div style="font-size:11px;color:var(--color-text-muted)">\' +',
+  "      '💬 已收到 ' + msgCount + ' 条消息</div>',",
+  '      { priority: 2 }',
+  '    );',
+  '  });',
+  '',
+  '  // 注册一个查看统计的按钮',
+  '  xinyu.ui.registerInputToolbarButton({',
+  "    id: 'msg-stats',",
+  "    label: '统计',",
+  "    icon: '📊',",
+  '    order: 20,',
+  '    onClick: function() {',
+  '      xinyu.ui.showModal({',
+  "        title: '📊 消息统计',",
+  '        content: \'<div style="padding:16px;text-align:center">\' +',
+  '          \'<div style="font-size:32px;font-weight:bold;color:var(--color-accent)">\' + msgCount + \'</div>\' +',
+  "          '<div style=\"color:var(--color-text-muted);margin-top:4px\">已接收消息总数</div></div>',",
+  "        width: '300px'",
+  '      });',
+  '    }',
+  '  });',
+  '}',
+].join('\n');
+
+const CODE_EXAMPLE_3 = [
+  'function setup(xinyu) {',
+  '  // 注入样式',
+  '  xinyu.ui.injectStyle(`',
+  '    .quick-menu {',
+  '      position: fixed; bottom: 80px; right: 20px;',
+  '      display: flex; flex-direction: column; gap: 8px;',
+  '      z-index: 50;',
+  '    }',
+  '    .quick-menu-btn {',
+  '      width: 44px; height: 44px; border-radius: 50%;',
+  '      background: var(--color-bg-secondary);',
+  '      border: 1px solid var(--color-border);',
+  '      color: var(--color-text-secondary);',
+  '      font-size: 18px; cursor: pointer;',
+  '      display: flex; align-items: center; justify-content: center;',
+  '      transition: all 0.2s;',
+  '    }',
+  '    .quick-menu-btn:hover {',
+  '      background: var(--color-accent); color: #fff;',
+  '      transform: scale(1.1);',
+  '    }',
+  '  `);',
+  '',
+  '  // 在浮动层注入按钮',
+  "  xinyu.ui.registerSlot('floating',",
+  "    '<div class=\"quick-menu\">' +",
+  "    '<button class=\"quick-menu-btn\" onclick=\"document.dispatchEvent(new CustomEvent(\\'plugin-action\\', {detail:\\'look\\'}))\">👁️</button>' +",
+  "    '<button class=\"quick-menu-btn\" onclick=\"document.dispatchEvent(new CustomEvent(\\'plugin-action\\', {detail:\\'talk\\'}))\">💬</button>' +",
+  "    '<button class=\"quick-menu-btn\" onclick=\"document.dispatchEvent(new CustomEvent(\\'plugin-action\\', {detail:\\'rest\\'}))\">🏕️</button>' +",
+  "    '</div>',",
+  '    { priority: 1 }',
+  '  );',
+  '}',
+].join('\n');
+
+const CODE_DEBUG_EXAMPLE = [
+  'function setup(xinyu) {',
+  "  console.log('插件 manifest:', xinyu.plugin.getManifest());",
+  "  console.log('插件配置:', xinyu.plugin.config.get());",
+  '',
+  '  // 查看游戏状态',
+  "  console.log('游戏状态:', xinyu.game.getState());",
+  "  console.log('游戏属性:', xinyu.game.getAttributes());",
+  '}',
+].join('\n');
+
+// ==================== 新增代码块常量 ====================
+
+// --- CSS 变量章节 ---
+const CODE_CSS_VAR_INLINE = [
+  '// 在内联 style 中使用 CSS 变量',
+  "xinyu.ui.registerSlot('status-bar',",
+  "  '<div style=\"color:var(--color-text-primary);background:var(--color-bg-secondary);",
+  "    padding:4px 8px;border-radius:var(--border-radius);",
+  "    border:1px solid var(--color-border)\">自定义状态栏</div>',",
+  '  { priority: 1 }',
+  ');',
+  '',
+  '// DOM 沙箱创建元素时使用',
+  "var el = xinyu.ui.dom.create('div', {",
+  "  style: 'background:var(--color-bg-tertiary);color:var(--color-accent);",
+  "    padding:8px;border-radius:var(--border-radius)'",
+  "}, '使用 CSS 变量的元素');",
+].join('\n');
+
+const CODE_CSS_VAR_INJECT = [
+  '// 在 injectStyle 注入的 CSS 中使用 CSS 变量',
+  'xinyu.ui.injectStyle(`',
+  '  .my-plugin-card {',
+  '    background: var(--color-bg-secondary);',
+  '    border: 1px solid var(--color-border);',
+  '    border-radius: var(--border-radius);',
+  '    padding: 16px;',
+  '    box-shadow: 0 2px 8px var(--color-shadow);',
+  '  }',
+  '  .my-plugin-title {',
+  '    color: var(--color-text-primary);',
+  '    font-family: var(--font-heading);',
+  '    font-size: 16px;',
+  '    margin-bottom: 8px;',
+  '  }',
+  '  .my-plugin-desc {',
+  '    color: var(--color-text-secondary);',
+  '    font-family: var(--font-body);',
+  '    font-size: 13px;',
+  '    line-height: 1.6;',
+  '  }',
+  '  .my-plugin-btn {',
+  '    background: var(--color-accent);',
+  '    color: var(--color-text-primary);',
+  '    border: none;',
+  '    border-radius: var(--border-radius);',
+  '    padding: 8px 16px;',
+  '    cursor: pointer;',
+  '    transition: background 0.2s;',
+  '  }',
+  '  .my-plugin-btn:hover {',
+  '    background: var(--color-accent-hover);',
+  '  }',
+  '`);',
+].join('\n');
+
+const CODE_CSS_VAR_CUSTOM = [
+  '// 创建自定义 CSS 变量（建议使用插件前缀避免冲突）',
+  'xinyu.ui.injectStyle(`',
+  '  :root {',
+  '    --my-dice-primary: #e74c3c;',
+  '    --my-dice-secondary: #c0392b;',
+  '    --my-dice-bg: rgba(231, 76, 60, 0.1);',
+  '    --my-dice-radius: 8px;',
+  '  }',
+  '  .dice-result {',
+  '    background: var(--my-dice-bg);',
+  '    color: var(--my-dice-primary);',
+  '    border: 2px solid var(--my-dice-secondary);',
+  '    border-radius: var(--my-dice-radius);',
+  '    padding: 12px;',
+  '    font-size: 24px;',
+  '    font-weight: bold;',
+  '    text-align: center;',
+  '  }',
+  '`);',
+  '',
+  '// 使用自定义变量',
+  "xinyu.ui.registerSlot('status-bar',",
+  "  '<div class=\"dice-result\">🎲 6</div>',",
+  '  { priority: 5 }',
+  ');',
+].join('\n');
+
+// --- 插件存储章节 ---
+const CODE_STORAGE_PLUGIN = [
+  '// 使用 xinyu.plugin.storage（推荐方式）',
+  'function setup(xinyu) {',
+  "  // 读取用户偏好",
+  '  var theme = xinyu.plugin.storage.get("theme") || "auto";',
+  '  var fontSize = xinyu.plugin.storage.get("fontSize") || 14;',
+  '',
+  '  // 保存用户偏好',
+  '  xinyu.plugin.storage.set("theme", "dark");',
+  '  xinyu.plugin.storage.set("fontSize", 16);',
+  '',
+  '  // 也可以存储 JSON 对象（自动序列化）',
+  '  xinyu.plugin.storage.set("userSettings", {',
+  '    theme: "dark",',
+  '    fontSize: 16,',
+  '    language: "zh-CN",',
+  '    notifications: true',
+  '  });',
+  '',
+  '  // 读取 JSON 对象',
+  '  var settings = xinyu.plugin.storage.get("userSettings");',
+  '  console.log(settings.theme);  // "dark"',
+  '',
+  '  // 删除某个键',
+  '  xinyu.plugin.storage.remove("theme");',
+  '',
+  '  // 获取所有键名',
+  '  var allKeys = xinyu.plugin.storage.keys();',
+  "  console.log('存储的键:', allKeys);",
+  '}',
+].join('\n');
+
+const CODE_STORAGE_GAME = [
+  '// 使用 xinyu.game.setState / getState 管理游戏状态',
+  'function setup(xinyu) {',
+  "  xinyu.plugin.on('onGameInit', function() {",
+  '    // 初始化游戏状态',
+  '    xinyu.game.setState({',
+  '      gold: 100,',
+  '      level: 1,',
+  '      exp: 0,',
+  '      currentScene: "village"',
+  '    });',
+  '  });',
+  '',
+  '  // 读取游戏状态',
+  '  var state = xinyu.game.getState();',
+  "  console.log('金币:', state.gold);",
+  '',
+  '  // 更新游戏状态（会触发 game:stateChange 事件）',
+  '  xinyu.game.setState({ gold: state.gold + 50 });',
+  '',
+  '  // 监听游戏状态变更（所有插件都能收到）',
+  "  xinyu.ui.onHostEvent('game:stateChange', function(data) {",
+  "    console.log('变更的键:', data.changedKeys);",
+  '    // data.changedKeys = ["gold"]',
+  '  });',
+  '}',
+].join('\n');
+
+const CODE_STORAGE_ATTR = [
+  '// 使用 registerAttribute / setAttribute 管理游戏属性',
+  'function setup(xinyu) {',
+  "  xinyu.plugin.on('onGameInit', function() {",
+  '    // 注册属性（会显示在游戏属性面板中）',
+  '    xinyu.game.registerAttribute({',
+  "      key: 'hp',",
+  "      label: '生命值',",
+  "      type: 'number',",
+  '      value: 100,',
+  "      icon: '❤️',",
+  "      color: '#e74c3c'",
+  '    });',
+  '',
+  '    xinyu.game.registerAttribute({',
+  "      key: 'mp',",
+  "      label: '魔法值',",
+  "      type: 'number',",
+  '      value: 50,',
+  "      icon: '💎',",
+  "      color: '#3498db'",
+  '    });',
+  '',
+  '    xinyu.game.registerAttribute({',
+  "      key: 'status',",
+  "      label: '状态',",
+  "      type: 'string',",
+  "      value: '正常',",
+  "      icon: '⭐'",
+  '    });',
+  '  });',
+  '',
+  '  // 更新属性值',
+  '  xinyu.game.setAttribute("hp", 80);',
+  '',
+  '  // 读取所有属性',
+  '  var attrs = xinyu.game.getAttributes();',
+  "  console.log('HP:', attrs.hp.value);  // 80",
+  '}',
+].join('\n');
+
+// --- AI 拦截章节 ---
+const CODE_AI_PROMPT = [
+  '// 四种 AI 拦截器示例',
+  'function setup(xinyu) {',
+  '',
+  '  // 1. Prompt 构建拦截 - 注入 NPC 人格',
+  '  xinyu.ai.onPromptBuild(function(prompt, worldSetting) {',
+  '    return prompt + "\\n\\n[系统指令] 你现在扮演酒馆老板老王，说话粗犷豪爽。";',
+  '  });',
+  '',
+  '  // 2. 发送前拦截 - 修改消息内容',
+  '  xinyu.ai.onBeforeSend(function(messages) {',
+  '    // messages: [{ role: "user", content: "..." }, ...]',
+  '    return messages; // 返回修改后的消息数组',
+  '  });',
+  '',
+  '  // 3. 接收后拦截 - 内容格式化',
+  '  xinyu.ai.onAfterReceive(function(content) {',
+  '    // 移除多余的空行',
+  '    return content.replace(/\\n{3,}/g, "\\n\\n");',
+  '  });',
+  '',
+  '  // 4. 请求配置拦截 - 动态调整模型参数',
+  '  xinyu.ai.onRequestConfig(function(config) {',
+  '    config.model = "gpt-4";',
+  '    return config;',
+  '  });',
+  '}',
+].join('\n');
+
+const CODE_AI_PIPELINE = [
+  '// 管道模式：多个插件的拦截器按注册顺序依次执行',
+  '//',
+  '// 假设有三个插件都注册了 onPromptBuild：',
+  '//',
+  '// 原始 Prompt:',
+  '//   "你是一个奇幻世界的 AI 导游..."',
+  '//',
+  '// Plugin A (NPC 人格插件) onPromptBuild:',
+  '//   输入: "你是一个奇幻世界的 AI 导游..."',
+  '//   输出: "你是一个奇幻世界的 AI 导游...\\n[你现在是酒馆老板老王]"',
+  '//',
+  '// Plugin B (规则注入插件) onPromptBuild:',
+  '//   输入: "你是一个奇幻世界的 AI 导游...\\n[你现在是酒馆老板老王]"',
+  '//   输出: "你是一个奇幻世界的 AI 导游...\\n[你现在是酒馆老板老王]\\n[规则: 战斗判定使用 d20]"',
+  '//',
+  '// Plugin C (状态注入插件) onPromptBuild:',
+  '//   输入: "...\\n[规则: 战斗判定使用 d20]"',
+  '//   输出: "...\\n[规则: 战斗判定使用 d20]\\n[当前玩家HP: 80/100]"',
+  '//',
+  '// 最终发送给 AI 的 Prompt = Plugin C 的输出',
+  '//',
+  '// 注意：每个 handler 应该返回修改后的值，不要返回 undefined',
+].join('\n');
+
+const CODE_AI_NPC = [
+  '// 完整示例：NPC 人格注入插件',
+  'function setup(xinyu) {',
+  '  var npcData = {',
+  '    name: "酒馆老板·老王",',
+  '    personality: "粗犷豪爽，喜欢讲冒险故事，偶尔会推销自己的特酿麦酒",',
+  '    speech: "说话带点江湖气，用词朴实，偶尔夹杂方言"',
+  '  };',
+  '',
+  '  // 在 Prompt 中注入 NPC 人格',
+  '  xinyu.ai.onPromptBuild(function(prompt) {',
+  '    var npcPrompt = "\\n\\n[角色扮演指令]\\n"',
+  '      + "你现在是 " + npcData.name + "。\\n"',
+  '      + "性格: " + npcData.personality + "\\n"',
+  '      + "说话风格: " + npcData.speech + "\\n"',
+  '      + "请始终保持角色，不要脱离人设。";',
+  '    return prompt + npcPrompt;',
+  '  });',
+  '',
+  '  // 在状态栏显示当前 NPC',
+  "  xinyu.ui.registerSlot('status-bar',",
+  '    \'<div style="font-size:11px;color:var(--color-text-muted)">\' +',
+  "    '🎭 当前 NPC: ' + npcData.name + '</div>',",
+  '    { priority: 1 }',
+  '  );',
+  '',
+  '  // 注册切换 NPC 的按钮',
+  '  xinyu.ui.registerInputToolbarButton({',
+  "    id: 'switch-npc',",
+  "    label: '切换NPC',",
+  "    icon: '🎭',",
+  '    order: 15,',
+  '    onClick: function() {',
+  '      xinyu.ui.showModal({',
+  "        title: '🎭 切换 NPC',",
+  "        content: '<div style=\"padding:12px\">选择要扮演的 NPC</div>',",
+  "        width: '350px'",
+  '      });',
+  '    }',
+  '  });',
+  '}',
+].join('\n');
+
+// --- 插件配置章节 ---
+const CODE_CONFIG_SCHEMA = [
+  '// configSchema 定义示例（骰子插件）',
+  'var configSchema = [',
+  '  {',
+  "    key: 'defaultDice',",
+  "    label: '默认骰子面数',",
+  "    type: 'select',",
+  "    defaultValue: '20',",
+  "    description: '掷骰时使用的默认面数',",
+  "    options: [",
+  "      { value: '4', label: 'D4 (四面骰)' },",
+  "      { value: '6', label: 'D6 (六面骰)' },",
+  "      { value: '8', label: 'D8 (八面骰)' },",
+  "      { value: '10', label: 'D10 (十面骰)' },",
+  "      { value: '12', label: 'D12 (十二面骰)' },",
+  "      { value: '20', label: 'D20 (二十面骰)' },",
+  "      { value: '100', label: 'D100 (百面骰)' }",
+  '    ]',
+  '  },',
+  '  {',
+  "    key: 'showAnimation',",
+  "    label: '显示掷骰动画',",
+  "    type: 'boolean',",
+  "    defaultValue: true,",
+  "    description: '掷骰时是否显示动画效果'",
+  '  },',
+  '  {',
+  "    key: 'customModifier',",
+  "    label: '固定修正值',",
+  "    type: 'number',",
+  "    defaultValue: 0,",
+  "    description: '每次掷骰后自动加减的固定值'",
+  '  },',
+  '  {',
+  "    key: 'rollCommand',",
+  "    label: '掷骰指令前缀',",
+  "    type: 'text',",
+  "    defaultValue: '/roll',",
+  "    description: '触发掷骰的聊天指令'",
+  '  },',
+  '  {',
+  "    key: 'diceNote',",
+  "    label: '骰子备注',",
+  "    type: 'textarea',",
+  "    defaultValue: '',",
+  "    description: '自定义的骰子规则说明'",
+  '  }',
+  '];',
+].join('\n');
+
+const CODE_CONFIG_READ = [
+  '// 在插件代码中读取配置',
+  'function setup(xinyu) {',
+  '',
+  '  // 获取全部配置',
+  '  var config = xinyu.plugin.config.get();',
+  "  console.log('默认骰子:', config.defaultDice);",
+  "  console.log('显示动画:', config.showAnimation);",
+  '',
+  '  // 获取单个配置值',
+  '  var dice = xinyu.plugin.config.get("defaultDice");',
+  '  var modifier = xinyu.plugin.config.get("customModifier");',
+  '',
+  '  // 配置值来自用户在插件管理页面中的设置',
+  '  // 如果用户未修改，则使用 defaultValue',
+  '  var total = xinyu.utils.rollDice("1d" + dice).total + modifier;',
+  "  xinyu.ui.toast('掷骰结果: ' + total, 'info');",
+  '}',
+].join('\n');
+
+const CODE_CONFIG_FULL = [
+  '// 完整示例：带配置的骰子插件',
+  'function setup(xinyu) {',
+  '  // 读取配置',
+  '  var config = xinyu.plugin.config.get();',
+  '  var dice = config.defaultDice || "20";',
+  '  var modifier = config.customModifier || 0;',
+  '  var showAnim = config.showAnimation !== false;',
+  '',
+  '  // 注册掷骰指令',
+  '  xinyu.chat.registerCommand({',
+  "    name: config.rollCommand || '/roll',",
+  "    description: '掷骰子',",
+  '    handler: function(args) {',
+  '      var notation = args[0] || ("1d" + dice);',
+  '      var result = xinyu.utils.rollDice(notation);',
+      '      var total = result.total + modifier;',
+  '',
+  '      var msg = "🎲 " + notation;',
+  '      if (modifier !== 0) msg += (modifier > 0 ? "+" : "") + modifier;',
+  '      msg += " = " + total;',
+  '',
+  '      xinyu.chat.insertSystemMessage(msg);',
+  '      return msg;',
+  '    }',
+  '  });',
+  '',
+  '  // 在状态栏显示当前骰子设置',
+  "  xinyu.ui.registerSlot('status-bar',",
+  '    \'<div style="font-size:11px;color:var(--color-text-muted)">\' +',
+  "    '🎲 D' + dice + (modifier ? (modifier > 0 ? '+' : '') + modifier : '') + '</div>',",
+  '    { priority: 5 }',
+  '  );',
+  '}',
+].join('\n');
+
+// --- 导入导出章节 ---
+const CODE_EXPORT_FORMAT = [
+  '// 导出格式示例',
+  '//',
+  '// 单个插件导出（直接返回插件 JSON）：',
+  '{',
+  '  "id": "my-dice-plugin",',
+  '  "name": "我的骰子插件",',
+  '  "version": "1.0.0",',
+  '  "type": "game-mechanics",',
+  '  "description": "一个简单的骰子插件",',
+  '  "author": "作者名",',
+  '  "code": "function setup(xinyu) { ... }",',
+  '  "configSchema": [...],',
+  '  "commonPermissions": ["slot:status-bar", "style:inject"],',
+  '  "exclusivePermissions": [],',
+  '  "requiredPermissions": []',
+  '}',
+  '',
+  '// 批量导出（xinyu-extension-v1 格式）：',
+  '{',
+  '  "format": "xinyu-extension-v1",',
+  '  "exportedAt": "2026-04-26T12:00:00.000Z",',
+  '  "plugins": [',
+  '    { "id": "plugin-a", ... },',
+  '    { "id": "plugin-b", ... }',
+  '  ]',
+  '}',
+].join('\n');
+
+const CODE_IMPORT_FORMAT = [
+  '// 导入格式（支持 3 种）',
+  '//',
+  '// 格式 1：完整导出格式',
+  '{',
+  '  "format": "xinyu-extension-v1",',
+  '  "exportedAt": "2026-04-26T12:00:00.000Z",',
+  '  "plugins": [',
+  '    {',
+  '      "id": "my-plugin",',
+  '      "name": "我的插件",',
+  '      "version": "1.0.0",',
+  '      "type": "game-mechanics",',
+  '      "description": "插件描述",',
+  '      "author": "作者名",',
+  '      "code": "function setup(xinyu) { ... }",',
+  '      "configSchema": [...],',
+  '      "commonPermissions": [...],',
+      '      "exclusivePermissions": [...],',
+      '      "requiredPermissions": [...]',
+  '    }',
+  '  ]',
+  '}',
+  '',
+  '// 格式 2：直接数组',
+  '[',
+  '  { "id": "plugin-a", "name": "插件A", "code": "..." },',
+  '  { "id": "plugin-b", "name": "插件B", "code": "..." }',
+  ']',
+  '',
+  '// 格式 3：单个插件',
+  '{',
+  '  "id": "my-plugin",',
+  '  "name": "我的插件",',
+  '  "code": "function setup(xinyu) { ... }"',
+  '}',
+].join('\n');
+
+// --- 安全章节 ---
+const CODE_SECURITY_TAGS = [
+  '// 允许的 HTML 标签完整列表（46 个）',
+  '//',
+  '// 文本结构：div, span, p, h1, h2, h3, h4, h5, h6,',
+  '//           br, hr, pre, code, blockquote',
+  '//',
+  '// 列表：ul, ol, li, dl, dt, dd',
+  '//',
+  '// 表格：table, thead, tbody, tfoot, tr, th, td, caption, colgroup, col',
+  '//',
+  '// 表单（仅展示，无功能）：label, fieldset, legend',
+  '//',
+  '// 媒体：img, figure, figcaption, video, audio, source, canvas',
+  '//',
+  '// 语义化：article, section, aside, header, footer, nav, main,',
+  '//        details, summary, time, mark, abbr, small, strong, em, b, i,',
+  '//        u, s, sub, sup, del, ins',
+  '//',
+  '// 禁止的标签：script, style, link, meta, iframe,',
+  '//            object, embed, applet, form, input, select, textarea, button',
+  '//',
+  '// 禁止的属性前缀：on*, srcdoc, formaction, xlink:href',
+  '// 禁止的协议：javascript:',
+].join('\n');
+
+// ==================== 样式常量 ====================
+
+const codeStyle: React.CSSProperties = {
+  backgroundColor: 'var(--color-bg-tertiary)',
+  padding: '1px 5px',
+  borderRadius: '4px',
+  fontSize: '12px',
+  fontFamily: 'Consolas',
+  color: 'var(--color-accent)',
+};
+
+const preStyle: React.CSSProperties = {
+  backgroundColor: 'var(--color-bg-secondary)',
+  border: '1px solid var(--color-border)',
+  borderRadius: '8px',
+  padding: '12px 16px',
+  fontSize: '12px',
+  fontFamily: 'Consolas',
+  color: 'var(--color-text-secondary)',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  overflowX: 'auto',
+  lineHeight: '1.6',
+};
+
+const linkStyle: React.CSSProperties = {
+  color: 'var(--color-accent)',
+  cursor: 'pointer',
+  borderBottom: '1px dashed var(--color-accent)',
+  paddingBottom: '1px',
+  borderBottomColor: 'var(--color-accent)',
+  transition: 'color 0.15s, border-color 0.15s, background-color 0.15s',
+};
+
+const linkHoverStyle: React.CSSProperties = {
+  color: 'var(--color-accent-hover)',
+  borderBottomColor: 'var(--color-accent-hover)',
+  backgroundColor: 'var(--color-bg-tertiary)',
+};
+
+// ==================== 类型定义 ====================
+
+interface SubTitle {
+  id: string;
+  title: string;
+}
+
+interface Section {
+  id: string;
+  title: string;
+  icon: string;
+  subtitles?: SubTitle[];
+  content: React.ReactNode;
+}
+
+// ==================== 内部导航链接组件 ====================
+
+function NavLink({ sectionId, children, style }: { sectionId: string; children: React.ReactNode; style?: React.CSSProperties }) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <span
+      style={{
+        ...linkStyle,
+        ...(hovered ? linkHoverStyle : {}),
+        ...style,
+      }}
+      onClick={() => document.getElementById('section-' + sectionId)?.scrollIntoView({ behavior: 'smooth' })}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {children}
+    </span>
+  );
+}
+
+// ==================== 主页面组件 ====================
+
+export default function TutorialPage() {
+  const { navigate } = useRouterHistory();
+  const [activeSection, setActiveSection] = useState('overview');
+  const [expandedSection, setExpandedSection] = useState<string | null>(null);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchHistory, setSearchHistory] = useState<string[]>([]);
+  const [searchResults, setSearchResults] = useState<Array<{ text: string; sectionTitle: string; sectionId: string }>>([]);
+  const mainRef = useRef<HTMLDivElement>(null);
+  const isScrollingRef = useRef(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const searchMenuRef = useRef<HTMLDivElement>(null);
+  const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [exportModalOpen, setExportModalOpen] = useState(false);
+
+  // 导出教程为自包含的 HTML 静态文件
+  const exportTutorialHTML = useCallback((themeId?: string) => {
+    const main = mainRef.current;
+    if (!main) return;
+
+    // 选择主题，默认使用当前激活的主题
+    const theme = themeId
+      ? presetThemes.find(t => t.id === themeId)
+      : presetThemes.find(t => {
+          const style = getComputedStyle(document.documentElement);
+          return t.variables['--color-bg-primary'] === style.getPropertyValue('--color-bg-primary').trim();
+        });
+    const vars = theme?.variables || presetThemes[0].variables;
+
+    // 将 CSS 变量替换为具体色值
+    let html = main.innerHTML;
+    for (const [varName, value] of Object.entries(vars)) {
+      html = html.replace(new RegExp(`var\\(${varName}\\)`, 'g'), value);
+    }
+
+    const fullHTML = `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>星语插件开发教程</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    background-color: ${vars['--color-bg-primary']};
+    color: ${vars['--color-text-secondary']};
+    line-height: 1.8;
+    font-size: 13px;
+    padding: 2rem;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+  h2 { color: ${vars['--color-text-primary']}; font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; margin-top: 2.5rem; }
+  h3 { color: ${vars['--color-text-primary']}; font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; margin-top: 1.5rem; }
+  h4 { color: ${vars['--color-accent']}; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.5rem; margin-top: 1rem; }
+  p { margin-bottom: 0.5rem; }
+  ul, ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }
+  li { margin-bottom: 0.25rem; }
+  code {
+    background-color: ${vars['--color-bg-tertiary']};
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    font-size: 0.85em;
+    font-family: 'Fira Code', 'Consolas', monospace;
+    color: ${vars['--color-accent']};
+  }
+  pre {
+    background-color: ${vars['--color-bg-secondary']};
+    border: 1px solid ${vars['--color-border']};
+    border-radius: 8px;
+    padding: 1rem;
+    overflow-x: auto;
+    margin: 0.5rem 0;
+    font-size: 0.8rem;
+    line-height: 1.6;
+  }
+  pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    color: ${vars['--color-text-secondary']};
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0.5rem 0;
+    font-size: 0.8rem;
+  }
+  th, td {
+    padding: 0.4rem 0.75rem;
+    border-color: ${vars['--color-border']};
+    text-align: left;
+  }
+  th {
+    background-color: ${vars['--color-bg-secondary']};
+    color: ${vars['--color-text-primary']};
+    font-weight: 600;
+  }
+  td { color: ${vars['--color-text-secondary']}; }
+  a { color: ${vars['--color-accent']}; text-decoration: none; }
+  a:hover { color: ${vars['--color-accent-hover']}; }
+  blockquote {
+    border-left: 3px solid ${vars['--color-accent']};
+    padding-left: 1rem;
+    margin: 0.5rem 0;
+    color: ${vars['--color-text-muted']};
+  }
+  strong { color: ${vars['--color-text-primary']}; }
+  hr { border: none; border-top: 1px solid transparent; border-top-color: ${vars['--color-border']}; margin: 1.5rem 0; }
+</style>
+</head>
+<body>
+${html}
+</body>
+</html>`;
+
+    // 触发下载
+    const blob = new Blob([fullHTML], { type: 'text/html;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'xinyu-plugin-tutorial.html';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  // 搜索历史持久化
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem('tutorial_search_history');
+      if (saved) setSearchHistory(JSON.parse(saved));
+    } catch {}
+  }, []);
+
+  const saveSearchHistory = useCallback((history: string[]) => {
+    setSearchHistory(history);
+    try { localStorage.setItem('tutorial_search_history', JSON.stringify(history)); } catch {}
+  }, []);
+
+  const addSearchHistory = useCallback((query: string) => {
+    if (!query.trim()) return;
+    const trimmed = query.trim();
+    const filtered = searchHistory.filter(h => h !== trimmed);
+    const updated = [trimmed, ...filtered].slice(0, 20);
+    saveSearchHistory(updated);
+  }, [searchHistory, saveSearchHistory]);
+
+  const removeSearchHistory = useCallback((item: string) => {
+    saveSearchHistory(searchHistory.filter(h => h !== item));
+  }, [searchHistory, saveSearchHistory]);
+
+  const clearSearchHistory = useCallback(() => {
+    saveSearchHistory([]);
+  }, [saveSearchHistory]);
+
+  // 搜索框打开时聚焦
+  useEffect(() => {
+    if (searchOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [searchOpen]);
+
+  // 点击外部关闭搜索菜单
+  useEffect(() => {
+    if (!searchOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (searchMenuRef.current && !searchMenuRef.current.contains(e.target as Node)) {
+        setSearchOpen(false);
+        setSearchQuery('');
+        setSearchResults([]);
+        searchInputRef.current?.blur();
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [searchOpen]);
+
+  /** 在教程内容中搜索，返回匹配结果（纯计算，不操作 DOM） */
+  const doSearch = useCallback((query: string): Array<{ text: string; sectionTitle: string; sectionId: string }> => {
+    const main = mainRef.current;
+    if (!main || !query.trim()) return [];
+    const lowerQuery = query.trim().toLowerCase();
+    const results: Array<{ text: string; sectionTitle: string; sectionId: string }> = [];
+    main.querySelectorAll('section[id^="section-"]').forEach(secEl => {
+      const secId = secEl.id.replace('section-', '');
+      const titleEl = secEl.querySelector('h2');
+      const title = titleEl?.textContent || secId;
+      const text = (secEl.textContent || '').toLowerCase();
+      if (text.includes(lowerQuery)) {
+        const idx = text.indexOf(lowerQuery);
+        const start = Math.max(0, idx - 20);
+        const end = Math.min(text.length, idx + query.trim().length + 40);
+        let snippet = (secEl.textContent || '').substring(start, end).replace(/\s+/g, ' ').trim();
+        if (start > 0) snippet = '...' + snippet;
+        if (end < text.length) snippet += '...';
+        results.push({ text: snippet, sectionTitle: title, sectionId: secId });
+      }
+    });
+    return results;
+  }, []);
+
+  /** 防抖搜索（输入时调用，300ms 延迟） */
+  const debouncedSearch = useCallback((query: string) => {
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    if (!query.trim()) { setSearchResults([]); return; }
+    searchTimerRef.current = setTimeout(() => {
+      setSearchResults(doSearch(query));
+    }, 300);
+  }, [doSearch]);
+
+  const highlightInSection = useCallback((sectionId: string, query: string) => {
+    const main = mainRef.current;
+    if (!main) return;
+    // 先清除旧高亮
+    main.querySelectorAll('mark[data-tutorial-search]').forEach(el => {
+      const mark = el as HTMLElement;
+      const parent = mark.parentNode;
+      if (parent) {
+        parent.replaceChild(document.createTextNode(mark.textContent || ''), mark);
+        parent.normalize();
+      }
+    });
+    // 在目标 section 中找第一个文本匹配
+    const secEl = main.querySelector('#section-' + sectionId);
+    if (!secEl) return;
+    const lowerQuery = query.toLowerCase();
+    const walker = document.createTreeWalker(secEl, NodeFilter.SHOW_TEXT, null);
+    let node: Node | null;
+    while ((node = walker.nextNode())) {
+      const text = node.textContent || '';
+      const idx = text.toLowerCase().indexOf(lowerQuery);
+      if (idx >= 0) {
+        try {
+          const range = document.createRange();
+          range.setStart(node, idx);
+          range.setEnd(node, idx + query.length);
+          const mark = document.createElement('mark');
+          mark.setAttribute('data-tutorial-search', 'true');
+          mark.style.backgroundColor = 'var(--color-accent)';
+          mark.style.color = '#000';
+          mark.style.borderRadius = '2px';
+          mark.style.padding = '0 2px';
+          range.surroundContents(mark);
+          // 直接让高亮元素滚动到视口，一步到位
+          mark.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        } catch {}
+        break; // 只高亮第一个匹配
+      }
+    }
+  }, []);
+
+  const handleSearch = useCallback((query: string) => {
+    if (!query.trim()) return;
+    addSearchHistory(query);
+
+    const results = doSearch(query);
+    setSearchResults(results);
+
+    // 如果有结果，跳转到第一个并高亮
+    if (results.length > 0) {
+      highlightInSection(results[0].sectionId, query.trim());
+    }
+  }, [addSearchHistory, doSearch, highlightInSection]);
+
+  const clearHighlights = useCallback(() => {
+    const sel = window.getSelection();
+    if (sel) sel.removeAllRanges();
+    // 清除 DOM 中的搜索高亮 <mark> 元素
+    const main = mainRef.current;
+    if (main) {
+      main.querySelectorAll('mark[data-tutorial-search]').forEach(el => {
+        const mark = el as HTMLElement;
+        const parent = mark.parentNode;
+        if (parent) {
+          parent.replaceChild(document.createTextNode(mark.textContent || ''), mark);
+          parent.normalize();
+        }
+      });
+    }
+    setSearchResults([]);
+  }, []);
+
+  // 关闭搜索面板时清除高亮
+  useEffect(() => {
+    if (!searchOpen) {
+      const timer = setTimeout(clearHighlights, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [searchOpen, clearHighlights]);
+
+  const sections: Section[] = [
+    {
+      id: 'overview',
+      title: '概述',
+      icon: '📖',
+      subtitles: [
+        { id: 'sub-what-is-plugin', title: '什么是插件？' },
+        { id: 'sub-plugin-types', title: '插件类型' },
+        { id: 'sub-minimal-plugin', title: '最简插件' },
+      ],
+      content: <OverviewSection />,
+    },
+    {
+      id: 'architecture',
+      title: '架构设计',
+      icon: '🏗️',
+      subtitles: [
+        { id: 'sub-code-exec', title: '代码执行方式' },
+        { id: 'sub-dual-scope', title: '双层作用域' },
+      ],
+      content: <ArchitectureSection />,
+    },
+    {
+      id: 'lifecycle',
+      title: '生命周期',
+      icon: '🔄',
+      subtitles: [
+        { id: 'sub-lifecycle-example', title: '使用示例' },
+      ],
+      content: <LifecycleSection />,
+    },
+    {
+      id: 'api-global',
+      title: '全局 API',
+      icon: '🌐',
+      subtitles: [
+        { id: 'sub-common-api', title: '所有插件通用 API' },
+      ],
+      content: <GlobalApiSection />,
+    },
+    {
+      id: 'api-ui',
+      title: 'UI API 详解',
+      icon: '🎨',
+      subtitles: [
+        { id: 'sub-slot-inject', title: '插槽注入' },
+        { id: 'sub-toolbar-button', title: '工具栏按钮' },
+        { id: 'sub-modal-confirm', title: '模态框与确认对话框' },
+        { id: 'sub-style-inject', title: '样式注入' },
+        { id: 'sub-host-event', title: '宿主事件监听' },
+        { id: 'sub-message-card', title: '消息卡片注册' },
+      ],
+      content: <UiApiSection />,
+    },
+    {
+      id: 'api-chat',
+      title: 'Chat API 详解',
+      icon: '💬',
+      subtitles: [
+        { id: 'sub-chat-send', title: 'send / insertSystemMessage / insertNotice' },
+        { id: 'sub-chat-notice', title: 'insertNotice' },
+        { id: 'sub-chat-style', title: 'injectChatStyle' },
+        { id: 'sub-chat-command', title: 'registerCommand' },
+        { id: 'sub-chat-renderer', title: 'registerMessageRenderer' },
+        { id: 'sub-chat-on-render-message', title: 'onRenderMessage（消息内容管道）' },
+      ],
+      content: <ChatApiSection />,
+    },
+    {
+      id: 'api-input',
+      title: '输入框 API',
+      icon: '⌨️',
+      subtitles: [
+        { id: 'sub-input-overview', title: '概述' },
+        { id: 'sub-input-content', title: '内容操作' },
+        { id: 'sub-input-state', title: '状态控制' },
+        { id: 'sub-input-style', title: '样式修改' },
+        { id: 'sub-input-event', title: '事件监听' },
+        { id: 'sub-input-cursor', title: '光标与选区' },
+      ],
+      content: <InputApiSection />,
+    },
+    {
+      id: 'api-utils',
+      title: 'Utils API 详解',
+      icon: '🔧',
+      subtitles: [
+        { id: 'sub-utils-random', title: 'randomInt / rollDice' },
+        { id: 'sub-utils-format', title: 'formatDate' },
+        { id: 'sub-utils-debounce', title: 'debounce / throttle' },
+        { id: 'sub-utils-eventbus', title: 'eventBus' },
+      ],
+      content: <UtilsApiSection />,
+    },
+    {
+      id: 'api-dom',
+      title: 'DOM 沙箱',
+      icon: '🛡️',
+      subtitles: [
+          { id: 'sub-dom-security', title: '安全边界' },
+          { id: 'sub-dom-slots', title: '可用插槽 ID' },
+          { id: 'sub-dom-api', title: 'API 详解' },
+          { id: 'sub-dom-permission', title: '权限说明' },
+          { id: 'sub-dom-vs-slot', title: 'DOM vs Slot' },
+        ],
+      content: <DomSandboxSection />,
+    },
+    {
+      id: 'permissions',
+      title: '权限系统',
+      icon: '🔐',
+      subtitles: [
+        { id: 'sub-perm-overview', title: '三层权限体系' },
+        { id: 'sub-perm-list', title: '权限列表' },
+        { id: 'sub-perm-default', title: '默认权限' },
+        { id: 'sub-perm-editor', title: '编辑器中声明权限' },
+        { id: 'sub-perm-annotation', title: '代码注释声明' },
+        { id: 'sub-perm-conflict', title: '权限冲突' },
+      ],
+      content: <PermissionsSection />,
+    },
+    {
+      id: 'slots',
+      title: 'UI 插槽',
+      icon: '📍',
+      subtitles: [
+        { id: 'sub-slot-diagram', title: '插槽位置示意图' },
+        { id: 'sub-slot-priority', title: '优先级' },
+        { id: 'sub-slot-update', title: '更新与覆盖' },
+        { id: 'sub-slot-action', title: '交互事件' },
+        { id: 'sub-slot-key', title: 'key 参数与精确注销'},
+      ],
+      content: <SlotsSection />,
+    },
+    {
+      id: 'css-variables',
+      title: 'CSS 变量系统',
+      icon: '🎨',
+      subtitles: [
+        { id: 'sub-css-var-list', title: '完整的 CSS 变量列表' },
+        { id: 'sub-css-var-naming', title: 'CSS 变量命名规范' },
+        { id: 'sub-css-var-usage', title: '插件中使用 CSS 变量的方式' },
+        { id: 'sub-css-var-guide', title: '使用指南' },
+        { id: 'sub-css-var-custom', title: '创建自定义 CSS 变量' },
+        { id: 'sub-css-var-themes', title: '四个预设主题对比' },
+      ],
+      content: <CssVariablesSection />,
+    },
+    {
+      id: 'plugin-storage',
+      title: '插件数据存储',
+      icon: '💾',
+      subtitles: [
+        { id: 'sub-storage-plugin', title: '方式 1：plugin.storage（推荐）' },
+        { id: 'sub-game-info', title: '方式 2：game.getWorldSetting / setWorldSetting / getSessionId / getMessages' },
+        { id: 'sub-storage-game', title: '方式 3：game.setState / getState' },
+        { id: 'sub-storage-attr', title: '方式 4：game.registerAttribute' },
+        { id: 'sub-storage-best', title: '存储最佳实践' },
+      ],
+      content: <PluginStorageSection />,
+    },
+    {
+      id: 'ai-interception',
+      title: 'AI 拦截系统详解',
+      icon: '🤖',
+      subtitles: [
+        { id: 'sub-ai-interceptors', title: '五种拦截器' },
+        { id: 'sub-ai-pipeline', title: '管道模式详解' },
+        { id: 'sub-ai-npc-example', title: '完整示例：NPC 人格注入' },
+        { id: 'sub-ai-notes', title: '注意事项' },
+      ],
+      content: <AiInterceptionSection />,
+    },
+    {
+      id: 'plugin-config',
+      title: '插件配置系统',
+      icon: '⚙️',
+      subtitles: [
+        { id: 'sub-config-schema', title: 'configSchema 定义' },
+        { id: 'sub-config-schema-example', title: 'configSchema 示例' },
+        { id: 'sub-config-read', title: '在插件代码中读取配置' },
+        { id: 'sub-config-full-example', title: '完整示例：带配置的骰子插件' },
+        { id: 'sub-config-ingame', title: '配置作用域' },
+      ],
+      content: <PluginConfigSection />,
+    },
+    {
+      id: 'plugin-import-export',
+      title: '插件导入导出',
+      icon: '📦',
+      subtitles: [
+        { id: 'sub-export-format', title: '导出格式' },
+        { id: 'sub-import-format', title: '导入格式' },
+        { id: 'sub-import-behavior', title: '导入行为' },
+        { id: 'sub-json-spec', title: 'JSON 文件格式规范' },
+      ],
+      content: <PluginImportExportSection />,
+    },
+    {
+      id: 'persistent-storage',
+      title: '持久化存储与文件操作',
+      icon: '💾',
+      subtitles: [
+        { id: 'sub-persistent-storage', title: '持久化存储 xinyu.storage' },
+        { id: 'sub-file-api', title: '文件操作 xinyu.file' },
+        { id: 'sub-resource-api', title: '插件资源访问 getResource / getResourceUrl' },
+      ],
+      content: (
+        <>
+          <PersistentStorageSection />
+          <FileApiSection />
+          <ResourceApiSection />
+        </>
+      ),
+    },
+    {
+      id: 'cross-plugin',
+      title: '跨插件通信',
+      icon: '🔗',
+      subtitles: [
+        { id: 'sub-cp-overview', title: '概述' },
+        { id: 'sub-cp-export', title: '被调用方：导出 API' },
+        { id: 'sub-cp-call', title: '调用方：使用 API' },
+        { id: 'sub-cp-security', title: '安全机制' },
+      ],
+      content: <CrossPluginSection />,
+    },
+    {
+      id: 'dependency',
+      title: '依赖管理',
+      icon: '📦',
+      subtitles: [
+        { id: 'sub-dep-overview', title: '概述' },
+        { id: 'sub-dep-manifest', title: 'manifest 声明' },
+        { id: 'sub-dep-version', title: '版本范围语法' },
+        { id: 'sub-dep-runtime', title: '运行时加载（推荐）' },
+        { id: 'sub-dep-editor', title: '编辑器中的依赖管理' },
+      ],
+      content: <DependencySection />,
+    },
+    {
+      id: 'security',
+      title: '安全机制详解',
+      icon: '🔒',
+      subtitles: [
+        { id: 'sub-security-layers', title: '六层安全架构' },
+        { id: 'sub-html-sanitize', title: 'HTML 净化规则' },
+        { id: 'sub-allowed-tags', title: '允许的 HTML 标签' },
+        { id: 'sub-ai-scan', title: 'AI 安全检测' },
+      ],
+      content: <SecuritySection />,
+    },
+    {
+      id: 'best-practices',
+      title: '最佳实践',
+      icon: '✨',
+      subtitles: [
+        { id: 'sub-bp-general', title: '通用规范' },
+        { id: 'sub-bp-ui', title: 'UI 开发规范' },
+        { id: 'sub-bp-ai', title: 'AI 拦截规范' },
+        { id: 'sub-bp-storage', title: '数据存储规范' },
+        { id: 'sub-bp-config', title: '插件配置规范' },
+        { id: 'sub-bp-perf', title: '性能建议' },
+        { id: 'sub-bp-cross-plugin', title: '跨插件通信规范' },
+        { id: 'sub-bp-dependency', title: '依赖管理规范' },
+      ],
+      content: <BestPracticesSection />,
+    },
+    {
+      id: 'examples',
+      title: '完整示例',
+      icon: '💡',
+      subtitles: [
+        { id: 'sub-ex-1', title: '示例 1：自定义状态栏插件' },
+        { id: 'sub-ex-2', title: '示例 2：消息统计面板' },
+        { id: 'sub-ex-3', title: '示例 3：浮动操作面板' },
+        { id: 'sub-ex-4', title: '示例 4：带配置的骰子插件' },
+        { id: 'sub-ex-5', title: '示例 5：NPC 人格注入插件' },
+      ],
+      content: <ExamplesSection />,
+    },
+    {
+      id: 'debug',
+      title: '调试技巧',
+      icon: '🔧',
+      subtitles: [
+        { id: 'sub-debug-tools', title: '使用浏览器开发者工具' },
+        { id: 'sub-debug-faq', title: '常见问题排查' },
+        { id: 'sub-debug-scan', title: '安全检测' },
+      ],
+      content: <DebugSection />,
+    },
+  ];
+
+  // Scroll spy: 监听滚动，实时更新 activeSection 和 activeSub
+  useEffect(() => {
+    const main = mainRef.current;
+    if (!main) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (isScrollingRef.current) return;
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const id = entry.target.id;
+            if (id.startsWith('section-')) {
+              setActiveSection(id.replace('section-', ''));
+            } else if (id.startsWith('sub-')) {
+              for (const sec of sections) {
+                if (sec.subtitles?.some((st) => st.id === id)) {
+                  setActiveSection(sec.id);
+                  break;
+                }
+              }
+            }
+          }
+        }
+      },
+      { root: main, rootMargin: '-10% 0px -70% 0px', threshold: 0 }
+    );
+
+    // 观察所有 section 和 subtitle 元素
+    main.querySelectorAll('[id^="section-"], [id^="sub-"]').forEach((el) => {
+      observer.observe(el);
+    });
+
+    return () => observer.disconnect();
+  }, [sections]);
+
+  const scrollTo = useCallback((id: string) => {
+    isScrollingRef.current = true;
+    const target = document.getElementById(id);
+    if (!target) { isScrollingRef.current = false; return; }
+
+    target.scrollIntoView({ behavior: 'smooth' });
+
+    // 监听滚动结束再恢复 scroll spy
+    const main = mainRef.current;
+    if (main && 'onscrollend' in window) {
+      main.addEventListener('scrollend', function onEnd() {
+        isScrollingRef.current = false;
+        main.removeEventListener('scrollend', onEnd);
+      });
+    } else {
+      // 降级：用 scroll 事件 + 防抖
+      let timer: ReturnType<typeof setTimeout>;
+      const onScroll = () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          isScrollingRef.current = false;
+          main!.removeEventListener('scroll', onScroll);
+        }, 150);
+      };
+      main!.addEventListener('scroll', onScroll);
+    }
+  }, []);
+
+  const handleSectionClick = useCallback((secId: string) => {
+    setActiveSection(secId);
+    setExpandedSection((prev) => prev === secId ? null : secId);
+    scrollTo('section-' + secId);
+  }, [scrollTo]);
+
+  const handleSubClick = useCallback((secId: string, subId: string) => {
+    setActiveSection(secId);
+    scrollTo(subId);
+  }, [scrollTo]);
+
+  // ⌘K / Ctrl+K 快捷键打开搜索
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setSearchOpen(prev => !prev);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  return (
+    <div className="h-screen flex flex-col" style={{ backgroundColor: s.bgPrimary }}>
+      {/* 顶部导航 */}
+      <PageHeader
+        title="星语 · 插件开发教程"
+        showBack={true}
+        actions={
+          <div className="flex items-center gap-2">
+            {/* 搜索输入框 */}
+            <div className="relative" ref={searchMenuRef}>
+              <div
+                className="flex items-center gap-2 px-3 py-1.5 rounded-lg border"
+                style={{
+                  borderColor: s.border,
+                  backgroundColor: s.bgSecondary,
+                  width: '260px',
+                  boxShadow: searchOpen ? '0 4px 20px rgba(0,0,0,0.3)' : 'none',
+                }}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: s.textMuted, flexShrink: 0 }}>
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.3-4.3" />
+                </svg>
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => {
+                    setSearchQuery(e.target.value);
+                    if (!searchOpen) setSearchOpen(true);
+                    debouncedSearch(e.target.value);
+                  }}
+                  onFocus={() => setSearchOpen(true)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleSearch(searchQuery);
+                    if (e.key === 'Escape') { setSearchOpen(false); setSearchQuery(''); setSearchResults([]); searchInputRef.current?.blur(); }
+                  }}
+                  placeholder="搜索教程..."
+                  className="flex-1 bg-transparent outline-none text-xs"
+                  style={{ color: s.textPrimary }}
+                />
+                {searchQuery && (
+                  <button
+                    onClick={() => { setSearchQuery(''); setSearchResults([]); searchInputRef.current?.focus(); }}
+                    className="shrink-0 text-[10px]"
+                    style={{ color: s.textMuted }}
+                  >
+                    ✕
+                  </button>
+                )}
+                <kbd className="shrink-0 px-1 py-0.5 rounded text-[9px]" style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}>⌘K</kbd>
+              </div>
+              {/* 展开面板 */}
+              {searchOpen && (
+                <div
+                  className="absolute right-0 top-full mt-1 rounded-lg shadow-xl z-50 overflow-hidden"
+                  style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}`, width: '380px' }}
+                >
+                  {searchQuery.trim() && searchResults.length > 0 && (
+                    <div className="max-h-64 overflow-y-auto py-1">
+                      <div className="px-3 py-1.5">
+                        <span className="text-[10px] font-bold" style={{ color: s.textMuted }}>找到 {searchResults.length} 个结果</span>
+                      </div>
+                      {searchResults.map((r, idx) => (
+                        <div
+                          key={r.sectionId + '-' + idx}
+                          className="flex items-start gap-2 px-3 py-2 cursor-pointer transition-colors"
+                          style={{ color: s.textSecondary }}
+                          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = s.bgTertiary)}
+                          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
+                          onClick={() => {
+                            addSearchHistory(searchQuery);
+                            const main = mainRef.current;
+                            if (main) {
+                              const sec = main.querySelector('#section-' + r.sectionId);
+                              if (sec) {
+                                sec.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                                setTimeout(() => highlightInSection(r.sectionId, searchQuery.trim()), 400);
+                              }
+                            }
+                          }}
+                        >
+                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 mt-0.5" style={{ color: s.textMuted }}>
+                            <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+                          </svg>
+                          <div className="flex-1 min-w-0">
+                            <div className="text-xs font-medium truncate" style={{ color: s.textPrimary }}>{r.sectionTitle}</div>
+                            <div className="text-[10px] mt-0.5 truncate" style={{ color: s.textMuted }}>{r.text}</div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {searchQuery.trim() && searchResults.length === 0 && (
+                    <div className="px-3 py-4 text-center text-xs" style={{ color: s.textMuted }}>未找到匹配内容</div>
+                  )}
+                  {!searchQuery.trim() && searchHistory.length > 0 && (
+                    <div className="max-h-64 overflow-y-auto py-1">
+                      <div className="flex items-center justify-between px-3 py-1.5">
+                        <span className="text-[10px] font-bold" style={{ color: s.textMuted }}>搜索历史</span>
+                        <button
+                          onClick={clearSearchHistory}
+                          className="text-[10px] transition-colors"
+                          style={{ color: s.textMuted }}
+                          onMouseEnter={(e) => (e.currentTarget.style.color = s.accent)}
+                          onMouseLeave={(e) => (e.currentTarget.style.color = s.textMuted)}
+                        >清空全部</button>
+                      </div>
+                      {searchHistory.map((item) => (
+                        <div
+                          key={item}
+                          className="flex items-center gap-2 px-3 py-1.5 cursor-pointer transition-colors group"
+                          style={{ color: s.textSecondary }}
+                          onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = s.bgTertiary)}
+                          onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}
+                          onClick={() => {
+                            setSearchQuery(item);
+                            setSearchResults(doSearch(item));
+                            addSearchHistory(item);
+                            searchInputRef.current?.focus();
+                          }}
+                        >
+                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: s.textMuted, flexShrink: 0 }}>
+                            <circle cx="12" cy="12" r="10" />
+                            <polyline points="12 6 12 12 16 14" />
+                          </svg>
+                          <span className="flex-1 text-xs truncate">{item}</span>
+                          <button
+                            onClick={(e) => { e.stopPropagation(); removeSearchHistory(item); }}
+                            className="opacity-0 group-hover:opacity-100 shrink-0 text-[10px] transition-opacity"
+                            style={{ color: s.textMuted }}
+                          >✕</button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {!searchQuery.trim() && searchHistory.length === 0 && (
+                    <div className="px-3 py-4 text-center text-xs" style={{ color: s.textMuted }}>暂无搜索历史</div>
+                  )}
+                  <div className="px-3 py-1.5 flex items-center gap-3" style={{ borderTop: `1px solid ${s.border}`, color: s.textMuted }}>
+                    <span className="text-[9px]"><kbd className="px-1 py-0.5 rounded" style={{ backgroundColor: s.bgTertiary }}>↵</kbd> 搜索</span>
+                    <span className="text-[9px]"><kbd className="px-1 py-0.5 rounded" style={{ backgroundColor: s.bgTertiary }}>Esc</kbd> 关闭</span>
+                  </div>
+                </div>
+              )}
+            </div>
+            <button
+              onClick={() => navigate('/extensions/create')}
+              className="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+              style={{ backgroundColor: 'var(--color-accent)', color: '#fff' }}
+            >
+              创建插件
+              </button>
+            <button
+              onClick={() => setExportModalOpen(true)}
+              className="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1.5"
+              style={{ border: `1px solid ${s.border}`, color: s.textSecondary, backgroundColor: 'transparent' }}
+              title="导出为 HTML 静态文件"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+              导出 HTML
+            </button>
+            <ThemeSwitcher buttonStyle={{ paddingTop: '0.375rem', paddingBottom: '0.375rem' }}/>
+          </div>
+        }
+      />
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* 左侧目录 */}
+        <nav className="w-64 shrink-0 overflow-y-auto p-3 space-y-0.5" style={{ borderRight: `1px solid ${s.border}`, backgroundColor: s.bgSecondary }}>
+          {sections.map((sec) => {
+            const isActive = activeSection === sec.id;
+            const hasSubs = sec.subtitles && sec.subtitles.length > 0;
+            const isExpanded = expandedSection === sec.id;
+
+            return (
+              <div key={sec.id}>
+                <button
+                  onClick={() => handleSectionClick(sec.id)}
+                  className="w-full text-left px-3 py-2 rounded-lg text-xs flex items-center gap-2 transition-colors min-w-0"
+                  style={{
+                    backgroundColor: isActive ? s.bgTertiary : 'transparent',
+                    color: isActive ? s.accent : s.textSecondary,
+                    fontWeight: isActive ? 600 : 400,
+                  }}
+                >
+                  <span className="shrink-0">{sec.icon}</span>
+                  <span className="truncate">{sec.title}</span>
+                </button>
+                {hasSubs && isExpanded && (
+                  <div className="ml-5 pl-3 space-y-0.5 mt-0.5" style={{ borderLeft: `1px solid ${s.border}` }}>
+                    {sec.subtitles!.map((sub) => (
+                      <button
+                        key={sub.id}
+                        onClick={() => handleSubClick(sec.id, sub.id)}
+                        className="w-full text-left px-2 py-1.5 rounded text-xs transition-colors truncate"
+                        style={{
+                          color: s.textMuted,
+                        }}
+                      >
+                        {sub.title}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </nav>
+
+        {/* 右侧内容 */}
+        <main ref={mainRef} className="flex-1 overflow-y-auto p-8">
+          {sections.map((sec) => (
+            <section key={sec.id} id={'section-' + sec.id} className="mb-10 scroll-mt-4">
+              <h2 className="text-lg font-bold mb-4 flex items-center gap-2" style={{ color: s.textPrimary }}>
+                <span>{sec.icon}</span>
+                {sec.title}
+              </h2>
+              <div className="space-y-4" style={{ color: s.textSecondary, fontSize: '13px', lineHeight: '1.8' }}>
+                {sec.content}
+              </div>
+            </section>
+          ))}
+        </main>
+      </div>
+
+      {/* 导出主题选择弹窗 */}
+      {exportModalOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+          onClick={() => setExportModalOpen(false)}
+        >
+          <div
+            className="rounded-xl p-5 w-80"
+            style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-sm font-bold" style={{ color: s.textPrimary }}>选择导出主题</h3>
+              <button
+                onClick={() => setExportModalOpen(false)}
+                className="p-1 rounded-lg transition-colors"
+                style={{ color: s.textMuted }}
+              >
+                <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="space-y-2">
+              {/* 当前主题（默认） */}
+              <button
+                onClick={() => { setExportModalOpen(false); exportTutorialHTML(); }}
+                className="w-full text-left px-3 py-2.5 rounded-lg text-xs transition-colors flex items-center gap-3"
+                style={{ backgroundColor: s.bgTertiary, border: `1px solid ${s.accent}`, color: s.textPrimary }}
+              >
+                <span className="text-base">🎨</span>
+                <div className="flex-1">
+                  <div className="font-medium">当前主题</div>
+                  <div className="text-[10px] mt-0.5" style={{ color: s.textMuted }}>使用页面当前应用的主题导出</div>
+                </div>
+                <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ backgroundColor: s.bgPrimary, color: s.accent }}>默认</span>
+              </button>
+              {/* 预设主题列表 */}
+              {presetThemes.map((theme) => (
+                <button
+                  key={theme.id}
+                  onClick={() => { setExportModalOpen(false); exportTutorialHTML(theme.id); }}
+                  className="w-full text-left px-3 py-2.5 rounded-lg text-xs transition-colors flex items-center gap-3"
+                  style={{ border: `1px solid ${s.border}`, color: s.textSecondary }}
+                  onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = s.bgTertiary; }}
+                  onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent'; }}
+                >
+                  <span
+                    className="w-5 h-5 rounded-full shrink-0"
+                    style={{ backgroundColor: theme.variables['--color-accent'], border: `2px solid ${theme.variables['--color-border']}` }}
+                  />
+                  <div className="flex-1">
+                    <div className="font-medium" style={{ color: s.textPrimary }}>{theme.name}</div>
+                    <div className="text-[10px] mt-0.5" style={{ color: s.textMuted }}>{theme.description}</div>
+                  </div>
+                  <span className="text-[10px]" style={{ color: s.textMuted }}>{theme.isDark ? '🌙 深色' : '☀️ 浅色'}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ==================== 教程章节内容 ====================
+
+function OverviewSection() {
+  return (
+    <div>
+      <p>星语的插件系统允许你扩展游戏的核心功能，包括自定义游戏机制、消息渲染方式、AI 行为和用户界面。</p>
+      <h3 id="sub-what-is-plugin" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>什么是插件？</h3>
+      <p>插件是一段 JavaScript 代码，通过导出一个 <code style={codeStyle}>setup(xinyu)</code> 函数来注册功能。插件可以：</p>
+      <ul className="list-disc pl-5 space-y-1">
+        <li>注册游戏属性（金币、HP 等）和快捷指令（/roll）</li>
+        <li>自定义 AI 消息的渲染方式（Markdown、代码高亮等）</li>
+        <li>修改 AI 的系统提示词和请求参数</li>
+        <li>在输入框上方添加快捷操作按钮</li>
+        <li>在游戏页面任意位置注入自定义 UI</li>
+        <li>创建弹窗、确认对话框等交互组件</li>
+        <li>注入自定义 CSS 样式</li>
+        <li>监听宿主 UI 事件（消息接收、主题切换等）</li>
+      </ul>
+      <h3 id="sub-plugin-types" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>插件类型</h3>
+      <table className="w-full text-xs" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>类型</th>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>说明</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>典型场景</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[
+            ['🎮 game-mechanics', '游戏机制', '骰子系统、属性追踪、战斗系统'],
+            ['🎨 message-render', '消息渲染', 'Markdown 解析、代码高亮、特殊格式'],
+            ['🤖 ai-prompt', 'AI Prompt', 'NPC 人格注入、规则修改、风格调整'],
+            ['⌨️ input-enhance', '输入增强', '快捷按钮、指令面板、自动补全'],
+          ].map(([type, label, scene]) => (
+            <tr key={type} style={{ borderBottom: `1px solid ${s.border}` }}>
+              <td className="py-2 pr-4"><code style={codeStyle}>{type}</code></td>
+              <td className="py-2 pr-4">{label}</td>
+              <td className="py-2"><NavLink sectionId="examples">{scene}</NavLink></td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <h3 id="sub-minimal-plugin" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>最简插件</h3>
+      <pre style={preStyle}>{CODE_OVERVIEW_MINIMAL}</pre>
+      <p>每个插件<strong>必须</strong>导出一个 <code style={codeStyle}>setup</code> 函数，它接收 <code style={codeStyle}>xinyu</code> 对象作为唯一参数，通过它访问所有 API。</p>
+    </div>
+  );
+}
+
+function ArchitectureSection() {
+  return (
+    <div>
+      <p>插件系统的架构分为四个层次：</p>
+      <div className="space-y-3 mt-3">
+        {[
+          { layer: '类型层', file: 'lib/plugin-types.ts', desc: '定义所有插件相关的 TypeScript 类型（PluginManifest、PluginBinding、UISlotId、UIPermission 等）' },
+          { layer: '运行时层', file: 'lib/plugin-runtime.ts', desc: '插件引擎核心，负责加载、执行、Hook 调度、错误隔离。通过 createXinyuBridge() 创建插件可用的 API 对象' },
+          { layer: '安全层', file: 'lib/plugin-security.ts + plugin-html-sanitizer.ts + plugin-dom-sandbox.ts', desc: '权限检查、HTML 净化、DOM 操作沙箱，确保插件不能执行危险操作' },
+          { layer: 'UI 层', file: 'components/ui/PluginProvider.tsx + PluginSlotRenderer.tsx', desc: 'React Context 桥接运行时与 UI，插槽渲染器、模态框渲染器、浮动层容器' },
+        ].map((item) => (
+          <div key={item.layer} className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-xs font-bold" style={{ color: s.accent }}>{item.layer}</span>
+              <code className="text-xs" style={{ color: s.textMuted, fontSize: '11px' }}>{item.file}</code>
+            </div>
+            <p className="text-xs" style={{ color: s.textSecondary }}>{item.desc}</p>
+          </div>
+        ))}
+      </div>
+      <h3 id="sub-code-exec" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>代码执行方式</h3>
+      <p>插件代码通过 <code style={codeStyle}>new Function(&apos;xinyu&apos;, code)</code> 执行，这是一种轻量级的沙箱机制。插件代码运行在独立的函数作用域中，无法直接访问外部变量。</p>
+      <pre style={preStyle}>{CODE_ARCHITECTURE_EXEC}</pre>
+      <h3 id="sub-dual-scope" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>双层作用域</h3>
+      <p>插件支持两种作用域的绑定：</p>
+      <ul className="list-disc pl-5 space-y-1">
+        <li><strong>全局作用域</strong>（global）：在所有游戏中生效</li>
+        <li><strong>世界作用域</strong>（world）：仅在指定游戏中生效，且可覆盖全局配置</li>
+      </ul>
+    </div>
+  );
+}
+
+function LifecycleSection() {
+  return (
+    <div>
+      <p>插件有以下生命周期钩子，通过 <code style={codeStyle}>xinyu.plugin.on(hook, handler)</code> 注册：</p>
+      <table className="w-full text-xs mt-3" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>钩子</th>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>触发时机</th>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>handler 参数</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>用途</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[
+            ['onLoad', '插件启用时', '(pluginId)', '初始化属性、注册指令、注入 UI'],
+            ['onPluginLoad', '任意插件加载完成时', '(pluginId)', '跨插件协作、检测依赖插件是否就绪'],
+            ['onUnload', '插件禁用时', '()', '清理资源（通常自动处理）'],
+            ['onGameInit', '游戏初始化（无聊天记录时）', '()', '设置初始属性、发送欢迎消息、加载依赖'],
+            ['onPluginBindingWorld', '插件被绑定到世界时', '(worldId)', '根据世界设定初始化插件状态'],
+            ['onConfigChange', '插件自身配置变更时', '(config)', '响应配置修改、更新内部状态'],
+            ['onGlobalConfigChange', '任意插件配置变更时', '(pluginId, config)', '跨插件协作、响应其他插件配置变化'],
+            ['onRenderMessage', '消息渲染前', '({ role, content })', '修改消息文本内容（链式管道）'],
+          ].map(([hook, timing, params, usage]) => (
+            <tr key={hook} style={{ borderBottom: `1px solid ${s.border}` }}>
+              <td className="py-2 pr-4"><code style={codeStyle}>{hook}</code></td>
+              <td className="py-2 pr-4">{timing}</td>
+              <td className="py-2 pr-4"><code style={{ ...codeStyle, color: 'var(--color-text-muted)', fontSize: '11px' }}>{params}</code></td>
+              <td className="py-2">{usage}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <h3 id="sub-lifecycle-example" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>使用示例</h3>
+      <pre style={preStyle}>{CODE_LIFECYCLE_EXAMPLE}</pre>
+      <div className="mt-6 p-4 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <h4 className="text-xs font-bold mb-2" style={{ color: s.accent }}>💡 onGameInit 钩子详解</h4>
+        <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+          <code style={codeStyle}>onGameInit</code> 在玩家进入游戏页面且当前会话没有任何聊天记录时触发，即游戏正式开始的时刻。整个游戏会话中只触发一次。
+        </p>
+        <ul className="list-disc pl-5 mt-2 space-y-1">
+          <li className="text-xs" style={{ color: s.textSecondary }}><strong>与 onLoad 的区别</strong>：onLoad 在插件加载时触发（每次页面刷新），onGameInit 仅在游戏刚开始时触发</li>
+          <li className="text-xs" style={{ color: s.textSecondary }}><strong>典型用途</strong>：设置初始游戏属性、发送欢迎消息、初始化游戏状态、加载依赖插件</li>
+        </ul>
+        <pre className="mt-3 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 游戏初始化示例
+function setup(xinyu) {
+  xinyu.plugin.on('onGameInit', function() {
+    // 设置初始属性
+    xinyu.game.registerAttribute({
+      key: 'hp', label: '生命值', type: 'number',
+      value: 100, min: 0, max: 100, icon: '❤️',
+      group: '基础属性'
+    });
+    xinyu.game.registerAttribute({
+      key: 'gold', label: '金币', type: 'number',
+      value: 50, min: 0, icon: '💰',
+      group: '基础属性'
+    });
+    // 发送欢迎消息
+    xinyu.chat.insertSystemMessage('🎮 游戏开始！你的冒险即将展开...');
+  });
+}`}
+        </pre>
+      </div>
+      <div className="mt-6 p-4 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <h4 className="text-xs font-bold mb-2" style={{ color: s.accent }}>💡 onConfigChange / onGlobalConfigChange 钩子</h4>
+        <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+          <code style={codeStyle}>onConfigChange</code> 在<strong>插件自身</strong>配置被修改时触发（仅通知自己）。如需监听其他插件的配置变更，使用 <code style={codeStyle}>onGlobalConfigChange</code>。
+        </p>
+        <ul className="list-disc pl-5 mt-2 space-y-1">
+          <li className="text-xs" style={{ color: s.textSecondary }}><strong>onConfigChange 参数</strong>：<code style={codeStyle}>{'(newConfig)'}</code> — 新的完整配置对象</li>
+          <li className="text-xs" style={{ color: s.textSecondary }}><strong>onGlobalConfigChange 参数</strong>：<code style={codeStyle}>{'(pluginId, newConfig)'}</code> — pluginId 为配置变更的插件 ID，newConfig 为新配置</li>
+          <li className="text-xs" style={{ color: s.textSecondary }}><strong>触发时机</strong>：配置变更后立即触发（同步），此时 <code style={codeStyle}>config.get()</code> 已返回新值</li>
+          <li className="text-xs" style={{ color: s.textSecondary }}><strong>典型用途</strong>：根据新配置更新内部缓存、重新初始化依赖配置的模块</li>
+          <li className="text-xs" style={{ color: s.textSecondary }}><strong>注意事项</strong>：不要在 handler 中调用 <code style={codeStyle}>config.set()</code> 修改自身配置，这会导致无限循环</li>
+        </ul>
+        <pre className="mt-3 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 监听自身配置变更
+function setup(xinyu) {
+  let cachedThreshold = xinyu.plugin.config.get().threshold;
+
+  xinyu.plugin.on('onConfigChange', function(newConfig) {
+    // 更新内部缓存
+    cachedThreshold = newConfig.threshold;
+    xinyu.ui.toast('配置已更新：阈值 = ' + newConfig.threshold, 'info');
+  });
+
+  // 监听任意插件的配置变更（跨插件协作场景）
+  xinyu.plugin.on('onGlobalConfigChange', function(pluginId, newConfig) {
+    console.log('插件 ' + pluginId + ' 的配置已变更', newConfig);
+  });
+}`}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+function GlobalApiSection() {
+  return (
+    <div>
+      <p><code style={codeStyle}>xinyu</code> 对象包含 6 个命名空间，每个命名空间提供不同领域的 API：</p>
+      <div className="space-y-3 mt-3">
+        {[
+          { ns: 'xinyu.game', desc: '游戏状态与属性管理', apis: 'getWorldSetting / setWorldSetting / getSessionId / getMessages / getState / setState / registerAttribute / setAttribute / getAttributes', link: 'plugin-storage' },
+          { ns: 'xinyu.chat', desc: '聊天与消息操作', apis: 'send / insertSystemMessage / insertNotice / injectChatStyle / removeChatStyle / getHistory / clearHistory / registerCommand / registerMessageRenderer / input.*', link: 'api-chat' },
+          { ns: 'xinyu.ui', desc: 'UI 创建与交互（全局 API 核心）', apis: 'registerSlot / updateSlot / unregisterSlot / showModal / confirm / dom.* / injectStyle / onHostEvent / toast / registerSidebarPanel / registerInputToolbarButton / registerMessageCard / closeModal / onAction / removeStyle / offHostEvent', link: 'api-ui' },
+          { ns: 'xinyu.ai', desc: 'AI 拦截与修改', apis: 'onPromptBuild / onBeforeSend / onAfterReceive / onRequestConfig / onBeforeComplete', link: 'ai-interception' },
+          { ns: 'xinyu.plugin', desc: '插件自身管理与跨插件通信', apis: 'getManifest / config.get / config.set / storage / on / off / callPlugin / loadDependency / isPluginAvailable / getPluginExports / getResource / getResourceUrl', link: 'cross-plugin' },
+          { ns: 'xinyu.utils', desc: '通用工具函数', apis: 'randomInt / rollDice / formatDate / debounce / throttle / eventBus', link: 'api-utils' },
+        ].map((item) => (
+          <div key={item.ns} className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+            <code className="text-xs font-bold" style={{ color: s.accent }}>{item.ns}</code>
+            <NavLink sectionId={item.link!} style={{ fontSize: '11px', marginLeft: '4px' }}>{item.desc}</NavLink>
+            <div className="mt-1 text-xs" style={{ color: s.textMuted, fontSize: '11px' }}>{item.apis}</div>
+          </div>
+        ))}
+      </div>
+      <h3 id="sub-common-api" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>所有插件通用 API</h3>
+      <p>以下 API 在所有类型的插件中都可用，无需额外权限声明：</p>
+      <ul className="list-disc pl-5 space-y-1">
+        <li><NavLink sectionId="plugin-storage">xinyu.plugin.storage</NavLink> — 插件独立存储（get/set/remove/keys，内存，刷新后重置）</li>
+        <li><NavLink sectionId="persistent-storage">xinyu.storage</NavLink> — 持久化存储（get/set/remove/keys，数据库，需 <code style={codeStyle}>storage:plugin</code> 权限）</li>
+        <li><NavLink sectionId="file-api">xinyu.file</NavLink> — 文件操作（read/write/remove/list，需 <code style={codeStyle}>file:read</code>/<code style={codeStyle}>file:write</code> 权限）</li>
+        <li><code style={codeStyle}>xinyu.plugin.on(hook, handler)</code> — 注册生命周期钩子</li>
+        <li><code style={codeStyle}>xinyu.plugin.off(hook, handler)</code> — 注销生命周期钩子</li>
+        <li><code style={codeStyle}>xinyu.utils.eventBus</code> — 插件间通信事件总线</li>
+        <li><code style={codeStyle}>xinyu.utils.rollDice(notation)</code> — 骰子表达式解析</li>
+        <li><code style={codeStyle}>xinyu.utils.randomInt(min, max)</code> — 随机整数</li>
+        <li><code style={codeStyle}>xinyu.utils.debounce(fn, ms)</code> — 防抖</li>
+        <li><code style={codeStyle}>xinyu.utils.throttle(fn, ms)</code> — 节流</li>
+        <li><code style={codeStyle}>xinyu.plugin.callPlugin(targetPluginId, method, ...args)</code> — 跨插件调用（需声明依赖）</li>
+        <li><code style={codeStyle}>xinyu.plugin.loadDependency(targetPluginId, options?)</code> — 运行时加载依赖（支持降级）</li>
+        <li><code style={codeStyle}>xinyu.plugin.isPluginAvailable(pluginId)</code> — 检查插件是否可用</li>
+        <li><code style={codeStyle}>xinyu.plugin.getPluginExports(pluginId)</code> — 获取插件的公开 API 列表</li>
+        <li><NavLink sectionId="sub-resource-api"><code style={codeStyle}>xinyu.plugin.getResource(path)</code></NavLink> — 获取插件资源文件内容（需 <code style={codeStyle}>file:read</code> 权限）</li>
+        <li><NavLink sectionId="sub-resource-api"><code style={codeStyle}>xinyu.plugin.getResourceUrl(path)</code></NavLink> — 获取插件资源文件 HTTP URL（需 <code style={codeStyle}>file:read</code> 权限）</li>
+      </ul>
+      <p className="mt-2">UI 相关 API（registerSlot、showModal、confirm、dom.*、injectStyle、onHostEvent）需要在插件的权限声明（<code style={codeStyle}>commonPermissions</code> / <code style={codeStyle}>exclusivePermissions</code>）中声明对应权限，详见 <NavLink sectionId="permissions">权限系统</NavLink>。</p>
+    </div>
+  );
+}
+
+// ==================== Chat API 详解 ====================
+
+function ChatApiSection() {
+  return (
+    <div>
+      <h3 id="sub-chat-send" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>send / insertSystemMessage</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.chat.send(content)</code> — 以用户身份发送一条消息到聊天窗口，触发 AI 回复。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.chat.insertSystemMessage(content)</code> — 插入一条系统消息（灰色提示），不触发 AI 回复。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 插入系统提示
+xinyu.chat.insertSystemMessage("🎲 骰子大师已加载，输入 /roll 掷骰");
+
+// 以用户身份发送消息
+await xinyu.chat.send("帮我生成一个随机 NPC");`}
+      </pre>
+
+      <h3 id="sub-chat-notice" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>insertNotice</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.chat.insertNotice(html)</code> — 插入一条通知消息到聊天区域。与 <code style={codeStyle}>insertSystemMessage</code> 的区别：
+      </p>
+      <ul className="list-disc list-inside space-y-1 mt-1 text-xs" style={{ color: s.textSecondary }}>
+        <li><strong>不发送给 AI</strong> — 通知消息在发送请求时自动过滤，不会消耗 token</li>
+        <li><strong>支持自定义 HTML</strong> — 可以传入任意 HTML 实现自定义样式</li>
+        <li><strong>自动持久化</strong> — 复用聊天记录存储机制，刷新页面后仍然存在</li>
+      </ul>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 纯文本通知
+xinyu.chat.insertNotice("🎲 骰子大师已加载，输入 /roll 掷骰");
+
+// 自定义样式通知
+xinyu.chat.insertNotice(
+  '<div style="background:linear-gradient(135deg,#667eea,#764ba2);' +
+  'color:#fff;padding:12px 20px;border-radius:12px;font-weight:bold">' +
+  '🎲 骰子大师已加载' +
+  '</div>'
+);`}
+      </pre>
+
+      <h3 id="sub-chat-style" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>injectChatStyle / removeChatStyle</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.chat.injectChatStyle(css)</code> — 向消息区域注入自定义 CSS 样式。需要 <code style={codeStyle}>style:inject</code> 权限。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        消息区域容器的 ID 为 <code style={codeStyle}>#xinyu-chat-window</code>，消息气泡使用 <code style={codeStyle}>.px-4.py-1.5</code> 等类名定位。返回 <code style={codeStyle}>styleId</code>，可通过 <code style={codeStyle}>removeChatStyle(styleId)</code> 移除。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 修改消息区域背景
+xinyu.chat.injectChatStyle(\`
+  #xinyu-chat-window {
+    background: linear-gradient(180deg, #0a0a1a 0%, #1a1a2e 100%) !important;
+  }
+\`);
+
+// 修改 AI 消息气泡样式
+xinyu.chat.injectChatStyle(\`
+  #xinyu-chat-window [style*="ai-bubble"] {
+    background: rgba(102, 126, 234, 0.15) !important;
+    border: 1px solid rgba(102, 126, 234, 0.3) !important;
+    border-radius: 16px !important;
+  }
+\`);`}
+      </pre>
+
+      <h3 id="sub-chat-command" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>registerCommand</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        注册快捷指令，用户在输入框输入 <code style={codeStyle}>/指令名 参数</code> 即可触发。
+      </p>
+      <div className="mt-2 p-3 rounded-lg text-xs" style={{ background: s.bgTertiary, border: `1px solid ${s.border}` }}>
+        <p className="font-bold mb-1" style={{ color: s.textPrimary }}>命令格式</p>
+        <ul className="list-disc list-inside space-y-1" style={{ color: s.textSecondary }}>
+          <li><code style={codeStyle}>{'/command args'}</code> — 精确匹配：仅匹配注册名与 command 完全一致的指令</li>
+          <li><code style={codeStyle}>{'/pluginId/command args'}</code> — 指定插件：通过插件 ID 前缀精确调用指定插件的命令，避免命名冲突</li>
+          <li>广播模式：当多个插件注册了同名命令时，系统会依次调用所有匹配的 handler，直到某个 handler 返回非 void 值为止</li>
+        </ul>
+        <p className="font-bold mt-3 mb-1" style={{ color: s.textPrimary }}>返回值语义</p>
+        <ul className="list-disc list-inside space-y-1" style={{ color: s.textSecondary }}>
+          <li><code style={codeStyle}>{'string'}</code> — 将返回值显示为用户消息，并阻止该输入继续发送给 AI</li>
+          <li><code style={codeStyle}>{'void / undefined'}</code> — 表示未匹配或无需处理，输入将继续作为普通消息发送</li>
+          <li><code style={codeStyle}>{`'handled'`}</code> — 静默处理：命令已被消费，不显示任何消息，也不继续发送</li>
+        </ul>
+      </div>
+      <table className="w-full mt-2 text-xs">
+        <thead><tr style={{ borderBottom: `1px solid ${s.border}` }}>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>参数</th>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>类型</th>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>说明</th>
+        </tr></thead>
+        <tbody>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>name</code></td>
+            <td className="py-1.5" style={{ color: s.textMuted }}>string</td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>指令名（不含 /）</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>description</code></td>
+            <td className="py-1.5" style={{ color: s.textMuted }}>string</td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>指令描述</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>icon</code></td>
+            <td className="py-1.5" style={{ color: s.textMuted }}>string?</td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>图标（可选）</td>
+          </tr>
+          <tr>
+            <td className="py-1.5"><code style={codeStyle}>handler</code></td>
+            <td className="py-1.5" style={{ color: s.textMuted }}>(args) =&gt; string | void | Promise&lt;string | void&gt;</td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>处理函数，返回值会显示为系统消息</td>
+          </tr>
+        </tbody>
+      </table>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`xinyu.chat.registerCommand({
+  name: 'roll',
+  description: '掷骰子',
+  icon: '🎲',
+  handler: function(args) {
+    var result = xinyu.utils.rollDice(args || '1d20');
+    return '🎲 掷骰结果: ' + result;
+  }
+});`}
+      </pre>
+
+      <h3 id="sub-chat-renderer" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>registerMessageRenderer</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.chat.registerMessageRenderer(matcher, renderer)</code> — 注册消息渲染器，可以自定义特定消息的显示方式（如将骰子结果渲染为卡片）。当 <code style={codeStyle}>matcher(msg)</code> 返回 <code style={codeStyle}>true</code> 时，使用 <code style={codeStyle}>renderer(msg)</code> 返回的 HTML 替代默认气泡渲染。多个渲染器按注册顺序匹配，第一个命中的生效。
+      </p>
+      <div className="mt-2 p-2 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <p className="text-xs font-bold mb-1" style={{ color: s.accent }}>renderer 返回值说明</p>
+        <ul className="text-xs space-y-0.5" style={{ color: s.textSecondary }}>
+          <li>返回<strong> HTML 字符串</strong>：替代默认气泡渲染（经过安全净化）</li>
+          <li>返回 <code style={codeStyle}>null</code>：<strong>跳过渲染</strong>，该消息不会显示在聊天区域</li>
+        </ul>
+      </div>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 示例 1：自定义渲染骰子结果
+xinyu.chat.registerMessageRenderer(
+  function(msg) {
+    return msg.role === 'assistant' && msg.content.indexOf('🎲') !== -1;
+  },
+  function(msg) {
+    return '<div style="padding:8px;background:var(--color-bg-tertiary);border-radius:8px">'
+      + msg.content + '</div>';
+  }
+);
+
+// 示例 2：跳过渲染（消息不显示）
+xinyu.chat.registerMessageRenderer(
+  function(msg) {
+    // 匹配以 [隐藏] 开头的消息
+    return msg.content.indexOf('[隐藏]') === 0;
+  },
+  function(msg) {
+    return null; // 跳过渲染，该消息不会显示
+  }
+);`}
+      </pre>
+      <p className="mt-2 text-xs" style={{ color: s.textMuted }}>
+        💡 <strong>注意</strong>：返回的 HTML 会经过安全净化，仅允许安全的标签和属性。多个渲染器按注册顺序匹配，第一个 <code style={codeStyle}>matcher</code> 返回 <code style={codeStyle}>true</code> 的渲染器生效，后续渲染器不再执行。
+      </p>
+
+      <h3 id="sub-chat-on-render-message" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>onRenderMessage（消息内容管道）</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.plugin.on('onRenderMessage', handler)</code> — 注册消息内容修改器。每条消息渲染前，所有已注册的 handler 按**注册顺序依次执行**，每个 handler 接收当前消息对象（含经前一个 handler 修改后的 content），返回修改后的 content 字符串。
+      </p>
+      <p className="mt-1 text-xs" style={{ color: s.textSecondary }}>
+        与 <code style={codeStyle}>registerMessageRenderer</code> 的区别：<code style={codeStyle}>registerMessageRenderer</code> 是**完全接管渲染**（返回 HTML 替代气泡），而 <code style={codeStyle}>onRenderMessage</code> 是**仅修改文本内容**（保留默认气泡样式）。多个插件可以通过 <code style={codeStyle}>onRenderMessage</code> 链式修改同一条消息。
+      </p>
+      <div className="mt-2 p-2 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <p className="text-xs font-bold mb-1" style={{ color: s.accent }}>返回值说明</p>
+        <ul className="text-xs space-y-0.5" style={{ color: s.textSecondary }}>
+          <li>返回<strong>字符串</strong>：修改消息内容，传递给下一个 handler 继续处理</li>
+          <li>返回 <code style={codeStyle}>null</code>：<strong>跳过渲染</strong>，该消息不会显示在聊天区域，管道立即终止</li>
+        </ul>
+      </div>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 示例 1：给所有 AI 消息添加前缀
+xinyu.plugin.on('onRenderMessage', function(msg) {
+  if (msg.role === 'assistant') {
+    return '🌍 ' + msg.content;
+  }
+  return msg.content;
+});
+
+// 示例 2：跳过渲染（消息不显示）
+xinyu.plugin.on('onRenderMessage', function(msg) {
+  // 过滤掉系统提示类消息
+  if (msg.content.indexOf('[系统提示]') === 0) {
+    return null; // 跳过渲染，该消息不会显示
+  }
+  return msg.content;
+});
+
+// 示例 3：链式修改（多个插件叠加）
+// 插件 A 先执行（添加前缀），插件 B 后执行（替换关键词）
+xinyu.plugin.on('onRenderMessage', function(msg) {
+  return msg.content.replace(/\\[\\[(.+?)\\]\\]/g,
+    '<span style="color:var(--color-accent);font-weight:bold">[$1]</span>');
+});`}
+      </pre>
+      <p className="mt-2 text-xs" style={{ color: s.textMuted }}>
+        💡 <strong>执行顺序</strong>：handler 按插件加载顺序执行（依赖拓扑排序后的顺序）。返回 <code style={codeStyle}>null</code> 时管道立即终止，后续 handler 不再执行。返回非字符串非 null 值时，该次修改会被跳过（content 保持不变）。
+      </p>
+    </div>
+  );
+}
+
+// ==================== 输入框 API 详解 ====================
+
+function InputApiSection() {
+  return (
+    <div>
+      <h3 id="sub-input-overview" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>概述</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.chat.input</code> 是输入框控制 API，允许插件读取和修改聊天输入框的内容、状态、样式，并监听输入相关事件。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        使用前需要在 manifest 中声明 <code style={codeStyle}>input:control</code> 权限：
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// manifest.json
+{
+  "permissions": {
+    "commonPermissions": ["input:control"]
+  }
+}`}
+      </pre>
+      <p className="mt-2 text-xs" style={{ color: s.textMuted }}>
+        所有方法在 textarea 不存在时静默返回（不会抛出异常），因此无需手动检查输入框是否存在。
+      </p>
+
+      <h3 id="sub-input-content" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>内容操作</h3>
+
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>getContent(): string | null</code> — 获取输入框当前文本内容。输入框为空时返回空字符串，textarea 不存在时返回 <code style={codeStyle}>null</code>。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>setContent(text: string): void</code> — 设置输入框的完整文本内容，会替换所有已有内容。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>appendContent(text: string): void</code> — 在光标位置追加文本，光标会移动到追加内容之后。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>clearContent(): void</code> — 清空输入框所有内容。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>insertAtCursor(text: string): void</code> — 在光标位置插入文本，与 <code style={codeStyle}>appendContent</code> 行为一致。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 获取当前输入内容
+var text = xinyu.chat.input.getContent();
+if (text) {
+  xinyu.ui.toast('当前输入: ' + text, 'info');
+}
+
+// 设置输入框内容
+xinyu.chat.input.setContent('/roll 2d6+3');
+
+// 在光标位置追加文本
+xinyu.chat.input.appendContent(' 攻击力检定');
+
+// 在光标位置插入文本
+xinyu.chat.input.insertAtCursor('[力量+2] ');
+
+// 清空输入框
+xinyu.chat.input.clearContent();`}
+      </pre>
+
+      <h3 id="sub-input-state" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>状态控制</h3>
+
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>setPlaceholder(text: string): void</code> — 设置输入框的占位符文本。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>setDisabled(disabled: boolean): void</code> — 启用或禁用输入框。禁用后用户无法编辑内容。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>focus(): void</code> — 聚焦输入框，将光标移入输入区域。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>blur(): void</code> — 使输入框失去焦点。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>setMaxLength(length: number): void</code> — 设置输入框的最大输入长度限制。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>getLength(): number</code> — 获取输入框当前内容的字符长度。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 设置占位符
+xinyu.chat.input.setPlaceholder('输入指令或消息...');
+
+// 禁用输入框（例如在 AI 回复期间）
+xinyu.chat.input.setDisabled(true);
+// 稍后恢复
+xinyu.chat.input.setDisabled(false);
+
+// 聚焦输入框
+xinyu.chat.input.focus();
+
+// 设置最大长度
+xinyu.chat.input.setMaxLength(500);
+
+// 获取当前内容长度
+var len = xinyu.chat.input.getLength();
+xinyu.ui.toast('已输入 ' + len + ' / 500 字符', 'info');`}
+      </pre>
+
+      <h3 id="sub-input-style" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>样式修改</h3>
+
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>setStyle(styles: Record&lt;string, string&gt;): void</code> — 直接设置输入框的内联样式。传入一个样式键值对对象，会合并到现有样式中。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>injectStyle(css: string): string</code> — 注入一段 CSS 规则到页面中，返回一个 <code style={codeStyle}>styleId</code> 用于后续移除。CSS 选择器应使用 <code style={codeStyle}>#xinyu-chat-input</code> 来定位输入框元素。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>removeStyle(styleId: string): void</code> — 根据 <code style={codeStyle}>styleId</code> 移除之前注入的 CSS 样式。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 设置内联样式
+xinyu.chat.input.setStyle({
+  fontSize: '16px',
+  fontWeight: 'bold',
+  color: '#ff6600'
+});
+
+// 注入 CSS 样式（返回 styleId）
+var styleId = xinyu.chat.input.injectStyle(\`
+  #xinyu-chat-input {
+    border: 2px solid #ff6600;
+    background-color: rgba(255, 102, 0, 0.05);
+    transition: border-color 0.3s;
+  }
+  #xinyu-chat-input:focus {
+    border-color: #ff9900;
+    box-shadow: 0 0 8px rgba(255, 102, 0, 0.3);
+  }
+\`);
+
+// 移除注入的样式
+xinyu.chat.input.removeStyle(styleId);`}
+      </pre>
+      <p className="mt-2 text-xs" style={{ color: s.textMuted }}>
+        💡 <strong>提示</strong>：样式注入的选择器是 <code style={codeStyle}>#xinyu-chat-input</code>，请确保使用该选择器来定位输入框元素。
+      </p>
+
+      <h3 id="sub-input-event" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>事件监听</h3>
+
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>onInput(handler: (value: string) =&gt; void): () =&gt; void</code> — 监听输入框内容变化，每次内容改变时触发回调，回调参数为当前输入框的完整文本。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>onSend(handler: (content: string) =&gt; void): () =&gt; void</code> — 监听发送事件，用户点击发送或按回车时触发，回调参数为发送的内容。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>onKeyDown(handler: (event) =&gt; void): () =&gt; void</code> — 监听按键事件，回调参数为原始键盘事件对象。
+      </p>
+      <p className="mt-2 text-xs" style={{ color: s.textMuted }}>
+        以上三个方法均返回一个取消监听的函数，调用该函数即可移除对应的事件监听器。多个插件可以同时注册监听器，互不干扰。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 监听输入变化
+var offInput = xinyu.chat.input.onInput(function(value) {
+  console.log('输入内容变化:', value);
+  // 可以根据输入内容动态更新 UI
+});
+
+// 监听发送事件
+var offSend = xinyu.chat.input.onSend(function(content) {
+  xinyu.ui.toast('用户发送了: ' + content, 'info');
+});
+
+// 监听按键事件（例如拦截特定快捷键）
+var offKey = xinyu.chat.input.onKeyDown(function(event) {
+  if (event.ctrlKey && event.key === 'Enter') {
+    event.preventDefault();
+    xinyu.ui.toast('Ctrl+Enter 被拦截', 'info');
+  }
+});
+
+// 需要时取消监听
+offInput();
+offSend();
+offKey();`}
+      </pre>
+
+      <h3 id="sub-input-cursor" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>光标与选区</h3>
+
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>getSelection(): &#123; start: number, end: number, text: string &#125; | null</code> — 获取当前选区信息。返回选区的起始位置、结束位置和选中的文本。如果没有选区（光标只是一个插入点），<code style={codeStyle}>start</code> 和 <code style={codeStyle}>end</code> 相等，<code style={codeStyle}>text</code> 为空字符串。textarea 不存在时返回 <code style={codeStyle}>null</code>。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>setSelection(start: number, end: number): void</code> — 设置选区范围。<code style={codeStyle}>start</code> 和 <code style={codeStyle}>end</code> 为字符索引（从 0 开始）。如果两者相等，则仅移动光标位置。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 获取当前选区
+var sel = xinyu.chat.input.getSelection();
+if (sel && sel.text) {
+  xinyu.ui.toast('选中了: ' + sel.text, 'info');
+}
+
+// 选中全部内容
+var content = xinyu.chat.input.getContent();
+if (content) {
+  xinyu.chat.input.setSelection(0, content.length);
+}
+
+// 将光标移动到末尾
+xinyu.chat.input.setSelection(content.length, content.length);
+
+// 选中前 5 个字符
+xinyu.chat.input.setSelection(0, 5);`}
+      </pre>
+    </div>
+  );
+}
+
+// ==================== Utils API 详解 ====================
+
+function UtilsApiSection() {
+  return (
+    <div>
+      <h3 id="sub-utils-random" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>randomInt / rollDice</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.utils.randomInt(min, max)</code> — 生成 [min, max] 范围内的随机整数（含两端）。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.utils.rollDice(notation)</code> — 解析骰子表达式并返回结果对象。支持标准骰子记号如 <code style={codeStyle}>1d20</code>、<code style={codeStyle}>2d6+3</code>、<code style={codeStyle}>4d8</code> 等。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`xinyu.utils.randomInt(1, 100);  // → 42
+
+xinyu.utils.rollDice("1d20");     // → { notation: "1d20", rolls: [15], modifier: 0, total: 15 }
+xinyu.utils.rollDice("2d6+3");    // → { notation: "2d6+3", rolls: [3, 3], modifier: 3, total: 9 }
+xinyu.utils.rollDice("4d8");      // → { notation: "4d8", rolls: [5, 7, 6, 5], modifier: 0, total: 23 }`}
+      </pre>
+
+      <h3 id="sub-utils-format" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>formatDate</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.utils.formatDate(date, format?)</code> — 格式化日期。支持 Date 对象或 ISO 字符串，format 默认为 <code style={codeStyle}>&quot;YYYY-MM-DD HH:mm:ss&quot;</code>。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`xinyu.utils.formatDate(new Date());
+// → "2026-04-27 15:30:00"
+
+xinyu.utils.formatDate("2026-01-15T08:00:00Z", "YYYY年MM月DD日");
+// → "2026年01月15日"`}
+      </pre>
+
+      <h3 id="sub-utils-debounce" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>debounce / throttle</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.utils.debounce(fn, ms)</code> — 防抖：在最后一次调用后等待 ms 毫秒再执行，期间的新调用会重置计时器。
+      </p>
+      <p className="text-xs leading-relaxed mt-1" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.utils.throttle(fn, ms)</code> — 节流：在 ms 毫秒内最多执行一次。
+      </p>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 防抖：用户停止输入 300ms 后再搜索
+var search = xinyu.utils.debounce(function(keyword) {
+  xinyu.chat.insertSystemMessage("搜索: " + keyword);
+}, 300);
+
+// 节流：滚动事件每 200ms 最多处理一次
+var onScroll = xinyu.utils.throttle(function() {
+  var pos = window.scrollY;
+  // 处理滚动...
+}, 200);`}
+      </pre>
+
+      <h3 id="sub-utils-eventbus" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>eventBus</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.utils.eventBus</code> — 插件间通信的事件总线，用于不同插件之间传递消息。
+      </p>
+      <table className="w-full mt-2 text-xs">
+        <thead><tr style={{ borderBottom: `1px solid ${s.border}` }}>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>方法</th>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>说明</th>
+        </tr></thead>
+        <tbody>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>on(event, handler)</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>监听事件</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>off(event, handler)</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>取消监听</td>
+          </tr>
+          <tr>
+            <td className="py-1.5"><code style={codeStyle}>emit(event, ...args)</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>触发事件</td>
+          </tr>
+        </tbody>
+      </table>
+      <pre className="mt-2 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 插件 A：监听事件
+xinyu.utils.eventBus.on("dice:rolled", function(result) {
+  xinyu.chat.insertSystemMessage("记录骰子: " + result);
+});
+
+// 插件 B：触发事件
+xinyu.utils.eventBus.emit("dice:rolled", "1d20 = 15");`}
+      </pre>
+      <p className="mt-2 text-xs" style={{ color: s.textMuted }}>
+        💡 <strong>建议</strong>：使用 <code style={codeStyle}>插件名:事件名</code> 的命名格式避免冲突，如 <code style={codeStyle}>&quot;dice:rolled&quot;</code>、<code style={codeStyle}>&quot;timer:tick&quot;</code>。
+      </p>
+    </div>
+  );
+}
+
+function UiApiSection() {
+  return (
+    <div>
+      <p><code style={codeStyle}>xinyu.ui</code> 是插件系统的全局 UI API，提供创建自定义界面的能力。</p>
+
+      <h3 id="sub-slot-inject" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>插槽注入</h3>
+      <p>在游戏页面的 <NavLink sectionId="slots">预定义插槽位置</NavLink>注入 HTML 内容：</p>
+      <pre style={preStyle}>{CODE_UI_SLOT}</pre>
+
+      <h3 id="sub-toolbar-button" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>工具栏按钮</h3>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.ui.registerInputToolbarButton(button)</code> — 在输入框工具栏中注册按钮。需要 <code style={codeStyle}>slot:input-toolbar</code> 权限。按钮渲染在 <code style={codeStyle}>input-toolbar</code> 插槽内，与 <code style={codeStyle}>registerSlot('input-toolbar', ...)</code> 的内容并列显示。
+      </p>
+      <pre className="mt-1 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 注册单个按钮
+xinyu.ui.registerInputToolbarButton({
+  id: 'my-button',       // 唯一 ID（同 ID 会更新而非重复）
+  label: '我的按钮',      // 按钮文本
+  icon: '🎯',             // 可选图标（emoji）
+  order: 10,              // 可选排序（越小越靠前，默认 100）
+  onClick: function() {
+    xinyu.ui.toast('点击了！', 'info');
+  }
+});
+
+// 同一插件可注册多个按钮，不会互相覆盖
+xinyu.ui.registerInputToolbarButton({
+  id: 'another-button',
+  label: '另一个',
+  icon: '📊',
+  order: 20,
+  onClick: function() { /* ... */ }
+});`}
+      </pre>
+      <div className="mt-1 p-2 rounded-lg text-xs" style={{ background: s.bgTertiary, border: `1px solid ${s.border}` }}>
+        <p style={{ color: s.accent }}>💡 提示：按钮内部使用 <code style={codeStyle}>data-action</code> + <code style={codeStyle}>onAction</code> 事件委托机制，点击事件会自动路由到对应插件。插件卸载时按钮自动清理。</p>
+      </div>
+
+      <h3 id="sub-modal-confirm" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>模态框与确认对话框</h3>
+      <pre style={preStyle}>{CODE_UI_MODAL}</pre>
+
+      <h3 id="sub-style-inject" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>样式注入</h3>
+      <p className="text-xs mb-2" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.ui.injectStyle(css)</code> — 向页面注入全局 CSS 样式，返回 <code style={codeStyle}>styleId</code>（字符串）。需要 <code style={codeStyle}>style:inject</code> 权限。
+      </p>
+      <p className="text-xs mb-2" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.ui.removeStyle(styleId)</code> — 移除之前注入的样式。插件卸载时所有注入的样式会自动清理，通常不需要手动调用。
+      </p>
+      <p>注入的 CSS 建议使用 <NavLink sectionId="css-variables">CSS 变量</NavLink>保持与主题一致：</p>
+      <pre style={preStyle}>{CODE_UI_STYLE}</pre>
+
+      <h3 id="sub-host-event" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>宿主事件监听</h3>
+      <p className="text-xs mb-2" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.ui.onHostEvent(eventName, handler)</code> — 监听宿主事件。需要 <code style={codeStyle}>event:host</code> 权限。返回值可用于 <code style={codeStyle}>offHostEvent</code> 取消监听。
+      </p>
+      <p className="text-xs mb-2" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.ui.offHostEvent(eventName, handler)</code> — 取消监听宿主事件。传入之前注册时使用的相同 <code style={codeStyle}>eventName</code> 和 <code style={codeStyle}>handler</code> 引用。
+      </p>
+      <pre style={preStyle}>{CODE_UI_HOST_EVENT}</pre>
+
+      <h3 id="sub-message-card" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>消息卡片注册</h3>
+      <p className="text-xs mb-2" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>xinyu.ui.registerMessageCard(matcher, render)</code> — 注册自定义消息卡片渲染器。当消息匹配 <code style={codeStyle}>matcher</code> 函数时，使用 <code style={codeStyle}>render</code> 函数返回的 HTML 替代默认消息气泡渲染。
+      </p>
+      <pre style={preStyle}>{`// 注册消息卡片：当消息包含 [card] 标签时使用自定义渲染
+xinyu.ui.registerMessageCard(
+  function(msg) {
+    return msg.content.indexOf('[card]') !== -1;
+  },
+  function(msg) {
+    var content = msg.content.replace(/\\[card\\]/g, '');
+    return '<div style="padding:12px;border-radius:8px;background:var(--color-bg-tertiary);border:1px solid var(--color-border)">' +
+      '<div style="font-weight:bold;color:var(--color-accent)">📋 自定义卡片</div>' +
+      '<div style="margin-top:8px">' + content + '</div>' +
+      '</div>';
+  }
+);`}</pre>
+    </div>
+  );
+}
+
+function DomSandboxSection() {
+  return (
+    <div>
+      <p>DOM 沙箱提供受限的 DOM 操作能力，允许插件在预定义的插槽容器内创建和管理元素。需要声明 <code style={codeStyle}>dom:free</code> 或 <code style={codeStyle}>dom:query</code> 权限。</p>
+
+      <h3 id="sub-dom-security" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>安全边界</h3>
+      <ul className="list-disc pl-5 space-y-1 text-xs" style={{ color: s.textSecondary }}>
+        <li><strong>只能操作插件自己创建的元素</strong> — <code style={codeStyle}>query</code> 和 <code style={codeStyle}>on</code> 等方法会检查 <code style={codeStyle}>data-plugin-id</code> 属性，确保插件无法访问其他插件的 DOM</li>
+        <li><strong>只能在预定义的插槽容器内追加元素</strong> — <code style={codeStyle}>append</code> 的第一个参数必须是有效的插槽 ID</li>
+        <li><strong>禁止创建 <code style={codeStyle}>&lt;script&gt;</code> 标签</strong> — HTML 会经过 sanitize 过滤</li>
+        <li><strong>禁止绑定键盘事件</strong> — <code style={codeStyle}>keydown</code>、<code style={codeStyle}>keyup</code>、<code style={codeStyle}>keypress</code> 被拦截</li>
+        <li><strong>禁止访问浏览器存储</strong> — 无法访问 <code style={codeStyle}>document.cookie</code>、<code style={codeStyle}>localStorage</code> 等</li>
+        <li><strong>插件卸载时自动清理</strong> — 所有创建的元素和事件监听器会被自动移除</li>
+      </ul>
+
+      <h3 id="sub-dom-slots" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>可用插槽 ID</h3>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        <code style={codeStyle}>append</code> 和 <code style={codeStyle}>query</code> 的第一个参数（<code style={codeStyle}>containerId</code>）必须是以下预定义的插槽 ID（具体的插槽位置见<NavLink sectionId="slots">预定义插槽位置</NavLink>）：
+      </p>
+      <div className="mt-2 grid grid-cols-2 gap-1 text-xs">
+        {[
+          ['header-left / center / right', '顶部导航栏'],
+          ['sidebar-left / right', '左右侧边栏'],
+          ['message-top / bottom', '消息区域上下方'],
+          ['input-toolbar / input-above', '输入框工具栏 / 正上方'],
+          ['status-bar', '底部状态栏'],
+          ['floating', '浮动层（fixed 定位，覆盖全屏）'],
+          ['overlay', '全屏遮罩层'],
+          ['modal', '模态框内容区（需先通过 showModal 打开）'],
+        ].map(([id, desc]) => (
+          <div key={id} className="flex gap-2">
+            <code className="shrink-0" style={{ color: s.accent }}>{id}</code>
+            <span style={{ color: s.textMuted }}>{desc}</span>
+          </div>
+        ))}
+      </div>
+
+      <h3 id="sub-dom-api" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>API 详解</h3>
+
+      <h4 className="text-xs font-bold mt-4 mb-1" style={{ color: s.textPrimary }}>create(tag, attrs?, children?)</h4>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        创建一个 DOM 元素代理。不会立即渲染到页面上，需要调用 <code style={codeStyle}>append</code> 插入到容器中。返回值是一个包含 <code style={codeStyle}>__proxyId</code> 的代理对象，后续操作（update、remove、on）都通过此 ID 引用。
+      </p>
+      <pre className="mt-1 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 创建元素（不立即渲染）
+var el = xinyu.ui.dom.create('div', {
+  id: 'my-panel',
+  className: 'my-panel',
+  style: 'position:absolute;top:10px;right:10px;padding:8px;'
+}, 'Hello World');
+
+// 也可以不传 children
+var btn = xinyu.ui.dom.create('button', {
+  className: 'my-btn',
+  style: 'background:#667eea;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;'
+}, '点击我');`}
+      </pre>
+
+      <h4 className="text-xs font-bold mt-4 mb-1" style={{ color: s.textPrimary }}>append(containerId, element)</h4>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        将元素插入到指定插槽容器中。支持两种模式：传入 <code style={codeStyle}>create</code> 返回的代理对象，或直接传入 HTML 字符串。返回插入的元素 ID，可用于后续操作。
+      </p>
+      <pre className="mt-1 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 方式 1：追加代理元素
+var el = xinyu.ui.dom.create('div', { className: 'my-panel' }, 'Hello');
+xinyu.ui.dom.append('floating', el);
+console.log(el.__proxyId); // 元素 ID，如 "plugin_123_proxy_0"
+
+// 方式 2：直接追加 HTML 字符串
+var id = xinyu.ui.dom.append('floating', '<div class="my-panel">Hello</div>');
+console.log(id); // 自动生成的 ID，如 "my-plugin_html_1714356789000"`}
+      </pre>
+
+      <h4 className="text-xs font-bold mt-4 mb-1" style={{ color: s.textPrimary }}>update(elementId, props)</h4>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        更新元素属性。支持的属性：{`{ style, className, textContent, innerHTML, 以及其他标准 HTML 属性 }`}。
+      </p>
+      <pre className="mt-1 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`var el = xinyu.ui.dom.create('div', { id: 'counter' }, '0');
+xinyu.ui.dom.append('status-bar', el);
+
+// 更新文本内容
+xinyu.ui.dom.update(el.__proxyId, { textContent: '42' });
+
+// 更新样式
+xinyu.ui.dom.update(el.__proxyId, {
+  style: 'color:red;font-weight:bold;'
+});
+
+// 更新 HTML 内容（会经过 sanitize 过滤）
+xinyu.ui.dom.update(el.__proxyId, {
+  innerHTML: '<strong style="color:green">已更新</strong>'
+});`}
+      </pre>
+
+      <h4 className="text-xs font-bold mt-4 mb-1" style={{ color: s.textPrimary }}>query(containerId, selector)</h4>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        在指定插槽容器内查询元素。<strong>仅返回插件自己创建的元素</strong>（通过 <code style={codeStyle}>data-plugin-id</code> 属性过滤）。返回数组，每项包含 <code style={codeStyle}>{'{ id, tag, textContent }'}</code>。
+      </p>
+      <div className="mt-1 p-2 rounded-lg text-xs" style={{ background: s.bgTertiary, border: `1px solid ${s.border}` }}>
+        <p style={{ color: s.accent }}>⚠️ 注意：query 只能查到插件自己拥有（通过 <code style={codeStyle}>data-plugin-id</code> 标记）的元素。支持查询插槽容器和模态框内的元素。</p>
+      </div>
+      <pre className="mt-1 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// 先插入元素
+xinyu.ui.dom.append('floating', '<div class="item" id="item-1">第一项</div>');
+xinyu.ui.dom.append('floating', '<div class="item" id="item-2">第二项</div>');
+
+// 查询所有 .item 元素
+var items = xinyu.ui.dom.query('floating', '.item');
+console.log(items);
+// [{ id: 'item-1', tag: 'div', textContent: '第一项' },
+//  { id: 'item-2', tag: 'div', textContent: '第二项' }]
+
+// 通过 ID 查询
+var item = xinyu.ui.dom.query('floating', '#item-1');
+
+// 查询模态框内的元素（containerId 传 'modal'）
+var modalItems = xinyu.ui.dom.query('modal', '#slot-list-container > div');
+var checkbox = xinyu.ui.dom.query('modal', '[data-payload="status-bar"]');`}
+      </pre>
+
+      <h4 className="text-xs font-bold mt-4 mb-1" style={{ color: s.textPrimary }}>on(elementId, event, handler) / off(elementId, event)</h4>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        绑定/解绑事件。<strong>禁止绑定键盘事件</strong>（keydown/keyup/keypress）。handler 中的 <code style={codeStyle}>this</code> 不指向 DOM 元素，如需访问事件对象，请使用 <code style={codeStyle}>registerSlot</code> + <code style={codeStyle}>data-action</code> + <code style={codeStyle}>onAction</code> 模式。
+      </p>
+      <pre className="mt-1 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`var el = xinyu.ui.dom.create('button', { className: 'my-btn' }, '点击');
+xinyu.ui.dom.append('floating', el);
+
+// 绑定点击事件
+xinyu.ui.dom.on(el.__proxyId, 'click', function() {
+  xinyu.ui.toast('被点击了！', 'info');
+});
+
+// 解绑事件
+xinyu.ui.dom.off(el.__proxyId, 'click');`}
+      </pre>
+
+      <h4 className="text-xs font-bold mt-4 mb-1" style={{ color: s.textPrimary }}>remove(elementId)</h4>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        从 DOM 中移除插件创建的元素。只能移除自己创建的元素。
+      </p>
+      <pre className="mt-1 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`var el = xinyu.ui.dom.create('div', { id: 'temp' }, '临时内容');
+var id = xinyu.ui.dom.append('floating', el);
+
+// 3 秒后移除
+setTimeout(function() {
+  xinyu.ui.dom.remove(id);
+}, 3000);`}
+      </pre>
+
+      <h4 className="text-xs font-bold mt-4 mb-1" style={{ color: s.textPrimary }}>getContainer(containerId)</h4>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        获取容器信息（不返回 DOM 引用）。返回 <code style={codeStyle}>{'{ id, exists, childCount }'}</code> 或 <code style={codeStyle}>null</code>。
+      </p>
+      <pre className="mt-1 p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`var info = xinyu.ui.dom.getContainer('floating');
+if (info && info.exists) {
+  console.log('容器内子元素数量:', info.childCount);
+}`}
+      </pre>
+
+      <h3 id="sub-dom-permission" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>权限说明</h3>
+      <table className="w-full text-xs mt-2" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>权限</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>允许的操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-2 pr-4"><code style={codeStyle}>dom:free</code></td>
+            <td className="py-2"><code style={codeStyle}>create、append、update、remove、query、on、off、getContainer</code> — 全部 DOM 操作</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-2 pr-4"><code style={codeStyle}>dom:query</code></td>
+            <td className="py-2">仅 <code style={codeStyle}>query</code> 和 <code style={codeStyle}>getContainer</code> — 只读查询，不能创建或修改 DOM</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3 id="sub-dom-vs-slot" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>DOM 沙箱 vs registerSlot</h3>
+      <p className="text-xs" style={{ color: s.textSecondary }}>
+        两种方式都可以向插槽注入内容，适用场景不同：
+      </p>
+      <table className="w-full text-xs mt-2" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>特性</th>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>Slot</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>DOM</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-2 pr-4">内容更新</td>
+            <td className="py-2 pr-4">调用 <code style={codeStyle}>updateSlot</code> 整体替换</td>
+            <td className="py-2">调用 <code style={codeStyle}>update</code> 精确修改属性</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-2 pr-4">事件绑定</td>
+            <td className="py-2 pr-4">通过 <code style={codeStyle}>data-action</code> + <code style={codeStyle}>onAction</code></td>
+            <td className="py-2">通过 <code style={codeStyle}>dom.on</code></td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-2 pr-4">动态增删</td>
+            <td className="py-2 pr-4">需要重新注册/注销</td>
+            <td className="py-2">支持随时 append/remove</td>
+          </tr>
+          <tr>
+            <td className="py-2 pr-4">适用场景</td>
+            <td className="py-2 pr-4">静态 UI、工具栏按钮、面板</td>
+            <td className="py-2">动态列表、计数器、临时提示</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function PermissionsSection() {
+  return (
+    <div>
+      <p>UI API 采用三层权限声明机制，插件需要在 manifest 中声明需要的权限。权限分为三种类型：</p>
+
+      <h3 id="sub-perm-overview" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>三层权限体系</h3>
+      <div className="space-y-3 mt-2">
+        {[
+          {
+            type: 'commonPermissions（共享权限）',
+            desc: '可被多个插件同时声明，不会产生冲突。大多数权限属于此类。',
+            detail: '例如 slot:*、style:inject、modal:*、dom:*、event:* 等'
+          },
+          {
+            type: 'exclusivePermissions（排他权限）',
+            desc: '同时只能被一个插件声明。如果多个插件声明了相同的排他权限，后加载的插件启动失败。',
+            detail: '例如 slot:style:* 系列权限，用于独占某个插槽的样式'
+          },
+          {
+            type: 'requiredPermissions（必要权限）',
+            desc: '没有此权限则插件不允许启动。必须在 commonPermissions 或 exclusivePermissions 中声明过的权限才能出现在这里。',
+            detail: '用于声明插件运行所必需的核心权限，缺失时插件将被禁用'
+          },
+        ].map((item) => (
+          <div key={item.type} className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+            <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>{item.type}</div>
+            <p className="text-xs" style={{ color: s.textSecondary }}>{item.desc}</p>
+            <p className="text-xs mt-1" style={{ color: s.textMuted }}>{item.detail}</p>
+          </div>
+        ))}
+      </div>
+
+      <h3 id="sub-perm-list" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>权限列表</h3>
+      <table className="w-full text-xs mt-2" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>权限</th>
+            <th className="text-center py-2 pr-4" style={{ color: s.textPrimary }}>推荐声明类型</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>说明</th>
+          </tr>
+        </thead>
+        <tbody>
+            {([
+              ['slot:header-left / center / right', '共享', <NavLink key="s1" sectionId="slots">顶部导航栏三个区域</NavLink>],
+              ['slot:sidebar-left / right', '共享', <NavLink key="s2" sectionId="slots">左右侧边栏</NavLink>],
+              ['slot:message-top / bottom', '共享', <NavLink key="s3" sectionId="slots">消息区域上下方</NavLink>],
+              ['slot:input-toolbar / input-above', '共享', <NavLink key="s4" sectionId="slots">输入框工具栏 / 正上方</NavLink>],
+              ['slot:status-bar', '共享', <NavLink key="s5" sectionId="slots">底部状态栏</NavLink>],
+              ['slot:floating', '共享', <NavLink key="s6" sectionId="slots">浮动层（fixed 定位）</NavLink>],
+              ['slot:overlay', '共享', <NavLink key="s7" sectionId="slots">全屏遮罩层</NavLink>],
+              ['slot:style:*', '排他', '独占指定插槽的样式，例如 slot:style:status-bar 表示独占状态栏样式'],
+              ['dom:free', '共享', <NavLink key="d1" sectionId="api-dom">自由 DOM 操作权限</NavLink>],
+              ['dom:query', '共享', <NavLink key="d2" sectionId="api-dom">DOM 查询权限</NavLink>],
+              ['style:inject', '共享', <NavLink key="st" sectionId="css-variables">CSS 样式注入权限</NavLink>],
+              ['modal:confirm', '共享', <NavLink key="mc1" sectionId="api-ui">确认对话框权限</NavLink>],
+              ['modal:custom', '共享', <NavLink key="mc" sectionId="api-ui">自定义模态框权限</NavLink>],
+              ['event:host', '共享', <NavLink key="eh" sectionId="api-ui">宿主事件监听权限</NavLink>],
+              ['input:control', '共享', <NavLink key="ic" sectionId="api-input">输入框控制权限（控制输入框内容、样式、状态、事件监听）</NavLink>],
+              ['storage:plugin', '共享', <NavLink key="sp" sectionId="persistent-storage">持久化存储权限（数据库 key-value 读写）</NavLink>],
+              ['file:read', '共享', <NavLink key="fr" sectionId="file-api">文件读取权限（读取插件私有目录文件）</NavLink>],
+              ['file:write', '共享', <NavLink key="fw" sectionId="file-api">文件写入权限（写入/删除插件私有目录文件）</NavLink>],
+              ['game:info:read', '共享', <NavLink key="gi" sectionId="sub-game-info">游戏信息读取权限（世界设定、会话ID、消息列表、游戏属性）</NavLink>],
+              ['game:info:write', '共享', <NavLink key="giw" sectionId="sub-game-info">游戏信息写入权限（修改世界设定，实时生效并持久化）</NavLink>],
+            ] as [string, string, React.ReactNode][]).map(([perm, permType, desc]) => (
+            <tr key={perm} style={{ borderBottom: `1px solid ${s.border}` }}>
+              <td className="py-2 pr-4"><code style={codeStyle}>{perm}</code></td>
+              <td className="py-2 pr-4 text-center" style={{ color: permType === '排他' ? '#f97316' : s.textMuted }}>{permType}</td>
+              <td className="py-2">{desc}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <h3 id="sub-perm-default" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>默认权限</h3>
+      <p>如果插件未声明任何权限，默认拥有以下共享权限：</p>
+      <pre style={preStyle}>{CODE_PERMS_DEFAULT}</pre>
+
+      <h3 id="sub-perm-editor" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>编辑器中声明权限</h3>
+
+      <h4 className="text-xs font-bold mt-4 mb-2" style={{ color: s.accent }}>方式 1：编辑器中勾选（推荐）</h4>
+      <p>在插件创建/编辑页面的「权限声明」区域勾选所需权限，并选择权限类型（共享/排他/必要）。也可以在代码中使用 <code style={codeStyle}>{'// @permission xxxx'}</code> 注释声明，保存时自动解析。</p>
+
+      <h4 className="text-xs font-bold mt-4 mb-2" style={{ color: s.accent }}>方式 2：代码注释声明</h4>
+      <p>在插件代码顶部使用 <code style={codeStyle}>{'// @key value'}</code> 注释声明 manifest 信息，然后在基础信息区域点击「从代码解析」自动填充：</p>
+      <pre style={preStyle}>{[
+        '// @plugin-id zhangsan.dice-master',
+        '// @name 骰子大师',
+        '// @version 1.0.0',
+        '// @author 张三',
+        '// @icon 🎲',
+        '// @type game-mechanics',
+        '// @description 一个简单的骰子投掷插件',
+        '// @permission slot:input-toolbar',
+        '// @permission style:inject',
+        '// 也可以一行声明多个权限，用逗号分隔',
+        '// @permission slot:status-bar, modal:confirm',
+        '',
+        '// 声明配置项（单个）',
+        '// @config {"key":"defaultSides","label":"默认面数","type":"number","defaultValue":20,"description":"骰子的默认面数"}',
+        '// 声明配置项（批量）',
+        '// @configs [',
+        '//   {"key":"autoRoll","label":"自动投掷","type":"boolean","defaultValue":false},',
+        '//   {"key":"theme","label":"结果样式","type":"select","defaultValue":"default","options":[{"label":"默认","value":"default"},{"label":"简约","value":"minimal"}]}',
+        '// ]',
+        '',
+        'function setup(xinyu) {',
+        "  xinyu.ui.registerSlot('status-bar', '<div>状态信息</div>');",
+        '}',
+      ].join('\n')}</pre>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>支持的注释标签</div>
+        <table className="w-full text-xs mt-1" style={{ borderCollapse: 'collapse' }}>
+          <thead>
+            <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+              <th className="text-left py-1 pr-3" style={{ color: s.textPrimary }}>标签</th>
+              <th className="text-left py-1 pr-3" style={{ color: s.textPrimary }}>对应字段</th>
+              <th className="text-left py-1" style={{ color: s.textPrimary }}>说明</th>
+            </tr>
+          </thead>
+          <tbody>
+            {[
+              ['@plugin-id', 'id', '插件唯一标识（建议格式 author.plugin-name），解析时自动检查是否重复'],
+              ['@name', 'name', '插件名称'],
+              ['@version', 'version', '版本号'],
+              ['@author', 'author', '作者'],
+              ['@icon', 'icon', '图标（emoji）'],
+              ['@type', 'type', '插件类型（如 game-mechanics）'],
+              ['@description', 'description', '插件描述'],
+              ['@permission', 'commonPermissions', '共享权限（支持逗号分隔多个），解析的权限默认映射到 commonPermissions'],
+              ['@exclusive', 'exclusivePermissions', '排他权限（支持逗号分隔多个）'],
+              ['@required', 'requiredPermissions', '必要权限（支持逗号分隔多个），必须在共享或排他权限中声明过'],
+              ['@config', 'configSchema', '单个配置项（JSON 对象）'],
+              ['@configs', 'configSchema', '批量配置项（JSON 数组）'],
+            ].map(([tag, field, desc]) => (
+              <tr key={tag} style={{ borderBottom: `1px solid ${s.border}` }}>
+                <td className="py-1 pr-3"><code style={codeStyle}>{tag}</code></td>
+                <td className="py-1 pr-3"><code style={{ ...codeStyle, color: 'var(--color-text-muted)' }}>{field}</code></td>
+                <td className="py-1">{desc}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <p className="mt-2 text-xs" style={{ color: s.textMuted }}>💡 注释只需写在代码顶部即可，点击「从代码解析」按钮会自动识别并填充到对应字段。保存插件时也会自动执行解析，代码注释中的值优先于表单手动填写的值。</p>
+
+      <h3 id="sub-perm-conflict" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>权限冲突</h3>
+      <p>当多个插件声明了相互冲突的权限时，系统会进行冲突检测。冲突规则如下：</p>
+      <ul className="list-disc pl-5 space-y-2 mt-2">
+        <li><strong>排他权限冲突</strong>：如果一个插件声明了某个排他权限（如 <code style={codeStyle}>slot:style:status-bar</code>），而另一个已加载的插件已经声明了相同的排他权限，则产生冲突。</li>
+        <li><strong>共享/排他交叉冲突</strong>：如果一个插件声明了某个共享权限，但该权限已被另一个插件作为排他权限声明，也会产生冲突。</li>
+        <li><strong>必要权限缺失</strong>：如果插件在 <code style={codeStyle}>requiredPermissions</code> 中声明了某个权限，但该权限未在 <code style={codeStyle}>commonPermissions</code> 或 <code style={codeStyle}>exclusivePermissions</code> 中声明，则该必要权限被视为缺失，插件不允许启动。</li>
+      </ul>
+      <div className="p-3 rounded-lg mt-3 mb-3" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-2" style={{ color: s.accent }}>冲突处理流程</div>
+        <ol className="list-decimal pl-5 space-y-1 text-xs" style={{ color: s.textSecondary }}>
+          <li>插件加载时，系统检查其声明的所有权限是否与已加载的插件产生冲突</li>
+          <li>如果检测到冲突，后加载的插件启动失败，弹出冲突弹窗</li>
+          <li>用户可以在弹窗中选择以下操作：
+            <ul className="list-disc pl-5 mt-1 space-y-1">
+              <li><strong>取消冲突权限</strong>：自动从插件中移除产生冲突的权限，插件以降级模式启动</li>
+              <li><strong>禁用插件</strong>：完全禁用该插件，不加载其代码</li>
+            </ul>
+          </li>
+        </ol>
+      </div>
+      <pre style={preStyle}>{[
+        '// 示例：排他权限冲突',
+        '// 插件 A 已声明 slot:style:status-bar（排他权限）',
+        '//',
+        '// 插件 B 尝试声明相同的排他权限：',
+        '// @exclusive slot:style:status-bar',
+        '//',
+        '// 结果：插件 B 启动时检测到冲突，弹出冲突弹窗',
+        '// 用户可选择「取消冲突权限」或「禁用插件」',
+      ].join('\n')}</pre>
+    </div>
+  );
+}
+
+function SlotsSection() {
+  return (
+    <div>
+      <p>游戏页面提供了 12 个预定义的 UI 插槽位置，插件可以通过 <code style={codeStyle}>xinyu.ui.registerSlot()</code> 在这些位置注入内容。</p>
+
+      <h3 id="sub-slot-diagram" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>插槽位置示意图</h3>
+      <pre style={{ ...preStyle, fontSize: '11px' }}>{CODE_SLOTS_DIAGRAM}</pre>
+
+      <h3 id="sub-slot-priority" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>优先级</h3>
+      <p>多个插件可以在同一插槽注册内容，通过 <code style={codeStyle}>priority</code> 控制排序（数值越小越靠前，默认 100）：</p>
+      <pre style={preStyle}>{CODE_SLOTS_PRIORITY}</pre>
+
+      <h3 id="sub-slot-update" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>更新与覆盖</h3>
+      <p>同一插件对同一插槽多次调用 <code style={codeStyle}>registerSlot</code> 会<strong>覆盖</strong>旧内容（保持注册 ID 不变），UI 自动刷新。也可以使用语义化的 <code style={codeStyle}>updateSlot</code> 通过 registrationId 更新：</p>
+      <pre style={preStyle}>{[
+        "var regId = xinyu.ui.registerSlot('status-bar', '<div>初始内容</div>');",
+        '',
+        '// 方式 1：再次 registerSlot（同 pluginId + slotId 自动覆盖）',
+        "xinyu.ui.registerSlot('status-bar', '<div>更新后的内容</div>');",
+        '',
+        '// 方式 2：使用 updateSlot（通过 registrationId 精确更新，语义更清晰）',
+        "xinyu.ui.updateSlot(regId, '<div>更新后的内容</div>');",
+        '',
+        '// 如果需要完全移除，使用返回的 registrationId',
+        'xinyu.ui.unregisterSlot(regId);',
+      ].join('\n')}</pre>
+
+      <h3 id="sub-slot-key" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>key 参数与精确注销</h3>
+      <p>当同一插件需要在<strong>同一插槽</strong>中注册多块独立内容时，必须使用 <code style={codeStyle}>key</code> 参数区分它们。不传 key 时，同一插件在同一插槽只能有一个注册（后注册覆盖先注册）。</p>
+      <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid var(--color-border, rgba(255,255,255,0.1))', borderRadius: '8px', padding: '12px', marginBottom: '12px' }}>
+        <p style={{ margin: '0 0 8px 0', fontSize: '13px' }}><strong>⚠️ registrationId 格式规则</strong></p>
+        <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '12px', lineHeight: '1.8' }}>
+          <li>不传 key：<code style={codeStyle}>{'{pluginId}_slot_{timestamp}'}</code>（每次注册生成新 ID）</li>
+          <li>传 key：<code style={codeStyle}>{'{pluginId}_key_{key}'}</code>（固定 ID，用于精确更新/注销）</li>
+          <li><strong>插件不知道自己的 pluginId</strong>，所以注销时必须使用 <code style={codeStyle}>registerSlot</code> 的返回值</li>
+        </ul>
+      </div>
+      <pre style={preStyle}>{[
+        '// 使用 key 注册（推荐用于需要独立控制的插槽内容）',
+        "var slotId = xinyu.ui.registerSlot('input-above',",
+        "  '<div>选项按钮</div>',",
+        "  { priority: 10, key: 'my-choices' }  // key 用于区分同一插槽中的多块内容",
+        ');',
+        '',
+        '// 更新内容（通过返回的 registrationId）',
+        "xinyu.ui.updateSlot(slotId, '<div>更新后的选项</div>');",
+        '',
+        '// 注销（通过返回的 registrationId）',
+        'xinyu.ui.unregisterSlot(slotId);',
+        '',
+        '// 错误写法：unregisterSlot 不接受 (slotId, key) 两个参数',
+        "// xinyu.ui.unregisterSlot('input-above', 'my-choices');  // 不会生效！",
+        '',
+        '// 正确写法：保存 registerSlot 的返回值，用返回值注销',
+        "var id = xinyu.ui.registerSlot('input-above', html, { key: 'my-choices' });",
+        '// ... 后续需要移除时：',
+        'xinyu.ui.unregisterSlot(id);',
+      ].join('\n')}</pre>
+
+      <h3 id="sub-slot-action" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>插槽中的交互事件</h3>
+      <p>由于安全原因，HTML 净化器会移除所有 <code style={codeStyle}>onclick</code> 等内联事件属性。插件应使用 <code style={codeStyle}>data-action</code> 属性 + <code style={codeStyle}>xinyu.ui.onAction</code> 来绑定交互：</p>
+      <pre style={preStyle}>{[
+        '// 1. 注册 action 回调',
+        "xinyu.ui.onAction('openSettings', function(e) {",
+        "  // e.target: 触发事件的 DOM 元素",
+        "  // e.actionName: 'openSettings'",
+        "  // e.payload: data-action-payload 属性值（可选）",
+        "  xinyu.ui.showModal({",
+        "    title: '设置',",
+        "    content: '<p>配置项...</p>',",
+        "    actions: [",
+        "      { text: '保存', primary: true, onClick: function(ctx) { ctx.close(); } }",
+        "    ]",
+        "  });",
+        "});",
+        '',
+        '// 2. 在 HTML 中使用 data-action（不会被净化器移除）',
+        "xinyu.ui.registerSlot('input-toolbar',",
+        "  '<button data-action=\"openSettings\">⚙ 设置</button>' +",
+        "  '<button data-action=\"roll\" data-payload=\"d20\">🎲 投骰</button>'",
+        ");",
+        '',
+        '// 3. 携带 payload 的 action',
+        "xinyu.ui.onAction('roll', function(e) {",
+        "  var diceType = e.payload; // 'd20'",
+        "  var result = Math.floor(Math.random() * 20) + 1;",
+        "  xinyu.ui.toast('投出了 ' + result + '（' + diceType + '）');",
+        "});",
+      ].join('\n')}</pre>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>事件委托机制</div>
+        <ul className="list-disc pl-5 text-xs space-y-1">
+          <li><code style={codeStyle}>{'data-action="name"'}</code> — 声明动作名称</li>
+          <li><code style={codeStyle}>{'data-payload="value"'}</code> — 可选，传递额外数据</li>
+          <li>系统通过事件委托自动分发点击事件到对应插件</li>
+          <li>支持事件冒泡：子元素的 <code style={codeStyle}>data-action</code> 会冒泡到容器被捕获</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+// ==================== 新增章节内容 ====================
+
+function CssVariablesSection() {
+  return (
+    <div>
+      <p>星语提供了完整的 CSS 变量系统，确保插件在不同主题下都能正常显示。所有插件<strong>必须</strong>使用 CSS 变量来引用颜色、字体和圆角，禁止硬编码颜色值。</p>
+
+      <h3 id="sub-css-var-list" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>完整的 CSS 变量列表</h3>
+      <p>星语定义了 15 个 CSS 变量，分为颜色类（12 个）、字体类（2 个）和布局类（1 个）。</p>
+
+      <h4 className="text-xs font-bold mt-4 mb-2" style={{ color: s.accent }}>颜色类变量（12 个）</h4>
+      <table className="w-full text-xs" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>变量名</th>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>用途</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>默认值（暗夜紫主题）</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[
+            ['--color-bg-primary', '主背景色（页面底色）', '#0f0a1a'],
+            ['--color-bg-secondary', '次级背景色（卡片/面板背景）', '#1a1128'],
+            ['--color-bg-tertiary', '三级背景色（hover 态、输入框背景）', '#2a1f3d'],
+            ['--color-text-primary', '主文字色（标题、正文）', '#e8e0f0'],
+            ['--color-text-secondary', '次级文字色（描述、标签）', '#a89bc2'],
+            ['--color-text-muted', '弱化文字色（提示、占位符）', '#6b5f85'],
+            ['--color-accent', '强调色（按钮、链接、高亮）', '#d4a843'],
+            ['--color-accent-hover', '强调色悬停态', '#e6bc5a'],
+            ['--color-border', '边框色', '#2a1f3d'],
+            ['--color-shadow', '阴影色', 'rgba(0, 0, 0, 0.5)'],
+            ['--color-user-bubble', '用户消息气泡色', '#2a1f3d'],
+            ['--color-ai-bubble', 'AI 消息气泡色', '#1a1128'],
+          ].map(([name, usage, defaultVal]) => (
+            <tr key={name} style={{ borderBottom: `1px solid ${s.border}` }}>
+              <td className="py-2 pr-3"><code style={codeStyle}>{name}</code></td>
+              <td className="py-2 pr-3">{usage}</td>
+              <td className="py-2"><code style={{ ...codeStyle, color: 'var(--color-text-muted)' }}>{defaultVal}</code></td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <h4 className="text-xs font-bold mt-4 mb-2" style={{ color: s.accent }}>字体类变量（2 个）</h4>
+      <table className="w-full text-xs" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>变量名</th>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>用途</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-2 pr-3"><code style={codeStyle}>--font-body</code></td>
+            <td className="py-2 pr-3">正文字体</td>
+            <td className="py-2"><code style={{ ...codeStyle, color: 'var(--color-text-muted)', fontSize: '11px' }}>{`'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif`}</code></td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-2 pr-3"><code style={codeStyle}>--font-heading</code></td>
+            <td className="py-2 pr-3">标题字体</td>
+            <td className="py-2"><code style={{ ...codeStyle, color: 'var(--color-text-muted)', fontSize: '11px' }}>{`'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', serif`}</code></td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h4 className="text-xs font-bold mt-4 mb-2" style={{ color: s.accent }}>布局类变量（1 个）</h4>
+      <table className="w-full text-xs" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>变量名</th>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>用途</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-2 pr-3"><code style={codeStyle}>--border-radius</code></td>
+            <td className="py-2 pr-3">全局圆角大小</td>
+            <td className="py-2"><code style={{ ...codeStyle, color: 'var(--color-text-muted)' }}>12px</code></td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3 id="sub-css-var-naming" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>CSS 变量命名规范</h3>
+      <ul className="list-disc pl-5 space-y-1">
+        <li>格式：<code style={codeStyle}>{'--color-{类别}-{层级}'}</code>，如 <code style={codeStyle}>--color-bg-primary</code></li>
+        <li>层级关系：<code style={codeStyle}>primary</code> &gt; <code style={codeStyle}>secondary</code> &gt; <code style={codeStyle}>tertiary</code> / <code style={codeStyle}>muted</code></li>
+        <li>交互状态通过后缀 <code style={codeStyle}>-hover</code> 表达</li>
+        <li>全部使用 kebab-case</li>
+      </ul>
+
+      <h3 id="sub-css-var-usage" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>插件中使用 CSS 变量的方式</h3>
+      <p>插件有三种方式使用 CSS 变量：</p>
+      <ul className="list-disc pl-5 space-y-1">
+        <li><strong>内联 style</strong>：在 HTML 字符串的 style 属性中直接使用</li>
+        <li><strong>injectStyle</strong>：在注入的 CSS 代码中使用</li>
+        <li><strong>registerSlot</strong>：在注入的 HTML 内容中使用</li>
+      </ul>
+
+      <h4 className="text-xs font-bold mt-4 mb-2" style={{ color: s.accent }}>方式 1：内联 style 中使用</h4>
+      <pre style={preStyle}>{CODE_CSS_VAR_INLINE}</pre>
+
+      <h4 className="text-xs font-bold mt-4 mb-2" style={{ color: s.accent }}>方式 2：injectStyle 注入的 CSS 中使用</h4>
+      <pre style={preStyle}>{CODE_CSS_VAR_INJECT}</pre>
+
+      <h3 id="sub-css-var-guide" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>使用指南</h3>
+      <div className="space-y-3 mt-2">
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>背景色选择规则</div>
+          <ul className="list-disc pl-5 text-xs space-y-1">
+            <li>页面级背景：使用 <code style={codeStyle}>--color-bg-primary</code></li>
+            <li>面板/卡片背景：使用 <code style={codeStyle}>--color-bg-secondary</code></li>
+            <li>元素级背景（hover 态、输入框）：使用 <code style={codeStyle}>--color-bg-tertiary</code></li>
+          </ul>
+        </div>
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>文字色选择规则</div>
+          <ul className="list-disc pl-5 text-xs space-y-1">
+            <li>正文/标题：使用 <code style={codeStyle}>--color-text-primary</code></li>
+            <li>辅助文字/描述：使用 <code style={codeStyle}>--color-text-secondary</code></li>
+            <li>弱化文字/提示/占位符：使用 <code style={codeStyle}>--color-text-muted</code></li>
+          </ul>
+        </div>
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>交互元素</div>
+          <ul className="list-disc pl-5 text-xs space-y-1">
+            <li>按钮/链接/高亮：使用 <code style={codeStyle}>--color-accent</code></li>
+            <li>悬停态：使用 <code style={codeStyle}>--color-accent-hover</code></li>
+          </ul>
+        </div>
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>其他</div>
+          <ul className="list-disc pl-5 text-xs space-y-1">
+            <li>边框：<code style={codeStyle}>--color-border</code></li>
+            <li>阴影：<code style={codeStyle}>--color-shadow</code></li>
+            <li>圆角：<code style={codeStyle}>--border-radius</code>（保持全局一致）</li>
+            <li>正文字体：<code style={codeStyle}>--font-body</code></li>
+            <li>标题字体：<code style={codeStyle}>--font-heading</code></li>
+          </ul>
+        </div>
+      </div>
+
+      <h3 id="sub-css-var-custom" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>创建自定义 CSS 变量</h3>
+      <p>插件可以通过 <code style={codeStyle}>injectStyle</code> 定义自己的 CSS 变量。建议使用插件前缀避免冲突，如 <code style={codeStyle}>--my-plugin-primary</code>。</p>
+      <pre style={preStyle}>{CODE_CSS_VAR_CUSTOM}</pre>
+
+      <h3 id="sub-css-var-themes" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>四个预设主题对比</h3>
+      <table className="w-full text-xs" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>主题 ID</th>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>名称</th>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>风格</th>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>暗色</th>
+            <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>强调色</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>圆角</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[
+            ['deep-night', '暗夜紫', '奇幻/史诗', 'true', '#d4a843 金色', '12px'],
+            ['moonlight', '月光白', '轻松/日常', 'false', '#2a4a7f 深蓝', '12px'],
+            ['cyber-glow', '赛博绿', '科幻/赛博朋克', 'true', '#00ff88 荧光绿', '4px'],
+            ['parchment', '羊皮纸', '古典/历史', 'false', '#8b4513 棕色', '8px'],
+          ].map(([id, name, style, isDark, accent, radius]) => (
+            <tr key={id} style={{ borderBottom: `1px solid ${s.border}` }}>
+              <td className="py-2 pr-3"><code style={codeStyle}>{id}</code></td>
+              <td className="py-2 pr-3">{name}</td>
+              <td className="py-2 pr-3">{style}</td>
+              <td className="py-2 pr-3">{isDark === 'true' ? '是' : '否'}</td>
+              <td className="py-2 pr-3"><code style={{ ...codeStyle, color: 'var(--color-text-muted)' }}>{accent}</code></td>
+              <td className="py-2">{radius}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p className="mt-2">插件使用 CSS 变量后，切换主题时所有 UI 会自动适配，无需额外处理。</p>
+    </div>
+  );
+}
+
+function PluginStorageSection() {
+  return (
+    <div>
+      <p>插件系统提供了三种数据存储方式，适用于不同的场景。选择合适的存储方式可以让插件更加健壮和高效。</p>
+
+      <h3 id="sub-storage-plugin" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>方式 1：xinyu.plugin.storage（推荐）</h3>
+      <p>插件独立持久化存储，数据存储在内存中（页面刷新后重置），以插件 ID 为命名空间隔离。不同插件之间的数据互不干扰。</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>API 列表</div>
+        <ul className="list-disc pl-5 text-xs space-y-1">
+          <li><code style={codeStyle}>xinyu.plugin.storage.get(key)</code> — 读取值（不存在返回 null）</li>
+          <li><code style={codeStyle}>xinyu.plugin.storage.set(key, value)</code> — 写入值（自动 JSON 序列化）</li>
+          <li><code style={codeStyle}>xinyu.plugin.storage.remove(key)</code> — 删除指定键</li>
+          <li><code style={codeStyle}>xinyu.plugin.storage.keys()</code> — 获取所有键名数组</li>
+        </ul>
+      </div>
+      <p className="mt-2"><strong>适用场景</strong>：用户偏好设置、插件状态持久化、历史记录等。</p>
+      <pre style={preStyle}>{CODE_STORAGE_PLUGIN}</pre>
+
+      <h3 id="sub-game-info" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>方式 2：xinyu.game.getWorldSetting / setWorldSetting / getSessionId / getMessages</h3>
+      <p>用于获取和修改当前游戏的世界设定、会话 ID 和对话消息列表。插件可通过这些 API 了解游戏上下文，实现条件判断、数据统计等功能，也可以动态修改世界设定。</p>
+      <p className="mt-1 text-xs" style={{ color: '#f97316' }}>⚠️ 读取需要声明 <code style={codeStyle}>game:info:read</code> 权限，未声明时所有读取 API 静默返回空值。写入需要声明 <code style={codeStyle}>game:info:write</code> 权限，未声明时写入操作静默忽略。</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>API 列表</div>
+        <ul className="list-disc pl-5 text-xs space-y-1">
+          <li><code style={codeStyle}>xinyu.game.getWorldSetting()</code> — 获取当前世界设定对象，字段完全由用户自定义（可能包含任意 key-value 对）</li>
+          <li><code style={codeStyle}>xinyu.game.setWorldSetting(data)</code> — 修改世界设定（合并更新），修改实时生效并持久化到数据库。需要 <code style={codeStyle}>game:info:write</code> 权限</li>
+          <li><code style={codeStyle}>xinyu.game.getSessionId()</code> — 获取当前游戏会话 ID（字符串）</li>
+          <li><code style={codeStyle}>xinyu.game.getMessages()</code> — 获取当前对话消息列表，每条消息包含 <code style={codeStyle}>role</code>（user/assistant/system/notice）和 <code style={codeStyle}>content</code></li>
+        </ul>
+      </div>
+      <p className="mt-2"><strong>适用场景</strong>：根据世界设定调整插件行为、统计对话轮数、读取历史消息内容、动态修改世界设定（如更新游戏进度、解锁新区域等）。</p>
+      <pre style={preStyle}>{`// 示例：根据世界设定调整插件行为
+var world = xinyu.game.getWorldSetting();
+console.log('当前世界:', world.title);
+console.log('时代背景:', world.era);
+
+// 示例：修改世界设定（合并更新，实时生效并持久化）
+xinyu.game.setWorldSetting({ "当前章节": "第三章·迷雾森林" });
+xinyu.game.setWorldSetting({ "解锁区域": ["王城", "迷雾森林", "矿洞"] });
+
+// 示例：获取会话 ID 用于持久化存储的命名
+var sessionId = xinyu.game.getSessionId();
+
+// 示例：统计当前对话轮数
+var messages = xinyu.game.getMessages();
+var userMsgCount = messages.filter(function(m) { return m.role === 'user'; }).length;
+console.log('玩家已发言 ' + userMsgCount + ' 次');`}</pre>
+
+      <h3 id="sub-storage-game" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>方式 3：xinyu.game.setState / getState</h3>
+      <p>游戏状态存储，全局共享，所有插件可读写。状态变更会触发 <code style={codeStyle}>game:stateChange</code> 宿主事件。</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>API 列表</div>
+        <ul className="list-disc pl-5 text-xs space-y-1">
+          <li><code style={codeStyle}>xinyu.game.setState(partialState)</code> — 合并更新游戏状态</li>
+          <li><code style={codeStyle}>xinyu.game.getState()</code> — 获取完整游戏状态对象</li>
+        </ul>
+      </div>
+      <p className="mt-2"><strong>适用场景</strong>：游戏运行时数据（HP、金币、等级、当前位置等）。</p>
+      <pre style={preStyle}>{CODE_STORAGE_GAME}</pre>
+
+      <h3 id="sub-storage-attr" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>方式 4：xinyu.game.registerAttribute / setAttribute</h3>
+      <p>游戏属性注册，适合需要在 UI 上展示的属性。注册的属性会显示在游戏属性面板中，支持标签、图标、颜色等元数据。</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>API 列表</div>
+        <ul className="list-disc pl-5 text-xs space-y-1">
+          <li><code style={codeStyle}>xinyu.game.registerAttribute(&#123; key, label, type, value, icon?, color? &#125;)</code> — 注册属性</li>
+          <li><code style={codeStyle}>xinyu.game.setAttribute(key, value)</code> — 更新属性值</li>
+          <li><code style={codeStyle}>xinyu.game.getAttributes()</code> — 获取所有属性（需 <code style={codeStyle}>game:info:read</code> 权限）</li>
+        </ul>
+      </div>
+      <p className="mt-2"><strong>适用场景</strong>：需要在游戏属性面板中展示的属性（HP、MP、状态等）。</p>
+      <pre style={preStyle}>{CODE_STORAGE_ATTR}</pre>
+
+      <h3 id="sub-storage-best" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>存储最佳实践</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>数据结构</strong>：建议使用 JSON 对象组织相关数据，而不是存储大量零散的键值对</li>
+        <li><strong>定期保存</strong>：重要数据应在变更时立即保存，不要等到插件卸载</li>
+        <li><strong>容量限制</strong>：localStorage 有 5MB 限制，不要存储大量数据（如完整的聊天记录）</li>
+        <li><strong>状态检查</strong>：使用 <code style={codeStyle}>keys()</code> 方法检查存储状态，便于调试</li>
+        <li><strong>命名空间隔离</strong>：<code style={codeStyle}>plugin.storage</code> 自动以插件 ID 隔离，无需担心键名冲突</li>
+        <li><strong>游戏状态共享</strong>：<code style={codeStyle}>game.setState</code> 是全局共享的，多个插件可能修改同一字段，注意协调</li>
+      </ul>
+    </div>
+  );
+}
+
+function AiInterceptionSection() {
+  return (
+    <div>
+      <p>AI 拦截系统允许插件在 AI 请求的不同阶段介入，修改 Prompt、请求参数或 AI 回复内容。这是实现 NPC 人格注入、规则修改、内容过滤等高级功能的核心机制。</p>
+
+      <h3 id="sub-ai-interceptors" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>五种拦截器</h3>
+
+      <div className="space-y-3 mt-2">
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="flex items-center gap-2 mb-1">
+            <code className="text-xs font-bold" style={{ color: s.accent }}>xinyu.ai.onPromptBuild(handler)</code>
+          </div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>Prompt 构建拦截。handler 接收当前 prompt 字符串和世界设定对象，返回修改后的字符串。</p>
+          <p className="text-xs mt-1" style={{ color: s.textMuted }}>典型用途：注入 NPC 人格、游戏规则、角色状态信息。</p>
+        </div>
+
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="flex items-center gap-2 mb-1">
+            <code className="text-xs font-bold" style={{ color: s.accent }}>xinyu.ai.onBeforeSend(handler)</code>
+          </div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>发送前拦截。handler 接收用户消息数组 <code style={codeStyle}>{'[{role, content}]'}</code>，返回修改后的消息数组。</p>
+          <p className="text-xs mt-1" style={{ color: s.textMuted }}>典型用途：修改用户消息内容、过滤敏感词。</p>
+        </div>
+
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="flex items-center gap-2 mb-1">
+            <code className="text-xs font-bold" style={{ color: s.accent }}>xinyu.ai.onBeforeComplete(handler)</code>
+            <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ backgroundColor: s.accent, color: s.bgPrimary, fontWeight: 600 }}>NEW</span>
+          </div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>完整消息数组拦截。handler 接收包含 system prompt + 所有用户/助手消息的完整数组，返回修改后的数组。</p>
+          <p className="text-xs mt-1" style={{ color: s.textMuted }}>典型用途：角色合并、消息重排、缓存优化、上下文窗口裁剪。这是实现缓存优化插件的核心钩子。</p>
+          <pre className="mt-2" style={preStyle}>{[
+            "xinyu.ai.onBeforeComplete(function(messages) {",
+            "  // messages[0] 是 system prompt",
+            "  // messages[1...] 是用户/助手对话历史",
+            "  // 可以自由重组，例如合并连续的 user 消息",
+            "  return messages;",
+            "});",
+          ].join('\n')}</pre>
+        </div>
+
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="flex items-center gap-2 mb-1">
+            <code className="text-xs font-bold" style={{ color: s.accent }}>xinyu.ai.onAfterReceive(handler)</code>
+          </div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>接收后拦截。handler 接收 AI 回复内容字符串，返回修改后的内容。</p>
+          <p className="text-xs mt-1" style={{ color: s.textMuted }}>典型用途：内容过滤、格式化、添加元数据标记。</p>
+        </div>
+
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="flex items-center gap-2 mb-1">
+            <code className="text-xs font-bold" style={{ color: s.accent }}>xinyu.ai.onRequestConfig(handler)</code>
+          </div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>请求配置拦截。handler 接收 AIRequestConfig 对象，返回修改后的配置。</p>
+          <p className="text-xs mt-1" style={{ color: s.textMuted }}>典型用途：动态调整模型选择、请求超时等全局配置。</p>
+        </div>
+      </div>
+
+      <h3 className="text-sm font-bold mt-6 mb-2" style={{ color: s.textPrimary }}>拦截器示例</h3>
+      <pre style={preStyle}>{CODE_AI_PROMPT}</pre>
+
+      <h3 id="sub-ai-pipeline" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>管道模式详解</h3>
+      <p>多个插件注册的同类型拦截器会按注册顺序形成管道（Pipeline），前一个 handler 的输出是后一个 handler 的输入。</p>
+      <pre style={preStyle}>{CODE_AI_PIPELINE}</pre>
+
+      <h3 id="sub-ai-npc-example" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>完整示例：NPC 人格注入插件</h3>
+      <pre style={preStyle}>{CODE_AI_NPC}</pre>
+
+      <h3 id="sub-ai-notes" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>注意事项</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>保持 Prompt 简洁</strong>：通过拦截器追加的内容应简洁明确，避免浪费 token。冗长的 Prompt 会降低 AI 响应质量并增加成本</li>
+        <li><strong>不要过度修改 AI 回复</strong>：<code style={codeStyle}>onAfterReceive</code> 应谨慎使用，避免破坏 AI 输出的质量和连贯性</li>
+        <li><strong>handler 必须返回值</strong>：每个 handler 都应该返回修改后的值，不要返回 undefined，否则管道会中断</li>
+        <li><strong>异常处理</strong>：handler 内部应自行 try-catch 处理异常，避免一个插件的错误影响整个管道</li>
+        <li><strong>注册顺序</strong>：拦截器按注册顺序执行，如果依赖其他插件的输出，需要注意加载顺序</li>
+      </ul>
+    </div>
+  );
+}
+
+function PluginConfigSection() {
+  return (
+    <div>
+      <p>插件配置系统允许插件定义可配置的参数，用户可以在插件管理页面中修改这些参数，无需修改插件代码。</p>
+
+      <h3 id="sub-config-schema" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>configSchema 定义</h3>
+      <p>通过 <code style={codeStyle}>configSchema</code> 数组定义插件的可配置字段。每个字段遵循 <code style={codeStyle}>PluginConfigField</code> 接口：</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>PluginConfigField 接口</div>
+        <table className="w-full text-xs mt-1" style={{ borderCollapse: 'collapse' }}>
+          <thead>
+            <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+              <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>字段</th>
+              <th className="text-left py-2 pr-3" style={{ color: s.textPrimary }}>类型</th>
+              <th className="text-left py-2" style={{ color: s.textPrimary }}>说明</th>
+            </tr>
+          </thead>
+          <tbody>
+            {[
+              ['key', 'string', '配置键名，用于代码中读取'],
+              ['label', 'string', '显示名称'],
+              ['type', 'string', '字段类型：text / number / boolean / select / textarea'],
+              ['defaultValue', 'any', '默认值'],
+              ['description', 'string', '配置说明文字'],
+              ['options', 'Array', '仅 select 类型，可选值列表 { value, label }'],
+            ].map(([field, type, desc]) => (
+              <tr key={field} style={{ borderBottom: `1px solid ${s.border}` }}>
+                <td className="py-2 pr-3"><code style={codeStyle}>{field}</code></td>
+                <td className="py-2 pr-3"><code style={{ ...codeStyle, color: 'var(--color-text-muted)' }}>{type}</code></td>
+                <td className="py-2">{desc}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <h3 id="sub-config-schema-example" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>configSchema 示例</h3>
+      <pre style={preStyle}>{CODE_CONFIG_SCHEMA}</pre>
+
+      <h3 id="sub-config-read" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>在插件代码中读写配置</h3>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>API 列表</div>
+        <ul className="list-disc pl-5 text-xs space-y-1">
+          <li><code style={codeStyle}>xinyu.plugin.config.get()</code> — 获取全部配置对象</li>
+          <li><code style={codeStyle}>xinyu.plugin.config.get(key)</code> — 获取指定键的配置值</li>
+          <li><code style={codeStyle}>xinyu.plugin.config.set(newConfig)</code> — 替换全部配置</li>
+          <li><code style={codeStyle}>xinyu.plugin.config.set(key, value)</code> — 设置单个配置项（合并更新，不影响其他键）</li>
+          <li><code style={codeStyle}>xinyu.plugin.on(&apos;onConfigChange&apos;, handler)</code> — 监听配置变更，详见 <NavLink sectionId="lifecycle">生命周期钩子</NavLink></li>
+        </ul>
+        <div className="text-xs font-bold mb-1 mt-3" style={{ color: s.accent }}>⚠️ 注意</div>
+        <p className="text-xs" style={{ color: s.textSecondary }}>配置数据（<code style={codeStyle}>xinyu.plugin.config</code>）与运行时存储（<code style={codeStyle}>xinyu.plugin.storage</code>）是独立的。配置会持久化到数据库，storage 仅存在于内存中。</p>
+      </div>
+      <p className="mt-2">配置值来自用户在插件管理页面中的设置。如果用户未修改，则使用 <code style={codeStyle}>defaultValue</code>。插件也可以通过 <code style={codeStyle}>config.set()</code> 自行修改配置，修改后会自动持久化并通知其他标签页。</p>
+      <pre style={preStyle}>{CODE_CONFIG_READ}</pre>
+
+      <h3 id="sub-config-full-example" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>完整示例：带配置的骰子插件</h3>
+      <pre style={preStyle}>{CODE_CONFIG_FULL}</pre>
+
+      <h3 id="sub-config-ingame" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>配置作用域</h3>
+      <p>插件配置分为两个作用域：</p>
+      <div className="space-y-2 mt-2">
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>全局配置（global scope）— 游戏外</div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>在扩展管理页面的插件详情弹窗中修改。作为新游戏的默认配置，所有新建游戏世界都会继承这份配置。</p>
+        </div>
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>世界配置（world scope）— 游戏内</div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>在游戏内的插件抽屉中修改。仅作用于当前游戏世界，不影响其他游戏，也不影响全局默认配置。修改后自动保存，并通过 <code style={codeStyle}>onConfigChange</code> hook 通知插件代码，同时同步到其他打开的标签页。</p>
+        </div>
+      </div>
+      <p className="mt-2 text-xs" style={{ color: s.textMuted }}>💡 优先级：世界配置 &gt; 全局配置。即游戏内修改会覆盖全局默认值，但不会反向修改全局配置。</p>
+    </div>
+  );
+}
+
+function PersistentStorageSection() {
+  const codeStyle = { backgroundColor: s.bgSecondary, padding: '1px 5px', borderRadius: '3px', fontSize: '12px', color: s.accent };
+  return (
+    <div>
+      <h3 id="sub-persistent-storage" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>持久化存储 xinyu.storage</h3>
+      <p>与 <code style={codeStyle}>xinyu.plugin.storage</code>（内存，刷新后重置）不同，<code style={codeStyle}>xinyu.storage</code> 将数据持久化到数据库，页面刷新后仍然保留。</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>🔒 需要权限</div>
+        <p className="text-xs" style={{ color: s.textSecondary }}>使用前必须在插件注释中声明 <code style={codeStyle}>// @permission storage:plugin</code>，否则所有操作静默返回 null/undefined。</p>
+      </div>
+      <div className="mt-2">
+        <p className="text-xs font-bold mb-1">API 列表（均为 async）：</p>
+        <ul className="list-disc pl-5 text-xs space-y-0.5">
+          <li><code style={codeStyle}>await xinyu.storage.get(key)</code> — 读取值（不存在返回 null）</li>
+          <li><code style={codeStyle}>await xinyu.storage.set(key, value)</code> — 写入值（自动 JSON 序列化）</li>
+          <li><code style={codeStyle}>await xinyu.storage.remove(key)</code> — 删除指定键</li>
+          <li><code style={codeStyle}>await xinyu.storage.keys()</code> — 获取所有键名数组</li>
+        </ul>
+      </div>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <p className="text-xs font-bold mb-1" style={{ color: s.accent }}>🌍 数据自动按世界隔离</p>
+        <p className="text-xs" style={{ color: s.textSecondary }}>storage 数据自动关联当前游戏世界 ID，不同世界的同名 key 互不影响。插件无需手动传入 worldId，运行时会自动处理。在非游戏页面（如设置页）中，worldId 为空，数据存储在全局命名空间。</p>
+      </div>
+      <pre style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}`, borderRadius: '8px', padding: '12px', fontSize: '12px', overflowX: 'auto', marginTop: '8px', color: s.textPrimary }}>{[
+        '// 需要声明权限：// @permission storage:plugin',
+        '',
+        'xinyu.plugin.on("onLoad", async function() {',
+        '  // 读取上次的计数',
+        '  var count = await xinyu.storage.get("visitCount") || 0;',
+        '  count++;',
+        '  await xinyu.storage.set("visitCount", count);',
+        '  xinyu.chat.insertSystemMessage("这是你第 " + count + " 次访问");',
+        '',
+        '  // 存储复杂对象',
+        '  await xinyu.storage.set("playerData", {',
+        '    name: "旅行者",',
+        '    level: 5,',
+        '    inventory: ["剑", "盾牌", "药水"]',
+        '  });',
+        '});',
+      ].join('\n')}</pre>
+    </div>
+  );
+}
+
+function FileApiSection() {
+  const codeStyle = { backgroundColor: s.bgSecondary, padding: '1px 5px', borderRadius: '3px', fontSize: '12px', color: s.accent };
+  return (
+    <div>
+      <h3 id="sub-file-api" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>文件操作 xinyu.file</h3>
+      <p>插件可以在自己的私有目录下读写文件。每个插件只能访问 <code style={codeStyle}>data/plugin-files/{'{pluginId}'}/</code> 下的文件，无法访问其他插件或系统的文件。</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>🔒 需要权限</div>
+        <ul className="text-xs space-y-0.5" style={{ color: s.textSecondary }}>
+          <li>读取文件：<code style={codeStyle}>// @permission file:read</code></li>
+          <li>写入/删除文件：<code style={codeStyle}>// @permission file:write</code></li>
+        </ul>
+      </div>
+      <div className="mt-2">
+        <p className="text-xs font-bold mb-1">API 列表（均为 async）：</p>
+        <ul className="list-disc pl-5 text-xs space-y-0.5">
+          <li><code style={codeStyle}>await xinyu.file.read(fileName)</code> — 读取文件内容（不存在返回 null）</li>
+          <li><code style={codeStyle}>await xinyu.file.write(fileName, content)</code> — 写入文件（自动创建目录）</li>
+          <li><code style={codeStyle}>await xinyu.file.remove(fileName)</code> — 删除文件</li>
+          <li><code style={codeStyle}>await xinyu.file.list()</code> — 列出私有目录下的所有文件名</li>
+        </ul>
+      </div>
+      <pre style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}`, borderRadius: '8px', padding: '12px', fontSize: '12px', overflowX: 'auto', marginTop: '8px', color: s.textPrimary }}>{[
+        '// 需要声明权限：// @permission file:read',
+        '//               // @permission file:write',
+        '',
+        'xinyu.plugin.on("onLoad", async function() {',
+        '  // 写入日志文件',
+        '  await xinyu.file.write("log.txt", "插件已加载\\n");',
+        '',
+        '  // 追加内容',
+        '  var existing = await xinyu.file.read("log.txt") || "";',
+        '  await xinyu.file.write("log.txt", existing + "用户进入了游戏\\n");',
+        '',
+        '  // 列出所有文件',
+        '  var files = await xinyu.file.list();',
+        '  console.log("插件文件:", files);',
+        '});',
+      ].join('\n')}</pre>
+    </div>
+  );
+}
+
+function ResourceApiSection() {
+  const codeStyle = { backgroundColor: s.bgSecondary, padding: '1px 5px', borderRadius: '3px', fontSize: '12px', color: s.accent };
+  const preStyle = { backgroundColor: s.bgSecondary, border: `1px solid ${s.border}`, borderRadius: '8px', padding: '12px', fontSize: '12px', overflowX: 'auto', color: s.textPrimary };
+
+  return (
+    <div>
+      <h3 id="sub-resource-api" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>插件资源访问 xinyu.plugin.getResource / getResourceUrl</h3>
+      <p>插件可以访问 .xye 插件包内的资源文件（如图片、音频、JSON 数据等）。资源文件存放在插件的 <code style={codeStyle}>resources/</code> 目录下，通过 HTTP 端点访问。</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>🔒 需要权限</div>
+        <ul className="text-xs space-y-0.5" style={{ color: s.textSecondary }}>
+          <li>访问资源：<code style={codeStyle}>// @permission file:read</code></li>
+        </ul>
+      </div>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>📁 resources 目录规则</div>
+        <ul className="text-xs space-y-0.5" style={{ color: s.textSecondary }}>
+          <li>资源文件统一存放在 <code style={codeStyle}>resources/</code> 目录下（如 <code style={codeStyle}>resources/images/icon.png</code>）</li>
+          <li><code style={codeStyle}>resources/</code> 目录本身<strong>禁止删除</strong>（API 层面限制），目录内的文件可正常管理</li>
+          <li>插件代码文件（如 <code style={codeStyle}>index.js</code>）放在插件根目录，不要放在 <code style={codeStyle}>resources/</code> 下</li>
+        </ul>
+      </div>
+      <div className="mt-2">
+        <p className="text-xs font-bold mb-1">API 列表：</p>
+        <ul className="list-disc pl-5 text-xs space-y-0.5">
+          <li><code style={codeStyle}>await xinyu.plugin.getResource(resourcePath)</code> — 异步获取资源文件内容。文本文件返回字符串，二进制文件（图片等）返回 data URL</li>
+          <li><code style={codeStyle}>xinyu.plugin.getResourceUrl(resourcePath)</code> — 同步返回资源的 HTTP URL，可直接用于 <code style={codeStyle}>{'&lt;img src="..."&gt;'}</code> 等 HTML 属性</li>
+        </ul>
+      </div>
+      {/* @ts-ignore */}
+      <pre style={preStyle}>{[
+        '// 需要声明权限：// @permission file:read',
+        '',
+        'xinyu.plugin.on("onLoad", async function() {',
+        '  // 方式 1：获取资源内容（适用于文本/JSON/小图片）',
+        '  var iconData = await xinyu.plugin.getResource("resources/images/icon.png");',
+        '  // iconData 为 data URL，如 "data:image/png;base64,..."',
+        '',
+        '  // 方式 2：获取资源 URL（适用于 HTML 中直接引用）',
+        '  var url = xinyu.plugin.getResourceUrl("resources/images/banner.jpg");',
+        '  xinyu.ui.registerSlot("status-bar",',
+        '    <img src="url" style="height:20px;border-radius:4px" alt="">',
+        '  );',
+        '',
+        '  // 读取 JSON 配置',
+        '  var config = await xinyu.plugin.getResource("resources/data/config.json");',
+        '  if (config) {',
+        '    var data = JSON.parse(config);',
+        '    console.log("插件配置:", data);',
+        '  }',
+        '});',
+      ].join('\n')}</pre>
+      <p className="mt-2 text-xs" style={{ color: s.textSecondary }}>
+        <strong>适用场景</strong>：加载插件自带的图标、背景图片、音效、配置数据等资源文件。推荐使用 <code style={codeStyle}>getResourceUrl</code> 在 HTML 中引用大文件（如图片），使用 <code style={codeStyle}>getResource</code> 读取文本或小文件内容。
+      </p>
+    </div>
+  );
+}
+
+function PluginImportExportSection() {
+  return (
+    <div>
+      <p>插件系统支持导入导出功能，方便插件分享、备份和迁移。</p>
+
+      <h3 id="sub-export-format" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>导出格式</h3>
+      <p>支持两种导出格式：</p>
+      <ul className="list-disc pl-5 space-y-1">
+        <li><strong>单个插件导出</strong>：直接返回插件 JSON 对象</li>
+        <li><strong>批量导出</strong>：使用 <code style={codeStyle}>xinyu-extension-v1</code> 格式，包含 format、exportedAt、plugins 字段</li>
+      </ul>
+      <pre style={preStyle}>{CODE_EXPORT_FORMAT}</pre>
+
+      <h3 id="sub-import-format" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>导入格式</h3>
+      <p>支持 3 种导入格式，系统会自动识别：</p>
+      <div className="space-y-2 mt-2">
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>格式 1：完整导出格式</div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>包含 <code style={codeStyle}>format: &apos;xinyu-extension-v1&apos;</code> 和 <code style={codeStyle}>plugins</code> 数组</p>
+        </div>
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>格式 2：直接数组</div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>JSON 数组，每个元素是一个插件对象</p>
+        </div>
+        <div className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+          <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>格式 3：单个插件</div>
+          <p className="text-xs" style={{ color: s.textSecondary }}>单个插件 JSON 对象，直接包含 id、code 等字段</p>
+        </div>
+      </div>
+      <pre style={preStyle}>{CODE_IMPORT_FORMAT}</pre>
+
+      <h3 id="sub-import-behavior" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>导入行为</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>Upsert 策略</strong>：如果已存在相同 ID 的插件，则更新其代码和配置；否则创建新插件</li>
+        <li><strong>自动绑定</strong>：导入的插件会自动创建全局绑定（global scope）</li>
+        <li><strong>必填字段</strong>：<code style={codeStyle}>id</code>、<code style={codeStyle}>name</code>、<code style={codeStyle}>version</code>、<code style={codeStyle}>type</code>、<code style={codeStyle}>code</code></li>
+        <li><strong>可选字段</strong>：<code style={codeStyle}>description</code>、<code style={codeStyle}>author</code>、<code style={codeStyle}>configSchema</code>、<code style={codeStyle}>commonPermissions</code>、<code style={codeStyle}>exclusivePermissions</code>、<code style={codeStyle}>requiredPermissions</code></li>
+      </ul>
+
+      <h3 id="sub-json-spec" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>JSON 文件格式规范</h3>
+      <pre style={preStyle}>{[
+        '{',
+        '  "format": "xinyu-extension-v1",',
+        '  "exportedAt": "2026-04-26T12:00:00.000Z",',
+        '  "plugins": [{',
+        '    "id": "my-plugin",',
+        '    "name": "我的插件",',
+        '    "version": "1.0.0",',
+        '    "type": "game-mechanics",',
+        '    "description": "插件描述",',
+        '    "author": "作者名",',
+        '    "code": "function setup(xinyu) { ... }",',
+        '    "configSchema": [...],',
+        '    "commonPermissions": [...],',
+        '    "exclusivePermissions": [...],',
+        '    "requiredPermissions": [...]',
+        '  }]',
+        '}',
+      ].join('\n')}</pre>
+    </div>
+  );
+}
+
+function SecuritySection() {
+  return (
+    <div>
+      <p>插件系统采用多层安全架构，确保插件代码在受限的环境中运行，不会影响主应用的安全性和稳定性。</p>
+
+      <h3 id="sub-security-layers" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>六层安全架构</h3>
+      <div className="space-y-3 mt-2">
+        {[
+          {
+            layer: '第 1 层：权限声明层',
+            desc: '插件在 commonPermissions / exclusivePermissions / requiredPermissions 中声明权限，未声明的权限无法使用',
+            detail: '在插件创建时由用户确认权限范围，运行时严格检查。排他权限冲突时后加载的插件启动失败'
+          },
+          {
+            layer: '第 2 层：权限检查层',
+            desc: '每次敏感操作前验证权限，无权限则静默失败',
+            detail: '如 registerSlot 检查 slot:* 权限，injectStyle 检查 style:inject 权限'
+          },
+          {
+            layer: '第 3 层：HTML 净化层',
+            desc: '8 步净化处理，移除危险标签和属性',
+            detail: '防止 XSS 攻击，确保注入的 HTML 安全'
+          },
+          {
+            layer: '第 4 层：DOM 沙箱层',
+            desc: '通过代理对象间接操作 DOM，限制操作范围',
+            detail: '只能操作插件自己创建的元素，禁止访问宿主 DOM'
+          },
+          {
+            layer: '第 5 层：资源追踪层',
+            desc: '自动追踪插件创建的所有资源（DOM、样式、事件、定时器）',
+            detail: '插件卸载时自动清理所有追踪的资源'
+          },
+          {
+            layer: '第 6 层：错误隔离层',
+            desc: 'try-catch 包裹所有插件代码，错误不会影响主应用',
+            detail: '错误会被记录到控制台，并显示用户友好的错误提示'
+          },
+        ].map((item) => (
+          <div key={item.layer} className="p-3 rounded-lg" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+            <div className="text-xs font-bold mb-1" style={{ color: s.accent }}>{item.layer}</div>
+            <p className="text-xs" style={{ color: s.textSecondary }}>{item.desc}</p>
+            <p className="text-xs mt-1" style={{ color: s.textMuted }}>{item.detail}</p>
+          </div>
+        ))}
+      </div>
+
+      <h3 id="sub-html-sanitize" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>HTML 净化规则</h3>
+      <p>插件注入的 HTML 会经过 8 步净化处理：</p>
+      <ol className="list-decimal pl-5 space-y-1">
+        <li>移除 <code style={codeStyle}>script</code> / <code style={codeStyle}>style</code> / <code style={codeStyle}>link</code> / <code style={codeStyle}>meta</code> 标签</li>
+        <li>移除 <code style={codeStyle}>iframe</code> / <code style={codeStyle}>object</code> / <code style={codeStyle}>embed</code> / <code style={codeStyle}>applet</code> 标签</li>
+        <li>移除所有 <code style={codeStyle}>on*</code> 事件属性（onclick、onload 等）</li>
+        <li>移除 <code style={codeStyle}>javascript:</code> 协议</li>
+        <li>移除 <code style={codeStyle}>srcdoc</code> / <code style={codeStyle}>formaction</code> / <code style={codeStyle}>xlink:href</code> 属性</li>
+        <li>保留 46 个安全标签</li>
+        <li>清理 HTML 注释</li>
+        <li>规范化 HTML 结构</li>
+      </ol>
+
+      <h3 id="sub-allowed-tags" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>允许的 HTML 标签完整列表</h3>
+      <pre style={preStyle}>{CODE_SECURITY_TAGS}</pre>
+
+      <h3 id="sub-ai-scan" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>AI 安全检测</h3>
+      <p>在插件创建/编辑页面中，点击&ldquo;AI 安全检测&rdquo;按钮可以对插件代码进行安全分析。检测覆盖 6 个维度：</p>
+      <div className="p-3 rounded-lg mt-2" style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}>
+        <div className="space-y-2">
+          {[
+            { dim: '代码注入风险', desc: '检测 eval、new Function、innerHTML 等危险操作' },
+            { dim: '数据泄露风险', desc: '检测对外部 URL 的请求、localStorage 访问等' },
+            { dim: '权限滥用风险', desc: '检测是否声明了不必要的权限' },
+            { dim: 'DOM 操作风险', desc: '检测直接 DOM 操作、事件监听等' },
+            { dim: '资源消耗风险', desc: '检测可能的无限循环、大量定时器等' },
+            { dim: '内容安全风险', desc: '检测用户输入未过滤直接使用等' },
+          ].map((item) => (
+            <div key={item.dim} className="flex items-start gap-2">
+              <span className="text-xs font-bold shrink-0" style={{ color: s.accent }}>{item.dim}：</span>
+              <span className="text-xs" style={{ color: s.textSecondary }}>{item.desc}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <p className="mt-2">检测结果包含风险等级：<code style={codeStyle}>low</code>（低风险）、<code style={codeStyle}>medium</code>（中风险）、<code style={codeStyle}>high</code>（高风险）、<code style={codeStyle}>critical</code>（严重风险）。返回 <code style={codeStyle}>SecurityScanResult</code> 结构，包含每个维度的评分和总体建议。</p>
+    </div>
+  );
+}
+
+// ==================== 原有章节（增强版） ====================
+
+function BestPracticesSection() {
+  return (
+    <div>
+      <h3 id="sub-bp-general" className="text-sm font-bold mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>通用规范</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>使用 <NavLink sectionId="css-variables">CSS 变量</NavLink></strong>：所有颜色必须使用 <code style={codeStyle}>var(--color-xxx)</code>，不要硬编码颜色值，确保主题切换时正常显示</li>
+        <li><strong>错误隔离</strong>：运行时会自动捕获插件错误，不会影响其他插件或主应用。但建议在关键操作中自行 try-catch</li>
+        <li><strong>资源清理</strong>：插件卸载时，运行时会自动清理 DOM 元素、样式标签、事件监听器和定时器，无需手动处理，详见 <NavLink sectionId="lifecycle">生命周期</NavLink></li>
+        <li><strong>避免内存泄漏</strong>：不要在插件中创建无法被追踪的资源（如闭包中的定时器），使用 <code style={codeStyle}>xinyu.utils.debounce</code> 代替裸 setTimeout</li>
+        <li><strong>使用 &apos;use strict&apos;</strong>：运行时自动为插件代码启用严格模式</li>
+      </ul>
+
+      <h3 id="sub-bp-ui" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>UI 开发规范</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>优先使用插槽</strong>：尽量使用 <code style={codeStyle}>registerSlot</code> 而非自由 DOM 操作，更安全且易于管理</li>
+        <li><strong>控制 UI 数量</strong>：不要注册过多按钮或面板（建议工具栏按钮不超过 6 个），避免界面拥挤</li>
+        <li><strong>响应式设计</strong>：注入的 UI 应考虑不同屏幕尺寸，避免固定宽度</li>
+        <li><strong>使用语义化 HTML</strong>：使用 div/span/button 等语义标签，不要使用 table 做布局</li>
+        <li><strong>声明最小权限</strong>：只声明实际需要的权限，不要全部勾选。合理使用共享权限和排他权限区分功能</li>
+      </ul>
+
+      <h3 id="sub-bp-ai" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>AI 拦截规范</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>保持 Prompt 简洁</strong>：通过 <code style={codeStyle}>onPromptBuild</code> 追加的内容应简洁明确，避免浪费 token</li>
+        <li><strong>不要过度修改 AI 回复</strong>：<code style={codeStyle}>onAfterReceive</code> 应谨慎使用，避免破坏 AI 输出的质量</li>
+        <li><strong>链式处理</strong>：多个插件的 <NavLink sectionId="ai-interception">AI 拦截器</NavLink>按注册顺序依次执行，前一个的输出是后一个的输入</li>
+      </ul>
+
+      <h3 id="sub-bp-storage" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>数据存储规范</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>优先使用 <NavLink sectionId="plugin-storage">plugin.storage</NavLink></strong>：插件私有数据使用 <code style={codeStyle}>xinyu.plugin.storage</code>，自动命名空间隔离</li>
+        <li><strong>游戏状态使用 setState</strong>：需要全局共享的游戏数据使用 <code style={codeStyle}>xinyu.game.setState</code></li>
+        <li><strong>UI 展示属性使用 registerAttribute</strong>：需要在属性面板展示的数据使用 <code style={codeStyle}>xinyu.game.registerAttribute</code></li>
+        <li><strong>注意容量限制</strong>：localStorage 有 5MB 限制，不要存储大量数据</li>
+      </ul>
+
+      <h3 id="sub-bp-config" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>插件配置规范</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>定义 <NavLink sectionId="plugin-config">configSchema</NavLink></strong>：需要用户可配置的参数应通过 <code style={codeStyle}>configSchema</code> 定义</li>
+        <li><strong>提供合理的默认值</strong>：每个配置字段都应有合理的 <code style={codeStyle}>defaultValue</code></li>
+        <li><strong>清晰的配置说明</strong>：使用 <code style={codeStyle}>description</code> 字段说明配置的作用</li>
+      </ul>
+
+      <h3 id="sub-bp-perf" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>性能建议</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li>避免在 <code style={codeStyle}>onAfterReceive</code> 等高频 Hook 中执行复杂计算</li>
+        <li>使用 <code style={codeStyle}>debounce</code> / <code style={codeStyle}>throttle</code> 控制事件触发频率</li>
+        <li>样式注入尽量一次性完成，避免频繁调用 <code style={codeStyle}>injectStyle</code></li>
+        <li>DOM 操作批量执行，减少重排重绘</li>
+        <li>跨插件调用应做好错误处理，使用 try-catch 包裹 <code style={codeStyle}>callPlugin</code>，并提供降级方案</li>
+      </ul>
+
+      <h3 id="sub-bp-cross-plugin" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>跨插件通信规范</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>声明最小公开 API</strong>：只在 <code style={codeStyle}>publicExports</code> 中声明确实需要被其他插件调用的方法</li>
+        <li><strong>提供清晰的 API 文档</strong>：每个公开方法都应有 <code style={codeStyle}>description</code>、<code style={codeStyle}>params</code>、<code style={codeStyle}>returns</code> 说明</li>
+        <li><strong>始终处理错误</strong>：调用方必须 try-catch <code style={codeStyle}>callPlugin</code>，并提供降级方案</li>
+        <li><strong>避免循环依赖</strong>：插件 A 依赖 B，B 又依赖 A 会导致加载失败</li>
+      </ul>
+
+      <h3 id="sub-bp-dependency" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>依赖管理规范</h3>
+      <ul className="list-disc pl-5 space-y-2">
+        <li><strong>使用 loadDependency</strong>：推荐在代码中使用 <code style={codeStyle}>loadDependency()</code> 加载依赖，而非直接使用 <code style={codeStyle}>callPlugin()</code></li>
+        <li><strong>提供降级方案</strong>：依赖加载失败时应有合理的降级逻辑，不要让插件完全失效</li>
+        <li><strong>声明版本范围</strong>：为依赖指定合理的版本范围，避免 API 变更导致兼容性问题</li>
+        <li><strong>可选依赖谨慎使用</strong>：只在功能确实可选时标记为 <code style={codeStyle}>optional: true</code></li>
+      </ul>
+    </div>
+  );
+}
+
+function ExamplesSection() {
+  return (
+    <div>
+      <h3 id="sub-ex-1" className="text-sm font-bold mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>示例 1：自定义状态栏插件</h3>
+      <pre style={preStyle}>{CODE_EXAMPLE_1}</pre>
+
+      <h3 id="sub-ex-2" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>示例 2：消息统计面板</h3>
+      <pre style={preStyle}>{CODE_EXAMPLE_2}</pre>
+
+      <h3 id="sub-ex-3" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>示例 3：浮动操作面板</h3>
+      <pre style={preStyle}>{CODE_EXAMPLE_3}</pre>
+
+      <h3 id="sub-ex-4" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>示例 4：带配置的骰子插件</h3>
+      <p>结合了 <NavLink sectionId="plugin-config">插件配置系统</NavLink>和<NavLink sectionId="plugin-storage">插件数据存储</NavLink>的完整示例：</p>
+      <pre style={preStyle}>{CODE_CONFIG_FULL}</pre>
+
+      <h3 id="sub-ex-5" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>示例 5：NPC 人格注入插件</h3>
+      <p>展示了 <NavLink sectionId="ai-interception">AI 拦截系统</NavLink>的实际应用：</p>
+      <pre style={preStyle}>{CODE_AI_NPC}</pre>
+    </div>
+  );
+}
+
+// ==================== 跨插件通信 ====================
+
+function CrossPluginSection() {
+  return (
+    <div>
+      <h3 id="sub-cp-overview" className="text-sm font-bold mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>概述</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        插件系统支持插件之间的直接通信，采用<strong>&ldquo;显式导出 + 按需调用&rdquo;</strong>模型：
+      </p>
+      <ul className="list-disc pl-5 mt-2 space-y-1">
+        <li className="text-xs" style={{ color: s.textSecondary }}><strong>被调用方</strong>：在 manifest 中声明 <code style={codeStyle}>publicExports</code>，在 setup() 的返回值中导出函数</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}><strong>调用方</strong>：在 manifest 中声明 <NavLink sectionId="dependency">dependencies</NavLink>，通过 <code style={codeStyle}>xinyu.plugin.callPlugin()</code> 调用</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}>双方都必须声明，确保通信关系透明、可审计</li>
+      </ul>
+
+      <h3 id="sub-cp-export" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>被调用方：导出 API</h3>
+      <p className="text-xs leading-relaxed mb-2" style={{ color: s.textSecondary }}>第一步：在 manifest 中声明公开 API</p>
+      <pre className="p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// manifest 中的 publicExports 字段
+{
+  "publicExports": {
+    "rollDice": {
+      "description": "投掷骰子",
+      "params": "sides: number - 骰子面数",
+      "returns": "number - 投掷结果"
+    },
+    "getCharacter": {
+      "description": "获取角色信息",
+      "returns": "object - 角色数据"
+    }
+  }
+}`}
+      </pre>
+      <p className="text-xs leading-relaxed mt-3 mb-2" style={{ color: s.textSecondary }}>第二步：在 setup() 中导出函数</p>
+      <pre className="p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`function setup(xinyu) {
+  // ... 注册钩子、属性等
+
+  return {
+    rollDice: function(sides) {
+      return Math.floor(Math.random() * sides) + 1;
+    },
+    getCharacter: function() {
+      return xinyu.game.getState().character || {};
+    }
+  };
+}`}
+      </pre>
+
+      <h3 id="sub-cp-call" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>调用方：使用 API</h3>
+      <p className="text-xs leading-relaxed mb-2" style={{ color: s.textSecondary }}>第一步：在 manifest 中声明依赖</p>
+      <pre className="p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// manifest 中的 dependencies 字段
+{
+  "dependencies": [
+    { "pluginId": "com.example.dice-service", "versionRange": "^1.0.0" }
+  ]
+}`}
+      </pre>
+      <p className="text-xs leading-relaxed mt-3 mb-2" style={{ color: s.textSecondary }}>第二步：在代码中调用</p>
+      <pre className="p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`function setup(xinyu) {
+  xinyu.plugin.on('onGameInit', async function() {
+    try {
+      var result = await xinyu.plugin.callPlugin(
+        'com.example.dice-service',
+        'rollDice',
+        20
+      );
+      xinyu.chat.insertSystemMessage('🎲 投掷 20 面骰子：' + result);
+    } catch (e) {
+      xinyu.chat.insertSystemMessage('骰子服务不可用');
+    }
+  });
+}`}
+      </pre>
+
+      <h3 id="sub-cp-security" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>安全机制</h3>
+      <ul className="list-disc pl-5 space-y-1">
+        <li className="text-xs" style={{ color: s.textSecondary }}>调用方必须在 <code style={codeStyle}>dependencies</code> 中声明目标插件，否则调用被拒绝</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}>被调用方必须在 <code style={codeStyle}>publicExports</code> 中声明方法，否则调用被拒绝</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}>目标插件必须已安装并启用</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}>所有跨插件调用都有错误隔离，不会影响其他插件</li>
+      </ul>
+    </div>
+  );
+}
+
+// ==================== 依赖管理 ====================
+
+function DependencySection() {
+  return (
+    <div>
+      <h3 id="sub-dep-overview" className="text-sm font-bold mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>概述</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        插件可以声明对其他插件的依赖。依赖管理采用混合方案：
+      </p>
+      <ul className="list-disc pl-5 mt-2 space-y-1">
+        <li className="text-xs" style={{ color: s.textSecondary }}><strong>代码驱动</strong>：在代码中使用 <code style={codeStyle}>xinyu.plugin.loadDependency()</code> 加载依赖，支持运行时降级</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}><strong>属性记录</strong>：manifest 中的 <code style={codeStyle}>dependencies</code> 字段用于 UI 展示、加载时检查和分享</li>
+      </ul>
+
+      <h3 id="sub-dep-manifest" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>manifest 声明</h3>
+      <pre className="p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`// manifest 中的 dependencies 字段
+{
+  "dependencies": [
+    {
+      "pluginId": "com.example.dice-service",
+      "versionRange": "^1.0.0",
+      "optional": false
+    },
+    {
+      "pluginId": "com.example.optional-feature",
+      "optional": true
+    }
+  ]
+}`}
+      </pre>
+      <table className="w-full mt-3 text-xs">
+        <thead><tr style={{ borderBottom: `1px solid ${s.border}` }}>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>字段</th>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>类型</th>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>说明</th>
+        </tr></thead>
+        <tbody>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>pluginId</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>string（必填）</td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>依赖的插件 ID</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>versionRange</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>string（可选）</td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>版本范围约束，如 ^1.0.0</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>optional</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>boolean（可选）</td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>是否为可选依赖，默认 false</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3 id="sub-dep-version" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>版本范围语法</h3>
+      <table className="w-full text-xs">
+        <thead><tr style={{ borderBottom: `1px solid ${s.border}` }}>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>语法</th>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>含义</th>
+          <th className="py-1.5 text-left font-medium" style={{ color: s.textMuted }}>示例</th>
+        </tr></thead>
+        <tbody>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5">精确匹配</td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>版本必须完全相同</td>
+            <td className="py-1.5"><code style={codeStyle}>1.0.0</code></td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>^</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>主版本号相同，次版本和补丁 &gt;= 指定版本</td>
+            <td className="py-1.5"><code style={codeStyle}>^1.2.0</code> 匹配 1.2.0 ~ 1.99.99</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>~</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>主版本和次版本相同，补丁 &gt;= 指定版本</td>
+            <td className="py-1.5"><code style={codeStyle}>~1.2.0</code> 匹配 1.2.0 ~ 1.2.99</td>
+          </tr>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <td className="py-1.5"><code style={codeStyle}>&gt;=</code></td>
+            <td className="py-1.5" style={{ color: s.textSecondary }}>大于等于指定版本</td>
+            <td className="py-1.5"><code style={codeStyle}>&gt;=1.0.0</code></td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3 id="sub-dep-runtime" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>运行时加载（推荐）</h3>
+      <p className="text-xs leading-relaxed mb-2" style={{ color: s.textSecondary }}>
+        使用 <code style={codeStyle}>xinyu.plugin.loadDependency()</code> 在运行时加载依赖，失败时可自行降级处理：
+      </p>
+      <pre className="p-3 rounded-lg text-xs overflow-x-auto" style={preStyle}>
+{`function setup(xinyu) {
+  xinyu.plugin.on('onGameInit', async function() {
+    // 尝试加载依赖，失败时降级
+    var diceExports = await xinyu.plugin.loadDependency(
+      'com.example.dice-service',
+      { version: '^1.0.0' }
+    );
+
+    if (diceExports && diceExports.rollDice) {
+      var result = diceExports.rollDice(20);
+      xinyu.chat.insertSystemMessage('🎲 投掷结果：' + result);
+    } else {
+      // 降级方案：使用内置简单骰子
+      var result = Math.floor(Math.random() * 20) + 1;
+      xinyu.chat.insertSystemMessage('🎲 投掷结果（简易）：' + result);
+    }
+  });
+}`}
+      </pre>
+      <div className="mt-3 p-3 rounded-lg" style={{ backgroundColor: s.bgTertiary, border: `1px solid ${s.border}` }}>
+        <p className="text-xs" style={{ color: s.textSecondary }}>
+          <strong>加载时依赖检查</strong>：插件加载时，系统会自动检查 manifest 中声明的依赖。必需依赖缺失时插件不会调用 setup()；可选依赖缺失则正常加载但记录警告。
+        </p>
+      </div>
+
+      <h3 id="sub-dep-editor" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>编辑器中的依赖管理</h3>
+      <p className="text-xs leading-relaxed" style={{ color: s.textSecondary }}>
+        在插件编辑器（<NavLink sectionId="overview">创建</NavLink> / <NavLink sectionId="overview">编辑</NavLink>页面）的中列，提供可视化的依赖管理界面：
+      </p>
+      <ul className="list-disc pl-5 mt-2 space-y-1">
+        <li className="text-xs" style={{ color: s.textSecondary }}><strong>从代码扫描</strong>：自动检测代码中的 <code style={codeStyle}>loadDependency</code>、<code style={codeStyle}>callPlugin</code> 等调用，提取依赖</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}><strong>手动添加</strong>：输入插件 ID 和版本范围，手动添加依赖</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}><strong>状态可视化</strong>：实时显示每个依赖的安装状态（✅ 已安装 / ❌ 未安装 / ⚠️ 版本不匹配）</li>
+        <li className="text-xs" style={{ color: s.textSecondary }}><strong>删除</strong>：移除不需要的依赖项</li>
+      </ul>
+    </div>
+  );
+}
+
+function DebugSection() {
+  return (
+    <div>
+      <h3 id="sub-debug-tools" className="text-sm font-bold mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>使用浏览器开发者工具</h3>
+      <p>插件代码运行在浏览器中，可以直接使用 <code style={codeStyle}>console.log</code> 进行调试：</p>
+      <pre style={preStyle}>{CODE_DEBUG_EXAMPLE}</pre>
+
+      <h3 id="sub-debug-faq" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>常见问题排查</h3>
+      <table className="w-full text-xs mt-2" style={{ borderCollapse: 'collapse' }}>
+        <thead>
+          <tr style={{ borderBottom: `1px solid ${s.border}` }}>
+            <th className="text-left py-2 pr-4" style={{ color: s.textPrimary }}>问题</th>
+            <th className="text-left py-2" style={{ color: s.textPrimary }}>可能原因</th>
+          </tr>
+        </thead>
+        <tbody>
+          {[
+            ['API 调用无效果', '未声明对应权限（commonPermissions / exclusivePermissions），或插件未启用'],
+            ['registerSlot 内容不显示', '对应的插槽容器不存在于当前页面，或权限不足'],
+            ['插件加载报错', '代码语法错误，检查浏览器控制台的错误信息'],
+            ['UI 样式异常', '使用了硬编码颜色而非 <NavLink sectionId="css-variables">CSS 变量</NavLink>，或被其他插件样式覆盖'],
+            ['模态框不显示', '缺少 modal:custom 权限，或 showModal 返回了 null'],
+            ['DOM 操作报错', '缺少 dom:free 权限，或尝试操作不属于自己的元素'],
+            ['插件卸载后残留', '检查控制台是否有清理错误，资源追踪器会自动清理'],
+            ['AI 拦截不生效', 'handler 未正确返回值，或插件未启用，详见 <NavLink sectionId="ai-interception">AI 拦截系统</NavLink>'],
+            ['配置读取为 undefined', 'configSchema 中未定义该字段，或用户未设置且 defaultValue 为 undefined'],
+            ['存储数据丢失', 'localStorage 被清除，或浏览器隐私模式下使用'],
+          ].map(([problem, cause]) => (
+            <tr key={problem} style={{ borderBottom: `1px solid ${s.border}` }}>
+              <td className="py-2 pr-4" style={{ color: s.textPrimary }}>{problem}</td>
+              <td className="py-2">{cause}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <h3 id="sub-debug-scan" className="text-sm font-bold mt-6 mb-2 scroll-mt-4" style={{ color: s.textPrimary }}>安全检测</h3>
+      <p>在插件创建/编辑页面中，点击&ldquo;AI 安全检测&rdquo;按钮可以对插件代码进行安全分析，检测潜在的风险操作，详见 <NavLink sectionId="security">安全机制详解</NavLink>。</p>
+    </div>
+  );
+}