视图切换放到高级面板

This commit is contained in:
mtvpls
2026-08-03 18:18:33 +08:00
parent ebb24a23f4
commit af34dd8545
+15 -12
View File
@@ -1917,7 +1917,7 @@ function SearchPageClient() {
ref={(el) => { ref={(el) => {
if (el) advancedDropdownRefs.current[0] = 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'> <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'> <span className='text-sm text-gray-700 dark:text-gray-300'>
@@ -2121,7 +2121,7 @@ function SearchPageClient() {
ref={(el) => { ref={(el) => {
if (el) advancedDropdownRefs.current[1] = 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'> <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'> <span className='text-sm text-gray-700 dark:text-gray-300'>
@@ -2157,19 +2157,18 @@ 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 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> </div>
</label> </label>
</div> <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'>
</div>
</div> </span>
<div className='mb-8 flex justify-center'> <div className='mt-2 grid grid-cols-2 gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800'>
<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 <button
type='button' type='button'
onClick={() => setResultDisplayMode('card')} onClick={() => setResultDisplayMode('card')}
className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${ className={`inline-flex items-center justify-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors ${
resultDisplayMode === 'card' resultDisplayMode === 'card'
? 'bg-green-500 text-white' ? 'bg-green-500 text-white'
: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800' : 'text-gray-600 hover:bg-white dark:text-gray-300 dark:hover:bg-gray-700'
}`} }`}
aria-label='切换为卡片视图' aria-label='切换为卡片视图'
> >
@@ -2179,10 +2178,10 @@ function SearchPageClient() {
<button <button
type='button' type='button'
onClick={() => setResultDisplayMode('list')} onClick={() => setResultDisplayMode('list')}
className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm transition-colors ${ className={`inline-flex items-center justify-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors ${
resultDisplayMode === 'list' resultDisplayMode === 'list'
? 'bg-green-500 text-white' ? 'bg-green-500 text-white'
: 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800' : 'text-gray-600 hover:bg-white dark:text-gray-300 dark:hover:bg-gray-700'
}`} }`}
aria-label='切换为列表视图' aria-label='切换为列表视图'
> >
@@ -2191,6 +2190,10 @@ function SearchPageClient() {
</button> </button>
</div> </div>
</div> </div>
</div>
)}
</div>
</div>
{searchResults.length === 0 ? ( {searchResults.length === 0 ? (
isLoading ? ( isLoading ? (
<div className='flex justify-center items-center h-40'> <div className='flex justify-center items-center h-40'>