7-16 · Dialog：模态全解

// packages/components/component-manifest.json L496-501
{
  "name": "dialog",
  "docsGroup": "feedback",
  "docsText": "Dialog 对话框",
  "installExports": ["XyDialog"],
  "installChecks": [{ "kind": "component", "name": "xy-dialog" }],
  "styleImports": ["dialog"]
}

// packages/components/dialog/src/dialog.ts L3-16
export type DialogCloseReason = "close" | "backdrop" | "escape" | "programmatic";
export type DialogDoneFn = (cancel?: boolean) => void;
export type DialogBeforeCloseFn = (
  done: DialogDoneFn,
  reason?: DialogCloseReason
) => void | Promise<void>;
export type DialogTransition = string | TransitionProps;
export type DialogModelValueChangeHandler = (value: boolean) => void;
export type DialogFullscreenChangeHandler = (value: boolean) => void;
export type DialogResizeHandler = (
  event: MouseEvent,
  width: number,
  height: number
) => void;

// packages/components/dialog/src/dialog.ts L32-74
export interface DialogProps {
  modelValue?: boolean;
  title?: string;
  appendToBody?: boolean;
  appendTo?: string | HTMLElement;
  beforeClose?: DialogBeforeCloseFn;
  destroyOnClose?: boolean;
  closeOnClickModal?: boolean;
  closeOnPressEscape?: boolean;
  lockScroll?: boolean;
  modal?: boolean;
  modalPenetrable?: boolean;
  openDelay?: number;
  closeDelay?: number;
  top?: string;
  modalClass?: string;
  panelClass?: string;
  width?: string | number;
  zIndex?: number;
  center?: boolean;
  alignCenter?: boolean;
  closeIcon?: string | Component;
  draggable?: boolean;
  overflow?: boolean;
  fullscreen?: boolean;
  resizable?: boolean;
  minWidth?: string | number;
  maxWidth?: string | number;
  minHeight?: string | number;
  maxHeight?: string | number;
  maximizable?: boolean;
  stickyHeader?: boolean;
  stickyFooter?: boolean;
  bodyMaxHeight?: string | number;
  loading?: boolean;
  loadingText?: string;
  headerClass?: string;
  bodyClass?: string;
  footerClass?: string;
  showClose?: boolean;
  headerAriaLevel?: string;
  transition?: DialogTransition;
}

<!-- packages/components/dialog/src/dialog.vue L149-234 -->
<template>
  <teleport :to="overlay.appendTo.value" :disabled="overlay.teleportDisabled.value">
    <transition v-bind="transitionConfig">
      <div
        v-if="overlay.rendered.value"
        v-show="overlay.visible.value"
        ref="overlayRef"
        :class="[
          ns.base.value,
          ns.is('closing', closing),
          ns.is('align-center', resolvedAlignCenter),
          ns.is('fullscreen', resolvedFullscreen),
          isPenetrable ? ns.is('penetrable', true) : ''
        ]"
        :style="rootStyle"
      >
        <div
          v-if="overlay.showModal.value"
          :class="[`${ns.base.value}__overlay`, props.modalClass]"
          @click="handleOverlayClick"
          @mousedown="handleOverlayMouseDown"
          @mouseup="handleOverlayMouseUp"
        />
        <DialogContent
          ref="dialogContentRef"
          v-bind="$attrs"
          :title="props.title"
          :title-id="titleId"
          :body-id="bodyId"
          :aria-label="ariaLabel"
          :aria-labelledby="ariaLabelledby"
          :aria-level="props.headerAriaLevel"
          :center="props.center"
          :align-center="resolvedAlignCenter"
          :close-icon="props.closeIcon"
          :draggable="resolvedDraggable"
          :overflow="resolvedOverflow"
          :fullscreen="resolvedFullscreen"
          :maximizable="resolvedMaximizable"
          :sticky-header="resolvedStickyHeader"
          :sticky-footer="resolvedStickyFooter"
          :body-max-height="props.bodyMaxHeight"
          :loading="props.loading"
          :loading-text="resolvedLoading.text"
          :loading-spinner="resolvedLoading.spinner"
          :loading-svg="resolvedLoading.svg"
          :loading-svg-view-box="resolvedLoading.svgViewBox"
          :loading-background="resolvedLoading.background"
          :resizable="resolvedResizable"
          :is-resizing="isResizing"
          :header-class="props.headerClass"
          :body-class="props.bodyClass"
          :footer-class="props.footerClass"
          :panel-class="props.panelClass"
          :show-close="props.showClose"
          :style="panelStyle"
          :modal="overlay.showModal.value"
          :handle-focus-trap-keydown="focusTrap.handleKeydown"
          :handle-resize-start="handleResizeStart"
          @close="handleClose"
          @toggle-fullscreen="handleToggleFullscreen"
        >
          <template #header>
            <slot
              v-if="$slots.header"
              name="header"
              :close="handleClose"
              :title-id="titleId"
              :title-class="`${ns.base.value}__title`"
            />
            <slot
              v-else-if="$slots.title"
              name="title"
              :title-id="titleId"
              :title-class="`${ns.base.value}__title`"
            />
          </template>
          <slot />
          <template v-if="$slots.footer" #footer>
            <slot name="footer" />
          </template>
        </DialogContent>
      </div>
    </transition>
  </teleport>
</template>

// packages/components/dialog/src/dialog.vue L137-146
function resetPosition() {
  dialogContentRef.value?.resetPosition();
}

defineExpose({
  visible: overlay.visible,
  dialogContentRef,
  resetPosition,
  handleClose
});

// packages/components/dialog/src/use-dialog.ts L98-137
const { dialog: globalDialogConfig } = useConfig<DialogGlobalConfig>();
const titleId = `xy-dialog-title-${Math.random().toString(36).slice(2, 10)}`;
const bodyId = `xy-dialog-body-${Math.random().toString(36).slice(2, 10)}`;
const closing = ref(false);
const downOnOverlay = ref(false);
const localFullscreen = ref(false);
let isClosingByBeforeClose = false;

const dialogElement = computed(() => options.dialogContentRef.value?.dialogRef ?? null);
const mergedConfig = computed<DialogGlobalConfig>(() => globalDialogConfig.value ?? {});
const resolvedCloseOnClickModal = computed(
  () => props.closeOnClickModal ?? mergedConfig.value.closeOnClickModal ?? true
);
const resolvedCloseOnPressEscape = computed(
  () => props.closeOnPressEscape ?? mergedConfig.value.closeOnPressEscape ?? true
);
const resolvedLockScroll = computed(() => props.lockScroll ?? mergedConfig.value.lockScroll ?? true);
const resolvedAlignCenter = computed(
  () => props.alignCenter ?? mergedConfig.value.alignCenter ?? false
);
const resolvedFullscreen = computed(() => props.fullscreen ?? localFullscreen.value);
const resolvedDraggable = computed(
  () => (props.draggable ?? mergedConfig.value.draggable ?? false) && !resolvedFullscreen.value
);
const resolvedOverflow = computed(() => props.overflow ?? mergedConfig.value.overflow ?? false);
const resolvedResizable = computed(
  () => (props.resizable ?? mergedConfig.value.resizable ?? false) && !resolvedFullscreen.value
);
const resolvedMaximizable = computed(
  () => props.maximizable ?? mergedConfig.value.maximizable ?? false
);
const resolvedStickyHeader = computed(
  () => props.stickyHeader ?? mergedConfig.value.stickyHeader ?? false
);
const resolvedStickyFooter = computed(
  () => props.stickyFooter ?? mergedConfig.value.stickyFooter ?? false
);
const resolvedTransition = computed(
  () => props.transition ?? mergedConfig.value.transition
);

// packages/components/dialog/src/use-dialog.ts L169-208
const overlay = useOverlayDialog(
  {
    modelValue: () => props.modelValue,
    destroyOnClose: () => props.destroyOnClose,
    lockScroll: resolvedLockScroll,
    openDelay: () => props.openDelay,
    closeDelay: () => props.closeDelay,
    appendToBody: () => props.appendToBody,
    appendTo: () => props.appendTo,
    modal: () => props.modal,
    zIndex: () => props.zIndex
  },
  {
    destroyStrategy: "wrapper",
    onOpen: () => {
      closing.value = false;
      options.emitOpen();
      void nextTick(() => {
        options.overlayRef.value?.scrollTo?.({
          top: 0,
          left: 0
        });
        dialogElement.value?.scrollTo?.({
          top: 0,
          left: 0
        });
      });
    },
    onClose: () => {
      closing.value = true;
      options.emitClose();
    },
    onOpened: () => {
      options.emitOpened();
    },
    onClosed: () => {
      options.emitClosed();
      options.emitUpdateModelValue(false);
    }
  }
);

// packages/xiaoye-primitives/src/composables/use-overlay-dialog.ts L104-159
  const showModal = computed(() => {
    return Boolean(toValue(options.modal) && visible.value);
  });

  const zIndex = computed(() => {
    const base = toValue(options.zIndex);
    if (base != null) return base;
    return overlayStack.zIndex.value;
  });

  watch(
    visible,
    (value) => {
      if (value) {
        overlayStack.openLayer();
        return;
      }

      overlayStack.closeLayer();
    },
    { immediate: true }
  );

  const shouldLockBodyScroll = computed(() => {
    return Boolean(toValue(options.lockScroll)) && visible.value;
  });

  // 配对标记：只有本实例真正加过锁才允许解锁。
  // unlockBodyScroll 是无条件递减，若 watch immediate 在初始 false 时也调 unlock，
  // 混合配置（A lockScroll=true 开着、B lockScroll=false 挂载）会把 A 的锁减掉。
  let bodyScrollLocked = false;

  watch(
    shouldLockBodyScroll,
    (locked) => {
      if (locked && !bodyScrollLocked) {
        lockBodyScroll();
        bodyScrollLocked = true;
        return;
      }
      if (!locked && bodyScrollLocked) {
        unlockBodyScroll();
        bodyScrollLocked = false;
      }
    },
    { immediate: true }
  );

  // 兜底：组件卸载时 watcher 停止但不再触发回调，
  // 打开状态下直接卸载会导致计数泄漏，这里只偿还本实例的锁。
  onBeforeUnmount(() => {
    if (bodyScrollLocked) {
      unlockBodyScroll();
      bodyScrollLocked = false;
    }
  });

// packages/components/dialog/src/use-dialog.ts L241-269
  const rootStyle = computed(() => ({
    zIndex: `${overlay.zIndex.value}`,
    "--xy-dialog-margin-top": props.top ?? "15vh"
  }));

  const isPenetrable = computed(
    () => Boolean(props.modalPenetrable) && !overlay.showModal.value && !resolvedFullscreen.value
  );
  const hasLabelledTitle = computed(() => options.hasLabelledTitle());
  const ariaLabelledby = computed(() => hasLabelledTitle.value ? titleId : undefined);
  const ariaLabel = computed(() => hasLabelledTitle.value ? undefined : props.title || undefined);
  const transitionConfig = computed(() =>
    mergeTransitionHooks(resolvedTransition.value, "xy-dialog-fade", {
      onAfterEnter: overlay.handleAfterEnter,
      onAfterLeave: overlay.handleAfterLeave
    })
  );

  const focusTrap = useFocusTrap(dialogElement, {
    active: () => overlay.visible.value,
    autoFocus: "first",
    restoreFocus: true,
    onAutoFocus: () => {
      options.emitOpenAutoFocus();
    },
    onRestoreFocus: () => {
      options.emitCloseAutoFocus();
    }
  });

// packages/components/dialog/src/use-dialog.ts L325-334
  useDismissibleLayer({
    enabled: () => overlay.visible.value,
    refs: [dialogElement],
    closeOnEscape: resolvedCloseOnPressEscape,
    closeOnOutside: false,
    isTopMost: () => overlay.isTopMost(),
    onDismiss: () => {
      handleClose("escape");
    }
  });

// packages/components/dialog/src/use-dialog.ts L336-357
  function handleOverlayMouseDown(event: MouseEvent) {
    downOnOverlay.value = overlay.showModal.value && event.target === event.currentTarget;
  }

  function handleOverlayMouseUp(event: MouseEvent) {
    downOnOverlay.value = downOnOverlay.value && event.target === event.currentTarget;
  }

  function handleOverlayClick(event: MouseEvent) {
    const canClose =
      overlay.showModal.value &&
      resolvedCloseOnClickModal.value &&
      overlay.isTopMost() &&
      downOnOverlay.value &&
      event.target === event.currentTarget;

    downOnOverlay.value = false;

    if (canClose) {
      handleClose("backdrop");
    }
  }

// packages/components/dialog/src/use-dialog.ts L271-323
  function setFullscreen(nextValue: boolean) {
    if (props.fullscreen == null) {
      localFullscreen.value = nextValue;
    }

    options.emitUpdateFullscreen(nextValue);
  }

  function toggleFullscreen() {
    setFullscreen(!resolvedFullscreen.value);
  }

  function finishClose(cancel?: boolean) {
    if (cancel) {
      return;
    }

    overlay.close();
  }

  function handleClose(reason: DialogCloseReason = "programmatic") {
    if (isClosingByBeforeClose || closing.value) {
      return;
    }

    if (!props.beforeClose) {
      finishClose();
      return;
    }

    isClosingByBeforeClose = true;
    let doneCalled = false;
    const done = (cancel?: boolean) => {
      if (doneCalled) {
        return;
      }

      doneCalled = true;
      isClosingByBeforeClose = false;
      finishClose(cancel);
    };

    try {
      const result = props.beforeClose(done, reason);
      if (result && typeof (result as Promise<void>).catch === "function") {
        void (result as Promise<void>).catch(() => {
          isClosingByBeforeClose = false;
        });
      }
    } catch {
      isClosingByBeforeClose = false;
    }
  }

// packages/components/dialog/src/service.ts L17-47
let serviceHost: HTMLDivElement | null = null;

function ensureDialogServiceMounted() {
  if (typeof document === "undefined") {
    warnOnce("XyDialogService", "XyDialogService 仅支持在浏览器环境中使用。");
    return false;
  }

  if (serviceHost && serviceHost.isConnected) {
    return true;
  }

  serviceHost = document.createElement("div");
  serviceHost.className = "xy-dialog-service-host";
  document.body.appendChild(serviceHost);
  createApp(DialogServiceContainer).mount(serviceHost);
  return true;
}

function createNoopHandle(): DialogServiceHandle {
  const id = `xy-dialog-service-noop-${Date.now()}`;

  return {
    id,
    close() {},
    update() {},
    result: Promise.resolve({
      action: "programmatic"
    })
  };
}

// packages/components/dialog/src/service.ts L49-99
export const XyDialogService = {
  open(options: DialogServiceOpenOptions): DialogServiceHandle {
    if (!ensureDialogServiceMounted()) {
      return createNoopHandle();
    }

    const entry = enqueueDialogServiceEntry("open", options);
    return createDialogServiceHandle(entry.id, entry.result);
  },
  alert(options: DialogAlertOptions) {
    if (!ensureDialogServiceMounted()) {
      return Promise.resolve();
    }

    const entry = enqueueDialogServiceEntry("alert", {
      ...options,
      showCancelButton: false
    });

    return createDialogServiceHandle(entry.id, entry.result).result.then(() => undefined);
  },
  confirm(options: DialogConfirmOptions) {
    if (!ensureDialogServiceMounted()) {
      return Promise.resolve(false);
    }

    const entry = enqueueDialogServiceEntry("confirm", options);

    return createDialogServiceHandle(entry.id, entry.result).result.then(
      (result) => result.action === "confirm"
    );
  },
  prompt(options: DialogPromptOptions) {
    if (!ensureDialogServiceMounted()) {
      return Promise.resolve({
        confirmed: false,
        value: options.inputValue ?? ""
      });
    }

    const entry = enqueueDialogServiceEntry("prompt", options);

    return createDialogServiceHandle(entry.id, entry.result).result.then((result) => ({
      confirmed: result.action === "confirm",
      value: result.value ?? ""
    }));
  },
  closeAll() {
    closeAllDialogServiceEntries();
  }
};

// packages/components/dialog/src/service-state.ts L50-77
export interface DialogServiceState {
  current: DialogServiceEntry | null;
  queue: DialogServiceEntry[];
}

export const dialogServiceState: DialogServiceState = reactive({
  current: null,
  queue: []
});

let dialogServiceSeed = 0;

function nextDialogServiceId() {
  dialogServiceSeed += 1;
  return `xy-dialog-service-${dialogServiceSeed}`;
}

function createResultPromise() {
  let resolveResult = (_result: DialogServiceResult) => {};
  const result = new Promise<DialogServiceResult>((resolve) => {
    resolveResult = resolve;
  });

  return {
    result,
    resolveResult
  };
}

// packages/components/dialog/src/service-state.ts L153-208
export function enqueueDialogServiceEntry(
  mode: DialogServiceMode,
  options: DialogServiceOpenOptions | DialogAlertOptions | DialogConfirmOptions | DialogPromptOptions
) {
  const entry = normalizeEntry(mode, options);

  if (dialogServiceState.current) {
    dialogServiceState.queue.push(entry);
  } else {
    dialogServiceState.current = entry;
  }

  return entry;
}

export function requestCloseDialogServiceEntry(id: string, action: DialogServiceAction) {
  const entry = getEntryById(id);

  if (!entry) {
    return;
  }

  entry.pendingAction = action;

  if (dialogServiceState.current?.id === id) {
    dialogServiceState.current.visible = false;
    return;
  }

  resolveEntry(entry, action);
  dialogServiceState.queue.splice(
    dialogServiceState.queue.findIndex((item) => item.id === id),
    1
  );
}

export function finishDialogServiceEntry(id: string) {
  const entry = getEntryById(id);

  if (!entry) {
    return;
  }

  resolveEntry(entry, entry.pendingAction);

  if (dialogServiceState.current?.id === id) {
    shiftQueue();
    return;
  }

  const index = dialogServiceState.queue.findIndex((item) => item.id === id);

  if (index !== -1) {
    dialogServiceState.queue.splice(index, 1);
  }
}

// packages/components/dialog/src/service-state.ts L256-277
  if ("footerRender" in patch) {
    entry.footerRender = patch.footerRender;
  }

  if ("message" in patch) {
    entry.message = patch.message;
    entry.render = undefined;
    entry.component = undefined;
    entry.componentProps = undefined;
  } else if ("render" in patch) {
    entry.render = patch.render;
    entry.message = undefined;
    entry.component = undefined;
    entry.componentProps = undefined;
  } else if ("component" in patch) {
    entry.component = patch.component;
    entry.componentProps = patch.componentProps ?? entry.componentProps;
    entry.message = undefined;
    entry.render = undefined;
  } else if ("componentProps" in patch && patch.componentProps !== undefined) {
    entry.componentProps = patch.componentProps;
  }

// packages/components/dialog/src/dialog-service-container.vue L43-63
const currentEntry = computed(() => dialogServiceState.current);
const globalDialogConfig = computed(() => getGlobalDialogConfig().value);
const globalLoadingConfig = computed(() => getGlobalLoadingConfig().value);
const globalMessageConfig = computed(() => getGlobalMessageConfig().value);
const globalNotificationConfig = computed(() => getGlobalNotificationConfig().value);
const dialogProps = computed(() => ({
  ...(globalDialogConfig.value ?? {}),
  ...(currentEntry.value?.dialogProps ?? {})
}));
const lastRenderedEntryId = ref<string | null>(null);

provide(configProviderKey, {
  namespace: computed(() => DEFAULT_NAMESPACE),
  locale: computed(() => ({})),
  zIndex: computed(() => DEFAULT_Z_INDEX),
  size: computed(() => DEFAULT_SIZE),
  dialog: globalDialogConfig,
  loading: globalLoadingConfig,
  message: globalMessageConfig,
  notification: globalNotificationConfig
});

// packages/components/dialog/src/dialog-service-container.vue L98-150
async function handleConfirm() {
  if (!currentEntry.value || currentEntry.value.confirming) {
    return;
  }

  currentEntry.value.confirming = true;
  currentEntry.value.promptError = "";

  try {
    if (currentEntry.value.mode === "prompt" && currentEntry.value.inputValidator) {
      const validation = await currentEntry.value.inputValidator(currentEntry.value.promptValue);

      if (typeof validation === "string" && validation) {
        currentEntry.value.promptError = validation;
        return;
      }
    }

    const context = buildActionContext("confirm");

    if (context && currentEntry.value.beforeConfirm) {
      await currentEntry.value.beforeConfirm(context);
    }

    closeCurrent("confirm");
  } finally {
    if (currentEntry.value) {
      currentEntry.value.confirming = false;
    }
  }
}

async function handleCancel() {
  if (!currentEntry.value || currentEntry.value.cancelling) {
    return;
  }

  currentEntry.value.cancelling = true;

  try {
    const context = buildActionContext("cancel");

    if (context && currentEntry.value.beforeCancel) {
      await currentEntry.value.beforeCancel(context);
    }

    closeCurrent("cancel");
  } finally {
    if (currentEntry.value) {
      currentEntry.value.cancelling = false;
    }
  }
}

// packages/components/dialog/src/dialog-service-container.vue L197-222
function handleBeforeClose(done: (cancel?: boolean) => void, reason?: string) {
  const entry = currentEntry.value;

  if (!entry) {
    done();
    return;
  }

  const closeReason = (reason ?? "close") as DialogCloseReason;

  setDialogServiceEntryPendingAction(entry, closeReason);

  const userBeforeClose = entry.dialogProps?.beforeClose;

  if (!userBeforeClose) {
    done();
    return;
  }

  userBeforeClose((cancel?: boolean) => {
    if (cancel) {
      entry.pendingAction = "programmatic";
    }
    done(cancel);
  }, closeReason);
}

<!-- packages/components/dialog/src/dialog-service-container.vue L245-301 -->
<template>
  <Dialog
    v-if="currentEntry"
    :model-value="currentEntry.visible"
    v-bind="dialogProps"
    :title="currentEntry.title"
    :before-close="handleBeforeClose"
    @closed="handleClosed"
  >
    <DialogServicePrompt
      v-if="currentEntry.mode === 'prompt'"
      :model-value="currentEntry.promptValue"
      :message="currentEntry.message"
      :placeholder="currentEntry.inputPlaceholder"
      :input-type="currentEntry.inputType"
      :input-props="currentEntry.inputProps"
      :error="currentEntry.promptError"
      @update:model-value="handlePromptValueUpdate"
    />
    <component
      :is="currentEntry.component"
      v-else-if="currentEntry.component"
      v-bind="currentEntry.componentProps ?? {}"
    />
    <RenderVNode
      v-else-if="hasBodyRenderer"
      :renderer="bodyRenderer"
    />
    <template v-else>{{ currentEntry.message }}</template>

    <template #footer>
      <RenderVNode
        v-if="hasFooterRenderer"
        :renderer="footerRenderer"
      />
      <template v-if="!currentEntry.footerRender && footerContext">
        <xy-button
          v-if="currentEntry.showCancelButton"
          plain
          :loading="currentEntry.cancelling"
          v-bind="currentEntry.cancelButtonProps"
          @click="handleCancel"
        >
          {{ currentEntry.cancelButtonText }}
        </xy-button>
        <xy-button
          type="primary"
          :loading="currentEntry.confirming"
          v-bind="currentEntry.confirmButtonProps"
          @click="handleConfirm"
        >
          {{ currentEntry.confirmButtonText }}
        </xy-button>
      </template>
    </template>
  </Dialog>
</template>

// packages/components/dialog/__tests__/dialog.spec.ts L203-232
  it("支持通过遮罩点击关闭，点击面板本身不会误触发关闭", async () => {
    document.body.innerHTML = "";

    const wrapper = mount(XyDialog, {
      attachTo: document.body,
      props: {
        modelValue: true,
        title: "遮罩测试"
      }
    });

    await flushDialog();

    const overlay = document.body.querySelector(".xy-dialog__overlay") as HTMLElement;
    const panel = document.body.querySelector(".xy-dialog__panel") as HTMLElement;

    panel.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
    panel.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
    panel.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    await flushDialog();
    expect(wrapper.emitted("close")).toBeUndefined();

    overlay.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
    overlay.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
    overlay.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    await flushDialog();

    expect(wrapper.emitted("close")).toHaveLength(1);
    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
  });

// packages/components/dialog/__tests__/dialog.spec.ts L234-264
  it("按下在遮罩、抬起在面板内容时不关闭（防拖拽误关）", async () => {
    document.body.innerHTML = "";

    const wrapper = mount(XyDialog, {
      attachTo: document.body,
      props: {
        modelValue: true,
        title: "拖拽误关测试"
      }
    });

    await flushDialog();

    const overlay = document.body.querySelector(".xy-dialog__overlay") as HTMLElement;
    const panel = document.body.querySelector(".xy-dialog__panel") as HTMLElement;

    // 模拟真实浏览器在遮罩按下后拖拽经过面板内容抬起：click 目标不是遮罩，不应关闭
    overlay.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
    panel.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
    panel.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    await flushDialog();
    expect(wrapper.emitted("close")).toBeUndefined();

    // 按下与抬起均落在遮罩上的完整点击仍正常关闭
    overlay.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
    overlay.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
    overlay.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    await flushDialog();

    expect(wrapper.emitted("close")).toHaveLength(1);
    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
  });

// packages/components/dialog/__tests__/dialog.spec.ts L851-898
  it("open 支持宿主挂载、队列串行、update、close 和 result", async () => {
    const first = XyDialogService.open({
      title: "第一项",
      message: "第一条消息"
    });
    const second = XyDialogService.open({
      title: "第二项",
      message: "第二条消息"
    });

    await flushServiceDialog();

    expect(document.body.querySelector(".xy-dialog-service-host")).not.toBeNull();
    expect(dialogServiceState.current?.id).toBe(first.id);
    expect(dialogServiceState.queue).toHaveLength(1);
    expectCurrentServiceTitle("第一项");

    first.update({
      title: "第一项已更新",
      message: "已更新内容",
      dialogProps: {
        width: 480
      }
    });
    await flushServiceDialog();

    expectCurrentServiceTitle("第一项已更新");
    expect(document.body.querySelector(".xy-dialog__body")?.textContent).toContain("已更新内容");
    expect(dialogServiceState.current?.dialogProps?.width).toBe(480);

    requestCloseDialogServiceEntry(first.id, "programmatic");
    finishDialogServiceEntry(first.id);
    expect(await first.result).toEqual({
      action: "programmatic",
      value: undefined
    });

    await flushServiceDialog();
    expect(dialogServiceState.current?.id).toBe(second.id);
    expectCurrentServiceTitle("第二项");

    requestCloseDialogServiceEntry(second.id, "programmatic");
    finishDialogServiceEntry(second.id);
    await expect(second.result).resolves.toEqual({
      action: "programmatic",
      value: undefined
    });
  });

// tests/types/fixtures/dialog.ts L113-136
const openOptions: DialogServiceOpenOptions = {
  title: "服务弹窗",
  message: "说明文案",
  dialogProps: {
    width: 480,
    maximizable: true
  },
  showCancelButton: true,
  confirmButtonText: "确认",
  cancelButtonText: "取消",
  confirmButtonProps: {
    type: "primary",
    loading: false
  },
  cancelButtonProps: {
    plain: true
  },
  beforeConfirm: async (ctx) => {
    ctx.close("confirm");
  },
  beforeCancel: (ctx) => {
    ctx.close("cancel");
  }
};