Skip to content

Commit bdd0003

Browse files
martinwq997martinwq997
authored
Adjust the style of the Dependencies graph and add a new crates-all interface. (#216)
1 parent d02a677 commit bdd0003

File tree

6 files changed

+70
-23
lines changed

6 files changed

+70
-23
lines changed

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,12 +154,22 @@ const CratePage = () => {
154154
const [error, setError] = useState<string | null>(null);
155155
const [packageCurrentPage, setPackageCurrentPage] = useState(1);
156156
const [depCurrentPage, setDepCurrentPage] = useState(1);
157+
const [versions, setVersions] = useState<string[]>([]);
157158
const itemsPerPage = 1;
158-
const basePath = `/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}`;
159+
const basePath = `/${params.nsfront}/${params.nsbehind}/${params.name}`;
159160

160161
useEffect(() => {
161162
const fetchCrateData = async () => {
162163
try {
164+
// 首先获取所有版本信息
165+
const versionsResponse = await fetch(`/api/crates/${params.nsfront}/${params.nsbehind}/${params.name}/all`);
166+
if (!versionsResponse.ok) {
167+
throw new Error(`HTTP error! status: ${versionsResponse.status}`);
168+
}
169+
const versionsData = await versionsResponse.json();
170+
setVersions(versionsData.versions || []);
171+
172+
// 获取当前URL版本的数据
163173
const response = await fetch(`/api/crates/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}`);
164174
if (!response.ok) {
165175
throw new Error(`HTTP error! status: ${response.status}`);
@@ -171,11 +181,12 @@ const CratePage = () => {
171181
setError('An error occurred');
172182
} finally {
173183
setLoading(false);
184+
console.log('results', versions);
174185
}
175186
};
176187

177188
fetchCrateData();
178-
}, [params.name, params.version, params.nsfront, params.nsbehind]);
189+
}, [params.name, params.nsfront, params.nsbehind]);
179190

180191
if (loading) return <p>Loading...</p>;
181192
if (error) return <p>Error: {error}</p>;

‎app/api/crates/[nsfront]/[nsbehind]/[cratename]/all/route.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { NextRequest, NextResponse } from "next/server";
2+
type Params = Promise<{ nsfront: string, nsbehind: string, cratename: string, version: string }>
3+
4+
export async function GET(req: NextRequest, props: { params: Params }) {
5+
try {
6+
const params = await props.params
7+
const { nsfront, nsbehind, cratename } = params;
8+
const endpoint = process.env.CRATES_PRO_INTERNAL_HOST;
9+
10+
const externalApiUrl = `${endpoint}/api/crates/${nsfront}/${nsbehind}/${cratename}/all`; // 替换为你的外部 API URL
11+
const externalRes = await fetch(externalApiUrl);
12+
if (!externalRes.ok) {
13+
throw new Error('Failed to fetch external data');
14+
}
15+
const externalData = await externalRes.json();
16+
console.log('crateinfo in api', externalData);
17+
return NextResponse.json(externalData);
18+
} catch (error) {
19+
console.error('Error:', error);
20+
return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
21+
22+
}
23+
}

‎app/search/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ const Search = () => {
161161
hover:shadow-[0_0_12px_0_rgba(43,88,221,0.2)]
162162
`}
163163
>
164-
<Link href={`/${item.nsfront}/${item.nsbehind}/${item.name}/${item.version}`} className="block h-full">
164+
<Link href={`/${item.nsfront}/${item.nsbehind}/${item.name}/all`} className="block h-full">
165165
<div className="p-6 h-full flex flex-col justify-center">
166166
<div className="text-sm text-gray-600 mb-1">NuGet</div>
167167
<div className="text-blue-500 font-medium text-lg">{item.name}</div>

‎components/CrateNav.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const CrateNav: React.FC<CrateNavProps> = ({ nsfront, nsbehind, name, version })
1717
const router = useRouter();
1818
const basePath = `/${nsfront}/${nsbehind}/${name}/${version}`;
1919
const [isOpen, setIsOpen] = useState(false);
20-
const [currentVersion, setCurrentVersion] = useState(version);
2120
const [searchTerm, setSearchTerm] = useState('');
2221
const { crateData, setCrateData } = useHeaderContext();
2322

@@ -82,7 +81,7 @@ const CrateNav: React.FC<CrateNavProps> = ({ nsfront, nsbehind, name, version })
8281
onClick={toggleDropdown}
8382
className="flex items-center justify-between w-[150px] h-[36px] flex-shrink-0 rounded-[18.5px] border border-[#333333] bg-white px-4"
8483
>
85-
<span>{currentVersion || 'Select Version'}</span>
84+
<span>{version}</span>
8685
<Image
8786
src={isOpen ? "/images/homepage/verison-up.png" : "/images/homepage/version-down.png"}
8887
alt="version"
@@ -103,17 +102,27 @@ const CrateNav: React.FC<CrateNavProps> = ({ nsfront, nsbehind, name, version })
103102
/>
104103
</div>
105104
<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">
105+
<Link
106+
onClick={() => {
107+
setSearchTerm('');
108+
closeDropdown();
109+
}}
110+
href={`/${nsfront}/${nsbehind}/${name}/all`}
111+
>
112+
<li className="px-4 py-2 hover:bg-[#E2E9FF] cursor-pointer">
113+
all
114+
</li>
115+
</Link>
106116
{crateData.results?.versions
107117
.filter(version => version.toLowerCase().includes(searchTerm.toLowerCase()))
108118
.map((version, index) => (
109119
<Link
110120
key={index}
111121
onClick={() => {
112-
setCurrentVersion(version);
113122
setSearchTerm('');
114123
closeDropdown();
115124
}}
116-
href={`/${nsfront}/${nsbehind}/${crateData.results?.crate_name}/${version}`}
125+
href={`/${nsfront}/${nsbehind}/${name}/${version}`}
117126
>
118127
<li className="px-4 py-2 hover:bg-[#E2E9FF] cursor-pointer">
119128
{version}

‎components/DependencyGraph.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -61,25 +61,25 @@ const DependencyGraph: React.FC = () => {
6161
svg.append('defs').append('marker')
6262
.attr('id', 'arrowhead')
6363
.attr('viewBox', '0 -5 10 10')
64-
.attr('refX', 8)
64+
.attr('refX', 12)
6565
.attr('refY', 0)
6666
.attr('orient', 'auto')
67-
.attr('markerWidth', 6)
68-
.attr('markerHeight', 6)
67+
.attr('markerWidth', 8)
68+
.attr('markerHeight', 8)
6969
.append('path')
7070
.attr('d', 'M 0,-5 L 10,0 L 0,5')
7171
.attr('fill', '#333')
7272
.style('stroke', 'none');
7373

7474
const nodesMap = new Map<string, DependencyNode>();
7575
const links: DependencyLink[] = [];
76-
76+
// 根据cve_count设置节点颜色
7777
function processDependencies(dep: GraphDependency, parent?: DependencyNode) {
7878
const nodeId = `${dep.name_and_version}`;
7979
let node = nodesMap.get(nodeId);
8080
if (!node) {
8181
const getColorByCveCount = (count: number) => {
82-
if (count === 0) return '#2ecc71'; // 绿色
82+
if (count === 0) return '#808080'; // 灰色
8383
if (count >= 10) return '#8b0000'; // 深红色
8484
if (count >= 6) return '#e74c3c'; // 红色
8585
if (count >= 3) return '#e67e22'; // 橙色
@@ -108,18 +108,18 @@ const DependencyGraph: React.FC = () => {
108108
const nodes = Array.from(nodesMap.values());
109109

110110
const simulation = d3.forceSimulation<DependencyNode>(nodes)
111-
.force('link', d3.forceLink<DependencyNode, DependencyLink>(links).id(d => d.id).distance(80))
112-
.force('charge', d3.forceManyBody().strength(-300))
111+
.force('link', d3.forceLink<DependencyNode, DependencyLink>(links).id(d => d.id).distance(150))
112+
.force('charge', d3.forceManyBody().strength(-500))
113113
.force('center', d3.forceCenter(width / 2, height / 2))
114-
.force('collide', d3.forceCollide().radius(15));
114+
.force('collide', d3.forceCollide().radius(30));
115115

116116
const g = svg.append('g');
117117

118118
const link = g.append('g')
119119
.selectAll('line')
120120
.data(links)
121121
.enter().append('line')
122-
.attr('stroke-width', 1.5)
122+
.attr('stroke-width', 2)
123123
.attr('stroke', '#333')
124124
.attr('marker-end', 'url(#arrowhead)')
125125
.attr('x2', function (d) {
@@ -139,10 +139,10 @@ const DependencyGraph: React.FC = () => {
139139
.selectAll('circle')
140140
.data(nodes)
141141
.enter().append('circle')
142-
.attr('r', 8)
142+
.attr('r', 15)
143143
.attr('fill', d => d.color)
144144
.attr('stroke', '#333')
145-
.attr('stroke-width', 1.5)
145+
.attr('stroke-width', 2)
146146
.call(d3.drag<SVGCircleElement, DependencyNode>()
147147
.on('start', dragstarted)
148148
.on('drag', dragged)
@@ -157,9 +157,11 @@ const DependencyGraph: React.FC = () => {
157157
.data(nodes)
158158
.enter().append('text')
159159
.attr('dy', '.35em')
160-
.attr('x', d => d.x! + 10)
160+
.attr('x', d => d.x! + 20)
161161
.attr('y', d => d.y!)
162-
.text(d => d.id);
162+
.text(d => d.id)
163+
.style('font-size', '14px')
164+
.style('font-weight', 'bold');
163165

164166
simulation
165167
.nodes(nodes)
@@ -189,7 +191,7 @@ const DependencyGraph: React.FC = () => {
189191
.attr('cy', d => d.y!);
190192

191193
labels
192-
.attr('x', d => d.x! + 10)
194+
.attr('x', d => d.x! + 20)
193195
.attr('y', d => d.y!);
194196
}
195197

‎components/DependencyTable.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,10 @@ const DependencyTable: React.FC<DependencyTableProps> = ({ data }) => {
147147
</div>
148148
</div>
149149
<Link
150-
href={`/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependencies/graph`}
151-
className="w-[163px] h-[42px] flex-shrink-0 rounded-[21px] bg-[#4B68FF] shadow-[0_0_12px_0_#2b58dd17] text-white flex items-center justify-center hover:bg-[#3a57f0] transition-colors"
150+
href={params.version === 'all' ? '#' : `/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependencies/graph`}
151+
className={`w-[163px] h-[42px] flex-shrink-0 rounded-[21px] shadow-[0_0_12px_0_#2b58dd17] text-white flex items-center justify-center transition-colors ${params.version === 'all' ? 'bg-gray-300' : 'bg-[#4B68FF] hover:bg-[#3a57f0]'}`}
152+
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
153+
{...(params.version === 'all' ? { tabIndex: -1, 'aria-disabled': true, onClick: (e) => e.preventDefault() } : {})}
152154
>
153155
<span className="font-['HarmonyOS_Sans_SC'] text-lg font-bold capitalize">Show Graph</span>
154156
</Link>

0 commit comments

Comments
 (0)