Skip to content

Commit e942e1f

Browse files
martinwq997dependabot[bot]
martinwq997
and
dependabot[bot]
authored
overview page (#159)
* overview page * debug in commit * sovle conflict in push * Bump @types/node from 22.13.9 to 22.13.10 (#151) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.13.9 to 22.13.10. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump eslint from 9.21.0 to 9.22.0 (#150) Bumps [eslint](https://github.com/eslint/eslint) from 9.21.0 to 9.22.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](eslint/eslint@v9.21.0...v9.22.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump autoprefixer from 10.4.20 to 10.4.21 (#148) Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 10.4.20 to 10.4.21. - [Release notes](https://github.com/postcss/autoprefixer/releases) - [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md) - [Commits](postcss/autoprefixer@10.4.20...10.4.21) --- updated-dependencies: - dependency-name: autoprefixer dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 parent 3520b7f commit e942e1f

File tree

13 files changed

+668
-442
lines changed

13 files changed

+668
-442
lines changed

‎app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx‎

Lines changed: 559 additions & 324 deletions
Large diffs are not rendered by default.

‎components/CrateNav.tsx‎

Lines changed: 104 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import Link from 'next/link';
33
import { usePathname } from 'next/navigation';
44
import NewHeader from '@/components/NewHeader';
5+
import { useHeaderContext } from '../app/context/CrateContext';
6+
import Image from 'next/image';
57

68
interface CrateNavProps {
79
nsfront: string;
@@ -13,6 +15,10 @@ interface CrateNavProps {
1315
const CrateNav: React.FC<CrateNavProps> = ({ nsfront, nsbehind, name, version }) => {
1416
const pathname = usePathname();
1517
const basePath = `/${nsfront}/${nsbehind}/${name}/${version}`;
18+
const [isOpen, setIsOpen] = useState(false);
19+
const [currentVersion, setCurrentVersion] = useState(version);
20+
const [searchTerm, setSearchTerm] = useState('');
21+
const { crateData, setCrateData } = useHeaderContext();
1622

1723
const navItems = [
1824
{ name: 'Overview', path: '' },
@@ -21,32 +27,114 @@ const CrateNav: React.FC<CrateNavProps> = ({ nsfront, nsbehind, name, version })
2127
{ name: 'Versions', path: '/versions' },
2228
];
2329

30+
useEffect(() => {
31+
const fetchData = async () => {
32+
if (!crateData.results) {
33+
const response = await fetch(`/api/crates/${nsfront}/${nsbehind}/${name}/${version}`);
34+
const data = await response.json();
35+
setCrateData({
36+
crateName: data.crate_name,
37+
crateVersion: version,
38+
results: data,
39+
});
40+
}
41+
};
42+
43+
fetchData();
44+
}, [nsfront, nsbehind, name, version, setCrateData, crateData.results]);
45+
2446
const isActive = (path: string) => {
2547
if (path === '') {
2648
return pathname === basePath;
2749
}
2850
return pathname === `${basePath}${path}`;
2951
};
3052

53+
const toggleDropdown = () => {
54+
setIsOpen((prev) => !prev);
55+
};
56+
57+
const closeDropdown = () => {
58+
setIsOpen(false);
59+
};
60+
3161
return (
3262
<div>
3363
<NewHeader />
34-
<nav className="border-b border-gray-200 mb-4">
35-
<div className="flex space-x-8 px-4">
36-
{navItems.map((item) => (
37-
<Link
38-
key={item.name}
39-
href={`${basePath}${item.path}`}
40-
className={`py-4 px-2 border-b-2 ${isActive(item.path)
41-
? 'border-blue-500 text-blue-500'
42-
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
43-
}`}
44-
>
45-
{item.name}
46-
</Link>
47-
))}
64+
<div className="flex justify-center px-4 py-6">
65+
<div className="w-[1500px] h-[120px] bg-white rounded-2xl shadow-[0_0_12px_0_rgba(43,88,221,0.09)] px-8">
66+
<div className="flex items-center justify-between h-16">
67+
<div className="flex items-center space-x-4">
68+
<h1 className="text-2xl font-semibold" style={{ color: 'rgb(28, 63, 115)' }}>{name}</h1>
69+
<div className="relative">
70+
<button
71+
onClick={toggleDropdown}
72+
className="flex items-center justify-between w-[150px] h-[36px] flex-shrink-0 rounded-[18.5px] border border-[#333333] bg-white px-4"
73+
>
74+
<span>{currentVersion || 'Select Version'}</span>
75+
<Image
76+
src={isOpen ? "/images/homepage/verison-up.png" : "/images/homepage/version-down.png"}
77+
alt="version"
78+
width={16}
79+
height={16}
80+
/>
81+
</button>
82+
{isOpen && (
83+
<div className="absolute mt-1 w-full z-50">
84+
<div className="fixed inset-0" onClick={closeDropdown}></div>
85+
<div className="relative w-[150px] h-[196px] flex-shrink-0 rounded-[16px] bg-white border border-gray-300 shadow-lg">
86+
<div className="p-2 border-b border-gray-100">
87+
<input
88+
type="text"
89+
value={searchTerm}
90+
onChange={(e) => setSearchTerm(e.target.value)}
91+
className="w-[125px] h-[30px] flex-shrink-0 rounded-[9.5px] bg-white focus:bg-[#E2E9FF] border border-[#E5E5E5] focus:outline-none px-2"
92+
/>
93+
</div>
94+
<ul className="max-h-[150px] overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] [&:hover::-webkit-scrollbar]:block [&:hover::-webkit-scrollbar]:w-1 [&:hover::-webkit-scrollbar-thumb]:bg-gray-300 [&:hover::-webkit-scrollbar-track]:bg-transparent">
95+
{crateData.results?.versions
96+
.filter(version => version.toLowerCase().includes(searchTerm.toLowerCase()))
97+
.map((version, index) => (
98+
<Link
99+
key={index}
100+
onClick={() => {
101+
setCurrentVersion(version);
102+
setSearchTerm('');
103+
closeDropdown();
104+
}}
105+
href={`/${nsfront}/${nsbehind}/${crateData.results?.crate_name}/${version}`}
106+
>
107+
<li className="px-4 py-2 hover:bg-[#E2E9FF] cursor-pointer">
108+
{version}
109+
</li>
110+
</Link>
111+
))}
112+
</ul>
113+
</div>
114+
</div>
115+
)}
116+
</div>
117+
</div>
118+
</div>
119+
<nav className="flex space-x-8">
120+
{navItems.map((item) => (
121+
<Link
122+
key={item.name}
123+
href={`${basePath}${item.path}`}
124+
className={`py-4 px-2 relative font-['HarmonyOS_Sans_SC'] text-center min-w-[108px] ${isActive(item.path)
125+
? 'text-blue-500'
126+
: 'text-gray-500 hover:text-gray-700'
127+
}`}
128+
>
129+
{item.name}
130+
{isActive(item.path) && (
131+
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[108px] h-[4px] flex-shrink-0 rounded-t-[3px] bg-[#4B68FF]"></div>
132+
)}
133+
</Link>
134+
))}
135+
</nav>
48136
</div>
49-
</nav>
137+
</div>
50138
</div>
51139
);
52140
};

‎components/HeaderWithSearch.tsx‎

Lines changed: 4 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,34 @@
11
// components/Header.js
22
'use client';
3-
import React, { useEffect, useState } from 'react';
3+
import React, { useState } from 'react';
44
import Link from 'next/link';
5-
import { useHeaderContext } from '../app/context/CrateContext';
6-
import { useParams } from 'next/navigation';
75
import { message } from 'antd';
8-
import { useRouter } from 'next/navigation';
9-
// import { cratesInfo } from '@/app/lib/all_interface';
106

117
const Header = () => {
12-
const router = useRouter();
13-
console.log('paramsssssssssssss:', router.refresh);
14-
const params = useParams();
15-
const [messageApi, contextHolder] = message.useMessage();//antd-message的hooks调用
8+
const [messageApi, contextHolder] = message.useMessage();
169
const [searchQuery, setSearchQuery] = useState('');
17-
const { crateData, setCrateData } = useHeaderContext();
18-
const [isOpen, setIsOpen] = useState(false);
19-
20-
21-
const [currentVersion, setCurrentVersion] = useState(params.version); // 存储当前选中的版本
2210

2311
const handleKeyPress = (e: { key: string; }) => {
24-
// 检查是否按下了回车键
2512
if (e.key === 'Enter') {
26-
// 如果是回车键，执行搜索
2713
performSearch();
2814
}
2915
};
3016

3117
const performSearch = () => {
3218
if (!searchQuery || searchQuery.trim() === '') {
33-
3419
messageApi.warning('请输入搜索内容');
35-
//alert("请输入搜索内容"); // 可选：提示用户输入内容
3620
}
3721
if (searchQuery.trim()) {
38-
// 使用 Link 跳转到搜索页面
3922
window.location.href = `/search?crate_name=${searchQuery}`;
4023
}
4124
};
42-
useEffect(() => {
43-
const path = params.path || ''; // 确保有值
44-
console.log('path:', path);
45-
}, [params.path]); // 依赖于 params.path
46-
// 使用 useEffect 从 API 获取数据
47-
useEffect(() => {
48-
const fetchData = async () => {
49-
// 如果 crateData.results 为空，说明数据还未加载
50-
if (!crateData.results) {
51-
const response = await fetch(`/api/crates/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}`);
52-
const data = await response.json();
53-
console.log('dataaaaaaaaaaaaaa:', data);
54-
setCrateData({
55-
crateName: data.crate_name,
56-
crateVersion: params.version,
57-
results: data,
58-
});
59-
60-
}
61-
};
62-
63-
fetchData();
64-
}, [params.nsfront, params.nsbehind, params.name, params.version, setCrateData, crateData.crateVersion, crateData.results]); // 添加 crateData 作为依赖项
65-
66-
const toggleDropdown = () => {
67-
setIsOpen((prev) => !prev);
68-
};
69-
70-
const closeDropdown = () => {
71-
setIsOpen(false);
72-
73-
};
7425

7526
return (
7627
<>
7728
{contextHolder}
7829
<header className="bg-white shadow p-4">
7930
<div className="flex justify-between items-center">
80-
<div className="text-xl font-bold flex flex-col items-start space-y-1">
31+
<div className="text-xl font-bold">
8132
<Link href="/">
8233
<div className="text-xl font-bold flex items-center space-x-1">
8334
<span style={{ color: 'rgb(57,62,70)' }}>open</span>
@@ -87,55 +38,8 @@ const Header = () => {
8738
<span style={{ color: 'rgb(57,62,70)' }}>insights</span>
8839
</div>
8940
</Link>
90-
<div className="flex items-center space-x-2 mt-15">
91-
<span className="text-2xl" style={{ color: 'rgb(28, 63, 115)' }}>{params.name}</span>
92-
<div className="relative">
93-
<button
94-
onClick={toggleDropdown}
95-
className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100"
96-
>
97-
{/* {crateData.crateVersion || 'Select Version'} */}
98-
{currentVersion || 'Select Version'}
99-
<svg
100-
className="ml-2 w-4 h-4"
101-
viewBox="0 0 20 20"
102-
fill="currentColor"
103-
>
104-
<path
105-
fillRule="evenodd"
106-
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
107-
clipRule="evenodd"
108-
/>
109-
</svg>
110-
</button>
111-
{isOpen && (
112-
<div className="absolute mt-1 w-full">
113-
<div className="absolute inset-0 bg-black opacity-50" onClick={closeDropdown}></div>
114-
<div className="relative bg-white border border-gray-300 rounded shadow-lg z-20">
115-
<ul className="max-h-60 overflow-y-auto">
116-
{crateData.results?.versions.map((version, index) => (
117-
<Link
118-
key={index}
119-
onClick={() => {
120-
setCurrentVersion(version);
121-
}}
122-
href={`/${params.nsfront}/${params.nsbehind}/${crateData.results?.crate_name}/${version}`}
123-
>
124-
<li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
125-
126-
{version}
127-
128-
</li>
129-
</Link>
130-
))}
131-
</ul>
132-
</div>
133-
</div>
134-
)}
135-
</div>
136-
</div>
13741
</div>
138-
<div className="flex items-center mb-4">
42+
<div className="flex items-center">
13943
<input
14044
type="text"
14145
placeholder="Search for open source crates"
@@ -152,7 +56,6 @@ const Header = () => {
15256
</div>
15357
</header>
15458
</>
155-
15659
);
15760
};
15861

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,4 @@
3838
"engines": {
3939
"node": ">=20.12.0"
4040
}
41-
}
41+
}

‎public/images/homepage/1.png‎

846 Bytes
Loading

‎public/images/homepage/2.png‎

920 Bytes
Loading

‎public/images/homepage/3.png‎

530 Bytes
Loading

‎public/images/homepage/4.png‎

1.01 KB
Loading

‎public/images/homepage/5.png‎

794 Bytes
Loading

‎public/images/homepage/Vector.png‎

395 Bytes
Loading

0 commit comments

Comments
 (0)