@keyfunc/keybricks-ds 2.5.0 → 2.6.0

package/components/feedback/Drawer.vue

@@ -14,10 +14,10 @@ const contents = { display: 'contents' }
       :style="inline ? contents : { position: 'fixed', inset: 0, zIndex: 'var(--z-modal)', background: 'var(--bg-scrim)', display: 'flex', justifyContent: 'flex-end', animation: 'kb-fade-in var(--dur-fast) var(--ease-out)' }">
       <div @click.stop :style="inline ? contents : { height: '100%', animation: 'kb-slide-in var(--dur) var(--ease-out)' }">
         <div role="dialog" :aria-label="title" :data-size="size"
-          :style="{ width: px(width), maxWidth: '100%', height: inline ? px(height) : '100%', background: 'var(--bg-raised)', borderLeft: '1px solid var(--border-card)', boxShadow: inline ? 'var(--shadow-menu)' : '-8px 0 24px rgba(0,0,0,.12)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', ...(inline ? { border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)' } : null), ...style }">
+          :style="{ width: px(width), maxWidth: '100%', height: inline ? px(height) : '100%', background: 'var(--bg-raised)', borderLeft: '1px solid var(--border-card)', boxShadow: inline ? 'var(--shadow-menu)' : 'var(--shadow-drawer)', display: 'flex', flexDirection: 'column', boxSizing: 'border-box', ...(inline ? { border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)' } : null), ...style }">
           <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--border-card);flex-shrink:0">
-            <div style="display:flex;flex-direction:column;gap:3px">
-              <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading)">{{ title }}</span>
+            <div style="display:flex;flex-direction:column;gap:3px;min-width:0">
+              <span style="font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);color:var(--text-heading);min-width:0;overflow-wrap:anywhere">{{ title }}</span>
               <span v-if="subtitle" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ subtitle }}</span>
             </div>
             <IconButton icon="x" label="Close" :style="{ margin: 'calc((var(--leading-md) - var(--control-h)) / 2) -6px 0 0' }" @click="emit('close')" />

package/components/feedback/MESSAGE_SERVICES.md

@@ -0,0 +1,71 @@
+# Vue 消息服务与 Element Plus 迁移
+
+2.6.0 新增源码入口，适用于 Vue 3，复用 Keybricks Toast、Button、IconButton 和 Icon。
+本次仅补齐源码，未执行测试、类型检查、构建或浏览器验证，也尚未发布。
+
+```js
+import Message from '@keyfunc/keybricks-ds/vue/message'
+import MessageBox from '@keyfunc/keybricks-ds/vue/message-box'
+import '@keyfunc/keybricks-ds/styles.css'
+
+const notice = Message({ message: '保存成功', type: 'success', showClose: true })
+notice.close()
+Message.warning({ message: '请检查输入', duration: 6000 })
+Message.closeAll()
+
+await MessageBox.confirm('确认删除？', '删除', {
+  confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning',
+})
+const { value } = await MessageBox.prompt('请输入名称', '新建', {
+  inputValidator: value => value.trim() ? true : '名称不能为空',
+})
+```
+
+## 已提供的能力
+
+| 原接口 | 新服务 |
+| --- | --- |
+| `ElMessage(options / string / VNode)` | `Message(...)`，返回 `{ close() }` |
+| `success / info / warning / error` | 同名快捷方法 |
+| `duration / showClose / offset / zIndex / customClass / center` | 支持；默认 3000 毫秒，0 不自动关闭 |
+| 消息堆叠与 `grouping` | 同一挂载目标按真实高度向下堆叠；分组显示重复次数并重置计时 |
+| 悬停与焦点暂停计时 | 支持，离开后重新计时 |
+| `onClose / closeAll(type?)` | 支持，手动及自动关闭均清理实例 |
+| `MessageBox(options)` | 返回 Promise，弹窗按调用顺序排队 |
+| `alert / confirm / prompt` | 支持 `(message, title?, options?, appContext?)` 和 `(message, options?, appContext?)` |
+| 确认、取消、关闭 | 确认 resolve；取消 reject `'cancel'`；关闭默认 reject `'cancel'`，开启 `distinguishCancelAndClose` 后 reject `'close'` |
+| 输入结果 | `showInput` 开启时确认返回 `{ value, action: 'confirm' }`，包括 confirm 配合 `showInput` 的场景 |
+| `inputValue / inputType / inputPlaceholder` | 支持，`textarea` 支持换行 |
+| `inputPattern / inputValidator / inputErrorMessage` | 支持；额外支持异步校验，输入变更或关闭后忽略过期结果 |
+| `beforeClose(action, instance, done)` | 调用 done 才关闭；instance 提供可写的输入值、按钮文案、loading、disabled 等状态 |
+| `callback` | 有 callback 时按原服务方式回调，不结算返回的 Promise；开启输入时回调第一个参数为 `{ value, action }` |
+| `MessageBox.close()` | 清空队列，不调用操作回调，不结算已有 Promise |
+| 按钮显示、文案、class、loading、disabled | 支持；`el-button--danger` 显式映射为 DS danger 按钮 |
+| `closeOnClickModal / closeOnPressEscape / showClose` | 分别控制遮罩、Esc、关闭按钮；alert 默认禁用遮罩和 Esc 关闭 |
+| 键盘及滚动 | 焦点圈定、初始聚焦、关闭还原焦点、引用计数锁定 body 滚动 |
+| 内容及图标 | 消息支持字符串、VNode、返回 VNode 的函数；icon 支持 DS 图标名、Vue 组件或 VNode |
+| `appendTo / appContext` | 支持挂载目标和应用上下文，后者作为第二参数或快捷方法最后一个参数传入 |
+
+## 兼容边界
+
+这不是 Element Plus 的完整同构实现，不能宣称任意项目可完美替换。
+
+- 默认采用 DS 外观和 class；原来的 `.el-message`、`.el-message-box` 等选择器及依赖其 DOM 的逻辑需要调整。`customClass` 会保留，应用需检查类名对应的具体规则。
+- 不读取 Element Plus 的 ConfigProvider、locale、全局 zIndex 或应用插件配置。可通过 `Message.defaults` 和 `MessageBox.defaults` 设置文案、层级、挂载目标；切换语言时更新 defaults。默认按钮文案为英文。
+- 默认层级采用 `--z-toast / --z-modal`。与 Element Plus 弹层混用时，应用应根据现有弹层层级设置 defaults.zIndex。
+- 不提供 `draggable / overflow / buttonSize / closeIcon / loadingIcon / showHeader`、消息 `placement` 等完整扩展接口；`plain` 当前仅移除消息阴影。实例不是 Element Plus 的组件内部实例，仅提供文档约定的状态。
+- `appendTo` 只改变挂载节点，定位仍为 fixed；自定义目标的 transform、主题、语言继承以及与其他弹层的焦点管理需要应用确认。
+- 默认字符串按文本渲染。`dangerouslyUseHTMLString` 显式开启后按 HTML 渲染；DS 不做 HTML 净化，应用必须保留自己的安全处理。
+- 本服务仅支持 Vue；React 原有 Toast、Modal 接口不受影响。服务使用独立子路径导出，不依赖生成的 Vue barrel。
+
+## emp2 的接入边界
+
+`vue3/ts/message.ts` 中的业务行为应保留：HTML 净化、错误脱敏、SAP 字符处理、国际化、错误详情开关、默认持续时间、基于 id 的去重和 `closeMessage`。
+DS 发布并更新应用安装版本后，再把文件里的 `ElMessage / ElMessageBox` 导入改为上述两个服务；业务封装继续调用相同方法。
+接入时还需配置当前语言的默认按钮文案、与现有弹层兼容的 zIndex，并检查 `limited-height-message` 和其他依赖 Element DOM 的自定义样式。
+本轮未修改业务封装，也未修改应用依赖或 lock 文件。
+
+## 发布说明
+
+源码版本已更新为 2.6.0，changelog 标记为 unreleased。发布前需要由维护者执行仓库正常的生成及检查流程，使包含包版本的 token 元数据同步到新版本。
+按本次任务约束，未运行这些命令，未查看或修改生成的 barrel、token 产物、文档 bundle 或 dist，也未执行 Git 操作。

package/components/feedback/Toast.vue

@@ -3,17 +3,17 @@ import { computed } from 'vue'
 import Icon from '../icons/Icon.vue'
 import IconButton from '../buttons/IconButton.vue'
 const toastTones = { success: { icon: 'circle-check', color: 'var(--success-strong)' }, danger: { icon: 'triangle-alert', color: 'var(--danger)' }, warning: { icon: 'triangle-alert', color: 'var(--warning)' }, info: { icon: 'info', color: 'var(--action-primary)' } }
-const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, style: Object })
+const props = defineProps({ tone: { type: String, default: 'success' }, title: String, meta: String, dismissible: Boolean, closeLabel: { type: String, default: 'Dismiss' }, style: Object })
 const emit = defineEmits(['close'])
-const t = computed(() => toastTones[props.tone])
+const t = computed(() => toastTones[props.tone] || toastTones.info)
 </script>
 <template>
   <div :style="{ display: 'flex', alignItems: 'flex-start', gap: '10px', minWidth: '280px', maxWidth: '380px', background: 'var(--bg-raised)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-menu)', padding: '12px 12px 12px 14px', animation: 'kb-toast-in var(--dur) var(--ease-out)', ...style }">
-    <span :style="{ color: t.color, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><Icon :name="t.icon" :size="16" /></span>
+    <span :style="{ color: t.color, display: 'inline-flex', alignItems: 'center', flexShrink: 0, height: 'var(--leading-base)' }"><slot name="icon"><Icon :name="t.icon" :size="16" /></slot></span>
     <div style="display:flex;flex-direction:column;flex:1;min-width:0">
-      <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
+      <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading);overflow-wrap:anywhere"><slot>{{ title }}</slot></span>
       <span v-if="meta" style="font-family:var(--font-sans);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)">{{ meta }}</span>
     </div>
-    <IconButton v-if="dismissible" icon="x" size="sm" muted label="Dismiss" :style="{ margin: '-2px 0' }" @click="emit('close')" />
+    <IconButton v-if="dismissible" icon="x" size="sm" muted :label="closeLabel" :style="{ margin: '-2px 0' }" @click="emit('close')" />
   </div>
 </template>

package/components/feedback/_internal/MessageBoxView.vue

@@ -0,0 +1,237 @@
+<script setup>
+import { computed, h, isVNode, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import Button from '../../buttons/Button.vue'
+import IconButton from '../../buttons/IconButton.vue'
+import Icon from '../../icons/Icon.vue'
+import { contentNode, lockBody } from './service-utils.js'
+
+const props = defineProps({ options: { type: Object, required: true } })
+const emit = defineEmits(['action'])
+const panel = ref(null)
+const input = ref(null)
+const error = ref('')
+const validating = ref(false)
+const Content = () => contentNode(props.options.message, props.options.dangerouslyUseHTMLString)
+const Title = () => contentNode(props.options.title)
+const icons = { success: 'circle-check', warning: 'triangle-alert', error: 'triangle-alert', info: 'info' }
+const colors = { success: 'var(--success-strong)', warning: 'var(--warning)', error: 'var(--danger)', info: 'var(--action-primary)' }
+const icon = computed(() => props.options.icon || icons[props.options.type])
+const CustomIcon = () => isVNode(icon.value) ? icon.value : h(icon.value)
+const confirmVariant = computed(() => props.options.confirmButtonClass?.includes('el-button--danger') ? 'danger' : 'primary')
+let unlock
+let previousFocus
+let disposed = false
+let validationRevision = 0
+
+async function confirm() {
+  const options = props.options
+  if (validating.value || options.confirmButtonDisabled || options.confirmButtonLoading) return
+  if (options.showInput) {
+    const revision = ++validationRevision
+    const value = options.inputValue ?? ''
+    validating.value = true
+    let message = ''
+    try {
+      if (options.inputPattern) {
+        // 避免全局正则的 lastIndex 导致同一输入校验结果交替。
+        const pattern = new RegExp(options.inputPattern.source, options.inputPattern.flags)
+        if (!pattern.test(value)) message = options.inputErrorMessage || 'Invalid input'
+      }
+      if (!message && options.inputValidator) {
+        const result = await options.inputValidator(value)
+        if (result === false || typeof result === 'string') message = result || options.inputErrorMessage || 'Invalid input'
+      }
+    } catch (reason) {
+      message = options.inputErrorMessage || reason?.message || 'Invalid input'
+    } finally {
+      validating.value = false
+    }
+    if (disposed || revision !== validationRevision) return
+    error.value = message
+    if (message) { input.value?.focus(); return }
+  }
+  emit('action', 'confirm')
+}
+
+function close() { emit('action', 'close') }
+function onKeydown(event) {
+  if (event.key === 'Escape' && props.options.closeOnPressEscape) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+    close()
+  }
+  if (event.key !== 'Tab') return
+  const focusable = [...panel.value.querySelectorAll('button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), a[href], [tabindex]:not([tabindex="-1"])')]
+    .filter(node => node.getClientRects().length)
+  const first = focusable[0], last = focusable[focusable.length - 1]
+  if (!first) { event.preventDefault(); panel.value.focus(); return }
+  if (event.shiftKey && (document.activeElement === first || !panel.value.contains(document.activeElement))) {
+    event.preventDefault(); last.focus()
+  } else if (!event.shiftKey && (document.activeElement === last || !panel.value.contains(document.activeElement))) {
+    event.preventDefault(); first.focus()
+  }
+}
+function keepFocus(event) {
+  if (!panel.value.contains(event.target)) panel.value.focus()
+}
+function changeInput(event) {
+  validationRevision++
+  props.options.inputValue = event.target.value
+  error.value = ''
+}
+onMounted(async () => {
+  previousFocus = document.activeElement
+  if (props.options.lockScroll) unlock = lockBody()
+  document.addEventListener('keydown', onKeydown, true)
+  document.addEventListener('focusin', keepFocus)
+  await nextTick()
+  if (disposed || !props.options.autofocus) return
+  const target = input.value || panel.value.querySelector('[data-confirm] button') || panel.value
+  target.focus()
+  if (input.value) input.value.select()
+})
+onBeforeUnmount(() => {
+  disposed = true
+  unlock?.()
+  document.removeEventListener('keydown', onKeydown, true)
+  document.removeEventListener('focusin', keepFocus)
+  if (previousFocus?.isConnected) previousFocus.focus()
+})
+</script>
+
+<template>
+  <div
+    :class="['kb-message-box-overlay', options.modalClass]"
+    :style="{ zIndex: options.zIndex ?? 'var(--z-modal)', background: options.modal === false ? 'transparent' : undefined }"
+    @click.self="options.closeOnClickModal && close()"
+  >
+    <section
+      ref="panel"
+      :class="['kb-message-box', options.customClass, { 'kb-message-box--center': options.center, 'kb-message-box--round': options.roundButton }]"
+      :style="{ width: typeof options.width === 'number' ? `${options.width}px` : options.width }"
+      :data-size="options.size || 'lg'"
+      :aria-labelledby="`${options.id}-title`"
+      :aria-describedby="`${options.id}-content`"
+      role="alertdialog"
+      aria-modal="true"
+      tabindex="-1"
+    >
+      <header class="kb-message-box__header">
+        <span :id="`${options.id}-title`"><Title /></span>
+        <IconButton v-if="options.showClose" icon="x" :label="options.closeLabel || 'Close'" @click="close" />
+      </header>
+      <div :id="`${options.id}-content`" class="kb-message-box__body">
+        <div class="kb-message-box__message">
+          <span v-if="icon" :style="{ color: colors[options.type], display: 'inline-flex' }">
+            <Icon v-if="typeof icon === 'string'" :name="icon" :size="20" />
+            <CustomIcon v-else />
+          </span>
+          <div><Content /></div>
+        </div>
+        <div v-if="options.showInput" class="kb-message-box__input-wrap">
+          <component
+            :is="options.inputType === 'textarea' ? 'textarea' : 'input'"
+            ref="input"
+            class="kb-message-box__input"
+            :type="options.inputType === 'textarea' ? undefined : options.inputType"
+            :value="options.inputValue"
+            :placeholder="options.inputPlaceholder"
+            :aria-label="options.inputPlaceholder || options.title || 'Input'"
+            :aria-invalid="!!error"
+            :aria-describedby="error ? `${options.id}-error` : undefined"
+            @input="changeInput"
+            @keydown.enter="!$event.isComposing && options.inputType !== 'textarea' && confirm()"
+          />
+          <div v-if="error" :id="`${options.id}-error`" class="kb-message-box__error" role="alert">{{ error }}</div>
+        </div>
+      </div>
+      <footer class="kb-message-box__footer">
+        <Button
+          v-if="options.showCancelButton"
+          variant="outline"
+          :class="options.cancelButtonClass"
+          :disabled="options.cancelButtonDisabled"
+          :loading="options.cancelButtonLoading"
+          @click="emit('action', 'cancel')"
+        >
+          {{ options.cancelButtonText ?? 'Cancel' }}
+        </Button>
+        <span v-if="options.showConfirmButton" data-confirm>
+          <Button
+            :variant="confirmVariant"
+            :class="options.confirmButtonClass"
+            :disabled="options.confirmButtonDisabled"
+            :loading="options.confirmButtonLoading || validating"
+            @click="confirm"
+          >
+            {{ options.confirmButtonText ?? 'OK' }}
+          </Button>
+        </span>
+      </footer>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.kb-message-box-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-scrim);
+  animation: kb-fade-in var(--dur-fast) var(--ease-out);
+}
+.kb-message-box {
+  width: 440px;
+  max-width: 92vw;
+  max-height: 92vh;
+  overflow: auto;
+  box-sizing: border-box;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-modal);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-base);
+  letter-spacing: var(--tracking-base);
+  color: var(--text-body);
+  animation: kb-rise var(--dur) var(--ease-out);
+}
+.kb-message-box__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--group-gap);
+  padding: var(--section-gap) var(--section-gap) 0;
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-md);
+  line-height: var(--leading-md);
+  letter-spacing: var(--tracking-md);
+  color: var(--text-heading);
+}
+.kb-message-box__header > span { min-width: 0; overflow-wrap: anywhere; }
+.kb-message-box__body { padding: 20px var(--section-gap) 0; }
+.kb-message-box__message { display: flex; align-items: flex-start; gap: var(--control-px); }
+.kb-message-box__message > div { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+.kb-message-box__input-wrap { margin-top: var(--group-gap); }
+.kb-message-box__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--control-h);
+  padding: 0 var(--control-px);
+  font: inherit;
+  color: var(--text-heading);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-control);
+  border-radius: var(--radius-md);
+}
+.kb-message-box__input:focus { outline: none; border-color: var(--focus-border); box-shadow: var(--ring-focus); }
+.kb-message-box__input[aria-invalid="true"] { border-color: var(--danger); }
+.kb-message-box__error { margin-top: var(--control-gap); color: var(--danger-text); }
+.kb-message-box__footer { display: flex; justify-content: flex-end; gap: var(--control-gap); padding: var(--section-gap); }
+.kb-message-box--center .kb-message-box__message { justify-content: center; text-align: center; }
+.kb-message-box--center .kb-message-box__footer { justify-content: center; }
+.kb-message-box--round :deep(.kb-message-box__footer button) { border-radius: var(--radius-full) !important; }
+</style>

package/components/feedback/_internal/MessageView.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { computed, h, isVNode, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import Toast from '../Toast.vue'
+import Icon from '../../icons/Icon.vue'
+import { contentNode } from './service-utils.js'
+
+const props = defineProps({ options: { type: Object, required: true } })
+const emit = defineEmits(['close', 'height'])
+const root = ref(null)
+const tone = computed(() => props.options.type === 'error' ? 'danger' : props.options.type)
+const Content = () => contentNode(props.options.message, props.options.dangerouslyUseHTMLString)
+const CustomIcon = () => typeof props.options.icon === 'string'
+  ? h(Icon, { name: props.options.icon, size: 16 })
+  : isVNode(props.options.icon) ? props.options.icon : h(props.options.icon)
+let timer
+let observer
+let paused = false
+function stop() { clearTimeout(timer) }
+function start() {
+  stop()
+  if (!paused && props.options.duration > 0) timer = setTimeout(() => emit('close'), props.options.duration)
+}
+function onEscape(event) {
+  if (event.key === 'Escape') emit('close')
+}
+watch(() => [props.options.restart, props.options.duration], start)
+onMounted(() => {
+  start()
+  const measure = () => emit('height', root.value.getBoundingClientRect().height)
+  measure()
+  if (typeof ResizeObserver !== 'undefined') {
+    observer = new ResizeObserver(measure)
+    observer.observe(root.value)
+  }
+  document.addEventListener('keydown', onEscape)
+})
+onBeforeUnmount(() => {
+  stop()
+  observer?.disconnect()
+  document.removeEventListener('keydown', onEscape)
+})
+</script>
+
+<template>
+  <div
+    :id="options.id"
+    ref="root"
+    :class="['kb-message', options.customClass, { 'kb-message--center': options.center, 'kb-message--plain': options.plain }]"
+    :role="options.type === 'error' || options.type === 'warning' ? 'alert' : 'status'"
+    :style="{ position: 'fixed', top: `${options.top}px`, left: '50%', transform: 'translateX(-50%)', zIndex: options.zIndex ?? 'var(--z-toast)', maxWidth: '92vw' }"
+    @mouseenter="paused = true; stop()"
+    @mouseleave="paused = false; start()"
+    @focusin="paused = true; stop()"
+    @focusout="paused = false; start()"
+  >
+    <Toast
+      :tone="tone"
+      :dismissible="options.showClose"
+      :close-label="options.closeLabel"
+      :style="{ minWidth: 'min(280px, 92vw)', maxWidth: '100%', boxSizing: 'border-box', ...(options.plain ? { boxShadow: 'none' } : {}) }"
+      @close="emit('close')"
+    >
+      <template v-if="options.icon" #icon><CustomIcon /></template>
+      <Content />
+      <span v-if="options.repeatNum > 1" class="kb-message__count"> × {{ options.repeatNum }}</span>
+    </Toast>
+  </div>
+</template>
+
+<style scoped>
+.kb-message--center { text-align: center; }
+.kb-message__count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
+</style>

package/components/feedback/_internal/service-utils.js

@@ -0,0 +1,46 @@
+import { h, isVNode, render } from 'vue'
+
+// 默认按文本渲染，只有调用方显式开启时才渲染可信 HTML。
+export function contentNode(message, html = false) {
+  const value = typeof message === 'function' ? message() : message
+  if (isVNode(value) || Array.isArray(value)) return value
+  return html ? h('span', { innerHTML: String(value ?? '') }) : String(value ?? '')
+}
+
+export function resolveTarget(options = {}) {
+  const target = typeof options.appendTo === 'string'
+    ? document.querySelector(options.appendTo) : options.appendTo || document.body
+  if (!target) throw new Error('Keybricks: appendTo 未找到挂载目标')
+  return target
+}
+
+export function mountService(component, props, options = {}, appContext) {
+  const target = resolveTarget(options)
+  const container = document.createElement('div')
+  const vnode = h(component, props)
+  vnode.appContext = appContext || null
+  target.appendChild(container)
+  try {
+    render(vnode, container)
+  } catch (error) {
+    render(null, container)
+    container.remove()
+    throw error
+  }
+  return () => {
+    render(null, container)
+    container.remove()
+  }
+}
+
+let locks = 0
+let previousOverflow
+export function lockBody() {
+  if (locks++ === 0) {
+    previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  }
+  return () => {
+    if (--locks === 0) document.body.style.overflow = previousOverflow
+  }
+}

package/components/feedback/message-box.d.ts

@@ -0,0 +1,69 @@
+import type { AppContext, Component, VNode } from 'vue';
+import type { MessageContent, MessageType } from './message.js';
+
+export type MessageBoxAction = 'confirm' | 'cancel' | 'close';
+export interface MessageBoxInputResult { value: string; action: MessageBoxAction; }
+export type MessageBoxResult = MessageBoxAction | MessageBoxInputResult;
+export interface MessageBoxOptions {
+  title?: MessageContent;
+  message?: MessageContent;
+  type?: MessageType | '';
+  icon?: string | Component | VNode;
+  width?: string | number;
+  size?: 'sm' | 'md' | 'lg';
+  customClass?: string;
+  modalClass?: string;
+  zIndex?: number;
+  appendTo?: string | HTMLElement;
+  modal?: boolean;
+  lockScroll?: boolean;
+  autofocus?: boolean;
+  center?: boolean;
+  roundButton?: boolean;
+  showClose?: boolean;
+  closeLabel?: string;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+  distinguishCancelAndClose?: boolean;
+  dangerouslyUseHTMLString?: boolean;
+  showConfirmButton?: boolean;
+  showCancelButton?: boolean;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  confirmButtonClass?: string;
+  cancelButtonClass?: string;
+  confirmButtonLoading?: boolean;
+  cancelButtonLoading?: boolean;
+  confirmButtonDisabled?: boolean;
+  cancelButtonDisabled?: boolean;
+  showInput?: boolean;
+  inputValue?: string;
+  inputType?: string;
+  inputPlaceholder?: string;
+  inputPattern?: RegExp;
+  inputErrorMessage?: string;
+  inputValidator?: (value: string) => boolean | string | Promise<boolean | string>;
+  beforeClose?: (action: MessageBoxAction, instance: MessageBoxState, done: () => void) => void;
+  callback?: (result: MessageBoxResult, instance: MessageBoxState) => void;
+}
+export interface MessageBoxState extends MessageBoxOptions {
+  inputValue: string;
+  confirmButtonLoading: boolean;
+  cancelButtonLoading: boolean;
+  action?: MessageBoxAction;
+}
+export interface MessageBoxShortcut<Result = MessageBoxResult> {
+  (message: MessageContent, title?: MessageContent, options?: MessageBoxOptions, appContext?: AppContext | null): Promise<Result>;
+  (message: MessageContent, options?: MessageBoxOptions, appContext?: AppContext | null): Promise<Result>;
+}
+export interface MessageBoxService {
+  (options?: MessageBoxOptions | MessageContent, appContext?: AppContext | null): Promise<MessageBoxResult>;
+  alert: MessageBoxShortcut;
+  confirm: MessageBoxShortcut;
+  prompt: MessageBoxShortcut<MessageBoxInputResult>;
+  /** 清空队列，不结算已有 Promise，与 ElMessageBox.close 相同。 */
+  close(): void;
+  defaults: Partial<MessageBoxOptions>;
+}
+export declare const MessageBox: MessageBoxService;
+export default MessageBox;

package/components/feedback/message-box.js

@@ -0,0 +1,92 @@
+import { getCurrentInstance, isVNode, reactive } from 'vue'
+import MessageBoxView from './_internal/MessageBoxView.vue'
+import { mountService } from './_internal/service-utils.js'
+
+const queue = []
+let active
+let seed = 0
+
+function next() {
+  if (active || !queue.length) return
+  const entry = active = queue.shift()
+  try {
+    entry.dispose = mountService(MessageBoxView, {
+      options: entry.state,
+      onAction: action => requestAction(entry, action),
+    }, entry.state, entry.context)
+  } catch (error) {
+    active = undefined
+    entry.reject(error)
+    next()
+  }
+}
+
+function finish(entry, action) {
+  if (active !== entry || entry.closed) return
+  entry.closed = true
+  entry.dispose?.()
+  active = undefined
+  const result = entry.state.showInput ? { value: entry.state.inputValue, action } : action
+  try {
+    if (entry.state.callback) entry.state.callback(result, entry.state)
+    else if (action === 'confirm') entry.resolve(result)
+    else entry.reject(action === 'close' && !entry.state.distinguishCancelAndClose ? 'cancel' : action)
+  } finally {
+    next()
+  }
+}
+
+function requestAction(entry, action) {
+  if (entry.closed || active !== entry) return
+  entry.state.action = action
+  const done = () => finish(entry, action)
+  if (entry.state.beforeClose) entry.state.beforeClose(action, entry.state, done)
+  else done()
+}
+
+/** Vue 弹窗服务；队列内同一时刻只显示一个确认框。 */
+export function MessageBox(value = {}, appContext) {
+  if (typeof document === 'undefined') return Promise.reject(new Error('Keybricks MessageBox 需要浏览器环境'))
+  const options = typeof value === 'string' || typeof value === 'function' || isVNode(value) ? { message: value } : value
+  const state = reactive({
+    id: `kb-message-box-${++seed}`, title: '', message: '', type: '',
+    showClose: true, showConfirmButton: true, showCancelButton: false,
+    closeOnClickModal: true, closeOnPressEscape: true, lockScroll: true,
+    autofocus: true, inputValue: '', inputType: 'text', inputErrorMessage: '',
+    confirmButtonLoading: false, cancelButtonLoading: false,
+    confirmButtonDisabled: false, cancelButtonDisabled: false,
+    ...MessageBox.defaults, ...options,
+  })
+  return new Promise((resolve, reject) => {
+    queue.push({ state, resolve, reject, context: appContext || getCurrentInstance()?.appContext })
+    next()
+  })
+}
+
+for (const kind of ['alert', 'confirm', 'prompt']) {
+  MessageBox[kind] = (message, title, options, appContext) => {
+    if (title && typeof title === 'object' && !isVNode(title)) {
+      appContext = options
+      options = title
+      title = undefined
+    }
+    return MessageBox({
+      boxType: kind, showCancelButton: kind !== 'alert', showInput: kind === 'prompt',
+      closeOnClickModal: kind !== 'alert', closeOnPressEscape: kind !== 'alert',
+      ...options, message, ...(title === undefined ? {} : { title }),
+    }, appContext)
+  }
+}
+
+// 与 ElMessageBox.close 一致：清空所有弹窗，不触发用户操作回调或结算 Promise。
+MessageBox.close = () => {
+  queue.length = 0
+  if (active) {
+    const entry = active
+    active = undefined
+    entry.closed = true
+    entry.dispose?.()
+  }
+}
+export default MessageBox
+MessageBox.defaults = {}