@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/popconfirm/Popconfirm.svelte

@@ -1,720 +1,434 @@
 <!--
-  Popconfirm — 气泡确认（feedback）。
-  锚定触发元素的就地二次确认：title/content + 危险分级 type，确认/取消双按钮，
-  12 方位 + autoAdjustOverflow flip 碰撞避让，role=dialog non-modal。
-  定位：portal 到 getPopupContainer()（缺省 body）+ position:fixed（脱离 overflow:hidden 裁剪）。
-  触发：triggerType='click'（默认，点击 toggle）| 'hover'（悬停 enter/leave delay 开关，
-  指针移入浮层维持 open，复用 Dropdown 的 hover 定时器模式）。
-  异步确认：onConfirm 返回 Promise 时确认按钮进入 loading 态，resolve 后关闭、reject 保持打开
-  （对齐 ConfirmModal 的异步编排）。
-  复用 core 原语：useId、useDismiss（外部点击/Esc 关闭，popup 列入 extraTargets）、
-  useFocusTrap（焦点捕获+归还）、computePosition/useFloating（container 选项接 getPopupContainer）。
-  浮层惰性挂载（首开才挂）；destroyOnClose 默认 true 关闭即卸载，false 时保留 DOM（--hidden 隐藏）。
-  motion 默认开（淡入+轻缩放），reduced-motion 退化为无动效。arrowPointAtCenter 透传 floating。
-  okButtonProps/cancelButtonProps 透传额外按钮属性（onclick/loading/disabled 由组件托管，不被覆盖）。
-  关闭回调 reason 来源细分：'confirm'（确认按钮）| 'cancel'（取消按钮）| 'trigger'（点击/键盘/hover toggle）
-  | 'esc'（Esc 键）| 'outsideClick'（外部点击）；esc/outsideClick 由 useDismiss 的 DismissReason 透传。
+  Popconfirm — 气泡确认框（严格对齐 Semi Design semi-ui/popconfirm）。
+  架构：Popconfirm 封装 Popover（对齐 Semi `Popconfirm extends PopoverProps` +
+  `<Popover content={renderConfirmPopCard}>`）——复用 Popover→Tooltip 的全部定位/触发/
+  焦点/dismiss/12 方位/箭头基建，自身只负责渲染确认卡片：
+    .cd-popconfirm > .cd-popconfirm-inner >
+      .cd-popconfirm-header( header-icon? + header-body(header-title?) + btn-close? )
+    + .cd-popconfirm-body(-withIcon?)?
+    + .cd-popconfirm-footer( cancel + ok )
+  对齐要点（对齐 Semi index.tsx / popconfirm.scss，无自造）：
+    - icon 缺省 <IconAlertTriangle size="extra-large"/>（warning 色由 .cd-icon-alert_triangle 上色）；
+      不同风格由使用方经 icon(style)+okType 搭配（Semi 无 type 分级 prop）。
+    - showCloseIcon 默认 true：header 内 borderless small 关闭按钮（第三个 flex 子项，靠 header-body
+      flex-grow 推到右侧，与 Semi 一致——scss 中 btn-close 无独立定位规则）。
+    - okType 默认 primary、cancelType 默认 tertiary、确认按钮 theme=solid（对齐 Semi defaultProps）。
+    - 异步：onConfirm/onCancel 返回 Promise 时对应按钮 loading，resolve 关闭 / reject 保持打开。
+    - autoFocus：okButtonProps/cancelButtonProps.autoFocus 打开时聚焦对应按钮（对齐 Semi 2.30）。
+  受控 visible（红线 #1）：不回写，仅经 onVisibleChange 通知；trigger 默认 click，
+  position 默认 bottomLeft，stopPropagation 默认 true（对齐 Semi）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { untrack } from 'svelte';
-  import {
-    useId,
-    useDismiss,
-    useFocusTrap,
-    useLiveAnnouncer,
-    parsePlacement,
-    type Placement,
-    type Side,
-  } from '@chenzy-design/core';
+  import { tick, untrack } from 'svelte';
+  import { useId } from '@chenzy-design/core';
+  import { IconAlertTriangle, IconClose } from '@chenzy-design/icons';
   import { Button } from '../button/index.js';
   import { useLocale } from '../locale-provider/index.js';
-  import { floating } from '../_floating/use-floating.js';
+  import Popover from '../popover/Popover.svelte';
+  import type { Position } from '../tooltip/placement.js';
 
-  type PopType = 'default' | 'danger' | 'warning';
-  type OkType = 'primary' | 'danger';
-  type TriggerType = 'click' | 'hover';
-  type DismissReason = 'trigger' | 'confirm' | 'cancel' | 'esc' | 'outsideClick';
+  type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+  type TriggerType = 'click' | 'hover' | 'focus' | 'custom';
+
+  /** content 函数形态入参（对齐 Semi content: ({ initialFocusRef }) => ReactNode）：
+   *  将 initialFocusRef 绑定到浮层内可聚焦元素，打开时自动聚焦。 */
+  interface RenderContentProps {
+    initialFocusRef: (node: HTMLElement) => void;
+  }
 
-  /** 透传给确认/取消 Button 的额外属性（type/theme/size/block/disabled/ariaLabel 等，不含 onclick/loading：由组件托管） */
+  /** 透传给确认/取消 Button 的额外属性（对齐 Semi okButtonProps/cancelButtonProps）。
+   *  onclick/loading/theme/data-type 由组件托管；autoFocus 用于打开时初始聚焦。 */
   type ExtraButtonProps = {
-    type?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+    type?: ButtonType;
     theme?: 'solid' | 'borderless' | 'light' | 'outline';
     size?: 'small' | 'default' | 'large';
     block?: boolean;
     disabled?: boolean;
     htmlType?: 'button' | 'submit' | 'reset';
     ariaLabel?: string;
+    class?: string;
+    /** 打开面板时自动聚焦此按钮（对齐 Semi autoFocus） */
+    autoFocus?: boolean;
   };
 
-  /** motion 配置：传 number 覆盖时长（ms），传 false 关闭过渡 */
-  interface MotionConfig {
-    /** 过渡时长（ms），缺省走 token --cd-popconfirm-motion-duration */
-    duration?: number;
-  }
-
   interface Props {
-    open?: boolean;
-    /** open 别名（Semi 原始拼写） */
+    /** 受控显隐（配合 trigger='custom'），对齐 Semi visible */
     visible?: boolean;
-    defaultOpen?: boolean;
-    /** 非受控初始显隐（defaultOpen 别名，优先级低于 open） */
+    /** 非受控初始显隐，对齐 Semi defaultVisible */
     defaultVisible?: boolean;
-    title?: string;
-    titleSnippet?: Snippet;
-    content?: string;
-    contentSnippet?: Snippet;
-    type?: PopType;
+    /** 标题：文本或富文本 Snippet（对齐 Semi title: ReactNode） */
+    title?: string | Snippet;
+    /** 正文：文本 / 富文本 Snippet / 带 { initialFocusRef } 入参的函数 Snippet
+     *  （对齐 Semi content: ReactNode | ({ initialFocusRef }) => ReactNode） */
+    content?: string | Snippet<[RenderContentProps]>;
+    /** 自定义弹出气泡图标；false 隐藏图标；缺省 <IconAlertTriangle size="extra-large"/>（对齐 Semi） */
     icon?: Snippet | false;
+    /** 确认按钮文字，默认 locale 'confirm'（对齐 Semi okText） */
     okText?: string;
+    /** 取消按钮文字，默认 locale 'cancel'（对齐 Semi cancelText） */
     cancelText?: string;
-    okType?: OkType;
-    /** 取消按钮类型（对应 okType 的取消侧），透传给取消 Button 的 type；优先级高于 cancelButtonProps.type */
-    cancelType?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-    /** 透传确认按钮额外属性（onclick/loading 由组件托管，传入会被忽略） */
+    /** 确认按钮类型，默认 primary（对齐 Semi okType） */
+    okType?: ButtonType;
+    /** 取消按钮类型，默认 tertiary（对齐 Semi cancelType） */
+    cancelType?: ButtonType;
+    /** 确认按钮 props（对齐 Semi okButtonProps） */
     okButtonProps?: ExtraButtonProps;
-    /** 透传取消按钮额外属性（onclick/disabled 由组件托管，传入会被忽略） */
+    /** 取消按钮 props（对齐 Semi cancelButtonProps） */
     cancelButtonProps?: ExtraButtonProps;
-    showCancel?: boolean;
-    placement?: Placement;
-    /** placement 别名（Semi 原始拼写） */
-    position?: Placement;
+    /** 是否显示右上角关闭按钮，默认 true（对齐 Semi showCloseIcon） */
+    showCloseIcon?: boolean;
+    /** 弹出方位，默认 bottomLeft（对齐 Semi position） */
+    position?: Position;
+    /** 触发方式，默认 click（对齐 Semi trigger） */
+    trigger?: TriggerType;
+    /** 点击子元素是否弹出，false 时不弹（对齐 Semi disabled） */
     disabled?: boolean;
+    /** Esc 关闭，受控时不生效，默认 true（对齐 Semi closeOnEsc） */
     closeOnEsc?: boolean;
-    closeOnOutsideClick?: boolean;
-    /** 关闭时销毁浮层 DOM，默认 true（卸载释放内存）；false 时首开后保留（--hidden 隐藏） */
-    destroyOnClose?: boolean;
-    /** 箭头是否指向触发元素中心，默认 false */
+    /** 箭头是否指向触发元素中心（需 showArrow），默认 false（对齐 Semi arrowPointAtCenter） */
     arrowPointAtCenter?: boolean;
-    /** 是否显示箭头三角，默认 false（浮层与触发器间无连接箭头） */
+    /** 是否显示箭头三角，默认 false（对齐 Semi showArrow） */
     showArrow?: boolean;
-    /** 入场动效开关/配置，默认 true（受 prefers-reduced-motion 覆盖） */
-    motion?: boolean | MotionConfig;
-    /** 触发方式：'click' 点击 toggle（默认）| 'hover' 悬停开关 */
-    triggerType?: TriggerType;
-    /** hover 触发：指针进入到打开的延迟（ms） */
+    /** 进出场动画，默认 true（对齐 Semi motion） */
+    motion?: boolean;
     mouseEnterDelay?: number;
-    /** hover 触发：指针离开到关闭的延迟（ms） */
     mouseLeaveDelay?: number;
-    /** 浮层 portal 容器，缺省 document.body */
-    getPopupContainer?: () => HTMLElement | null;
-    /** 浮层 z-index，默认 1030 */
+    /** 自定义浮层容器（对齐 Semi getPopupContainer） */
+    getPopupContainer?: () => HTMLElement | null | undefined;
+    /** 浮层 z-index，默认 1030（对齐 Semi zIndex） */
     zIndex?: number;
-    /** Tab 键是否在浮层内循环（焦点陷阱），默认 true */
+    /** Tab 是否在浮层内循环，默认 true（对齐 Semi guardFocus） */
     guardFocus?: boolean;
-    /** Esc 关闭时是否将焦点归还给触发元素，默认 true */
+    /** Esc 后焦点回到 trigger（仅 trigger=click），默认 true（对齐 Semi returnFocusOnClose） */
     returnFocusOnClose?: boolean;
-    /** 点击浮层内事件是否阻止冒泡到文档，默认 true */
+    /** 阻止浮层内点击冒泡，默认 true（对齐 Semi stopPropagation） */
     stopPropagation?: boolean;
-    trigger?: Snippet;
-    onOpenChange?: (info: { open: boolean; reason: DismissReason }) => void;
-    /** 确认回调；返回 Promise 时确认按钮 loading，resolve 关闭 / reject 保持打开 */
-    onConfirm?: () => void | Promise<unknown>;
-    onCancel?: () => void;
-    /**
-     * 点击浮层外部，在关闭逻辑前触发（区别于 onOpenChange 的 outsideClick reason）。
-     * 调用 `event.preventDefault()` 可阻止默认关闭。
-     */
-    onClickOutside?: (event: MouseEvent) => void;
-    /** onClickOutside 别名（Semi 原始大写 S 拼写） */
-    onClickOutSide?: (event: MouseEvent) => void;
-    /** Esc 键按下时触发（在 closeOnEsc 关闭之前） */
-    onEscKeyDown?: (e: KeyboardEvent) => void;
-    /** 入场动效结束、浮层完全可见 */
-    onAfterOpen?: () => void;
-    /** 出场动效结束、DOM 卸载后 */
-    onAfterClose?: () => void;
+    /** 手动触发重新定位（对齐 Semi rePosKey） */
+    rePosKey?: string | number;
+    /** 卡片自定义类名（对齐 Semi className） */
     class?: string;
+    /** 卡片自定义内联样式（对齐 Semi style） */
+    style?: string;
+    /** 触发元素（对齐 Semi children） */
+    children?: Snippet;
+    /** 显隐切换回调（对齐 Semi onVisibleChange） */
+    onVisibleChange?: (visible: boolean) => void;
+    /** 点击浮层外部回调（对齐 Semi onClickOutSide） */
+    onClickOutSide?: (e: MouseEvent) => void;
+    /** Esc 键回调（对齐 Semi onEscKeyDown） */
+    onEscKeyDown?: (e: KeyboardEvent) => void;
+    /** 确认回调；返回 Promise 时确认按钮 loading，resolve 关闭 / reject 保持（对齐 Semi onConfirm） */
+    onConfirm?: (e: MouseEvent) => void | Promise<unknown>;
+    /** 取消回调；返回 Promise 时取消按钮 loading，resolve 关闭 / reject 保持（对齐 Semi onCancel） */
+    onCancel?: (e: MouseEvent) => void | Promise<unknown>;
   }
 
   let {
-    open,
     visible,
-    defaultOpen = false,
-    defaultVisible,
+    defaultVisible = false,
     title,
-    titleSnippet,
     content,
-    contentSnippet,
-    type = 'default',
     icon,
     okText,
     cancelText,
-    okType,
-    cancelType,
+    okType = 'primary',
+    cancelType = 'tertiary',
     okButtonProps,
     cancelButtonProps,
-    showCancel = true,
-    placement,
-    position,
+    showCloseIcon = true,
+    position = 'bottomLeft',
+    trigger = 'click',
     disabled = false,
     closeOnEsc = true,
-    closeOnOutsideClick = true,
-    destroyOnClose = true,
     arrowPointAtCenter = false,
     showArrow = false,
     motion = true,
-    triggerType = 'click',
-    mouseEnterDelay = 150,
-    mouseLeaveDelay = 150,
+    mouseEnterDelay = 50,
+    mouseLeaveDelay = 50,
     getPopupContainer,
-    zIndex,
-    guardFocus = true,
+    zIndex = 1030,
+    guardFocus,
     returnFocusOnClose = true,
     stopPropagation = true,
-    trigger,
-    onOpenChange,
-    onConfirm,
-    onCancel,
-    onClickOutside,
+    rePosKey,
+    class: className = '',
+    style: styleExtra = '',
+    children,
+    onVisibleChange,
     onClickOutSide,
     onEscKeyDown,
-    onAfterOpen,
-    onAfterClose,
-    class: className,
+    onConfirm,
+    onCancel,
   }: Props = $props();
 
   const loc = useLocale();
-  // 单例 live region（polite）：异步确认进入 loading 时播报「处理中」给屏幕阅读器。
-  // 命令式写入在事件回调里（confirm()，非 render 期），符合红线 #3。
-  const announcer = useLiveAnnouncer();
-
-  const popupId = useId('cd-popconfirm-popup');
   const titleId = useId('cd-popconfirm-title');
-  const contentId = useId('cd-popconfirm-content');
-
-  // visible 为 open 别名；open 优先。
-  const resolvedOpen = $derived(open ?? visible);
-  // position 为 placement 别名；placement 优先，缺省 'top'。
-  const resolvedPlacementProp = $derived<Placement>(placement ?? position ?? 'top');
 
-  // --- 受控 open (红线 #1)：不无条件回写 open，仅 onOpenChange ---
-  const isControlled = $derived(resolvedOpen !== undefined);
-  let innerOpen = $state(getInitialOpen());
-  const isOpen = $derived(isControlled ? !!resolvedOpen : innerOpen);
+  // --- 受控 visible (红线 #1)：不无条件回写，仅 onVisibleChange ---
+  const isControlled = $derived(visible !== undefined);
+  // eslint-disable-next-line -- 仅取 defaultVisible 初值作为非受控初始态
+  let innerOpen = $state(untrack(() => defaultVisible));
+  const isOpen = $derived(isControlled ? !!visible : innerOpen);
 
-  function getInitialOpen(): boolean {
-    // defaultVisible 为 defaultOpen 的别名，优先于 defaultOpen
-    return defaultVisible ?? defaultOpen;
-  }
-
-  // 确认按钮 type 优先级：显式 okType > okButtonProps.type > 由 type 推导默认（兜底必为非空值）。
-  type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-  const resolvedOkType = $derived<ButtonType>(
-    okType ?? okButtonProps?.type ?? (type === 'danger' ? 'danger' : 'primary'),
-  );
-  // 取消按钮 type 优先级：显式 cancelType > cancelButtonProps.type > 'secondary'（默认）。
-  const resolvedCancelType = $derived<ButtonType>(
-    cancelType ?? cancelButtonProps?.type ?? 'secondary',
-  );
-
-  const hasContent = $derived(Boolean(contentSnippet) || Boolean(content));
-
-  // motion：false（或 {duration:0}）关闭过渡；number/object.duration 覆盖 token 时长。
-  const motionEnabled = $derived(motion !== false);
-  const motionDuration = $derived(
-    typeof motion === 'object' && typeof motion.duration === 'number'
-      ? motion.duration
-      : undefined,
-  );
-
-  // --- destroyOnClose / 惰性挂载（红线 #2 纯派生）：首开才挂；关闭后 destroyOnClose=false 保留 DOM（--hidden），true 卸载。 ---
-  let hasBeenOpened = $state(false);
-  $effect(() => {
-    if (isOpen) hasBeenOpened = true;
-  });
-  const shouldRender = $derived(isOpen || (hasBeenOpened && !destroyOnClose));
-
-  // 浮层根内联样式：motion duration 覆盖 token 时长；zIndex 覆盖 CSS 变量。
-  const popupStyle = $derived.by(() => {
-    const parts: string[] = [];
-    if (motionDuration !== undefined) parts.push(`--cd-popconfirm-motion-duration:${motionDuration}ms`);
-    if (zIndex !== undefined) parts.push(`z-index:${zIndex}`);
-    return parts.length > 0 ? parts.join(';') : undefined;
-  });
-
-  // flip 后的实际方位（驱动箭头朝向）+ 箭头交叉轴偏移
-  let resolvedPlacement = $state<Placement>(untrack(() => resolvedPlacementProp));
-  const resolvedSide = $derived<Side>(parsePlacement(resolvedPlacement).side);
-  let arrowOffset = $state(0);
+  // title / content 归一：string 文本 / Snippet（content 可带 { initialFocusRef } 入参）。
+  const titleText = $derived(typeof title === 'string' ? title : undefined);
+  const titleSnippet = $derived(typeof title === 'function' ? (title as Snippet) : undefined);
+  const hasTitle = $derived(title !== undefined && title !== '');
 
-  const popupCls = $derived(
-    [
-      'cd-popconfirm__popup',
-      `cd-popconfirm__popup--${resolvedSide}`,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
+  const contentText = $derived(typeof content === 'string' ? content : undefined);
+  const contentSnippet = $derived(
+    typeof content === 'function' ? (content as Snippet<[RenderContentProps]>) : undefined,
   );
+  const hasContent = $derived(content !== undefined && content !== '');
 
-  const arrowStyle = $derived(
-    resolvedSide === 'top' || resolvedSide === 'bottom'
-      ? `inset-inline-start:${arrowOffset}px`
-      : `inset-block-start:${arrowOffset}px`,
-  );
-
-  function setOpen(next: boolean, reason: DismissReason) {
-    if (!isControlled) innerOpen = next;
-    onOpenChange?.({ open: next, reason });
-  }
-
-  function onTriggerClick() {
-    if (disabled || triggerType !== 'click') return;
-    setOpen(!isOpen, 'trigger');
-  }
-
-  function onTriggerKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    // 键盘可达性：无论 click/hover，Enter/Space 都能展开（hover 模式键盘等价）。
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      setOpen(!isOpen, 'trigger');
-    }
-  }
-
-  // --- hover 延迟开关 (红线 #3)：setTimeout 存普通变量，cleanup 清除。
-  //     参考 Dropdown：enter 延迟开、leave 延迟关，指针移入浮层维持 open。 ---
-  let enterTimer: ReturnType<typeof setTimeout> | undefined;
-  let leaveTimer: ReturnType<typeof setTimeout> | undefined;
-
-  function clearTimers() {
-    if (enterTimer !== undefined) {
-      clearTimeout(enterTimer);
-      enterTimer = undefined;
-    }
-    if (leaveTimer !== undefined) {
-      clearTimeout(leaveTimer);
-      leaveTimer = undefined;
-    }
-  }
-
-  function onTriggerPointerEnter() {
-    if (disabled || triggerType !== 'hover') return;
-    clearTimers();
-    enterTimer = setTimeout(() => setOpen(true, 'trigger'), mouseEnterDelay);
-  }
-
-  function onTriggerPointerLeave() {
-    if (disabled || triggerType !== 'hover') return;
-    clearTimers();
-    leaveTimer = setTimeout(() => setOpen(false, 'trigger'), mouseLeaveDelay);
-  }
+  const showIcon = $derived(icon !== false);
 
-  // popup portal 到容器后不在 rootEl 子树内：指针移入浮层需取消关闭，移出再延迟关。
-  function onPopupPointerEnter() {
-    if (triggerType !== 'hover') return;
-    clearTimers();
+  // 透传给 Button 的字段：仅剔除 autoFocus（Popconfirm 私有聚焦语义，经 focusOperateButton
+  // 主动 focus，不透传成原生 autofocus）。其余（type/class/theme/size/disabled…）随 Semi
+  // 展开在显式默认属性之后，故 okButtonProps.type 等可覆盖组件默认（对齐 Semi）。
+  function pickBtnProps(p?: ExtraButtonProps) {
+    if (!p) return {};
+    const { autoFocus: _a, ...rest } = p;
+    return rest;
   }
+  const okBtnRest = $derived(pickBtnProps(okButtonProps));
+  const cancelBtnRest = $derived(pickBtnProps(cancelButtonProps));
 
-  function onPopupPointerLeave() {
-    if (triggerType !== 'hover') return;
-    clearTimers();
-    leaveTimer = setTimeout(() => setOpen(false, 'trigger'), mouseLeaveDelay);
+  function setOpen(next: boolean) {
+    if (next === (isControlled ? !!visible : innerOpen)) return;
+    if (!isControlled) innerOpen = next;
+    onVisibleChange?.(next);
   }
 
-  $effect(() => clearTimers);
-
-  // --- 异步确认 (红线 #3)：onConfirm 返回 Promise 时确认按钮 loading，
-  //     resolve 后关闭、reject 保持打开（对齐 ConfirmModal）。 ---
+  // --- 异步 (红线 #3)：onConfirm/onCancel 返回 Promise 时对应按钮 loading，
+  //     resolve 后关闭、reject 保持打开（对齐 Semi PopconfirmFoundation）。 ---
   let confirmLoading = $state(false);
+  let cancelLoading = $state(false);
+  const busy = $derived(confirmLoading || cancelLoading);
 
-  async function confirm() {
-    if (confirmLoading) return;
-    const result = onConfirm?.();
+  async function confirm(e: MouseEvent) {
+    if (busy) return;
+    const result = onConfirm?.(e);
     if (result instanceof Promise) {
       confirmLoading = true;
-      announcer.announce(loc().t('Popconfirm.confirming'));
       try {
         await result;
         confirmLoading = false;
-        setOpen(false, 'confirm');
+        setOpen(false);
       } catch {
         confirmLoading = false; // reject：复位，保持打开
       }
     } else {
-      setOpen(false, 'confirm');
+      setOpen(false);
     }
   }
 
-  function cancel() {
-    if (confirmLoading) return;
-    onCancel?.();
-    setOpen(false, 'cancel');
+  async function cancel(e: MouseEvent) {
+    if (busy) return;
+    const result = onCancel?.(e);
+    if (result instanceof Promise) {
+      cancelLoading = true;
+      try {
+        await result;
+        cancelLoading = false;
+        setOpen(false);
+      } catch {
+        cancelLoading = false;
+      }
+    } else {
+      setOpen(false);
+    }
   }
 
-  // 外部点击/Esc 统一按取消处理，reason 由 useDismiss 细分（'esc' | 'outsideClick'）
-  function dismiss(reason: DismissReason) {
-    if (confirmLoading) return; // 异步确认进行中不被外部点击/Esc 打断
-    onCancel?.();
-    setOpen(false, reason);
+  // Popover onVisibleChange：受控/非受控同步（外部点击/Esc 关闭也走此路）。
+  function handlePopoverVisibleChange(next: boolean) {
+    if (busy && !next) return; // 异步进行中不被外部关闭打断
+    if (!isControlled) innerOpen = next;
+    onVisibleChange?.(next);
+    if (next) queueMicrotask(focusOperateButton);
   }
 
-  // --- 浮层命令式编排 (红线 #3)：open 且浮层就绪时，
-  //     activate focus-trap（焦点移入浮层）、绑 dismiss(Esc/外部点击)；
-  //     cleanup 里 undismiss、deactivate(归还焦点) ---
-  let popupEl = $state<HTMLElement | null>(null);
-  let rootEl = $state<HTMLElement | null>(null);
-
-  // 浮层定位由 use:floating action 接管（避免 effect cleanup 与 {#if} 卸载竞态）。
-  function onPlacement(info: { placement: Placement; arrowOffset: number }) {
-    resolvedPlacement = info.placement;
-    arrowOffset = info.arrowOffset;
+  // --- 初始焦点 (对齐 Semi handleFocusOperateButton)：打开时按 autoFocus 聚焦 cancel/ok。 ---
+  let footerEl = $state<HTMLDivElement>();
+  async function focusOperateButton() {
+    await tick();
+    const cancelAuto = cancelButtonProps?.autoFocus && !cancelButtonProps?.disabled;
+    const okAuto = okButtonProps?.autoFocus && !okButtonProps?.disabled;
+    const sel = cancelAuto
+      ? '[data-type="cancel"]'
+      : okAuto
+        ? '[data-type="ok"]'
+        : undefined;
+    if (!sel) return;
+    (footerEl?.querySelector(sel) as HTMLElement | undefined)?.focus({ preventScroll: true });
   }
 
-  // --- focus-trap + dismiss (红线 #3)：open 且浮层就绪时绑定，cleanup 解绑/归还焦点 ---
-  $effect(() => {
-    if (!isOpen || !popupEl) return;
-    // guardFocus=true（默认）激活 Tab 循环焦点陷阱；false 时跳过（允许 Tab 离开浮层）。
-    // returnFocusOnClose 在构造期决定 deactivate 是否归还焦点（true 默认归还）。
-    const trap = guardFocus ? useFocusTrap(popupEl, { returnFocus: returnFocusOnClose }) : null;
-    trap?.activate();
-    let undismiss = () => {};
-    // popup portal 到 body 后不在 rootEl 子树内：把 popupEl 列为 extraTargets，
-    // 否则点击浮层内部会被误判为 outsideClick。点触发器在 rootEl 内由 onclick toggle。
-    if (closeOnEsc || closeOnOutsideClick) {
-      undismiss = useDismiss(rootEl ?? popupEl, {
-        onDismiss: (reason) => {
-          // onEscKeyDown：Esc 按下时先触发回调（在 dismiss 关闭前）。
-          if (reason === 'esc' && onEscKeyDown) {
-            // useDismiss 的 onDismiss 不直接传 KeyboardEvent，
-            // 以合成空事件触发回调（符合接口契约）。
-            const syntheticEv = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
-            onEscKeyDown(syntheticEv);
-          }
-          dismiss(reason);
-        },
-        escape: closeOnEsc,
-        outsideClick: closeOnOutsideClick,
-        extraTargets: [popupEl],
-        // 外部点击：在 useDismiss 关闭判定之前触发 onClickOutside / onClickOutSide（关闭逻辑前）。
-        // 调用方 preventDefault() 即阻止默认关闭（返回 false 跳过 onDismiss）。
-        onOutsidePointer: (e) => {
-          const handler = onClickOutside ?? onClickOutSide;
-          if (!handler) return;
-          handler(e);
-          if (e.defaultPrevented) return false;
-        },
-      });
-    }
-    return () => {
-      undismiss();
-      // returnFocusOnClose=true（默认）时归还焦点给触发元素；false 时不归还
-      // （归还策略已在 useFocusTrap 构造期通过 returnFocus 选项决定）。
-      trap?.deactivate();
-      // 浮层关闭即复位 loading（覆盖受控 open 在 loading 中被外部关闭的边界）。
-      confirmLoading = false;
-    };
-  });
-
-  // --- onAfterOpen / onAfterClose (红线 #3)：入场/出场动效结束钩子 ---
-  // onAfterOpen：浮层挂载 + 入场动画 animationend；motion 关闭时下一帧即触发。
-  $effect(() => {
-    if (!isOpen || !popupEl) return;
-    if (!onAfterOpen) return;
-    const node = popupEl;
-    let raf = 0;
-    // 是否真正有入场动画：motion 开启、非 reduced-motion、且实际解析出非零时长。
-    const reduced =
-      typeof window !== 'undefined' &&
-      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    // token 未注入或时长为 0 时 animationend 不会触发，退回下一帧判定（避免钩子丢失）。
-    const dur =
-      typeof window !== 'undefined'
-        ? parseFloat(getComputedStyle(node).animationDuration || '0')
-        : 0;
-    const hasAnim = motionEnabled && !reduced && dur > 0;
-    if (hasAnim) {
-      const onEnd = (e: AnimationEvent) => {
-        if (e.target !== node || e.animationName !== 'cd-popconfirm-in') return;
-        onAfterOpen?.();
-      };
-      node.addEventListener('animationend', onEnd, { once: true });
-      return () => node.removeEventListener('animationend', onEnd);
-    }
-    // 无动画：下一帧（确保已绘制）即视为完全可见。后台标签页 rAF 会被挂起，
-    // 补一个 setTimeout 兜底确保钩子最终触发（取先到者，避免重复）。
-    let done = false;
-    const fire = () => {
-      if (done) return;
-      done = true;
-      onAfterOpen?.();
-    };
-    raf = requestAnimationFrame(fire);
-    const t = setTimeout(fire, 32);
-    return () => {
-      cancelAnimationFrame(raf);
-      clearTimeout(t);
-    };
-  });
-
-  // onAfterClose：open 由 true→false 后触发（当前无出场动画，关闭即卸载/隐藏）。
-  // 簿记用普通变量避免 $state 自循环（按记忆教训）。
-  let wasOpen = false;
-  $effect(() => {
-    const openNow = isOpen;
-    if (wasOpen && !openNow) onAfterClose?.();
-    wasOpen = openNow;
-  });
+  // content 函数形态的 initialFocusRef：打开时聚焦浮层内指定元素（复用 Popover 同名机制经 contentSnippet 入参）。
+  function initialFocusRef(node: HTMLElement) {
+    queueMicrotask(() => node.focus?.());
+  }
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="cd-popconfirm"
-  bind:this={rootEl}
-  onpointerenter={onTriggerPointerEnter}
-  onpointerleave={onTriggerPointerLeave}
+<Popover
+  {trigger}
+  {position}
+  {disabled}
+  {closeOnEsc}
+  {arrowPointAtCenter}
+  {showArrow}
+  {motion}
+  {mouseEnterDelay}
+  {mouseLeaveDelay}
+  {returnFocusOnClose}
+  {stopPropagation}
+  {zIndex}
+  visible={isOpen}
+  onVisibleChange={handlePopoverVisibleChange}
+  {...(guardFocus !== undefined ? { guardFocus } : {})}
+  {...(rePosKey !== undefined ? { rePosKey } : {})}
+  {...(getPopupContainer !== undefined ? { getPopupContainer } : {})}
+  {...(onClickOutSide !== undefined ? { onClickOutSide } : {})}
+  {...(onEscKeyDown !== undefined ? { onEscKeyDown } : {})}
+  {...(hasTitle ? { ariaLabelledby: titleId } : {})}
 >
-  <div
-    class="cd-popconfirm__trigger"
-    role="button"
-    tabindex={disabled ? -1 : 0}
-    aria-haspopup="dialog"
-    aria-expanded={isOpen}
-    aria-controls={isOpen ? popupId : undefined}
-    aria-disabled={disabled || undefined}
-    onclick={onTriggerClick}
-    onkeydown={onTriggerKeydown}
-  >
-    {@render trigger?.()}
-  </div>
-
-  {#if shouldRender}
-    <!-- destroyOnClose=false 时关闭仍保留 DOM（--hidden 隐藏），true 时 !isOpen 即被 {#if} 卸载。 -->
-    <div
-      class={popupCls}
-      class:cd-popconfirm__popup--hidden={!isOpen}
-      class:cd-popconfirm__popup--motion={motionEnabled}
-      id={popupId}
-      style={popupStyle}
-      bind:this={popupEl}
-      use:floating={{ trigger: rootEl, placement: resolvedPlacementProp, autoAdjust: true, offset: 8, arrowPointAtCenter, getContainer: getPopupContainer, onPlacement, open: isOpen }}
-      role="dialog"
-      tabindex="-1"
-      aria-labelledby={titleId}
-      aria-describedby={hasContent ? contentId : undefined}
-      aria-hidden={!isOpen || undefined}
-      onpointerenter={onPopupPointerEnter}
-      onpointerleave={onPopupPointerLeave}
-      onclick={stopPropagation ? (e) => e.stopPropagation() : undefined}
-    >
-      {#if showArrow}
-        <div class="cd-popconfirm__arrow" style={arrowStyle} aria-hidden="true"></div>
-      {/if}
-      <div class="cd-popconfirm__body">
-        {#if icon !== false}
-          <span
-            class="cd-popconfirm__icon cd-popconfirm__icon--{type}"
-            aria-hidden="true"
-          >
-            {#if typeof icon === 'function'}
-              {@render icon()}
-            {:else if type === 'danger'}
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-                <path
-                  d="M8 4.5v4.2"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <circle cx="8" cy="11.3" r="0.9" fill="currentColor" />
-              </svg>
-            {:else if type === 'warning'}
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path
-                  d="M8 2 1.5 13.5h13L8 2Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M8 6.3v3"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <circle cx="8" cy="11.4" r="0.85" fill="currentColor" />
-              </svg>
-            {:else}
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-                <path
-                  d="M8 7.2v4"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <circle cx="8" cy="4.7" r="0.9" fill="currentColor" />
-              </svg>
-            {/if}
-          </span>
-        {/if}
-        <div class="cd-popconfirm__content-wrap">
-          <div id={titleId} class="cd-popconfirm__title">
-            {#if titleSnippet}
-              {@render titleSnippet()}
-            {:else}
-              {title}
-            {/if}
-          </div>
-          {#if hasContent}
-            <div id={contentId} class="cd-popconfirm__content">
-              {#if contentSnippet}
-                {@render contentSnippet()}
+  {#snippet content()}
+    <div class={`cd-popconfirm ${className}`.trim()} style={styleExtra}>
+      <div class="cd-popconfirm-inner">
+        <div class="cd-popconfirm-header">
+          {#if showIcon}
+            <i class="cd-popconfirm-header-icon">
+              {#if typeof icon === 'function'}
+                {@render icon()}
               {:else}
-                {content}
+                <IconAlertTriangle size="extra-large" />
               {/if}
-            </div>
+            </i>
+          {/if}
+          <div class="cd-popconfirm-header-body">
+            {#if hasTitle}
+              <div class="cd-popconfirm-header-title" id={titleId}>
+                {#if titleSnippet}
+                  {@render titleSnippet()}
+                {:else}
+                  {titleText}
+                {/if}
+              </div>
+            {/if}
+          </div>
+          {#if showCloseIcon}
+            <Button
+              class="cd-popconfirm-btn-close"
+              size="small"
+              theme="borderless"
+              type={cancelType}
+              icon={closeIcon}
+              onclick={cancel}
+            />
           {/if}
         </div>
-      </div>
-      <div class="cd-popconfirm__footer">
-        {#if showCancel}
-          <Button size="small" {...cancelButtonProps} type={resolvedCancelType} disabled={confirmLoading} onclick={cancel}>
+        {#if hasContent}
+          <div class="cd-popconfirm-body" class:cd-popconfirm-body-withIcon={showIcon}>
+            {#if contentSnippet}
+              {@render contentSnippet({ initialFocusRef })}
+            {:else}
+              {contentText}
+            {/if}
+          </div>
+        {/if}
+        <div class="cd-popconfirm-footer" bind:this={footerEl}>
+          <Button
+            data-type="cancel"
+            type={cancelType}
+            {...cancelBtnRest}
+            loading={cancelLoading}
+            disabled={cancelButtonProps?.disabled || confirmLoading}
+            onclick={cancel}
+          >
             {cancelText ?? loc().t('Popconfirm.cancel')}
           </Button>
-        {/if}
-        <Button
-          size="small"
-          {...okButtonProps}
-          type={resolvedOkType}
-          loading={confirmLoading}
-          onclick={confirm}
-        >
-          {okText ?? loc().t('Popconfirm.confirm')}
-        </Button>
+          <Button
+            data-type="ok"
+            type={okType}
+            theme="solid"
+            {...okBtnRest}
+            loading={confirmLoading}
+            disabled={okButtonProps?.disabled || cancelLoading}
+            onclick={confirm}
+          >
+            {okText ?? loc().t('Popconfirm.confirm')}
+          </Button>
+        </div>
       </div>
     </div>
-  {/if}
-</div>
+  {/snippet}
+  {@render children?.()}
+</Popover>
+
+{#snippet closeIcon()}
+  <IconClose />
+{/snippet}
 
 <style>
+  /* Popconfirm 卡片：渲染在 Popover 的 .cd-popover 卡面内（bg-0 + border + radius）。
+     结构/token/spacing 全量对齐 Semi popconfirm.scss（$module = semi-popconfirm）。 */
   .cd-popconfirm {
-    position: relative;
-    display: inline-block;
-  }
-  .cd-popconfirm__trigger {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
+    box-sizing: border-box;
+    max-inline-size: var(--cd-width-popconfirm-maxwidth);
   }
-  .cd-popconfirm__trigger:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-border-radius-small);
-  }
-  .cd-popconfirm__trigger[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-
-  /* 浮层 portal 到 body，由 JS 写 position:fixed + transform 定位 */
-  .cd-popconfirm__popup {
-    z-index: var(--cd-popconfirm-z);
-    inline-size: max-content;
-    max-inline-size: var(--cd-popconfirm-max-width);
-    padding: var(--cd-popconfirm-padding);
-    background: var(--cd-popconfirm-bg);
-    border-radius: var(--cd-popconfirm-radius);
-    box-shadow: var(--cd-popconfirm-shadow);
-  }
-  /* destroyOnClose=false 关闭后保留 DOM 但不可见、不可交互、不占位 */
-  .cd-popconfirm__popup--hidden {
-    display: none;
-  }
-  /* motion：进场淡入 + 轻微缩放，token 时长/缓动；reduced-motion 退化 */
-  .cd-popconfirm__popup--motion {
-    animation: cd-popconfirm-in var(--cd-popconfirm-motion-duration)
-      var(--cd-popconfirm-motion-easing, ease) both;
-  }
-  @keyframes cd-popconfirm-in {
-    from {
-      opacity: 0;
-      transform: scale(0.96);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  /* arrow：旋转 45° 的纯色方块，交叉轴偏移由内联 style 控制 */
-  .cd-popconfirm__arrow {
-    position: absolute;
-    inline-size: var(--cd-popconfirm-arrow-size);
-    block-size: var(--cd-popconfirm-arrow-size);
-    background: var(--cd-popconfirm-bg);
-    transform: rotate(45deg);
-  }
-  /* 交叉轴居中补偿：仅在交叉轴方向回退半个箭头尺寸 */
-  .cd-popconfirm__popup--top .cd-popconfirm__arrow,
-  .cd-popconfirm__popup--bottom .cd-popconfirm__arrow {
-    margin-inline-start: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  .cd-popconfirm__popup--left .cd-popconfirm__arrow,
-  .cd-popconfirm__popup--right .cd-popconfirm__arrow {
-    margin-block-start: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  /* 箭头吸附到浮层贴近触发器的那条边（按解析后的 side） */
-  .cd-popconfirm__popup--top .cd-popconfirm__arrow {
-    inset-block-end: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  .cd-popconfirm__popup--bottom .cd-popconfirm__arrow {
-    inset-block-start: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  .cd-popconfirm__popup--left .cd-popconfirm__arrow {
-    inset-inline-end: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  .cd-popconfirm__popup--right .cd-popconfirm__arrow {
-    inset-inline-start: calc(var(--cd-popconfirm-arrow-size) / -2);
+  /* inner padding: top top top bottom（对齐 Semi：右=top，左=bottom；底=top）。 */
+  .cd-popconfirm-inner {
+    display: flex;
+    flex-direction: column;
+    padding: var(--cd-spacing-popconfirm-top) var(--cd-spacing-popconfirm-top)
+      var(--cd-spacing-popconfirm-top) var(--cd-spacing-popconfirm-bottom);
+    position: relative;
   }
-
-  .cd-popconfirm__body {
+  .cd-popconfirm-header {
     display: flex;
-    gap: var(--cd-spacing-tight);
+    justify-content: flex-start;
   }
-  .cd-popconfirm__icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    line-height: 1;
+  .cd-popconfirm-header-icon {
+    inline-size: var(--cd-width-popconfirm-icon);
+    block-size: var(--cd-width-popconfirm-icon);
+    margin-inline-end: var(--cd-spacing-popconfirm-header-icon-marginright);
   }
-  .cd-popconfirm__icon--danger {
-    color: var(--cd-popconfirm-icon-color-danger);
+  /* IconAlertTriangle 警示色（对齐 Semi .semi-icon-alert_triangle { color: warning }）。 */
+  .cd-popconfirm-header-icon :global(.cd-icon-alert_triangle) {
+    color: var(--cd-color-popconfirm-header-alert-icon);
   }
-  .cd-popconfirm__icon--warning {
-    color: var(--cd-popconfirm-icon-color-warning);
+  .cd-popconfirm-header-body {
+    display: inline-flex;
+    flex-grow: 1;
+    flex-direction: column;
+    min-inline-size: 0;
   }
-  .cd-popconfirm__icon--default {
-    color: var(--cd-popconfirm-icon-color-info);
+  .cd-popconfirm-header-title {
+    font-size: var(--cd-font-size-header-6);
+    font-weight: var(--cd-font-popconfirm-header-title-fontweight);
+    margin-block-end: var(--cd-spacing-popconfirm-header-title-marginbottom);
+    color: var(--cd-color-popconfirm-header-text);
   }
-
-  .cd-popconfirm__content-wrap {
-    min-inline-size: 0;
+  .cd-popconfirm-body {
+    color: var(--cd-color-popconfirm-body-text);
   }
-  .cd-popconfirm__title {
-    color: var(--cd-popconfirm-title-color);
-    font-size: var(--cd-popconfirm-title-size);
-    font-weight: var(--cd-popconfirm-title-weight);
-    line-height: 1.4;
+  /* 有图标时正文缩进对齐标题（图标宽 + 右外边距，对齐 Semi body-withIcon margin-left）。 */
+  .cd-popconfirm-body-withIcon {
+    margin-inline-start: calc(
+      var(--cd-width-popconfirm-icon) + var(--cd-spacing-popconfirm-header-icon-marginright)
+    );
   }
-  .cd-popconfirm__content {
-    margin-block-start: var(--cd-spacing-extra-tight);
-    color: var(--cd-popconfirm-color-text-secondary);
-    font-size: var(--cd-popconfirm-content-size);
-    line-height: 1.5;
+  .cd-popconfirm-body :global(p) {
+    margin: var(--cd-spacing-popconfirm-body-p-margin);
+    padding: var(--cd-spacing-popconfirm-body-p-padding);
   }
-
-  .cd-popconfirm__footer {
+  .cd-popconfirm-footer {
+    margin-block-start: var(--cd-spacing-popconfirm-footer-margintop);
     display: flex;
     justify-content: flex-end;
-    gap: var(--cd-popconfirm-gap-footer);
-    margin-block-start: var(--cd-spacing-base-tight);
   }
-
-  /* reduced-motion：禁用进场动画 */
-  @media (prefers-reduced-motion: reduce) {
-    .cd-popconfirm__popup--motion {
-      animation: none;
-    }
+  /* footer 首按钮（非唯一）右外边距（对齐 Semi first-child:not(:last-child)）。 */
+  .cd-popconfirm-footer :global(.cd-button:first-child:not(:last-child)) {
+    margin-inline-end: var(--cd-spacing-popconfirm-footer-btn-marginright);
   }
 </style>