@mtn-ui-z/utils 0.0.1

package/src/theme.ts

@@ -0,0 +1,502 @@
+/**
+ * 运行时主题 / 密度 / 色板
+ *
+ * - CSS 变量由 @mtn-ui-z/theme 在 :root 提供默认值；业务未分层样式写在最后可覆盖 theme（见 theme README 的 @layer 说明）。
+ * - 亮/暗：`setThemeMode` 维护 `data-theme="dark"`（亮为移除属性），与 `[data-theme="dark"]` 令牌对齐。
+ * - 紧凑：`setDensityMode` 维护 `data-mtn-density="compact"`（舒适为移除属性）。
+ * - Ant：根组件使用 ConfigProvider，`:theme` 绑定含 `antThemeConfigRef` 与 `algorithm`（随 themeModeRef），见官方定制主题文档。
+ */
+
+import { nextTick, ref } from 'vue'
+
+/** 可覆盖的主题色（与 theme tokens 中变量对应） */
+export interface ThemeColorOverrides {
+  primary?: string
+  primaryHover?: string
+  primaryActive?: string
+  success?: string
+  successHover?: string
+  warning?: string
+  warningHover?: string
+  danger?: string
+  dangerHover?: string
+  dangerActive?: string
+  info?: string
+  infoHover?: string
+}
+
+/** 亮色 / 暗色模式 */
+export type ThemeMode = 'light' | 'dark'
+
+/**
+ * 全局紧凑程度（与 html 上 data-mtn-density 一致）
+ * - default：舒适，不写属性
+ * - compact：紧凑，写入 data-mtn-density="compact"
+ */
+export type DensityMode = 'default' | 'compact'
+
+/** 色板名：`default` 表示不设置 data-mtn-preset；其余需 @mtn-ui-z/theme 或业务提供对应样式 */
+export const MTN_THEME_PRESETS = ['default', 'ocean'] as const
+
+/** documentElement 上 data-mtn-preset 的合法值 */
+export type MtnThemePreset = (typeof MTN_THEME_PRESETS)[number]
+
+const MTN_PRESET_ATTR = 'data-mtn-preset'
+
+/**
+ * Ant Design Vue 4 ConfigProvider 的 theme.token 子集
+ * 颜色/圆角来自 CSS 变量；尺寸类来自 --mtn-control-height、--mtn-padding-* 等（随密度变化）
+ */
+export interface MtnAntThemeToken {
+  colorPrimary?: string
+  colorPrimaryHover?: string
+  colorPrimaryActive?: string
+  /** Link 按钮/文本色（如 ant-btn-link、a 链接） */
+  colorLink?: string
+  colorLinkHover?: string
+  colorLinkActive?: string
+  borderRadius?: number
+  colorBgBase?: string
+  colorText?: string
+  colorTextSecondary?: string
+  colorBorder?: string
+  colorSuccess?: string
+  colorWarning?: string
+  colorError?: string
+  colorInfo?: string
+  /** 控件高度（px 数值），对应 --mtn-control-height */
+  controlHeight?: number
+  fontSize?: number
+  padding?: number
+  paddingXS?: number
+  paddingSM?: number
+  paddingLG?: number
+  margin?: number
+  marginXS?: number
+  marginSM?: number
+  marginLG?: number
+}
+
+/** 当前主题模式（亮/暗），供 ConfigProvider 与 algorithm 组合使用，并同步到 document.documentElement 的 data-theme */
+export const themeModeRef = ref<ThemeMode>('light')
+
+/** 当前密度（舒适 / 紧凑），与 data-mtn-density 同步 */
+export const densityModeRef = ref<DensityMode>('default')
+
+const THEME_VAR_MAP: Record<keyof ThemeColorOverrides, string> = {
+  primary: '--color-primary',
+  primaryHover: '--color-primary-hover',
+  primaryActive: '--color-primary-active',
+  success: '--color-success',
+  successHover: '--color-success-hover',
+  warning: '--color-warning',
+  warningHover: '--color-warning-hover',
+  danger: '--color-danger',
+  dangerHover: '--color-danger-hover',
+  dangerActive: '--color-danger-active',
+  info: '--color-info',
+  infoHover: '--color-info-hover'
+}
+
+function hexLighten(hex: string, percent: number): string {
+  const n = Math.round((percent / 100) * 255)
+  const r = Math.min(255, parseInt(hex.slice(1, 3), 16) + n)
+  const g = Math.min(255, parseInt(hex.slice(3, 5), 16) + n)
+  const b = Math.min(255, parseInt(hex.slice(5, 7), 16) + n)
+  return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')
+}
+
+function hexDarken(hex: string, percent: number): string {
+  const n = Math.round((percent / 100) * 255)
+  const r = Math.max(0, parseInt(hex.slice(1, 3), 16) - n)
+  const g = Math.max(0, parseInt(hex.slice(3, 5), 16) - n)
+  const b = Math.max(0, parseInt(hex.slice(5, 7), 16) - n)
+  return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')
+}
+
+const DEFAULT_PRIMARY = '#409eff'
+const DEFAULT_HOVER_LIGHTEN = 15
+const DEFAULT_ACTIVE_DARKEN = 10
+const DEFAULT_BORDER_RADIUS = 4
+const DEFAULT_CONTROL_HEIGHT = 32
+const DEFAULT_FONT_SIZE = 14
+const DEFAULT_PADDING_MD = 16
+const DEFAULT_PADDING_SM = 12
+const DEFAULT_PADDING_XS = 8
+const DEFAULT_PADDING_LG = 24
+const DEFAULT_MARGIN_MD = 16
+const DEFAULT_MARGIN_SM = 12
+const DEFAULT_MARGIN_XS = 8
+const DEFAULT_MARGIN_LG = 24
+
+function readCssVar(name: string): string {
+  if (typeof document === 'undefined') return ''
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
+/** 解析 "14px" / "14" → 整数 px，供 Ant token 使用 */
+function parsePxInt(value: string, fallback: number): number {
+  const v = value.trim()
+  if (!v) return fallback
+  const n = parseFloat(v)
+  return Number.isFinite(n) ? Math.round(n) : fallback
+}
+
+/** 供 Ant Design Vue ConfigProvider 使用的主题配置（响应式），绑定 :theme="antThemeConfigRef" 即可 */
+export const antThemeConfigRef = ref<{ token: MtnAntThemeToken }>({
+  token: {
+    colorPrimary: DEFAULT_PRIMARY,
+    colorPrimaryHover: hexLighten(DEFAULT_PRIMARY, DEFAULT_HOVER_LIGHTEN),
+    colorPrimaryActive: hexDarken(DEFAULT_PRIMARY, DEFAULT_ACTIVE_DARKEN),
+    borderRadius: DEFAULT_BORDER_RADIUS,
+    controlHeight: DEFAULT_CONTROL_HEIGHT,
+    fontSize: DEFAULT_FONT_SIZE,
+    padding: DEFAULT_PADDING_MD,
+    paddingXS: DEFAULT_PADDING_XS,
+    paddingSM: DEFAULT_PADDING_SM,
+    paddingLG: DEFAULT_PADDING_LG,
+    margin: DEFAULT_MARGIN_MD,
+    marginXS: DEFAULT_MARGIN_XS,
+    marginSM: DEFAULT_MARGIN_SM,
+    marginLG: DEFAULT_MARGIN_LG
+  }
+})
+
+/**
+ * 从当前 document 计算样式读取 CSS 变量，写入 antThemeConfigRef（亮/暗、密度、预设、setThemePrimary 后由内部 nextTick 调用）
+ */
+export function syncAntTokensFromCssVars(): void {
+  if (typeof document === 'undefined') return
+  const g = readCssVar
+  const rb = g('--radius-base')
+  const borderRadius = Math.round(parseFloat(rb)) || DEFAULT_BORDER_RADIUS
+  antThemeConfigRef.value = {
+    token: {
+      ...antThemeConfigRef.value.token,
+      colorPrimary: g('--color-primary') || antThemeConfigRef.value.token.colorPrimary,
+      colorPrimaryHover: g('--color-primary-hover') || antThemeConfigRef.value.token.colorPrimaryHover,
+      colorPrimaryActive: g('--color-primary-active') || antThemeConfigRef.value.token.colorPrimaryActive,
+      colorLink: g('--color-primary') || antThemeConfigRef.value.token.colorLink,
+      colorLinkHover: g('--color-primary-hover') || antThemeConfigRef.value.token.colorLinkHover,
+      colorLinkActive: g('--color-primary-active') || antThemeConfigRef.value.token.colorLinkActive,
+      borderRadius,
+      colorBgBase: g('--color-bg-base'),
+      colorText: g('--color-text-primary'),
+      colorTextSecondary: g('--color-text-secondary'),
+      colorBorder: g('--color-border-base'),
+      colorSuccess: g('--color-success'),
+      colorWarning: g('--color-warning'),
+      colorError: g('--color-danger'),
+      colorInfo: g('--color-info'),
+      controlHeight: parsePxInt(g('--mtn-control-height'), DEFAULT_CONTROL_HEIGHT),
+      fontSize: parsePxInt(g('--mtn-font-size-base'), DEFAULT_FONT_SIZE),
+      padding: parsePxInt(g('--mtn-padding-md'), DEFAULT_PADDING_MD),
+      paddingXS: parsePxInt(g('--mtn-padding-xs'), DEFAULT_PADDING_XS),
+      paddingSM: parsePxInt(g('--mtn-padding-sm'), DEFAULT_PADDING_SM),
+      paddingLG: parsePxInt(g('--mtn-padding-lg'), DEFAULT_PADDING_LG),
+      margin: parsePxInt(g('--mtn-margin-md'), DEFAULT_MARGIN_MD),
+      marginXS: parsePxInt(g('--mtn-margin-xs'), DEFAULT_MARGIN_XS),
+      marginSM: parsePxInt(g('--mtn-margin-sm'), DEFAULT_MARGIN_SM),
+      marginLG: parsePxInt(g('--mtn-margin-lg'), DEFAULT_MARGIN_LG)
+    }
+  }
+}
+
+export interface ApplyMtnThemeOptions {
+  mode?: ThemeMode
+  /** 舒适 default / 紧凑 compact */
+  density?: DensityMode
+  preset?: MtnThemePreset | string | null
+  colors?: ThemeColorOverrides
+  /** 合并到 token，在 sync 之后应用，可覆盖从 CSS 读到的值 */
+  antToken?: Partial<MtnAntThemeToken>
+}
+
+/** 一键应用：模式 / 密度 / 预设 / 颜色 / 可选 Ant token，并在下一 tick 与 CSS 变量对齐 */
+export function applyMtnTheme(opts: ApplyMtnThemeOptions): void {
+  if (opts.mode != null) setThemeMode(opts.mode)
+  if (opts.density != null) setDensityMode(opts.density)
+  if (opts.preset !== undefined) setThemePreset(opts.preset)
+  if (opts.colors != null && Object.keys(opts.colors).length > 0) {
+    setThemeColors(opts.colors)
+  }
+  nextTick(() => {
+    syncAntTokensFromCssVars()
+    if (opts.antToken != null && Object.keys(opts.antToken).length > 0) {
+      antThemeConfigRef.value = {
+        token: { ...antThemeConfigRef.value.token, ...opts.antToken }
+      }
+    }
+  })
+}
+
+/**
+ * 设置主题色（写 CSS 变量 + 同步 Ant ConfigProvider token）
+ * 会写入 document.documentElement.style，并更新 antThemeConfigRef
+ *
+ * @param colors 要覆盖的颜色，键为 camelCase（如 primary、primaryHover）
+ */
+export function setThemeColors(colors: ThemeColorOverrides): void {
+  if (colors.primary != null) {
+    const hover =
+      colors.primaryHover ?? hexLighten(colors.primary, DEFAULT_HOVER_LIGHTEN)
+    const active =
+      colors.primaryActive ?? hexDarken(colors.primary, DEFAULT_ACTIVE_DARKEN)
+
+    if (typeof document !== 'undefined') {
+      const root = document.documentElement
+      for (const [key, value] of Object.entries(colors)) {
+        if (value == null) continue
+        const cssVar = THEME_VAR_MAP[key as keyof ThemeColorOverrides]
+        if (cssVar) root.style.setProperty(cssVar, value)
+      }
+      root.style.setProperty('--ant-primary-color', colors.primary)
+      root.style.setProperty('--ant-primary-color-hover', hover)
+      root.style.setProperty('--ant-primary-color-active', active)
+      root.style.setProperty('--ant-color-link', colors.primary)
+      root.style.setProperty('--ant-color-link-hover', hover)
+      root.style.setProperty('--ant-color-link-active', active)
+    }
+
+    antThemeConfigRef.value = {
+      token: {
+        ...antThemeConfigRef.value.token,
+        colorPrimary: colors.primary,
+        colorPrimaryHover: hover,
+        colorPrimaryActive: active,
+        colorLink: colors.primary,
+        colorLinkHover: hover,
+        colorLinkActive: active
+      }
+    }
+    nextTick(() => syncAntTokensFromCssVars())
+  } else if (typeof document !== 'undefined') {
+    const root = document.documentElement
+    for (const [key, value] of Object.entries(colors)) {
+      if (value == null) continue
+      const cssVar = THEME_VAR_MAP[key as keyof ThemeColorOverrides]
+      if (cssVar) root.style.setProperty(cssVar, value)
+    }
+    nextTick(() => syncAntTokensFromCssVars())
+  }
+}
+
+/**
+ * 仅设置主色，并自动生成 hover/active（简单变亮/变深）
+ * 会更新 antThemeConfigRef，需在根节点用 <a-config-provider :theme="antThemeConfigRef"> 包裹才能生效
+ *
+ * @param primary 主色，如 '#1890ff'
+ * @param hoverLighten hover 时亮度增加比例，默认 15
+ * @param activeDarken active 时亮度降低比例，默认 10
+ */
+export function setThemePrimary(
+  primary: string,
+  hoverLighten = DEFAULT_HOVER_LIGHTEN,
+  activeDarken = DEFAULT_ACTIVE_DARKEN
+): void {
+  const isHex = /^#[0-9A-Fa-f]{6}$/.test(primary)
+  if (!isHex) {
+    if (typeof process !== 'undefined' ? process.env.NODE_ENV !== 'production' : true) {
+      console.warn('[mtn-ui] setThemePrimary 建议使用 6 位十六进制色，如 #1890ff')
+    }
+    setThemeColors({ primary })
+    return
+  }
+  setThemeColors({
+    primary,
+    primaryHover: hexLighten(primary, hoverLighten),
+    primaryActive: hexDarken(primary, activeDarken)
+  })
+}
+
+/**
+ * 切换亮色/暗色模式
+ * - 更新 themeModeRef，便于与 Ant Design Vue 的 theme.defaultAlgorithm / theme.darkAlgorithm 组合
+ * - 暗色：`data-theme="dark"`；亮色：移除 `data-theme`（与 SCSS theme-mixins 中 :root 亮主题一致）
+ * - Tailwind `dark:`：请配置 `darkMode: ['selector', '[data-theme="dark"]']` 或使用 class 策略
+ */
+export function setThemeMode(
+  mode: ThemeMode,
+  options?: { persist?: boolean; storageKey?: string }
+): void {
+  if (typeof document === 'undefined') return
+  themeModeRef.value = mode
+  const root = document.documentElement
+  if (mode === 'dark') {
+    root.setAttribute('data-theme', 'dark')
+  } else {
+    root.removeAttribute('data-theme')
+  }
+  if (options?.persist) {
+    persistThemeMode(mode, { storageKey: options.storageKey })
+  }
+  nextTick(() => syncAntTokensFromCssVars())
+}
+
+/**
+ * 在亮色与暗色之间切换，并返回切换后的模式
+ */
+export function toggleThemeMode(options?: { persist?: boolean; storageKey?: string }): ThemeMode {
+  const next: ThemeMode = themeModeRef.value === 'dark' ? 'light' : 'dark'
+  setThemeMode(next, options)
+  return next
+}
+
+/** 当前亮/暗模式 */
+export function getThemeMode(): ThemeMode {
+  return themeModeRef.value
+}
+
+const THEME_MODE_STORAGE_KEY = 'mtn-ui-theme-mode'
+const DENSITY_STORAGE_KEY = 'mtn-ui-density-mode'
+
+const MTN_DENSITY_ATTR = 'data-mtn-density'
+
+/**
+ * 设置全局密度（紧凑 / 舒适），并可选持久化
+ */
+export function setDensityMode(
+  mode: DensityMode,
+  options?: { persist?: boolean; storageKey?: string }
+): void {
+  if (typeof document === 'undefined') return
+  densityModeRef.value = mode
+  const root = document.documentElement
+  if (mode === 'compact') {
+    root.setAttribute(MTN_DENSITY_ATTR, 'compact')
+  } else {
+    root.removeAttribute(MTN_DENSITY_ATTR)
+  }
+  if (options?.persist) {
+    persistDensityMode(mode, { storageKey: options?.storageKey })
+  }
+  nextTick(() => syncAntTokensFromCssVars())
+}
+
+export function getDensityMode(): DensityMode {
+  return densityModeRef.value
+}
+
+/**
+ * 在紧凑与舒适之间切换
+ */
+export function toggleDensityMode(options?: { persist?: boolean; storageKey?: string }): DensityMode {
+  const next: DensityMode = densityModeRef.value === 'compact' ? 'default' : 'compact'
+  setDensityMode(next, options)
+  return next
+}
+
+/**
+ * 从 localStorage 恢复密度（与 initTheme 搭配，尽早调用）
+ */
+export function initDensityFromStorage(options?: { storageKey?: string }): DensityMode {
+  if (typeof window === 'undefined') return densityModeRef.value
+  const key = options?.storageKey ?? DENSITY_STORAGE_KEY
+  try {
+    const raw = window.localStorage.getItem(key)
+    if (raw === 'compact') {
+      setDensityMode('compact')
+      return 'compact'
+    }
+    if (raw === 'default') {
+      setDensityMode('default')
+      return 'default'
+    }
+  } catch {
+    /* ignore */
+  }
+  return densityModeRef.value
+}
+
+export function persistDensityMode(mode: DensityMode, options?: { storageKey?: string }): void {
+  if (typeof window === 'undefined') return
+  const key = options?.storageKey ?? DENSITY_STORAGE_KEY
+  try {
+    window.localStorage.setItem(key, mode)
+  } catch {
+    /* ignore */
+  }
+}
+
+/**
+ * 从 localStorage 恢复亮/暗（应用入口尽早调用以减少闪烁）
+ */
+export function initThemeFromStorage(options?: { storageKey?: string }): ThemeMode {
+  if (typeof window === 'undefined') return themeModeRef.value
+  const key = options?.storageKey ?? THEME_MODE_STORAGE_KEY
+  try {
+    const raw = window.localStorage.getItem(key)
+    if (raw === 'dark' || raw === 'light') {
+      setThemeMode(raw)
+      return raw
+    }
+  } catch {
+    /* 私有模式等 */
+  }
+  return themeModeRef.value
+}
+
+export function persistThemeMode(mode: ThemeMode, options?: { storageKey?: string }): void {
+  if (typeof window === 'undefined') return
+  const key = options?.storageKey ?? THEME_MODE_STORAGE_KEY
+  try {
+    window.localStorage.setItem(key, mode)
+  } catch {
+    /* ignore */
+  }
+}
+
+/**
+ * 初始化：从 localStorage 恢复亮/暗与密度；无记录时可选跟随 prefers-color-scheme；最后同步 Ant token
+ */
+export function initTheme(options?: {
+  storageKey?: string
+  densityStorageKey?: string
+  preferColorScheme?: boolean
+}): ThemeMode {
+  if (typeof window === 'undefined') return themeModeRef.value
+  const key = options?.storageKey ?? THEME_MODE_STORAGE_KEY
+  const densityKey = options?.densityStorageKey ?? DENSITY_STORAGE_KEY
+  const modeAfterStorage = initThemeFromStorage({ storageKey: key })
+  initDensityFromStorage({ storageKey: densityKey })
+  let hadStored = false
+  try {
+    const raw = window.localStorage.getItem(key)
+    hadStored = raw === 'dark' || raw === 'light'
+  } catch {
+    /* ignore */
+  }
+  if (hadStored) {
+    nextTick(() => syncAntTokensFromCssVars())
+    return modeAfterStorage
+  }
+  if (options?.preferColorScheme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    setThemeMode('dark')
+    nextTick(() => syncAntTokensFromCssVars())
+    return 'dark'
+  }
+  nextTick(() => syncAntTokensFromCssVars())
+  return themeModeRef.value
+}
+
+/**
+ * 切换色板预设（仅设置 document 上 data-mtn-preset；样式需业务或未来 @mtn-ui-z/theme 提供）
+ * - 与亮/暗正交：可同时 data-theme="dark" + data-mtn-preset="ocean"
+ * - `default` / `null` / `''` 会移除 data-mtn-preset
+ */
+export function setThemePreset(preset: MtnThemePreset | string | null | undefined): void {
+  if (typeof document === 'undefined') return
+  const root = document.documentElement
+  if (preset == null || preset === '' || preset === 'default') {
+    root.removeAttribute(MTN_PRESET_ATTR)
+  } else {
+    root.setAttribute(MTN_PRESET_ATTR, preset)
+  }
+  nextTick(() => syncAntTokensFromCssVars())
+}
+
+/** 当前 data-mtn-preset，未设置时为 null */
+export function getThemePreset(): string | null {
+  if (typeof document === 'undefined') return null
+  return document.documentElement.getAttribute(MTN_PRESET_ATTR)
+}

package/src/types.d.ts

@@ -0,0 +1,6 @@
+export type {
+  MaybeRef,
+  MaybeRefOrGetter,
+  Pausable,
+  Stoppable
+} from '@vueuse/core'

package/src/types.ts

@@ -0,0 +1,11 @@
+/**
+ * 类型定义
+ * VueUse 相关的类型导出
+ */
+
+export type {
+  MaybeRef,
+  MaybeRefOrGetter,
+  Pausable,
+  Stoppable
+} from '@vueuse/core'

package/src/useModal.ts

@@ -0,0 +1,110 @@
+/**
+ * Modal 命令式调用 hook
+ * 用法：
+ * const modal = useModal(MyModalComponent)
+ * modal.show({ title: '标题', row: { id: 1 } })
+ */
+import { ref, type Component } from 'vue'
+import { ModalRegistry } from './modalRegistry'
+
+export interface UseModalOptions {
+  /**
+   * Modal 唯一 ID（不传则自动生成）
+   */
+  id?: string
+  /**
+   * Modal 关闭后是否销毁实例
+   */
+  destroyOnClose?: boolean
+}
+
+export interface UseModalShowOptions {
+  /**
+   * 业务数据
+   */
+  row?: unknown
+  /**
+   * 其他 a-modal props
+   */
+  [key: string]: unknown
+}
+
+export interface UseModalReturn {
+  show: (options?: UseModalShowOptions) => void
+  hide: () => void
+  destroy: () => void
+  visible: ReturnType<typeof ref<boolean>>
+}
+
+function getModalProvider() {
+  return (globalThis as any).__mtnModalProvider__ ?? null
+}
+
+function genId(prefix: string) {
+  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
+}
+
+/**
+ * 命令式 Modal Hook
+ */
+export function useModal<T extends Component>(
+  modalComponent: T,
+  options: UseModalOptions = {}
+): UseModalReturn {
+  // 用组件对象本身作为 id 前缀，保证唯一性
+  const id = options.id ?? genId((modalComponent as any).name ?? 'modal')
+
+  // 先注册组件（provider 会在渲染时从 registry 取）
+  ModalRegistry.register(id, modalComponent)
+
+  const visible = ref(false)
+
+  function show(opts: UseModalShowOptions = {}) {
+    const provider = getModalProvider()
+    if (!provider) {
+      console.warn('[useModal] ModalProvider 未挂载，请确保 App.vue 中使用了 <MtnModalProvider>')
+      return
+    }
+
+    // 合并 props：open + 用户传入的 options + 关闭回调
+    provider.register(id, modalComponent, {
+      ...opts,
+      open: true,
+      onCancel: (...args: unknown[]) => {
+        ;(opts.onCancel as Function)?.(...args)
+        hide()
+      },
+      onOk: (...args: unknown[]) => {
+        ;(opts.onOk as Function)?.(...args)
+        if (options.destroyOnClose) {
+          destroy()
+        } else {
+          hide()
+        }
+      }
+    })
+
+    visible.value = true
+  }
+
+  function hide() {
+    const provider = getModalProvider()
+    if (provider) {
+      // 通知 antd modal 开始关闭动画（open: false 触发 @update:open 事件）
+      provider.update(id, { open: false })
+    }
+    visible.value = false
+  }
+
+  function destroy() {
+    const provider = getModalProvider()
+    if (provider) {
+      // 触发关闭动画，等 @update:open(false) + 300ms 动画结束后 confirmClose 会自动删
+      provider.update(id, { open: false })
+    }
+    visible.value = false
+    ModalRegistry.unregister(id)
+  }
+
+  return { show, hide, destroy, visible }
+}