Skip to content

Commit 6c0149d

Browse files
martinwq997martinwq997
committed
Fixed the bug with the transparency of the version list, changed the overall page routing and API interface structure by adding namespaces to the routes. Implemented pagination for search results.
1 parent a0c67ea commit 6c0149d

File tree

1 file changed

+67
-57
lines changed

1 file changed

+67
-57
lines changed

‎app/homepage/page.tsx‎

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import React, { useState } from 'react';
33
import '@/app/ui/global.css';
44
import Link from 'next/link';
55
import VulnerabilityList from '@/components/CveList';
6+
import { message } from 'antd';
67

7-
8-
const HomePage = () => {
8+
const HomePage: React.FC = () => {
99
const [searchQuery, setSearchQuery] = useState('');
10-
10+
const [messageApi, contextHolder] = message.useMessage();//antd-message的hooks调用
1111
const handleKeyPress = (e: { key: string; }) => {
1212
// 检查是否按下了回车键
1313
if (e.key === 'Enter') {
@@ -17,7 +17,11 @@ const HomePage = () => {
1717
};
1818

1919
const performSearch = () => {
20-
// 这里可以添加任何其他逻辑，比如验证搜索内容
20+
if (!searchQuery || searchQuery.trim() === '') {
21+
22+
messageApi.warning('请输入搜索内容');
23+
//alert("请输入搜索内容"); // 可选：提示用户输入内容
24+
}
2125
if (searchQuery.trim()) {
2226
// 使用 Link 跳转到搜索页面
2327
window.location.href = `/homepage/search?crate_name=${searchQuery}`;
@@ -28,72 +32,78 @@ const HomePage = () => {
2832

2933
return (
3034
//绿色渐变
31-
< div className=" min-h-screen bg-gray-900 text-white" >
32-
<header className="flex bg-teal-500 p-4 flex justify-between items-center">
33-
<Link href="/homepage">
34-
<div className="flex text-2xl font-bold">open/source/insights</div>
35-
</Link>
36-
37-
<nav>
38-
<ul className="flex space-x-5">
39-
40-
<li><a href="#" className="hover:underline">About</a></li>
41-
<li><a href="#" className="hover:underline">Documentation</a></li>
42-
<li><a href="#" className="hover:underline">Blog</a></li>
43-
</ul>
44-
</nav>
45-
</header>
46-
{/* 搜索部分 */}
47-
<div className="flex flex-col items-center justify-center h-80 bg-gradient-to-b from-teal-500 to-gray-800">
48-
<h1 className="text-4xl font-bold mb-4 ">Understand your dependencies</h1>
49-
<p className="text-center mb-4">Your software and your users rely not only on the code you write, but also on the code your code depends on, the code that code depends on, and so on.</p>
50-
<div className="flex items-center mb-4">
51-
<input
52-
type="text"
53-
placeholder="Search for open source crates"
54-
className="p-2 border-none rounded-md text-gray-800 w-80 max-w-2xl"
55-
value={searchQuery}
56-
onChange={(e) => setSearchQuery(e.target.value)} // 更新搜索内容
57-
onKeyDown={handleKeyPress}
58-
/>
59-
<Link href={{
35+
<>
36+
{contextHolder}
37+
< div className=" min-h-screen bg-gray-900 text-white" >
38+
<header className="flex bg-teal-500 p-4 flex justify-between items-center">
39+
<Link href="/homepage">
40+
<div className="flex text-2xl font-bold">open/source/insights</div>
41+
</Link>
42+
43+
<nav>
44+
<ul className="flex space-x-5">
45+
46+
<li><a href="#" className="hover:underline">About</a></li>
47+
<li><a href="#" className="hover:underline">Documentation</a></li>
48+
<li><a href="#" className="hover:underline">Blog</a></li>
49+
</ul>
50+
</nav>
51+
</header>
52+
{/* 搜索部分 */}
53+
<div className="flex flex-col items-center justify-center h-80 bg-gradient-to-b from-teal-500 to-gray-800">
54+
<h1 className="text-4xl font-bold mb-4 ">Understand your dependencies</h1>
55+
<p className="text-center mb-4">Your software and your users rely not only on the code you write, but also on the code your code depends on, the code that code depends on, and so on.</p>
56+
<div className="flex items-center mb-4">
57+
<input
58+
type="text"
59+
placeholder="Search for open source crates"
60+
className="p-2 border-none rounded-md text-gray-800 w-80 max-w-2xl"
61+
value={searchQuery}
62+
onChange={(e) => setSearchQuery(e.target.value)} // 更新搜索内容
63+
onKeyDown={handleKeyPress}
64+
/>
65+
{/* <Link href={{
6066
pathname: '/homepage/search',
6167
query: {
6268
crate_name: searchQuery, // 将搜索内容作为参数传递给新页面
6369
},
64-
}}>
65-
<button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700">Search</button>
66-
</Link>
70+
}}> */}
71+
<button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700 "
72+
onClick={performSearch}
73+
>
74+
Search</button>
75+
{/* </Link> */}
76+
</div>
6777
</div>
68-
</div>
6978

7079

71-
{/* 分割线部分 */}
72-
<div className="flex border-t-4 border-green-500 h-1/4"></div>
80+
{/* 分割线部分 */}
81+
<div className="flex border-t-4 border-green-500 h-1/4"></div>
7382

74-
<VulnerabilityList />
83+
<VulnerabilityList />
7584

7685

77-
{/* 一些介绍 */}
78-
<div className="flex container mx-auto p-10">
79-
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
80-
<h2 className="text-2xl font-semibold">New features in the deps.dev API</h2>
81-
<p className="mt-2">The deps.dev API, which provides free access to the data that powers this website, now has experimental batch and pull support, as well as a new version that comes with a stability guarantee and deprecation policy.</p>
82-
<p className="mt-2">Learn more about the new features on our blog, or get started with the API documentation, and code examples.</p>
83-
</div>
86+
{/* 一些介绍 */}
87+
<div className="flex container mx-auto p-10">
88+
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
89+
<h2 className="text-2xl font-semibold">New features in the deps.dev API</h2>
90+
<p className="mt-2">The deps.dev API, which provides free access to the data that powers this website, now has experimental batch and pull support, as well as a new version that comes with a stability guarantee and deprecation policy.</p>
91+
<p className="mt-2">Learn more about the new features on our blog, or get started with the API documentation, and code examples.</p>
92+
</div>
8493

85-
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
86-
<h2 className="text-2xl font-semibold">Seeing the big picture can be difficult—but it shouldn&apos;t be</h2>
87-
<p className="mt-2">The Open Source Insights page for each package shows the full dependency graph and updates it every day. The information provided can help you make informed decisions about using, building, and maintaining your software.</p>
88-
<p className="mt-2">With Open Source Insights, you can actually see the dependency graph for a package, then isolate the paths to a particular dependency. Or see whether a vulnerability in a dependency might affect your code. Or compare two versions of a package to see how the dependencies have changed in a new release.</p>
89-
</div>
94+
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
95+
<h2 className="text-2xl font-semibold">Seeing the big picture can be difficult—but it shouldn&apos;t be</h2>
96+
<p className="mt-2">The Open Source Insights page for each package shows the full dependency graph and updates it every day. The information provided can help you make informed decisions about using, building, and maintaining your software.</p>
97+
<p className="mt-2">With Open Source Insights, you can actually see the dependency graph for a package, then isolate the paths to a particular dependency. Or see whether a vulnerability in a dependency might affect your code. Or compare two versions of a package to see how the dependencies have changed in a new release.</p>
98+
</div>
9099

91-
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
92-
<h2 className="text-2xl font-semibold">How it works</h2>
93-
<p className="mt-2">The service repeatedly examines sites such as github.com, npmjs.com, and pkg.go.dev to find up-to-date information about open source software packages. Using that information, it builds for each package the full dependency graph from scratch—not just from package lock files—connecting it to the packages it depends on and to those that depend on it. This transitive dependency graph allows problems in any package to be made visible to the owners and users of any software they affect.</p>
100+
<div className="bg-gray-800 p-5 mb-6 rounded shadow-md">
101+
<h2 className="text-2xl font-semibold">How it works</h2>
102+
<p className="mt-2">The service repeatedly examines sites such as github.com, npmjs.com, and pkg.go.dev to find up-to-date information about open source software packages. Using that information, it builds for each package the full dependency graph from scratch—not just from package lock files—connecting it to the packages it depends on and to those that depend on it. This transitive dependency graph allows problems in any package to be made visible to the owners and users of any software they affect.</p>
103+
</div>
94104
</div>
95-
</div>
96-
</div >
105+
</div >
106+
</>
97107
);
98108
}
99109

0 commit comments

Comments
 (0)