niuma-ui 1.0.0

package/src/__tests__/RsDialog.spec.ts

@@ -0,0 +1,404 @@
+import { defineComponent, h, ref } from 'vue'
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import RsDialog from '../components/RsDialog.vue'
+
+async function flushAnimationFrames(count = 2): Promise<void> {
+  for (let i = 0; i < count; i += 1) {
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve())
+    })
+  }
+}
+
+describe('RsDialog', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+  it('renders title, description, and body slot when open', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '编辑成员',
+        description: '修改角色与权限。',
+        deferBodyMount: false,
+      },
+      slots: { body: '<p class="slot-body">正文内容</p>' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content')
+    expect(content?.textContent).toContain('编辑成员')
+    expect(content?.textContent).toContain('修改角色与权限。')
+    expect(document.body.querySelector('.slot-body')?.textContent).toBe('正文内容')
+    wrapper.unmount()
+  })
+
+  it('defers body slot mount until after paint in window layout', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '延后挂载' },
+      slots: { body: '<p class="slot-body">正文内容</p>' },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('.slot-body')).toBeNull()
+
+    await flushAnimationFrames()
+    await flushPromises()
+    expect(document.body.querySelector('.slot-body')?.textContent).toBe('正文内容')
+    wrapper.unmount()
+  })
+
+  it('destroys deferred body content when closed', async () => {
+    const Host = defineComponent({
+      components: { RsDialog },
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      template: '<RsDialog v-model:open="open" title="关闭销毁"><template #body><p class="slot-body">正文</p></template></RsDialog>',
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushAnimationFrames()
+    await flushPromises()
+    expect(document.body.querySelector('.slot-body')).not.toBeNull()
+
+    await wrapper.findComponent(RsDialog).setValue(false, 'open')
+    await flushPromises()
+    expect(document.body.querySelector('.slot-body')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('applies window layout with resize handles by default', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '测试', width: 'sm' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content')
+    expect(content?.classList.contains('rs-dialog__content--window')).toBe(true)
+    expect(content?.classList.contains('rs-dialog__content--sm')).toBe(true)
+    expect(document.body.querySelectorAll('.rs-dialog__resize-handle').length).toBe(8)
+    wrapper.unmount()
+  })
+
+  it('applies confirm layout when explicitly set', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '测试', width: 'sm', layout: 'confirm', resizable: false, fullscreenable: false },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content')
+    expect(content?.classList.contains('rs-dialog__content--confirm')).toBe(true)
+    expect(content?.classList.contains('rs-dialog__content--sm')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('renders footer slot', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '保存' },
+      slots: { footer: '<button type="button" class="footer-save">保存</button>' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-dialog__footer .footer-save')?.textContent).toBe('保存')
+    wrapper.unmount()
+  })
+
+  it('closes when header close button is clicked', async () => {
+    const Host = defineComponent({
+      components: { RsDialog },
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      template: '<RsDialog v-model:open="open" title="关闭测试" :fullscreenable="false" />',
+    })
+    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(false)
+    wrapper.unmount()
+  })
+
+  it('hides overlay by default', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '无遮罩' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-dialog__overlay')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('shows overlay when showOverlay is true', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '有遮罩', showOverlay: true },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-dialog__overlay')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('hides close button when showClose is false', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '无关闭', showClose: false, fullscreenable: false },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelectorAll('.rs-dialog__actions button').length).toBe(0)
+    wrapper.unmount()
+  })
+
+  it('applies window layout class and inline size style', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '窗口',
+        layout: 'window',
+        draggable: true,
+        resizable: true,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    expect(content.classList.contains('rs-dialog__content--window')).toBe(true)
+    expect(content.style.width).not.toBe('')
+    expect(content.style.height).not.toBe('')
+    wrapper.unmount()
+  })
+
+  it('renders resize handles in resizable window mode', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '可缩放',
+        layout: 'window',
+        resizable: true,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelectorAll('.rs-dialog__resize-handle').length).toBe(8)
+    wrapper.unmount()
+  })
+
+  it('shows fullscreen toggle only in window layout with fullscreenable', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '全屏',
+        layout: 'window',
+        fullscreenable: true,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const actionButtons = document.body.querySelectorAll('.rs-dialog__actions button')
+    expect(actionButtons.length).toBe(2)
+    wrapper.unmount()
+  })
+
+  it('toggles fullscreen class and restores window bounds', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '全屏',
+        layout: 'window',
+        fullscreenable: true,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    const fullscreenBtn = document.body.querySelectorAll('.rs-dialog__actions button')[0] as HTMLElement
+    const beforeWidth = content.style.width
+    const beforeHeight = content.style.height
+
+    await fullscreenBtn.click()
+    await flushPromises()
+    expect(content.classList.contains('rs-dialog__content--fullscreen')).toBe(true)
+    expect(content.style.width).toContain('calc')
+    expect(content.classList.contains('rs-dialog__content--bounds-transition')).toBe(false)
+
+    await fullscreenBtn.click()
+    await flushPromises()
+    expect(content.classList.contains('rs-dialog__content--fullscreen')).toBe(false)
+    expect(content.style.width).toBe(beforeWidth)
+    expect(content.style.height).toBe(beforeHeight)
+    wrapper.unmount()
+  })
+
+  it('enables bounds transition when boundsTransition is true', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '全屏动画',
+        layout: 'window',
+        fullscreenable: true,
+        boundsTransition: true,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    const fullscreenBtn = document.body.querySelectorAll('.rs-dialog__actions button')[0] as HTMLElement
+
+    await fullscreenBtn.click()
+    await flushPromises()
+    expect(content.classList.contains('rs-dialog__content--bounds-transition')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('moves window when draggable header is dragged', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '拖拽',
+        layout: 'window',
+        draggable: true,
+        resizable: true,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    const header = document.body.querySelector('.rs-dialog__header') as HTMLElement
+    expect(content.classList.contains('rs-dialog__content--draggable')).toBe(true)
+    const startLeft = content.style.left
+    const startTop = content.style.top
+
+    header.dispatchEvent(
+      new PointerEvent('pointerdown', { clientX: 120, clientY: 80, bubbles: true, cancelable: true }),
+    )
+    window.dispatchEvent(
+      new PointerEvent('pointermove', { clientX: 180, clientY: 120, bubbles: true, cancelable: true }),
+    )
+    window.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, cancelable: true }))
+    await flushPromises()
+
+    expect(content.style.left).not.toBe(startLeft)
+    expect(content.style.top).not.toBe(startTop)
+    wrapper.unmount()
+  })
+
+  it('does not move window when draggable is false', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '不可拖',
+        layout: 'window',
+        draggable: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    const header = document.body.querySelector('.rs-dialog__header') as HTMLElement
+    const startLeft = content.style.left
+    const startTop = content.style.top
+
+    header.dispatchEvent(
+      new PointerEvent('pointerdown', { clientX: 120, clientY: 80, bubbles: true, cancelable: true }),
+    )
+    window.dispatchEvent(
+      new PointerEvent('pointermove', { clientX: 180, clientY: 120, bubbles: true, cancelable: true }),
+    )
+    window.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, cancelable: true }))
+    await flushPromises()
+
+    expect(content.style.left).toBe(startLeft)
+    expect(content.style.top).toBe(startTop)
+    wrapper.unmount()
+  })
+
+  it('applies tone modifier class', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '警告', tone: 'warning' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content')
+    expect(content?.classList.contains('rs-dialog__content--tone-warning')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('uses en-US close tooltip inside RsConfigProvider', async () => {
+    const Host = defineComponent({
+      components: { RsDialog, RsConfigProvider },
+      setup() {
+        return () =>
+          h(RsConfigProvider, { locale: 'en-US' }, {
+            default: () => h(RsDialog, { open: true, title: 'Dialog', fullscreenable: false }),
+          })
+      },
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-dialog__actions button') as HTMLElement
+    expect(closeBtn.querySelector('.rs-btn__tooltip')?.textContent).toContain('Close')
+    wrapper.unmount()
+  })
+
+  it('mounts portal into custom target via teleportTo', async () => {
+    const target = document.createElement('div')
+    target.id = 'rs-dialog-target'
+    document.body.appendChild(target)
+
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '挂载目标',
+        teleportTo: '#rs-dialog-target',
+      },
+      attachTo: document.body,
+    })
+
+    await flushPromises()
+    expect(target.querySelector('.rs-dialog__content')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('passes modal=false to DialogRoot for non-modal usage', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '非模态',
+        modal: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const root = wrapper.findComponent({ name: 'DialogRoot' })
+    expect(root.props('modal')).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('prevents dismiss on outside interact for non-modal when closeOnOverlayClick is false', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '非模态',
+        modal: false,
+        closeOnOverlayClick: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = wrapper.findComponent({ name: 'DialogContent' })
+    const vnodeProps = content.vm.$.vnode.props as Record<string, unknown> | null
+    const onOutside =
+      (vnodeProps?.onPointerDownOutside as ((e: Event) => void) | undefined) ??
+      (vnodeProps?.['onPointer-down-outside'] as ((e: Event) => void) | undefined)
+    expect(typeof onOutside).toBe('function')
+    const event = new Event('pointerdown', { cancelable: true })
+    onOutside!(event)
+    expect(event.defaultPrevented).toBe(true)
+    expect(wrapper.props('open')).toBe(true)
+    wrapper.unmount()
+  })
+})

package/src/__tests__/RsDrawer.spec.ts

@@ -0,0 +1,145 @@
+import { defineComponent, h, ref } from 'vue'
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import RsDrawer from '../components/RsDrawer.vue'
+
+describe('RsDrawer', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders title, description, and default slot when open', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: {
+        open: true,
+        title: '筛选条件',
+        description: '按状态与时间过滤。',
+      },
+      slots: { default: '<p class="slot-body">正文内容</p>' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-drawer__content')
+    expect(content?.textContent).toContain('筛选条件')
+    expect(content?.textContent).toContain('按状态与时间过滤。')
+    expect(document.body.querySelector('.slot-body')?.textContent).toBe('正文内容')
+    wrapper.unmount()
+  })
+
+  it('applies default right side and md size classes', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, title: '测试' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-drawer__content')
+    expect(content?.classList.contains('rs-drawer__content--right')).toBe(true)
+    expect(content?.classList.contains('rs-drawer__content--md')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('applies custom side and size classes', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, title: '左侧', side: 'left', size: 'lg' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-drawer__content')
+    expect(content?.classList.contains('rs-drawer__content--left')).toBe(true)
+    expect(content?.classList.contains('rs-drawer__content--lg')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('renders footer slot', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, title: '保存' },
+      slots: { footer: '<button type="button" class="footer-save">保存</button>' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-drawer__footer .footer-save')?.textContent).toBe('保存')
+    wrapper.unmount()
+  })
+
+  it('renders custom header slot', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true },
+      slots: {
+        header: '<div class="custom-header">自定义标题</div>',
+        default: '正文',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.custom-header')?.textContent).toBe('自定义标题')
+    expect(document.body.querySelector('.rs-drawer__title')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('closes when header close button is clicked', async () => {
+    const Host = defineComponent({
+      components: { RsDrawer },
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      template: '<RsDrawer v-model:open="open" title="关闭测试" />',
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-drawer__header button') as HTMLElement
+    await closeBtn.click()
+    await flushPromises()
+    expect(wrapper.findComponent(RsDrawer).props('open')).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('hides overlay when showOverlay is false', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, title: '无遮罩', showOverlay: false },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-drawer__overlay')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('hides close button when showClose is false', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, title: '无关闭', showClose: false },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelectorAll('.rs-drawer__header button').length).toBe(0)
+    wrapper.unmount()
+  })
+
+  it('omits header when no title, description, close, or header slot', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, showClose: false },
+      slots: { default: '仅正文' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-drawer__header')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('uses en-US close tooltip inside RsConfigProvider', async () => {
+    const Host = defineComponent({
+      components: { RsDrawer, RsConfigProvider },
+      setup() {
+        return () =>
+          h(RsConfigProvider, { locale: 'en-US' }, {
+            default: () => h(RsDrawer, { open: true, title: 'Drawer' }),
+          })
+      },
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-drawer__header button') as HTMLElement
+    expect(closeBtn.querySelector('.rs-btn__tooltip')?.textContent).toContain('Close')
+    wrapper.unmount()
+  })
+})

package/src/__tests__/RsDropdown.spec.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsDropdown from '../components/RsDropdown.vue'
+
+describe('RsDropdown', () => {
+  const items = [
+    { label: '对话', value: 'chat', icon: 'message-square' as const },
+    { label: '编程', value: 'code', icon: 'folder' as const },
+  ]
+
+  const groupedItems = [
+    {
+      label: '创作',
+      options: [
+        { label: '对话', value: 'chat', icon: 'message-square' as const },
+        { label: '编程', value: 'code', icon: 'folder' as const },
+      ],
+    },
+    {
+      label: '检索',
+      options: [{ label: '知识库', value: 'kb', icon: 'search' as const }],
+    },
+  ]
+
+  it('opens menu on trigger click', async () => {
+    const wrapper = mount(RsDropdown, {
+      props: { items, modelValue: 'chat' },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('.rs-dropdown__content')).toBeNull()
+    await wrapper.find('.rs-dropdown__trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-dropdown__content')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('emits select when flat item chosen', async () => {
+    const wrapper = mount(RsDropdown, {
+      props: { items, modelValue: 'chat' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-dropdown__trigger').trigger('click')
+    await flushPromises()
+    const menuItems = document.body.querySelectorAll('.rs-dropdown__item')
+    ;(menuItems[1] as HTMLElement).click()
+    await flushPromises()
+    expect(wrapper.emitted('update:modelValue')?.pop()).toEqual(['code'])
+    expect(wrapper.emitted('select')?.[0]).toEqual(['code'])
+    wrapper.unmount()
+  })
+
+  it('renders grouped labels and nested items', async () => {
+    const wrapper = mount(RsDropdown, {
+      props: { items: groupedItems, modelValue: 'chat' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-dropdown__trigger').trigger('click')
+    await flushPromises()
+    const labels = document.body.querySelectorAll('.rs-dropdown__group-label')
+    expect(labels).toHaveLength(2)
+    expect(labels[0]?.textContent).toContain('创作')
+    expect(labels[1]?.textContent).toContain('检索')
+    expect(document.body.querySelectorAll('.rs-dropdown__item')).toHaveLength(3)
+    wrapper.unmount()
+  })
+
+  it('emits select when grouped item chosen', async () => {
+    const wrapper = mount(RsDropdown, {
+      props: { items: groupedItems, modelValue: 'chat' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-dropdown__trigger').trigger('click')
+    await flushPromises()
+    const menuItems = document.body.querySelectorAll('.rs-dropdown__item')
+    ;(menuItems[2] as HTMLElement).click()
+    await flushPromises()
+    expect(wrapper.emitted('update:modelValue')?.pop()).toEqual(['kb'])
+    expect(wrapper.emitted('select')?.[0]).toEqual(['kb'])
+    wrapper.unmount()
+  })
+
+  it('shows selected label from grouped options', () => {
+    const wrapper = mount(RsDropdown, {
+      props: { items: groupedItems, modelValue: 'kb' },
+    })
+    expect(wrapper.find('.rs-dropdown__label').text()).toBe('知识库')
+  })
+
+  it('shows placeholder when value not in items', () => {
+    const wrapper = mount(RsDropdown, {
+      props: { items: groupedItems, modelValue: '', placeholder: '选择模式' },
+    })
+    expect(wrapper.find('.rs-dropdown__label').text()).toBe('选择模式')
+    expect(wrapper.find('.rs-dropdown__label--placeholder').exists()).toBe(true)
+  })
+
+  it('keeps trigger label when showSelected is false', async () => {
+    const wrapper = mount(RsDropdown, {
+      props: {
+        items,
+        modelValue: 'chat',
+        showSelected: false,
+        placeholder: '更多操作',
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.find('.rs-dropdown__label').text()).toBe('更多操作')
+
+    await wrapper.find('.rs-dropdown__trigger').trigger('click')
+    await flushPromises()
+    const menuItems = document.body.querySelectorAll('.rs-dropdown__item')
+    ;(menuItems[1] as HTMLElement).click()
+    await flushPromises()
+
+    expect(wrapper.find('.rs-dropdown__label').text()).toBe('更多操作')
+    expect(wrapper.emitted('select')?.[0]).toEqual(['code'])
+    wrapper.unmount()
+  })
+
+  it('does not mark checked state in action mode', async () => {
+    const wrapper = mount(RsDropdown, {
+      props: {
+        items,
+        modelValue: 'chat',
+        showSelected: false,
+        placeholder: '操作',
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-dropdown__trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-dropdown__item[data-state="checked"]')).toBeNull()
+    wrapper.unmount()
+  })
+})