mail-editor-pancake 0.2.8 → 0.3.0

package/packages/core/src/editor/Canvas.ts

@@ -1,14 +1,17 @@
 import Sortable from 'sortablejs';
+import type { SimpleMailT } from '../i18n';
 import type { Registry } from '../registry/registry';
 import {
+  type Store,
   createSection,
   findBlockLocation,
   findSection,
   pruneSectionIfEmpty,
-  type Store,
 } from '../store/store';
 import type {
   Block,
+  BlockDefinition,
+  BlockSchemaField,
   Column,
   EditorUiOptions,
   EmailDoc,
@@ -18,21 +21,19 @@ import type {
   SectionAttrs,
   SectionLayout,
 } from '../types';
-import { getSectionDynamicVariantKey } from '../utils/dynamicVariantSection';
 import { blockButtonWidthCss, docContentWidthCss } from '../utils/contentWidth';
+import { clear, escapeHtml, h } from '../utils/dom';
+import { getSectionDynamicVariantKey } from '../utils/dynamicVariantSection';
 import { globalListIndentCssVarValue } from '../utils/emailListStyles';
 import { normalizeFontWeightStep } from '../utils/fontWeightSteps';
-import { clear, escapeHtml, h } from '../utils/dom';
-import {
-  defaultPaddingForLockedBlock,
-  resolveLockedMjmlCanvasContent,
-} from '../utils/lockedMjml';
-import { layoutHumanLabel } from '../utils/sectionLayout';
+import { defaultPaddingForLockedBlock, resolveLockedMjmlCanvasContent } from '../utils/lockedMjml';
 import { paletteDropHasSectionLayout, resolvePaletteDropResult } from '../utils/paletteDrop';
+import { layoutHumanLabel } from '../utils/sectionLayout';
 import { BlockCodeModal } from './BlockCodeModal';
+import { openImageGalleryModal } from './ImageGalleryModal';
 import { InlineEditor, type SelectionState } from './InlineEditor';
 import type { RichTextToolbar } from './RichTextToolbar';
-import type { SimpleMailT } from '../i18n';
+import type { ImageAssetsHandlers } from './imageAssets';
 
 export interface CanvasOptions {
   store: Store;
@@ -53,6 +54,16 @@ export interface CanvasOptions {
   layerRoot: HTMLElement;
   /** 与 MailEditor.opts.ui 对齐 */
   ui?: EditorUiOptions;
+  /** 与 MailEditor.opts.imageAssets 对齐：启用图库（showGallery）时，双击图片类块可直接打开图库换图 */
+  imageAssets?: ImageAssetsHandlers;
+  /** Section / Block 工具条「复制设计稿」回调（写局部 JSON 到剪贴板，供其他画布追加） */
+  onCopySelectionDesign?: (target: { sectionId: string } | { blockId: string }) => void;
+  /** 「选择节」批量模式动作（由 Editor 实现：写剪贴板 / 下载 JSON / 批量删除）；块为散选、节为整选，二者可混合 */
+  onSectionSelectCopy?: (sectionIds: string[], blockIds: string[]) => void;
+  onSectionSelectExport?: (sectionIds: string[], blockIds: string[]) => void;
+  onSectionSelectRemove?: (sectionIds: string[], blockIds: string[]) => void;
+  /** 进入 / 退出节选择模式时通知宿主同步 UI（如顶栏按钮高亮）；画布内「完成」按钮与 ⌘/Ctrl+点击直达均会触发 */
+  onSectionSelectModeChange?: (active: boolean) => void;
   t: SimpleMailT;
 }
 
@@ -86,6 +97,26 @@ export class Canvas {
   private clearSelectionGestureTracking = new AbortController();
   private pointerGestureStartedInInlineEdit = false;
   private blockCodeModal: BlockCodeModal;
+  /** 节选择模式（批量复制 / 导出 / 删除）：点击 Section 勾选而非单选 */
+  private sectionSelectActive = false;
+  /** 完整选中的节（点击节空白 / 选择圈命中） */
+  private checkedSectionIds = new Set<string>();
+  /** 散选的块（所属节未被完整选中；不变式由 _normalizeCheckedSets 维护） */
+  private checkedBlockIds = new Set<string>();
+  /**
+   * 区间锚点：最近一次点击的命中（节或块）。Shift+点击以它与目标为界做同类区间：
+   * 节↔节 = 节区间；同列块↔块 = 列内区间；跨类 / 跨列退化为单点切换。
+   */
+  private sectionCheckAnchor: {
+    kind: 'section' | 'block';
+    id: string;
+    sectionId: string;
+    columnIndex: number;
+  } | null = null;
+  private sectionSelectBar: HTMLElement | null = null;
+  private sectionSelectCountEl: HTMLElement | null = null;
+  private sectionSelectAllBtn: HTMLButtonElement | null = null;
+  private sectionSelectActionBtns: HTMLButtonElement[] = [];
 
   constructor(opts: CanvasOptions) {
     this.opts = opts;
@@ -101,6 +132,10 @@ export class Canvas {
     });
 
     this._bindDesignModeLinkSuppression();
+    // 节选择模式下 Shift+点击 = 区间勾选：阻止浏览器默认的 Shift 扩展文本选区
+    this.inner.addEventListener('mousedown', (e: MouseEvent) => {
+      if (this.sectionSelectActive && e.shiftKey) e.preventDefault();
+    });
     if (opts.clearSelectionOnCanvasMargin) {
       this._bindClearSelectionGestureTracking();
       this._bindClearSelectionOnCanvasWhitespace();
@@ -179,6 +214,7 @@ export class Canvas {
   destroy() {
     this.linkNavSuppression.abort();
     this.clearSelectionGestureTracking.abort();
+    this.exitSectionSelectMode();
     this._exitEditing(false);
     this._destroySortables();
     this.blockCodeModal.destroy();
@@ -244,6 +280,7 @@ export class Canvas {
       if (!this.el.contains(t)) return;
       if (this.inner.contains(t)) return;
       if (this.addBar.contains(t)) return;
+      if (this.sectionSelectBar?.contains(t)) return;
       if (this._shouldSuppressClearSelectionFromTextDrag()) return;
       this.commitInlineEdit();
       this.opts.store.setSelection(null);
@@ -300,11 +337,7 @@ export class Canvas {
     );
 
     if (!doc.sections.length) {
-      this.inner.append(
-        h('div', { class: 'sm-empty-doc' }, [
-          this.opts.t('canvas.emptyHint'),
-        ]),
-      );
+      this.inner.append(h('div', { class: 'sm-empty-doc' }, [this.opts.t('canvas.emptyHint')]));
     } else {
       for (let si = 0; si < doc.sections.length; si++) {
         this.inner.append(this._renderSection(doc.sections[si], doc, si));
@@ -330,6 +363,11 @@ export class Canvas {
     });
     this.sortableRefs.push(top);
 
+    if (this.sectionSelectActive) {
+      this._setSortablesDisabled(true);
+      this._syncSectionChecks();
+    }
+
     this._syncSelection();
   }
 
@@ -340,7 +378,9 @@ export class Canvas {
     }px ${a.paddingLeft ?? 0}px`;
 
     const layoutShort =
-      section.layout === '1' ? this.opts.t('rightPanel.layout.oneColumn') : layoutHumanLabel(section.layout);
+      section.layout === '1'
+        ? this.opts.t('rightPanel.layout.oneColumn')
+        : layoutHumanLabel(section.layout);
     const dvKey =
       this.opts.ui?.enableDynamicVariantKey === true
         ? getSectionDynamicVariantKey(section)
@@ -354,7 +394,9 @@ export class Canvas {
 
     const sw = blockButtonWidthCss(a.width);
     const box =
-      sw != null ? `max-width:${sw};width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;` : '';
+      sw != null
+        ? `max-width:${sw};width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;`
+        : '';
 
     const host = h('div', {
       class: 'sm-section-host',
@@ -392,6 +434,21 @@ export class Canvas {
           },
           [iconCopy()],
         ),
+        this.opts.onCopySelectionDesign
+          ? h(
+              'button',
+              {
+                class: 'sm-tool-btn',
+                type: 'button',
+                title: this.opts.t('canvas.copySectionDesignTitle'),
+                onclick: (e: Event) => {
+                  e.stopPropagation();
+                  this.opts.onCopySelectionDesign?.({ sectionId: section.id });
+                },
+              },
+              [iconCopyDesign()],
+            )
+          : null,
         h(
           'button',
           {
@@ -419,10 +476,27 @@ export class Canvas {
 
     wrap.append(cols);
 
-    host.append(wrap, toolbar);
+    const check = h('div', { class: 'sm-section-check', 'aria-hidden': 'true' }, [
+      iconCheck(),
+      iconMinus(),
+    ]);
+    host.append(wrap, toolbar, check);
 
     host.addEventListener('click', (e) => {
+      if (this.sectionSelectActive) {
+        e.stopPropagation();
+        if (e.shiftKey) this._shiftClickSection(section.id);
+        else this._toggleSectionFull(section.id);
+        return;
+      }
       if ((e.target as HTMLElement).closest('.sm-block')) return;
+      /** ⌘/Ctrl+点击节空白：直达节选择模式并勾选该节（macOS ⌘ / Windows·Linux Ctrl） */
+      if (e.metaKey || e.ctrlKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._enterSectionSelectModeWith(section.id);
+        return;
+      }
       // 文本拖选时在 Section padding 等区域松开会冒泡 click，不应误切成 Section 选中
       if (!e.altKey && this._shouldSuppressSectionSelectFromTextInteraction()) return;
       e.stopPropagation();
@@ -596,6 +670,21 @@ export class Canvas {
           },
           [iconCopy()],
         ),
+        this.opts.onCopySelectionDesign
+          ? h(
+              'button',
+              {
+                class: 'sm-tool-btn',
+                type: 'button',
+                title: this.opts.t('canvas.copyBlockDesignTitle'),
+                onclick: (e: Event) => {
+                  e.stopPropagation();
+                  this.opts.onCopySelectionDesign?.({ blockId: block.id });
+                },
+              },
+              [iconCopyDesign()],
+            )
+          : null,
         h(
           'button',
           {
@@ -615,6 +704,12 @@ export class Canvas {
     el.append(blockToolbar, content);
 
     el.addEventListener('click', (e) => {
+      if (this.sectionSelectActive) {
+        e.stopPropagation();
+        if (e.shiftKey) this._shiftClickBlock(section.id, columnIndex, block.id);
+        else this._toggleBlockCheck(section.id, columnIndex, block.id);
+        return;
+      }
       if (this.editingBlockId === block.id) return; // 编辑中不抢焦点
       /** Alt（mac Option）：穿透选中父级 Section，解决单列内边距为 0 时块铺满无法点到 Section */
       if (e.altKey) {
@@ -622,6 +717,13 @@ export class Canvas {
         this.opts.store.setSelection({ kind: 'section', sectionId: section.id });
         return;
       }
+      /** ⌘/Ctrl+点击块：直达选择模式并勾选该块（不带走同节其他块） */
+      if (e.metaKey || e.ctrlKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._enterSectionSelectModeWithBlock(section.id, columnIndex, block.id);
+        return;
+      }
       e.stopPropagation();
       this.opts.store.setSelection({
         kind: 'block',
@@ -642,6 +744,18 @@ export class Canvas {
         e.stopPropagation();
         this._enterEditing(block);
       });
+    } else {
+      // 启用图库时：双击图片类块（含 type: 'image' 字段，如 image / logo / hero）直接打开图库换图，
+      // 与右栏「图库」按钮共用同一份 adapter 与权限配置
+      const galleryField = this._galleryImageField(def);
+      if (galleryField) {
+        el.addEventListener('dblclick', (e) => {
+          if (this.sectionSelectActive) return; // 批量选择模式下双击仍只作勾选
+          e.stopPropagation();
+          e.preventDefault();
+          this._openGalleryForBlock(block, galleryField);
+        });
+      }
     }
 
     return el;
@@ -677,7 +791,53 @@ export class Canvas {
   /* ----------------------------- 内联编辑 -------------------------------- */
 
   /** 空文档时：在画布白底区域双击，插入一列 Section + 空文本并进入编辑 */
+  /** 图库启用（showGallery 且配置了 imageGallery / pickImageFromGallery）时返回块内第一个 `type: 'image'` 字段，作为双击换图入口 */
+  private _galleryImageField(def: BlockDefinition | undefined): BlockSchemaField | null {
+    const assets = this.opts.imageAssets;
+    if (!assets || assets.showGallery !== true) return null;
+    if (!assets.imageGallery && !assets.pickImageFromGallery) return null;
+    return def?.schema.find((f) => f.type === 'image') ?? null;
+  }
+
+  /**
+   * 双击图片类块打开图库换图，选中后写入 field 对应的 props 字段
+   * （image.src / logo.src / hero.backgroundUrl…）。
+   * 优先内置图库弹层（与右栏「图库」按钮同一 adapter / 权限），
+   * 宿主自管场景走 pickImageFromGallery 回调。
+   */
+  private _openGalleryForBlock(block: Block, field: BlockSchemaField) {
+    const assets = this.opts.imageAssets;
+    if (!assets) return;
+    const propKey = field.key;
+    const currentUrl = String((block.props as Record<string, unknown>)[propKey] ?? '');
+    const applyUrl = (url: string | null) => {
+      const value = url == null ? '' : String(url).trim();
+      if (!value) return;
+      const blockId = block.id;
+      this.opts.store.update((d) => {
+        const loc = findBlockLocation(d, blockId);
+        if (loc) (loc.block.props as Record<string, unknown>)[propKey] = value;
+      });
+    };
+    if (assets.imageGallery) {
+      openImageGalleryModal({
+        adapter: assets.imageGallery,
+        permissions: assets.permissions,
+        onPick: (url) => applyUrl(url),
+        t: this.opts.t,
+        parent: this.opts.layerRoot,
+      });
+      return;
+    }
+    assets
+      .pickImageFromGallery?.({ blockId: block.id, propKey, currentUrl })
+      .then(applyUrl, (e) => {
+        console.error('[simple-mail] pickImageFromGallery', e);
+      });
+  }
+
   private _onEmptyCanvasDblClick(e: MouseEvent) {
+    if (this.sectionSelectActive) return;
     if (this.opts.store.doc.sections.length > 0) return;
     const t = e.target as HTMLElement | null;
     if (!t || !this.inner.contains(t)) return;
@@ -711,6 +871,7 @@ export class Canvas {
 
   /** 空列双击：插入正文组件（content 为空）并直接进入编辑 */
   private _insertEmptyTextAndEdit(sectionId: string, columnIndex: number) {
+    if (this.sectionSelectActive) return;
     const reg = this.opts.registry;
     if (!reg.get('text')?.inlineEditable) return;
     const newBlock = reg.createBlock('text');
@@ -731,6 +892,7 @@ export class Canvas {
   }
 
   private _enterEditing(block: Block) {
+    if (this.sectionSelectActive) return;
     if (this.editingBlockId === block.id) return;
     this._exitEditing(true);
 
@@ -866,7 +1028,9 @@ export class Canvas {
     return !!attrs?.dynamicVariantKey;
   }
 
-  private _firstBlockInSection(section: Section): { block: Block; columnIndex: number } | undefined {
+  private _firstBlockInSection(
+    section: Section,
+  ): { block: Block; columnIndex: number } | undefined {
     for (let columnIndex = 0; columnIndex < section.columns.length; columnIndex += 1) {
       const block = section.columns[columnIndex]?.blocks[0];
       if (block) return { block, columnIndex };
@@ -1028,6 +1192,359 @@ export class Canvas {
     });
   }
 
+  /* ------------------------- 节选择模式（批量操作） ------------------------- */
+
+  get isSectionSelectMode(): boolean {
+    return this.sectionSelectActive;
+  }
+
+  /** 进入节选择模式：屏蔽单选 / 拖拽 / 内联编辑，点击块勾块、点击节空白/圈勾整节，可批量复制 / 导出 / 删除 */
+  enterSectionSelectMode() {
+    if (this.sectionSelectActive) return;
+    this.commitInlineEdit();
+    this.sectionSelectActive = true;
+    this.checkedSectionIds.clear();
+    this.checkedBlockIds.clear();
+    this.sectionCheckAnchor = null;
+    this.opts.store.setSelection(null);
+    this.el.classList.add('sm-section-select-mode');
+    this._setSortablesDisabled(true);
+    this._renderSectionSelectBar();
+    this._syncSectionChecks();
+    this.opts.onSectionSelectModeChange?.(true);
+  }
+
+  /** 退出节选择模式，恢复常规画布交互 */
+  exitSectionSelectMode() {
+    if (!this.sectionSelectActive) return;
+    this.sectionSelectActive = false;
+    this.checkedSectionIds.clear();
+    this.checkedBlockIds.clear();
+    this.sectionCheckAnchor = null;
+    this.el.classList.remove('sm-section-select-mode');
+    this.sectionSelectBar?.remove();
+    this.sectionSelectBar = null;
+    this.sectionSelectCountEl = null;
+    this.sectionSelectAllBtn = null;
+    this.sectionSelectActionBtns = [];
+    this._setSortablesDisabled(false);
+    this._syncSectionChecks();
+    this.opts.onSectionSelectModeChange?.(false);
+  }
+
+  /** 点节（空白 / 选择圈）：未全选 → 整节选中；已全选 → 清空该节（取消其内散选块） */
+  private _toggleSectionFull(id: string) {
+    const sec = findSection(this.opts.store.doc, id);
+    if (!sec) return;
+    if (this.checkedSectionIds.has(id)) {
+      this.checkedSectionIds.delete(id);
+    } else {
+      for (const c of sec.columns) {
+        for (const b of c.blocks) this.checkedBlockIds.delete(b.id);
+      }
+      this.checkedSectionIds.add(id);
+    }
+    this.sectionCheckAnchor = { kind: 'section', id, sectionId: id, columnIndex: -1 };
+    this._syncSectionChecks();
+  }
+
+  /**
+   * 点块：切换该块选中态，不带走同节其他块。
+   * 整节选中时点其中一块 = 取消该块，其余块退散为逐块选中（半选）。
+   */
+  private _toggleBlockCheck(sectionId: string, columnIndex: number, blockId: string) {
+    const sec = findSection(this.opts.store.doc, sectionId);
+    if (!sec) return;
+    if (this.checkedSectionIds.has(sectionId)) {
+      this.checkedSectionIds.delete(sectionId);
+      for (const c of sec.columns) {
+        for (const b of c.blocks) if (b.id !== blockId) this.checkedBlockIds.add(b.id);
+      }
+    } else if (this.checkedBlockIds.has(blockId)) {
+      this.checkedBlockIds.delete(blockId);
+    } else {
+      this.checkedBlockIds.add(blockId);
+    }
+    this.sectionCheckAnchor = { kind: 'block', id: blockId, sectionId, columnIndex };
+    this._normalizeCheckedSets();
+    this._syncSectionChecks();
+  }
+
+  /** Shift+点击节：锚也是节时做节区间（替换全部勾选，Finder 语义）；否则退化为单点切换 */
+  private _shiftClickSection(targetId: string) {
+    const ids = this.opts.store.doc.sections.map((s) => s.id);
+    const targetIdx = ids.indexOf(targetId);
+    if (targetIdx < 0) return;
+    const anchor = this.sectionCheckAnchor;
+    const anchorIdx = anchor?.kind === 'section' ? ids.indexOf(anchor.id) : -1;
+    if (anchorIdx < 0) {
+      this._toggleSectionFull(targetId);
+      return;
+    }
+    const from = Math.min(anchorIdx, targetIdx);
+    const to = Math.max(anchorIdx, targetIdx);
+    this.checkedSectionIds = new Set(ids.slice(from, to + 1));
+    this.checkedBlockIds.clear();
+    this._syncSectionChecks();
+  }
+
+  /** Shift+点击块：锚是同节同列的块时做列内区间（替换全部勾选）；跨类 / 跨列退化为单点切换 */
+  private _shiftClickBlock(sectionId: string, columnIndex: number, blockId: string) {
+    const sec = findSection(this.opts.store.doc, sectionId);
+    const col = sec?.columns[columnIndex];
+    if (!sec || !col) return;
+    const ids = col.blocks.map((b) => b.id);
+    const targetIdx = ids.indexOf(blockId);
+    if (targetIdx < 0) return;
+    const anchor = this.sectionCheckAnchor;
+    const anchorIdx =
+      anchor?.kind === 'block' &&
+      anchor.sectionId === sectionId &&
+      anchor.columnIndex === columnIndex
+        ? ids.indexOf(anchor.id)
+        : -1;
+    if (anchorIdx < 0) {
+      this._toggleBlockCheck(sectionId, columnIndex, blockId);
+      return;
+    }
+    const from = Math.min(anchorIdx, targetIdx);
+    const to = Math.max(anchorIdx, targetIdx);
+    this.checkedSectionIds.clear();
+    this.checkedBlockIds = new Set(ids.slice(from, to + 1));
+    this._syncSectionChecks();
+  }
+
+  /**
+   * ⌘/Ctrl+点击直达：进入选择模式并整节勾选（macOS ⌘ / Windows·Linux Ctrl，
+   * 与文件管理器「加选」一致的手势，省去先点顶栏入口的往返）。
+   */
+  private _enterSectionSelectModeWith(sectionId: string) {
+    this.enterSectionSelectMode();
+    this.checkedSectionIds.add(sectionId);
+    this.sectionCheckAnchor = { kind: 'section', id: sectionId, sectionId, columnIndex: -1 };
+    this._syncSectionChecks();
+  }
+
+  /** ⌘/Ctrl+点击块直达：进入选择模式并勾选该块（锚为块，后续可 Shift 列内区间） */
+  private _enterSectionSelectModeWithBlock(
+    sectionId: string,
+    columnIndex: number,
+    blockId: string,
+  ) {
+    this.enterSectionSelectMode();
+    this.checkedBlockIds.add(blockId);
+    this.sectionCheckAnchor = { kind: 'block', id: blockId, sectionId, columnIndex };
+    this._syncSectionChecks();
+  }
+
+  /** 节的勾选三态：无选 / 半选（部分散选块）/ 全选（整节） */
+  private _sectionCheckState(section: Section): 'none' | 'partial' | 'full' {
+    if (this.checkedSectionIds.has(section.id)) return 'full';
+    let total = 0;
+    let hit = 0;
+    for (const c of section.columns) {
+      for (const b of c.blocks) {
+        total++;
+        if (this.checkedBlockIds.has(b.id)) hit++;
+      }
+    }
+    if (total === 0 || hit === 0) return 'none';
+    return hit === total ? 'full' : 'partial';
+  }
+
+  /**
+   * 勾选集归一化，维护两条不变式：
+   *  1. 失效 id（节/块被删）及时清理
+   *  2. 节内全部块散选时折叠为整节选中；散选块的所属节被整选时清掉该块
+   */
+  private _normalizeCheckedSets() {
+    const sections = this.opts.store.doc.sections;
+    const aliveSectionIds = new Set(sections.map((s) => s.id));
+    for (const id of [...this.checkedSectionIds]) {
+      if (!aliveSectionIds.has(id)) this.checkedSectionIds.delete(id);
+    }
+    const aliveBlockIds = new Set<string>();
+    for (const s of sections) {
+      for (const c of s.columns) for (const b of c.blocks) aliveBlockIds.add(b.id);
+    }
+    for (const id of [...this.checkedBlockIds]) {
+      if (!aliveBlockIds.has(id)) this.checkedBlockIds.delete(id);
+    }
+    for (const s of sections) {
+      if (this.checkedSectionIds.has(s.id)) {
+        for (const c of s.columns) {
+          for (const b of c.blocks) this.checkedBlockIds.delete(b.id);
+        }
+        continue;
+      }
+      const total = s.columns.reduce((n, c) => n + c.blocks.length, 0);
+      if (total === 0) continue;
+      const hit = s.columns.reduce(
+        (n, c) => n + c.blocks.filter((b) => this.checkedBlockIds.has(b.id)).length,
+        0,
+      );
+      if (hit === total) {
+        this.checkedSectionIds.add(s.id);
+        for (const c of s.columns) {
+          for (const b of c.blocks) this.checkedBlockIds.delete(b.id);
+        }
+      }
+    }
+  }
+
+  private _toggleSelectAllSections() {
+    const doc = this.opts.store.doc;
+    if (doc.sections.length > 0 && this.checkedSectionIds.size === doc.sections.length) {
+      this.checkedSectionIds.clear();
+      this.checkedBlockIds.clear();
+    } else {
+      this.checkedSectionIds = new Set(doc.sections.map((s) => s.id));
+      this.checkedBlockIds.clear();
+    }
+    this._syncSectionChecks();
+  }
+
+  /** 同步勾选态：归一化 → 节三态圈 / 块高亮 → 计数 / 全选 / 动作按钮可用性 */
+  private _syncSectionChecks() {
+    this._normalizeCheckedSets();
+    const doc = this.opts.store.doc;
+    const sectionById = new Map(doc.sections.map((s) => [s.id, s]));
+
+    for (const host of this.inner.querySelectorAll<HTMLElement>('.sm-section-host')) {
+      host.classList.remove('is-check-selected', 'is-check-partial');
+      const id = host.getAttribute('data-id') ?? '';
+      const sec = sectionById.get(id);
+      if (!sec) continue;
+      const state = this._sectionCheckState(sec);
+      if (state === 'full') host.classList.add('is-check-selected');
+      else if (state === 'partial') host.classList.add('is-check-partial');
+    }
+    for (const el of this.inner.querySelectorAll('.sm-block.is-check-selected')) {
+      el.classList.remove('is-check-selected');
+    }
+    for (const id of this.checkedBlockIds) {
+      this.inner
+        .querySelector(`.sm-block[data-id="${cssEscape(id)}"]`)
+        ?.classList.add('is-check-selected');
+    }
+
+    const secCount = this.checkedSectionIds.size;
+    const blockCount = this.checkedBlockIds.size;
+    if (this.sectionSelectCountEl) {
+      this.sectionSelectCountEl.textContent =
+        secCount > 0 && blockCount > 0
+          ? this.opts.t('sectionSelect.countMixed', { sections: secCount, blocks: blockCount })
+          : blockCount > 0
+            ? this.opts.t('sectionSelect.countBlocks', { count: blockCount })
+            : this.opts.t('sectionSelect.count', { count: secCount });
+    }
+    if (this.sectionSelectAllBtn) {
+      const all = doc.sections.length > 0 && secCount === doc.sections.length;
+      this.sectionSelectAllBtn.textContent = this.opts.t(
+        all ? 'sectionSelect.unselectAll' : 'sectionSelect.selectAll',
+      );
+      this.sectionSelectAllBtn.disabled = doc.sections.length === 0;
+    }
+    for (const btn of this.sectionSelectActionBtns) {
+      btn.disabled = secCount + blockCount === 0;
+    }
+  }
+
+  private _setSortablesDisabled(disabled: boolean) {
+    for (const s of this.sortableRefs) {
+      try {
+        s.option('disabled', disabled);
+      } catch {
+        /* sortable 已销毁时忽略 */
+      }
+    }
+  }
+
+  private _renderSectionSelectBar() {
+    const t = this.opts.t;
+    this.sectionSelectCountEl = h('span', { class: 'sm-section-select-bar__count' }, [
+      t('sectionSelect.count', { count: 0 }),
+    ]);
+    this.sectionSelectAllBtn = h(
+      'button',
+      {
+        class: 'sm-section-select-bar__btn',
+        type: 'button',
+        onclick: () => this._toggleSelectAllSections(),
+      },
+      [t('sectionSelect.selectAll')],
+    ) as HTMLButtonElement;
+    const copyBtn = h(
+      'button',
+      {
+        class: 'sm-section-select-bar__btn',
+        type: 'button',
+        onclick: () => this._runSectionSelectAction('copy'),
+      },
+      [t('sectionSelect.copyDesign')],
+    ) as HTMLButtonElement;
+    const exportBtn = h(
+      'button',
+      {
+        class: 'sm-section-select-bar__btn',
+        type: 'button',
+        onclick: () => this._runSectionSelectAction('export'),
+      },
+      [t('sectionSelect.exportJson')],
+    ) as HTMLButtonElement;
+    const deleteBtn = h(
+      'button',
+      {
+        class: 'sm-section-select-bar__btn sm-section-select-bar__btn--danger',
+        type: 'button',
+        onclick: () => this._runSectionSelectAction('remove'),
+      },
+      [t('common.delete')],
+    ) as HTMLButtonElement;
+    const doneBtn = h(
+      'button',
+      {
+        class: 'sm-section-select-bar__btn sm-section-select-bar__btn--primary',
+        type: 'button',
+        onclick: () => this.exitSectionSelectMode(),
+      },
+      [t('sectionSelect.done')],
+    ) as HTMLButtonElement;
+    this.sectionSelectActionBtns = [copyBtn, exportBtn, deleteBtn];
+    this.sectionSelectBar = h('div', { class: 'sm-section-select-bar', role: 'toolbar' }, [
+      this.sectionSelectCountEl,
+      this.sectionSelectAllBtn,
+      copyBtn,
+      exportBtn,
+      deleteBtn,
+      doneBtn,
+    ]);
+    this.el.append(this.sectionSelectBar);
+  }
+
+  private _runSectionSelectAction(kind: 'copy' | 'export' | 'remove') {
+    const sectionIds = [...this.checkedSectionIds];
+    const blockIds = [...this.checkedBlockIds];
+    if (!sectionIds.length && !blockIds.length) return;
+    if (kind === 'remove') {
+      const t = this.opts.t;
+      const msg =
+        sectionIds.length > 0 && blockIds.length > 0
+          ? t('sectionSelect.deleteConfirmMixed', {
+              sections: sectionIds.length,
+              blocks: blockIds.length,
+            })
+          : blockIds.length > 0
+            ? t('sectionSelect.deleteConfirmBlocks', { count: blockIds.length })
+            : t('sectionSelect.deleteConfirm', { count: sectionIds.length });
+      if (!window.confirm(msg)) return;
+      this.opts.onSectionSelectRemove?.(sectionIds, blockIds);
+      return;
+    }
+    if (kind === 'copy') this.opts.onSectionSelectCopy?.(sectionIds, blockIds);
+    else this.opts.onSectionSelectExport?.(sectionIds, blockIds);
+  }
+
   /* -------------------------------- 操作 ---------------------------------- */
 
   private _removeSection(id: string) {
@@ -1125,8 +1642,7 @@ export class Canvas {
 /* ---------------------------------- utils --------------------------------- */
 
 function layoutFlexStyle(_layout: SectionLayout, columnGap?: number): string {
-  const gap =
-    columnGap != null && columnGap > 0 ? `gap:${Math.min(columnGap, 200)}px;` : '';
+  const gap = columnGap != null && columnGap > 0 ? `gap:${Math.min(columnGap, 200)}px;` : '';
   return `display:flex;flex-wrap:nowrap;width:100%;${gap}`;
 }
 
@@ -1169,6 +1685,12 @@ function iconTrash() {
     '<path d="M5 6h10M8 6V4h4v2M6 6l1 10h6l1-10" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linejoin="round"/>',
   );
 }
+/** 「复制设计稿」：双层文档图形，与顶栏 iconCopyDoc 保持一致 */
+function iconCopyDesign() {
+  return svg(
+    '<rect x="6.5" y="6.5" width="9" height="11" rx="1.2" stroke="currentColor" stroke-width="1.4" fill="none"/><rect x="4.5" y="3.5" width="9" height="11" rx="1.2" stroke="currentColor" stroke-width="1.4" fill="var(--sm-surface, #fff)"/>',
+  );
+}
 function iconEdit() {
   return svg(
     '<path d="M4 14l8-8 2 2-8 8H4v-2z" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linejoin="round"/>',
@@ -1179,3 +1701,19 @@ function iconCode() {
     '<path d="M7 7l-3 3 3 3M13 7l3 3-3 3" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>',
   );
 }
+/** 勾选（节选择模式气泡）：全选态 */
+function iconCheck() {
+  const el = svg(
+    '<path d="M4.5 10.5l3.4 3.4 7.6-7.8" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>',
+  );
+  el.classList.add('sm-section-check__icon-check');
+  return el;
+}
+/** 减号（节选择模式气泡）：半选态（节内部分块被散选） */
+function iconMinus() {
+  const el = svg(
+    '<path d="M5 10h10" stroke="currentColor" stroke-width="2.2" fill="none" stroke-linecap="round"/>',
+  );
+  el.classList.add('sm-section-check__icon-minus');
+  return el;
+}