diff --git a/app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx b/app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx index c407475..ea7b194 100644 --- a/app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx +++ b/app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx @@ -5,6 +5,7 @@ import Link from 'next/link'; import { cratesInfo } from '@/app/lib/all_interface'; import { useParams } from 'next/navigation'; import { Pagination } from 'antd'; +// import NewHeader from '@/components/NewHeader'; interface CVE { subtitle?: string; diff --git a/app/[nsfront]/[nsbehind]/layout.tsx b/app/[nsfront]/[nsbehind]/layout.tsx index 1ad9cf3..b18e16f 100644 --- a/app/[nsfront]/[nsbehind]/layout.tsx +++ b/app/[nsfront]/[nsbehind]/layout.tsx @@ -1,6 +1,6 @@ import '@/app/ui/global.css'; import { HeaderProvider } from '../../context/CrateContext'; -import Header from '@/components/HeaderWithSearch'; +// import Header from '@/components/HeaderWithSearch'; export const metadata = { @@ -17,7 +17,7 @@ export default function layout({ -
+ {/*
*/} {children} diff --git a/app/search/layout.tsx b/app/search/layout.tsx index 011b515..f942a53 100644 --- a/app/search/layout.tsx +++ b/app/search/layout.tsx @@ -1,6 +1,6 @@ "use client"; import '@/app/ui/global.css'; -import NewHeader from '@/components/NewHeader'; +// import NewHeader from '@/components/NewHeader'; @@ -13,7 +13,7 @@ export default function RootLayout({ return ( - + {/* */} {children} diff --git a/app/search/page.tsx b/app/search/page.tsx index 7d2db28..8b7f300 100644 --- a/app/search/page.tsx +++ b/app/search/page.tsx @@ -2,24 +2,30 @@ import { useEffect, useState, Suspense } from 'react'; import { useSearchParams } from 'next/navigation'; import Link from 'next/link'; -// import NewHeader from '@/components/NewHeader'; +import Image from 'next/image'; +import NewHeader from '@/components/NewHeader'; import { searchResult } from '@/app/lib/all_interface'; const Search = () => { const [results, setResults] = useState(null); - const [currentPage, setCurrentPage] = useState(1); // 添加当前页码状态 - const [loading, setLoading] = useState(false); // 添加加载状态 + // const [currentPage, setCurrentPage] = useState(1); + const [loading, setLoading] = useState(false); const searchParams = useSearchParams(); const name = searchParams.get('crate_name'); + const [activeTab, setActiveTab] = useState('All'); + const [localCurrentPage, setLocalCurrentPage] = useState(1); // 本地分页状态 + // const itemsPerPage = 10; // 每页显示10条 useEffect(() => { if (name) { - fetchResults(name, currentPage); // 使用 name 和当前页发起请求 + // 计算需要向后端请求的页码 + const backendPage = Math.ceil(localCurrentPage / 2); + fetchResults(name, backendPage); } - }, [name, currentPage]); // 当 name 或 currentPage 改变时重新运行 + }, [name, localCurrentPage]); const fetchResults = async (query: string, page: number) => { - setLoading(true); // 开始加载数据 + setLoading(true); try { const response = await fetch('/api/search', { method: 'POST', @@ -29,8 +35,8 @@ const Search = () => { body: JSON.stringify({ query, pagination: { - page, // 使用传入的页码 - per_page: 20 // 每页条数 + page, + per_page: 20 // 保持后端每页20个 } }), }); @@ -39,86 +45,241 @@ const Search = () => { } const data1 = await response.json(); const data = data1.data; - setResults(data); // 假设返回的数据data字段 + setResults(data); } catch (error) { console.error('Error fetching data:', error); } finally { - setLoading(false); // 数据加载完成 + setLoading(false); } }; + // 计算当前页面应该显示的数据 + const getCurrentPageItems = () => { + if (!results || !results.data || !results.data.items || !results.data.items.length) { + return []; + } + + const isFirstHalf = localCurrentPage % 2 === 1; // 奇数页显示前半部分，偶数页显示后半部分 + const startIndex = isFirstHalf ? 0 : 10; + const endIndex = isFirstHalf ? Math.min(10, results.data.items.length) : Math.min(20, results.data.items.length); + + return results.data.items.slice(startIndex, endIndex); + }; + + // 计算总页数 + const getTotalLocalPages = () => { + if (!results) return 0; + return results.data.total_page * 2; // 后端每页20条，前端每页10条，所以总页数翻倍 + }; + const handleNextPage = () => { - if (results && currentPage < results.data.total_page) { - setCurrentPage(prevPage => prevPage + 1); // 增加页码 + const totalPages = getTotalLocalPages(); + if (localCurrentPage < totalPages) { + setLocalCurrentPage(prevPage => prevPage + 1); } }; const handlePreviousPage = () => { - if (currentPage > 1) { - setCurrentPage(prevPage => prevPage - 1); // 减少页码 + if (localCurrentPage > 1) { + setLocalCurrentPage(prevPage => prevPage - 1); } }; - console.log("results:", results?.data.items); + // 直接跳转到指定页码 + const goToPage = (page: number) => { + const totalPages = getTotalLocalPages(); + if (page >= 1 && page <= totalPages) { + setLocalCurrentPage(page); + } + }; + + // 获取当前页应显示的数据 + const currentItems = getCurrentPageItems(); + return ( -
- {/* */} -
-
- {loading ? ( -

Loading...

- ) : results ? ( - results.data.total_page > 0 && results.data.items.length > 0 ? ( - results.data.items.map((item, index) => ( - + {/* 添加 Header */} + + + {/* 创建一个居中的容器 */} +
+
+ {/* 标签导航 */} +
+ + + + + +
+ + Total {results?.data.total_page ? results.data.items.length * results.data.total_page : 0} results + +
+
+ + {/* 搜索结果 */} +
+ {loading ? ( +

Loading...

+ ) : currentItems.length > 0 ? ( + currentItems.map((item, index) => ( +
-
- {item.name} -
- Crate • {item.version} • {item.nsfront}/{item.nsbehind} + +
+
NuGet
+
{item.name}
+
+ Package {item.version} • Published October 22,2021 +
-
- + +
)) ) : (

No items found.

- ) - ) : ( -

Loading...

+ )} +
+ + {/* 分页控制 */} + {results && getTotalLocalPages() > 0 && ( +
+ + + + {/* 页码指示器 */} + {Array.from({ length: Math.min(5, getTotalLocalPages()) }).map((_, i) => { + const pageNum = localCurrentPage - 2 + i; + if (pageNum > 0 && pageNum <= getTotalLocalPages()) { + return ( + + ); + } + return null; + })} + + + +
)}
- {/* Package•1.0.4•Published July 19, 2019 */} - {/* 当前页数在按钮上方 */} -
- {results && ( -
-

- Current page: {currentPage} / Total page: {results.data.total_page} -

+
+
+
+
+ CratesPro Logo +
+ +
+

Resources

+
    +
  • Documentation
    • +
  • About
    • +
  • Blog
    • +
  • FAQ
    • +
+
+ +
+

API

+
    +
  • API
    • +
  • BigQuery Dataset
    • +
  • GitHub
    • +
+
+ +
+

Legal

+
    +
  • Legal
    • +
  • Privacy
    • +
  • Terms
    • +
+
- )} - {results && results.data.total_page > 0 && ( -
- - + +
+

Copyright © 2023 jp21.com.cn All Rights Reserved(@ICPBH180237号)

- )} -
+
+
); } diff --git a/components/CrateNav.tsx b/components/CrateNav.tsx index 13101cc..8d5b39b 100644 --- a/components/CrateNav.tsx +++ b/components/CrateNav.tsx @@ -1,6 +1,7 @@ import React from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; +import NewHeader from '@/components/NewHeader'; interface CrateNavProps { nsfront: string; @@ -28,22 +29,25 @@ const CrateNav: React.FC = ({ nsfront, nsbehind, name, version }) }; return ( - +
+ + +
); }; diff --git a/components/NewHeader.tsx b/components/NewHeader.tsx index ce8ea55..e25c650 100644 --- a/components/NewHeader.tsx +++ b/components/NewHeader.tsx @@ -1,70 +1,67 @@ import React, { useState } from "react"; import Link from "next/link"; +import Image from "next/image"; import { message } from "antd"; - const NewHeader = () => { const [searchQuery, setSearchQuery] = useState(''); - const [messageApi, contextHolder] = message.useMessage();//antd-message的hooks调用 - console.log('sss:', contextHolder); + const [messageApi, contextHolder] = message.useMessage(); + const handleKeyPress = (e: { key: string; }) => { - // 检查是否按下了回车键 if (e.key === 'Enter') { - // 如果是回车键，执行搜索 performSearch(); } }; const performSearch = () => { if (!searchQuery || searchQuery.trim() === '') { - messageApi.warning('请输入搜索内容'); - //alert("请输入搜索内容"); // 可选：提示用户输入内容 } if (searchQuery.trim()) { - // 使用 Link 跳转到搜索页面 window.location.href = `/search?crate_name=${searchQuery}`; } }; return ( - -
-
- -
- open - / - source - / - insights + <> + {contextHolder} +
+
+
+ +
+ CratesPro +
+
- -
- setSearchQuery(e.target.value)} // 更新搜索内容 - onKeyDown={handleKeyPress} - /> - {/* */} - - {/* */} -
+
+
+ setSearchQuery(e.target.value)} + onKeyDown={handleKeyPress} + /> +
+ +
+
-
- + ); } + export default NewHeader; \ No newline at end of file diff --git a/components/sign-in.tsx b/components/sign-in.tsx index f248601..8466f3d 100644 --- a/components/sign-in.tsx +++ b/components/sign-in.tsx @@ -2,8 +2,9 @@ import { useEffect } from 'react'; import { signIn, signOut, useSession } from 'next-auth/react'; -// import Image from 'next/image'; +import Image from 'next/image'; import Link from 'next/link'; + import { Dropdown } from 'antd'; import type { MenuProps } from 'antd'; @@ -96,7 +97,7 @@ export default function SignInButton() { /> )} */} {session.user?.image && ( -