d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 23:16:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2141 from lxw15337674/feat/SearchModal

Browse Source 
全局搜索弹窗夜间模式样式优化、移动端自适应。
This commit is contained in:
tangly1024
2024-03-06 11:39:35 +08:00
committed by GitHub
parent 4681ae1c92 d2efd0b471
commit 02f26f985f
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/AlgoliaSearchModal.js
View File

@@ -22,6 +22,7 @@ export default function AlgoliaSearchModal({ cRef }) {
const [useTime, setUseTime] = useState(0)
const inputRef = useRef(null)
const [activeIndex, setActiveIndex] = useState(0)
const [isLoading, setIsLoading] = useState(false)
useHotkeys('ctrl+k', (e) => {
e.preventDefault()
setIsModalOpen(true)
@@ -105,7 +106,7 @@ export default function AlgoliaSearchModal({ cRef }) {
if (!query || query === '') {
return
}
setIsLoading(true)
try {
const res = await index.search(query, { page, hitsPerPage: 10 })
const { hits, nbHits, nbPages, processingTimeMS } = res
@@ -113,6 +114,7 @@ export default function AlgoliaSearchModal({ cRef }) {
setTotalPage(nbPages)
setTotalHit(nbHits)
setSearchResults(hits)
setIsLoading(false)
const doms = document.getElementById('search-wrapper').getElementsByClassName('replace')
setTimeout(() => {
@@ -175,12 +177,12 @@ export default function AlgoliaSearchModal({ cRef }) {
<div
id="search-wrapper"
className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 pointer-events-none'
} z-30 fixed h-screen w-screen left-0 top-0 mt-12 flex items-start justify-center`}
} z-30 fixed h-screen w-screen left-0 top-0 sm:mt-12 flex items-start justify-center mt-0`}
>
{/* 模态框 */}
<div
className={`${isModalOpen ? 'opacity-100' : 'invisible opacity-0 translate-y-10'
} flex flex-col justify-between w-full min-h-[10rem] max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}
} flex flex-col justify-between w-full min-h-[10rem] h-full md:h-fit max-w-xl dark:bg-hexo-black-gray dark:border-gray-800 bg-white dark:bg- p-5 rounded-lg z-50 shadow border hover:border-blue-600 duration-300 transition-all `}
>
<div className="flex justify-between items-center">
<div className="text-2xl text-blue-600 dark:text-yellow-600 font-bold">搜索</div>
@@ -205,21 +207,23 @@ export default function AlgoliaSearchModal({ cRef }) {
<TagGroups />
</div>
{
searchResults.length === 0 && keyword && (
searchResults.length === 0 && keyword && !isLoading && (
<div>
<p className=" text-slate-600 text-center my-4 text-base"> 无法找到相关结果
<p className=" text-slate-600 text-center my-4 text-base"> 无法找到相关结果
<span
className='font-semibold'
>&quot;{keyword}&quot;</span></p>
</div>
)
}
<ul>
<ul className='flex-1 overflow-auto'>
{searchResults.map((result, index) => (
<li key={result.objectID}
onMouseEnter={() => setActiveIndex(index)}
onClick={() => onJumpSearchResult(index)}
className={`cursor-pointer replace my-2 p-2 duration-100 ${activeIndex === index ? 'bg-blue-600 dark:bg-yellow-600' : ''}`}>
className={`cursor-pointer replace my-2 p-2 duration-100
rounded-lg
${activeIndex === index ? 'bg-blue-600 dark:bg-yellow-600' : ''}`}>
<a
className={`${activeIndex === index ? ' text-white' : ' text-black dark:text-gray-300 '}`}
>
@@ -229,7 +233,7 @@ export default function AlgoliaSearchModal({ cRef }) {
))}
</ul>
<Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
<div className='flex items-center justify-between mt-2 text-sm dark:text-gray-300'>
<div className='flex items-center justify-between mt-2 sm:text-sm text-xs dark:text-gray-300'>
<div>
{totalHit > 0 && (
<p>
@@ -237,7 +241,7 @@ export default function AlgoliaSearchModal({ cRef }) {
</p>
)}
</div>
<div className="text-gray-600 text-right">
<div className="text-gray-600 dark:text-gray-300 text-right">
<span >
<i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务
</span>
@@ -294,7 +298,7 @@ function Pagination(props) {
{Array.from({ length: totalPage }, (_, i) => {
const classNames = page === i
? 'font-bold text-white bg-blue-600 dark:bg-yellow-600 rounded'
: 'hover:text-blue-600 hover:font-bold'
: 'hover:text-blue-600 hover:font-bold dark:text-gray-300'
return (
<div