niuma-ui 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -6,6 +6,42 @@
 
 ## [Unreleased]
 
+## [1.0.2] - 2026-08-13
+
+### 新增
+
+- `RsTable` 架构分层：`RsTableApi` / ModuleRegistry / FeatureHost、`useRsTable` 表面、`useRsTableCore` / Shell / EditLayer、ViewContext 子件与 `useRsTableHeadless`。
+- `RsTable` 无障碍基线：`region` + `role=grid`、键盘漫游；`tabindex` 落在 grid 表上。
+- 图表适配：`createChartSeriesTableFeature`、`mapRsTableSeriesToEChartsOption`（无 echarts 依赖）。
+- CI 门禁：`test:perf` / `test:compat` / `test:ssr` / `test:dom-baseline`；Playwright 视觉回归 `test:visual`。
+- 架构文档：`rs-table-architecture` / `ssr` / `chart-adapter` / `visual`。
+- `RsMenu` 菜单项 token：在 `styles.css` 主题块维护默认值（`--rs-menu-item-active-fg|bg` 等），组件只消费变量；父级覆盖即可，无需 `:deep`。
+- 排版 token：字号阶梯扩展至 `xl` / `2xl` / `3xl`；新增字重、字族、行高 `relaxed`。
+- 文字语义 token：`--rs-text-primary|secondary|tertiary|disabled|inverse|link|link-hover`（兼容原 `--rs-text` / `--rs-muted`）。
+- JS 导出：`RsFontSize` / `RsFontWeight` 与 `RS_FONT_SIZE_CSS` / `RS_FONT_WEIGHT_CSS`。
+- `RsSwitch`：开关控件（Reka Switch）。
+- `RsRadio` / `RsRadioItem`：单选分组。
+- `RsTag` / `RsDynamicTags`：标签与可编辑标签组。
+- `RsAlert`：反馈提示条。
+- `RsDivider`：分隔线。
+- `RsDescriptions` / `RsDescriptionsItem`：描述列表。
+- `RsLoadingBar` + `useRsLoadingBar`：顶栏加载进度。
+
+### 变更
+
+- `RsPagination`：尺寸扩展为 `sm|md|lg`（对齐 Ant small/medium/large）；页码按钮圆角 `sm`；当前页改为文字主色高亮、无填充底；跳转输入与每页条数同档高度；`showJumpConfirm` 默认 `false`（回车/失焦跳转）。
+- `RsTabs`：非激活 `TabsContent` 强制 `display: none`，避免多页内容叠层。
+- 表单标签 token：`--rs-label-font-size|font-weight|line-height|color` 写入 `styles.css`（默认对齐 Ant 14px / medium / text）；`RsLabel` 与 `.rs-field__label` 共用，父级覆盖即可，无需 `:deep`。
+- 表单控件高度对齐：`RsInput` / `RsSelect` / `RsInputNumber` / `RsDatePicker` 统一用 `--rs-control-height-*` 锁定 `height`，Select/DatePicker 行高改为 `tight`（与 Input 一致）。
+- `RsDatePicker` 新增 `size` prop（ssm/sm/md/lg），可跟随 Form / ConfigProvider。
+- `RsSwitch`：轨道高度用 `control-height * 2/3` 等 calc 推导（对齐 Ant 比例），随主题 token 缩放，不写死档位 px。
+- `RsInputNumber`：恢复常规 `border` 描边（inset shadow 在部分主题下不可见）；内层仍填满外壳高度。
+- `RsSelect`：默认去掉 `max-width: 20rem` 上限（改为 `max-width: 100%`），避免表单栅格里 Select 比同列 Input 窄；`block` 仍负责拉满宽度。
+
+### 移除
+
+- 公开组件 `RsTableHeaderRow` / `RsTableColgroup`（轻量辅助；正式路径为 `RsTableHeader` / `RsTableColGroup`）。
+
 ## [1.0.1] - 2026-08-11
 
 ### 变更
@@ -36,6 +72,7 @@
 
 - 1.0 之前的私有 tag（如 `v0.1.0`）仅作历史记录；新接入请依赖 `v1.0.0` 及之后版本。
 
-[Unreleased]: https://github.com/Blair-Shang/niuma-ui/compare/v1.0.1...HEAD
+[Unreleased]: https://github.com/Blair-Shang/niuma-ui/compare/v1.0.2...HEAD
+[1.0.2]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.2
 [1.0.1]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.1
 [1.0.0]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "niuma-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "Apache-2.0",
   "type": "module",
   "description": "Vue 3 设计系统与 Rs* 组件库（--rs-* token）",
@@ -80,9 +80,11 @@
     "vue-sonner": "^2.0.9"
   },
   "devDependencies": {
+    "@playwright/test": "^1.62.1",
     "@tailwindcss/vite": "^4.3.2",
     "@types/node": "^26.1.1",
     "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/server-renderer": "^3.5.39",
     "@vue/test-utils": "^2.4.11",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.2",
@@ -101,6 +103,12 @@
     "build:playground": "vite build --config playground/vite.config.ts",
     "preview:playground": "vite preview --config playground/vite.config.ts",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:perf": "vitest run src/__tests__/RsTable.perf.spec.ts src/__tests__/useRsTableCore.perf.spec.ts",
+    "test:compat": "vitest run src/__tests__/rs-table-compat-matrix.spec.ts src/__tests__/rs-table-api.spec.ts src/__tests__/rs-table-isolation.spec.ts",
+    "test:ssr": "vitest run src/__tests__/RsTable.ssr.spec.ts",
+    "test:dom-baseline": "vitest run src/__tests__/RsTable.dom-baseline.spec.ts src/__tests__/rs-table-echarts-adapter.spec.ts",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots"
   }
 }

package/src/__tests__/RsButton.spec.ts

@@ -31,6 +31,53 @@ describe('RsButton', () => {
     expect(wrapper.classes()).toContain('rs-btn--ghost')
   })
 
+  it('text variant defaults to borderless + neutral tone', () => {
+    const wrapper = mount(RsButton, {
+      props: { variant: 'text' },
+      slots: { default: '编辑' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--text')
+    expect(wrapper.classes()).toContain('rs-btn--borderless')
+    expect(wrapper.classes()).toContain('rs-btn--tone-neutral')
+  })
+
+  it('text + tone applies semantic tone class', () => {
+    const wrapper = mount(RsButton, {
+      props: { variant: 'text', tone: 'primary' },
+      slots: { default: '新增' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--text')
+    expect(wrapper.classes()).toContain('rs-btn--tone-primary')
+  })
+
+  it('ghost supports tone without becoming filled', () => {
+    const wrapper = mount(RsButton, {
+      props: { variant: 'ghost', tone: 'danger' },
+      slots: { default: '删除' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--ghost')
+    expect(wrapper.classes()).toContain('rs-btn--tone-danger')
+    expect(wrapper.classes()).not.toContain('rs-btn--danger')
+  })
+
+  it('filled primary ignores tone class', () => {
+    const wrapper = mount(RsButton, {
+      props: { variant: 'primary', tone: 'danger' },
+      slots: { default: '保存' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--primary')
+    expect(wrapper.classes()).not.toContain('rs-btn--tone-danger')
+  })
+
+  it('link defaults to primary tone', () => {
+    const wrapper = mount(RsButton, {
+      props: { variant: 'link' },
+      slots: { default: '查看' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--link')
+    expect(wrapper.classes()).toContain('rs-btn--tone-primary')
+  })
+
   it('renders prefix icon', () => {
     const wrapper = mount(RsButton, {
       props: { icon: 'plus' },

package/src/__tests__/RsCard.spec.ts

@@ -34,11 +34,22 @@ describe('RsCard', () => {
     expect(wrapper.find('header.rs-card__header').exists()).toBe(true)
   })
 
-  it('omits header when no title, description, or header slot', () => {
+  it('omits header when no title, description, header, or actions slot', () => {
     const wrapper = mount(RsCard, { slots: { default: '仅正文' } })
     expect(wrapper.find('header').exists()).toBe(false)
   })
 
+  it('renders header when only actions slot is provided', () => {
+    const wrapper = mount(RsCard, {
+      slots: {
+        actions: '<button type="button">操作</button>',
+        default: '正文',
+      },
+    })
+    expect(wrapper.find('header.rs-card__header').exists()).toBe(true)
+    expect(wrapper.find('.rs-card__actions button').text()).toBe('操作')
+  })
+
   it('renders header slot instead of default heading', () => {
     const wrapper = mount(RsCard, {
       slots: {
@@ -61,6 +72,40 @@ describe('RsCard', () => {
     expect(wrapper.find('.rs-card__actions button').text()).toBe('操作')
   })
 
+  it('renders cover slot before header', () => {
+    const wrapper = mount(RsCard, {
+      props: { title: '封面卡' },
+      slots: {
+        cover: '<div class="cover-el">封面</div>',
+        default: '正文',
+      },
+    })
+    const cover = wrapper.find('.rs-card__cover')
+    expect(cover.exists()).toBe(true)
+    expect(cover.text()).toBe('封面')
+    const rootHtml = wrapper.html()
+    expect(rootHtml.indexOf('rs-card__cover')).toBeLessThan(rootHtml.indexOf('rs-card__header'))
+  })
+
+  it('renders footer slot', () => {
+    const wrapper = mount(RsCard, {
+      props: { title: '带底部' },
+      slots: {
+        default: '正文',
+        footer: '<button type="button">保存</button>',
+      },
+    })
+    expect(wrapper.find('footer.rs-card__footer button').text()).toBe('保存')
+  })
+
+  it('omits footer when footer slot is absent', () => {
+    const wrapper = mount(RsCard, {
+      props: { title: '无底部' },
+      slots: { default: '正文' },
+    })
+    expect(wrapper.find('footer').exists()).toBe(false)
+  })
+
   it('applies padded body class by default', () => {
     const wrapper = mount(RsCard, { slots: { default: '内容' } })
     expect(wrapper.find('.rs-card__body').classes()).toContain('rs-card__body--padded')
@@ -82,6 +127,30 @@ describe('RsCard', () => {
     expect(wrapper.classes()).toContain('rs-card--elevated')
   })
 
+  it('applies hoverable class', () => {
+    const wrapper = mount(RsCard, {
+      props: { hoverable: true },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.classes()).toContain('rs-card--hoverable')
+  })
+
+  it('applies clip class for overflow hidden', () => {
+    const wrapper = mount(RsCard, {
+      props: { clip: true },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.classes()).toContain('rs-card--clip')
+  })
+
+  it('applies fill class for pane layouts', () => {
+    const wrapper = mount(RsCard, {
+      props: { fill: true },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.classes()).toContain('rs-card--fill')
+  })
+
   it('applies variant class', () => {
     const wrapper = mount(RsCard, {
       props: { variant: 'plain' },
@@ -94,4 +163,94 @@ describe('RsCard', () => {
     const wrapper = mount(RsCard, { slots: { default: '内容' } })
     expect(wrapper.classes()).toContain('rs-card--grouped')
   })
+
+  it('defaults to md size', () => {
+    const wrapper = mount(RsCard, { slots: { default: '内容' } })
+    expect(wrapper.classes()).toContain('rs-card--md')
+  })
+
+  it.each(['sm', 'md', 'lg'] as const)('applies size=%s class', (size) => {
+    const wrapper = mount(RsCard, {
+      props: { size },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.classes()).toContain(`rs-card--${size}`)
+  })
+
+  it('defaults radius css var to md token', () => {
+    const wrapper = mount(RsCard, { slots: { default: '内容' } })
+    const style = wrapper.attributes('style') ?? ''
+    expect(style).toContain('--rs-card-radius')
+    expect(style).toMatch(/var\(--rs-radius\)|--rs-radius[^-]/)
+  })
+
+  it('applies explicit radius css var', () => {
+    const wrapper = mount(RsCard, {
+      props: { radius: 'lg' },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.attributes('style')).toContain('var(--rs-radius-lg)')
+  })
+
+  it('applies none radius as 0', () => {
+    const wrapper = mount(RsCard, {
+      props: { radius: 'none' },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.attributes('style')).toMatch(/--rs-card-radius:\s*0/)
+  })
+
+  it('applies borderless class when borderless is true', () => {
+    const wrapper = mount(RsCard, {
+      props: { borderless: true },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.classes()).toContain('rs-card--borderless')
+  })
+
+  it('supports admin outlined preset combination', () => {
+    const wrapper = mount(RsCard, {
+      props: {
+        variant: 'outlined',
+        size: 'md',
+        radius: 'md',
+        title: '节点列表',
+      },
+      slots: { default: '表格' },
+    })
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['rs-card--outlined', 'rs-card--md']),
+    )
+    expect(wrapper.find('.rs-card__title').text()).toBe('节点列表')
+  })
+
+  it('supports frontend marketing preset combination', () => {
+    const wrapper = mount(RsCard, {
+      props: {
+        variant: 'filled',
+        size: 'lg',
+        radius: 'lg',
+        elevated: true,
+        hoverable: true,
+        clip: true,
+        title: '产品亮点',
+      },
+      slots: {
+        cover: '<img alt="" src="about:blank" />',
+        default: '介绍',
+        footer: '<button type="button">了解更多</button>',
+      },
+    })
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'rs-card--filled',
+        'rs-card--lg',
+        'rs-card--elevated',
+        'rs-card--hoverable',
+        'rs-card--clip',
+      ]),
+    )
+    expect(wrapper.find('.rs-card__cover img').exists()).toBe(true)
+    expect(wrapper.find('.rs-card__footer').exists()).toBe(true)
+  })
 })

package/src/__tests__/RsConfirmDialog.spec.ts

@@ -62,6 +62,76 @@ describe('RsConfirmDialog', () => {
     wrapper.unmount()
   })
 
+  it('renders subtitle and description separately', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: {
+        open: true,
+        title: '确认删除',
+        subtitle: '此操作不可恢复',
+        description: '确定删除该用户吗？',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-confirm-dialog__content')
+    expect(content?.querySelector('.rs-confirm-dialog__subtitle')?.textContent).toContain(
+      '此操作不可恢复',
+    )
+    expect(content?.querySelector('.rs-confirm-dialog__description')?.textContent).toContain(
+      '确定删除该用户吗？',
+    )
+    wrapper.unmount()
+  })
+
+  it('applies custom width as max-width', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: { open: true, title: '宽', width: 500 },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-confirm-dialog__content') as HTMLElement
+    expect(content.style.maxWidth).toBe('500px')
+    wrapper.unmount()
+  })
+
+  it('applies preset width class', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: { open: true, title: 'md', width: 'md' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-confirm-dialog__content')
+    expect(content?.classList.contains('rs-confirm-dialog__content--md')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('keeps open when autoCloseOnConfirm is false', async () => {
+    const Host = defineComponent({
+      components: { RsConfirmDialog },
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      template: `
+        <RsConfirmDialog
+          v-model:open="open"
+          title="异步确认"
+          :auto-close-on-confirm="false"
+          @confirm="$emit('confirmed')"
+        />
+      `,
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const buttons = document.body.querySelectorAll('.rs-confirm-dialog__footer button')
+    const confirmBtn = buttons[buttons.length - 1] as HTMLElement
+    await confirmBtn.click()
+    await flushPromises()
+    expect(wrapper.emitted('confirmed')).toHaveLength(1)
+    expect(wrapper.findComponent(RsConfirmDialog).props('open')).toBe(true)
+    wrapper.unmount()
+  })
+
   it('hides overlay by default', async () => {
     const wrapper = mount(RsConfirmDialog, {
       props: { open: true, title: '无遮罩' },
@@ -155,4 +225,61 @@ describe('RsConfirmDialog', () => {
     expect(target.querySelector('.rs-confirm-dialog__content')).not.toBeNull()
     wrapper.unmount()
   })
+
+  it('hides cancel button when showCancel is false', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: {
+        open: true,
+        title: '单按钮提示',
+        showCancel: false,
+        confirmText: '知道了',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const buttons = document.body.querySelectorAll('.rs-confirm-dialog__footer button')
+    expect(buttons).toHaveLength(1)
+    expect(buttons[0]?.textContent).toContain('知道了')
+    wrapper.unmount()
+  })
+
+  it('renders #extra slot between description and footer', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: { open: true, title: '额外内容', description: '正文' },
+      slots: {
+        extra: () => h('div', { class: 'extra-probe' }, 'extra-body'),
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const extra = document.body.querySelector('.rs-confirm-dialog__extra .extra-probe')
+    expect(extra?.textContent).toContain('extra-body')
+    wrapper.unmount()
+  })
+
+  it('blocks close when beforeClose returns false', async () => {
+    const Host = defineComponent({
+      components: { RsConfirmDialog },
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      template: `
+        <RsConfirmDialog
+          v-model:open="open"
+          title="拦截"
+          :before-close="() => false"
+        />
+      `,
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const cancelBtn = document.body.querySelector(
+      '.rs-confirm-dialog__footer button',
+    ) as HTMLElement
+    await cancelBtn.click()
+    await flushPromises()
+    expect(wrapper.findComponent(RsConfirmDialog).props('open')).toBe(true)
+    wrapper.unmount()
+  })
 })

package/src/__tests__/RsContextMenu.spec.ts

@@ -115,4 +115,16 @@ describe('RsContextMenu', () => {
     expect(document.body.textContent).toContain('项 19')
     wrapper.unmount()
   })
+
+  it('does not open empty menu bubble when items are empty', async () => {
+    const wrapper = mount(RsContextMenu, {
+      props: { items: [] },
+      slots: { default: '<div class="trigger">Right click</div>' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.trigger').trigger('contextmenu')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-context-menu__content')).toBeNull()
+    wrapper.unmount()
+  })
 })

package/src/__tests__/RsDateTimePicker.spec.ts

@@ -60,6 +60,17 @@ describe('RsDateTimePicker', () => {
     wrapper.unmount()
   })
 
+  it('propagates size to embedded time picker', async () => {
+    const wrapper = mount(RsDateTimePicker, {
+      props: { modelValue: '', size: 'lg', open: true },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(wrapper.find('.rs-date-picker--lg').exists()).toBe(true)
+    expect(document.body.querySelector('.rs-time-picker--lg')).not.toBeNull()
+    wrapper.unmount()
+  })
+
   it('disables trigger when disabled', () => {
     const wrapper = mount(RsDateTimePicker, {
       props: { modelValue: '2025-06-16 14:30:00', disabled: true },

package/src/__tests__/RsDescriptions.spec.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import RsDescriptions from '../components/RsDescriptions.vue'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+
+const sampleItems = [
+  { key: 'name', label: '名称', value: '弱水' },
+  { key: 'owner', label: '负责人', value: 'Ada' },
+]
+
+describe('RsDescriptions', () => {
+  it('defaults to md size without config override', () => {
+    const wrapper = mount(RsDescriptions, {
+      props: { items: sampleItems },
+    })
+    expect(wrapper.classes()).toContain('rs-descriptions--md')
+  })
+
+  it('inherits controlSize from RsConfigProvider when size omitted', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { controlSize: 'sm' },
+      slots: {
+        default: () => h(RsDescriptions, { items: sampleItems }),
+      },
+    })
+    expect(wrapper.find('.rs-descriptions').classes()).toContain('rs-descriptions--sm')
+  })
+
+  it('props size overrides RsConfigProvider controlSize', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { controlSize: 'sm' },
+      slots: {
+        default: () => h(RsDescriptions, { items: sampleItems, size: 'lg' }),
+      },
+    })
+    expect(wrapper.find('.rs-descriptions').classes()).toContain('rs-descriptions--lg')
+    expect(wrapper.find('.rs-descriptions').classes()).not.toContain('rs-descriptions--sm')
+  })
+
+  it('supports ssm from config', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { controlSize: 'ssm' },
+      slots: {
+        default: () => h(RsDescriptions, { items: sampleItems }),
+      },
+    })
+    expect(wrapper.find('.rs-descriptions').classes()).toContain('rs-descriptions--ssm')
+  })
+})

package/src/__tests__/RsDialog.spec.ts

@@ -275,9 +275,14 @@ describe('RsDialog', () => {
     header.dispatchEvent(
       new PointerEvent('pointerdown', { clientX: 120, clientY: 80, bubbles: true, cancelable: true }),
     )
+    expect(document.body.style.cursor).toBe('move')
     window.dispatchEvent(
       new PointerEvent('pointermove', { clientX: 180, clientY: 120, bubbles: true, cancelable: true }),
     )
+    // 拖拽过程中应即时位移，不能等到 pointerup
+    expect(content.style.left).not.toBe(startLeft)
+    expect(content.style.top).not.toBe(startTop)
+
     window.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, cancelable: true }))
     await flushPromises()
 
@@ -401,4 +406,116 @@ describe('RsDialog', () => {
     expect(wrapper.props('open')).toBe(true)
     wrapper.unmount()
   })
+
+  it('beforeClose returning false keeps dialog open', async () => {
+    const Host = defineComponent({
+      components: { RsDialog },
+      setup() {
+        const open = ref(true)
+        const beforeClose = () => false
+        return { open, beforeClose }
+      },
+      template:
+        '<RsDialog v-model:open="open" title="拦截关闭" :fullscreenable="false" :before-close="beforeClose" />',
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-dialog__actions button') as HTMLElement
+    await closeBtn.click()
+    await flushPromises()
+    expect(wrapper.findComponent(RsDialog).props('open')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('renders builtin footer when showFooter is true and no footer slot', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '内置页脚',
+        showFooter: true,
+        layout: 'confirm',
+        resizable: false,
+        fullscreenable: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const footer = document.body.querySelector('.rs-dialog__footer')
+    expect(footer).not.toBeNull()
+    expect(footer?.querySelectorAll('button').length).toBe(2)
+    wrapper.unmount()
+  })
+
+  it('does not render builtin footer by default', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '无页脚',
+        layout: 'confirm',
+        resizable: false,
+        fullscreenable: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-dialog__footer')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('applies custom numeric width on confirm layout', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '自定义宽度',
+        layout: 'confirm',
+        width: 520,
+        resizable: false,
+        fullscreenable: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    expect(content.classList.contains('rs-dialog__content--custom-width')).toBe(true)
+    expect(content.style.maxWidth).toBe('520px')
+    wrapper.unmount()
+  })
+
+  it('title slot overrides title prop text', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '属性标题', fullscreenable: false },
+      slots: { title: '<span class="slot-title">插槽标题</span>' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.slot-title')?.textContent).toBe('插槽标题')
+    wrapper.unmount()
+  })
+
+  it('emits afterClose when closed via close button', async () => {
+    const Host = defineComponent({
+      components: { RsDialog },
+      setup() {
+        const open = ref(true)
+        const reason = ref('')
+        return { open, reason }
+      },
+      template: `
+        <RsDialog
+          v-model:open="open"
+          title="关闭事件"
+          :fullscreenable="false"
+          @after-close="reason = $event"
+        />
+      `,
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-dialog__actions button') as HTMLElement
+    await closeBtn.click()
+    await flushPromises()
+    expect(wrapper.vm.reason).toBe('close')
+    expect(wrapper.findComponent(RsDialog).props('open')).toBe(false)
+    wrapper.unmount()
+  })
 })