@keyfunc/keybricks-ds 2.5.1 → 2.6.0

package/DEPLOY.md

@@ -55,11 +55,11 @@ deploys the documentation site. Watch it under *Build → Pipelines*.
 **5. Cut the first release.**
 
 ```bash
-git tag v2.5.1 && git push --tags
+git tag v2.6.0 && git push --tags
 ```
 
 That tag runs `generated:check` → `version:check` → `npm publish`. Confirm under *Deploy →
-Package Registry*: `@keyfunc/keybricks-ds` 2.4.0.
+Package Registry*: `@keyfunc/keybricks-ds` 2.6.0.
 
 **6. Hand developers two things:** the Pages URL, and the `.npmrc` snippet in §4 below.
 
@@ -187,7 +187,7 @@ GitLab injects `CI_JOB_TOKEN` — use that instead and no secret is stored anywh
 **Install — straight from git** (no registry, no publish; works today)
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.5.1"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.6.0"
 ```
 
 Because the package has no build step, a git dependency needs no `prepare` script — npm

package/INTEGRATION.md

@@ -31,7 +31,7 @@ Not using a registry yet? A git dependency works with no publishing at all — t
 has no build step, so npm can use the checkout as-is:
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.5.1"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.6.0"
 ```
 
 **Source-only package.** `.jsx` and `.vue` files are published as authored, so your
@@ -522,6 +522,14 @@ Pin a minor range and update deliberately:
 - **Tokens outside CSS.** `tokens.json` / `tokens.js` / `tokens.d.ts` gained the tier tokens
   (`--control-*`, `--bar-h`, `--group-gap`, …) — 352 light tokens in all (2.0.2 adds `--danger-soft-hover`).
 
+### 2.6.0（未发布）
+
+- Vue Button 支持原生点击事件、组件 / VNode 图标、图标及加载插槽、独立尾部图标、后备文本和原生按钮类型；旧 actnplanBtn 的适配方式见 [按钮适配说明](components/buttons/BUTTON_MIGRATION.md)。Vue 专用声明位于 `Button.vue.d.ts`，React 接口保持原样。
+- Vue 新增 `@keyfunc/keybricks-ds/vue/message` 和 `@keyfunc/keybricks-ds/vue/message-box` 命令式服务入口；提供消息堆叠与分组，以及 alert / confirm / prompt、输入校验、关闭拦截、应用上下文和可配置默认文案。
+- 复用现有 DS 控件，补充 Toast 默认内容、图标插槽及可配置关闭按钮标签。
+- 与 Element Plus 的 API 对照、接入示例和兼容边界见 [消息服务迁移说明](components/feedback/MESSAGE_SERVICES.md)。不承诺所有 Element Plus 功能及样式完全兼容。
+- 本次仅修改源码及发布元数据；未执行测试、类型检查、构建、生成脚本或浏览器验证，发布前需同步生成产物中的版本元数据。
+
 ### 2.5.1
 
 Fixes only — no API removed.

package/changelog.js

@@ -3,6 +3,11 @@
    Each item: tag (new | improved | fixed | breaking | removed) and the text as [en, zh, ja].
    INTEGRATION.md keeps the full migration notes; this list is the short, reader-facing summary. */
 window.KB_CHANGELOG = [
+{ v: "2.6.0", date: "2026-11-02", status: "unreleased", items: [
+  { tag: "improved", t: ["Vue Button now forwards native click events and supports component / VNode icons, icon / loading / trailing slots, trailing icons, native button types and aria-busy.", "Vue Button 补充原生点击事件、组件 / VNode 图标、icon / loading / trailing 插槽、独立尾部图标、原生按钮类型及 aria-busy。", "Vue Button がネイティブ click イベント、コンポーネント / VNode アイコン、icon / loading / trailing スロット、末尾アイコン、ボタン種別と aria-busy に対応。"] },
+  { tag: "new", t: ["Vue Message service: timed and grouped Toast notifications, stacking, close handles, VNode content and app context.", "Vue 新增 Message 服务：支持自动关闭、消息分组与堆叠、关闭句柄、VNode 内容及应用上下文。", "Vue Message サービスを追加：自動終了、グループ化、スタック、終了ハンドル、VNode とアプリコンテキストに対応。"] },
+  { tag: "new", t: ["Vue MessageBox service: alert / confirm / prompt, queued dialogs, validation, beforeClose, focus management and configurable labels. See the migration guide for compatibility limits.", "Vue 新增 MessageBox 服务：支持 alert / confirm / prompt、弹窗队列、输入校验、beforeClose、焦点管理及可配置文案；兼容边界见迁移说明。", "Vue MessageBox サービスを追加：alert / confirm / prompt、キュー、入力検証、beforeClose、フォーカス管理とラベル設定。互換性の制限は移行ガイドを参照。"] },
+] },
 { v: "2.5.1", date: "2026-10-30", items: [
   { tag: "fixed", t: ["Keyboard support: Checkbox, DatePicker, MultiSelect, Accordion, Dropzone, pipeline nodes and palette, selectable bar lists, and the Sunburst / World map charts can all be used without a mouse.", "键盘支持：复选框、日期选择、多选、折叠面板、上传区、管道节点与节点面板、可点选的条形列表，以及旭日图 / 世界地图，都可以不用鼠标操作。", "キーボード対応：チェックボックス、日付選択、マルチセレクト、アコーディオン、ドロップゾーン、パイプラインのノードとパレット、選択可能なバーリスト、サンバースト / 世界地図をマウスなしで操作可能に。"] },
   { tag: "fixed", t: ["Long text no longer spills: field values, menu items, segments, tree rows and navigation names truncate; drawer titles wrap.", "长文字不再溢出：输入框的值、菜单项、分段选择、树形列表和导航名称会截断；侧滑面板标题会换行。", "長いテキストがはみ出さないように：入力値、メニュー項目、セグメント、ツリー行、ナビゲーション名は省略表示、ドロワーのタイトルは折り返し。"] },

package/components/buttons/BUTTON_MIGRATION.md

@@ -0,0 +1,111 @@
+# Vue Button 与旧按钮适配
+
+2.6.0（未发布）为 Vue Button 补充适配旧按钮所需的通用能力。
+原有图标名、variant、默认插槽用法继续支持；本次没有修改 React Button。
+本次只修改源码与文档，没有执行测试、类型检查、构建或浏览器验证，不能据此宣称已完美替换业务组件。
+
+## 新增接口
+
+| 接口 | 行为 |
+| --- | --- |
+| `@click` | 传递原生 MouseEvent；disabled 或 loading 时不发出事件 |
+| `nativeType` | `button / submit / reset`，默认仍为 button |
+| `text` | 默认插槽的后备文本，已有插槽优先 |
+| `icon` | 原 DS 图标名之外，额外接受 Vue 组件或 VNode |
+| `trailingIcon` | 独立右侧图标；loading 时继续显示，适合 popup 下拉箭头 |
+| `#icon` | 覆盖主图标，可放旧 svgicon、字体图标或自定义 SVG；随 loading 隐藏 |
+| `#loading` | 覆盖加载图标；默认继续使用 DS spinner |
+| `#trailing` | 覆盖独立尾部内容，不随 loading 隐藏 |
+| `aria-busy` | 与 loading 同步；原生 disabled 仍由 disabled 或 loading 控制 |
+
+icon / loading 插槽接收 `{ size, style }`，trailing 额外接收 loading。
+默认继承当前尺寸区；显式 iconSize 优先于尺寸区。自定义插槽中的图标由调用方应用传入的尺寸。
+class、id、title、style、原生表单属性以及其他未声明属性继续透传到同一个原生 button 根节点。
+Vue 专用类型文件为 `Button.vue.d.ts`，`Button.d.ts` 仍是 React 类型。
+
+```vue
+<template>
+  <KbButton
+    :loading="saving"
+    :icon="SaveIcon"
+    trailing-icon="chevron-down"
+    @click="save($event)"
+  >
+    保存
+  </KbButton>
+</template>
+```
+
+## actnplanBtn 的适配边界
+
+建议保留 `actnplanBtn.vue` 的路径、props、事件和兼容 class，内部改为 KbButton。
+DS 接收通用接口；`regular / negative / warning / inbody / popup` 以及旧图标名由应用转换。
+
+| 原配置 | 应用层转换 |
+| --- | --- |
+| regular | variant=primary |
+| regular + inbody | variant=outline |
+| negative | variant=outline；它通常表示取消，不是危险操作 |
+| warning | variant=danger |
+| disabled / loading | 同名属性，loading 时主图标替换为 spinner，文字保留 |
+| popup | trailingIcon=chevron-down，loading 时仍显示箭头 |
+| text | 保留 `<span class="text">` 默认插槽，兼容已有选择器 |
+| click | 继续传出原生事件，不吞掉 `$event`、冒泡或表单默认行为 |
+| class / id / style | 透传；保留 btn、actnplanButton、原 type class 和 inbody class |
+
+旧 actnplanBtn 没有指定原生 button type，在表单里通常默认提交；严格兼容时适配层应设置 nativeType=submit，并核对各表单的实际使用。
+不能把旧业务 type 直接绑定到原生 type。外部已经通过原生属性控制 form、name、value 的场景也应保留。
+
+## 图标映射
+
+映射应独立放在应用的 `actnplanButtonIcons.ts`，不要塞进 DS 的通用图标字典。
+应用先从空格分隔的 class 中提取 glyphicon-*，因此 `glyphicon glyphicon-refresh` 与 `glyphicon-refresh` 进入相同映射。
+
+| 旧图标 | 建议的 DS 图标 |
+| --- | --- |
+| 1em-ok / glyphicon-ok | check |
+| 1em-cancel / glyphicon-remove | x |
+| 1em-add / glyphicon-plus | plus |
+| glyphicon-floppy-disk | save |
+| 1em-delete / glyphicon-trash | trash-2 |
+| 1em-refresh / glyphicon-refresh | refresh-cw |
+| 1em-clone | copy |
+| glyphicon-search | search |
+| glyphicon-menu-down | chevron-down |
+
+已经确认对应关系的图标转换为 DS 名称。业务专用 SVG 或无可靠对应的 Glyphicon 通过 icon 插槽保留；不要把未知旧名称直接传入 DS Icon，否则会显示空图标。
+动态 icon 使用 computed 解析；旧 SVG 使用 watch 加载并忽略过期请求，避免切换按钮状态后显示旧图标。
+旧 fill 样式仅作用于旧 SVG，DS 图标保留 fill=none、stroke=currentColor。
+
+```vue
+<template>
+  <KbButton
+    class="btn actnplanButton"
+    :class="[type, { inbody }]"
+    :variant="variant"
+    :disabled="disabled"
+    :loading="loading"
+    :trailing-icon="popup ? 'chevron-down' : undefined"
+    native-type="submit"
+    @click="emit('click', $event)"
+  >
+    <template v-if="icon" #icon="{ size, style }">
+      <AppIcon v-if="mappedIcon" :name="mappedIcon" :size="size" :style="style" />
+      <span v-else-if="isGlyph" class="glyphicon" :class="glyphClass" aria-hidden="true" />
+      <svgicon v-else-if="svgData" :data="svgData" :fill="false" :style="style" />
+    </template>
+    <span class="text">{{ text }}</span>
+  </KbButton>
+</template>
+```
+
+以上为应用适配层的模板示意，其中 variant、mappedIcon 等由应用解析。
+图标放在按钮内部即可，不需要 svgContainer，避免把一个按钮拆成多个点击区域。
+
+## 接入顺序
+
+先发布包含本次改动的 DS，再升级应用安装版本，最后修改 actnplanBtn 适配层并移除旧的按钮视觉样式。
+应用所有版本都需要加载 DS 样式，不能只依赖 V2 的适配器注册入口。
+同时清理 runtime/modal.vue 中临时添加的默认按钮视觉覆盖，让按钮外观由 DS 统一管理；默认按钮位置可继续由 modal 决定。
+客户主题 mixin 和外部 `.actnplanButton` 规则需要逐项处理，不能继续用旧的 disabled / fill / hover 规则覆盖新按钮。
+源码修改不会自动影响应用已安装的旧版本；本轮未切换 actnplanBtn，也未修改应用依赖、lock 文件或生成产物。

package/components/buttons/Button.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { px } from '../px.js'
-import { computed, ref } from 'vue'
+import { cloneVNode, computed, h, isVNode, ref } from 'vue'
 import Icon from '../icons/Icon.vue'
 
 // Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding
@@ -25,11 +25,13 @@ const colorHoverVariants = { text: 'var(--text-heading)' }
 // Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default).
 const props = defineProps({
   variant: { type: String, default: 'primary' }, size: String,
-  icon: String, iconSize: Number, iconPosition: { type: String, default: 'left' },
+  icon: [String, Object, Function], trailingIcon: [String, Object, Function],
+  iconSize: Number, iconPosition: { type: String, default: 'left' },
   medium: Boolean, disabled: Boolean, loading: Boolean, fullWidth: Boolean, iconOnly: Boolean,
-  label: String, pressed: Boolean, focused: Boolean, style: Object,
+  label: String, text: String, pressed: Boolean, focused: Boolean, style: Object,
+  nativeType: { type: String, default: 'button', validator: value => ['button', 'submit', 'reset'].includes(value) },
 })
-defineEmits(['click'])
+const emit = defineEmits(['click'])
 const hover = ref(false), press = ref(false), focus = ref(false)
 const busy = computed(() => props.disabled || props.loading)
 const isPressed = computed(() => press.value || props.pressed)
@@ -52,15 +54,60 @@ const s = computed(() => {
 })
 const iSize = computed(() => props.iconSize || 16)
 const iconStyle = computed(() => props.iconSize ? null : tierIcon)
+
+// 旧 SVG、组件和 VNode 都可以由适配层传入，业务图标名称不进入 DS。
+function glyph(value) {
+  if (!value) return null
+  const attrs = {
+    size: iSize.value, width: iSize.value, height: iSize.value, 'aria-hidden': true, focusable: false,
+    style: { display: 'block', flexShrink: 0, width: px(iSize.value), height: px(iSize.value), ...iconStyle.value },
+  }
+  if (typeof value === 'string') return h(Icon, { ...attrs, name: value, size: iSize.value })
+  return isVNode(value) ? cloneVNode(value, attrs) : h(value, attrs)
+}
+const LeadingIcon = () => glyph(props.icon)
+const TrailingIcon = () => glyph(props.trailingIcon)
+
+function onClick(event) {
+  if (busy.value) return
+  emit('click', event)
+}
 </script>
 <template>
-  <button type="button" data-press="own" :data-size="size" :style="s" :disabled="busy" :aria-label="iconOnly ? label : undefined"
-    @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = false; press = false"
-    @mousedown="press = true" @mouseup="press = false" @keydown.enter="press = true" @keydown.space="press = true" @keyup="press = false"
-    @focus="focus = $event.target.matches(':focus-visible')" @blur="focus = false">
-    <span v-if="loading" :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }" />
-    <Icon v-else-if="icon && iconPosition === 'left'" :name="icon" :size="iSize" :style="iconStyle" />
-    <slot v-if="!iconOnly" />
-    <Icon v-if="!loading && icon && iconPosition === 'right'" :name="icon" :size="iSize" :style="iconStyle" />
+  <button
+    :type="nativeType"
+    data-press="own"
+    :data-size="size"
+    :style="s"
+    :disabled="busy"
+    :aria-busy="loading"
+    :aria-label="iconOnly ? label : undefined"
+    @click="onClick"
+    @mouseenter="hover = true"
+    @mouseleave="hover = false; press = false"
+    @mousedown="press = true"
+    @mouseup="press = false"
+    @keydown.enter="press = true"
+    @keydown.space="press = true"
+    @keyup="press = false"
+    @focus="focus = $event.target.matches(':focus-visible')"
+    @blur="focus = false"
+  >
+    <slot v-if="loading" name="loading" :size="iSize" :style="iconStyle">
+      <span
+        aria-hidden="true"
+        :style="{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }"
+      />
+    </slot>
+    <slot v-else-if="iconPosition === 'left'" name="icon" :size="iSize" :style="iconStyle">
+      <LeadingIcon v-if="icon" />
+    </slot>
+    <slot v-if="!iconOnly">{{ text }}</slot>
+    <slot v-if="!loading && iconPosition === 'right'" name="icon" :size="iSize" :style="iconStyle">
+      <LeadingIcon v-if="icon" />
+    </slot>
+    <slot name="trailing" :size="iSize" :style="iconStyle" :loading="loading">
+      <TrailingIcon v-if="trailingIcon" />
+    </slot>
   </button>
 </template>

package/components/buttons/Button.vue.d.ts

@@ -0,0 +1,44 @@
+import type { Component, ComponentOptionsMixin, CSSProperties, DefineComponent, PublicProps, SlotsType, VNode } from 'vue';
+
+/** Vue 专用声明；同目录 Button.d.ts 继续描述 React 接口。 */
+export interface VueButtonProps {
+  variant?: 'primary' | 'dark' | 'outline' | 'ghost' | 'primary-soft' | 'danger' | 'danger-soft' | 'text';
+  size?: 'sm' | 'md' | 'lg';
+  icon?: string | Component | VNode;
+  /** 不随 loading 隐藏，适用于下拉箭头等独立的尾部标记。 */
+  trailingIcon?: string | Component | VNode;
+  iconSize?: number;
+  iconPosition?: 'left' | 'right';
+  medium?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  iconOnly?: boolean;
+  label?: string;
+  /** 默认插槽的后备文本。 */
+  text?: string;
+  pressed?: boolean;
+  focused?: boolean;
+  style?: CSSProperties;
+  /** 原生按钮类型，默认 button；旧表单适配时可明确传入 submit。 */
+  nativeType?: 'button' | 'submit' | 'reset';
+  onClick?: (event: MouseEvent) => void;
+}
+
+export interface VueButtonIconSlotProps {
+  size: number;
+  style: CSSProperties | null;
+}
+export interface VueButtonSlots {
+  default?: () => VNode[];
+  icon?: (props: VueButtonIconSlotProps) => VNode[];
+  loading?: (props: VueButtonIconSlotProps) => VNode[];
+  trailing?: (props: VueButtonIconSlotProps & { loading: boolean }) => VNode[];
+}
+
+declare const Button: DefineComponent<
+  VueButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin,
+  { click: (event: MouseEvent) => void }, string, PublicProps,
+  Readonly<VueButtonProps>, {}, SlotsType<VueButtonSlots>
+>;
+export default Button;

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 = {}

package/components/feedback/message.d.ts

@@ -0,0 +1,37 @@
+import type { AppContext, Component, VNode } from 'vue';
+
+export type MessageType = 'success' | 'info' | 'warning' | 'error';
+export type MessageContent = string | VNode | (() => VNode);
+export interface MessageHandle { close(): void; }
+export interface MessageOptions {
+  message?: MessageContent;
+  type?: MessageType;
+  icon?: string | Component | VNode;
+  /** 毫秒；0 表示不自动关闭，默认 3000。 */
+  duration?: number;
+  showClose?: boolean;
+  closeLabel?: string;
+  offset?: number;
+  zIndex?: number;
+  customClass?: string;
+  center?: boolean;
+  plain?: boolean;
+  grouping?: boolean;
+  /** 仅允许可信且已由应用净化的 HTML。 */
+  dangerouslyUseHTMLString?: boolean;
+  appendTo?: string | HTMLElement;
+  onClose?: (handle: MessageHandle) => void;
+}
+export type MessageParams = MessageContent | MessageOptions;
+export interface MessageService {
+  (options?: MessageParams, appContext?: AppContext | null): MessageHandle;
+  success(options: MessageParams, appContext?: AppContext | null): MessageHandle;
+  info(options: MessageParams, appContext?: AppContext | null): MessageHandle;
+  warning(options: MessageParams, appContext?: AppContext | null): MessageHandle;
+  error(options: MessageParams, appContext?: AppContext | null): MessageHandle;
+  closeAll(type?: MessageType): void;
+  /** 在调用时读取；可随应用语言切换更新。 */
+  defaults: Partial<MessageOptions>;
+}
+export declare const Message: MessageService;
+export default Message;

package/components/feedback/message.js

@@ -0,0 +1,68 @@
+import { getCurrentInstance, isVNode, reactive } from 'vue'
+import MessageView from './_internal/MessageView.vue'
+import { mountService, resolveTarget } from './_internal/service-utils.js'
+
+const instances = []
+let seed = 0
+const normalize = value => typeof value === 'string' || typeof value === 'function' || isVNode(value)
+  ? { message: value } : { ...value }
+
+/** Vue 消息服务；样式由 Toast 提供，业务错误脱敏仍由应用处理。 */
+export function Message(value = {}, appContext) {
+  if (typeof document === 'undefined') return { close() {} }
+  const options = { type: 'info', duration: 3000, offset: 16, ...Message.defaults, ...normalize(value) }
+  const target = resolveTarget(options)
+  if (options.grouping) {
+    const existing = instances.find(item => item.target === target && item.options.message === options.message)
+    if (existing) {
+      existing.options.repeatNum++
+      existing.options.type = options.type
+      existing.options.restart++
+      return existing.handle
+    }
+  }
+  const state = reactive({ ...options, id: `kb-message-${++seed}`, repeatNum: 1, restart: 0, height: 0, top: options.offset })
+  let dispose
+  let closed = false
+  const handle = { close() {
+    if (closed) return
+    closed = true
+    instances.splice(instances.indexOf(entry), 1)
+    dispose?.()
+    reflow()
+    options.onClose?.(handle)
+  } }
+  const entry = { options: state, handle, target }
+  function reflow() {
+    const tops = new Map()
+    for (const item of instances) {
+      const target = item.target
+      item.options.top = Math.max(Number(item.options.offset) || 0, tops.get(target) || 0)
+      tops.set(target, item.options.top + item.options.height + 16)
+    }
+  }
+  instances.push(entry)
+  try {
+    dispose = mountService(MessageView, {
+      options: state, onClose: handle.close,
+      onHeight: height => { state.height = height; reflow() },
+    }, options, appContext || getCurrentInstance()?.appContext)
+  } catch (error) {
+    instances.splice(instances.indexOf(entry), 1)
+    reflow()
+    throw error
+  }
+  reflow()
+  return handle
+}
+
+for (const type of ['success', 'info', 'warning', 'error']) {
+  Message[type] = (value, appContext) => Message({ ...normalize(value), type }, appContext)
+}
+Message.closeAll = type => {
+  for (const entry of [...instances]) {
+    if (!type || entry.options.type === type) entry.handle.close()
+  }
+}
+export default Message
+Message.defaults = {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Keybricks design system — design tokens, three size tiers and 121 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",
@@ -13,6 +13,14 @@
       "default": "./components/index.js"
     },
     "./vue": "./components/_vue/index.mjs",
+    "./vue/message": {
+      "types": "./components/feedback/message.d.ts",
+      "default": "./components/feedback/message.js"
+    },
+    "./vue/message-box": {
+      "types": "./components/feedback/message-box.d.ts",
+      "default": "./components/feedback/message-box.js"
+    },
     "./styles.css": "./keybricks.css",
     "./keybricks.css": "./keybricks.css",
     "./tokens": {