xinyu-pro 0.21.0

package/app/editor/page.tsx

@@ -0,0 +1,1466 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import React, { useState, useCallback, useEffect, useMemo, useRef, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouterHistory } from '@/lib/router-history';
+import { WorldCardField, WorldCardTemplate, FieldType } from '@/lib/types';
+import { getAppSettings, saveWorldTemplate, getWorldTemplate, saveGameSession, StoredSession, getPlugins } from '@/lib/storage';
+import { fieldsToWorldSetting, fieldsToWorldData, injectWorldData } from '@/lib/parseWorldCard';
+import { useToast } from '@/components/ui/ToastProvider';
+import ConfirmDialog from '@/components/ui/ConfirmDialog';
+import PageHeader from '@/components/ui/PageHeader';
+import { PluginIcon } from '@/components/ui/PluginIcon';
+import {fail} from "node:assert";
+
+// ==================== 预设生成规则 ====================
+
+const PRESET_RULES = [
+  { id: 'fantasy', name: '奇幻史诗', rules: '使用深紫/深蓝背景配金色装饰线条，标题用大号衬线字体，内容区用古典排版，角落添加魔法阵或符文装饰。' },
+  { id: 'cyber', name: '赛博朋克', rules: '使用纯黑背景配荧光绿/霓虹色强调，添加扫描线纹理效果，使用等宽字体，角落用几何线条装饰，添加故障艺术元素。' },
+  { id: 'classical', name: '古典历史', rules: '使用暖黄/米色纸张质感背景，棕色/暗红色装饰边框和花纹，角落添加传统云纹或回纹装饰，使用衬线字体。' },
+  { id: 'horror', name: '恐怖悬疑', rules: '使用深红/暗紫/黑色配色，锐利锯齿线条装饰，不对称布局，添加裂纹或血迹效果，文字使用扭曲感字体。' },
+  { id: 'lighthearted', name: '轻松日常', rules: '使用明亮柔和的配色（浅蓝、浅粉、浅绿），圆润的边角和装饰元素，添加小图标或emoji装饰，整体风格清新可爱。' },
+];
+
+// ==================== 默认字段 ====================
+
+const DEFAULT_FIELDS: WorldCardField[] = [];
+
+// ==================== 工具函数 ====================
+
+function generateFieldId(): string {
+  return 'f' + Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
+}
+
+function generateTemplateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
+}
+
+const TYPE_LABELS: Record<FieldType, string> = {
+  text: '文本', textarea: '多行', select: '选择', checkbox: '勾选', slider: '滑块',
+};
+
+// ==================== 可拖拽字段列表组件 ====================
+
+/** 可拖拽调整高度的分割条 */
+function ResizeHandle({ onResize }: { onResize: (deltaY: number) => void }) {
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    let lastY = e.clientY;
+    const onMouseMove = (ev: MouseEvent) => {
+      const deltaY = ev.clientY - lastY;
+      lastY = ev.clientY;
+      onResize(deltaY);
+    };
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+  }, [onResize]);
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      className="shrink-0 cursor-row-resize group relative"
+      style={{ height: '5px', backgroundColor: 'transparent' }}
+    >
+      <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-0.5 rounded-full transition-colors"
+        style={{ backgroundColor: 'var(--color-border)' }} />
+      <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+        style={{ backgroundColor: 'var(--color-accent)' }} />
+    </div>
+  );
+}
+
+function DraggableFieldList({
+                                fields,
+                                selectedId,
+                                onSelect,
+                                onReorder,
+                                onRemove,
+                                readonly = false,
+                            }: {
+    fields: WorldCardField[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    onRemove: (id: string) => void;
+    readonly?: boolean;
+}) {
+    const [dragIndex, setDragIndex] = useState<number | null>(null);
+    const [dropIndicator, setDropIndicator] = useState<{ index: number; position: 'before' | 'after' } | null>(null);
+    const dragItemRef = useRef<number | null>(null);
+
+    const handleDragStart = (index: number) => {
+        setDragIndex(index);
+        dragItemRef.current = index;
+    };
+
+    const handleDragOver = (e: React.DragEvent, index: number) => {
+        e.preventDefault();
+        if (dragItemRef.current === null || dragItemRef.current === index) return;
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        const position = e.clientY < midY ? 'before' : 'after';
+        setDropIndicator({ index, position });
+    };
+
+    const handleDragLeave = () => {
+        setDropIndicator(null);
+    };
+
+    const handleDrop = (e: React.DragEvent, index: number) => {
+        e.preventDefault();
+        if (dragItemRef.current === null || dragItemRef.current === index) {
+            setDragIndex(null);
+            setDropIndicator(null);
+            return;
+        }
+        const from = dragItemRef.current;
+        let to = index;
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        if (e.clientY > midY && from < to) {
+            // 不变
+        } else if (e.clientY > midY && from > to) {
+            to = index + 1;
+        } else if (e.clientY <= midY && from < to) {
+            to = index - 1;
+        }
+        if (from !== to) {
+            onReorder(from, to);
+        }
+        setDragIndex(null);
+        setDropIndicator(null);
+        dragItemRef.current = null;
+    };
+
+    const handleDragEnd = () => {
+        setDragIndex(null);
+        setDropIndicator(null);
+        dragItemRef.current = null;
+    };
+
+    return (
+        <div className="space-y-0.5">
+            {fields.map((field, index) => {
+                const isDragging = dragIndex === index;
+                const showTopBorder = dropIndicator?.index === index && dropIndicator.position === 'before' && dragIndex !== index;
+                const showBottomBorder = dropIndicator?.index === index && dropIndicator.position === 'after' && dragIndex !== index;
+
+                return (
+                    <div
+                        key={field.id}
+                        draggable={!readonly}
+                        onDragStart={() => !readonly && handleDragStart(index)}
+                        onDragOver={(e) => !readonly && handleDragOver(e, index)}
+                        onDragLeave={() => !readonly && handleDragLeave()}
+                        onDrop={(e) => !readonly && handleDrop(e, index)}
+                        onDragEnd={() => !readonly && handleDragEnd()}
+                        className={`relative flex items-center gap-1.5 px-2 py-1.5 rounded-lg transition-colors group ${
+                            isDragging ? 'opacity-40' : ''
+                        }`}
+                        style={{
+                            backgroundColor: selectedId === field.id ? 'var(--color-bg-tertiary)' : 'transparent',
+                            borderTop: showTopBorder ? '2px solid var(--color-accent)' : undefined,
+                            borderBottom: showBottomBorder ? '2px solid var(--color-accent)' : undefined,
+                            marginBottom: showBottomBorder ? '-1px' : undefined,
+                        }}
+                    >
+                        {/* 拖拽手柄 */}
+                        {!readonly && (
+                            <i className="fa-solid fa-grip-vertical shrink-0 cursor-grab active:cursor-grabbing"
+                               style={{ color: 'var(--color-text-muted)', opacity: 0.4, fontSize: '12px' }} />
+                        )}
+
+                        {/* 选中按钮 - 替代原来带 onClick 的 div */}
+                        <button
+                            onClick={() => onSelect(field.id)}
+                            className="flex-1 flex items-center gap-1.5 text-left min-w-0"
+                            style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
+                        >
+              <span className="flex-1 text-sm truncate" style={{ color: 'var(--color-text-primary)' }}>
+                {field.label}
+              </span>
+
+                            {/* 类型标签 */}
+                            <span className="text-xs px-1.5 py-0.5 rounded shrink-0" style={{
+                                backgroundColor: 'var(--color-bg-tertiary)',
+                                color: 'var(--color-text-muted)',
+                                fontSize: '10px',
+                            }}>
+                {TYPE_LABELS[field.type]}
+              </span>
+
+                            {/* 编辑权限图标 */}
+                            <span className="shrink-0 flex items-center justify-center" style={{ width: '16px', height: '16px', color: field.editableBeforeGame ? '#22c55e' : 'var(--color-text-muted)', fontSize: '12px' }} title={field.editableBeforeGame ? '可编辑' : '锁定'}>
+                <i className={field.editableBeforeGame ? 'fa-solid fa-pen' : 'fa-solid fa-lock'} />
+              </span>
+
+                            {/* 必填标记 */}
+                            {readonly ? (
+                                <span className="shrink-0 flex items-center justify-center" style={{ width: '16px', height: '16px', fontSize: '10px', color: field.required ? '#ef4444' : 'transparent' }}>*</span>
+                            ) : field.required ? (
+                                <span className="shrink-0 flex items-center justify-center" style={{ width: '16px', height: '16px', fontSize: '10px', color: '#ef4444' }}>*</span>
+                            ) : null}
+                        </button>
+
+                        {/* 删除按钮（readonly 模式下不显示） */}
+                        {!readonly && !field.required && (
+                            <button
+                                onClick={(e) => { e.stopPropagation(); onRemove(field.id); }}
+                                className="opacity-0 group-hover:opacity-100 shrink-0 flex items-center justify-center rounded transition-opacity"
+                                style={{ width: '16px', height: '16px', color: 'var(--color-text-muted)', fontSize: '12px' }}
+                                title="删除"
+                            >
+                                <i className="fa-solid fa-xmark" />
+                            </button>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+// ==================== 列宽调整分隔条 ====================
+
+function Resizer({ onResize }: { onResize: (delta: number) => void }) {
+  const isResizing = useRef(false);
+  const startX = useRef(0);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    isResizing.current = true;
+    startX.current = e.clientX;
+    e.preventDefault();
+
+    const handleMouseMove = (ev: MouseEvent) => {
+      if (!isResizing.current) return;
+      const delta = ev.clientX - startX.current;
+      startX.current = ev.clientX;
+      onResize(delta);
+    };
+
+    const handleMouseUp = () => {
+      isResizing.current = false;
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+  };
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      className="w-1 shrink-0 cursor-col-resize hover:bg-opacity-50 transition-colors"
+      style={{ backgroundColor: 'var(--color-border)' }}
+      title="拖拽调整列宽"
+    />
+  );
+}
+
+// ==================== SVG 预览组件（自适应 + 缩放） ====================
+
+const SVG_VIEWBOX_W = 400;
+const SVG_VIEWBOX_H = 560;
+
+function SvgPreview({ svgCode, scale, containerRef }: {
+  svgCode: string;
+  scale: number;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const [size, setSize] = useState({ w: 0, h: 0 });
+
+  // 根据容器尺寸计算 SVG 显示大小（默认高度 = 容器高度，宽度按比例）
+  React.useEffect(() => {
+    const update = () => {
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      // 减去 padding (12px * 2) 和边距
+      const availH = rect.height - 24;
+      const availW = rect.width - 24;
+      // 默认：高度填满，宽度按比例
+      const fitH = availH;
+      const fitW = fitH * (SVG_VIEWBOX_W / SVG_VIEWBOX_H);
+      // 如果宽度超出容器，则宽度填满，高度按比例
+      if (fitW > availW) {
+        const w = availW;
+        const h = w * (SVG_VIEWBOX_H / SVG_VIEWBOX_W);
+        setSize({ w, h });
+      } else {
+        setSize({ w: fitW, h: fitH });
+      }
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    if (containerRef.current) ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [containerRef]);
+
+  const finalW = size.w * scale;
+  const finalH = size.h * scale;
+
+  return (
+    <div className="rounded-lg border shadow-lg overflow-hidden shrink-0" style={{
+      borderColor: 'var(--color-border)',
+      boxShadow: '0 4px 16px var(--color-shadow)',
+      backgroundColor: 'var(--color-bg-secondary)',
+      width: `${finalW}px`,
+      height: `${finalH}px`,
+      transition: 'width 0.2s ease, height 0.2s ease',
+    }}>
+      <iframe
+        srcDoc={svgCode}
+        style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+        title="世界卡片预览"
+      />
+    </div>
+  );
+}
+
+// ==================== 自动扩展高度 Textarea ====================
+
+function AutoResizeTextarea({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  style,
+  onFocus,
+  onBlur,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+}) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const maxHeightRef = useRef(400); // 默认最大高度
+
+  // 计算最大高度：父容器可用空间
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const updateMax = () => {
+      const parent = el.parentElement;
+      if (parent) {
+        // 获取父容器在视口中的位置，计算到底部的剩余空间
+        const parentRect = parent.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const elTop = el.getBoundingClientRect().top - parentRect.top;
+        const available = viewportHeight - parentRect.top - elTop - 16; // 16px 底部留白
+        maxHeightRef.current = Math.max(120, available);
+      }
+    };
+    updateMax();
+    window.addEventListener('resize', updateMax);
+    return () => window.removeEventListener('resize', updateMax);
+  }, []);
+
+  // 自动调整高度
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    const scrollH = el.scrollHeight;
+    el.style.height = `${Math.min(scrollH, maxHeightRef.current)}px`;
+  }, [value]);
+
+  return (
+    <textarea
+      ref={ref}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      rows={1}
+      disabled={disabled}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      className="w-full px-3 py-1.5 rounded-lg text-sm border outline-none resize-y transition-colors"
+      style={{ ...style, minHeight: '40px', maxHeight: `${maxHeightRef.current}px`, overflow: 'hidden' }}
+    />
+  );
+}
+
+// ==================== 字段值输入组件 ====================
+
+function FieldValueInput({ field, onChange, readonly = false, showCustomInput = true }: {
+  field: WorldCardField;
+  onChange: (value: string | string[] | boolean | number) => void;
+  readonly?: boolean;
+  showCustomInput?: boolean;
+}) {
+  const s: React.CSSProperties = {
+    backgroundColor: 'var(--color-bg-tertiary)',
+    borderColor: 'var(--color-border)',
+    color: 'var(--color-text-primary)',
+    opacity: readonly ? 0.6 : 1,
+  };
+  const focus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => { if (!readonly) e.currentTarget.style.borderColor = 'var(--color-accent)'; };
+  const blur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => { e.currentTarget.style.borderColor = 'var(--color-border)'; };
+
+  switch (field.type) {
+    case 'textarea':
+      return <AutoResizeTextarea value={String(field.value || '')} onChange={(val) => onChange(val)}
+        placeholder={field.placeholder} disabled={readonly}
+        style={s} onFocus={focus} onBlur={blur} />;
+    case 'select': {
+      const opts = field.options || [];
+      const cur = String(field.value || '');
+      const isCustom = field.allowCustomOption && !opts.some(o => o.value === cur) && cur;
+      return (
+        <div className="space-y-1">
+          <select value={isCustom ? '__custom__' : cur}
+            onChange={(e) => { if (e.target.value !== '__custom__') onChange(e.target.value); }}
+            className="w-full px-3 py-1.5 rounded-lg text-sm border outline-none transition-colors"
+            style={s} onFocus={focus} onBlur={blur} disabled={readonly}>
+            <option value="">请选择...</option>
+            {opts.map((o, i) => <option key={i} value={o.value}>{o.label}</option>)}
+            {isCustom && <option value="__custom__">{cur} (自定义)</option>}
+          </select>
+          {field.allowCustomOption && showCustomInput && (
+            <input value={isCustom ? cur : ''} onChange={(e) => onChange(e.target.value)}
+              placeholder="输入自定义选项..."
+              className="w-full px-3 py-1 rounded-lg text-xs border outline-none transition-colors"
+              style={s} onFocus={focus} onBlur={blur} disabled={readonly} />
+          )}
+        </div>
+      );
+    }
+    case 'checkbox':
+      return (
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" checked={Boolean(field.value)} onChange={(e) => onChange(e.target.checked)} className="rounded" disabled={readonly} />
+          <span className="text-sm" style={{ color: 'var(--color-text-primary)' }}>{field.value ? '是' : '否'}</span>
+        </label>
+      );
+    case 'slider':
+      return (
+        <div className="space-y-1">
+          <input type="range" min={field.min ?? 0} max={field.max ?? 100} step={field.step ?? 1}
+            value={Number(field.value ?? 50)} onChange={(e) => onChange(Number(e.target.value))}
+            className="w-full" style={{ accentColor: 'var(--color-accent)' }} disabled={readonly} />
+          <div className="text-xs text-center" style={{ color: 'var(--color-text-muted)' }}>{String(field.value ?? 50)}</div>
+        </div>
+      );
+    default:
+      return <input value={String(field.value || '')} onChange={(e) => onChange(e.target.value)}
+        placeholder={field.placeholder}
+        className="w-full px-3 py-1.5 rounded-lg text-sm border outline-none transition-colors"
+        style={s} onFocus={focus} onBlur={blur} disabled={readonly} />;
+  }
+}
+
+// ==================== 字段详情编辑面板 ====================
+
+function FieldDetailPanel({ field, onUpdate, readonly = false }: {
+  field: WorldCardField;
+  onUpdate: (updates: Partial<WorldCardField>) => void;
+  readonly?: boolean;
+}) {
+  const inputCls = "w-full px-2 py-1 rounded text-xs border outline-none transition-colors";
+  const inputS: React.CSSProperties = {
+    backgroundColor: 'var(--color-bg-tertiary)',
+    borderColor: 'var(--color-border)',
+    color: 'var(--color-text-primary)',
+    opacity: readonly ? 0.6 : 1,
+  };
+  const focus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => { if (!readonly) e.currentTarget.style.borderColor = 'var(--color-accent)'; };
+  const blur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => { e.currentTarget.style.borderColor = 'var(--color-border)'; };
+
+  return (
+    <div className="p-3 space-y-3 overflow-y-auto h-full">
+      <h3 className="text-sm font-bold" style={{ color: 'var(--color-text-primary)' }}>
+        {field.label}
+      </h3>
+
+      {/* 键名 + 显示名 */}
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <label className="text-xs mb-0.5 block" style={{ color: 'var(--color-text-muted)' }}>键名</label>
+          <input value={field.key} onChange={(e) => onUpdate({ key: e.target.value })}
+            className={inputCls} style={inputS} onFocus={focus} onBlur={blur} disabled={readonly} />
+        </div>
+        <div>
+          <label className="text-xs mb-0.5 block" style={{ color: 'var(--color-text-muted)' }}>显示名</label>
+          <input value={field.label} onChange={(e) => onUpdate({ label: e.target.value })}
+            className={inputCls} style={inputS} onFocus={focus} onBlur={blur} disabled={readonly} />
+        </div>
+      </div>
+
+      {/* 类型 + 占位文本（编辑模式隐藏占位文本） */}
+      <div className={readonly ? '' : 'grid grid-cols-2 gap-2'}>
+        <div>
+          <label className="text-xs mb-0.5 block" style={{ color: 'var(--color-text-muted)' }}>类型</label>
+          <select value={field.type}
+            onChange={(e) => {
+              const t = e.target.value as FieldType;
+              const u: Partial<WorldCardField> = { type: t };
+              if (t === 'checkbox') u.value = false;
+              else if (t === 'slider') u.value = field.min ?? 50;
+              else if (t === 'select') { u.value = ''; u.options = field.options || []; u.allowCustomOption = field.allowCustomOption || false; }
+              else u.value = '';
+              if (t === 'slider' && field.min === undefined) { u.min = 0; u.max = 100; u.step = 1; }
+              if (t !== 'select') { u.options = undefined; u.allowCustomOption = undefined; }
+              if (t !== 'slider') { u.min = undefined; u.max = undefined; u.step = undefined; }
+              onUpdate(u);
+            }}
+            className={inputCls} style={inputS} disabled={readonly}>
+            <option value="text">文本</option>
+            <option value="textarea">多行文本</option>
+            <option value="select">下拉选择</option>
+            <option value="checkbox">复选框</option>
+            <option value="slider">滑块</option>
+          </select>
+        </div>
+        {!readonly && (
+          <div>
+            <label className="text-xs mb-0.5 block" style={{ color: 'var(--color-text-muted)' }}>占位提示</label>
+            <input value={field.placeholder || ''} onChange={(e) => onUpdate({ placeholder: e.target.value })}
+              className={inputCls} style={inputS} onFocus={focus} onBlur={blur} />
+          </div>
+        )}
+      </div>
+
+      {/* 开关（编辑模式隐藏） */}
+      {!readonly && (
+        <div className="flex items-center gap-4">
+          <label className="flex items-center gap-1.5 text-xs cursor-pointer" style={{ color: 'var(--color-text-secondary)' }}>
+            <input type="checkbox" checked={field.required || false}
+              onChange={(e) => onUpdate({ required: e.target.checked })} className="rounded" />
+            必填
+          </label>
+          <label className="flex items-center gap-1.5 text-xs cursor-pointer" style={{ color: 'var(--color-text-secondary)' }}>
+            <input type="checkbox" checked={field.editableBeforeGame ?? true}
+              onChange={(e) => onUpdate({ editableBeforeGame: e.target.checked })} className="rounded" />
+            游戏前可编辑
+          </label>
+        </div>
+      )}
+
+      {/* 默认值 / 编辑值 */}
+      <div>
+        <label className="text-xs mb-0.5 block" style={{ color: 'var(--color-text-muted)' }}>
+          {readonly ? '编辑值' : '默认值'}
+        </label>
+        <FieldValueInput field={field} onChange={(value) => onUpdate({ value })} readonly={readonly && !field.editableBeforeGame} showCustomInput={readonly} />
+      </div>
+
+      {/* select 选项管理（编辑模式隐藏） */}
+      {field.type === 'select' && !readonly && (
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <label className="text-xs" style={{ color: 'var(--color-text-muted)' }}>选项列表</label>
+            <label className="flex items-center gap-1 text-xs cursor-pointer" style={{ color: 'var(--color-text-secondary)' }}>
+              <input type="checkbox" checked={field.allowCustomOption || false}
+                onChange={(e) => onUpdate({ allowCustomOption: e.target.checked })} className="rounded" disabled={readonly} />
+              允许自定义
+            </label>
+          </div>
+          <div className="space-y-1">
+            {(field.options || []).map((opt, i) => (
+              <div key={i} className="flex items-center gap-1">
+                <input value={opt.label}
+                  onChange={(e) => {
+                    const n = [...(field.options || [])]; n[i] = { label: e.target.value, value: e.target.value };
+                    onUpdate({ options: n });
+                  }}
+                  className="flex-1 px-2 py-0.5 rounded text-xs border outline-none" style={inputS} disabled={readonly} />
+                {!readonly && (
+                  <button onClick={() => onUpdate({ options: (field.options || []).filter((_, idx) => idx !== i) })}
+                    className="p-0.5 rounded shrink-0" style={{ color: 'var(--color-text-muted)', fontSize: '10px' }}>
+                    <i className="fa-solid fa-xmark" />
+                  </button>
+                )}
+              </div>
+            ))}
+            {!readonly && (
+              <button onClick={() => onUpdate({ options: [...(field.options || []), { label: '', value: '' }] })}
+                className="text-xs px-2 py-0.5 rounded border transition-colors"
+                style={{ borderColor: 'var(--color-border)', color: 'var(--color-text-muted)' }}>+ 添加选项</button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* slider 参数（编辑模式隐藏） */}
+      {field.type === 'slider' && !readonly && (
+        <div className="grid grid-cols-3 gap-2">
+          {([
+            { k: 'min' as const, label: '最小值' },
+            { k: 'max' as const, label: '最大值' },
+            { k: 'step' as const, label: '步长' },
+          ]).map(({ k, label }) => (
+            <div key={k}>
+              <label className="text-xs mb-0.5 block" style={{ color: 'var(--color-text-muted)' }}>{label}</label>
+              <input type="number" value={field[k] ?? (k === 'min' ? 0 : k === 'max' ? 100 : 1)}
+                onChange={(e) => onUpdate({ [k]: Number(e.target.value) })}
+                className="w-full px-2 py-0.5 rounded text-xs border outline-none" style={inputS} disabled={readonly} />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ==================== 编辑器页面 ====================
+
+function EditorPageContent() {
+  const router = useRouter();
+  const { navigate, back } = useRouterHistory();
+  const searchParams = useSearchParams();
+
+  const mode = searchParams.get('mode') || 'create';
+  const templateId = searchParams.get('templateId') || '';
+
+  // ---- 状态 ----
+  const [templateName, setTemplateName] = useState('');
+  const [fields, setFields] = useState<WorldCardField[]>([]);
+  const [svgCode, setSvgCode] = useState('');
+  const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview');
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [svgScale, setSvgScale] = useState(1);
+  const previewContainerRef = useRef<HTMLDivElement>(null);
+  const importInputRef = useRef<HTMLInputElement>(null);
+  const col1Ref = useRef<HTMLDivElement>(null);
+  const { toast } = useToast();
+  const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmConfig, setConfirmConfig] = useState<{
+    title: string;
+    message: string;
+    danger?: boolean;
+    onConfirm: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    ignoreText?: string;
+    onIgnore?: () => void;
+  }>({ title: '', message: '', onConfirm: () => {} });
+  const [showAddFieldPanel, setShowAddFieldPanel] = useState(false);
+  const [isSuggesting, setIsSuggesting] = useState(false);
+  const [selectedRuleId, setSelectedRuleId] = useState<string>('');
+  const [customRules, setCustomRules] = useState('');
+  const [selectedPlugins, setSelectedPlugins] = useState<string[]>([]);
+  const [availablePlugins, setAvailablePlugins] = useState<Array<{id: string; name: string; type: string; icon?: string}>>([]);
+  const [pluginsExpanded, setPluginsExpanded] = useState(false);
+  const [fieldsExpanded, setFieldsExpanded] = useState(true);
+  const [fieldsPanelHeight, setFieldsPanelHeight] = useState<number | null>(null); // null = 自适应
+  const [pluginSearchText, setPluginSearchText] = useState('');
+
+  // 列宽
+  const [col1Width, setCol1Width] = useState(220);
+  const [col2Width, setCol2Width] = useState(300);
+
+  // ---- 初始化 ----
+  useEffect(() => {
+    if (mode === 'create') {
+      setFields(DEFAULT_FIELDS.map(f => ({ ...f })));
+      setTemplateName('');
+      setSelectedFieldId(DEFAULT_FIELDS[0]?.id || null);
+    } else if (templateId) {
+      getWorldTemplate(templateId).then(tpl => {
+        if (tpl) {
+          setTemplateName(tpl.name);
+          setFields(tpl.fields.map(f => ({ ...f })));
+          setSvgCode(tpl.svgContent || '');
+          setSelectedFieldId(tpl.fields[0]?.id || null);
+          setSelectedPlugins(tpl.plugins || []);
+        } else {
+          toast('未找到模板数据', 'error');
+        }
+      });
+    }
+  }, [mode, templateId]);
+
+  // ---- 加载可用插件列表 ----
+  useEffect(() => {
+    getPlugins().then(plugins => {
+      setAvailablePlugins(plugins.map(p => ({ id: p.id, name: p.name, type: p.type, icon: p.icon })));
+    });
+  }, []);
+
+  // ---- 字段操作 ----
+  const updateField = useCallback((id: string, updates: Partial<WorldCardField>) => {
+    setFields(prev => prev.map(f => f.id === id ? { ...f, ...updates } : f));
+  }, []);
+
+  const addField = useCallback((type: FieldType) => {
+    const newField: WorldCardField = {
+      id: generateFieldId(),
+      key: `custom_${Date.now().toString(36)}`,
+      label: `自定义字段 ${fields.length + 1}`,
+      type,
+      value: type === 'checkbox' ? false : type === 'slider' ? 50 : '',
+      editableBeforeGame: true,
+      ...(type === 'select' ? { options: [], allowCustomOption: false } : {}),
+      ...(type === 'slider' ? { min: 0, max: 100, step: 1 } : {}),
+    };
+    setFields(prev => [...prev, newField]);
+    setSelectedFieldId(newField.id);
+    setShowAddFieldPanel(false);
+  }, [fields.length]);
+
+  const removeField = useCallback((id: string) => {
+    setFields(prev => {
+      const next = prev.filter(f => f.id !== id);
+      if (selectedFieldId === id) {
+        setSelectedFieldId(next[0]?.id || null);
+      }
+      return next;
+    });
+  }, [selectedFieldId]);
+
+  const reorderField = useCallback((fromIndex: number, toIndex: number) => {
+    setFields(prev => {
+      const arr = [...prev];
+      const [moved] = arr.splice(fromIndex, 1);
+      arr.splice(toIndex < fromIndex ? toIndex : toIndex, 0, moved);
+      return arr;
+    });
+  }, []);
+
+  // ---- 生成规则 ----
+  const getActiveRules = useCallback(() => {
+    if (selectedRuleId) {
+      const preset = PRESET_RULES.find(r => r.id === selectedRuleId);
+      if (preset) return preset.rules;
+    }
+    return customRules.trim();
+  }, [selectedRuleId, customRules]);
+
+  // ---- AI 智能补全字段 ----
+  const handleSuggestFields = useCallback(async () => {
+    if (fields.length === 0) { toast('请先添加字段', 'warning'); return; }
+    setIsSuggesting(true);
+    try {
+      const appSettings = await getAppSettings();
+      const response = await fetch('/api/suggest-fields', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          templateName,
+          existingFields: fields.map(f => ({ key: f.key, label: f.label, type: f.type, value: f.value, placeholder: f.placeholder })),
+          apiConfig: { apiKey: appSettings.aiApiKey, apiBase: appSettings.aiApiBase, model: appSettings.aiModel },
+        }),
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || '补全失败');
+      const updates: Record<string, Partial<WorldCardField>> = data.updates || {};
+      const updateKeys = Object.keys(updates);
+      if (updateKeys.length === 0) { toast('AI 未生成补全内容', 'warning'); return; }
+      // 将 AI 返回的补全内容应用到对应字段
+      setFields(prev => prev.map(f => {
+        const u = updates[f.key];
+        if (!u) return f;
+        const updated = { ...f };
+        if (u.value !== undefined) updated.value = u.value;
+        if (u.placeholder !== undefined) updated.placeholder = u.placeholder;
+        if (u.options !== undefined) updated.options = u.options;
+        if (u.allowCustomOption !== undefined) updated.allowCustomOption = u.allowCustomOption;
+        if (u.min !== undefined) updated.min = u.min;
+        if (u.max !== undefined) updated.max = u.max;
+        if (u.step !== undefined) updated.step = u.step;
+        // select 类型：补全了选项但 value 为空时，自动填充第一个选项
+        if (updated.type === 'select' && Array.isArray(updated.options) && updated.options.length > 0) {
+          const curVal = String(updated.value || '');
+          const hasMatch = updated.options.some(o => o.value === curVal);
+          if (!hasMatch) {
+            updated.value = updated.options[0].value;
+          }
+        }
+        return updated;
+      }));
+      toast(`已补全 ${updateKeys.length} 个字段`, 'success');
+    } catch (err) {
+      toast(err instanceof Error ? err.message : '补全失败', 'error');
+    } finally {
+      setIsSuggesting(false);
+    }
+  }, [templateName, fields]);
+
+  // ---- 生成 SVG ----
+  const handleGenerate = useCallback(async () => {
+    const hasTitle = fields.some(f => f.key === 'title' && String(f.value).trim());
+    if (!hasTitle) { toast('请至少填写游戏标题', 'warning'); return; }
+    setIsGenerating(true); setActiveTab('preview');
+    try {
+      const worldData = fieldsToWorldData(fields, selectedPlugins);
+      const appSettings = await getAppSettings();
+      const response = await fetch('/api/generate-svg', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          worldData,
+          customRules: getActiveRules(),
+          apiConfig: { apiKey: appSettings.aiApiKey, apiBase: appSettings.aiApiBase, model: appSettings.aiModel },
+        }),
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || '生成失败');
+      setSvgCode(data.svg);
+    } catch (err) {
+      toast(err instanceof Error ? err.message : '生成失败', 'error');
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [fields, getActiveRules]);
+
+  // ---- 保存模板 ----
+  const handleSaveTemplate = useCallback(async () => {
+    if (!templateName.trim()) { toast('请输入模板名称', 'warning'); return; }
+    const id = templateId || generateTemplateId();
+    // 保存时注入完整的 world-data
+    const finalSvg = svgCode ? injectWorldData(svgCode, fieldsToWorldData(fields, selectedPlugins)) : svgCode;
+    let existingTemplate: WorldCardTemplate | undefined;
+    if (templateId) {
+      existingTemplate = await getWorldTemplate(templateId);
+    }
+    const template: WorldCardTemplate = {
+      id,
+      name: templateName.trim(),
+      svgContent: finalSvg,
+      fields,
+      plugins: selectedPlugins,
+      createdAt: existingTemplate?.createdAt || new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+    await saveWorldTemplate(template);
+    toast('模板已保存', 'success');
+    if (!templateId) {
+      router.replace(`/editor?mode=editTemplate&templateId=${id}`);
+    }
+  }, [templateName, svgCode, fields, templateId, router, selectedPlugins]);
+
+  // ---- 开始游戏 ----
+  const handleStartGame = useCallback(async ({forceStart = false, recordRouter = true} = {}) => {
+    // 检查插件是否准备齐全
+    const installedIds = new Set(availablePlugins.map(p => p.id));
+    const missingPlugins = selectedPlugins.filter(pid => !installedIds.has(pid));
+
+    if (missingPlugins.length > 0 && !forceStart) {
+      // 有插件缺失，弹窗提示
+      const missingList = missingPlugins.map(pid => `• ${pid}`).join('\n');
+      setConfirmConfig({
+        title: '插件未安装',
+        message: `以下 ${missingPlugins.length} 个插件未安装：\n${missingList}\n\n这些插件的功能将不可用，是否继续？`,
+        danger: true,
+        confirmText: '前往安装',
+        cancelText: '取消',
+        ignoreText: '忽略并继续',
+        onConfirm: () => {
+          setConfirmOpen(false);
+          navigate('/extensions');
+        },
+        onIgnore: () => {
+          setConfirmOpen(false);
+          handleStartGame({recordRouter: true}); // 强制开始
+        },
+      });
+      setConfirmOpen(true);
+      return;
+    }
+
+    // 开始游戏（过滤掉缺失的插件）
+    try {
+      const validPlugins = forceStart ? selectedPlugins.filter(pid => installedIds.has(pid)) : selectedPlugins;
+      const worldSetting = {
+        ...fieldsToWorldSetting(fields),
+        _plugins: validPlugins,
+      };
+      const gameId = generateTemplateId();
+      const session: StoredSession = {
+        id: gameId, worldSetting, messages: [],
+        createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(),
+      };
+      await saveGameSession(session);
+      navigate(`/game/${gameId}`, {record: recordRouter});
+    } catch (err) {
+      toast(err instanceof Error ? err.message : '创建游戏失败', 'error');
+    }
+  }, [fields, router, selectedPlugins, availablePlugins, mode, templateId]);
+
+  // ---- 下载 ----
+  const handleDownload = useCallback(() => {
+    if (!svgCode) return;
+    // 下载时注入完整的 world-data（包含 plugins）
+    const finalSvg = injectWorldData(svgCode, fieldsToWorldData(fields, selectedPlugins));
+    const blob = new Blob([finalSvg], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url; a.download = `${templateName || 'world-card'}.svg`;
+    a.click(); URL.revokeObjectURL(url);
+  }, [svgCode, templateName, fields, selectedPlugins]);
+
+  // ---- 导入 SVG 卡片 ----
+  const handleImportSvg = useCallback(async (file: File) => {
+    try {
+      const svgText = await file.text();
+      if (!svgText.includes('<svg')) { toast('不是有效的 SVG 文件', 'error'); return; }
+      setSvgCode(svgText);
+      // 尝试解析 world-data
+      const dataMatch = svgText.match(/<script[^>]*id="world-data"[^>]*>([\s\S]*?)<\/script>/i);
+      if (dataMatch) {
+        try {
+          const data = JSON.parse(dataMatch[1]);
+          if (data.title) setTemplateName(String(data.title));
+          // 解析 _plugins 字段
+          if (Array.isArray(data._plugins)) {
+            setSelectedPlugins((data._plugins as unknown[]).filter((p): p is string => typeof p === 'string'));
+          }
+          // 将 data 的 key-value 转为字段（保留已有字段，合并新的，跳过 _ 开头的内部字段）
+          const existingKeys = new Set(fields.map(f => f.key));
+          const newFields: WorldCardField[] = [];
+          for (const [k, v] of Object.entries(data)) {
+            if (k.startsWith('_')) continue; // 跳过内部字段
+            if (existingKeys.has(k)) continue;
+            newFields.push({
+              id: `field_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+              key: k, label: k, type: 'text',
+              value: Array.isArray(v) ? v.join('、') : String(v ?? ''),
+              placeholder: '', required: false, editableBeforeGame: true,
+            });
+          }
+          if (newFields.length > 0) setFields(prev => [...prev, ...newFields]);
+          toast(`已导入卡片，解析出 ${newFields.length} 个新字段${Array.isArray(data._plugins) ? '，' + data._plugins.length + ' 个插件' : ''}`, 'success');
+        } catch {
+          setSvgCode(svgText);
+          toast('已导入 SVG，但无法解析世界数据', 'warning');
+        }
+      } else {
+        toast('已导入 SVG', 'success');
+      }
+    } catch {
+      toast('导入失败', 'error');
+    }
+  }, [fields, toast]);
+
+  const selectedField = useMemo(() => fields.find(f => f.id === selectedFieldId) || null, [fields, selectedFieldId]);
+
+  const pageTitle = useMemo(() => {
+    if (mode === 'create') return '创建世界卡片';
+    if (mode === 'edit') return '编辑世界设定';
+    return '编辑模板';
+  }, [mode]);
+
+  const isCreateMode = mode === 'create' || mode === 'editTemplate';
+  const isEditMode = mode === 'edit';
+
+  return (
+    <>
+    <div className="h-screen flex flex-col overflow-hidden" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
+      {/* 顶部导航 */}
+      <PageHeader
+        title={pageTitle}
+        showBack={true}
+        onBeforeBack={() => {
+          const hasContent = fields.some(f => String(f.value).trim()) || svgCode;
+          if (hasContent && !templateId) {
+            setConfirmConfig({
+              title: '世界卡片未保存',
+              message: '当前有未保存的内容，确定要离开吗？',
+              onConfirm: () => { setConfirmOpen(false); back(); },
+            });
+            setConfirmOpen(true);
+            return false;
+          }
+          return true;
+        }}
+        badge={templateName ? (
+          <span className="text-xs px-2 py-0.5 rounded-md" style={{
+            backgroundColor: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)',
+          }}>{templateName}</span>
+        ) : undefined}
+        actions={
+          <div className="flex items-center gap-2">
+            {isCreateMode && (
+              <>
+                <input ref={importInputRef} type="file" accept=".svg" className="hidden"
+                  onChange={(e) => { const f = e.target.files?.[0]; if (f) handleImportSvg(f); e.target.value = ''; }} />
+                <button onClick={() => importInputRef.current?.click()}
+                  className="px-3 py-1 rounded-lg text-xs border transition-colors"
+                  style={{ borderColor: 'var(--color-border)', color: 'var(--color-text-secondary)' }}
+                  title="导入SVG卡片">
+                  导入卡片
+                </button>
+              </>
+            )}
+            {isCreateMode && svgCode && (
+              <>
+                <button onClick={handleSaveTemplate} className="px-3 py-1 rounded-lg text-xs border transition-colors"
+                  style={{ borderColor: 'var(--color-border)', color: 'var(--color-text-secondary)' }}>保存卡片</button>
+                <button onClick={handleDownload} className="px-3 py-1 rounded-lg text-xs border transition-colors"
+                  style={{ borderColor: 'var(--color-border)', color: 'var(--color-text-secondary)' }}>下载卡片</button>
+                <button onClick={() => handleStartGame({recordRouter: false})} className="px-3 py-1 rounded-lg text-xs font-medium transition-colors"
+                  style={{ backgroundColor: 'var(--color-accent)', color: '#fff' }}>开始游戏</button>
+              </>
+            )}
+            {isEditMode && (
+              <button onClick={() => handleStartGame({recordRouter: false})} className="px-3 py-1 rounded-lg text-xs font-medium transition-colors"
+                style={{ backgroundColor: 'var(--color-accent)', color: '#fff' }}>开始游戏</button>
+            )}
+          </div>
+        }
+      />
+
+      {/* 主体 */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* 第一列：字段列表 */}
+        <div ref={col1Ref} className="shrink-0 overflow-y-auto flex flex-col" style={{ width: col1Width, minWidth: 160 }}>
+          {/* 模板名称（创建/编辑模板模式） */}
+          {isCreateMode && (
+            <div className="px-3 py-2 border-b" style={{ borderColor: 'var(--color-border)' }}>
+              <input value={templateName} onChange={(e) => setTemplateName(e.target.value)}
+                placeholder="卡片名称..."
+                className="w-full px-2 py-1 rounded text-xs border outline-none transition-colors"
+                style={{
+                  backgroundColor: 'var(--color-bg-tertiary)', borderColor: 'var(--color-border)',
+                  color: 'var(--color-text-primary)',
+                }}
+                onFocus={(e) => (e.target.style.borderColor = 'var(--color-accent)')}
+                onBlur={(e) => (e.target.style.borderColor = 'var(--color-border)')}
+              />
+            </div>
+          )}
+
+          {/* 字段管理（可折叠面板） */}
+          <div className="shrink-0 border-b" style={{ borderColor: 'var(--color-border)' }}>
+            <button
+              onClick={() => setFieldsExpanded(!fieldsExpanded)}
+              className="w-full flex items-center justify-between px-3 py-2 transition-colors"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
+              <span className="flex items-center gap-1.5 text-xs font-bold">
+                <i className="fa-solid fa-list" style={{ fontSize: '11px' }} />
+                字段
+                <span className="px-1.5 py-0.5 rounded text-xs"
+                  style={{ backgroundColor: 'var(--color-bg-tertiary)', fontSize: '10px' }}>
+                  {fields.length}
+                </span>
+              </span>
+              <div className="flex items-center gap-1">
+                {!isEditMode && (
+                  <div className="flex items-center gap-1">
+                    <div className="relative">
+                      <button onClick={(e) => { e.stopPropagation(); setShowAddFieldPanel(!showAddFieldPanel); }}
+                        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs border transition-colors"
+                        style={{ borderColor: 'var(--color-border)', color: 'var(--color-text-muted)', fontSize: '10px' }}
+                        title="添加字段"
+                      >
+                        <i className="fa-solid fa-plus" />
+                      </button>
+                      {showAddFieldPanel && (
+                        <div className="absolute right-0 top-full mt-1 z-20 p-2 rounded-lg border shadow-lg"
+                          style={{ borderColor: 'var(--color-border)', backgroundColor: 'var(--color-bg-secondary)', boxShadow: '0 4px 16px var(--color-shadow)' }}>
+                          <div className="flex flex-col gap-1">
+                            {([
+                            { type: 'text' as FieldType, label: '文本' },
+                            { type: 'textarea' as FieldType, label: '多行文本' },
+                            { type: 'select' as FieldType, label: '下拉选择' },
+                            { type: 'checkbox' as FieldType, label: '复选框' },
+                            { type: 'slider' as FieldType, label: '滑块' },
+                            ]).map(item => (
+                              <button key={item.type} onClick={(e) => { e.stopPropagation(); addField(item.type); }}
+                                className="px-3 py-1 rounded text-xs border transition-colors text-left whitespace-nowrap"
+                                style={{ borderColor: 'var(--color-border)', color: 'var(--color-text-secondary)' }}>
+                                {item.label}
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); handleSuggestFields(); }}
+                      disabled={isSuggesting}
+                      className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs border transition-colors"
+                      style={{
+                        borderColor: isSuggesting ? 'var(--color-accent)' : 'var(--color-border)',
+                        color: isSuggesting ? 'var(--color-accent)' : 'var(--color-text-muted)',
+                        fontSize: '10px',
+                        opacity: isSuggesting ? 0.5 : 1,
+                      }}
+                      title="AI 智能补全字段"
+                    >
+                      <i className={`fa-solid ${isSuggesting ? 'fa-spinner fa-spin' : 'fa-wand-magic-sparkles'}`} />
+                    </button>
+                  </div>
+                )}
+                <i className={`fa-solid fa-chevron-${fieldsExpanded ? 'up' : 'down'}`}
+                  style={{ fontSize: '10px' }} />
+              </div>
+            </button>
+
+            {fieldsExpanded && (
+              <div className="overflow-y-auto px-2 pb-2"
+                style={fieldsPanelHeight ? { height: fieldsPanelHeight } : { flex: 1 }}>
+                <DraggableFieldList
+                  fields={fields}
+                  selectedId={selectedFieldId}
+                  onSelect={setSelectedFieldId}
+                  onReorder={reorderField}
+                  onRemove={removeField}
+                  readonly={isEditMode}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* 字段面板与插件面板之间的拖拽调整条 */}
+          {(isCreateMode || mode === 'edit') && (availablePlugins.length > 0 || selectedPlugins.length > 0) && fieldsExpanded && (
+            <ResizeHandle onResize={(deltaY) => {
+              setFieldsPanelHeight(prev => {
+                const current = prev || 300;
+                // 计算最大高度：第一列容器高度 - 字段面板标题栏(~36px) - 插件面板标题栏(~36px) - resizeHandle(~5px) - 余量
+                const containerHeight = col1Ref.current?.clientHeight || 600;
+                const maxH = containerHeight - 120;
+                return Math.max(100, Math.min(maxH, current + deltaY));
+              });
+            }} />
+          )}
+
+          {/* 插件配置区域（创建/编辑模板/编辑世界设定模式都显示） */}
+          {(isCreateMode || mode === 'edit') && (availablePlugins.length > 0 || selectedPlugins.length > 0) && (
+            <div className="shrink-0 border-t" style={{ borderColor: 'var(--color-border)' }}>
+              {/* 标题栏：可折叠 */}
+              <button
+                onClick={() => setPluginsExpanded(!pluginsExpanded)}
+                className="w-full flex items-center justify-between px-3 py-2 transition-colors"
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                <span className="flex items-center gap-1.5 text-xs font-bold">
+                  <i className="fa-solid fa-puzzle-piece" style={{ fontSize: '11px' }} />
+                  插件配置
+                  {selectedPlugins.length > 0 && (
+                    <span className="px-1.5 py-0.5 rounded text-xs"
+                      style={{ backgroundColor: 'var(--color-bg-tertiary)', fontSize: '10px' }}>
+                      已选 {selectedPlugins.length}
+                    </span>
+                  )}
+                </span>
+                <i className={`fa-solid fa-chevron-${pluginsExpanded ? 'up' : 'down'}`}
+                  style={{ fontSize: '10px' }} />
+              </button>
+
+              {/* 展开内容 */}
+              {pluginsExpanded && (
+                <div className="px-2 pb-2 space-y-1.5">
+                  {/* 搜索框 */}
+                  {availablePlugins.length > 5 && (
+                    <input
+                      value={pluginSearchText}
+                      onChange={(e) => setPluginSearchText(e.target.value)}
+                      placeholder="搜索插件..."
+                      className="w-full px-2 py-1 rounded text-xs border outline-none transition-colors"
+                      style={{
+                        backgroundColor: 'var(--color-bg-tertiary)',
+                        borderColor: 'var(--color-border)',
+                        color: 'var(--color-text-primary)',
+                      }}
+                      onFocus={(e) => (e.target.style.borderColor = 'var(--color-accent)')}
+                      onBlur={(e) => (e.target.style.borderColor = 'var(--color-border)')}
+                    />
+                  )}
+
+                  {/* 未安装插件提示 */}
+                  {(() => {
+                    const installedIds = new Set(availablePlugins.map(p => p.id));
+                    const missingPlugins = selectedPlugins.filter(pid => !installedIds.has(pid));
+                    if (missingPlugins.length === 0) return null;
+                    return (
+                      <div className="px-2 py-1.5 rounded-lg" style={{ backgroundColor: 'rgba(234,179,8,0.08)', border: '1px solid rgba(234,179,8,0.2)' }}>
+                        <div className="flex items-center gap-1.5 mb-1">
+                          <i className="fa-solid fa-triangle-exclamation" style={{ fontSize: '10px', color: '#eab308' }} />
+                          <span className="text-xs font-medium" style={{ color: '#eab308' }}>
+                            {missingPlugins.length} 个插件未安装
+                          </span>
+                        </div>
+                        <div className="space-y-0.5">
+                          {missingPlugins.map(pid => (
+                            <div key={pid} className="flex items-center justify-between">
+                              <span className="text-xs truncate" style={{ color: 'var(--color-text-secondary)' }}>{pid}</span>
+                              <button
+                                onClick={() => setSelectedPlugins(prev => prev.filter(p => p !== pid))}
+                                className="text-xs px-1.5 py-0.5 rounded transition-colors shrink-0 ml-2"
+                                style={{ color: 'var(--color-text-muted)', fontSize: '10px' }}
+                                title="移除">
+                                <i className="fa-solid fa-xmark" />
+                              </button>
+                            </div>
+                          ))}
+                        </div>
+                        <button
+                          onClick={() => navigate('/extensions')}
+                          className="mt-1.5 w-full text-center text-xs px-2 py-1 rounded transition-colors"
+                          style={{ color: 'var(--color-accent)', backgroundColor: 'rgba(var(--color-accent-rgb, 99,102,241), 0.08)' }}>
+                          前往安装插件
+                        </button>
+                      </div>
+                    );
+                  })()}
+
+                  {/* 插件列表：选中的排在前面 */}
+                  <div className="overflow-y-auto space-y-0.5">
+                    {(() => {
+                      const keyword = pluginSearchText.trim().toLowerCase();
+                      const filtered = keyword
+                        ? availablePlugins.filter(p => p.id.toLowerCase().includes(keyword) || p.name.toLowerCase().includes(keyword))
+                        : availablePlugins;
+                      // 排序：选中的排在前面
+                      const sorted = [...filtered].sort((a, b) => {
+                        const aSel = selectedPlugins.includes(a.id) ? 0 : 1;
+                        const bSel = selectedPlugins.includes(b.id) ? 0 : 1;
+                        return aSel - bSel;
+                      });
+                      return sorted.map(plugin => {
+                        const isSelected = selectedPlugins.includes(plugin.id);
+                        return (
+                          <label
+                            key={plugin.id}
+                            className="flex items-center gap-2 px-2 py-1 rounded-lg cursor-pointer transition-colors"
+                            style={{
+                              backgroundColor: isSelected ? 'var(--color-bg-tertiary)' : 'transparent',
+                            }}
+                          >
+                            <input
+                              type="checkbox"
+                              checked={isSelected}
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedPlugins(prev => [...prev, plugin.id]);
+                                } else {
+                                  setSelectedPlugins(prev => prev.filter(pid => pid !== plugin.id));
+                                }
+                              }}
+                              className="rounded shrink-0"
+                              style={{ accentColor: 'var(--color-accent)' }}
+                            />
+                            {plugin.icon && (
+                              <span className="shrink-0"><PluginIcon icon={plugin.icon} pluginId={plugin.id} size={12} /></span>
+                            )}
+                            <span className="flex-1 text-xs truncate" style={{ color: 'var(--color-text-primary)' }}>
+                              {plugin.name}
+                            </span>
+                            <span className="text-xs truncate shrink-0" style={{ color: 'var(--color-text-muted)', fontSize: '10px', maxWidth: '80px' }}>
+                              {plugin.id}
+                            </span>
+                          </label>
+                        );
+                      });
+                    })()}
+                    {(() => {
+                      const keyword = pluginSearchText.trim().toLowerCase();
+                      const filtered = keyword
+                        ? availablePlugins.filter(p => p.id.toLowerCase().includes(keyword) || p.name.toLowerCase().includes(keyword))
+                        : availablePlugins;
+                      return filtered.length === 0 && (
+                        <p className="text-xs text-center py-2" style={{ color: 'var(--color-text-muted)' }}>
+                          无匹配插件
+                        </p>
+                      );
+                    })()}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <Resizer onResize={(delta) => setCol1Width(w => Math.max(140, Math.min(400, w + delta)))} />
+
+        {/* 第二列：字段详情 */}
+        <div className="shrink-0 overflow-hidden border-r flex flex-col" style={{
+          width: col2Width, minWidth: 200, borderColor: 'var(--color-border)',
+        }}>
+          <div className="flex-1 overflow-hidden">
+            {selectedField ? (
+              <FieldDetailPanel field={selectedField} onUpdate={(u) => updateField(selectedField.id, u)} readonly={isEditMode} />
+            ) : (
+              <div className="h-full flex items-center justify-center">
+                <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>选择一个字段查看详情</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <Resizer onResize={(delta) => setCol2Width(w => Math.max(180, Math.min(500, w + delta)))} />
+
+        {/* 第三列：SVG 预览 + 生成（编辑模式无生成） */}
+        <div className="flex-1 flex flex-col overflow-hidden min-w-0">
+          {/* Tab 切换 */}
+          <div className="flex items-center gap-1 px-3 py-1.5 border-b shrink-0"
+            style={{ borderColor: 'var(--color-border)', backgroundColor: 'var(--color-bg-secondary)' }}
+          >
+            <button onClick={() => setActiveTab('preview')}
+              className="px-2.5 py-1 rounded-md text-xs font-medium transition-colors"
+              style={{
+                backgroundColor: activeTab === 'preview' ? 'var(--color-bg-tertiary)' : 'transparent',
+                color: activeTab === 'preview' ? 'var(--color-accent)' : 'var(--color-text-muted)',
+              }}>预览</button>
+            {!isEditMode && (
+              <button onClick={() => setActiveTab('code')}
+                className="px-2.5 py-1 rounded-md text-xs font-medium transition-colors"
+                style={{
+                  backgroundColor: activeTab === 'code' ? 'var(--color-bg-tertiary)' : 'transparent',
+                  color: activeTab === 'code' ? 'var(--color-accent)' : 'var(--color-text-muted)',
+                }}>代码</button>
+            )}
+            {activeTab === 'preview' && svgCode && (
+              <div className="ml-auto flex items-center gap-1">
+                <button onClick={() => setSvgScale(s => Math.max(0.25, +(s - 0.25).toFixed(2)))}
+                  className="p-1 rounded transition-colors" style={{ color: 'var(--color-text-muted)', fontSize: '11px' }}
+                  title="缩小">
+                  <i className="fa-solid fa-minus" />
+                </button>
+                <span className="text-xs tabular-nums" style={{ color: 'var(--color-text-muted)', minWidth: '36px', textAlign: 'center' }}>
+                  {Math.round(svgScale * 100)}%
+                </span>
+                <button onClick={() => setSvgScale(s => Math.min(3, +(s + 0.25).toFixed(2)))}
+                  className="p-1 rounded transition-colors" style={{ color: 'var(--color-text-muted)', fontSize: '11px' }}
+                  title="放大">
+                  <i className="fa-solid fa-plus" />
+                </button>
+                <button onClick={() => setSvgScale(1)}
+                  className="px-1.5 py-0.5 rounded text-xs transition-colors"
+                  style={{ color: 'var(--color-text-muted)', fontSize: '10px' }}
+                  title="重置缩放">
+                  适应
+                </button>
+              </div>
+            )}
+            {activeTab === 'code' && (
+              <span className="ml-auto text-xs" style={{ color: 'var(--color-text-muted)' }}>{svgCode.length} 字符</span>
+            )}
+          </div>
+
+          {/* SVG 内容区 */}
+          <div ref={previewContainerRef} className="flex-1 overflow-auto p-3 flex flex-col items-center">
+            {!svgCode && !isGenerating && activeTab === 'preview' ? (
+              <div className="flex flex-col items-center justify-center h-full gap-2 opacity-40">
+                <i className="fa-regular fa-image" style={{ color: 'var(--color-text-muted)', fontSize: '36px' }} />
+                <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>{isCreateMode ? '填写字段后生成卡片' : '暂无卡片预览'}</p>
+              </div>
+            ) : activeTab === 'preview' ? (
+              <SvgPreview svgCode={svgCode} scale={svgScale} containerRef={previewContainerRef} />
+            ) : (
+              <textarea
+                value={svgCode}
+                onChange={(e) => setSvgCode(e.target.value)}
+                className="w-full h-full rounded-lg border p-2 text-xs outline-none resize-none font-mono leading-relaxed"
+                style={{
+                  backgroundColor: 'var(--color-bg-tertiary)',
+                  borderColor: 'var(--color-border)',
+                  color: 'var(--color-text-primary)',
+                  tabSize: 2,
+                }}
+                spellCheck={false}
+              />
+            )}
+          </div>
+
+          {/* 底部：生成规则 + 生成按钮（仅创建/编辑模板模式） */}
+          {isCreateMode && (
+            <div className="shrink-0 border-t px-3 py-2 space-y-2" style={{ borderColor: 'var(--color-border)' }}>
+              {/* 风格预设 */}
+              <div className="flex flex-wrap gap-1">
+                {PRESET_RULES.map((rule) => (
+                  <button key={rule.id}
+                    onClick={() => setSelectedRuleId(rule.id === selectedRuleId ? '' : rule.id)}
+                    className="px-2 py-0.5 rounded text-xs border transition-colors"
+                    style={{
+                      borderColor: selectedRuleId === rule.id ? 'var(--color-accent)' : 'var(--color-border)',
+                      backgroundColor: selectedRuleId === rule.id ? 'var(--color-bg-tertiary)' : 'transparent',
+                      color: selectedRuleId === rule.id ? 'var(--color-accent)' : 'var(--color-text-muted)',
+                    }}
+                  >{rule.name}</button>
+                ))}
+              </div>
+              {/* 自定义规则 */}
+              <textarea
+                value={selectedRuleId ? PRESET_RULES.find(r => r.id === selectedRuleId)?.rules || '' : customRules}
+                onChange={(e) => { if (selectedRuleId) { setCustomRules(e.target.value); setSelectedRuleId(''); } else { setCustomRules(e.target.value); } }}
+                placeholder="自定义 SVG 生成规则..."
+                rows={2}
+                className="w-full px-2 py-1.5 rounded-lg text-xs border outline-none resize-none transition-colors"
+                style={{
+                  backgroundColor: 'var(--color-bg-tertiary)', borderColor: 'var(--color-border)',
+                  color: 'var(--color-text-primary)',
+                }}
+                onFocus={(e) => (e.target.style.borderColor = 'var(--color-accent)')}
+                onBlur={(e) => (e.target.style.borderColor = 'var(--color-border)')}
+              />
+              {/* 生成按钮 */}
+              <button onClick={handleGenerate} disabled={isGenerating}
+                className="w-full px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center gap-1.5"
+                style={{
+                  backgroundColor: !isGenerating ? 'var(--color-accent)' : 'var(--color-bg-tertiary)',
+                  color: !isGenerating ? '#fff' : 'var(--color-text-muted)',
+                  cursor: !isGenerating ? 'pointer' : 'not-allowed',
+                }}
+              >
+                {isGenerating ? (
+                  <>
+                    <div className="w-3 h-3 border-2 border-t-transparent rounded-full animate-spin"
+                      style={{ borderColor: 'currentColor', borderTopColor: 'transparent' }} />
+                    生成中...
+                  </>
+                ) : (
+                  <>
+                    <i className="fa-solid fa-bolt" style={{ fontSize: '14px' }} />
+                    生成世界卡片
+                  </>
+                )}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+
+    <ConfirmDialog
+      open={confirmOpen}
+      title={confirmConfig.title}
+      message={confirmConfig.message}
+      danger={confirmConfig.danger}
+      confirmText={confirmConfig.confirmText}
+      cancelText={confirmConfig.cancelText}
+      ignoreText={confirmConfig.ignoreText}
+      onConfirm={confirmConfig.onConfirm}
+      onIgnore={confirmConfig.onIgnore}
+      onCancel={() => setConfirmOpen(false)}
+    />
+    </>
+  );
+}
+
+// ==================== 导出 ====================
+
+export default function EditorPage() {
+  return (
+    <Suspense fallback={
+      <div className="h-screen flex items-center justify-center" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
+        <div className="w-6 h-6 border-2 border-t-transparent rounded-full animate-spin"
+          style={{ borderColor: 'var(--color-accent)', borderTopColor: 'transparent' }} />
+      </div>
+    }>
+      <EditorPageContent />
+    </Suspense>
+  );
+}