xinyu-pro 0.21.0

package/app/extensions/edit/[id]/page.tsx

@@ -0,0 +1,2342 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import Editor, { type OnMount } from '@monaco-editor/react';
+import { getPlugin, updatePlugin, scanPluginSecurity } from '@/lib/storage';
+import { parseManifestFromCode } from '@/lib/manifest-parser';
+import { useTheme } from '@/components/ui/ThemeProvider';
+import {
+  PluginType,
+  PluginConfigField,
+  PluginDependency,
+  SecurityScanResult,
+  PLUGIN_TYPE_LABELS,
+  UIPermission,
+  UI_PERMISSION_LABELS,
+} from '@/lib/plugin-types';
+import { useToast } from '@/components/ui/ToastProvider';
+import FullPageLoader from '@/components/FullPageLoader';
+import PageHeader from '@/components/ui/PageHeader';
+import { PluginIcon } from '@/components/ui/PluginIcon';
+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: '多行文本',
+};
+
+// ==================== 通用样式辅助 ====================
+
+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)',
+};
+
+/** Monaco Editor 可选主题 */
+const EDITOR_THEMES = [
+  { id: 'vs', label: '浅色', color: '#f0f0f0' },
+  { id: 'vs-dark', label: '深色', color: '#1e1e1e' },
+  { id: 'hc-black', label: '高对比', color: '#000000' },
+] as const;
+
+// ==================== 子组件 ====================
+
+function TextField({
+  value,
+  onChange,
+  placeholder,
+  mono = false,
+  type = 'text',
+  className = '',
+  readOnly = false,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  mono?: boolean;
+  type?: string;
+  className?: string;
+  readOnly?: boolean;
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      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 FileTree({
+  files,
+  activeFile,
+  depth,
+  onSelect,
+  onContextMenu,
+  theme,
+}: {
+  files: Array<{ name: string; path: string; icon: string; editable: boolean; type: 'file' | 'dir'; children?: typeof files }>;
+  activeFile: string;
+  depth: number;
+  onSelect: (path: string, editable: boolean) => void;
+  onContextMenu: (e: React.MouseEvent, file: { name: string; path: string; editable: boolean; type: 'file' | 'dir' }) => void;
+  theme: Record<string, string>;
+}) {
+  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(() => {
+    // 默认展开所有目录
+    const set = new Set<string>();
+    const collect = (items: typeof files) => {
+      for (const item of items) {
+        if (item.type === 'dir') {
+          set.add(item.path);
+          if (item.children) collect(item.children);
+        }
+      }
+    };
+    collect(files);
+    return set;
+  });
+
+  const toggleDir = (dirPath: string) => {
+    setExpandedDirs(prev => {
+      const next = new Set(prev);
+      if (next.has(dirPath)) {
+        next.delete(dirPath);
+      } else {
+        next.add(dirPath);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div>
+      {files.map((file) => (
+        <div key={file.path}>
+          <button
+            className="w-full text-left px-3 py-1 text-xs flex items-center gap-1.5 transition-colors"
+            style={{
+              paddingLeft: `${12 + depth * 16}px`,
+              backgroundColor: activeFile === file.path ? theme.bgTertiary : 'transparent',
+              color: activeFile === file.path ? theme.accent : theme.textSecondary,
+              cursor: 'pointer',
+              opacity: file.type === 'file' && !file.editable ? 0.6 : 1,
+            }}
+            onClick={() => {
+              if (file.type === 'dir') {
+                toggleDir(file.path);
+              } else {
+                onSelect(file.path, file.editable);
+              }
+            }}
+            onContextMenu={(e) => onContextMenu(e, file)}
+            title={file.type === 'dir' ? file.path : (file.editable ? file.path : `${file.path}（只读）`)}
+          >
+            {file.type === 'dir' ? (
+              <i
+                className="fa-solid fa-chevron-right"
+                style={{
+                  fontSize: '8px',
+                  width: '14px',
+                  textAlign: 'center',
+                  transition: 'transform 0.15s',
+                  transform: expandedDirs.has(file.path) ? 'rotate(90deg)' : 'rotate(0deg)',
+                  flexShrink: 0,
+                }}
+              />
+            ) : (
+              <span style={{ width: '14px', flexShrink: 0 }} />
+            )}
+            <i className={file.type === 'dir'
+              ? (expandedDirs.has(file.path) ? 'fa-solid fa-folder-open' : 'fa-solid fa-folder')
+              : file.icon
+            } style={{ fontSize: '11px', width: '14px', textAlign: 'center', flexShrink: 0 }} />
+            <span className="truncate">{file.name}</span>
+            {!file.editable && file.type === 'file' && (
+              <i className="fa-solid fa-eye text-[9px] ml-auto opacity-50" />
+            )}
+          </button>
+          {file.type === 'dir' && file.children && expandedDirs.has(file.path) && (
+            <FileTree
+              files={file.children}
+              activeFile={activeFile}
+              depth={depth + 1}
+              onSelect={onSelect}
+              onContextMenu={onContextMenu}
+              theme={theme}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ==================== 文件树右键菜单组件 ====================
+
+function FileContextMenu({
+  x,
+  y,
+  file,
+  activeFile,
+  onClose,
+  onNewFile,
+  onNewFolder,
+  onDelete,
+  onRename,
+  theme,
+}: {
+  x: number;
+  y: number;
+  file: { name: string; path: string; editable: boolean; type: 'file' | 'dir' };
+  activeFile: string;
+  onClose: () => void;
+  onNewFile: (dirPath: string) => void;
+  onNewFolder: (dirPath: string) => void;
+  onDelete: (path: string) => void;
+  onRename: (oldPath: string, newPath: string) => void;
+  theme: Record<string, string>;
+}) {
+  const [renaming, setRenaming] = useState(false);
+  const [newName, setNewName] = useState(file.name);
+  const [creating, setCreating] = useState<'file' | 'dir' | null>(null);
+  const [newItemName, setNewItemName] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (renaming || creating) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
+  }, [renaming, creating]);
+
+  const handleRenameConfirm = () => {
+    if (!newName.trim()) { setRenaming(false); return; }
+    const dir = file.path.includes('/') ? file.path.substring(0, file.path.lastIndexOf('/') + 1) : '';
+    const newPath = dir + newName.trim();
+    if (newPath === file.path) { setRenaming(false); return; }
+    onRename(file.path, newPath);
+    setRenaming(false);
+  };
+
+  const handleCreateConfirm = () => {
+    if (!newItemName.trim()) { setCreating(null); return; }
+    const dir = file.type === 'dir' ? file.path + '/' : (file.path.includes('/') ? file.path.substring(0, file.path.lastIndexOf('/') + 1) : '');
+    if (creating === 'file') {
+      onNewFile(dir + newItemName.trim());
+    } else {
+      onNewFolder(dir + newItemName.trim());
+    }
+    setCreating(null);
+    setNewItemName('');
+  };
+
+  const dirPath = file.type === 'dir' ? file.path : (file.path.includes('/') ? file.path.substring(0, file.path.lastIndexOf('/')) : '');
+
+  const [contextMenuOpen, setContextMenuOpen] = useState(true);
+
+  return (
+    <>
+      <div className="fixed inset-0 z-30" onClick={() => { setContextMenuOpen(false); onClose(); }} onContextMenu={(e) => { e.preventDefault(); setContextMenuOpen(false); onClose(); }} />
+      {contextMenuOpen && (
+      <div
+        className="fixed z-40 py-1 rounded-lg shadow-lg min-w-[160px]"
+        style={{
+          left: Math.min(x, window.innerWidth - 180),
+          top: Math.min(y, window.innerHeight - 200),
+          backgroundColor: theme.bgSecondary,
+          border: `1px solid ${theme.border}`,
+        }}
+      >
+        {/* 新建文件 */}
+        <button
+          className="w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors hover:opacity-80"
+          style={{ color: theme.textPrimary }}
+          onClick={() => { setCreating('file'); setNewItemName(''); setContextMenuOpen(false); }}
+        >
+          <i className="fa-solid fa-file-circle-plus" style={{ fontSize: '10px', width: '14px', textAlign: 'center' }} />
+          新建文件
+        </button>
+        {/* 新建文件夹 */}
+        <button
+          className="w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors hover:opacity-80"
+          style={{ color: theme.textPrimary }}
+          onClick={() => { setCreating('dir'); setNewItemName(''); setContextMenuOpen(false); }}
+        >
+          <i className="fa-solid fa-folder-plus" style={{ fontSize: '10px', width: '14px', textAlign: 'center' }} />
+          新建文件夹
+        </button>
+        {/* 重命名 */}
+        {file.path !== 'manifest.json' && (
+          <button
+            className="w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors hover:opacity-80"
+            style={{ color: theme.textPrimary }}
+            onClick={() => { setRenaming(true); setNewName(file.name); setContextMenuOpen(false); }}
+          >
+            <i className="fa-solid fa-pen" style={{ fontSize: '10px', width: '14px', textAlign: 'center' }} />
+            重命名
+          </button>
+        )}
+        {/* 删除 */}
+        {file.path !== 'manifest.json' && (
+          <button
+            className="w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors hover:opacity-80"
+            style={{ color: '#e74c3c' }}
+            onClick={() => { onDelete(file.path); setContextMenuOpen(false); onClose(); }}
+          >
+            <i className="fa-solid fa-trash" style={{ fontSize: '10px', width: '14px', textAlign: 'center' }} />
+            删除
+          </button>
+        )}
+      </div>
+      )}
+      {/* 重命名输入框 */}
+      {renaming && (
+        <>
+          <div className="fixed inset-0 z-30" onClick={() => setRenaming(false)} />
+          <div
+            className="fixed z-40 p-3 rounded-lg shadow-lg"
+            style={{
+              left: Math.min(x, window.innerWidth - 250),
+              top: Math.min(y, window.innerHeight - 60),
+              backgroundColor: theme.bgSecondary,
+              border: `1px solid ${theme.border}`,
+            }}
+          >
+            <div className="text-[10px] mb-1" style={{ color: theme.textMuted }}>重命名</div>
+            <input
+              ref={inputRef}
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleRenameConfirm(); if (e.key === 'Escape') setRenaming(false); }}
+              className="w-full px-2 py-1 rounded text-xs outline-none"
+              style={{ backgroundColor: theme.bgTertiary, color: theme.textPrimary, border: `1px solid ${theme.border}` }}
+            />
+          </div>
+        </>
+      )}
+      {/* 新建输入框 */}
+      {creating && (
+        <>
+          <div className="fixed inset-0 z-30" onClick={() => setCreating(null)} />
+          <div
+            className="fixed z-40 p-3 rounded-lg shadow-lg"
+            style={{
+              left: Math.min(x, window.innerWidth - 250),
+              top: Math.min(y, window.innerHeight - 60),
+              backgroundColor: theme.bgSecondary,
+              border: `1px solid ${theme.border}`,
+            }}
+          >
+            <div className="text-[10px] mb-1" style={{ color: theme.textMuted }}>
+              {creating === 'file' ? '新建文件' : '新建文件夹'}（在 {dirPath || '根目录'} 下）
+            </div>
+            <input
+              ref={inputRef}
+              value={newItemName}
+              onChange={(e) => setNewItemName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleCreateConfirm(); if (e.key === 'Escape') setCreating(null); }}
+              placeholder={creating === 'file' ? '文件名.js' : '文件夹名'}
+              className="w-full px-2 py-1 rounded text-xs outline-none"
+              style={{ backgroundColor: theme.bgTertiary, color: theme.textPrimary, border: `1px solid ${theme.border}` }}
+            />
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+// ==================== 拖拽分隔条组件 ====================
+
+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 EditPluginPageContent() {
+  const { activeTheme } = useTheme();
+  const router = useRouter();
+  const { navigate, back, canGoBack } = useRouterHistory();
+  const params = useParams();
+  const editId = params.id as string;
+  const { toast } = useToast();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
+  const [midWidth, setMidWidth] = useState(380);
+
+  const [loading, setLoading] = useState(true);
+  const [name, setName] = useState('');
+  const [pluginId, setPluginId] = useState('');
+  const [version, setVersion] = useState('1.0.0');
+  const [author, setAuthor] = useState('');
+
+  type XyeFileItem = { name: string; path: string; icon: string; editable: boolean; type: 'file' | 'dir'; children?: XyeFileItem[] };
+  // .xye 插件包相关状态
+  const [isXye, setIsXye] = useState(false);
+  const [xyeFiles, setXyeFiles] = useState<XyeFileItem[]>([]);
+  const [activeFile, setActiveFile] = useState<string>('');
+  const [fileContents, setFileContents] = useState<Record<string, string>>({});
+  const [fileTreeOpen, setFileTreeOpen] = useState(true);
+  const [fileTreeWidth, setFileTreeWidth] = useState(180);
+  const [entryFileName, setEntryFileName] = useState('plugin.js');
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; file: { name: string; path: string; editable: boolean; type: 'file' | 'dir' } } | null>(null);
+  // 工具栏新建输入框状态
+  const [toolbarCreating, setToolbarCreating] = useState<'file' | 'dir' | null>(null);
+  const [toolbarNewItemName, setToolbarNewItemName] = useState('');
+  const toolbarInputRef = useRef<HTMLInputElement>(null);
+  const [icon, setIcon] = useState('');
+  const [type, setType] = useState<PluginType>('game-mechanics');
+  const [description, setDescription] = useState('');
+  const [code, setCode] = useState('');
+  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 [editorTheme, setEditorTheme] = useState<string>('vs-dark');
+  const [themeMenuOpen, setThemeMenuOpen] = useState(false);
+
+  // 初始化编辑器主题：跟随应用主题的 isDark 属性
+  useEffect(() => {
+    setEditorTheme(activeTheme.isDark ? 'vs-dark' : 'vs');
+  }, [activeTheme.isDark]);
+
+  // 工具栏新建输入框自动聚焦
+  useEffect(() => {
+    if (toolbarCreating) {
+      toolbarInputRef.current?.focus();
+    }
+  }, [toolbarCreating]);
+
+  const handleEditorMount: OnMount = useCallback((editor) => {
+    editorRef.current = editor;
+  }, []);
+
+  useEffect(() => {
+    async function load() {
+      const plugin = await getPlugin(editId);
+      if (!plugin) {
+        toast('插件不存在', 'error');
+        if (canGoBack()) {
+          back();
+        } else {
+          navigate('/extensions');
+        }
+        return;
+      }
+      setName(plugin.name);
+      setPluginId(plugin.id);
+      setVersion(plugin.version);
+      setAuthor(plugin.author);
+      setIcon(plugin.icon || '');
+      setType(plugin.type);
+      setDescription(plugin.description);
+      setCode(plugin.code);
+      setConfigSchema(plugin.configSchema || []);
+      setCommonPermissions(plugin.commonPermissions || []);
+      setExclusivePermissions(plugin.exclusivePermissions || []);
+      setRequiredPermissions(plugin.requiredPermissions || []);
+      setDependencies(plugin.dependencies || []);
+
+      // 检测是否为 .xye 格式插件
+      try {
+        const res = await fetch(`/api/plugins/files-list?pluginId=${encodeURIComponent(plugin.id)}`);
+        if (res.ok) {
+          const data = await res.json();
+          if (data.isXye) {
+            setIsXye(true);
+            setXyeFiles(data.files || []);
+            // 从 codePath 提取入口文件名（如 data/plugins/x.y/index.js → index.js）
+            const entry = (plugin as unknown as Record<string, string>).codePath
+              ? (plugin as unknown as Record<string, string>).codePath.split('/').pop() || 'plugin.js'
+              : 'plugin.js';
+            setEntryFileName(entry);
+            setActiveFile(entry);
+            const codeRes = await fetch(`/api/plugins/files-list?pluginId=${encodeURIComponent(plugin.id)}&path=${encodeURIComponent(entry)}`);
+            if (codeRes.ok) {
+              const codeData = await codeRes.json();
+              setCode(codeData.content);
+              setFileContents(prev => ({ ...prev, [entry]: codeData.content }));
+            }
+            // 加载 manifest.json
+            const manifestRes = await fetch(`/api/plugins/files-list?pluginId=${encodeURIComponent(plugin.id)}&path=manifest.json`);
+            if (manifestRes.ok) {
+              const manifestData = await manifestRes.json();
+              setFileContents(prev => ({ ...prev, 'manifest.json': manifestData.content }));
+              // 从 manifest.json 解析元数据填充表单
+              try {
+                const manifest = JSON.parse(manifestData.content);
+                if (manifest.name) setName(manifest.name);
+                if (manifest.version) setVersion(manifest.version);
+                if (manifest.author) setAuthor(manifest.author);
+                if (manifest.icon) setIcon(manifest.icon);
+                if (manifest.type) setType(manifest.type);
+                if (manifest.description) setDescription(manifest.description);
+                if (manifest.configSchema) setConfigSchema(manifest.configSchema);
+                if (manifest.commonPermissions) setCommonPermissions(manifest.commonPermissions);
+                if (manifest.exclusivePermissions) setExclusivePermissions(manifest.exclusivePermissions);
+                if (manifest.requiredPermissions) setRequiredPermissions(manifest.requiredPermissions);
+                if (manifest.dependencies) setDependencies(manifest.dependencies);
+                // 从 manifest.json 的 pluginEntry 字段获取入口文件名
+                if (manifest.pluginEntry) {
+                  const entryName = manifest.pluginEntry.startsWith('/')
+                    ? manifest.pluginEntry.slice(1)
+                    : manifest.pluginEntry;
+                  setEntryFileName(entryName);
+                  // 如果当前激活的文件是旧的 plugin.js，切换到正确的入口文件
+                  if (activeFile === 'plugin.js' && entryName !== 'plugin.js') {
+                    setActiveFile(entryName);
+                    const entryCodeRes = await fetch(`/api/plugins/files-list?pluginId=${encodeURIComponent(plugin.id)}&path=${encodeURIComponent(entryName)}`);
+                    if (entryCodeRes.ok) {
+                      const entryCodeData = await entryCodeRes.json();
+                      setCode(entryCodeData.content);
+                      setFileContents(prev => ({ ...prev, [entryName]: entryCodeData.content }));
+                    }
+                  }
+                }
+              } catch { /* ignore */ }
+            }
+          }
+        }
+      } catch { /* ignore: 非 .xye 插件 */ }
+
+      setLoading(false);
+    }
+    load();
+  }, [editId, router]);
+
+  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 handleResizeFileTree = useCallback((deltaX: number) => {
+    setFileTreeWidth((prev) => Math.max(120, Math.min(400, 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);
+  }, []);
+
+  // 加载时检查依赖状态
+  useEffect(() => {
+    if (dependencies.length > 0) {
+      checkDependencyStatuses(dependencies);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  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 '检查中...';
+    }
+  };
+
+  /** 切换 .xye 文件树中的活动文件 */
+  const handleFileSelect = useCallback(async (filePath: string, editable: boolean) => {
+    if (!editable) {
+      toast('该文件不可编辑（资源文件）', 'warning');
+      return;
+    }
+    setActiveFile(filePath);
+    // 如果已缓存则直接使用
+    if (fileContents[filePath] !== undefined) {
+      setCode(fileContents[filePath]);
+      return;
+    }
+    // 否则从服务端加载
+    try {
+      const res = await fetch(`/api/plugins/files-list?pluginId=${encodeURIComponent(pluginId)}&path=${encodeURIComponent(filePath)}`);
+      if (res.ok) {
+        const data = await res.json();
+        setCode(data.content);
+        setFileContents(prev => ({ ...prev, [filePath]: data.content }));
+      } else {
+        toast('加载文件失败', 'error');
+      }
+    } catch {
+      toast('加载文件失败', 'error');
+    }
+  }, [pluginId, fileContents]);
+
+  /** 刷新文件树 */
+  const refreshFileTree = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/plugins/files-list?pluginId=${encodeURIComponent(pluginId)}`);
+      if (res.ok) {
+        const data = await res.json();
+        setXyeFiles(data.files || []);
+      }
+    } catch { /* ignore */ }
+  }, [pluginId]);
+
+  /** 新建文件 */
+  const handleCreateFile = useCallback(async (filePath: string, isDir: boolean) => {
+    try {
+      const res = await fetch(`/api/plugins/files-write?pluginId=${encodeURIComponent(pluginId)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: filePath, type: isDir ? 'dir' : 'file', content: '' }),
+      });
+      if (res.ok) {
+        await refreshFileTree();
+        if (!isDir) {
+          setActiveFile(filePath);
+          setCode('');
+          setFileContents(prev => ({ ...prev, [filePath]: '' }));
+        }
+        toast(isDir ? '文件夹已创建' : '文件已创建', 'success');
+      } else {
+        const err = await res.json().catch(() => ({}));
+        toast(`创建失败: ${err.error || '未知错误'}`, 'error');
+      }
+    } catch {
+      toast('创建失败', 'error');
+    }
+  }, [pluginId, refreshFileTree]);
+
+  /** 删除文件 */
+  const handleDeleteFile = useCallback(async (filePath: string) => {
+    try {
+      const res = await fetch(`/api/plugins/files-write?pluginId=${encodeURIComponent(pluginId)}&path=${encodeURIComponent(filePath)}`, {
+        method: 'DELETE',
+      });
+      if (res.ok) {
+        await refreshFileTree();
+        if (activeFile === filePath) {
+          // 回退到入口文件
+          const fallback = xyeFiles.find((f: XyeFileItem) => f.type === 'file' && f.editable && f.path !== filePath);
+          if (fallback) {
+            setActiveFile(fallback.path);
+            setCode(fileContents[fallback.path] || '');
+          }
+        }
+        setFileContents(prev => {
+          const next = { ...prev };
+          delete next[filePath];
+          return next;
+        });
+        toast('已删除', 'success');
+      } else {
+        const err = await res.json().catch(() => ({}));
+        toast(`删除失败: ${err.error || '未知错误'}`, 'error');
+      }
+    } catch {
+      toast('删除失败', 'error');
+    }
+  }, [pluginId, activeFile, fileContents, refreshFileTree]);
+
+  /** 重命名文件 */
+  const handleRenameFile = useCallback(async (oldPath: string, newPath: string) => {
+    try {
+      const res = await fetch(`/api/plugins/files-write?pluginId=${encodeURIComponent(pluginId)}&path=${encodeURIComponent(oldPath)}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ newPath }),
+      });
+      if (res.ok) {
+        await refreshFileTree();
+        if (activeFile === oldPath) {
+          setActiveFile(newPath);
+          const oldContent = fileContents[oldPath];
+          if (oldContent !== undefined) {
+            setFileContents(prev => {
+              const next = { ...prev };
+              delete next[oldPath];
+              next[newPath] = oldContent;
+              return next;
+            });
+          }
+        }
+        toast('已重命名', 'success');
+      } else {
+        const err = await res.json().catch(() => ({}));
+        toast(`重命名失败: ${err.error || '未知错误'}`, 'error');
+      }
+    } catch {
+      toast('重命名失败', 'error');
+    }
+  }, [pluginId, activeFile, fileContents, refreshFileTree]);
+
+  /** 上传资源文件 */
+  const handleUploadFiles = useCallback(async (files: FileList) => {
+    if (!files || files.length === 0) return;
+    try {
+      const formData = new FormData();
+      for (let i = 0; i < files.length; i++) {
+        formData.append('files', files[i]);
+      }
+      const res = await fetch(`/api/plugins/files-upload?pluginId=${encodeURIComponent(pluginId)}`, {
+        method: 'POST',
+        body: formData,
+      });
+      if (res.ok) {
+        const data = await res.json();
+        await refreshFileTree();
+        toast(`已上传 ${data.count} 个文件`, 'success');
+      } else {
+        const err = await res.json().catch(() => ({}));
+        toast(`上传失败: ${err.error || '未知错误'}`, 'error');
+      }
+    } catch {
+      toast('上传失败', 'error');
+    }
+  }, [pluginId, refreshFileTree]);
+
+  /** 从代码注释解析 manifest 信息并填充表单（静默模式不弹 toast） */
+  /** 解析插件信息：.xye 从 manifest.json 解析，单 JS 从代码注释解析 */
+  const applyParsedManifest = async (silent = false) => {
+    let count = 0;
+
+    if (isXye) {
+      // .xye 插件：从 manifest.json 解析
+      try {
+        let manifestContent = fileContents['manifest.json'];
+        if (!manifestContent) {
+          const res = await fetch(`/api/plugins/files-list?pluginId=${encodeURIComponent(pluginId)}&path=manifest.json`);
+          if (res.ok) {
+            const data = await res.json();
+            manifestContent = data.content;
+            setFileContents(prev => ({ ...prev, 'manifest.json': manifestContent }));
+          }
+        }
+        if (!manifestContent) {
+          if (!silent) toast('未找到 manifest.json', 'warning');
+          return 0;
+        }
+        const manifest = JSON.parse(manifestContent);
+        if (manifest.id && manifest.id !== pluginId) {
+          const existing = await getPlugin(manifest.id);
+          if (existing) {
+            if (!silent) toast(`插件 ID「${manifest.id}」已存在，解析跳过`, 'warning');
+          } else {
+            setPluginId(manifest.id);
+            count++;
+          }
+        }
+        if (manifest.name) { setName(manifest.name); count++; }
+        if (manifest.version) { setVersion(manifest.version); count++; }
+        if (manifest.author) { setAuthor(manifest.author); count++; }
+        if (manifest.icon) { setIcon(manifest.icon); count++; }
+        if (manifest.type) { setType(manifest.type); count++; }
+        if (manifest.description) { setDescription(manifest.description); count++; }
+        if (Array.isArray(manifest.configSchema) && manifest.configSchema.length > 0) { setConfigSchema(manifest.configSchema); count++; }
+        if (Array.isArray(manifest.commonPermissions)) { setCommonPermissions(manifest.commonPermissions); count++; }
+        if (Array.isArray(manifest.exclusivePermissions)) { setExclusivePermissions(manifest.exclusivePermissions); count++; }
+        if (Array.isArray(manifest.requiredPermissions)) { setRequiredPermissions(manifest.requiredPermissions); count++; }
+        if (Array.isArray(manifest.dependencies)) { setDependencies(manifest.dependencies); count++; }
+      } catch {
+        if (!silent) toast('manifest.json 解析失败', 'error');
+        return 0;
+      }
+      if (!silent) {
+        toast(count > 0 ? `已从 manifest.json 解析 ${count} 项信息` : 'manifest.json 中无额外信息', count > 0 ? 'success' : 'warning');
+      }
+    } else {
+      // 单 JS 插件：从代码注释解析
+      const parsed = parseManifestFromCode(code);
+      if (parsed.id) {
+        if (parsed.id !== pluginId) {
+          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 ({recordRouter = true, goBack = true} = {}) => {
+    if (!name.trim() || !pluginId.trim() || !code.trim()) {
+      toast('请填写名称、ID 和代码', 'warning');
+      return;
+    }
+    // 保存前自动从代码解析 manifest 信息，直接使用解析结果构建数据
+    const parsed = parseManifestFromCode(code);
+
+    // 处理 @plugin-id：代码注释中的 ID 优先，但需检查重复（排除自身）
+    let finalId = pluginId;
+    if (parsed.id?.trim() && parsed.id.trim() !== pluginId) {
+      const codeId = parsed.id.trim();
+      const existing = await getPlugin(codeId);
+      if (existing) {
+        toast(`插件 ID「${codeId}」已存在，请修改 @plugin-id`, 'error');
+        return;
+      }
+      finalId = codeId;
+      setPluginId(codeId);
+    }
+
+    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 {
+      // .xye 插件：保存前先从 manifest.json 自动解析最新 ID
+      if (isXye) {
+        const manifestContent = activeFile === 'manifest.json'
+          ? code.trim()
+          : fileContents['manifest.json'];
+        if (manifestContent) {
+          try {
+            const manifest = JSON.parse(manifestContent);
+            if (manifest.id && manifest.id !== pluginId) {
+              const existing = await getPlugin(manifest.id);
+              if (existing) {
+                toast(`插件 ID「${manifest.id}」已存在，请修改 manifest.json 中的 id`, 'error');
+                setSaving(false);
+                return;
+              }
+              finalId = manifest.id;
+              setPluginId(manifest.id);
+            }
+          } catch { /* manifest 解析失败时忽略 */ }
+        }
+      }
+
+      // .xye 插件：保存当前活动文件到服务端
+      if (isXye && activeFile) {
+        const saveRes = await fetch(`/api/plugins/files-write?pluginId=${encodeURIComponent(editId)}&path=${encodeURIComponent(activeFile)}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content: code.trim() }),
+        });
+        if (!saveRes.ok) {
+          toast('保存文件失败', 'error');
+          setSaving(false);
+          return;
+        }
+        // 更新缓存
+        setFileContents(prev => ({ ...prev, [activeFile]: code.trim() }));
+        // files-write API 在写入 manifest.json 时会自动同步数据库元数据
+        // 对于入口文件，仍需更新数据库中的 code 字段
+        if (activeFile === entryFileName) {
+          const updateFields: Record<string, unknown> = { code: code.trim() };
+          if (finalId !== editId) updateFields.newId = finalId;
+          await updatePlugin(editId, updateFields);
+        }
+      } else {
+        // 非 .xye 插件：原有逻辑
+        const updateFields: Record<string, unknown> = {
+          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,
+        };
+        // 如果 ID 发生变更，传递 newId 让后端同时更新 extensions 和 extension_bindings
+        if (finalId !== editId) {
+          updateFields.newId = finalId;
+        }
+        const ok = await updatePlugin(editId, updateFields);
+        if (!ok) {
+          toast('保存失败，请重试', 'error');
+          setSaving(false);
+          return;
+        }
+      }
+      toast('插件已更新', 'success');
+      if (!goBack) return;
+      if (canGoBack()) {
+        back();
+      } else {
+        navigate('/extensions', {record: recordRouter});
+      }
+      router.refresh();
+    } 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: '严重风险' };
+
+  if (loading) {
+    return <FullPageLoader />;
+  }
+
+  const codeLines = code.split('\n');
+
+  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="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="插件开发教程"
+            >
+              <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={async () => {
+                try {
+                  const res = await fetch(`/api/plugins/export-xye?id=${encodeURIComponent(pluginId)}`);
+                  if (!res.ok) { toast('导出失败', 'error'); return; }
+                  const blob = await res.blob();
+                  const url = URL.createObjectURL(blob);
+                  const a = document.createElement('a');
+                  a.href = url;
+                  a.download = `${pluginId}.xye`;
+                  a.click();
+                  URL.revokeObjectURL(url);
+                  toast('已导出为 .xye', 'success');
+                } catch { toast('导出失败', 'error'); }
+              }}
+              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="导出插件为 .xye 包"
+            >
+              <svg width="14" height="14" 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="17 8 12 3 7 8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
+              </svg>
+              导出 .xye
+            </button>
+            {!isXye && (
+              <button
+                onClick={async () => {
+                  try {
+                    const res = await fetch(`/api/plugins/export?id=${encodeURIComponent(pluginId)}`);
+                    if (!res.ok) { toast('导出失败', 'error'); return; }
+                    const data = await res.text();
+                    const blob = new Blob([data], { type: 'application/json' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `${pluginId}.json`;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                    toast('已导出为 .json', 'success');
+                  } catch { toast('导出失败', 'error'); }
+                }}
+                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.textMuted,
+                  backgroundColor: 'transparent',
+                }}
+                title="导出为 .json 文件（仅单 JS 插件可用）"
+              >
+                <svg width="14" height="14" 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="17 8 12 3 7 8" />
+                  <line x1="12" y1="3" x2="12" y2="15" />
+                </svg>
+                导出 .json
+              </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({recordRouter: false, goBack: 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({recordRouter: false})}
+              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={isXye ? '从 manifest.json 解析插件信息' : '从代码注释中解析 @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 readOnly className="opacity-60 cursor-not-allowed" />
+                </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 }}>图标</label>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="shrink-0 w-8 h-8 rounded flex items-center justify-center"
+                        style={{ backgroundColor: s.bgTertiary }}
+                      >
+                        <PluginIcon icon={icon} pluginId={pluginId} fallback="🧩" size={20} />
+                      </div>
+                      <TextField value={icon} onChange={setIcon} placeholder="Emoji 或资源文件路径（如 icon.png）" />
+                      {isXye && (
+                        <button
+                          type="button"
+                          onClick={async () => {
+                            // 获取插件目录中的图片文件列表
+                            try {
+                              const res = await fetch(`/api/plugins/files-list?pluginId=${encodeURIComponent(pluginId)}`);
+                              if (res.ok) {
+                                const data = await res.json();
+                                const imageFiles: string[] = [];
+                                const collectImages = (files: typeof data.files) => {
+                                  for (const f of files) {
+                                    if (f.type === 'file' && /\.(png|jpg|jpeg|gif|svg|webp|ico)$/i.test(f.path)) {
+                                      imageFiles.push(f.path);
+                                    }
+                                    if (f.type === 'dir' && f.children) collectImages(f.children);
+                                  }
+                                };
+                                collectImages(data.files || []);
+                                if (imageFiles.length === 0) {
+                                  toast('插件目录中没有图片文件', 'warning');
+                                  return;
+                                }
+                                const selected = prompt(`选择图标文件（输入路径）：\n${imageFiles.join('\n')}`, imageFiles[0]);
+                                if (selected && imageFiles.includes(selected)) {
+                                  setIcon(selected);
+                                }
+                              }
+                            } catch { /* ignore */ }
+                          }}
+                          className="shrink-0 p-1.5 rounded text-xs border transition-colors"
+                          style={{ borderColor: s.border, color: s.textMuted, backgroundColor: 'transparent' }}
+                          title="从资源文件中选择图标"
+                        >
+                          <i className="fa-solid fa-image" style={{ fontSize: '11px' }} />
+                        </button>
+                      )}
+                    </div>
+                  </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">
+                <h3
+                  className="text-sm font-bold flex items-center gap-1.5 cursor-pointer select-none"
+                  style={{ color: s.textPrimary }}
+                  onClick={() => setPermSectionCollapsed(!permSectionCollapsed)}
+                >
+                  <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>
+                  UI 权限声明（可选）
+                  {(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>
+                  )}
+                </h3>
+              </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">
+                <h3
+                  className="text-sm font-bold flex items-center gap-1.5 cursor-pointer select-none"
+                  style={{ color: s.textPrimary }}
+                  onClick={() => setDepSectionCollapsed(!depSectionCollapsed)}
+                >
+                  <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>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                    <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+                    <line x1="12" y1="22.08" x2="12" y2="12" />
+                  </svg>
+                  依赖管理
+                  {dependencies.length > 0 && (
+                    <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}>
+                      {dependencies.length}
+                    </span>
+                  )}
+                </h3>
+                {!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">{isXye ? activeFile : 'plugin.js'}</span>
+              {isXye && (
+                <button
+                  onClick={() => setFileTreeOpen(!fileTreeOpen)}
+                  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={fileTreeOpen ? '隐藏文件树' : '显示文件树'}
+                >
+                  <i className="fa-solid fa-folder-tree" style={{ fontSize: '10px' }} />
+                </button>
+              )}
+              {isXye && (
+                <span className="px-1.5 py-0.5 rounded text-[10px] font-medium" style={{ backgroundColor: 'var(--color-accent)', color: '#fff' }}>
+                  XYE
+                </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>{codeLines.length} 行</span>
+          </div>
+          <div className="flex-1 flex overflow-hidden">
+            {/* .xye 文件树面板 */}
+            {isXye && fileTreeOpen && (
+              <>
+                <div
+                  className="shrink-0 overflow-y-auto py-2"
+                  style={{
+                    width: fileTreeWidth,
+                    backgroundColor: s.bgSecondary,
+                  }}
+                >
+                  <div className="px-3 py-1 text-[10px] font-bold uppercase tracking-wider flex items-center justify-between" style={{ color: s.textMuted }}>
+                    <span className="flex items-center gap-1.5">
+                      <i className="fa-solid fa-folder-tree" style={{ fontSize: '10px' }} />
+                      文件树
+                    </span>
+                    <span className="flex items-center gap-0.5">
+                      <button
+                        onClick={() => { setToolbarCreating('file'); setToolbarNewItemName(''); }}
+                        className="p-0.5 rounded transition-colors hover:opacity-70"
+                        title="新建文件"
+                      >
+                        <i className="fa-solid fa-file-circle-plus" style={{ fontSize: '10px' }} />
+                      </button>
+                      <button
+                        onClick={() => { setToolbarCreating('dir'); setToolbarNewItemName(''); }}
+                        className="p-0.5 rounded transition-colors hover:opacity-70"
+                        title="新建文件夹"
+                      >
+                        <i className="fa-solid fa-folder-plus" style={{ fontSize: '10px' }} />
+                      </button>
+                      <button
+                        onClick={() => refreshFileTree()}
+                        className="p-0.5 rounded transition-colors hover:opacity-70"
+                        title="刷新文件树"
+                      >
+                        <i className="fa-solid fa-arrows-rotate" style={{ fontSize: '10px' }} />
+                      </button>
+                      <button
+                        onClick={() => {
+                          const input = document.createElement('input');
+                          input.type = 'file';
+                          input.multiple = true;
+                          input.onchange = (e) => {
+                            const target = e.target as HTMLInputElement;
+                            if (target.files && target.files.length > 0) {
+                              handleUploadFiles(target.files);
+                            }
+                          };
+                          input.click();
+                        }}
+                        className="p-0.5 rounded transition-colors hover:opacity-70"
+                        title="上传文件"
+                      >
+                        <i className="fa-solid fa-upload" style={{ fontSize: '10px' }} />
+                      </button>
+                    </span>
+                  </div>
+                  {/* 工具栏新建输入框 */}
+                  {toolbarCreating && (
+                    <div className="px-3 py-1.5">
+                      <div className="text-[10px] mb-1" style={{ color: s.textMuted }}>
+                        {toolbarCreating === 'file' ? '新建文件（在根目录下）' : '新建文件夹（在根目录下）'}
+                      </div>
+                      <input
+                        ref={toolbarInputRef}
+                        value={toolbarNewItemName}
+                        onChange={(e) => setToolbarNewItemName(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' && toolbarNewItemName.trim()) {
+                            handleCreateFile(toolbarNewItemName.trim(), toolbarCreating === 'dir');
+                            setToolbarCreating(null);
+                            setToolbarNewItemName('');
+                          }
+                          if (e.key === 'Escape') {
+                            setToolbarCreating(null);
+                            setToolbarNewItemName('');
+                          }
+                        }}
+                        onBlur={() => {
+                          // 失焦时如果内容为空则关闭
+                          if (!toolbarNewItemName.trim()) {
+                            setToolbarCreating(null);
+                          }
+                        }}
+                        placeholder={toolbarCreating === 'file' ? '文件名.js' : '文件夹名'}
+                        className="w-full px-2 py-1 rounded text-xs outline-none"
+                        style={{ backgroundColor: s.bgTertiary, color: s.textPrimary, border: `1px solid ${s.border}` }}
+                      />
+                    </div>
+                  )}
+                  <FileTree
+                    files={xyeFiles}
+                    activeFile={activeFile}
+                    depth={0}
+                    onSelect={handleFileSelect}
+                    onContextMenu={(e, file) => {
+                      e.preventDefault();
+                      setContextMenu({ x: e.clientX, y: e.clientY, file });
+                    }}
+                    theme={s}
+                  />
+                </div>
+                <ResizableDivider onResize={handleResizeFileTree} />
+              </>
+            )}
+            {/* 右键菜单 */}
+            {contextMenu && (
+              <FileContextMenu
+                x={contextMenu.x}
+                y={contextMenu.y}
+                file={contextMenu.file}
+                activeFile={activeFile}
+                onClose={() => setContextMenu(null)}
+                onNewFile={(dirPath) => handleCreateFile(dirPath, false)}
+                onNewFolder={(dirPath) => handleCreateFile(dirPath, true)}
+                onDelete={(path) => handleDeleteFile(path)}
+                onRename={(oldPath, newPath) => handleRenameFile(oldPath, newPath)}
+                theme={s}
+              />
+            )}
+            <div className="flex-1 overflow-hidden">
+            <Editor
+              height="100%"
+              language={activeFile.endsWith('.json') ? 'json' : activeFile.endsWith('.css') ? 'css' : activeFile.endsWith('.html') ? 'html' : 'javascript'}
+              theme={editorTheme}
+              value={code}
+              onChange={(value) => {
+                const newCode = value ?? '';
+                setCode(newCode);
+                // .xye 模式下同步更新文件缓存
+                if (isXye && activeFile) {
+                  setFileContents(prev => ({ ...prev, [activeFile]: newCode }));
+                }
+              }}
+              onMount={handleEditorMount}
+              options={{
+                fontSize: 12,
+                fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, 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>
+    </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 EditPluginPage() {
+  return (
+    <React.Suspense fallback={<PageLoader />}>
+      <EditPluginPageContent />
+    </React.Suspense>
+  );
+}