视图切换放到高级面板

This commit is contained in:
mtvpls
2026-08-03 18:18:33 +08:00
parent ebb24a23f4
commit af34dd8545
+35 -32
View File
@@ -1917,7 +1917,7 @@ function SearchPageClient() {
ref={(el) => {
if (el) advancedDropdownRefs.current[0] = el;
}}
className='absolute right-0 z-30 mt-2 w-56 rounded-xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-900'
className='absolute right-0 z-[70] mt-2 w-56 rounded-xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-900'
>
<label className='flex cursor-pointer select-none items-center justify-between gap-3 rounded-lg px-1 py-2'>
<span className='text-sm text-gray-700 dark:text-gray-300'>
@@ -2121,7 +2121,7 @@ function SearchPageClient() {
ref={(el) => {
if (el) advancedDropdownRefs.current[1] = el;
}}
className='absolute right-0 top-full z-30 mt-2 w-56 rounded-xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-900'
className='absolute right-0 top-full z-[70] mt-2 w-56 rounded-xl border border-gray-200 bg-white p-3 shadow-lg dark:border-gray-700 dark:bg-gray-900'
>
<label className='flex cursor-pointer select-none items-center justify-between gap-3 rounded-lg px-1 py-2'>
<span className='text-sm text-gray-700 dark:text-gray-300'>
@@ -2157,40 +2157,43 @@ function SearchPageClient() {
<div className='absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white transition-transform peer-checked:translate-x-4'></div>
</div>
</label>
<div className='mt-2 border-t border-gray-200 pt-2 dark:border-gray-700'>
<span className='px-1 text-sm text-gray-700 dark:text-gray-300'>
</span>
<div className='mt-2 grid grid-cols-2 gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800'>
<button
type='button'
onClick={() => setResultDisplayMode('card')}
className={`inline-flex items-center justify-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors ${
resultDisplayMode === 'card'
? 'bg-green-500 text-white'
: 'text-gray-600 hover:bg-white dark:text-gray-300 dark:hover:bg-gray-700'
}`}
aria-label='切换为卡片视图'
>
<Grid2x2 className='h-4 w-4' />
<span></span>
</button>
<button
type='button'
onClick={() => setResultDisplayMode('list')}
className={`inline-flex items-center justify-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors ${
resultDisplayMode === 'list'
? 'bg-green-500 text-white'
: 'text-gray-600 hover:bg-white dark:text-gray-300 dark:hover:bg-gray-700'
}`}
aria-label='切换为列表视图'
>
<List className='h-4 w-4' />
<span></span>
</button>
</div>
</div>
</div>
)}
</div>
</div>
<div className='mb-8 flex justify-center'>
<div className='inline-flex items-center rounded-xl border border-gray-200 bg-white p-1 shadow-sm dark:border-gray-700 dark:bg-gray-900'>
<button
type='button'
onClick={() => setResultDisplayMode('card')}
className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${
resultDisplayMode === 'card'
? 'bg-green-500 text-white'
: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
}`}
aria-label='切换为卡片视图'
>
<Grid2x2 className='h-4 w-4' />
<span></span>
</button>
<button
type='button'
onClick={() => setResultDisplayMode('list')}
className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${
resultDisplayMode === 'list'
? 'bg-green-500 text-white'
: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
}`}
aria-label='切换为列表视图'
>
<List className='h-4 w-4' />
<span></span>
</button>
</div>
</div>
{searchResults.length === 0 ? (
isLoading ? (
<div className='flex justify-center items-center h-40'>