xinyu-pro 0.21.0

package/app/extensions/page.tsx

@@ -0,0 +1,1572 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouterHistory } from '@/lib/router-history';
+import {
+  getPlugins,
+  deletePlugin,
+  getPluginBindings,
+  upsertPluginBinding,
+  updatePlugin,
+  exportPlugins,
+  importPlugins,
+} from '@/lib/storage';
+import { broadcastPluginBindingChange } from '@/lib/plugin-events';
+import {
+  PluginType,
+  PluginManifest,
+  PluginBinding,
+  PLUGIN_TYPE_LABELS,
+  UIPermission,
+  UI_PERMISSION_LABELS,
+} from '@/lib/plugin-types';
+import { usePluginContext } from '@/components/ui/PluginProvider';
+import { useToast } from '@/components/ui/ToastProvider';
+import MathCurveLoader from '@/components/MathCurveLoader';
+import PageHeader from '@/components/ui/PageHeader';
+import { PluginIcon } from '@/components/ui/PluginIcon';
+
+// ==================== 常量 ====================
+
+const ALL_TYPES: { type: PluginType | 'all'; label: string; icon: string }[] = [
+  { type: 'all', label: '全部', icon: '\u{1F4E6}' },
+  { type: 'game-mechanics', label: '游戏机制', icon: '\u{1F3AE}' },
+  { type: 'message-render', label: '消息渲染', icon: '\u{1F3A8}' },
+  { type: 'ai-prompt', label: 'AI Prompt', icon: '\u{1F916}' },
+  { type: 'input-enhance', label: '输入增强', icon: '\u2328\uFE0F' },
+];
+
+// ==================== 通用样式辅助 ====================
+
+const s = {
+  bgPrimary: 'var(--color-bg-primary)',
+  bgSecondary: 'var(--color-bg-secondary)',
+  bgTertiary: 'var(--color-bg-tertiary)',
+  textPrimary: 'var(--color-text-primary)',
+  textSecondary: 'var(--color-text-secondary)',
+  textMuted: 'var(--color-text-muted)',
+  accent: 'var(--color-accent)',
+  accentHover: 'var(--color-accent-hover)',
+  border: 'var(--color-border)',
+  shadow: 'var(--color-shadow)',
+};
+
+// ==================== 子组件 ====================
+
+/** 可排序的插件列表（同分类内拖拽排序） */
+function SortablePluginList({
+  plugins,
+  s,
+  onToggle,
+  onReorder,
+  onSelect,
+}: {
+  plugins: { plugin: PluginManifest; binding: PluginBinding | undefined }[];
+  s: Record<string, string>;
+  onToggle: (plugin: PluginManifest, enabled: boolean) => void;
+  onReorder: (pluginId: string, newSortOrder: number) => void;
+  onSelect: (plugin: PluginManifest) => void;
+}) {
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dropIndex, setDropIndex] = useState<number | null>(null);
+
+  const handleDragStart = (index: number) => {
+    setDragIndex(index);
+  };
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    setDropIndex(index);
+  };
+
+  const handleDrop = (index: number) => {
+    if (dragIndex !== null && dragIndex !== index) {
+      onReorder(plugins[dragIndex].plugin.id, index);
+    }
+    setDragIndex(null);
+    setDropIndex(null);
+  };
+
+  const handleDragEnd = () => {
+    setDragIndex(null);
+    setDropIndex(null);
+  };
+
+  return (
+    <div className="space-y-1.5">
+      {plugins.map(({ plugin, binding }, index) => {
+        const typeInfo = PLUGIN_TYPE_LABELS[plugin.type];
+        const enabled = binding?.enabled ?? false;
+        const isDragging = dragIndex === index;
+        const isDropTarget = dropIndex === index;
+
+        return (
+          <div
+            key={plugin.id}
+            draggable
+            onDragStart={() => handleDragStart(index)}
+            onDragOver={(e) => handleDragOver(e, index)}
+            onDrop={() => handleDrop(index)}
+            onDragEnd={handleDragEnd}
+            className="rounded-xl border p-4 cursor-pointer transition-all"
+            style={{
+              backgroundColor: s.bgSecondary,
+              borderColor: isDropTarget ? s.accent : s.border,
+              opacity: isDragging ? 0.5 : 1,
+              transform: isDropTarget && dragIndex !== null && dragIndex < index ? 'translateY(4px)' : undefined,
+            }}
+            onClick={() => onSelect(plugin)}
+          >
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex items-center gap-3 min-w-0 flex-1">
+                {/* 拖拽手柄 */}
+                <div
+                  className="shrink-0 mt-1 cursor-grab active:cursor-grabbing"
+                  style={{ color: s.textMuted }}
+                  onClick={(e) => e.stopPropagation()}
+                  title="拖拽调整顺序"
+                >
+                  <i className="fa-solid fa-grip-vertical" style={{ fontSize: '12px' }} />
+                </div>
+                <span className="text-2xl shrink-0 mt-0.5">
+                  <PluginIcon icon={plugin.icon} pluginId={plugin.id} fallback={typeInfo.icon} size={24} />
+                </span>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="text-sm font-bold" style={{ color: s.textPrimary }}>
+                      {plugin.name}
+                    </span>
+                    <span
+                      className="text-xs px-1.5 py-0.5 rounded"
+                      style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}
+                    >
+                      v{plugin.version}
+                    </span>
+                    <span
+                      className="text-xs px-1.5 py-0.5 rounded"
+                      style={{
+                        backgroundColor: enabled
+                          ? 'rgba(34,197,94,0.15)'
+                          : 'rgba(107,95,133,0.15)',
+                        color: enabled ? '#22c55e' : s.textMuted,
+                      }}
+                    >
+                      {typeInfo.icon} {typeInfo.label}
+                    </span>
+                  </div>
+                  <p className="text-xs mt-0.5" style={{ color: s.textMuted }}>
+                    by {plugin.author}
+                  </p>
+                  <p
+                    className="text-xs mt-1.5 line-clamp-2"
+                    style={{ color: s.textSecondary }}
+                  >
+                    {plugin.description || '暂无描述'}
+                  </p>
+                </div>
+              </div>
+              <div className="shrink-0" onClick={(e) => e.stopPropagation()}>
+                <ToggleSwitch
+                  enabled={enabled}
+                  onChange={(v) => onToggle(plugin, v)}
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** 启用/禁用开关 */
+function ToggleSwitch({ enabled, onChange }: { enabled: boolean; onChange: (v: boolean) => void }) {
+  return (
+    <button
+      onClick={() => onChange(!enabled)}
+      className="relative w-10 h-5 rounded-full transition-colors duration-200 shrink-0"
+      style={{
+        backgroundColor: enabled ? s.accent : s.bgTertiary,
+        border: `1px solid ${enabled ? s.accent : s.border}`,
+      }}
+    >
+      <span
+        className="absolute top-0.5 w-3.5 h-3.5 rounded-full transition-transform duration-200"
+        style={{
+          backgroundColor: enabled ? s.bgPrimary : s.textMuted,
+          left: enabled ? '22px' : '2px',
+        }}
+      />
+    </button>
+  );
+}
+
+/** 文本输入框 */
+function TextField({
+  value,
+  onChange,
+  placeholder,
+  mono = false,
+  type = 'text',
+  className = '',
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  mono?: boolean;
+  type?: string;
+  className?: string;
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className={`w-full px-3 py-1.5 rounded-lg text-sm border outline-none transition-colors ${className}`}
+      style={{
+        backgroundColor: s.bgTertiary,
+        borderColor: s.border,
+        color: s.textPrimary,
+        fontFamily: mono ? 'monospace' : 'inherit',
+      }}
+      onFocus={(e) => (e.target.style.borderColor = s.accent)}
+      onBlur={(e) => (e.target.style.borderColor = s.border)}
+    />
+  );
+}
+
+/** 文本域 */
+function TextAreaField({
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+  mono = false,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  rows?: number;
+  mono?: boolean;
+}) {
+  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,
+        fontFamily: mono ? 'monospace' : 'inherit',
+      }}
+      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 ConfirmDialog({
+  title,
+  message,
+  onConfirm,
+  onCancel,
+}: {
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="fixed inset-0 z-[90] flex items-center justify-center" style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}>
+      <div
+        className="rounded-xl p-6 max-w-sm w-full mx-4 shadow-xl"
+        style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}
+      >
+        <h3 className="text-base font-bold mb-2" style={{ color: s.textPrimary }}>{title}</h3>
+        <p className="text-sm mb-5" style={{ color: s.textSecondary }}>{message}</p>
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onCancel}
+            className="px-4 py-1.5 rounded-lg text-sm border"
+            style={{
+              borderColor: s.border,
+              color: s.textSecondary,
+              backgroundColor: 'transparent',
+            }}
+          >
+            取消
+          </button>
+          <button
+            onClick={onConfirm}
+            className="px-4 py-1.5 rounded-lg text-sm"
+            style={{
+              backgroundColor: '#dc2626',
+              color: '#fff',
+            }}
+          >
+            确认删除
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ==================== 权限标签列表（支持增删） ====================
+
+function PermTagList({
+  allPerms,
+  selected,
+  onChange,
+  accentColor,
+}: {
+  allPerms: [UIPermission, string][];
+  selected: UIPermission[];
+  onChange: (perms: UIPermission[]) => void;
+  accentColor: string;
+}) {
+  const [selectVal, setSelectVal] = useState('');
+
+  const handleAdd = () => {
+    if (selectVal && !selected.includes(selectVal as UIPermission)) {
+      onChange([...selected, selectVal as UIPermission]);
+    }
+    setSelectVal('');
+  };
+
+  const handleRemove = (perm: string) => {
+    onChange(selected.filter(p => p !== perm));
+  };
+
+  const available = allPerms.filter(([perm]) => !selected.includes(perm));
+
+  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 }}>
+                <span title={perm}>{label}</span>
+                <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 PluginDetailModal({
+  plugin,
+  binding,
+  onClose,
+  onToggle,
+  onDelete,
+  onEdit,
+  onExport,
+  onExportCode,
+  isXye,
+}: {
+  plugin: PluginManifest;
+  binding: PluginBinding | undefined;
+  onClose: () => void;
+  onToggle: (enabled: boolean) => void;
+  onDelete: () => void;
+  onEdit: () => void;
+  onExport: (format: 'xye' | 'json') => void;
+  onExportCode: () => void;
+  isXye?: boolean;
+}) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { toast } = useToast();
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [configValues, setConfigValues] = useState<Record<string, unknown>>({});
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [savingConfig, setSavingConfig] = useState(false);
+
+  // 权限声明本地状态
+  const [commonPermissions, setCommonPermissions] = useState<UIPermission[]>(plugin.commonPermissions || []);
+  const [exclusivePermissions, setExclusivePermissions] = useState<UIPermission[]>(plugin.exclusivePermissions || []);
+  const [requiredPermissions, setRequiredPermissions] = useState<UIPermission[]>(plugin.requiredPermissions || []);
+
+  // 折叠状态（默认全部折叠）
+  const [permSectionCollapsed, setPermSectionCollapsed] = useState(true);
+  const [commonPermCollapsed, setCommonPermCollapsed] = useState(true);
+  const [exclusivePermCollapsed, setExclusivePermCollapsed] = useState(true);
+  const [requiredPermCollapsed, setRequiredPermCollapsed] = useState(true);
+  const [configSectionCollapsed, setConfigSectionCollapsed] = useState(true);
+
+  useEffect(() => {
+    if (binding?.config) {
+      setConfigValues({ ...binding.config });
+    }
+    setCommonPermissions(plugin.commonPermissions || []);
+    setExclusivePermissions(plugin.exclusivePermissions || []);
+    setRequiredPermissions(plugin.requiredPermissions || []);
+  }, [binding, plugin.commonPermissions, plugin.exclusivePermissions, plugin.requiredPermissions]);
+
+  // 修改即保存（防抖）
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleConfigChange = useCallback((key: string, value: unknown) => {
+    setConfigValues(prev => {
+      const next = { ...prev, [key]: value };
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = setTimeout(async () => {
+        try {
+          await upsertPluginBinding({
+            extensionId: plugin.id,
+            scope: 'global',
+            enabled: binding?.enabled ?? true,
+            config: next,
+          });
+        } catch { /* 静默失败 */ }
+      }, 500);
+      return next;
+    });
+  }, [plugin.id, binding?.enabled]);
+
+  // 权限变更保存（防抖）
+  const permSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handlePermChange = useCallback((type: 'common' | 'exclusive' | 'required', perms: UIPermission[]) => {
+    if (type === 'common') setCommonPermissions(perms);
+    else if (type === 'exclusive') setExclusivePermissions(perms);
+    else setRequiredPermissions(perms);
+
+    if (permSaveTimerRef.current) clearTimeout(permSaveTimerRef.current);
+    permSaveTimerRef.current = setTimeout(async () => {
+      try {
+        const updatedCommon = type === 'common' ? perms : commonPermissions;
+        const updatedExclusive = type === 'exclusive' ? perms : exclusivePermissions;
+        const updatedRequired = type === 'required' ? perms : requiredPermissions;
+        await updatePlugin(plugin.id, {
+          commonPermissions: updatedCommon.length > 0 ? updatedCommon : [],
+          exclusivePermissions: updatedExclusive.length > 0 ? updatedExclusive : [],
+          requiredPermissions: updatedRequired.length > 0 ? updatedRequired : [],
+        });
+      } catch { /* 静默失败 */ }
+    }, 500);
+  }, [plugin.id, commonPermissions, exclusivePermissions, requiredPermissions]);
+
+  const allPermEntries = Object.entries(UI_PERMISSION_LABELS) as [UIPermission, string][];
+  const hasAnyPermissions = commonPermissions.length + exclusivePermissions.length + requiredPermissions.length > 0;
+
+  const typeInfo = PLUGIN_TYPE_LABELS[plugin.type];
+
+  return (
+      <div className="fixed inset-0 z-[80] flex items-center justify-center" style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}>
+        {/* 弹窗主体 - flex列布局，overflow-hidden限制整体 */}
+        <div
+            className="rounded-xl w-full max-w-2xl max-h-[85vh] mx-4 shadow-xl flex flex-col overflow-hidden"
+            style={{ backgroundColor: s.bgSecondary, border: `1px solid ${s.border}` }}
+        >
+          {/* 头部 - flex-shrink-0 不参与收缩，始终固定在顶部 */}
+          <div
+              className="px-6 py-4 flex items-center justify-between flex-shrink-0"
+              style={{ borderBottom: `1px solid ${s.border}` }}
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-2xl"><PluginIcon icon={plugin.icon} pluginId={plugin.id} fallback={typeInfo.icon} size={24} /></span>
+              <div>
+                <h2 className="text-base font-bold" style={{ color: s.textPrimary }}>{plugin.name}</h2>
+                <p className="text-xs" style={{ color: s.textMuted }}>
+                  v{plugin.version} &middot; {plugin.author} &middot; {typeInfo.icon} {typeInfo.label}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+          <span className="text-xs" style={{ color: binding?.enabled ? s.accent : s.textMuted }}>
+            {binding?.enabled ? '已启用' : '已禁用'}
+          </span>
+              <ToggleSwitch enabled={binding?.enabled ?? false} onChange={onToggle} />
+              <button
+                  onClick={onClose}
+                  className="w-8 h-8 rounded-lg flex items-center justify-center text-lg"
+                  style={{ color: s.textMuted }}
+              >
+                &times;
+              </button>
+            </div>
+          </div>
+
+          {/* 内容滚动区 - flex-1占满剩余空间，overflow-y-auto仅此处滚动 */}
+          <div className="px-6 py-4 space-y-5 overflow-y-auto flex-1">
+            {/* 描述 */}
+            <div>
+              <h3 className="text-sm font-bold mb-2" style={{ color: s.textPrimary }}>描述</h3>
+              <p className="text-sm leading-relaxed" style={{ color: s.textSecondary }}>
+                {plugin.description || '暂无描述'}
+              </p>
+            </div>
+
+            {/* 元信息 */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="rounded-lg p-3" style={{ backgroundColor: s.bgTertiary }}>
+                <div className="text-xs mb-1" style={{ color: s.textMuted }}>插件 ID</div>
+                <div className="text-xs font-mono" style={{ color: s.textPrimary }}>{plugin.id}</div>
+              </div>
+              <div className="rounded-lg p-3" style={{ backgroundColor: s.bgTertiary }}>
+                <div className="text-xs mb-1" style={{ color: s.textMuted }}>最低版本</div>
+                <div className="text-xs" style={{ color: s.textPrimary }}>{plugin.minAppVersion || '未指定'}</div>
+              </div>
+              <div className="rounded-lg p-3" style={{ backgroundColor: s.bgTertiary }}>
+                <div className="text-xs mb-1" style={{ color: s.textMuted }}>创建时间</div>
+                <div className="text-xs" style={{ color: s.textPrimary }}>{plugin.createdAt}</div>
+              </div>
+              <div className="rounded-lg p-3" style={{ backgroundColor: s.bgTertiary }}>
+                <div className="text-xs mb-1" style={{ color: s.textMuted }}>更新时间</div>
+                <div className="text-xs" style={{ color: s.textPrimary }}>{plugin.updatedAt}</div>
+              </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={() => 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>
+                  权限声明
+                  {hasAnyPermissions && (
+                    <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 && (
+                <>
+                  {!hasAnyPermissions && (
+                    <p className="text-xs" style={{ color: s.textMuted }}>该插件未声明任何权限</p>
+                  )}
+                  {/* 共享权限 */}
+                  <div className="border rounded-lg p-3 mt-2" style={{ borderColor: `${s.accent}40` }}>
+                    <div
+                      className="flex items-center justify-between mb-2 cursor-pointer select-none"
+                      onClick={() => setCommonPermCollapsed(!commonPermCollapsed)}
+                    >
+                      <div className="flex items-center gap-1.5">
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                          style={{ color: s.accent, transform: commonPermCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s ease' }}>
+                          <polyline points="6 9 12 15 18 9" />
+                        </svg>
+                        <span className="text-xs font-medium" style={{ color: s.accent }}>共享权限</span>
+                        {commonPermissions.length > 0 && commonPermCollapsed && (
+                          <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: `${s.accent}15`, color: s.accent }}>{commonPermissions.length}</span>
+                        )}
+                      </div>
+                      <span className="text-xs" style={{ color: s.textMuted }}>可被多个插件同时声明</span>
+                    </div>
+                    {!commonPermCollapsed && (
+                      <PermTagList
+                        allPerms={allPermEntries}
+                        selected={commonPermissions}
+                        onChange={(perms) => handlePermChange('common', perms)}
+                        accentColor={s.accent}
+                      />
+                    )}
+                  </div>
+                  {/* 排他权限 */}
+                  <div className="border rounded-lg p-3 mt-2" style={{ borderColor: '#f9731640' }}>
+                    <div
+                      className="flex items-center justify-between mb-2 cursor-pointer select-none"
+                      onClick={() => setExclusivePermCollapsed(!exclusivePermCollapsed)}
+                    >
+                      <div className="flex items-center gap-1.5">
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                          style={{ color: '#f97316', transform: exclusivePermCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s ease' }}>
+                          <polyline points="6 9 12 15 18 9" />
+                        </svg>
+                        <span className="text-xs font-medium" style={{ color: '#f97316' }}>排他权限</span>
+                        {exclusivePermissions.length > 0 && exclusivePermCollapsed && (
+                          <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: '#f9731615', color: '#f97316' }}>{exclusivePermissions.length}</span>
+                        )}
+                      </div>
+                      <span className="text-xs" style={{ color: s.textMuted }}>同时只能被一个插件声明</span>
+                    </div>
+                    {!exclusivePermCollapsed && (
+                      <PermTagList
+                        allPerms={allPermEntries}
+                        selected={exclusivePermissions}
+                        onChange={(perms) => handlePermChange('exclusive', perms)}
+                        accentColor="#f97316"
+                      />
+                    )}
+                  </div>
+                  {/* 必要权限 */}
+                  <div className="border rounded-lg p-3 mt-2" style={{ borderColor: '#3b82f640' }}>
+                    <div
+                      className="flex items-center justify-between mb-2 cursor-pointer select-none"
+                      onClick={() => setRequiredPermCollapsed(!requiredPermCollapsed)}
+                    >
+                      <div className="flex items-center gap-1.5">
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
+                          style={{ color: '#3b82f6', transform: requiredPermCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.15s ease' }}>
+                          <polyline points="6 9 12 15 18 9" />
+                        </svg>
+                        <span className="text-xs font-medium" style={{ color: '#3b82f6' }}>必要权限</span>
+                        {requiredPermissions.length > 0 && requiredPermCollapsed && (
+                          <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: '#3b82f615', color: '#3b82f6' }}>{requiredPermissions.length}</span>
+                        )}
+                      </div>
+                      <span className="text-xs" style={{ color: s.textMuted }}>没有此权限则插件不允许启动</span>
+                    </div>
+                    {!requiredPermCollapsed && (
+                      <PermTagList
+                        allPerms={allPermEntries}
+                        selected={requiredPermissions}
+                        onChange={(perms) => handlePermChange('required', perms)}
+                        accentColor="#3b82f6"
+                      />
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* 配置项编辑 */}
+            {plugin.configSchema && plugin.configSchema.length > 0 && (
+                <div>
+                  <h3
+                    className="text-sm font-bold flex items-center gap-1.5 cursor-pointer select-none mb-2"
+                    style={{ color: s.textPrimary }}
+                    onClick={() => setConfigSectionCollapsed(!configSectionCollapsed)}
+                  >
+                    <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>
+                    配置项
+                    {configSectionCollapsed && (
+                      <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}>
+                        {plugin.configSchema.length}
+                      </span>
+                    )}
+                  </h3>
+                  {!configSectionCollapsed && (
+                  <div className="space-y-3">
+                    {plugin.configSchema.map((field) => (
+                        <div key={field.key}>
+                          <div className="flex items-center justify-between mb-1">
+                            <div>
+                              <span className="text-xs font-medium" style={{ color: s.textSecondary }}>{field.label}</span>
+                              {field.description && (
+                                <p className="text-[10px] mt-0.5" style={{ color: s.textMuted }}>{field.description}</p>
+                              )}
+                            </div>
+                            {field.type === 'boolean' && (
+                              <ToggleSwitch
+                                  enabled={!!(field.key in configValues ? configValues[field.key] : field.defaultValue)}
+                                  onChange={(v) => handleConfigChange(field.key, v)}
+                              />
+                            )}
+                          </div>
+                          {field.type !== 'boolean' && (
+                            field.type === 'select' && field.options ? (
+                              <SelectField
+                                  value={String(configValues[field.key] ?? field.defaultValue)}
+                                  onChange={(v) => handleConfigChange(field.key, v)}
+                                  options={field.options}
+                              />
+                            ) : field.type === 'textarea' ? (
+                              <TextAreaField
+                                  value={String(configValues[field.key] ?? field.defaultValue)}
+                                  onChange={(v) => handleConfigChange(field.key, v)}
+                                  placeholder={field.description}
+                              />
+                            ) : (
+                              <TextField
+                                  value={String(configValues[field.key] ?? field.defaultValue)}
+                                  onChange={(v) =>
+                                      handleConfigChange(field.key, field.type === 'number' ? Number(v) : v)
+                                  }
+                                  type={field.type === 'number' ? 'number' : 'text'}
+                                  placeholder={field.description}
+                              />
+                            )
+                          )}
+                        </div>
+                    ))}
+                  </div>
+                  )}
+                </div>
+            )}
+
+            {/* 代码查看 */}
+            <div>
+              <h3 className="text-sm font-bold mb-2" style={{ color: s.textPrimary }}>插件代码</h3>
+              <div className="rounded-lg overflow-hidden border" style={{ borderColor: s.border }}>
+                <div
+                    className="px-3 py-1.5 text-xs font-mono flex items-center justify-between"
+                    style={{ backgroundColor: s.bgTertiary, color: s.textMuted }}
+                >
+                  <span>plugin.js</span>
+                  <span>{plugin.code.split('\n').length} 行</span>
+                </div>
+                <textarea
+                    readOnly
+                    value={plugin.code}
+                    rows={Math.min(Math.max(plugin.code.split('\n').length, 6), 20)}
+                    className="w-full px-3 py-2 text-xs font-mono resize-none outline-none"
+                    style={{
+                      backgroundColor: s.bgPrimary,
+                      color: s.textSecondary,
+                      border: 'none',
+                    }}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* 底部操作按钮 - flex-shrink-0 不参与收缩，始终固定在底部 */}
+          <div
+              className="px-6 py-3 flex items-center gap-3 flex-shrink-0"
+              style={{ borderTop: `1px solid ${s.border}` }}
+          >
+            <button
+                onClick={onEdit}
+                className="px-4 py-1.5 rounded-lg text-sm border"
+                style={{
+                  borderColor: s.border,
+                  color: s.textSecondary,
+                  backgroundColor: 'transparent',
+                }}
+            >
+              编辑插件
+            </button>
+            <button
+                onClick={() => onExport('xye')}
+                className="px-4 py-1.5 rounded-lg text-sm border flex items-center gap-1.5"
+                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={() => onExport('json')}
+                  className="px-4 py-1.5 rounded-lg text-sm border flex items-center gap-1.5"
+                  style={{
+                    borderColor: s.border,
+                    color: s.textSecondary,
+                    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={onExportCode}
+                className="px-4 py-1.5 rounded-lg text-sm border flex items-center gap-1.5"
+                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={() => setConfirmDelete(true)}
+                className="px-4 py-1.5 rounded-lg text-sm border"
+                style={{
+                  borderColor: 'rgba(220,38,38,0.4)',
+                  color: '#ef4444',
+                  backgroundColor: 'rgba(220,38,38,0.08)',
+                }}
+            >
+              删除插件
+            </button>
+          </div>
+
+          {confirmDelete && (
+              <ConfirmDialog
+                  title="删除插件"
+                  message={`确定要删除插件「${plugin.name}」吗？此操作不可撤销。`}
+                  onConfirm={() => {
+                    setConfirmDelete(false);
+                    onDelete();
+                  }}
+                  onCancel={() => setConfirmDelete(false)}
+              />
+          )}
+        </div>
+      </div>
+  );
+}
+
+// ==================== 主页面 ====================
+
+function ExtensionsPageContent() {
+  const { navigate } = useRouterHistory();
+  const { reloadPlugins, reloadSinglePlugin } = usePluginContext();
+  const { toast } = useToast();
+
+  // 数据状态
+  const [plugins, setPlugins] = useState<PluginManifest[]>([]);
+  const [bindings, setBindings] = useState<PluginBinding[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // UI 状态
+  const [activeType, setActiveType] = useState<PluginType | 'all'>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [detailPlugin, setDetailPlugin] = useState<PluginManifest | null>(null);
+
+  // 加载数据
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [pluginList, bindingList] = await Promise.all([
+        getPlugins(),
+        getPluginBindings('global'),
+      ]);
+      setPlugins(pluginList);
+      setBindings(bindingList);
+    } catch (e) {
+      console.error('加载插件数据失败:', e);
+      toast('加载插件数据失败', 'error');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // 获取插件绑定状态
+  const getBinding = useCallback(
+    (pluginId: string) => bindings.find((b) => b.extensionId === pluginId),
+    [bindings]
+  );
+
+  // 筛选插件
+  const filteredPlugins = plugins.filter((p) => {
+    if (activeType !== 'all' && p.type !== activeType) return false;
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      return (
+        p.name.toLowerCase().includes(q) ||
+        p.author.toLowerCase().includes(q) ||
+        p.id.toLowerCase().includes(q)
+      );
+    }
+    return true;
+  });
+
+  // 启用/禁用切换
+  const handleToggle = useCallback(
+    async (plugin: PluginManifest, enabled: boolean) => {
+      const binding = getBinding(plugin.id);
+      const ok = await upsertPluginBinding({
+        extensionId: plugin.id,
+        scope: 'global',
+        enabled,
+        config: binding?.config ?? {},
+        sortOrder: binding?.sortOrder ?? 0,
+      });
+      if (ok) {
+        toast(enabled ? `已启用「${plugin.name}」` : `已禁用「${plugin.name}」`, 'success');
+        // 刷新绑定列表
+        const updatedBindings = await getPluginBindings('global');
+        setBindings(updatedBindings);
+        reloadSinglePlugin(plugin.id).then();
+
+        // 全局禁用时：同步禁用所有世界级绑定，防止游戏内残留启用状态
+        if (!enabled) {
+          const allWorldBindings = await getPluginBindings('world');
+          const worldBindingsForPlugin = allWorldBindings.filter(b => b.extensionId === plugin.id);
+          for (const wb of worldBindingsForPlugin) {
+            await upsertPluginBinding({
+              extensionId: plugin.id,
+              scope: 'world',
+              worldId: wb.worldId,
+              enabled: false,
+              config: wb.config || {},
+              sortOrder: wb.sortOrder || 0,
+            });
+          }
+        }
+
+        // 广播变更事件，通知游戏页实时响应
+        broadcastPluginBindingChange({ pluginId: plugin.id, enabled, source: 'global' });
+      } else {
+        toast('操作失败', 'error');
+      }
+    },
+    [getBinding, reloadSinglePlugin]
+  );
+
+  // 拖拽排序：将插件移动到新位置，更新 sort_order
+  const handleReorder = useCallback(async (pluginId: string, newIndex: number) => {
+    // 获取当前分类下的所有绑定（按 sort_order 排序）
+    const currentBinding = bindings.find(b => b.extensionId === pluginId);
+    const currentPlugin = plugins.find(p => p.id === pluginId);
+    if (!currentBinding || !currentPlugin) return;
+
+    // 同类型插件按 sortOrder 排序
+    const sameTypeBindings = bindings
+      .filter(b => {
+        const p = plugins.find(pl => pl.id === b.extensionId);
+        return p && p.type === currentPlugin.type;
+      })
+      .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+
+    // 从旧位置移除，插入新位置
+    const oldIndex = sameTypeBindings.findIndex(b => b.extensionId === pluginId);
+    const reordered = [...sameTypeBindings];
+    reordered.splice(oldIndex, 1);
+    reordered.splice(newIndex, 0, currentBinding);
+
+    // 更新所有受影响绑定的 sort_order
+    for (let i = 0; i < reordered.length; i++) {
+      const b = reordered[i];
+      if (b.sortOrder !== i) {
+        await fetch('/api/plugins/bindings', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: b.id, sortOrder: i }),
+        });
+      }
+    }
+
+    // 刷新绑定列表
+    const updatedBindings = await getPluginBindings('global');
+    setBindings(updatedBindings);
+  }, [bindings, plugins]);
+
+  // 一键禁用所有插件
+  const handleDisableAll = useCallback(async () => {
+    const enabledBindings = bindings.filter(b => b.enabled);
+    if (enabledBindings.length === 0) return;
+    for (const binding of enabledBindings) {
+      await upsertPluginBinding({
+        id: binding.id,
+        extensionId: binding.extensionId,
+        scope: 'global',
+        enabled: false,
+        config: binding.config,
+        sortOrder: binding.sortOrder,
+      });
+      // 同步禁用所有世界级绑定
+      const allWorldBindings = await getPluginBindings('world');
+      const worldBindingsForPlugin = allWorldBindings.filter(b => b.extensionId === binding.extensionId);
+      for (const wb of worldBindingsForPlugin) {
+        await upsertPluginBinding({
+          extensionId: binding.extensionId,
+          scope: 'world',
+          worldId: wb.worldId,
+          enabled: false,
+          config: wb.config || {},
+          sortOrder: wb.sortOrder || 0,
+        });
+      }
+      broadcastPluginBindingChange({ pluginId: binding.extensionId, enabled: false, source: 'global' });
+    }
+    const updatedBindings = await getPluginBindings('global');
+    setBindings(updatedBindings);
+    reloadPlugins();
+    toast(`已禁用全部 ${enabledBindings.length} 个插件`, 'success');
+  }, [bindings, reloadPlugins]);
+
+  // 删除插件
+  const handleDelete = useCallback(
+    async (pluginId: string) => {
+      await deletePlugin(pluginId);
+      toast('插件已删除', 'success');
+      setDetailPlugin(null);
+      loadData();
+      reloadPlugins();
+    },
+    [loadData, reloadPlugins]
+  );
+
+  // 打开创建页面
+  const handleCreate = useCallback(() => {
+    navigate('/extensions/create');
+  }, []);
+
+  // 打开编辑页面
+  const handleEdit = useCallback((plugin: PluginManifest) => {
+    setDetailPlugin(null);
+    navigate('/extensions/edit/' + plugin.id);
+  }, []);
+
+  // 导入插件
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleImport = useCallback(async () => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (!files || files.length === 0) return;
+
+      try {
+        // 分离 .xye 包和 .json 文件
+        const xyeFiles: File[] = [];
+        const jsonFiles: File[] = [];
+        for (let i = 0; i < files.length; i++) {
+          if (files[i].name.endsWith('.xye')) {
+            xyeFiles.push(files[i]);
+          } else {
+            jsonFiles.push(files[i]);
+          }
+        }
+
+        let totalImported = 0;
+        let totalSkipped = 0;
+        let totalProcessed = 0;
+
+        // 处理 .xye 包（通过后端 API）
+        for (const xyeFile of xyeFiles) {
+          try {
+            const formData = new FormData();
+            formData.append('file', xyeFile);
+            const res = await fetch('/api/plugins/import-package', {
+              method: 'POST',
+              body: formData,
+            });
+            if (res.ok) {
+              const data = await res.json();
+              totalImported += data.imported || 0;
+              totalSkipped += data.skipped || 0;
+              totalProcessed += data.total || 0;
+            } else {
+              const err = await res.json().catch(() => ({}));
+              toast(`导入 ${xyeFile.name} 失败: ${err.error || '未知错误'}`, 'error');
+            }
+          } catch {
+            toast(`导入 ${xyeFile.name} 失败`, 'error');
+          }
+        }
+
+        // 处理 .json 文件（通过现有 JSON API）
+        if (jsonFiles.length > 0) {
+          const allPlugins: unknown[] = [];
+          for (const jsonFile of jsonFiles) {
+            const text = await jsonFile.text();
+            const data = JSON.parse(text);
+            if (data.format === 'xinyu-extension-v1' && Array.isArray(data.plugins)) {
+              allPlugins.push(...data.plugins);
+            } else if (Array.isArray(data)) {
+              allPlugins.push(...data);
+            } else if (data.id && data.code) {
+              allPlugins.push(data);
+            }
+          }
+
+          if (allPlugins.length > 0) {
+            const result = await importPlugins(allPlugins);
+            totalImported += result.imported;
+            totalSkipped += result.skipped;
+            totalProcessed += result.total;
+          }
+        }
+
+        if (totalProcessed > 0) {
+          toast(
+            `导入完成：成功 ${totalImported} 个，跳过 ${totalSkipped} 个，共 ${totalProcessed} 个`,
+            totalImported > 0 ? 'success' : 'warning'
+          );
+          loadData();
+          reloadPlugins();
+        } else if (xyeFiles.length === 0) {
+          toast('未找到有效的插件数据', 'warning');
+        }
+      } catch {
+        toast('导入失败：文件格式错误', 'error');
+      }
+
+      // 重置 input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    },
+    [loadData, reloadPlugins]
+  );
+
+  // 导出全部插件
+  const handleExport = useCallback(async () => {
+    try {
+      const data = await exportPlugins();
+      const blob = new Blob([data], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `xinyu-plugins-${new Date().toISOString().slice(0, 10)}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+      toast('插件已导出', 'success');
+    } catch {
+      toast('导出失败', 'error');
+    }
+  }, [toast]);
+
+  // 导出单个插件的代码文件（.js）
+  const handleExportCode = useCallback(async (pluginId: string, pluginName: string, code: string) => {
+    try {
+      // kebab-case 转 camelCase: xinyu.cache-optimizer -> xinyuCacheOptimizer
+      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);
+      toast(`已导出「${pluginName}」代码`, 'success');
+    } catch {
+      toast('导出代码失败', 'error');
+    }
+  }, [toast]);
+
+  // 导出单个插件
+  const handleExportPlugin = useCallback(async (pluginId: string, pluginName: string, format: 'xye' | 'json' = 'xye') => {
+    try {
+      if (format === 'xye') {
+        const response = await fetch(`/api/plugins/export-xye?id=${encodeURIComponent(pluginId)}`);
+        if (!response.ok) {
+          toast('导出失败', 'error');
+          return;
+        }
+        const blob = await response.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${pluginId}.xye`;
+        a.click();
+        URL.revokeObjectURL(url);
+        toast(`已导出「${pluginName}」为 .xye`, 'success');
+      } else {
+        const response = await fetch(`/api/plugins/export?id=${encodeURIComponent(pluginId)}`);
+        if (!response.ok) {
+          toast('导出失败', 'error');
+          return;
+        }
+        const data = await response.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(`已导出「${pluginName}」为 .json`, 'success');
+      }
+    } catch {
+      toast('导出失败', 'error');
+    }
+  }, [toast]);
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: s.bgPrimary }}>
+
+      {/* 顶部导航栏 */}
+      <PageHeader
+        title="星语 · 插件管理"
+        showBack={true}
+        icon={<span style={{ color: 'var(--color-accent)' }}>&#10022;</span>}
+        sticky
+        actions={
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleImport}
+              className="px-3 py-1.5 rounded-lg text-xs border flex items-center gap-1.5"
+              style={{
+                borderColor: s.border,
+                color: s.textSecondary,
+                backgroundColor: 'transparent',
+              }}
+              title="导入插件 JSON 文件（支持单个插件或多插件包）"
+            >
+              <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="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+              导入插件
+            </button>
+            <button
+              onClick={handleExport}
+              className="px-3 py-1.5 rounded-lg text-xs border flex items-center gap-1.5"
+              style={{
+                borderColor: s.border,
+                color: s.textSecondary,
+                backgroundColor: 'transparent',
+              }}
+              title="导出全部插件为一个 JSON 文件"
+            >
+              <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>
+              导出全部
+            </button>
+            <button
+              onClick={() => navigate('/extensions/tutorial')}
+              className="px-3 py-1.5 rounded-lg text-xs border flex items-center gap-1.5"
+              style={{
+                borderColor: s.border,
+                color: s.textSecondary,
+                backgroundColor: 'transparent',
+              }}
+              title="插件开发教程"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+              </svg>
+              开发教程
+            </button>
+            <button
+              onClick={handleCreate}
+              className="px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5"
+              style={{
+                backgroundColor: s.accent,
+                color: s.bgPrimary,
+              }}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              创建插件
+            </button>
+            {bindings.some(b => b.enabled) && (
+              <button
+                onClick={handleDisableAll}
+                className="px-3 py-1.5 rounded-lg text-xs border flex items-center gap-1.5"
+                style={{
+                  borderColor: '#ef4444',
+                  color: '#ef4444',
+                  backgroundColor: 'transparent',
+                }}
+                title="禁用所有已启用的插件"
+              >
+                <i className="fa-solid fa-power-off" style={{ fontSize: '11px' }} />
+                全部禁用
+              </button>
+            )}
+            {bindings.some(b => b.enabled) && (
+            <button
+              onClick={async () => {
+                await reloadPlugins();
+                toast('已刷新全部插件', 'success');
+              }}
+              className="px-3 py-1.5 rounded-lg text-xs border flex items-center gap-1.5"
+              style={{
+                borderColor: s.border,
+                color: s.textSecondary,
+                backgroundColor: 'transparent',
+              }}
+              title="重新加载所有插件"
+            >
+              <i className="fa-solid fa-arrows-rotate" style={{ fontSize: '11px' }} />
+              刷新全部
+            </button>
+            )}
+          </div>
+        }
+      />
+
+      {/* 主体内容 */}
+      <div className="flex" style={{ height: 'calc(100vh - 52px)' }}>
+        {/* 左侧分类筛选 */}
+        <nav
+          className="w-48 shrink-0 p-3 flex flex-col gap-1 overflow-y-auto"
+          style={{
+            backgroundColor: s.bgSecondary,
+            borderRight: `1px solid ${s.border}`,
+          }}
+        >
+          {ALL_TYPES.map((item) => {
+            const isActive =
+              item.type === 'all'
+                ? activeType === 'all'
+                : activeType === item.type;
+            return (
+              <button
+                key={item.type}
+                onClick={() => setActiveType(item.type)}
+                className="w-full text-left px-3 py-2 rounded-lg text-sm flex items-center gap-2 transition-colors"
+                style={{
+                  backgroundColor: isActive ? s.bgTertiary : 'transparent',
+                  color: isActive ? s.accent : s.textSecondary,
+                  fontWeight: isActive ? 600 : 400,
+                }}
+              >
+                <span>{item.icon}</span>
+                <span>{item.label}</span>
+              </button>
+            );
+          })}
+
+          {/* 分隔线 */}
+          <div className="my-2" style={{ borderTop: `1px solid ${s.border}` }} />
+
+          {/* 搜索框 */}
+          <div className="relative">
+            <svg
+              className="absolute left-2.5 top-1/2 -translate-y-1/2"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              style={{ color: s.textMuted }}
+            >
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="搜索插件..."
+              className="w-full pl-8 pr-3 py-1.5 rounded-lg text-sm border outline-none transition-colors"
+              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)}
+            />
+          </div>
+        </nav>
+
+        {/* 右侧内容区 */}
+        <main className="flex-1 p-4 overflow-y-auto">
+          {loading ? (
+            <div className="flex flex-col items-center justify-center py-20 gap-3">
+              <MathCurveLoader size={64} />
+            </div>
+          ) : filteredPlugins.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-20 gap-3">
+              <span className="text-4xl opacity-40">&#128230;</span>
+              <p className="text-sm" style={{ color: s.textMuted }}>
+                {searchQuery || activeType !== 'all'
+                  ? '没有找到匹配的插件'
+                  : '还没有安装任何插件'}
+              </p>
+              {!searchQuery && activeType === 'all' && (
+                <div className="flex items-center gap-3">
+                  <button
+                    onClick={handleCreate}
+                    className="px-4 py-1.5 rounded-lg text-sm border"
+                    style={{
+                      borderColor: s.accent,
+                      color: s.accent,
+                      backgroundColor: 'transparent',
+                    }}
+                  >
+                    创建第一个插件
+                  </button>
+                  <button
+                    onClick={handleImport}
+                    className="px-4 py-1.5 rounded-lg text-sm border flex items-center gap-2"
+                    style={{
+                      borderColor: s.border,
+                      color: s.textSecondary,
+                      backgroundColor: 'transparent',
+                    }}
+                  >
+                    <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="7 10 12 15 17 10" />
+                      <line x1="12" y1="15" x2="12" y2="3" />
+                    </svg>
+                    导入插件
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="space-y-5">
+              {activeType === 'all'
+                // 全部视图：按分类分组
+                ? ALL_TYPES.filter(t => t.type !== 'all').map((typeItem) => {
+                    const groupPlugins = filteredPlugins
+                      .filter(p => p.type === typeItem.type)
+                      .map(p => ({ plugin: p, binding: getBinding(p.id) }))
+                      .sort((a, b) => (a.binding?.sortOrder ?? 0) - (b.binding?.sortOrder ?? 0));
+                    if (groupPlugins.length === 0) return null;
+                    return (
+                      <div key={typeItem.type}>
+                        <div className="flex items-center gap-2 mb-2">
+                          <span className="text-sm">{typeItem.icon}</span>
+                          <span className="text-xs font-medium" style={{ color: s.textSecondary }}>
+                            {typeItem.label}
+                          </span>
+                          <span className="text-xs" style={{ color: s.textMuted }}>
+                            ({groupPlugins.length})
+                          </span>
+                        </div>
+                        <SortablePluginList
+                          plugins={groupPlugins}
+                          s={s}
+                          onToggle={handleToggle}
+                          onReorder={handleReorder}
+                          onSelect={setDetailPlugin}
+                        />
+                      </div>
+                    );
+                  })
+                // 分类视图：同分类内可排序
+                : (() => {
+                    const groupPlugins = filteredPlugins
+                      .map(p => ({ plugin: p, binding: getBinding(p.id) }))
+                      .sort((a, b) => (a.binding?.sortOrder ?? 0) - (b.binding?.sortOrder ?? 0));
+                    return (
+                      <SortablePluginList
+                        plugins={groupPlugins}
+                        s={s}
+                        onToggle={handleToggle}
+                        onReorder={handleReorder}
+                        onSelect={setDetailPlugin}
+                      />
+                    );
+                  })()
+              }
+            </div>
+          )}
+        </main>
+      </div>
+
+      {/* 隐藏的文件输入 */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".json,.xye"
+        multiple
+        className="hidden"
+        onChange={handleFileChange}
+      />
+
+      {/* 插件详情模态框 */}
+      {detailPlugin && (
+        <PluginDetailModal
+          plugin={detailPlugin}
+          binding={getBinding(detailPlugin.id)}
+          onClose={() => setDetailPlugin(null)}
+          onToggle={(enabled) => handleToggle(detailPlugin, enabled)}
+          onDelete={() => handleDelete(detailPlugin.id)}
+          onEdit={() => handleEdit(detailPlugin)}
+          onExport={(format) => handleExportPlugin(detailPlugin.id, detailPlugin.name, format)}
+          onExportCode={() => handleExportCode(detailPlugin.id, detailPlugin.name, detailPlugin.code)}
+          isXye={!!detailPlugin.codePath && !detailPlugin.codePath.endsWith('/plugin.js')}
+        />
+      )}
+    </div>
+  );
+}
+
+export default function ExtensionsPage() {
+  return (
+    <React.Suspense>
+      <ExtensionsPageContent />
+    </React.Suspense>
+  );
+}