@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/components/search/__tests__/search.test.tsx

@@ -0,0 +1,1001 @@
+import { describe, expect, test, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import ElementPlus, { ElButton } from 'element-plus'
+import type { PlusColumn, FieldValues } from '@wlydfe/pro-ui-types'
+import Search from '../src/index.vue'
+
+describe('search/index.vue', () => {
+  test('render test', async () => {
+    const state = ref<FieldValues>({
+      status: '0',
+      name: '',
+      rate: 4,
+      progress: 100,
+      switch: true,
+      time: new Date().toString()
+    })
+
+    const columns: PlusColumn[] = [
+      {
+        label: '名称',
+        width: 120,
+        prop: 'name',
+        valueType: 'copy',
+        tooltip: '名称最多显示6个字符'
+      },
+      {
+        label: '状态',
+        width: 120,
+        prop: 'status',
+        valueType: 'select',
+        options: [
+          {
+            label: '未解决',
+            value: '0',
+            color: 'red'
+          },
+          {
+            label: '已解决',
+            value: '1',
+            color: 'blue'
+          },
+          {
+            label: '解决中',
+            value: '2',
+            color: 'yellow'
+          },
+          {
+            label: '失败',
+            value: '3',
+            color: 'red'
+          }
+        ]
+      },
+      {
+        label: '标签',
+        width: 120,
+        prop: 'tag'
+      },
+      {
+        label: '执行进度',
+        width: 200,
+        prop: 'progress'
+      },
+      {
+        label: '评分',
+        width: 200,
+        prop: 'rate',
+        valueType: 'rate'
+      },
+      {
+        label: '是否显示',
+        width: 100,
+        prop: 'switch',
+        valueType: 'switch'
+      },
+      {
+        label: '时间',
+        prop: 'time',
+        valueType: 'date-picker'
+      },
+      {
+        label: '数量',
+        prop: 'number',
+        valueType: 'input-number',
+        fieldProps: { precision: 2, step: 2 }
+      },
+      {
+        label: '城市',
+        prop: 'city',
+        valueType: 'cascader',
+        options: [
+          {
+            value: '0',
+            label: '陕西',
+            children: [
+              {
+                value: '0-0',
+                label: '西安',
+                children: [
+                  {
+                    value: '0-0-0',
+                    label: '新城区'
+                  },
+                  {
+                    value: '0-0-1',
+                    label: '高新区'
+                  },
+                  {
+                    value: '0-0-2',
+                    label: '灞桥区'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: '1',
+            label: '山西',
+            children: [
+              {
+                value: '1-0',
+                label: '太原',
+                children: [
+                  {
+                    value: '1-0-0',
+                    label: '小店区'
+                  },
+                  {
+                    value: '1-0-1',
+                    label: '古交市'
+                  },
+                  {
+                    value: '1-0-2',
+                    label: '万柏林区'
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: '地区',
+        prop: 'place',
+        tooltip: '请精确到门牌号',
+        fieldProps: {
+          placeholder: '请精确到门牌号'
+        }
+      },
+      {
+        label: '经度',
+        prop: 'lng',
+        tooltip: '请保留两位小数'
+      },
+      {
+        label: '纬度',
+        prop: 'lat',
+        tooltip: '请保留两位小数'
+      },
+      {
+        label: '要求',
+        prop: 'demand',
+        valueType: 'checkbox',
+        options: [
+          {
+            label: '四六级',
+            value: '0'
+          },
+          {
+            label: '计算机二级证书',
+            value: '1'
+          },
+          {
+            label: '普通话证书',
+            value: '2'
+          }
+        ]
+      },
+      {
+        label: '梦想',
+        prop: 'gift',
+        valueType: 'radio',
+        options: [
+          {
+            label: '诗',
+            value: '0'
+          },
+          {
+            label: '远方',
+            value: '1'
+          },
+          {
+            label: '美食',
+            value: '2'
+          }
+        ]
+      },
+      {
+        label: '到期时间',
+        prop: 'endTime',
+        valueType: 'date-picker',
+        fieldProps: {
+          type: 'datetimerange',
+          startPlaceholder: '请选择开始时间',
+          endPlaceholder: '请选择结束时间'
+        }
+      },
+      {
+        label: '奖励',
+        prop: 'price'
+      },
+      {
+        label: '提成',
+        prop: 'percentage'
+      },
+      {
+        label: '说明',
+        prop: 'desc',
+        valueType: 'textarea',
+        fieldProps: {
+          maxlength: 10,
+          showWordLimit: true,
+          autosize: { minRows: 2, maxRows: 4 }
+        }
+      }
+    ]
+
+    const wrapper = mount(
+      () => <Search modelValue={state.value} columns={columns} hasUnfold={false} />,
+      {
+        global: {
+          plugins: [ElementPlus]
+        }
+      }
+    )
+
+    await nextTick()
+    expect(wrapper.find('.el-autocomplete').exists()).toBe(false)
+    expect(wrapper.find('.el-cascader').exists()).toBe(true)
+    expect(wrapper.find('.el-checkbox-group').exists()).toBe(true)
+    expect(wrapper.find('.el-color-picker').exists()).toBe(false)
+    expect(wrapper.find('.el-textarea').exists()).toBe(true)
+    expect(wrapper.find('.el-rate').exists()).toBe(true)
+    expect(wrapper.find('.el-switch').exists()).toBe(true)
+    expect(wrapper.find('.el-radio-group').exists()).toBe(true)
+  })
+
+  test('slots test', async () => {
+    const state = ref<FieldValues>({
+      status: '0',
+      name: '',
+      rate: 4,
+      progress: 100,
+      switch: true,
+      time: new Date().toString(),
+      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+    })
+
+    const rules = {
+      name: [
+        {
+          required: true,
+          message: '请输入名称'
+        }
+      ],
+      tag: [
+        {
+          required: true,
+          message: '请输入标签'
+        }
+      ]
+    }
+
+    const columns: PlusColumn[] = [
+      {
+        label: '名称',
+        width: 120,
+        prop: 'name',
+        valueType: 'copy',
+        tooltip: '名称最多显示6个字符'
+      },
+      {
+        label: '状态',
+        width: 120,
+        prop: 'status',
+        valueType: 'select',
+        options: [
+          {
+            label: '未解决',
+            value: '0',
+            color: 'red'
+          },
+          {
+            label: '已解决',
+            value: '1',
+            color: 'blue'
+          },
+          {
+            label: '解决中',
+            value: '2',
+            color: 'yellow'
+          },
+          {
+            label: '失败',
+            value: '3',
+            color: 'red'
+          }
+        ]
+      }
+    ]
+
+    const submitText = '提交'
+    const resetText = '重置'
+
+    const footer = ({
+      handleSubmit,
+      handleReset
+    }: {
+      handleSubmit: () => void
+      handleReset: () => void
+    }) => {
+      return (
+        <div class="custom-footer">
+          <ElButton onClick={handleSubmit}> {submitText} </ElButton>
+          <ElButton onClick={handleReset}> {resetText} </ElButton>
+        </div>
+      )
+    }
+
+    const wrapper = mount(
+      () => (
+        <Search
+          modelValue={state.value}
+          rules={rules}
+          hasUnfold={false}
+          columns={columns}
+          v-slots={{
+            footer,
+            'plus-label-name': () => 'plus-label-name',
+            'plus-field-name': () => 'plus-field-name',
+            'plus-extra-name': () => 'plus-extra-name',
+            'tooltip-icon': () => 'tooltip-icon'
+          }}
+        />
+      ),
+      {
+        global: {
+          plugins: [ElementPlus]
+        }
+      }
+    )
+
+    await nextTick()
+    expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    expect(wrapper.find('.custom-footer .el-button').exists()).toBe(true)
+    expect(wrapper.find('.custom-footer').text()).includes(submitText)
+    expect(wrapper.find('.custom-footer').text()).includes(resetText)
+    expect(wrapper.find('.plus-form').text()).includes('plus-label-name')
+    expect(wrapper.find('.plus-form').text()).includes('plus-field-name')
+    expect(wrapper.find('.plus-form').text()).includes('tooltip-icon')
+    expect(wrapper.find('.plus-form-item-extra').text()).includes('plus-extra-name')
+  })
+
+  test('props: hasFooter', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称', prop: 'name' },
+      { label: '状态', prop: 'status' }
+    ]
+
+    const wrapper = mount(() => <Search columns={columns} hasFooter={false} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    expect(wrapper.find('.plus-search__button__wrapper').exists()).toBe(false)
+  })
+
+  test('props: hasReset', async () => {
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+
+    const wrapper = mount(() => <Search columns={columns} hasReset={false} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    const buttons = wrapper.findAll('.el-button')
+    // 只有搜索按钮，没有重置按钮
+    expect(buttons.length).toBe(1)
+  })
+
+  test('props: hasSearchIcon', async () => {
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+
+    const wrapperWithIcon = mount(() => <Search columns={columns} hasSearchIcon={true} />, {
+      global: { plugins: [ElementPlus] }
+    })
+    await nextTick()
+    expect(wrapperWithIcon.find('.el-button .el-icon').exists()).toBe(true)
+
+    const wrapperWithoutIcon = mount(() => <Search columns={columns} hasSearchIcon={false} />, {
+      global: { plugins: [ElementPlus] }
+    })
+    await nextTick()
+    expect(wrapperWithoutIcon.find('.el-button .el-icon').exists()).toBe(false)
+  })
+
+  test('props: searchText and resetText', async () => {
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+    const searchText = '查询'
+    const resetText = '清空'
+
+    const wrapper = mount(
+      () => <Search columns={columns} searchText={searchText} resetText={resetText} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const buttons = wrapper.findAll('.el-button')
+    expect(buttons[0].text()).toContain(resetText)
+    expect(buttons[1].text()).toContain(searchText)
+  })
+
+  test('props: hasUnfold and defaultUnfold', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1' },
+      { label: '名称2', prop: 'name2' },
+      { label: '名称3', prop: 'name3' },
+      { label: '名称4', prop: 'name4' }
+    ]
+
+    // 测试默认折叠
+    const wrapperFolded = mount(
+      () => <Search columns={columns} hasUnfold={true} defaultUnfold={false} showNumber={2} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+    await nextTick()
+    expect(wrapperFolded.find('.plus-search__unfold').exists()).toBe(true)
+
+    // 测试默认展开
+    const wrapperUnfolded = mount(
+      () => <Search columns={columns} hasUnfold={true} defaultUnfold={true} showNumber={2} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+    await nextTick()
+    // 验证展开按钮存在
+    expect(wrapperUnfolded.find('.plus-search__unfold').exists()).toBe(true)
+  })
+
+  test('props: showNumber', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1' },
+      { label: '名称2', prop: 'name2' },
+      { label: '名称3', prop: 'name3' },
+      { label: '名称4', prop: 'name4' }
+    ]
+
+    const wrapper = mount(
+      () => <Search columns={columns} hasUnfold={true} defaultUnfold={false} showNumber={1} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    // 验证展开按钮存在
+    expect(wrapper.find('.plus-search__unfold').exists()).toBe(true)
+  })
+
+  test('props: buttonOrder', async () => {
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+
+    const wrapper = mount(
+      () => <Search columns={columns} buttonOrder={['search', 'reset', 'fold']} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const buttons = wrapper.findAll('.el-button')
+    // 验证按钮存在
+    expect(buttons.length).toBeGreaterThanOrEqual(2)
+  })
+
+  test('props: searchLoading', async () => {
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+
+    const wrapper = mount(() => <Search columns={columns} searchLoading={true} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    const buttons = wrapper.findAll('.el-button')
+    // 搜索按钮应该是第二个按钮（第一个是重置按钮）
+    const searchButton = buttons.length > 1 ? buttons[1] : buttons[0]
+    expect(searchButton.classes()).toContain('is-loading')
+  })
+
+  test('props: inline', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称', prop: 'name' },
+      { label: '状态', prop: 'status' }
+    ]
+
+    const wrapper = mount(() => <Search columns={columns} inline={true} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    expect(wrapper.find('.el-form--inline').exists()).toBe(true)
+  })
+
+  test('props: labelPosition', async () => {
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+
+    const wrapperTop = mount(() => <Search columns={columns} labelPosition="top" />, {
+      global: { plugins: [ElementPlus] }
+    })
+    await nextTick()
+    expect(wrapperTop.find('.el-form--label-top').exists()).toBe(true)
+
+    const wrapperLeft = mount(() => <Search columns={columns} labelPosition="left" />, {
+      global: { plugins: [ElementPlus] }
+    })
+    await nextTick()
+    expect(wrapperLeft.find('.el-form--label-left').exists()).toBe(true)
+  })
+
+  test('emit: search', async () => {
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+    const onSearch = vi.fn()
+
+    const wrapper = mount(() => <Search columns={columns} onSearch={onSearch} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    const searchButton = wrapper.findAll('.el-button').find(btn => btn.attributes('type') === 'primary')
+    if (searchButton) {
+      await searchButton.trigger('click')
+      await nextTick()
+      expect(onSearch).toHaveBeenCalled()
+    }
+  })
+
+  test('emit: reset', async () => {
+    const state = ref<FieldValues>({ name: 'test' })
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+    const defaultValues = { name: 'default' }
+    const onReset = vi.fn()
+    const onUpdateModelValue = vi.fn()
+
+    const wrapper = mount(
+      () => (
+        <Search
+          modelValue={state.value}
+          columns={columns}
+          defaultValues={defaultValues}
+          onReset={onReset}
+          onUpdate:modelValue={onUpdateModelValue}
+        />
+      ),
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const resetButton = wrapper.findAll('.el-button').find(btn => btn.attributes('type') !== 'primary')
+    if (resetButton) {
+      await resetButton.trigger('click')
+      await nextTick()
+      expect(onReset).toHaveBeenCalled()
+      expect(onReset).toHaveBeenCalledWith(defaultValues)
+    }
+  })
+
+  test('emit: change', async () => {
+    const state = ref<FieldValues>({ name: '' })
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+    const onChange = vi.fn()
+
+    const wrapper = mount(
+      () => <Search modelValue={state.value} columns={columns} onChange={onChange} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const input = wrapper.find('input')
+    await input.setValue('test')
+    await nextTick()
+
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  test('emit: collapse', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1' },
+      { label: '名称2', prop: 'name2' },
+      { label: '名称3', prop: 'name3' }
+    ]
+    const onCollapse = vi.fn()
+
+    const wrapper = mount(
+      () => (
+        <Search
+          columns={columns}
+          hasUnfold={true}
+          defaultUnfold={false}
+          showNumber={1}
+          onCollapse={onCollapse}
+        />
+      ),
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const unfoldLink = wrapper.find('.plus-search__unfold')
+    await unfoldLink.trigger('click')
+    await nextTick()
+
+    expect(onCollapse).toHaveBeenCalled()
+    expect(onCollapse).toHaveBeenCalledWith(true)
+  })
+
+  test('emit: update:modelValue', async () => {
+    const state = ref<FieldValues>({ name: '' })
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+    const onUpdateModelValue = vi.fn()
+
+    const wrapper = mount(
+      () => (
+        <Search
+          modelValue={state.value}
+          columns={columns}
+          onUpdate:modelValue={onUpdateModelValue}
+        />
+      ),
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const input = wrapper.find('input')
+    await input.setValue('test')
+    await nextTick()
+
+    expect(onUpdateModelValue).toHaveBeenCalled()
+  })
+
+  test('columns: hideInSearch', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称', prop: 'name' },
+      { label: '隐藏字段', prop: 'hidden', hideInSearch: true }
+    ]
+
+    const wrapper = mount(() => <Search columns={columns} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    const formItems = wrapper.findAll('.el-form-item')
+    // 只显示 1 个字段 + 按钮行
+    expect(formItems.length).toBe(2)
+  })
+
+  test('columns: order', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1', order: 1 },
+      { label: '名称2', prop: 'name2', order: 3 },
+      { label: '名称3', prop: 'name3', order: 2 }
+    ]
+
+    const wrapper = mount(() => <Search columns={columns} hasUnfold={false} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    const formItems = wrapper.findAll('.el-form-item')
+    // 按 order 降序排列: name2(3) > name3(2) > name1(1)
+    expect(formItems.length).toBeGreaterThanOrEqual(3)
+  })
+
+  test('props: needValidate - validation success', async () => {
+    const state = ref<FieldValues>({ name: 'test' })
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+    const rules = {
+      name: [{ required: true, message: '请输入名称' }]
+    }
+    const onSearch = vi.fn()
+
+    const wrapper = mount(
+      () => (
+        <Search
+          modelValue={state.value}
+          columns={columns}
+          rules={rules}
+          needValidate={true}
+          onSearch={onSearch}
+        />
+      ),
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const searchButton = wrapper.findAll('.el-button').find(btn => btn.attributes('type') === 'primary')
+    if (searchButton) {
+      await searchButton.trigger('click')
+      await nextTick()
+      // 等待验证完成
+      await new Promise(resolve => setTimeout(resolve, 100))
+      expect(onSearch).toHaveBeenCalled()
+    }
+  })
+
+  test('props: needValidate - validation failure', async () => {
+    const state = ref<FieldValues>({ name: '' })
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+    const rules = {
+      name: [{ required: true, message: '请输入名称' }]
+    }
+    const onSearch = vi.fn()
+
+    const wrapper = mount(
+      () => (
+        <Search
+          modelValue={state.value}
+          columns={columns}
+          rules={rules}
+          needValidate={true}
+          onSearch={onSearch}
+        />
+      ),
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const searchButton = wrapper.findAll('.el-button').find(btn => btn.attributes('type') === 'primary')
+    if (searchButton) {
+      await searchButton.trigger('click')
+      await nextTick()
+      // 等待验证完成
+      await new Promise(resolve => setTimeout(resolve, 100))
+      // 验证失败，不应该触发 search 事件
+      expect(onSearch).not.toHaveBeenCalled()
+    }
+  })
+
+  test('edge case: empty columns', async () => {
+    const wrapper = mount(() => <Search columns={[]} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    expect(wrapper.find('.plus-search').exists()).toBe(true)
+  })
+
+  test('edge case: showNumber larger than columns length', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1' },
+      { label: '名称2', prop: 'name2' }
+    ]
+
+    const wrapper = mount(
+      () => <Search columns={columns} hasUnfold={true} defaultUnfold={false} showNumber={10} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    // 不应该显示展开/收起按钮
+    expect(wrapper.find('.plus-search__unfold').exists()).toBe(false)
+  })
+
+  test('edge case: retractText and expandText', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1' },
+      { label: '名称2', prop: 'name2' },
+      { label: '名称3', prop: 'name3' }
+    ]
+
+    const wrapper = mount(
+      () => (
+        <Search
+          columns={columns}
+          hasUnfold={true}
+          defaultUnfold={true}
+          showNumber={1}
+          retractText="收起"
+          expandText="展开"
+        />
+      ),
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const unfoldLink = wrapper.find('.plus-search__unfold')
+    expect(unfoldLink.text()).toContain('收起')
+
+    await unfoldLink.trigger('click')
+    await nextTick()
+    expect(unfoldLink.text()).toContain('展开')
+  })
+
+  test('edge case: modelValue reactivity', async () => {
+    const state = ref<FieldValues>({ name: 'initial' })
+    const columns: PlusColumn[] = [{ label: '名称', prop: 'name' }]
+
+    const wrapper = mount(() => <Search modelValue={state.value} columns={columns} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    let input = wrapper.find('input')
+    expect((input.element as HTMLInputElement).value).toBe('initial')
+
+    // 更新外部状态
+    state.value = { name: 'updated' }
+    await nextTick()
+    input = wrapper.find('input')
+    expect((input.element as HTMLInputElement).value).toBe('updated')
+  })
+
+  test('edge case: showNumber is 0', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1' },
+      { label: '名称2', prop: 'name2' }
+    ]
+
+    const wrapper = mount(
+      () => <Search columns={columns} hasUnfold={true} defaultUnfold={false} showNumber={0} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    // showNumber 为 0 时，应该至少显示 1 个字段
+    const formItems = wrapper.findAll('.el-form-item')
+    expect(formItems.length).toBeGreaterThanOrEqual(1)
+  })
+
+  test('edge case: showNumber is negative', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1' },
+      { label: '名称2', prop: 'name2' }
+    ]
+
+    const wrapper = mount(
+      () => <Search columns={columns} hasUnfold={true} defaultUnfold={false} showNumber={-1} />,
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    // showNumber 为负数时，应该至少显示 1 个字段
+    const formItems = wrapper.findAll('.el-form-item')
+    expect(formItems.length).toBeGreaterThanOrEqual(1)
+  })
+
+  test('edge case: reset with nested defaultValues', async () => {
+    const state = ref<FieldValues>({
+      name: 'test',
+      nested: { value: 'original' }
+    })
+    const columns: PlusColumn[] = [
+      { label: '名称', prop: 'name' },
+      { label: '嵌套', prop: 'nested' }
+    ]
+    const defaultValues = {
+      name: 'default',
+      nested: { value: 'default' }
+    }
+    const onReset = vi.fn()
+    const onUpdateModelValue = vi.fn()
+
+    const wrapper = mount(
+      () => (
+        <Search
+          modelValue={state.value}
+          columns={columns}
+          defaultValues={defaultValues}
+          onReset={onReset}
+          onUpdate:modelValue={onUpdateModelValue}
+        />
+      ),
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const resetButton = wrapper.findAll('.el-button').find(btn => btn.attributes('type') !== 'primary')
+    if (resetButton) {
+      await resetButton.trigger('click')
+      await nextTick()
+
+      expect(onReset).toHaveBeenCalled()
+      const resetValue = onReset.mock.calls[0][0]
+      // 验证嵌套对象是深拷贝的
+      expect(resetValue.nested).toEqual({ value: 'default' })
+      expect(resetValue.nested).not.toBe(defaultValues.nested)
+    }
+  })
+
+  test('edge case: reset with extra fields in values', async () => {
+    const state = ref<FieldValues>({
+      name: 'test',
+      extra: 'should be undefined'
+    })
+    const columns: PlusColumn[] = [
+      { label: '名称', prop: 'name' },
+      { label: '额外', prop: 'extra' }
+    ]
+    const defaultValues = {
+      name: 'default'
+      // extra 不在 defaultValues 中
+    }
+    const onReset = vi.fn()
+
+    const wrapper = mount(
+      () => (
+        <Search
+          modelValue={state.value}
+          columns={columns}
+          defaultValues={defaultValues}
+          onReset={onReset}
+        />
+      ),
+      {
+        global: { plugins: [ElementPlus] }
+      }
+    )
+
+    await nextTick()
+    const resetButton = wrapper.findAll('.el-button').find(btn => btn.attributes('type') !== 'primary')
+    if (resetButton) {
+      await resetButton.trigger('click')
+      await nextTick()
+
+      expect(onReset).toHaveBeenCalled()
+      const resetValue = onReset.mock.calls[0][0]
+      // extra 字段应该被设置为 undefined
+      expect(resetValue.name).toBe('default')
+      expect(resetValue.extra).toBeUndefined()
+    }
+  })
+
+  test('edge case: all columns hidden by hideInSearch', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1', hideInSearch: true },
+      { label: '名称2', prop: 'name2', hideInSearch: true }
+    ]
+
+    const wrapper = mount(() => <Search columns={columns} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    // 只应该显示按钮行
+    const formItems = wrapper.findAll('.el-form-item')
+    expect(formItems.length).toBe(1)
+  })
+
+  test('edge case: columns with same order value', async () => {
+    const columns: PlusColumn[] = [
+      { label: '名称1', prop: 'name1', order: 1 },
+      { label: '名称2', prop: 'name2', order: 1 },
+      { label: '名称3', prop: 'name3', order: 1 }
+    ]
+
+    const wrapper = mount(() => <Search columns={columns} hasUnfold={false} />, {
+      global: { plugins: [ElementPlus] }
+    })
+
+    await nextTick()
+    const formItems = wrapper.findAll('.el-form-item')
+    // 应该显示所有字段 + 按钮行
+    expect(formItems.length).toBe(4)
+  })
+})