mail-editor-pancake 0.0.7 → 0.0.8

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

@@ -2,19 +2,30 @@ import { EditorView, basicSetup } from 'codemirror';
 import { html as cmHtml } from '@codemirror/lang-html';
 import { EditorState } from '@codemirror/state';
 import type { Registry } from '../registry/registry';
-import { findBlockLocation, findSection, type Store, type DocChangedDetail } from '../store/store';
+import {
+  findBlockLocation,
+  findSection,
+  isTwoColumnLayout,
+  setSectionLayout,
+  type Store,
+  type DocChangedDetail,
+} from '../store/store';
 import type {
   Block,
   BlockSchemaField,
   EditorUiOptions,
   EmailDoc,
   Section,
+  SectionLayout,
 } from '../types';
 import { defaultSocialIconBackground } from '../socialDefaults';
+import { bindColorPickerInput } from './ColorPickerPopover';
+import { normalizeAccentHex } from '../utils/accentColor';
 import { clear, h } from '../utils/dom';
 import { metaWidthInputString, parseMetaWidthFromUserInput, parseSectionWidthFromUserInput, sectionWidthInputString } from '../utils/contentWidth';
 import { FONT_WEIGHT_STEP_OPTIONS, normalizeFontWeightStep } from '../utils/fontWeightSteps';
 import type { ImageAssetsHandlers, ImageFieldContext } from './imageAssets';
+import { FocusBreadcrumb } from './FocusBreadcrumb';
 import { openImageGalleryModal } from './ImageGalleryModal';
 
 /** 与社交组 block 中每行元素结构一致（core 不依赖 blocks） */
@@ -48,6 +59,12 @@ function layoutWidthNumeric(raw: string, mode: 'px' | '%'): number {
 export interface RightPanelOptions {
   store: Store;
   registry: Registry;
+  /** 聚焦路径根节点文案（文档级），默认「邮件」 */
+  docRootLabel?: string;
+  /** 点击路径中的 Section 层级 */
+  onFocusSection: (sectionId: string) => void;
+  /** 点击路径中的文档级层级（等同 Esc 从 Section 上浮） */
+  onFocusDocument: () => void;
   /**
    * 可选。配置后，schema 中 `type: 'image'` 的字段会显示「上传 / 图床」按钮并调用对应回调。
    */
@@ -65,6 +82,9 @@ type RightTab = 'props' | 'code';
 export class RightPanel {
   el: HTMLElement;
   private opts: RightPanelOptions;
+  private headEl: HTMLElement;
+  private contentEl: HTMLElement;
+  private focusCrumb: FocusBreadcrumb;
   private currentTab: RightTab = 'props';
   private codeView: EditorView | null = null;
 
@@ -79,6 +99,17 @@ export class RightPanel {
   constructor(opts: RightPanelOptions) {
     this.opts = opts;
     this.el = h('aside', { class: 'sm-panel sm-panel--right' });
+    this.focusCrumb = new FocusBreadcrumb({
+      store: opts.store,
+      registry: opts.registry,
+      docRootLabel: opts.docRootLabel ?? '邮件',
+      onFocusDocument: () => opts.onFocusDocument(),
+      onFocusSection: (id) => opts.onFocusSection(id),
+    });
+    this.headEl = h('div', { class: 'sm-panel__head' }, [this.focusCrumb.el]);
+    this.contentEl = h('div', { class: 'sm-panel__body' });
+    this.el.append(this.headEl, this.contentEl);
+    this._syncHeadVisibility();
     this._render();
     opts.store.subscribe((detail?: DocChangedDetail) => {
       if (detail?.source === 'history') {
@@ -95,10 +126,17 @@ export class RightPanel {
     });
     opts.store.subscribeSelection(() => {
       this.currentTab = 'props';
+      this._syncHeadVisibility();
       this._render();
     });
   }
 
+  /** 文档级（无选中）时不展示面包屑，避免与「邮件设置」标题重复 */
+  private _syncHeadVisibility() {
+    const show = !!this.opts.store.selection;
+    this.headEl.hidden = !show;
+  }
+
   /** 焦点在右栏可编辑控件上时不要整栏重渲染（避免输入/CodeMirror 失焦） */
   private _shouldSkipRenderBecauseFocused(): boolean {
     const ae = document.activeElement as HTMLElement | null;
@@ -144,20 +182,20 @@ export class RightPanel {
 
   private _render() {
     this._destroyCodeView();
-    clear(this.el);
+    clear(this.contentEl);
 
     const sel = this.opts.store.selection;
     const doc = this.opts.store.doc;
 
     if (!sel) {
-      this.el.append(this._renderDocForm(doc));
+      this.contentEl.append(this._renderDocForm(doc));
       return;
     }
 
     if (sel.kind === 'section') {
       const section = findSection(doc, sel.sectionId);
       if (!section) return;
-      this.el.append(this._renderSectionForm(section));
+      this.contentEl.append(this._renderSectionForm(section));
       return;
     }
 
@@ -168,8 +206,8 @@ export class RightPanel {
         this._tabBtn('props', '属性'),
         this._tabBtn('code', '代码'),
       ]);
-      this.el.append(tabs);
-      this.el.append(
+      this.contentEl.append(tabs);
+      this.contentEl.append(
         h('div', { class: 'sm-empty-form' }, ['该组件可能已被删除，请重新选中画布中的块。']),
       );
       return;
@@ -180,11 +218,11 @@ export class RightPanel {
       this._tabBtn('props', '属性'),
       this._tabBtn('code', '代码'),
     ]);
-    this.el.append(tabs);
+    this.contentEl.append(tabs);
 
     if (this.currentTab === 'props') {
       if (loc.block.lockedMjml) {
-        this.el.append(
+        this.contentEl.append(
           h('div', { class: 'sm-empty-form' }, [
             '该组件已被代码模式锁定。',
             h('div', { style: 'margin-top:8px;' }, [
@@ -206,14 +244,14 @@ export class RightPanel {
           ]),
         );
       } else if (def) {
-        this.el.append(this._renderBlockForm(loc.block, def.schema));
+        this.contentEl.append(this._renderBlockForm(loc.block, def.schema));
       } else {
-        this.el.append(
+        this.contentEl.append(
           h('div', { class: 'sm-empty-form' }, [`未注册的组件: ${loc.block.type}`]),
         );
       }
     } else {
-      this.el.append(this._renderBlockCodeView(loc.block));
+      this.contentEl.append(this._renderBlockCodeView(loc.block));
     }
   }
 
@@ -352,6 +390,19 @@ export class RightPanel {
     const a = section.attrs;
     return h('form', { class: 'sm-form', onsubmit: (e: Event) => e.preventDefault() }, [
       h('div', { class: 'sm-panel__title' }, ['Section 设置']),
+      ...(isTwoColumnLayout(section.layout)
+        ? [
+            this._twoColumnRatioField(
+              section.layout,
+              (layout) =>
+                this.opts.store.update((d) => {
+                  const s = findSection(d, section.id);
+                  if (s) setSectionLayout(s, layout);
+                }),
+              `section:${section.id}:layout`,
+            ),
+          ]
+        : []),
       this._colorField(
         '背景色',
         a.backgroundColor ?? '',
@@ -361,6 +412,7 @@ export class RightPanel {
             if (s) s.attrs.backgroundColor = v || undefined;
           }),
         `section:${section.id}:attrs.bg`,
+        '留空=透明',
       ),
       this._layoutWidthField(
         '区域宽度',
@@ -460,14 +512,45 @@ export class RightPanel {
           field.step ?? 1,
           fp,
         );
-      case 'color':
-        return this._colorField(field.label, String(value ?? ''), onChange, fp);
+      case 'color': {
+        const rawColor = (block.props as Record<string, unknown>)[field.key];
+        const stored =
+          rawColor !== undefined && rawColor !== null ? String(rawColor).trim() : '';
+        return this._colorField(
+          field.label,
+          stored,
+          (v) => onChange(v.trim()),
+          fp,
+          field.placeholder ?? '',
+        );
+      }
       case 'select': {
         const isFw = field.key === 'fontWeight' || field.key === 'labelFontWeight';
-        const displayVal = isFw ? normalizeFontWeightStep(String(value ?? '')) : String(value ?? '');
-        const opts = isFw ? FONT_WEIGHT_STEP_OPTIONS : (field.options ?? []);
+        const opts = field.options?.length
+          ? field.options
+          : isFw
+            ? FONT_WEIGHT_STEP_OPTIONS
+            : [];
+        if (isFw && field.inheritGlobal) {
+          const stored =
+            raw !== undefined && raw !== null ? String(raw).trim() : '';
+          return this._fontWeightInheritField(
+            field.label,
+            stored,
+            normalizeFontWeightStep(this.opts.store.doc.styles.fontWeight),
+            (v) => onChange(v),
+            fp,
+            opts,
+            field.help,
+          );
+        }
+        const displayVal = isFw
+          ? normalizeFontWeightStep(String(value ?? ''))
+          : String(value ?? '');
         if (isFw || field.selectVariant === 'segmented') {
-          return this._segmentedSelectField(field.label, displayVal, opts, onChange, fp);
+          const el = this._segmentedSelectField(field.label, displayVal, opts, onChange, fp);
+          if (field.help) el.append(h('div', { class: 'sm-field__help' }, [field.help]));
+          return el;
         }
         return this._selectField(field.label, displayVal, opts, onChange, fp);
       }
@@ -485,30 +568,25 @@ export class RightPanel {
       case 'url':
       case 'text': {
         if (field.key === 'width' && this._preferSliderControls()) {
-          const el = this._layoutWidthField(
+          return this._layoutWidthField(
             field.label,
             String(value ?? ''),
             (v) => onChange(v),
             fp,
             field.help,
           );
-          if (field.placeholder && !field.help) {
-            el.append(h('div', { class: 'sm-field__help' }, [field.placeholder]));
-          }
-          return el;
         }
-        if (field.key === 'fontSize' && this._preferSliderControls()) {
-          const el = this._fontSizeSliderField(
+        if (field.key === 'fontSize' && field.inheritGlobal) {
+          const rawFs =
+            raw !== undefined && raw !== null ? String(raw).trim() : '';
+          return this._fontSizeSliderField(
             field.label,
-            String(value ?? ''),
-            (v) => onChange(v),
+            rawFs,
+            (v) => onChange(v.trim()),
             fp,
             field.help,
+            this.opts.store.doc.styles.fontSize,
           );
-          if (field.placeholder && !field.help) {
-            el.append(h('div', { class: 'sm-field__help' }, [field.placeholder]));
-          }
-          return el;
         }
         const row = this._textField(
           field.label,
@@ -677,16 +755,18 @@ export class RightPanel {
           ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:row:${i}:icon` } : {}),
           oninput: (e: Event) => syncItem(i, { iconSrc: (e.target as HTMLInputElement).value }),
         }),
-        h('input', {
-          class: 'sm-social-link-list__color sm-social-link-list__color--compact',
-          type: 'color',
-          title: '图标背景色',
-          value: bgDisplay.length >= 4 ? bgDisplay : bgResolved,
-          ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:row:${i}:bg` } : {}),
-          oninput: (e: Event) =>
-            syncItem(i, { backgroundColor: (e.target as HTMLInputElement).value }),
-        }),
       );
+      const bgPick = h('input', {
+        class: 'sm-social-link-list__color sm-social-link-list__color--compact',
+        type: 'color',
+        value: bgDisplay.length >= 4 ? bgDisplay : bgResolved,
+        ...(focusPrefix ? { 'data-sm-focus': `${focusPrefix}:row:${i}:bg` } : {}),
+      }) as HTMLInputElement;
+      bindColorPickerInput(bgPick, {
+        liveCommit: true,
+        onCommit: (hex) => syncItem(i, { backgroundColor: hex }),
+      });
+      extras.append(bgPick);
       rowWrap.append(extras);
 
       listEl.append(rowWrap);
@@ -1027,27 +1107,107 @@ export class RightPanel {
     value: string,
     onChange: (v: string) => void,
     focusPrefix?: string,
+    placeholder = '#ffffff',
   ) {
     const pickToken = focusPrefix ? `${focusPrefix}:pick` : undefined;
     const textToken = focusPrefix ? `${focusPrefix}:text` : undefined;
+    const pick = h('input', {
+      type: 'color',
+      ...(pickToken ? { 'data-sm-focus': pickToken } : {}),
+    }) as HTMLInputElement;
+    const text = h('input', {
+      class: 'sm-input',
+      type: 'text',
+      placeholder,
+      ...(textToken ? { 'data-sm-focus': textToken } : {}),
+    }) as HTMLInputElement;
+
+    let lastValid = value.trim();
+
+    const applyPickInherit = () => {
+      pick.value = '#808080';
+      pick.classList.add('sm-color-row__pick--inherit');
+      pick.title = placeholder || '未设置';
+    };
+
+    const applyStored = (stored: string) => {
+      const trimmed = stored.trim();
+      text.value = trimmed;
+      const hex = normalizeAccentHex(trimmed);
+      if (hex) {
+        pick.value = hex;
+        pick.classList.remove('sm-color-row__pick--inherit');
+        pick.title = '';
+      } else {
+        applyPickInherit();
+      }
+    };
+
+    applyStored(value);
+
+    const previewPick = (hex: string) => {
+      text.value = hex;
+      pick.value = hex;
+      pick.classList.remove('sm-color-row__pick--inherit');
+      pick.title = '';
+      lastValid = hex;
+    };
+
+    const commitPick = (hex: string) => {
+      previewPick(hex);
+      onChange(hex);
+    };
+
+    bindColorPickerInput(pick, {
+      getValue: () => text.value.trim() || pick.value,
+      placeholder,
+      allowClear: true,
+      onPreview: previewPick,
+      onCommit: commitPick,
+      onClear: () => {
+        applyStored('');
+        lastValid = '';
+        onChange('');
+      },
+    });
+
+    text.addEventListener('input', () => {
+      const raw = text.value;
+      const hex = normalizeAccentHex(raw);
+      if (hex) {
+        pick.value = hex;
+        pick.classList.remove('sm-color-row__pick--inherit');
+        pick.title = '';
+        lastValid = hex;
+      } else if (!raw.trim()) {
+        applyPickInherit();
+        lastValid = '';
+      }
+      onChange(raw);
+    });
+
+    text.addEventListener('blur', () => {
+      const raw = text.value.trim();
+      if (!raw) {
+        applyStored('');
+        lastValid = '';
+        onChange('');
+        return;
+      }
+      const hex = normalizeAccentHex(raw);
+      if (hex) {
+        applyStored(hex);
+        lastValid = hex;
+        if (hex !== raw) onChange(hex);
+        return;
+      }
+      applyStored(lastValid);
+      onChange(lastValid);
+    });
+
     return h('div', { class: 'sm-field' }, [
       h('label', { class: 'sm-field__label' }, [label]),
-      h('div', { class: 'sm-color-row' }, [
-        h('input', {
-          type: 'color',
-          value: value || '#ffffff',
-          ...(pickToken ? { 'data-sm-focus': pickToken } : {}),
-          oninput: (e: Event) => onChange((e.target as HTMLInputElement).value),
-        }),
-        h('input', {
-          class: 'sm-input',
-          type: 'text',
-          value,
-          placeholder: '#ffffff',
-          ...(textToken ? { 'data-sm-focus': textToken } : {}),
-          oninput: (e: Event) => onChange((e.target as HTMLInputElement).value),
-        }),
-      ]),
+      h('div', { class: 'sm-color-row' }, [pick, text]),
     ]);
   }
   private _selectField(
@@ -1082,9 +1242,10 @@ export class RightPanel {
     options: { label: string; value: string }[],
     onChange: (v: string) => void,
     focusToken?: string,
+    wrap = false,
   ) {
     const group = h('div', {
-      class: 'sm-segmented sm-segmented--fill',
+      class: `sm-segmented sm-segmented--fill${wrap ? ' sm-segmented--wrap' : ''}`,
       role: 'group',
       'aria-label': label,
     });
@@ -1288,6 +1449,188 @@ export class RightPanel {
     ]);
   }
 
+  /** 「继承全局」开关行：开=跟随邮件全局，关=块级固定值 */
+  private _globalInheritSwitch(
+    inheritOn: boolean,
+    globalDisplay: string,
+    onToggle: (inherit: boolean) => void,
+    focusToken?: string,
+  ): { el: HTMLElement; setInherit: (on: boolean, display?: string) => void } {
+    const input = h('input', {
+      type: 'checkbox',
+      class: 'sm-inherit-switch__input',
+      role: 'switch',
+      ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
+      ...(inheritOn ? { checked: true } : {}),
+    }) as HTMLInputElement;
+    const valueEl = h('span', {
+      class: 'sm-inherit-switch__value',
+      hidden: !inheritOn,
+    }, [globalDisplay]);
+    const el = h('div', { class: 'sm-inherit-switch' }, [
+      h('label', { class: 'sm-inherit-switch__label' }, [
+        input,
+        h('span', { class: 'sm-inherit-switch__text' }, ['继承全局']),
+      ]),
+      valueEl,
+    ]);
+    input.addEventListener('change', () => onToggle(input.checked));
+    const setInherit = (on: boolean, display?: string) => {
+      input.checked = on;
+      if (display !== undefined) valueEl.textContent = display;
+      valueEl.hidden = !on;
+    };
+    return { el, setInherit };
+  }
+
+  private _fontWeightInheritField(
+    label: string,
+    stored: string,
+    globalWeight: string,
+    onChange: (v: string) => void,
+    focusToken: string,
+    options: { label: string; value: string }[],
+    help?: string,
+  ): HTMLElement {
+    let inheriting = !stored;
+    const group = h('div', {
+      class: 'sm-segmented sm-segmented--fill',
+      role: 'group',
+      'aria-label': label,
+    });
+
+    const syncGroup = () => {
+      group.classList.toggle('sm-segmented--disabled', inheriting);
+      const display = inheriting ? '' : normalizeFontWeightStep(stored || globalWeight);
+      clear(group);
+      for (const o of options) {
+        const active = !inheriting && o.value === display;
+        group.append(
+          h(
+            'button',
+            {
+              type: 'button',
+              class: `sm-segmented__item${active ? ' sm-segmented__item--active' : ''}`,
+              'aria-pressed': active ? 'true' : 'false',
+              title: o.label,
+              ...(focusToken ? { 'data-sm-focus': `${focusToken}:${o.value}` } : {}),
+              onclick: () => {
+                inheriting = false;
+                stored = o.value;
+                inheritSwitch.setInherit(false);
+                syncGroup();
+                onChange(o.value);
+              },
+            },
+            [o.label],
+          ),
+        );
+      }
+    };
+
+    const inheritSwitch = this._globalInheritSwitch(
+      inheriting,
+      globalWeight,
+      (on) => {
+        if (on) {
+          inheriting = true;
+          stored = '';
+          inheritSwitch.setInherit(true, globalWeight);
+          syncGroup();
+          onChange('');
+          return;
+        }
+        inheriting = false;
+        stored = globalWeight;
+        inheritSwitch.setInherit(false);
+        syncGroup();
+        onChange(globalWeight);
+      },
+      `${focusToken}:inherit`,
+    );
+
+    syncGroup();
+
+    const wrap = h('div', { class: 'sm-field' }, [
+      h('label', { class: 'sm-field__label' }, [label]),
+      inheritSwitch.el,
+      group,
+    ]);
+    if (help) wrap.append(h('div', { class: 'sm-field__help' }, [help]));
+    return wrap;
+  }
+
+  private _fontSizeInheritTextField(
+    label: string,
+    stored: string,
+    onChange: (v: string) => void,
+    focusToken: string,
+    globalFontSize: string,
+    help?: string,
+  ): HTMLElement {
+    const globalPx = this._snapFontSizeToPx(globalFontSize);
+    let inheriting = !stored.trim();
+    const input = h('input', {
+      class: 'sm-input',
+      type: 'text',
+      ...(focusToken ? { 'data-sm-focus': focusToken } : {}),
+    }) as HTMLInputElement;
+
+    const syncInput = () => {
+      input.disabled = inheriting;
+      input.value = inheriting ? '' : stored;
+      input.placeholder = inheriting ? '' : '如 16px';
+      input.classList.toggle('sm-input--inherit-disabled', inheriting);
+    };
+
+    const inheritSwitch = this._globalInheritSwitch(
+      inheriting,
+      `${globalPx}px`,
+      (on) => {
+        if (on) {
+          inheriting = true;
+          stored = '';
+          inheritSwitch.setInherit(true, `${globalPx}px`);
+          syncInput();
+          onChange('');
+          return;
+        }
+        inheriting = false;
+        stored = `${globalPx}px`;
+        inheritSwitch.setInherit(false);
+        syncInput();
+        onChange(stored);
+      },
+      `${focusToken}:inherit`,
+    );
+
+    syncInput();
+
+    input.addEventListener('input', () => {
+      if (inheriting) return;
+      stored = input.value;
+      onChange(stored);
+    });
+
+    input.addEventListener('blur', () => {
+      if (inheriting) return;
+      const t = input.value.trim();
+      if (!t) {
+        stored = `${globalPx}px`;
+        input.value = stored;
+        onChange(stored);
+      }
+    });
+
+    const wrap = h('div', { class: 'sm-field' }, [
+      h('label', { class: 'sm-field__label' }, [label]),
+      inheritSwitch.el,
+      input,
+    ]);
+    if (help) wrap.append(h('div', { class: 'sm-field__help' }, [help]));
+    return wrap;
+  }
+
   private _snapFontSizeToPx(value: string): number {
     const t = (value ?? '').trim();
     const m = t.match(/^(\d+(\.\d+)?)/);
@@ -1301,63 +1644,118 @@ export class RightPanel {
     onChange: (v: string) => void,
     focusToken: string,
     help?: string,
+    globalFontSize?: string,
   ) {
+    const inheritGlobal = globalFontSize !== undefined;
     if (!this._preferSliderControls()) {
+      if (inheritGlobal) {
+        return this._fontSizeInheritTextField(
+          label,
+          value,
+          onChange,
+          focusToken,
+          globalFontSize,
+          help,
+        );
+      }
       return this._textField(label, value ?? '', onChange, '', focusToken);
     }
+
     const min = 10;
     const max = 48;
     const step = 1;
     const snap = (n: number) => Math.min(max, Math.max(min, Math.round(n)));
-    const px = snap(this._snapFontSizeToPx(value ?? ''));
+    const globalPx = snap(this._snapFontSizeToPx(globalFontSize ?? value ?? '16px'));
+    let stored = value.trim();
+    let inheriting = inheritGlobal && !stored;
 
+    const sliderRow = h('div', { class: 'sm-field__slider-row' });
     const range = h('input', {
       type: 'range',
       min,
       max,
       step,
-      value: String(px),
     }) as HTMLInputElement;
-
     const num = h('input', {
       class: 'sm-input',
       type: 'number',
       min,
       max,
       step,
-      value: String(px),
       'data-sm-focus': focusToken,
     }) as HTMLInputElement;
+    sliderRow.append(range, num);
+
+    const syncSlider = () => {
+      sliderRow.classList.toggle('sm-field__slider-row--inherit', inheriting);
+      num.disabled = inheriting;
+      if (inheriting) {
+        range.value = String(globalPx);
+        num.value = '';
+      } else {
+        const s = snap(this._snapFontSizeToPx(stored || `${globalPx}px`));
+        range.value = String(s);
+        num.value = String(s);
+      }
+    };
+
+    let inheritSwitch: ReturnType<RightPanel['_globalInheritSwitch']> | null = null;
+    if (inheritGlobal) {
+      inheritSwitch = this._globalInheritSwitch(
+        inheriting,
+        `${globalPx}px`,
+        (on) => {
+          if (on) {
+            inheriting = true;
+            stored = '';
+            inheritSwitch!.setInherit(true, `${globalPx}px`);
+            syncSlider();
+            onChange('');
+            return;
+          }
+          inheriting = false;
+          stored = `${globalPx}px`;
+          inheritSwitch!.setInherit(false);
+          syncSlider();
+          onChange(stored);
+        },
+        `${focusToken}:inherit`,
+      );
+    }
+
+    syncSlider();
+
+    const leaveInherit = () => {
+      if (!inheriting) return;
+      inheriting = false;
+      inheritSwitch?.setInherit(false);
+      syncSlider();
+    };
 
     range.addEventListener('input', () => {
+      leaveInherit();
       const s = snap(Number(range.value));
       num.value = String(s);
-      onChange(`${s}px`);
+      stored = `${s}px`;
+      onChange(stored);
     });
 
     num.addEventListener('input', () => {
-      const t = num.value.trim();
-      if (t === '') return;
-      const rawN = Number(t);
+      if (inheriting) return;
+      const rawN = Number(num.value);
       if (Number.isNaN(rawN)) return;
       range.value = String(snap(rawN));
     });
 
     num.addEventListener('blur', () => {
+      if (inheriting) return;
       const t = num.value.trim();
       const fb = snap(Number(range.value));
-      if (t === '') {
-        const r = fb;
-        num.value = String(r);
-        range.value = String(r);
-        onChange(`${r}px`);
-        return;
-      }
-      const rawN = Number(t);
-      const s = snap(Number.isNaN(rawN) ? fb : rawN);
+      const s = snap(t === '' || Number.isNaN(Number(t)) ? fb : Number(t));
+      stored = `${s}px`;
       num.value = String(s);
       range.value = String(s);
-      onChange(`${s}px`);
+      onChange(stored);
     });
 
     num.addEventListener('keydown', (e) => {
@@ -1366,7 +1764,8 @@ export class RightPanel {
 
     const wrap = h('div', { class: 'sm-field' }, [
       h('label', { class: 'sm-field__label' }, [label]),
-      h('div', { class: 'sm-field__slider-row' }, [range, num]),
+      ...(inheritSwitch ? [inheritSwitch.el] : []),
+      sliderRow,
     ]);
     if (help) wrap.append(h('div', { class: 'sm-field__help' }, [help]));
     return wrap;
@@ -1525,6 +1924,24 @@ export class RightPanel {
     return this._segmentedSelectField('字重', cur, FONT_WEIGHT_STEP_OPTIONS, onChange, focusToken);
   }
 
+  private _twoColumnRatioField(
+    layout: SectionLayout,
+    onChange: (layout: SectionLayout) => void,
+    focusToken: string,
+  ) {
+    return this._segmentedSelectField(
+      '列比例',
+      layout,
+      [
+        { label: '1:1', value: '1-1' },
+        { label: '1:2', value: '1-2' },
+        { label: '2:1', value: '2-1' },
+      ],
+      (v) => onChange(v as SectionLayout),
+      focusToken,
+    );
+  }
+
   private _renderBlockCodeView(block: Block): HTMLElement {
     const def = this.opts.registry.get(block.type);
     const initial =