evomeme 0.1.7 → 0.1.9-beta.14

package/dist/canvas-public/index.html

@@ -38,19 +38,48 @@
             <button type="button" class="ghost-btn" id="inspector-close" title="取消选中">×</button>
           </header>
           <div class="inspector-body" id="inspector-body"></div>
+          <div
+            class="inspector-resize-handle"
+            id="inspector-resize-handle"
+            role="separator"
+            aria-label="调整左侧栏宽度"
+            aria-orientation="vertical"
+            tabindex="0"
+          ></div>
         </aside>
         <div class="canvas-main">
           <div class="canvas-shell">
             <div class="canvas-toolbar">
+              <span class="product-brand">EVOMEME</span>
               <div class="project-bar">
                 <span class="project-name" id="project-name" title="">未打开工程</span>
                 <button type="button" class="ghost-btn" id="switch-project-btn">切换工程</button>
               </div>
               <div class="toolbar-actions" id="toolbar-actions">
-                <button type="button" class="tool-btn" id="tool-add-assets">添加素材</button>
-                <button type="button" class="tool-btn" id="tool-image-gen" title="拖到画布指定位置创建图片生成元素">图片生成</button>
-                <button type="button" class="tool-btn" id="tool-video-gen" title="拖到画布指定位置创建视频生成元素">视频生成</button>
-                <button type="button" class="ghost-btn" id="reset-view">重置视图</button>
+                <div class="toolbar-primary" role="tablist" aria-label="画布功能分类">
+                  <button type="button" class="toolbar-primary-button toolbar-category-tab" id="tool-add-assets" role="tab" aria-selected="false" aria-expanded="false" aria-controls="toolbar-asset-tools"><span>添加素材</span><i class="toolbar-category-indicator" aria-hidden="true"></i></button>
+                  <button type="button" class="toolbar-primary-button toolbar-category-tab" id="toolbar-image-tab" role="tab" aria-selected="false" aria-expanded="false" aria-controls="toolbar-image-tools"><span>图片生成</span><i class="toolbar-category-indicator" aria-hidden="true"></i></button>
+                  <button type="button" class="toolbar-primary-button toolbar-category-tab" id="toolbar-video-tab" role="tab" aria-selected="false" aria-expanded="false" aria-controls="toolbar-video-tools"><span>视频生成</span><i class="toolbar-category-indicator" aria-hidden="true"></i></button>
+                </div>
+                <div class="toolbar-ribbon" id="toolbar-ribbon" hidden>
+                  <div class="toolbar-ribbon-panel" id="toolbar-asset-tools" role="tabpanel" hidden>
+                    <button type="button" class="toolbar-ribbon-tool toolbar-ribbon-action" id="tool-local-assets" title="从本地选择图片或视频"><span>本地导入</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-official-assets" title="拖到画布指定位置打开官方素材库"><span>官方素材</span></button>
+                  </div>
+                  <div class="toolbar-ribbon-panel" id="toolbar-image-tools" role="tabpanel" hidden>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-image-gen" title="拖到画布指定位置创建图片生成元素"><span>图片生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-game-ui-gen" title="拖到画布指定位置创建游戏 UI 组件生成元素"><span>游戏 UI 组件生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-four-view" title="拖到画布指定位置创建空白四视图生成元素"><span>角色四视图生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-eight-direction" title="拖到画布指定位置创建空白八方图生成元素"><span>角色八方图生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-seamless-tile-gen" title="拖到画布指定位置创建无缝地块生成元素"><span>无缝地块生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-tile-transition-atlas" title="拖到画布指定位置创建无缝地块集生成元素"><span>无缝地块集生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-tile-map" title="先设置文件夹和瓦片分辨率，再创建地图"><span>地图绘制</span></button>
+                  </div>
+                  <div class="toolbar-ribbon-panel" id="toolbar-video-tools" role="tabpanel" hidden>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-video-gen" title="拖到画布指定位置创建视频生成元素"><span>视频生成</span></button>
+                    <button type="button" class="toolbar-ribbon-tool" id="tool-animation-gen" title="拖到画布指定位置创建序列帧动画生成管线"><span>序列帧动画生成</span></button>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="canvas-viewport" id="viewport">
@@ -65,28 +94,110 @@
       <div class="ctx-menu" id="ctx-menu" hidden>
         <button type="button" data-action="copy">复制</button>
         <button type="button" data-action="paste" hidden>粘贴</button>
-        <button type="button" data-action="cutout" hidden>智能抠图</button>
+        <button type="button" data-action="export-tile-map" hidden>导出 PNG</button>
+        <button type="button" data-action="image-canvas-size" hidden>图片大小编辑</button>
         <button type="button" data-action="interactive-edit" hidden>交互编辑</button>
-        <button type="button" data-action="layer-decomposition" hidden>大模型图层分离</button>
-        <button type="button" data-action="video-trim" hidden>裁剪视频</button>
+        <button type="button" data-action="perfect-pixel" hidden>完美像素化</button>
+        <div class="ctx-submenu" data-submenu="cutout" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>抠图</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="cutout" hidden>智能抠图</button>
+            <button type="button" role="menuitem" data-action="color-key" hidden>颜色剔除</button>
+          </div>
+        </div>
         <button type="button" data-action="video-cycle" hidden>智能周期提取</button>
-        <button type="button" data-action="video-to-sequence" hidden>序列帧化</button>
-        <button type="button" data-action="smart-split">智能切分</button>
-        <button type="button" data-action="manual-split">手动切分</button>
-        <button type="button" data-action="edit-sequence" hidden>在左侧编辑序列</button>
-        <button type="button" data-action="sequence-to-sheet" hidden>拼成单图</button>
-        <button type="button" data-action="ungroup-sequence" hidden>拆散为单图</button>
-        <button type="button" data-action="combine-sequence" hidden>组合为序列帧</button>
+        <button type="button" data-action="video-to-frame-sheet" hidden>视频转序列帧图</button>
+        <div class="ctx-submenu" data-submenu="image-split" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>图片切分</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="smart-split">智能切分</button>
+            <button type="button" role="menuitem" data-action="manual-split">手动切分</button>
+            <button type="button" role="menuitem" data-action="layer-decomposition" hidden>大模型图层分离</button>
+          </div>
+        </div>
+        <div class="ctx-submenu" data-submenu="frame-sheet" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>序列帧</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="frame-sheet-preview" hidden>序列帧预览</button>
+            <button type="button" role="menuitem" data-action="frame-sheet-edit" hidden>序列帧编辑</button>
+          </div>
+        </div>
+        <div class="ctx-submenu" data-submenu="character-views" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>角色多视角生成</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="four-view" hidden>四视图生成</button>
+            <button type="button" role="menuitem" data-action="eight-direction" hidden>八方图生成</button>
+          </div>
+        </div>
+        <div class="ctx-submenu" data-submenu="map-tiles" hidden>
+          <button type="button" class="ctx-submenu-trigger" aria-haspopup="menu" aria-expanded="false">
+            <span>地图瓦片</span><span class="ctx-submenu-arrow" aria-hidden="true">›</span>
+          </button>
+          <div class="ctx-submenu-panel" role="menu">
+            <button type="button" role="menuitem" data-action="seam-elimination" hidden>瓦片缝隙消除</button>
+            <button type="button" role="menuitem" data-action="tile-transition-atlas" hidden>地图集生成</button>
+          </div>
+        </div>
         <button type="button" data-action="delete" class="ctx-danger">删除</button>
       </div>
 
+      <div class="modal-backdrop modal-backdrop-dark" id="image-canvas-size-modal" hidden>
+        <div class="modal-dialog modal-dialog-image-canvas-size" role="group" aria-labelledby="image-canvas-size-title">
+          <div class="seq-panel-head">
+            <strong id="image-canvas-size-title">图片大小编辑</strong>
+            <button type="button" class="ghost-btn" id="image-canvas-size-close">关闭</button>
+          </div>
+          <div class="image-canvas-size-stage" id="image-canvas-size-stage">
+            <canvas id="image-canvas-size-preview"></canvas>
+            <div class="image-canvas-size-frame" id="image-canvas-size-frame">
+              <button type="button" class="image-canvas-size-edge is-top" data-edge="top" aria-label="拖动上边缘"></button>
+              <button type="button" class="image-canvas-size-edge is-right" data-edge="right" aria-label="拖动右边缘"></button>
+              <button type="button" class="image-canvas-size-edge is-bottom" data-edge="bottom" aria-label="拖动下边缘"></button>
+              <button type="button" class="image-canvas-size-edge is-left" data-edge="left" aria-label="拖动左边缘"></button>
+            </div>
+          </div>
+          <div class="image-canvas-size-fields">
+            <label class="seq-field">
+              宽度
+              <input type="number" id="image-canvas-size-width" min="1" max="16384" step="1" />
+              <span>px</span>
+            </label>
+            <label class="seq-field">
+              高度
+              <input type="number" id="image-canvas-size-height" min="1" max="16384" step="1" />
+              <span>px</span>
+            </label>
+          </div>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="image-canvas-size-reset">重置</button>
+            <button type="button" class="ghost-btn" id="image-canvas-size-cancel">取消</button>
+            <button type="button" class="tool-btn" id="image-canvas-size-confirm">应用</button>
+          </div>
+        </div>
+      </div>
+
       <div class="modal-backdrop modal-backdrop-dark" id="interactive-edit-modal" hidden>
-        <div class="modal-dialog modal-dialog-interactive-edit" role="dialog" aria-modal="true" aria-labelledby="interactive-edit-title">
+        <div class="modal-dialog modal-dialog-interactive-edit" role="group" aria-labelledby="interactive-edit-title">
           <div class="seq-panel-head">
             <strong id="interactive-edit-title">交互编辑</strong>
             <button type="button" class="ghost-btn" id="interactive-edit-close">关闭</button>
           </div>
-          <div class="interactive-editor-host" id="interactive-editor-host"></div>
+          <div class="interactive-editor-stage">
+            <div class="interactive-editor-host" id="interactive-editor-host"></div>
+            <label class="interactive-edit-zoom" for="interactive-edit-zoom">
+              <span>缩放</span>
+              <input type="range" id="interactive-edit-zoom" min="1" max="400" step="1" value="100" />
+              <output id="interactive-edit-zoom-value" for="interactive-edit-zoom">100%</output>
+            </label>
+          </div>
           <div class="interactive-edit-compose">
             <label class="layer-decomposition-prompt" for="interactive-edit-prompt">
               编辑要求
@@ -96,7 +207,14 @@
                 placeholder="例如：将框选区域替换为木质宝箱，并保持其他内容不变"
               ></textarea>
             </label>
-            <p class="modal-hint">画面标记和文字会合并到参考图中，并使用 Pro 模型生成。</p>
+            <label class="interactive-edit-model" for="interactive-edit-model">
+              <span>模型</span>
+              <select id="interactive-edit-model">
+                <option value="asset-pro">Pro</option>
+                <option value="asset-max">Max</option>
+              </select>
+            </label>
+            <p class="modal-hint">画面标记和文字会合并到参考图中，再使用所选模型生成。</p>
             <p class="modal-hint" id="interactive-edit-status" hidden></p>
             <div class="modal-actions">
               <button type="button" class="ghost-btn" id="interactive-edit-cancel">取消</button>
@@ -107,8 +225,42 @@
         </div>
       </div>
 
+      <div class="modal-backdrop modal-backdrop-dark" id="seam-elimination-modal" hidden>
+        <div class="modal-dialog modal-dialog-seam-elimination" role="group" aria-labelledby="seam-elimination-title">
+          <div class="seq-panel-head">
+            <strong id="seam-elimination-title">缝隙消除</strong>
+            <button type="button" class="ghost-btn" id="seam-elimination-close">关闭</button>
+          </div>
+          <div class="seam-elimination-preview">
+            <img id="seam-elimination-image" alt="待处理地砖预览" />
+          </div>
+          <label class="layer-decomposition-prompt" for="seam-elimination-prompt">
+            地砖描述
+            <textarea
+              id="seam-elimination-prompt"
+              rows="4"
+              placeholder="描述地砖的内容、材质和美术风格"
+            ></textarea>
+          </label>
+          <label class="interactive-edit-model" for="seam-elimination-model">
+            <span>模型</span>
+            <select id="seam-elimination-model"></select>
+          </label>
+          <div class="seam-elimination-size-row">
+            <span>输出尺寸</span>
+            <output id="seam-elimination-size">读取中…</output>
+          </div>
+          <p class="modal-hint">输出尺寸锁定为输入图片的像素尺寸。</p>
+          <p class="modal-hint" id="seam-elimination-status" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="ghost-btn" id="seam-elimination-cancel">取消</button>
+            <button type="button" class="tool-btn" id="seam-elimination-confirm">开始处理</button>
+          </div>
+        </div>
+      </div>
+
       <div class="modal-backdrop modal-backdrop-dark" id="layer-decomposition-modal" hidden>
-        <div class="modal-dialog modal-dialog-layer-decomposition" role="dialog" aria-modal="true" aria-labelledby="layer-decomposition-title">
+        <div class="modal-dialog modal-dialog-layer-decomposition" role="group" aria-labelledby="layer-decomposition-title">
           <div class="seq-panel-head">
             <strong id="layer-decomposition-title">大模型图层分离</strong>
             <button type="button" class="ghost-btn" id="layer-decomposition-close">关闭</button>
@@ -134,7 +286,7 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="video-cycle-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="video-cycle-title">
+        <div class="modal-dialog" role="group" aria-labelledby="video-cycle-title">
           <div class="seq-panel-head">
             <strong id="video-cycle-title">智能周期提取</strong>
             <button type="button" class="ghost-btn" id="video-cycle-close">关闭</button>
@@ -175,15 +327,23 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="smart-split-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="smart-split-title">
+        <div class="modal-dialog" role="group" aria-labelledby="smart-split-title">
           <div class="seq-panel-head">
             <strong id="smart-split-title">智能切分</strong>
             <button type="button" class="ghost-btn" id="smart-split-close">关闭</button>
           </div>
           <p class="modal-hint">
-            切分结果统一为最大主体的宽度和高度。选择主体在扩展区域中的固定基准点；主体不会缩放。
+            自动识别并裁出彼此分离的主体；主体不会缩放。
           </p>
-          <div class="split-anchor-grid" id="smart-split-anchor-grid" role="radiogroup" aria-label="扩展基准点">
+          <label class="smart-split-size-toggle">
+            <input type="checkbox" id="smart-split-pad-to-same-size" checked />
+            <span>
+              <strong>补全为相同图片大小</strong>
+              <small>只在裁切结果周围填充透明像素，不扩大原图裁切范围。</small>
+            </span>
+          </label>
+          <p class="modal-hint">透明补全时主体的对齐位置：</p>
+          <div class="split-anchor-grid" id="smart-split-anchor-grid" role="radiogroup" aria-label="透明补全对齐位置">
             <button type="button" class="split-anchor-btn" data-anchor="top-left" role="radio" aria-checked="false"><span></span>左上</button>
             <button type="button" class="split-anchor-btn" data-anchor="top" role="radio" aria-checked="false"><span></span>上</button>
             <button type="button" class="split-anchor-btn" data-anchor="top-right" role="radio" aria-checked="false"><span></span>右上</button>
@@ -203,7 +363,7 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="manual-split-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="manual-split-title">
+        <div class="modal-dialog" role="group" aria-labelledby="manual-split-title">
           <div class="seq-panel-head">
             <strong id="manual-split-title">手动切分</strong>
             <button type="button" class="ghost-btn" id="manual-split-close">关闭</button>
@@ -232,137 +392,84 @@
       </div>
 
       <div class="modal-backdrop modal-backdrop-dark" id="frame-extract-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="frame-extract-title">
+        <div class="modal-dialog" role="group" aria-labelledby="frame-extract-title">
           <div class="seq-panel-head">
-            <strong id="frame-extract-title">序列帧化</strong>
+            <strong id="frame-extract-title">视频转序列帧图</strong>
             <button type="button" class="ghost-btn" id="frame-extract-close">关闭</button>
           </div>
           <p class="modal-hint">
-            按总帧数计算步长均匀取帧：首帧与尾帧必含，中间为 1 + n×⌊T/(C-1)⌋。
+            均匀抽取视频帧后，自动按从左到右、从上到下的顺序拼成一张 PNG 图片。
           </p>
           <label class="seq-field frame-extract-field">
-            序列帧长度
-            <input type="number" id="frame-extract-count" min="2" max="30" step="1" value="10" />
-            <span class="frame-extract-range">2 – 30</span>
+            FPS
+            <input type="number" id="frame-extract-fps" min="0.1" max="60" step="0.1" value="8" />
+            <span class="frame-extract-range">0.1 – 60</span>
           </label>
           <p class="modal-hint" id="frame-extract-status" hidden></p>
           <div class="modal-actions">
             <button type="button" class="ghost-btn" id="frame-extract-cancel">取消</button>
-            <button type="button" class="tool-btn" id="frame-extract-confirm">开始抽帧</button>
+            <button type="button" class="tool-btn" id="frame-extract-confirm">生成序列帧图</button>
           </div>
         </div>
       </div>
 
-      <div class="modal-backdrop modal-backdrop-dark" id="video-trim-modal" hidden>
-        <div class="modal-dialog modal-dialog-wide" role="dialog" aria-modal="true" aria-labelledby="video-trim-title">
+      <div class="modal-backdrop modal-backdrop-dark" id="frame-preview-modal" hidden>
+        <div class="modal-dialog" role="group" aria-labelledby="frame-preview-title">
           <div class="seq-panel-head">
-            <strong id="video-trim-title">裁剪视频</strong>
-            <button type="button" class="ghost-btn" id="video-trim-close">关闭</button>
+            <strong id="frame-preview-title">序列帧预览</strong>
+            <button type="button" class="ghost-btn" id="frame-preview-close">关闭</button>
           </div>
-          <p class="modal-hint">一条时间轴：拖白点定位画面，拖青绿柄设入/出点；滚轮可微调（Shift=1ms）。</p>
-          <div class="trim-player">
-            <div class="trim-stage">
-              <video id="video-trim-preview" muted playsinline preload="auto"></video>
-            </div>
-            <div class="trim-bar">
-              <button type="button" class="trim-play-btn" id="video-trim-play" title="播放/暂停">▶</button>
-              <span class="trim-clock">
-                <strong id="video-trim-now-label">0:00.000</strong>
-                <span>/</span>
-                <span id="video-trim-total-label">0:00.000</span>
-              </span>
-            </div>
-            <div class="trim-timeline" id="video-trim-timeline">
-              <div class="trim-track" id="video-trim-track">
-                <div class="trim-range" id="video-trim-range"></div>
-                <input
-                  type="range"
-                  class="trim-scrub-input"
-                  id="video-trim-scrub"
-                  min="0"
-                  max="0"
-                  step="0.001"
-                  value="0"
-                  aria-label="播放进度"
-                />
-                <div
-                  class="trim-handle trim-handle-start"
-                  id="video-trim-handle-start"
-                  title="入点"
-                  role="slider"
-                  tabindex="0"
-                ></div>
-                <div
-                  class="trim-handle trim-handle-end"
-                  id="video-trim-handle-end"
-                  title="出点"
-                  role="slider"
-                  tabindex="0"
-                ></div>
-              </div>
-            </div>
-            <div class="trim-times">
-              <span>入点 <strong id="video-trim-start-label">0:00.000</strong></span>
-              <span>选区 <strong id="video-trim-dur-label">0:00.000</strong></span>
-              <span>出点 <strong id="video-trim-end-label">0:00.000</strong></span>
-            </div>
+          <p class="modal-hint">
+            将当前图片等分为网格，并按照从左到右、从上到下的顺序在画布内循环播放。不会修改图片文件。
+          </p>
+          <div class="seq-sheet-fields">
+            <label class="seq-field frame-extract-field">
+              行数
+              <input type="number" id="frame-preview-rows" min="1" max="64" step="1" value="2" />
+            </label>
+            <label class="seq-field frame-extract-field">
+              列数
+              <input type="number" id="frame-preview-columns" min="1" max="64" step="1" value="2" />
+            </label>
           </div>
-          <p class="modal-hint" id="video-trim-status" hidden></p>
+          <p class="modal-hint" id="frame-preview-info"></p>
+          <div class="seq-sheet-preview" id="frame-preview-grid" aria-hidden="true"></div>
+          <label class="seq-field frame-extract-field">
+            FPS
+            <input type="number" id="frame-preview-fps" min="0.000001" step="any" value="8" />
+          </label>
+          <p class="modal-hint" id="frame-preview-status" hidden></p>
           <div class="modal-actions">
-            <button type="button" class="ghost-btn" id="video-trim-cancel">取消</button>
-            <button type="button" class="tool-btn" id="video-trim-confirm">裁剪并生成</button>
+            <button type="button" class="ghost-btn" id="frame-preview-cancel">取消</button>
+            <button type="button" class="tool-btn" id="frame-preview-confirm">开始预览</button>
           </div>
         </div>
       </div>
 
-      <div class="modal-backdrop modal-backdrop-dark" id="seq-sheet-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="seq-sheet-title">
+      <div class="modal-backdrop modal-backdrop-dark" id="frame-editor-split-modal" hidden>
+        <div class="modal-dialog" role="group" aria-labelledby="frame-editor-split-title">
           <div class="seq-panel-head">
-            <strong id="seq-sheet-title">拼成单图</strong>
-            <button type="button" class="ghost-btn" id="seq-sheet-close">关闭</button>
+            <strong id="frame-editor-split-title">创建序列帧编辑器</strong>
+            <button type="button" class="ghost-btn" id="frame-editor-split-close">关闭</button>
           </div>
           <p class="modal-hint">
-            按行列排布序列帧：先从左到右填满一行，再换到下一行；多出的格子保持透明。
+            请设置当前图片包含的行数和列数。已有序列帧预览时会自动填入相同配置；这里允许 1×1。
           </p>
-          <p class="modal-hint" id="seq-sheet-frame-info">共 0 帧</p>
           <div class="seq-sheet-fields">
             <label class="seq-field frame-extract-field">
               行数
-              <input type="number" id="seq-sheet-rows" min="1" max="64" step="1" value="1" />
+              <input type="number" id="frame-editor-split-rows" min="1" max="64" step="1" value="2" />
             </label>
             <label class="seq-field frame-extract-field">
               列数
-              <input type="number" id="seq-sheet-cols" min="1" max="64" step="1" value="1" />
+              <input type="number" id="frame-editor-split-columns" min="1" max="64" step="1" value="2" />
             </label>
           </div>
-          <div class="seq-sheet-preview" id="seq-sheet-preview" aria-hidden="true"></div>
-          <p class="modal-hint" id="seq-sheet-status" hidden></p>
-          <div class="modal-actions">
-            <button type="button" class="ghost-btn" id="seq-sheet-cancel">取消</button>
-            <button type="button" class="tool-btn" id="seq-sheet-confirm">生成单图</button>
-          </div>
-        </div>
-      </div>
-
-      <div class="modal-backdrop" id="seq-modal" hidden>
-        <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="seq-panel-title">
-          <div class="seq-panel-head">
-            <strong id="seq-panel-title">编辑序列</strong>
-            <button type="button" class="ghost-btn" id="seq-panel-close">关闭</button>
-          </div>
-          <p class="modal-hint">调整播放速度、循环，以及帧顺序。</p>
-          <label class="seq-field">
-            播放速度 (FPS)
-            <input type="range" id="seq-fps" min="1" max="24" value="8" />
-            <span id="seq-fps-val">8</span>
-          </label>
-          <label class="seq-field seq-check">
-            <input type="checkbox" id="seq-loop" checked />
-            循环播放
-          </label>
-          <div class="seq-frames" id="seq-frames"></div>
+          <p class="modal-hint" id="frame-editor-split-info"></p>
+          <p class="modal-hint" id="frame-editor-split-status" hidden></p>
           <div class="modal-actions">
-            <button type="button" class="ghost-btn" id="seq-panel-done">完成</button>
+            <button type="button" class="ghost-btn" id="frame-editor-split-cancel">取消</button>
+            <button type="button" class="tool-btn" id="frame-editor-split-confirm">创建编辑器</button>
           </div>
         </div>
       </div>