xinyu-pro 0.21.0

package/app/extensions/create/page.tsx

@@ -0,0 +1,1422 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Editor, { type OnMount } from '@monaco-editor/react';
+import { createPlugin, getPlugin, scanPluginSecurity } from '@/lib/storage';
+import { parseManifestFromCode } from '@/lib/manifest-parser';
+import { useTheme } from '@/components/ui/ThemeProvider';
+import {
+  PluginType,
+  PluginManifest,
+  PluginConfigField,
+  PluginDependency,
+  SecurityScanResult,
+  PLUGIN_TYPE_LABELS,
+  UIPermission,
+  UI_PERMISSION_LABELS,
+} from '@/lib/plugin-types';
+import { useToast } from '@/components/ui/ToastProvider';
+import PageHeader from '@/components/ui/PageHeader';
+import { useRouterHistory } from '@/lib/router-history';
+import MathCurveLoader from '@/components/MathCurveLoader';
+
+// ==================== 常量 ====================
+
+const CONFIG_FIELD_TYPES: PluginConfigField['type'][] = ['text', 'number', 'boolean', 'select', 'textarea'];
+const CONFIG_FIELD_TYPE_LABELS: Record<PluginConfigField['type'], string> = {
+  text: '文本',
+  number: '数字',
+  boolean: '布尔',
+  select: '下拉选择',
+  textarea: '多行文本',
+};
+
+/** Monaco Editor 可选主题 */
+const EDITOR_THEMES = [
+  { id: 'vs', label: '浅色', color: '#f0f0f0' },
+  { id: 'vs-dark', label: '深色', color: '#1e1e1e' },
+  { id: 'hc-black', label: '高对比', color: '#000000' },
+] as const;
+
+// ==================== 通用样式辅助 ====================
+
+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)',
+};
+
+// ==================== 子组件 ====================
+
+function TextField({
+  value,
+  onChange,
+  placeholder,
+  mono = false,
+  type = 'text',
+  className = '',
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  mono?: boolean;
+  type?: string;
+  className?: string;
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className={`w-full px-3 py-1.5 rounded-lg text-sm border outline-none transition-colors ${className}`}
+      style={{
+        backgroundColor: s.bgTertiary,
+        borderColor: s.border,
+        color: s.textPrimary,
+        fontFamily: mono ? 'monospace' : 'inherit',
+      }}
+      onFocus={(e) => (e.target.style.borderColor = s.accent)}
+      onBlur={(e) => (e.target.style.borderColor = s.border)}
+    />
+  );
+}
+
+function TextAreaField({
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  rows?: number;
+}) {
+  return (
+    <textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      rows={rows}
+      className="w-full px-3 py-2 rounded-lg text-sm border outline-none transition-colors resize-y"
+      style={{
+        backgroundColor: s.bgTertiary,
+        borderColor: s.border,
+        color: s.textPrimary,
+      }}
+      onFocus={(e) => (e.target.style.borderColor = s.accent)}
+      onBlur={(e) => (e.target.style.borderColor = s.border)}
+    />
+  );
+}
+
+function SelectField({
+  value,
+  onChange,
+  options,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  options: { label: string; value: string }[];
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full px-3 py-1.5 rounded-lg text-sm border outline-none transition-colors cursor-pointer"
+      style={{
+        backgroundColor: s.bgTertiary,
+        borderColor: s.border,
+        color: s.textPrimary,
+      }}
+      onFocus={(e) => (e.target.style.borderColor = s.accent)}
+      onBlur={(e) => (e.target.style.borderColor = s.border)}
+    >
+      {options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+// ==================== 拖拽分隔条组件 ====================
+
+function ResizableDivider({
+  onResize,
+}: {
+  onResize: (deltaX: number) => void;
+}) {
+  const isDragging = useRef(false);
+  const lastX = useRef(0);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isDragging.current = true;
+    lastX.current = e.clientX;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current) return;
+      const delta = e.clientX - lastX.current;
+      lastX.current = e.clientX;
+      onResize(delta);
+    };
+
+    const handleMouseUp = () => {
+      if (!isDragging.current) return;
+      isDragging.current = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [onResize]);
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      className="w-1.5 shrink-0 cursor-col-resize flex items-center justify-center group relative"
+      style={{ backgroundColor: s.border }}
+    >
+      <div
+        className="absolute inset-y-0 -left-1 -right-1 z-10"
+      />
+      <div
+        className="w-0.5 h-8 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+        style={{ backgroundColor: s.accent }}
+      />
+    </div>
+  );
+}
+
+  // ==================== 插件指南数据 ====================
+
+interface ApiEntry {
+  name: string;
+  desc: string;
+  example?: string;
+}
+
+interface PluginGuide {
+  title: string;
+  icon: string;
+  description: string;
+  availableApis: ApiEntry[];
+  bestPractices: string[];
+  codeTemplate: string;
+}
+
+/** 全局 API（所有插件类型通用） */
+const GLOBAL_APIS: ApiEntry[] = [
+  { name: 'xinyu.ui.registerSlot(slotId, html, opts)', desc: '在预定义插槽位置注入自定义 UI（12 个可用位置）', example: "xinyu.ui.registerSlot('status-bar', '<div>状态信息</div>', { priority: 1 })" },
+  { name: 'xinyu.ui.unregisterSlot(id)', desc: '移除之前注册的插槽内容' },
+  { name: 'xinyu.ui.showModal(options)', desc: '显示自定义模态框（支持标题、内容、按钮）', example: "xinyu.ui.showModal({ title: '标题', content: '<div>内容</div>', actions: [{ text: '确认', primary: true, onClick: function() {} }] })" },
+  { name: 'xinyu.ui.closeModal(modalId)', desc: '关闭指定模态框，返回 showModal 的 id' },
+  { name: 'xinyu.ui.confirm(title, msg, opts)', desc: '显示确认对话框，返回 Promise<boolean>', example: "var ok = await xinyu.ui.confirm('确认？', '描述', { danger: true })" },
+  { name: 'xinyu.ui.dom.create(tag, attrs, children)', desc: '创建 DOM 元素代理（需要 dom:free 权限）', example: "var el = xinyu.ui.dom.create('div', { className: 'my-panel' }, 'Hello')" },
+  { name: 'xinyu.ui.dom.append(slotId, element)', desc: '将元素追加到指定容器（支持插槽 ID）' },
+  { name: 'xinyu.ui.dom.remove(elementId)', desc: '移除插件创建的 DOM 元素' },
+  { name: 'xinyu.ui.dom.update(id, props)', desc: '更新元素的属性、样式、内容' },
+  { name: 'xinyu.ui.dom.query(slotId, selector)', desc: '在容器内查询插件自己的元素' },
+  { name: 'xinyu.ui.dom.on(id, event, handler)', desc: '为插件元素绑定事件' },
+  { name: 'xinyu.ui.injectStyle(css)', desc: '注入自定义 CSS 样式，返回 styleId', example: "xinyu.ui.injectStyle('.my-class { color: var(--color-accent); }')" },
+  { name: 'xinyu.ui.removeStyle(styleId)', desc: '移除之前注入的 CSS 样式' },
+  { name: 'xinyu.ui.onHostEvent(event, handler)', desc: '监听宿主 UI 事件（message:received 等）', example: "xinyu.ui.onHostEvent('message:received', function(data) { ... })" },
+  { name: 'xinyu.ui.offHostEvent(event, handler)', desc: '取消监听宿主事件' },
+  { name: 'xinyu.ui.toast(message, type)', desc: '显示 Toast 通知（info/success/warning/error）' },
+  { name: 'xinyu.plugin.storage', desc: '插件独立持久化存储（get/set/remove/keys）' },
+  { name: 'xinyu.plugin.on(hook, handler)', desc: '注册生命周期钩子（onLoad/onUnload/onGameStart 等）' },
+  { name: 'xinyu.utils.eventBus', desc: '插件间通信的事件总线（on/off/emit）' },
+];
+
+const PLUGIN_GUIDES: Record<PluginType, PluginGuide> = {
+  'game-mechanics': {
+    title: '游戏机制插件',
+    icon: '\u{1F3AE}',
+    description: '扩展游戏核心玩法，如属性系统、骰子、战斗、背包等。通过注册游戏属性和快捷指令来增强角色扮演体验。',
+    availableApis: [
+      { name: 'xinyu.game.registerAttribute(attr)', desc: '注册游戏属性（如金币、HP），显示在游戏界面顶部', example: "xinyu.game.registerAttribute({ key: 'gold', label: '金币', type: 'number', value: 100, icon: '\uD83D\uDCB0' })" },
+      { name: 'xinyu.game.setAttribute(key, value)', desc: '在运行时修改属性值', example: "xinyu.game.setAttribute('gold', 50)" },
+      { name: 'xinyu.game.getAttributes()', desc: '获取所有已注册的属性列表' },
+      { name: 'xinyu.game.getState() / setState()', desc: '读写游戏全局状态（任意键值对）' },
+      { name: 'xinyu.chat.registerCommand(cmd)', desc: '注册快捷指令（如 /roll、/attr）', example: "xinyu.chat.registerCommand({ name: '/roll', description: '\uD83C\uDFB2', icon: '\uD83C\uDFB2', handler: function(args) { ... } })" },
+      { name: 'xinyu.chat.insertSystemMessage()', desc: '向对话中插入系统消息（灰色居中提示）' },
+      { name: 'xinyu.ai.onPromptBuild(fn)', desc: '在 AI 系统提示词末尾追加内容（如注入属性状态）', example: "xinyu.ai.onPromptBuild(function(prompt) { return prompt + '\\n\u5F53\u524D\u91D1\u5E01: ' + gold; })" },
+      { name: 'xinyu.utils.rollDice(notation)', desc: '解析骰子表达式（如 2d6+3）', example: "xinyu.utils.rollDice('2d6+3') // { rolls: [3,5], modifier: 3, total: 11 }" },
+      { name: 'xinyu.plugin.storage', desc: '插件独立持久化存储（get/set/remove/keys）' },
+    ],
+    bestPractices: [
+      '在 onLoad 钩子中初始化属性和注册指令',
+      '使用 ai.onPromptBuild 将游戏状态注入 AI 提示词，让 AI 了解当前属性',
+      '用 insertSystemMessage 显示骰子结果和属性变更，而非直接修改 AI 回复',
+      '属性变更后记得调用 setAttribute 更新界面显示',
+      '使用 plugin.storage 持久化插件数据，避免数据丢失',
+    ],
+    codeTemplate: `function setup(xinyu) {\n  // 1. 注册游戏属性\n  xinyu.game.registerAttribute({\n    key: 'gold',\n    label: '\u91D1\u5E01',\n    type: 'number',\n    value: 100,\n    icon: '\uD83D\uDCB0',\n    group: '\u57FA\u7840\u5C5E\u6027'\n  });\n\n  // 2. 注册快捷指令\n  xinyu.chat.registerCommand({\n    name: '/roll',\n    description: '\u6295\u9AB0\u5B50',\n    icon: '\uD83C\uDFB2',\n    handler: function(args) {\n      var result = xinyu.utils.rollDice(args || '1d20');\n      xinyu.chat.insertSystemMessage(\n        '\uD83C\uDFB2 ' + result.notation + ' = [' + result.rolls.join(', ') + '] = ' + result.total\n      );\n    }\n  });\n\n  // 3. 注入 AI Prompt\n  xinyu.ai.onPromptBuild(function(prompt) {\n    var attrs = xinyu.game.getAttributes();\n    var status = attrs.map(function(a) { return a.icon + ' ' + a.label + ': ' + a.value; });\n    return prompt + '\\n\\n## \u89D2\u8272\u72B6\u6001\\n' + status.join('\\n');\n  });\n}`,
+  },
+  'message-render': {
+    title: '消息渲染插件',
+    icon: '\u{1F3A8}',
+    description: '自定义 AI 消息的渲染方式，如 Markdown 解析、代码高亮、特殊格式（表格、卡片）等。不影响 AI 生成内容，只改变显示效果。',
+    availableApis: [
+      { name: 'xinyu.chat.registerMessageRenderer(matcher, renderer)', desc: '注册消息渲染器，matcher 匹配消息，renderer 返回 HTML', example: "xinyu.chat.registerMessageRenderer(\n  function(msg) { return msg.role === 'assistant'; },\n  function(msg) { return msg.content.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>'); }\n)" },
+    ],
+    bestPractices: [
+      '渲染器仅对 AI 消息生效（matcher 中检查 role === "assistant"）',
+      '返回的 HTML 字符串会被 dangerouslySetInnerHTML 渲染，注意 XSS 安全',
+      '不要修改原始消息内容，只改变显示形式',
+      '多个渲染器按注册顺序执行，第一个匹配的生效',
+      '使用 CSS 变量保持与主题系统一致（如 var(--color-accent)）',
+    ],
+    codeTemplate: `function setup(xinyu) {\n  function renderMarkdown(text) {\n    var html = text;\n    html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');\n    html = html.replace(/\\*(.+?)\\*/g, '<em>$1</em>');\n    html = html.replace(/\`(.+?)\`/g, '<code style=\"background:rgba(255,255,255,0.1);padding:1px 4px;border-radius:3px;\">$1</code>');\n    return html;\n  }\n\n  xinyu.chat.registerMessageRenderer(\n    function(msg) { return msg.role === 'assistant'; },\n    function(msg) { return renderMarkdown(msg.content); }\n  );\n}`,
+  },
+  'ai-prompt': {
+    title: 'AI Prompt 插件',
+    icon: '\u{1F916}',
+    description: '修改 AI 的系统提示词或拦截消息流，改变 AI 的行为方式。如注入 NPC 人格、修改叙事风格、添加世界观约束等。',
+    availableApis: [
+      { name: 'xinyu.ai.onPromptBuild(fn)', desc: '修改最终发送给 AI 的系统提示词', example: "xinyu.ai.onPromptBuild(function(prompt) { return prompt + '\\n\u989D\u5916\u89C4\u5219\uFF1A...'; })" },
+      { name: 'xinyu.ai.onBeforeSend(fn)', desc: '在发送前修改消息数组（可添加/删除/重排消息）', example: "xinyu.ai.onBeforeSend(function(messages) { return messages; })" },
+      { name: 'xinyu.ai.onAfterReceive(fn)', desc: '修改 AI 回复内容（后处理）', example: "xinyu.ai.onAfterReceive(function(content) { return content.replace(/xxx/g, 'yyy'); })" },
+      { name: 'xinyu.ai.onRequestConfig(fn)', desc: '修改 AI 请求参数（temperature、maxTokens、model）', example: "xinyu.ai.onRequestConfig(function(cfg) { cfg.temperature = 0.9; return cfg; })" },
+      { name: 'xinyu.chat.registerCommand(cmd)', desc: '注册指令来动态调整 AI 行为' },
+      { name: 'xinyu.plugin.storage', desc: '存储 NPC 设定等持久化数据' },
+    ],
+    bestPractices: [
+      'onPromptBuild 是最常用的 Hook，适合追加世界观规则和 NPC 设定',
+      '追加的提示词应简洁明确，避免过长导致 token 浪费',
+      '使用 plugin.storage 保存用户设定的 NPC 人格等数据',
+      'onAfterReceive 可用于过滤或格式化 AI 回复，但不要过度修改',
+      'onRequestConfig 可临时调整 AI 参数（如战斗场景降低 temperature）',
+    ],
+    codeTemplate: `function setup(xinyu) {\n  xinyu.chat.registerCommand({\n    name: '/npc',\n    description: '\u8BBE\u5B9A NPC \u4EBA\u683C',\n    icon: '\uD83E\uDDD9',\n    handler: function(args) {\n      var parts = args.trim().split(/\\s+/);\n      var name = parts[0];\n      var personality = parts.slice(1).join(' ');\n      xinyu.plugin.storage.set('npc_name', name);\n      xinyu.plugin.storage.set('npc_personality', personality);\n      xinyu.chat.insertSystemMessage('\uD83E\uDDD9 NPC \"' + name + '\" \u4EBA\u683C\u5DF2\u8BBE\u5B9A');\n    }\n  });\n\n  xinyu.ai.onPromptBuild(function(prompt) {\n    var npcName = xinyu.plugin.storage.get('npc_name');\n    var npcPersonality = xinyu.plugin.storage.get('npc_personality');\n    if (npcName && npcPersonality) {\n      return prompt + '\\n\\n## NPC \u8BBE\u5B9A\\n\"' + npcName + '\": ' + npcPersonality;\n    }\n    return prompt;\n  });\n}`,
+  },
+  'input-enhance': {
+    title: '输入增强插件',
+    icon: '\u2328\uFE0F',
+    description: '增强用户输入体验，如在输入框上方添加快捷操作按钮、自动补全、快捷指令面板等。',
+    availableApis: [
+      { name: 'xinyu.ui.registerInputToolbarButton(btn)', desc: '在输入框上方添加快捷按钮', example: "xinyu.ui.registerInputToolbarButton({ id: 'look', label: '\u89C2\u5BDF', icon: '\uD83D\uDC40', order: 1, onClick: function() { xinyu.chat.send('\u6211\u89C2\u5BDF\u5468\u56F4\u73AF\u5883'); } })" },
+      { name: 'xinyu.chat.send(content)', desc: '程序化发送消息（等同于用户输入）' },
+      { name: 'xinyu.chat.registerCommand(cmd)', desc: '注册快捷指令（用户输入 /xxx 触发）' },
+      { name: 'xinyu.ui.registerSidebarPanel(panel)', desc: '注册侧边栏面板（高级功能）' },
+      { name: 'xinyu.ui.toast(message, type)', desc: '显示 Toast 通知' },
+    ],
+    bestPractices: [
+      '工具栏按钮的 order 值越小越靠前',
+      '按钮的 onClick 中使用 xinyu.chat.send() 发送预设消息',
+      '快捷指令名以 / 开头，handler 返回值会作为系统消息显示',
+      '不要注册过多按钮（建议不超过 6 个），避免界面拥挤',
+      '使用 toast 向用户反馈操作结果',
+    ],
+    codeTemplate: `function setup(xinyu) {\n  xinyu.ui.registerInputToolbarButton({\n    id: 'look',\n    label: '\u89C2\u5BDF',\n    icon: '\uD83D\uDC40',\n    order: 1,\n    onClick: function() {\n      xinyu.chat.send('\u6211\u4ED4\u7EC6\u89C2\u5BDF\u5468\u56F4\u7684\u73AF\u5883');\n    }\n  });\n\n  xinyu.ui.registerInputToolbarButton({\n    id: 'inventory',\n    label: '\u7269\u54C1',\n    icon: '\uD83C\uDF92',\n    order: 2,\n    onClick: function() {\n      xinyu.chat.send('\u6211\u68C0\u67E5\u81EA\u5DF1\u7684\u968F\u8EAB\u7269\u54C1');\n    }\n  });\n\n  xinyu.chat.registerCommand({\n    name: '/help',\n    description: '\u663E\u793A\u5E2E\u52A9\u4FE1\u606F',\n    icon: '\u2753',\n    handler: function() {\n      xinyu.chat.insertSystemMessage('\uD83D\uDCD6 \u53EF\u7528\u6307\u4EE4\uFF1A/help - \u5E2E\u52A9');\n    }\n  });\n}`,
+  },
+};
+
+// ==================== 主页面 ====================
+
+function CreatePluginPageContent() {
+  const { activeTheme } = useTheme();
+  const router = useRouter();
+  const { navigate } = useRouterHistory();
+  const { toast } = useToast();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [midWidth, setMidWidth] = useState(380);
+
+  const [name, setName] = useState('');
+  const [pluginId, setPluginId] = useState('');
+  const [version, setVersion] = useState('1.0.0');
+  const [author, setAuthor] = useState('');
+  const [icon, setIcon] = useState('');
+  const [type, setType] = useState<PluginType>('game-mechanics');
+  const [description, setDescription] = useState('');
+  const [code, setCode] = useState(`function setup(xinyu) {\n  // 在此编写插件逻辑\n  \n}\n`);
+  const [configSchema, setConfigSchema] = useState<PluginConfigField[]>([]);
+  const [commonPermissions, setCommonPermissions] = useState<UIPermission[]>([]);
+  const [exclusivePermissions, setExclusivePermissions] = useState<UIPermission[]>([]);
+  const [requiredPermissions, setRequiredPermissions] = useState<UIPermission[]>([]);
+  const [configSectionCollapsed, setConfigSectionCollapsed] = useState(true);
+  const [collapsedConfigItems, setCollapsedConfigItems] = useState<Set<number>>(new Set());
+  const [depSectionCollapsed, setDepSectionCollapsed] = useState(true);
+  const [permSectionCollapsed, setPermSectionCollapsed] = useState(true);
+  const [dependencies, setDependencies] = useState<PluginDependency[]>([]);
+  const [depStatuses, setDepStatuses] = useState<Record<string, 'satisfied' | 'missing' | 'version_mismatch'>>({});
+  const [showAddDep, setShowAddDep] = useState(false);
+  const [newDepId, setNewDepId] = useState('');
+  const [newDepVersion, setNewDepVersion] = useState('');
+  const [newDepOptional, setNewDepOptional] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [scanResult, setScanResult] = useState<SecurityScanResult | null>(null);
+  const [scanning, setScanning] = useState(false);
+  const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
+  const [editorTheme, setEditorTheme] = useState<string>('vs-dark');
+  const [themeMenuOpen, setThemeMenuOpen] = useState(false);
+
+  useEffect(() => {
+    setEditorTheme(activeTheme.isDark ? 'vs-dark' : 'vs');
+  }, [activeTheme.isDark]);
+
+  const handleEditorMount: OnMount = useCallback((editor) => {
+    editorRef.current = editor;
+  }, []);
+
+  const typeOptions = Object.entries(PLUGIN_TYPE_LABELS).map(([key, val]) => ({
+    label: `${val.icon} ${val.label}`,
+    value: key,
+  }));
+
+  const handleResizeMid = useCallback((deltaX: number) => {
+    setMidWidth((prev) => Math.max(280, Math.min(600, prev + deltaX)));
+  }, []);
+
+  const handleAddConfigField = () => {
+    setConfigSchema((prev) => [
+      ...prev,
+      { key: `field_${Date.now()}`, label: '', type: 'text', defaultValue: '' },
+    ]);
+  };
+
+  const handleRemoveConfigField = (index: number) => {
+    setConfigSchema((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleUpdateConfigField = (index: number, field: Partial<PluginConfigField>) => {
+    setConfigSchema((prev) => prev.map((f, i) => (i === index ? { ...f, ...field } : f)));
+  };
+
+  // ==================== 依赖管理 ====================
+
+  const checkDependencyStatuses = useCallback(async (deps: PluginDependency[]) => {
+    const statuses: Record<string, 'satisfied' | 'missing' | 'version_mismatch'> = {};
+    for (const dep of deps) {
+      try {
+        const res = await fetch(`/api/plugins?id=${dep.pluginId}`);
+        if (!res.ok) {
+          statuses[dep.pluginId] = 'missing';
+          continue;
+        }
+        const plugin = await res.json();
+        if (dep.versionRange && plugin.version) {
+          const installed = plugin.version.replace(/^\^|~/, '').split('.').map(Number);
+          const required = dep.versionRange.replace(/^\^|~/, '').split('.').map(Number);
+          const majorOk = installed[0] === required[0];
+          const minorOk = installed[0] === required[0] ? installed[1] >= required[1] : false;
+          statuses[dep.pluginId] = (majorOk && minorOk) ? 'satisfied' : 'version_mismatch';
+        } else {
+          statuses[dep.pluginId] = 'satisfied';
+        }
+      } catch {
+        statuses[dep.pluginId] = 'missing';
+      }
+    }
+    setDepStatuses(statuses);
+  }, []);
+
+  const scanDependencies = useCallback(() => {
+    const regex = /(?:loadDependency|callPlugin|isPluginAvailable|getPluginExports)\s*\(\s*['"]([^'"]+)['"]/g;
+    const matches = new Set<string>();
+    let match;
+    while ((match = regex.exec(code)) !== null) {
+      matches.add(match[1]);
+    }
+    if (matches.size === 0) {
+      toast('未在代码中发现依赖调用', 'info');
+      return;
+    }
+    setDependencies(prev => {
+      const existing = new Map(prev.map(d => [d.pluginId, d]));
+      for (const pluginId of Array.from(matches)) {
+        if (!existing.has(pluginId)) {
+          existing.set(pluginId, { pluginId });
+        }
+      }
+      const updated = Array.from(existing.values());
+      checkDependencyStatuses(updated);
+      return updated;
+    });
+    toast(`扫描到 ${matches.size} 个依赖`, 'success');
+  }, [code, toast, checkDependencyStatuses]);
+
+  const handleAddDependency = () => {
+    if (!newDepId.trim()) {
+      toast('请填写插件 ID', 'warning');
+      return;
+    }
+    if (dependencies.some(d => d.pluginId === newDepId.trim())) {
+      toast('该依赖已存在', 'warning');
+      return;
+    }
+    const newDep: PluginDependency = {
+      pluginId: newDepId.trim(),
+      ...(newDepVersion.trim() ? { versionRange: newDepVersion.trim() } : {}),
+      optional: newDepOptional,
+    };
+    const updated = [...dependencies, newDep];
+    setDependencies(updated);
+    checkDependencyStatuses(updated);
+    setNewDepId('');
+    setNewDepVersion('');
+    setNewDepOptional(false);
+    setShowAddDep(false);
+  };
+
+  const handleRemoveDependency = (pluginId: string) => {
+    const updated = dependencies.filter(d => d.pluginId !== pluginId);
+    setDependencies(updated);
+    setDepStatuses(prev => {
+      const next = { ...prev };
+      delete next[pluginId];
+      return next;
+    });
+  };
+
+  const depStatusIcon = (status: string) => {
+    switch (status) {
+      case 'satisfied': return <span title="已安装" style={{ color: '#22c55e' }}>&#10004;</span>;
+      case 'missing': return <span title="未安装" style={{ color: '#ef4444' }}>&#10008;</span>;
+      case 'version_mismatch': return <span title="版本不匹配" style={{ color: '#f59e0b' }}>&#9888;</span>;
+      default: return null;
+    }
+  };
+
+  const depStatusLabel = (status: string) => {
+    switch (status) {
+      case 'satisfied': return '已安装';
+      case 'missing': return '未安装';
+      case 'version_mismatch': return '版本不匹配';
+      default: return '检查中...';
+    }
+  };
+
+  /** 从代码注释解析 manifest 信息并填充表单（静默模式不弹 toast） */
+  const applyParsedManifest = async (silent = false) => {
+    const parsed = parseManifestFromCode(code);
+    let count = 0;
+
+    // 处理 @plugin-id：检查数据库是否重复
+    if (parsed.id) {
+      const existing = await getPlugin(parsed.id);
+      if (existing) {
+        toast(`插件 ID「${parsed.id}」已存在，解析失败`, 'error');
+        return 0;
+      }
+      setPluginId(parsed.id);
+      count++;
+    }
+
+    if (parsed.name) { setName(parsed.name); count++; }
+    if (parsed.version) { setVersion(parsed.version); count++; }
+    if (parsed.author) { setAuthor(parsed.author); count++; }
+    if (parsed.icon) { setIcon(parsed.icon); count++; }
+    if (parsed.type) { setType(parsed.type); count++; }
+    if (parsed.description) { setDescription(parsed.description); count++; }
+    if (parsed.permissions?.length) { setCommonPermissions(parsed.permissions); count++; }
+    if (parsed.exclusivePermissions?.length) { setExclusivePermissions(parsed.exclusivePermissions); count++; }
+    if (parsed.requiredPermissions?.length) { setRequiredPermissions(parsed.requiredPermissions); count++; }
+    if (parsed.configSchema && parsed.configSchema.length > 0) {
+      setConfigSchema(parsed.configSchema);
+      count += parsed.configSchema.length;
+    }
+    if (!silent) {
+      if (count > 0) {
+        toast(`已从注释解析 ${count} 项信息`, 'success');
+      } else {
+        toast('未在代码中发现 manifest 注释', 'warning');
+      }
+    }
+    return count;
+  };
+
+  const handleSave = async ({completed = false} = {}) => {
+    if (!name.trim() || !pluginId.trim() || !code.trim()) {
+      toast('请填写名称、ID 和代码', 'warning');
+      return;
+    }
+    // 保存前自动从代码解析 manifest 信息，直接使用解析结果构建数据
+    const parsed = parseManifestFromCode(code);
+
+    // 处理 @plugin-id：代码注释中的 ID 优先，但需检查重复
+    let finalId = pluginId.trim();
+    if (parsed.id?.trim()) {
+      const codeId = parsed.id.trim();
+      if (codeId !== finalId) {
+        const existing = await getPlugin(codeId);
+        if (existing) {
+          toast(`插件 ID「${codeId}」已存在，请修改 @plugin-id`, 'error');
+          return;
+        }
+        finalId = codeId;
+        setPluginId(codeId);
+      }
+    }
+
+    // 检查最终 ID 是否重复
+    const idExisting = await getPlugin(finalId);
+    if (idExisting) {
+      toast(`插件 ID「${finalId}」已存在，请修改插件 ID`, 'error');
+      return;
+    }
+
+    const finalName = parsed.name?.trim() || name.trim();
+    const finalVersion = parsed.version?.trim() || version.trim() || '1.0.0';
+    const finalAuthor = parsed.author?.trim() || author.trim() || '匿名';
+    const finalIcon = parsed.icon?.trim() || icon.trim() || undefined;
+    const finalType = parsed.type || type;
+    const finalDescription = parsed.description?.trim() || description.trim();
+    const finalCommonPermissions = parsed.permissions?.length ? parsed.permissions : (commonPermissions.length > 0 ? commonPermissions : undefined);
+    const finalExclusivePermissions = parsed.exclusivePermissions?.length ? parsed.exclusivePermissions : (exclusivePermissions.length > 0 ? exclusivePermissions : undefined);
+    const finalRequiredPermissions = parsed.requiredPermissions?.length ? parsed.requiredPermissions : (requiredPermissions.length > 0 ? requiredPermissions : undefined);
+    const finalConfigSchema = parsed.configSchema?.length ? parsed.configSchema : (configSchema.length > 0 ? configSchema : undefined);
+
+    // 同步更新表单状态（用户可见）
+    if (parsed.name) setName(parsed.name);
+    if (parsed.version) setVersion(parsed.version);
+    if (parsed.author) setAuthor(parsed.author);
+    if (parsed.icon) setIcon(parsed.icon);
+    if (parsed.type) setType(parsed.type);
+    if (parsed.description) setDescription(parsed.description);
+    if (parsed.permissions?.length) setCommonPermissions(parsed.permissions);
+    if (parsed.configSchema?.length) setConfigSchema(parsed.configSchema);
+
+    setSaving(true);
+    try {
+      const now = new Date().toISOString();
+      const plugin: PluginManifest = {
+        id: finalId,
+        name: finalName,
+        version: finalVersion,
+        author: finalAuthor,
+        type: finalType,
+        icon: finalIcon,
+        description: finalDescription,
+        code: code.trim(),
+        configSchema: finalConfigSchema,
+        commonPermissions: finalCommonPermissions,
+        exclusivePermissions: finalExclusivePermissions,
+        requiredPermissions: finalRequiredPermissions,
+        dependencies: dependencies.length > 0 ? dependencies : undefined,
+        createdAt: now,
+        updatedAt: now,
+      };
+      const ok = await createPlugin(plugin);
+      if (ok) {
+        toast('插件已创建', 'success');
+        if (!completed) {
+          navigate('/extensions/edit/' + encodeURIComponent(finalId), {record: false});
+        } else {
+          navigate('/extensions', {record: false});
+        }
+        router.refresh();
+      } else {
+        toast('保存失败，请重试', 'error');
+      }
+    } catch {
+      toast('保存失败', 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleScan = async () => {
+    if (!code.trim()) {
+      toast('请先编写插件代码', 'warning');
+      return;
+    }
+    setScanning(true);
+    setScanResult(null);
+    try {
+      const result = await scanPluginSecurity(code, { id: pluginId, name, type, author });
+      setScanResult(result);
+    } catch {
+      toast('安全检测失败', 'error');
+    } finally {
+      setScanning(false);
+    }
+  };
+
+  const riskColors: Record<string, string> = { low: '#22c55e', medium: '#f59e0b', high: '#ef4444', critical: '#dc2626' };
+  const riskLabels: Record<string, string> = { low: '低风险', medium: '中风险', high: '高风险', critical: '严重风险' };
+
+  return (
+    <div className="h-screen flex flex-col" style={{ backgroundColor: s.bgPrimary }}>
+      {/* ===== 顶部导航栏 ===== */}
+      <PageHeader
+        title="星语 · 创建插件"
+        showBack={true}
+        actions={
+          <div className="flex items-center gap-2">
+            <button
+                onClick={() => navigate('/extensions/tutorial')}
+                className="flex px-3 py-1.5 rounded-lg text-xs border transition-colors items-center gap-1.5"
+                style={{
+                  borderColor: s.border,
+                  color: s.textSecondary,
+                  backgroundColor: 'transparent',
+                }}
+                title="查看插件开发教程"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+              </svg>
+              开发教程
+            </button>
+            <button
+              onClick={() => {
+                const fileName = pluginId.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) + '.js';
+                const blob = new Blob([code], { type: 'text/javascript' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = fileName;
+                a.click();
+                URL.revokeObjectURL(url);
+              }}
+              className="px-3 py-1.5 rounded-lg text-xs border flex items-center gap-1.5 transition-colors"
+              style={{
+                borderColor: s.border,
+                color: s.textSecondary,
+                backgroundColor: 'transparent',
+              }}
+              title="仅导出插件代码为 .js 文件"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="16 18 22 12 16 6" />
+                <polyline points="8 6 2 12 8 18" />
+              </svg>
+              导出代码
+            </button>
+            <button
+              onClick={() => navigate('/extensions', {record: false, pop: true})}
+              className="px-4 py-1.5 rounded-lg text-xs border transition-colors"
+              style={{
+                borderColor: s.border,
+                color: s.textSecondary,
+                backgroundColor: 'transparent',
+              }}
+            >
+              取消创建
+            </button>
+            <button
+              onClick={() => handleSave({completed: false})}
+              disabled={saving}
+              className="px-4 py-1.5 rounded-lg text-xs border transition-colors"
+              style={{
+                borderColor: s.border,
+                color: s.textSecondary,
+                backgroundColor: 'transparent',
+              }}
+            >
+              {saving ? '创建中...' : '创建插件'}
+            </button>
+            <button
+              onClick={() => handleSave()}
+              disabled={saving}
+              className="px-5 py-1.5 rounded-lg text-xs font-bold transition-opacity"
+              style={{
+                backgroundColor: s.accent,
+                color: s.bgPrimary,
+                opacity: saving ? 0.6 : 1,
+              }}
+            >
+              {saving ? '创建中...' : '完成创建'}
+            </button>
+          </div>
+        }
+      />
+
+      {/* ===== 主体：两列布局 ===== */}
+      <div ref={containerRef} className="flex-1 flex overflow-hidden">
+        {/* 左侧：基础信息 + 配置项 + 安全检测 */}
+        <div
+          className="shrink-0 overflow-y-auto"
+          style={{
+            width: midWidth,
+            backgroundColor: s.bgPrimary,
+          }}
+        >
+          <div className="p-5 space-y-5">
+            {/* 基础信息 */}
+            <div>
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-sm font-bold" style={{ color: s.textPrimary }}>基础信息</h3>
+                <button
+                  onClick={() => applyParsedManifest()}
+                  className="px-2 py-1 rounded text-xs border transition-colors"
+                  style={{ borderColor: s.border, color: s.textMuted, backgroundColor: 'transparent' }}
+                  title="从代码注释中解析 @name、@version、@author、@config 等信息"
+                >
+                  <i className="fa-solid fa-wand-magic-sparkles" style={{ fontSize: '10px', marginRight: '4px' }} />
+                  从代码解析
+                </button>
+              </div>
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-xs mb-1" style={{ color: s.textMuted }}>名称 *</label>
+                  <TextField value={name} onChange={setName} placeholder="插件名称" />
+                </div>
+                <div>
+                  <label className="block text-xs mb-1" style={{ color: s.textMuted }}>ID *</label>
+                  <TextField value={pluginId} onChange={setPluginId} placeholder="author.plugin-name" mono />
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs mb-1" style={{ color: s.textMuted }}>版本</label>
+                    <TextField value={version} onChange={setVersion} placeholder="1.0.0" />
+                  </div>
+                  <div>
+                    <label className="block text-xs mb-1" style={{ color: s.textMuted }}>作者</label>
+                    <TextField value={author} onChange={setAuthor} placeholder="作者名" />
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs mb-1" style={{ color: s.textMuted }}>图标 (Emoji)</label>
+                    <TextField value={icon} onChange={setIcon} placeholder="例如：🎲" />
+                  </div>
+                  <div>
+                    <label className="block text-xs mb-1" style={{ color: s.textMuted }}>类型</label>
+                    <SelectField value={type} onChange={(v) => setType(v as PluginType)} options={typeOptions} />
+                  </div>
+                </div>
+                <div>
+                  <label className="block text-xs mb-1" style={{ color: s.textMuted }}>描述</label>
+                  <TextAreaField value={description} onChange={setDescription} placeholder="插件功能描述..." rows={5} />
+                </div>
+              </div>
+            </div>
+
+            {/* 配置项定义 */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2 cursor-pointer select-none" onClick={() => setConfigSectionCollapsed(v => !v)}>
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                    style={{ color: s.textMuted, transform: configSectionCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s ease' }}>
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                  <h3 className="text-sm font-bold" style={{ color: s.textPrimary }}>配置项定义（可选）</h3>
+                  {configSchema.length > 0 && (
+                    <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}>{configSchema.length}</span>
+                  )}
+                </div>
+                {!configSectionCollapsed && (
+                  <button
+                    onClick={handleAddConfigField}
+                    className="px-3 py-1 rounded-lg text-xs border"
+                    style={{ borderColor: s.accent, color: s.accent, backgroundColor: 'transparent' }}
+                  >
+                    + 添加
+                  </button>
+                )}
+              </div>
+              {!configSectionCollapsed && (
+                configSchema.length === 0 ? (
+                  <p className="text-xs" style={{ color: s.textMuted }}>暂无配置项</p>
+                ) : (
+                  <div className="space-y-3">
+                    {configSchema.map((field, idx) => (
+                      <div key={idx} className="rounded-lg border" style={{ backgroundColor: s.bgTertiary, borderColor: s.border }}>
+                        {/* 卡片头部（可折叠） */}
+                        <div
+                          className="flex items-center justify-between px-3 py-2 cursor-pointer select-none"
+                          onClick={() => setCollapsedConfigItems(prev => {
+                            const next = new Set(prev);
+                            if (next.has(idx)) { next.delete(idx); } else { next.add(idx); }
+                            return next;
+                          })}
+                        >
+                          <div className="flex items-center gap-2">
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                              style={{ color: s.textMuted, transform: collapsedConfigItems.has(idx) ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s ease' }}>
+                              <polyline points="6 9 12 15 18 9" />
+                            </svg>
+                            <span className="text-xs font-bold" style={{ color: s.textPrimary }}>
+                              {field.label || field.key || `配置项 #${idx + 1}`}
+                            </span>
+                            <span className="text-xs" style={{ color: s.textMuted }}>{field.type}</span>
+                          </div>
+                          <button onClick={(e) => { e.stopPropagation(); handleRemoveConfigField(idx); }} className="text-xs px-2 py-0.5 rounded" style={{ color: '#ef4444' }}>删除</button>
+                        </div>
+                        {/* 卡片内容 */}
+                        {!collapsedConfigItems.has(idx) && (
+                          <div className="px-3 pb-3 space-y-2">
+                            <div className="grid grid-cols-2 gap-2">
+                              <div>
+                                <label className="block text-xs mb-1" style={{ color: s.textMuted }}>键名</label>
+                                <TextField value={field.key} onChange={(v) => handleUpdateConfigField(idx, { key: v })} placeholder="key" mono />
+                              </div>
+                              <div>
+                                <label className="block text-xs mb-1" style={{ color: s.textMuted }}>标签</label>
+                                <TextField value={field.label} onChange={(v) => handleUpdateConfigField(idx, { label: v })} placeholder="显示名称" />
+                              </div>
+                            </div>
+                            <div className="grid grid-cols-2 gap-2">
+                              <div>
+                                <label className="block text-xs mb-1" style={{ color: s.textMuted }}>类型</label>
+                                <SelectField
+                                  value={field.type}
+                                  onChange={(v) => handleUpdateConfigField(idx, { type: v as PluginConfigField['type'] })}
+                                  options={CONFIG_FIELD_TYPES.map((t) => ({ label: CONFIG_FIELD_TYPE_LABELS[t], value: t }))}
+                                />
+                              </div>
+                              <div>
+                                <label className="block text-xs mb-1" style={{ color: s.textMuted }}>默认值</label>
+                                {field.type === 'select' ? (
+                                  <SelectField
+                                    value={String(field.defaultValue ?? '')}
+                                    onChange={(v) => handleUpdateConfigField(idx, { defaultValue: v })}
+                                    options={[{ label: '无', value: '' }, ...(field.options || []).map(opt => ({ label: opt.label, value: opt.value }))]}
+                                  />
+                                ) : field.type === 'boolean' ? (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleUpdateConfigField(idx, { defaultValue: !field.defaultValue })}
+                                    className="relative w-9 h-5 rounded-full transition-colors shrink-0"
+                                    style={{
+                                      backgroundColor: !!field.defaultValue ? 'var(--color-accent)' : 'var(--color-bg-primary)',
+                                      border: `1px solid ${!!field.defaultValue ? 'var(--color-accent)' : 'var(--color-border)'}`,
+                                    }}
+                                  >
+                                    <div
+                                      className="absolute top-0.5 w-3.5 h-3.5 rounded-full transition-all"
+                                      style={{
+                                        backgroundColor: !!field.defaultValue ? '#fff' : 'var(--color-text-muted)',
+                                        left: !!field.defaultValue ? '18px' : '2px',
+                                      }}
+                                    />
+                                  </button>
+                                ) : (
+                                  <TextField value={String(field.defaultValue)} onChange={(v) => handleUpdateConfigField(idx, { defaultValue: v })} placeholder="默认值" />
+                                )}
+                              </div>
+                            </div>
+                            <div>
+                              <label className="block text-xs mb-1" style={{ color: s.textMuted }}>描述</label>
+                              <TextField value={field.description ?? ''} onChange={(v) => handleUpdateConfigField(idx, { description: v })} placeholder="配置项说明" />
+                            </div>
+                            {field.type === 'select' && (
+                              <div>
+                                <div className="flex items-center justify-between mb-1.5">
+                                  <label className="text-xs" style={{ color: s.textMuted }}>选项列表</label>
+                                  <button
+                                    type="button"
+                                    onClick={() => handleUpdateConfigField(idx, {
+                                      options: [...(field.options || []), { label: '', value: '' }],
+                                    })}
+                                    className="text-xs px-2 py-0.5 rounded transition-colors"
+                                    style={{ color: s.accent, backgroundColor: 'transparent' }}
+                                  >
+                                    + 添加选项
+                                  </button>
+                                </div>
+                                <div className="flex flex-col gap-1.5">
+                                  {(field.options || []).map((opt, oi) => (
+                                    <div key={oi} className="flex items-center gap-1.5 min-w-0">
+                                      <input
+                                        type="text"
+                                        value={opt.label}
+                                        onChange={(e) => {
+                                          const newOpts = [...(field.options || [])];
+                                          newOpts[oi] = { ...newOpts[oi], label: e.target.value, value: e.target.value };
+                                          handleUpdateConfigField(idx, { options: newOpts });
+                                        }}
+                                        placeholder="标签"
+                                        className="flex-1 min-w-0 px-2 py-1 rounded text-xs border outline-none"
+                                        style={{
+                                          borderColor: s.border,
+                                          backgroundColor: s.bgPrimary,
+                                          color: s.textPrimary,
+                                        }}
+                                      />
+                                      <input
+                                        type="text"
+                                        value={opt.value}
+                                        onChange={(e) => {
+                                          const newOpts = [...(field.options || [])];
+                                          newOpts[oi] = { ...newOpts[oi], value: e.target.value };
+                                          handleUpdateConfigField(idx, { options: newOpts });
+                                        }}
+                                        placeholder="值"
+                                        className="flex-1 min-w-0 px-2 py-1 rounded text-xs border outline-none"
+                                        style={{
+                                          borderColor: s.border,
+                                          backgroundColor: s.bgPrimary,
+                                          color: s.textPrimary,
+                                        }}
+                                      />
+                                      <button
+                                        type="button"
+                                        onClick={() => {
+                                          const newOpts = (field.options || []).filter((_, i) => i !== oi);
+                                          handleUpdateConfigField(idx, { options: newOpts });
+                                        }}
+                                        className="p-1 rounded transition-colors shrink-0"
+                                        style={{ color: s.textMuted }}
+                                        title="删除选项"
+                                      >
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                          <path d="M18 6L6 18M6 6l12 12" />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                  ))}
+                                  {(field.options || []).length === 0 && (
+                                    <p className="text-xs" style={{ color: s.textMuted }}>暂无选项，点击上方按钮添加</p>
+                                  )}
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+
+            {/* UI 权限声明 */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2 cursor-pointer select-none" onClick={() => setPermSectionCollapsed(v => !v)}>
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                    style={{ color: s.textMuted, transform: permSectionCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s ease' }}>
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                  <h3 className="text-sm font-bold" style={{ color: s.textPrimary }}>UI 权限声明（可选）</h3>
+                  {(commonPermissions.length + exclusivePermissions.length + requiredPermissions.length) > 0 && (
+                    <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}>{commonPermissions.length + exclusivePermissions.length + requiredPermissions.length}</span>
+                  )}
+                </div>
+              </div>
+              {!permSectionCollapsed && (
+                <>
+                  <p className="text-xs mb-3" style={{ color: s.textMuted }}>
+                    声明插件需要使用的 UI 能力。未声明时使用默认权限。支持在代码中编写 <code style={{ background: s.bgTertiary, padding: '1px 4px', borderRadius: '3px' }}>{'// @permission xxxx:......'}</code> 注释自动解析。
+                  </p>
+
+                  {/* 共享权限 */}
+                  <div className="border rounded-lg p-3 mt-2" style={{ borderColor: '#3f3f3f' }}>
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-xs font-medium" style={{ color: s.textPrimary }}>共享权限</span>
+                      <span className="text-xs" style={{ color: s.textMuted }}>可被多个插件同时声明</span>
+                    </div>
+                    <PermSelector
+                      allPerms={Object.entries(UI_PERMISSION_LABELS) as [UIPermission, string][]}
+                      selected={commonPermissions}
+                      onChange={setCommonPermissions}
+                      accentColor={s.accent}
+                      theme={s}
+                    />
+                  </div>
+
+                  {/* 排他权限 */}
+                  <div className="border rounded-lg p-3 mt-2" style={{ borderColor: '#f97316' }}>
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-xs font-medium" style={{ color: '#f97316' }}>排他权限</span>
+                      <span className="text-xs" style={{ color: s.textMuted }}>同时只能被一个插件声明</span>
+                    </div>
+                    <PermSelector
+                      allPerms={Object.entries(UI_PERMISSION_LABELS) as [UIPermission, string][]}
+                      selected={exclusivePermissions}
+                      onChange={setExclusivePermissions}
+                      accentColor="#f97316"
+                      theme={s}
+                    />
+                  </div>
+
+                  {/* 必要权限 */}
+                  <div className="border rounded-lg p-3 mt-2" style={{ borderColor: '#3b82f6' }}>
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-xs font-medium" style={{ color: '#3b82f6' }}>必要权限</span>
+                      <span className="text-xs" style={{ color: s.textMuted }}>没有此权限则插件不允许启动</span>
+                    </div>
+                    <PermSelector
+                      allPerms={Object.entries(UI_PERMISSION_LABELS) as [UIPermission, string][]}
+                      selected={requiredPermissions}
+                      onChange={setRequiredPermissions}
+                      accentColor="#3b82f6"
+                      theme={s}
+                    />
+                    <p className="text-xs mt-2" style={{ color: s.textMuted }}>⚠️ 必要权限必须在共享权限或排他权限中声明</p>
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* 依赖管理 */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2 cursor-pointer select-none" onClick={() => setDepSectionCollapsed(v => !v)}>
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                    style={{ color: s.textMuted, transform: depSectionCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s ease' }}>
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                  <h3 className="text-sm font-bold flex items-center gap-1.5" style={{ color: s.textPrimary }}>
+                    依赖管理
+                  </h3>
+                  {dependencies.length > 0 && (
+                    <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}>{dependencies.length}</span>
+                  )}
+                </div>
+                {!depSectionCollapsed && (
+                  <div className="flex items-center gap-1.5">
+                    <button
+                      onClick={() => setShowAddDep(!showAddDep)}
+                      className="px-3 py-1 rounded-lg text-xs border"
+                      style={{ borderColor: s.accent, color: s.accent, backgroundColor: 'transparent' }}
+                    >
+                      手动添加
+                    </button>
+                  </div>
+                )}
+              </div>
+              {!depSectionCollapsed && (
+                <>
+
+              {/* 手动添加内联表单 */}
+              {showAddDep && (
+                <div className="rounded-lg p-3 border mb-3 space-y-2" style={{ backgroundColor: s.bgTertiary, borderColor: s.border }}>
+                  <div>
+                    <label className="block text-xs mb-1" style={{ color: s.textMuted }}>插件 ID *</label>
+                    <TextField value={newDepId} onChange={setNewDepId} placeholder="例如：builtin.dice" mono />
+                  </div>
+                  <div>
+                    <label className="block text-xs mb-1" style={{ color: s.textMuted }}>版本范围（可选）</label>
+                    <TextField value={newDepVersion} onChange={setNewDepVersion} placeholder="例如：^1.0.0" mono />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <label className="flex items-center gap-1.5 text-xs cursor-pointer" style={{ color: s.textSecondary }}>
+                      <input
+                        type="checkbox"
+                        checked={newDepOptional}
+                        onChange={(e) => setNewDepOptional(e.target.checked)}
+                        className="rounded"
+                      />
+                      可选依赖
+                    </label>
+                  </div>
+                  <div className="flex items-center gap-2 pt-1">
+                    <button
+                      onClick={handleAddDependency}
+                      className="px-3 py-1 rounded-lg text-xs font-bold"
+                      style={{ backgroundColor: s.accent, color: s.bgPrimary }}
+                    >
+                      确认添加
+                    </button>
+                    <button
+              onClick={() => { setShowAddDep(false); setNewDepId(''); setNewDepVersion(''); setNewDepOptional(false); }}
+                      className="px-3 py-1 rounded-lg text-xs border"
+                      style={{ borderColor: s.border, color: s.textSecondary, backgroundColor: 'transparent' }}
+                    >
+                      取消
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* 依赖列表 */}
+              {dependencies.length === 0 ? (
+                <p className="text-xs" style={{ color: s.textMuted }}>暂无依赖。点击&ldquo;从代码扫描&rdquo;自动检测，或&ldquo;手动添加&rdquo;。</p>
+              ) : (
+                <div className="rounded-lg border overflow-hidden" style={{ borderColor: s.border }}>
+                  {/* 表头 */}
+                  <div className="grid grid-cols-[1fr_80px_80px_40px] gap-2 px-3 py-2 text-xs font-bold" style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}>
+                    <span>插件 ID</span>
+                    <span>版本范围</span>
+                    <span>状态</span>
+                    <span>操作</span>
+                  </div>
+                  {/* 依赖项 */}
+                  {dependencies.map((dep) => (
+                    <div
+                      key={dep.pluginId}
+                      className="grid grid-cols-[1fr_80px_80px_40px] gap-2 px-3 py-2 text-xs items-center"
+                      style={{ borderTop: `1px solid ${s.border}`, color: s.textPrimary }}
+                    >
+                      <span className="font-mono truncate" title={dep.pluginId}>
+                        {dep.pluginId}
+                        {dep.optional && (
+                          <span className="ml-1 px-1.5 py-0.5 rounded text-[10px]" style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}>可选</span>
+                        )}
+                      </span>
+                      <span className="font-mono" style={{ color: s.textSecondary }}>
+                        {dep.versionRange || '\u2014'}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        {depStatusIcon(depStatuses[dep.pluginId])}
+                        <span style={{ color: depStatuses[dep.pluginId] === 'satisfied' ? '#22c55e' : depStatuses[dep.pluginId] === 'missing' ? '#ef4444' : '#f59e0b' }}>
+                          {depStatusLabel(depStatuses[dep.pluginId])}
+                        </span>
+                      </span>
+                      <button
+                        onClick={() => handleRemoveDependency(dep.pluginId)}
+                        className="text-xs px-1 py-0.5 rounded transition-colors hover:opacity-80"
+                        style={{ color: '#ef4444' }}
+                        title="删除依赖"
+                      >
+                        &#128465;
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* 提示 */}
+              {dependencies.length > 0 && (
+                <p className="text-xs mt-2" style={{ color: s.textMuted }}>
+                  &#128161; 使用 <code className="font-mono px-1 py-0.5 rounded" style={{ backgroundColor: s.bgTertiary }}>xinyu.plugin.loadDependency()</code> 在代码中加载依赖
+                </p>
+              )}
+                </>
+              )}
+            </div>
+
+            {/* AI 安全检测 */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-sm font-bold" style={{ color: s.textPrimary }}>安全检测</h3>
+                <button
+                  onClick={handleScan}
+                  disabled={scanning}
+                  className="px-3 py-1 rounded-lg text-xs border"
+                  style={{ borderColor: s.accent, color: s.accent, backgroundColor: 'transparent' }}
+                >
+                  {scanning ? '检测中...' : 'AI 安全检测'}
+                </button>
+              </div>
+              {scanResult && (
+                <div className="rounded-lg p-4 border" style={{ backgroundColor: s.bgTertiary, borderColor: riskColors[scanResult.riskLevel] }}>
+                  <div className="flex items-center gap-3 mb-3">
+                    <span className="px-2 py-0.5 rounded text-xs font-bold" style={{ backgroundColor: riskColors[scanResult.riskLevel], color: '#fff' }}>
+                      {riskLabels[scanResult.riskLevel]} ({scanResult.score}/100)
+                    </span>
+                    <span className="text-sm" style={{ color: s.textPrimary }}>{scanResult.summary}</span>
+                  </div>
+                  {scanResult.findings.length > 0 && (
+                    <div className="space-y-2">
+                      {scanResult.findings.map((finding, i) => (
+                        <div key={i} className="text-xs" style={{ color: s.textSecondary }}>
+                          <span className="font-bold" style={{ color: riskColors[finding.level] }}>[{finding.category}]</span>{' '}
+                          {finding.description}
+                          {finding.recommendation && <span style={{ color: s.textMuted }}> - 建议: {finding.recommendation}</span>}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {scanResult.recommendation && (
+                    <p className="text-xs mt-2" style={{ color: s.textMuted }}>建议: {scanResult.recommendation}</p>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* 底部留白 */}
+            <div className="h-8" />
+          </div>
+        </div>
+
+        {/* 拖拽分隔条 2 */}
+        <ResizableDivider onResize={handleResizeMid} />
+
+        {/* 右侧：代码编辑器 */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <div
+            className="shrink-0 px-4 py-2 text-xs flex items-center justify-between"
+            style={{ backgroundColor: s.bgTertiary, color: s.textMuted, borderBottom: `1px solid ${s.border}` }}
+          >
+            <div className="flex items-center gap-3">
+              <span className="font-mono">plugin.js</span>
+              <div className="relative">
+                <button
+                  onClick={() => setThemeMenuOpen(!themeMenuOpen)}
+                  className="flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors"
+                  style={{
+                    backgroundColor: s.bgPrimary,
+                    color: s.textSecondary,
+                    border: `1px solid ${s.border}`,
+                  }}
+                  title="切换编辑器主题"
+                >
+                  <i className="fa-solid fa-palette" style={{ fontSize: '10px' }} />
+                  <span>{EDITOR_THEMES.find(t => t.id === editorTheme)?.label}</span>
+                  <i className="fa-solid fa-chevron-down" style={{ fontSize: '8px' }} />
+                </button>
+                {themeMenuOpen && (
+                  <>
+                    <div className="fixed inset-0 z-10" onClick={() => setThemeMenuOpen(false)} />
+                    <div
+                      className="absolute left-0 top-full mt-1 py-1 rounded-lg shadow-lg z-20 min-w-[140px]"
+                      style={{
+                        backgroundColor: s.bgSecondary,
+                        border: `1px solid ${s.border}`,
+                      }}
+                    >
+                      {EDITOR_THEMES.map((t) => (
+                        <button
+                          key={t.id}
+                          onClick={() => { setEditorTheme(t.id); setThemeMenuOpen(false); }}
+                          className="w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors"
+                          style={{
+                            backgroundColor: editorTheme === t.id ? s.bgTertiary : 'transparent',
+                            color: editorTheme === t.id ? s.accent : s.textSecondary,
+                          }}
+                        >
+                          <span
+                            className="w-3 h-3 rounded-sm shrink-0"
+                            style={{ backgroundColor: t.color }}
+                          />
+                          {t.label}
+                        </button>
+                      ))}
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+            <span>{code.split('\n').length} 行</span>
+          </div>
+          <div className="flex-1 overflow-hidden">
+            <Editor
+              height="100%"
+              language="javascript"
+              theme={editorTheme}
+              value={code}
+              onChange={(value) => setCode(value ?? '')}
+              onMount={handleEditorMount}
+              options={{
+                fontSize: 12,
+                fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace",
+                lineHeight: 18,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                wordWrap: 'on',
+                tabSize: 2,
+                padding: { top: 8, bottom: 8 },
+                overviewRulerBorder: false,
+                scrollbar: {
+                  verticalScrollbarSize: 8,
+                  horizontalScrollbarSize: 8,
+                },
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** 权限选择器组件：下拉选择 + 标签列表 */
+function PermSelector({
+  allPerms,
+  selected,
+  onChange,
+  accentColor,
+  theme: s,
+}: {
+  allPerms: [string, string][];
+  selected: string[];
+  onChange: (perms: UIPermission[]) => void;
+  accentColor: string;
+  theme: Record<string, string>;
+}) {
+  const available = allPerms.filter(([perm]) => !selected.includes(perm));
+  const [selectVal, setSelectVal] = useState('');
+
+  const handleAdd = () => {
+    if (selectVal && !selected.includes(selectVal)) {
+      onChange([...selected as UIPermission[], selectVal as UIPermission]);
+    }
+    setSelectVal('');
+  };
+
+  const handleRemove = (perm: string) => {
+    onChange(selected.filter(p => p !== perm) as UIPermission[]);
+  };
+
+  return (
+    <div>
+      {/* 标签列表 */}
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mb-2">
+          {selected.map(perm => {
+            const label = allPerms.find(([p]) => p === perm)?.[1] || perm;
+            return (
+              <span key={perm} className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-md transition-colors"
+                style={{ backgroundColor: `${accentColor}15`, border: `1px solid ${accentColor}40`, color: accentColor }}>
+                {label}
+                <button onClick={() => handleRemove(perm)} className="hover:opacity-70 transition-opacity ml-0.5" style={{ color: accentColor }}>✕</button>
+              </span>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 下拉选择 + 添加按钮 */}
+      <div className="flex gap-1.5 min-w-0">
+        <div className="flex-1 min-w-0 flex items-center rounded-md border overflow-hidden"
+          style={{ borderColor: s.border }}>
+          <select
+            value={selectVal}
+            onChange={(e) => setSelectVal(e.target.value)}
+            className="flex-1 min-w-0 text-xs px-2 py-1.5 outline-none bg-transparent appearance-none cursor-pointer"
+            style={{ color: s.textPrimary }}
+          >
+            <option value="">选择权限...</option>
+            {available.map(([perm, label]) => (
+              <option key={perm} value={perm}>{label} ({perm})</option>
+            ))}
+          </select>
+          <button
+            onClick={handleAdd}
+            disabled={!selectVal}
+            className="shrink-0 text-xs px-2.5 py-1.5 transition-colors disabled:opacity-40 disabled:cursor-not-allowed border-l"
+            style={{
+              backgroundColor: selectVal ? `${accentColor}20` : 'transparent',
+              borderColor: s.border,
+              color: selectVal ? accentColor : s.textMuted,
+            }}
+          >
+            + 添加
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PageLoader() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4" style={{ minHeight: '100vh', backgroundColor: 'var(--color-bg-primary)' }}>
+      <MathCurveLoader size={80} strokeWidthScale={0.8} />
+      <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>加载中...</p>
+    </div>
+  );
+}
+
+export default function CreatePluginPage() {
+  return (
+    <React.Suspense fallback={<PageLoader />}>
+      <CreatePluginPageContent />
+    </React.Suspense>
+  );
+}