niuma-ui 1.0.0

package/src/__tests__/RsSelect.spec.ts

@@ -0,0 +1,291 @@
+import { describe, expect, it, beforeEach, afterEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { defineComponent, h, ref } from 'vue'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import RsForm from '../components/RsForm.vue'
+import RsSelect from '../components/RsSelect.vue'
+import { filterSelectOptions } from '../components/select-utils'
+
+describe('RsSelect', () => {
+  const options = [
+    { label: 'GPT-4o', value: 'gpt-4o' },
+    { label: 'Claude', value: 'claude' },
+  ]
+
+  beforeEach(() => {
+    HTMLElement.prototype.scrollIntoView = () => {}
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders trigger with custom placeholder', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', placeholder: '选择模型' },
+    })
+    expect(wrapper.find('.rs-select__trigger').exists()).toBe(true)
+    expect(wrapper.find('.rs-select__placeholder').text()).toBe('选择模型')
+  })
+
+  it('uses zh-CN default placeholder', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '' },
+    })
+    expect(wrapper.find('.rs-select__placeholder').text()).toBe('请选择')
+  })
+
+  it('uses en-US default placeholder inside RsConfigProvider', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { locale: 'en-US' },
+      slots: {
+        default: () => h(RsSelect, { options, modelValue: '' }),
+      },
+    })
+    expect(wrapper.find('.rs-select__placeholder').text()).toBe('Select')
+  })
+
+  it('forwards v-model through Reka ComboboxRoot', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '' },
+    })
+    const root = wrapper.getComponent({ name: 'ComboboxRoot' })
+    await root.vm.$emit('update:modelValue', 'claude')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['claude'])
+  })
+
+  it('shows selected option label in single mode', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: 'claude' },
+    })
+    expect(wrapper.find('.rs-select__single-label').text()).toBe('Claude')
+  })
+
+  it('applies modifier classes for multiple and searchable', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: [], multiple: true, searchable: true },
+    })
+    expect(wrapper.find('.rs-select').classes()).toContain('rs-select--multiple')
+    expect(wrapper.find('.rs-select').classes()).toContain('rs-select--searchable')
+  })
+
+  it('does not render search input while dropdown is closed', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', searchable: true },
+    })
+    expect(wrapper.find('.rs-select__search').exists()).toBe(false)
+  })
+
+  it('shows clear button when clearable and has value', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: 'gpt-4o', clearable: true },
+    })
+    expect(wrapper.find('.rs-select__clear').exists()).toBe(true)
+  })
+
+  it('clears value when clear button is clicked', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: 'gpt-4o', clearable: true },
+    })
+    await wrapper.find('.rs-select__clear').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([''])
+  })
+
+  it('supports multiple mode tags', () => {
+    const wrapper = mount(RsSelect, {
+      props: {
+        options,
+        modelValue: ['gpt-4o', 'claude'],
+        multiple: true,
+      },
+    })
+    expect(wrapper.find('.rs-select__tag').exists()).toBe(true)
+    expect(wrapper.findAll('.rs-select__tag')).toHaveLength(2)
+  })
+
+  it('removes tag in multiple mode', async () => {
+    const wrapper = mount(RsSelect, {
+      props: {
+        options,
+        modelValue: ['gpt-4o', 'claude'],
+        multiple: true,
+      },
+    })
+    await wrapper.find('.rs-select__tag-remove').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([['claude']])
+  })
+
+  it('setValue via defineExpose updates model', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '' },
+    })
+    const exposed = wrapper.vm as InstanceType<typeof RsSelect>
+    exposed.setValue('claude')
+    await flushPromises()
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['claude'])
+  })
+
+  it('setValue supports multiple mode', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: [], multiple: true },
+    })
+    const exposed = wrapper.vm as InstanceType<typeof RsSelect>
+    exposed.setValue(['gpt-4o', 'claude'])
+    await flushPromises()
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([['gpt-4o', 'claude']])
+  })
+
+  it('shows loading status text when dropdown is open', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', loading: true, searchable: true },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-select__status')?.textContent).toBe('加载中…')
+    wrapper.unmount()
+  })
+
+  it('uses custom loading text when dropdown is open', async () => {
+    const wrapper = mount(RsSelect, {
+      props: {
+        options,
+        modelValue: '',
+        loading: true,
+        loadingText: 'Fetching…',
+        searchable: true,
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-select__status')?.textContent).toBe('Fetching…')
+    wrapper.unmount()
+  })
+
+  it('disables trigger when disabled', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: 'gpt-4o', disabled: true },
+    })
+    expect(wrapper.find('.rs-select__trigger').attributes('data-disabled')).toBeDefined()
+  })
+
+  it('validates required field inside RsForm', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsSelect },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const role = ref('')
+        return { formRef, role, roleOptions: options }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsSelect v-model="role" :options="roleOptions" required />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const invalid = await wrapper.vm.formRef!.validate()
+    expect(invalid.valid).toBe(false)
+    wrapper.vm.role = 'claude'
+    await flushPromises()
+    const valid = await wrapper.vm.formRef!.validate()
+    expect(valid.valid).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('enables manual filter when remote', () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', searchable: true, remote: true },
+    })
+    const root = wrapper.getComponent({ name: 'ComboboxRoot' })
+    expect(root.props('ignoreFilter')).toBe(true)
+  })
+
+  it('creatable enables search and commits typed value on Enter', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', creatable: true },
+      attachTo: document.body,
+    })
+    expect(wrapper.find('.rs-select').classes()).toContain('rs-select--searchable')
+    expect(wrapper.find('.rs-select').classes()).toContain('rs-select--creatable')
+
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    const input = document.querySelector('.rs-select__search') as HTMLInputElement | null
+    expect(input).toBeTruthy()
+    input!.value = 'CITEXT'
+    input!.dispatchEvent(new Event('input', { bubbles: true }))
+    await flushPromises()
+
+    const createItem = document.querySelector('.rs-select__item--create')
+    expect(createItem?.textContent).toContain('CITEXT')
+
+    input!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    await flushPromises()
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['CITEXT'])
+    wrapper.unmount()
+  })
+
+  it('creatable does not offer create when query matches an option', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '', creatable: true },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    const input = document.querySelector('.rs-select__search') as HTMLInputElement | null
+    input!.value = 'claude'
+    input!.dispatchEvent(new Event('input', { bubbles: true }))
+    await flushPromises()
+    expect(document.querySelector('.rs-select__item--create')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('defaults to content wider than trigger; matchTriggerWidth locks equal width', async () => {
+    const wrapper = mount(RsSelect, {
+      props: { options, modelValue: '' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.rs-select__trigger').trigger('click')
+    await flushPromises()
+    const content = document.querySelector('.rs-select__content')
+    expect(content).toBeTruthy()
+    expect(content!.classList.contains('rs-select__content--match-trigger')).toBe(false)
+
+    await wrapper.setProps({ matchTriggerWidth: true })
+    await flushPromises()
+    const matched = document.querySelector('.rs-select__content')
+    expect(matched!.classList.contains('rs-select__content--match-trigger')).toBe(true)
+    wrapper.unmount()
+  })
+})
+
+describe('select-utils', () => {
+  const contains = (text: string, search: string) =>
+    text.toLowerCase().includes(search.toLowerCase())
+
+  it('filterSelectOptions filters flat and grouped options', () => {
+    const grouped = [
+      {
+        label: '前端',
+        options: [
+          { label: 'Vue', value: 'vue' },
+          { label: 'React', value: 'react' },
+        ],
+      },
+      {
+        label: '后端',
+        options: [{ label: 'Go', value: 'go' }],
+      },
+    ]
+    const result = filterSelectOptions(grouped, 'vue', contains)
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ label: '前端' })
+    if ('options' in result[0]) {
+      expect(result[0].options).toHaveLength(1)
+      expect(result[0].options[0]?.value).toBe('vue')
+    }
+  })
+})

package/src/__tests__/RsSidebar.spec.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import RsSidebar from '../components/RsSidebar.vue'
+import RsSidebarGroup from '../components/RsSidebarGroup.vue'
+import RsSidebarItem from '../components/RsSidebarItem.vue'
+
+describe('RsSidebar', () => {
+  it('renders aside with title and subtitle', () => {
+    const wrapper = mount(RsSidebar, {
+      props: { title: '弱水', subtitle: 'Studio' },
+    })
+    expect(wrapper.element.tagName).toBe('ASIDE')
+    expect(wrapper.find('.rs-sidebar__title').text()).toBe('弱水')
+    expect(wrapper.find('.rs-sidebar__subtitle').text()).toBe('Studio')
+  })
+
+  it.each(['sm', 'md', 'lg'] as const)('applies %s width class', (width) => {
+    const wrapper = mount(RsSidebar, { props: { width } })
+    expect(wrapper.classes()).toContain(`rs-sidebar--${width}`)
+  })
+
+  it('toggles collapsed via collapse button', async () => {
+    const wrapper = mount(RsSidebar, {
+      props: { title: '弱水', collapsible: true, collapsed: false },
+    })
+    expect(wrapper.classes()).not.toContain('rs-sidebar--collapsed')
+    await wrapper.find('.rs-sidebar__collapse').trigger('click')
+    expect(wrapper.emitted('update:collapsed')?.pop()).toEqual([true])
+  })
+
+  it('hides subtitle when collapsed', () => {
+    const wrapper = mount(RsSidebar, {
+      props: { title: '弱水', subtitle: 'Studio', collapsed: true },
+    })
+    expect(wrapper.classes()).toContain('rs-sidebar--collapsed')
+    expect(wrapper.find('.rs-sidebar__subtitle').exists()).toBe(false)
+  })
+
+  it('renders custom header slot', () => {
+    const wrapper = mount(RsSidebar, {
+      slots: { header: '<div class="custom-header">自定义顶栏</div>' },
+    })
+    expect(wrapper.find('.custom-header').text()).toBe('自定义顶栏')
+    expect(wrapper.find('.rs-sidebar__title').exists()).toBe(false)
+  })
+
+  it('renders footer slot with collapsed scope', () => {
+    const wrapper = mount(RsSidebar, {
+      props: { collapsed: true },
+      slots: {
+        footer: ({ collapsed }: { collapsed: boolean }) =>
+          h('div', { class: 'footer-state' }, collapsed ? 'folded' : 'open'),
+      },
+    })
+    expect(wrapper.find('.footer-state').text()).toBe('folded')
+  })
+
+  it('passes collapsed to default slot scope', () => {
+    const wrapper = mount(RsSidebar, {
+      props: { collapsed: true },
+      slots: {
+        default: ({ collapsed }: { collapsed: boolean }) =>
+          h('div', { class: 'body-state' }, collapsed ? 'yes' : 'no'),
+      },
+    })
+    expect(wrapper.find('.body-state').text()).toBe('yes')
+  })
+})
+
+describe('RsSidebarGroup', () => {
+  it('renders group title', () => {
+    const wrapper = mount(RsSidebarGroup, {
+      props: { title: '导航' },
+      slots: { default: '<button class="item">项</button>' },
+    })
+    expect(wrapper.find('.rs-sidebar-group__title').text()).toBe('导航')
+  })
+
+  it('hides group title when collapsed', () => {
+    const wrapper = mount(RsSidebarGroup, {
+      props: { title: '导航', collapsed: true },
+    })
+    expect(wrapper.find('.rs-sidebar-group__title').exists()).toBe(false)
+  })
+})
+
+describe('RsSidebarItem', () => {
+  it('renders label and icon', () => {
+    const wrapper = mount(RsSidebarItem, {
+      props: { label: '仪表盘', icon: 'layout-dashboard' },
+    })
+    expect(wrapper.find('.rs-sidebar-item__label').text()).toBe('仪表盘')
+    expect(wrapper.find('.rs-sidebar-item__icon').exists()).toBe(true)
+  })
+
+  it('applies active class', () => {
+    const wrapper = mount(RsSidebarItem, {
+      props: { label: '仪表盘', active: true },
+    })
+    expect(wrapper.classes()).toContain('rs-sidebar-item--active')
+  })
+
+  it('disables interaction when disabled', () => {
+    const wrapper = mount(RsSidebarItem, {
+      props: { label: '不可用', disabled: true },
+    })
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('hides label and sets title when collapsed', () => {
+    const wrapper = mount(RsSidebarItem, {
+      props: { label: '设置', collapsed: true },
+    })
+    expect(wrapper.find('.rs-sidebar-item__label').exists()).toBe(false)
+    expect(wrapper.attributes('title')).toBe('设置')
+    expect(wrapper.classes()).toContain('rs-sidebar-item--collapsed')
+  })
+})

package/src/__tests__/RsSplitPane.spec.ts

@@ -0,0 +1,177 @@
+import { describe, expect, it } from 'vitest'
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import RsSplitPane from '../components/RsSplitPane.vue'
+import type { RsSplitPaneItem } from '../components/split-pane-utils'
+
+const twoPanes: RsSplitPaneItem[] = [{ key: 'a' }, { key: 'b' }]
+
+function mountSplit(props: Record<string, unknown> = {}) {
+  return mount(RsSplitPane, {
+    props: { panes: twoPanes, ...props },
+    slots: {
+      a: '<div class="pane-a">A</div>',
+      b: '<div class="pane-b">B</div>',
+    },
+  })
+}
+
+describe('RsSplitPane', () => {
+  it('renders one pane per item plus n-1 resizers', () => {
+    const wrapper = mountSplit()
+    expect(wrapper.findAll('.rs-split__pane')).toHaveLength(2)
+    expect(wrapper.findAll('.rs-split__resizer')).toHaveLength(1)
+    expect(wrapper.find('.pane-a').text()).toBe('A')
+    expect(wrapper.find('.pane-b').text()).toBe('B')
+  })
+
+  it('defaults to an equal split and reflects it on the separator', () => {
+    const wrapper = mountSplit()
+    const resizer = wrapper.find('.rs-split__resizer')
+    expect(resizer.element.tagName).toBe('HR')
+    expect(resizer.attributes('aria-valuenow')).toBe('50')
+    expect(resizer.attributes('aria-orientation')).toBe('vertical')
+  })
+
+  it('applies the orientation modifier class', () => {
+    expect(mountSplit().classes()).toContain('rs-split--horizontal')
+    expect(mountSplit({ orientation: 'vertical' }).classes()).toContain('rs-split--vertical')
+  })
+
+  it('resizes with the keyboard along the active axis', async () => {
+    const wrapper = mountSplit({ keyboardStep: 4 })
+    await wrapper.find('.rs-split__resizer').trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.emitted('update:sizes')?.pop()).toEqual([[54, 46]])
+    expect(wrapper.emitted('resize-end')).toBeTruthy()
+  })
+
+  it('ignores cross-axis arrow keys', async () => {
+    const wrapper = mountSplit({ orientation: 'horizontal' })
+    await wrapper.find('.rs-split__resizer').trigger('keydown', { key: 'ArrowDown' })
+    expect(wrapper.emitted('update:sizes')).toBeFalsy()
+  })
+
+  it('jumps to bounds with Home / End', async () => {
+    const wrapper = mountSplit()
+    await wrapper.find('.rs-split__resizer').trigger('keydown', { key: 'End' })
+    expect(wrapper.emitted('update:sizes')?.pop()).toEqual([[100, 0]])
+    await wrapper.find('.rs-split__resizer').trigger('keydown', { key: 'Home' })
+    expect(wrapper.emitted('update:sizes')?.pop()).toEqual([[0, 100]])
+  })
+
+  it('does not resize when disabled and removes the separator from tab order', async () => {
+    const wrapper = mountSplit({ disabled: true })
+    const resizer = wrapper.find('.rs-split__resizer')
+    expect(resizer.attributes('tabindex')).toBe('-1')
+    expect(wrapper.classes()).toContain('rs-split--disabled')
+    await resizer.trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.emitted('update:sizes')).toBeFalsy()
+  })
+
+  it('renders the grip only when withHandle is set', () => {
+    expect(mountSplit().find('.rs-split__grip').exists()).toBe(false)
+    expect(mountSplit({ withHandle: true }).find('.rs-split__grip').exists()).toBe(true)
+  })
+
+  it('honours controlled v-model sizes', () => {
+    const wrapper = mountSplit({ sizes: [70, 30] })
+    expect(wrapper.find('.rs-split__resizer').attributes('aria-valuenow')).toBe('70')
+  })
+
+  it('reacts to external size updates', async () => {
+    const wrapper = mountSplit({ sizes: [50, 50] })
+    await wrapper.setProps({ sizes: [20, 80] })
+    expect(wrapper.find('.rs-split__resizer').attributes('aria-valuenow')).toBe('20')
+  })
+
+  it('exposes collapse / expand / reset controls', async () => {
+    const wrapper = mount(RsSplitPane, {
+      props: {
+        panes: [
+          { key: 'a', size: 40, min: 20, collapsible: true, collapsedSize: 0 },
+          { key: 'b', size: 60 },
+        ] satisfies RsSplitPaneItem[],
+      },
+      slots: { a: 'A', b: 'B' },
+    })
+    const vm = wrapper.vm as unknown as {
+      collapse: (key: string) => void
+      expand: (key: string, size?: number) => void
+      reset: () => void
+      getSizes: () => number[]
+    }
+
+    vm.collapse('a')
+    await wrapper.vm.$nextTick()
+    expect(vm.getSizes()).toEqual([0, 100])
+    expect(wrapper.emitted('collapse')?.pop()).toEqual(['a'])
+
+    vm.expand('a', 30)
+    await wrapper.vm.$nextTick()
+    expect(vm.getSizes()).toEqual([30, 70])
+    expect(wrapper.emitted('expand')?.pop()).toEqual(['a'])
+
+    vm.collapse('a')
+    await wrapper.vm.$nextTick()
+    vm.expand('a')
+    await wrapper.vm.$nextTick()
+    // 未传 toSize 时应还原折叠前宽度，而不是落到 min
+    expect(vm.getSizes()).toEqual([30, 70])
+
+    vm.reset()
+    await wrapper.vm.$nextTick()
+    expect(vm.getSizes()).toEqual([40, 60])
+  })
+
+  it('toggles collapse via keyboard on the separator', async () => {
+    const wrapper = mount(RsSplitPane, {
+      props: {
+        panes: [
+          { key: 'a', size: 40, min: 20, collapsible: true, collapsedSize: 0 },
+          { key: 'b', size: 60 },
+        ] satisfies RsSplitPaneItem[],
+      },
+      slots: { a: 'A', b: 'B' },
+    })
+    await wrapper.find('.rs-split__resizer').trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('collapse')?.pop()).toEqual(['a'])
+    await wrapper.find('.rs-split__resizer').trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('expand')?.pop()).toEqual(['a'])
+  })
+
+  it('does not mutate nested split panes when resizing the outer separator', async () => {
+    const outer = mount(RsSplitPane, {
+      props: {
+        orientation: 'vertical',
+        panes: [{ key: 'top', size: 70 }, { key: 'bottom', size: 30 }],
+        sizes: [70, 30],
+        keyboardStep: 10,
+      },
+      slots: {
+        top: () =>
+          h(
+            RsSplitPane,
+            {
+              panes: [{ key: 'left' }, { key: 'right' }],
+              sizes: [40, 60],
+            },
+            {
+              left: () => h('div', { class: 'inner-left' }, 'L'),
+              right: () => h('div', { class: 'inner-right' }, 'R'),
+            },
+          ),
+        bottom: () => h('div', { class: 'bottom-pane' }, 'B'),
+      },
+    })
+
+    const resizers = outer.findAll('.rs-split__resizer')
+    expect(resizers).toHaveLength(2)
+    expect(resizers[0]!.attributes('aria-valuenow')).toBe('40')
+    expect(resizers[1]!.attributes('aria-valuenow')).toBe('70')
+
+    await resizers[1]!.trigger('keydown', { key: 'ArrowDown' })
+
+    expect(resizers[0]!.attributes('aria-valuenow')).toBe('40')
+    expect(outer.emitted('update:sizes')?.pop()).toEqual([[80, 20]])
+  })
+})

package/src/__tests__/RsStatCard.spec.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsStatCard from '../components/RsStatCard.vue'
+
+const accents = ['primary', 'success', 'warning', 'danger', 'info'] as const
+
+describe('RsStatCard', () => {
+  it('renders label and value', () => {
+    const wrapper = mount(RsStatCard, {
+      props: { label: '今日调用', value: 12480 },
+    })
+    expect(wrapper.find('.rs-stat-card__label').text()).toBe('今日调用')
+    expect(wrapper.find('.rs-stat-card__value').text()).toBe('12480')
+  })
+
+  it('renders as section with base class', () => {
+    const wrapper = mount(RsStatCard, {
+      props: { label: '指标', value: 1 },
+    })
+    expect(wrapper.element.tagName).toBe('SECTION')
+    expect(wrapper.classes()).toContain('rs-stat-card')
+  })
+
+  it('uses primary accent by default', () => {
+    const wrapper = mount(RsStatCard, {
+      props: { label: '指标', value: 1 },
+    })
+    expect(wrapper.classes()).toContain('rs-stat-card--primary')
+  })
+
+  it.each(accents)('applies %s accent class', (accent) => {
+    const wrapper = mount(RsStatCard, {
+      props: { label: '指标', value: 1, accent },
+    })
+    expect(wrapper.classes()).toContain(`rs-stat-card--${accent}`)
+  })
+
+  it('renders description when provided', () => {
+    const wrapper = mount(RsStatCard, {
+      props: {
+        label: '错误率',
+        value: '0.12%',
+        description: '过去 24 小时',
+      },
+    })
+    expect(wrapper.find('.rs-stat-card__description').text()).toBe('过去 24 小时')
+  })
+
+  it('omits description when not provided', () => {
+    const wrapper = mount(RsStatCard, {
+      props: { label: '指标', value: 1 },
+    })
+    expect(wrapper.find('.rs-stat-card__description').exists()).toBe(false)
+  })
+
+  it('shows skeleton instead of value when loading', () => {
+    const wrapper = mount(RsStatCard, {
+      props: { label: '活跃用户', value: 3842, loading: true },
+    })
+    expect(wrapper.find('.rs-stat-card__skeleton').exists()).toBe(true)
+    expect(wrapper.find('.rs-stat-card__value').exists()).toBe(false)
+  })
+
+  it('renders value slot', () => {
+    const wrapper = mount(RsStatCard, {
+      props: { label: '营收' },
+      slots: { value: '<span class="custom-value">¥ 128万</span>' },
+    })
+    expect(wrapper.find('.custom-value').text()).toBe('¥ 128万')
+  })
+
+  it('renders default slot for extra content', () => {
+    const wrapper = mount(RsStatCard, {
+      props: { label: '存储', value: '68%' },
+      slots: { default: '<div class="extra">进度条</div>' },
+    })
+    expect(wrapper.find('.extra').text()).toBe('进度条')
+  })
+})