diff --git a/app/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx b/app/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx index ea9d4ca..30122a8 100644 --- a/app/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx +++ b/app/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx @@ -2,7 +2,7 @@ "use client"; import React, { useEffect, useState } from "react"; import { useParams } from "next/navigation"; - +import Image from "next/image"; import DependencyTable from "@/components/DependencyTable"; // import DependencyGraph from "@/components/DependencyGraph"; // 假设你已经创建了 DependencyGraph 组件 import { dependenciesInfo } from "@/app/lib/all_interface"; @@ -17,7 +17,7 @@ const CratePage = () => { const [error, setError] = useState(null); // 新增状态：控制显示 DependencyTable 或 DependencyGraph - const [showTable, setShowTable] = useState(true); + // const [showTable, setShowTable] = useState(true); useEffect(() => { const fetchCrateData = async () => { @@ -44,22 +44,67 @@ const CratePage = () => { fetchCrateData(); // 调用函数来获取数据 }, [params.name, params.version, params.nsfront, params.nsbehind]); // 依赖项数组，确保在 crateName 或 version 改变时重新获取数据 - if (loading) return
Loading...
; - if (error) return
Error: {error}
; + if (loading) return
Loading...
; + if (error) return
Error: {error}
; return ( -
+
+
+
+ +
+
+ + {/* 页脚 */} +
+
+
+
+
+ CratesPro Logo +
+ +
+

Resources

+
    +
  • Documentation
    • +
  • About
    • +
  • Blog
    • +
  • FAQ
    • +
+
- {/* 切换按钮 */} - setShowTable(!showTable)} // 切换状态 - className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" - href={`/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependencies/graph`} > - {showTable ? "Show Graph" : "Show Table"} - +
+

API

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

Legal

+
    +
  • Legal
    • +
  • Privacy
    • +
  • Terms
    • +
+
+
+
+

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

+
+
+
+
); }; diff --git a/app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx b/app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx index b20db55..d0ad492 100644 --- a/app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx +++ b/app/[nsfront]/[nsbehind]/[name]/[version]/page.tsx @@ -272,8 +272,8 @@ const CratePage = () => { No vulnerabilities

No vulnerabilities found

diff --git a/components/CrateNav.tsx b/components/CrateNav.tsx index eae2d72..71e6dde 100644 --- a/components/CrateNav.tsx +++ b/components/CrateNav.tsx @@ -60,9 +60,13 @@ const CrateNav: React.FC = ({ nsfront, nsbehind, name, version }) return (
- -
-
+
+
+ +
+
+
+

{name}

diff --git a/components/DependencyTable.tsx b/components/DependencyTable.tsx index 0da59cd..94efae1 100644 --- a/components/DependencyTable.tsx +++ b/components/DependencyTable.tsx @@ -1,8 +1,8 @@ 'use client'; -import { useMemo } from 'react'; import React, { useState } from 'react'; -import { Table } from 'antd'; -// import { dependenciesInfo } from '@/app/lib/all_interface'; +import Link from 'next/link'; +import { useParams } from 'next/navigation'; +import Image from 'next/image'; interface DependencyItem { crate_name: string; @@ -17,91 +17,285 @@ interface DependencyTableProps { } const DependencyTable: React.FC = ({ data }) => { - const [sortColumn, setSortColumn] = useState(null); - const [sortDirection, setSortDirection] = useState(null); + const params = useParams(); + const [searchQuery, setSearchQuery] = useState(''); + // const [showGraph, setShowGraph] = useState(false); + const [currentPage, setCurrentPage] = useState(1); + const itemsPerPage = 15; // 每页显示条目数 + const [sortField, setSortField] = useState(null); + const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc'); - const x = 1; - if (x <= 0) { - setSortColumn(null); - setSortDirection(null); - console.log(data); - } + // 处理搜索逻辑 + const handleSearch = (e: React.ChangeEvent) => { + setSearchQuery(e.target.value); + setCurrentPage(1); // 搜索时重置到第一页 + }; + // 处理排序 + const handleSort = (field: string) => { + if (sortField === field) { + // 如果已经在按这个字段排序，则切换排序方向 + setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc'); + } else { + // 如果是新的排序字段，设置为升序 + setSortField(field); + setSortDirection('asc'); + } + setCurrentPage(1); // 排序时重置到第一页 + }; + + // 筛选数据 + const filteredData = data?.filter(item => + item.crate_name.toLowerCase().includes(searchQuery.toLowerCase()) || + item.version.toLowerCase().includes(searchQuery.toLowerCase()) || + item.relation.toLowerCase().includes(searchQuery.toLowerCase()) || + (item.license && item.license.toLowerCase().includes(searchQuery.toLowerCase())) + ) || []; + + // 排序数据 + const sortedData = [...filteredData].sort((a, b) => { + if (!sortField) return 0; + let valueA, valueB; - const sortedData = useMemo(() => { - if (data === null) { - return []; + switch (sortField) { + case 'crate_name': + valueA = a.crate_name.toLowerCase(); + valueB = b.crate_name.toLowerCase(); + break; + case 'relation': + valueA = a.relation.toLowerCase(); + valueB = b.relation.toLowerCase(); + break; + case 'dependencies': + valueA = a.dependencies; + valueB = b.dependencies; + break; + default: + return 0; } - if (!data) { - return []; // 如果 data 为 undefined 或 null，返回空数组 + + if (valueA < valueB) return sortDirection === 'asc' ? -1 : 1; + if (valueA > valueB) return sortDirection === 'asc' ? 1 : -1; + return 0; + }); + + // 分页逻辑 + const totalPages = Math.ceil(sortedData.length / itemsPerPage); + const startIndex = (currentPage - 1) * itemsPerPage; + const endIndex = startIndex + itemsPerPage; + const currentItems = sortedData.slice(startIndex, endIndex); + + // 分页控制函数 + const goToPage = (page: number) => { + if (page >= 1 && page <= totalPages) { + setCurrentPage(page); } - return sortColumn - ? data.sort((a: DependencyItem, b: DependencyItem) => { - if (a[sortColumn] < b[sortColumn]) return sortDirection === 'ascend' ? -1 : 1; - if (a[sortColumn] > b[sortColumn]) return sortDirection === 'ascend' ? 1 : -1; - return 0; - }) - : data; - }, [data, sortColumn, sortDirection]); - - const columns = [ - { - title: 'Crate', - dataIndex: 'crate_name', - key: 'Crate', - sorter: true, - sortDirection: sortDirection, - render: (text: string | number | bigint | boolean | React.ReactElement> | Iterable | React.ReactPortal | Promise | null | undefined) => {text}, - }, - { - title: 'Version', - dataIndex: 'version', - key: 'Version', - render: (text: string | number | bigint | boolean | React.ReactElement> | Iterable | React.ReactPortal | Promise | null | undefined) => {text}, - }, - { - title: 'Relation', - dataIndex: 'relation', - key: 'Relation', - sorter: true, - sortDirection: sortDirection, - render: (text: string | number | bigint | boolean | React.ReactElement> | Iterable | React.ReactPortal | Promise | null | undefined) => {text}, - }, - { - title: 'License', - dataIndex: 'license', - key: 'License', - render: (text: string | number | bigint | boolean | React.ReactElement> | Iterable | React.ReactPortal | Promise | null | undefined) => {text}, - }, - { - title: 'Dependencies', - dataIndex: 'dependencies', - key: 'Dependencies', - sorter: true, - sortDirection: sortDirection, - render: (text: string | number | bigint | boolean | React.ReactElement> | Iterable | React.ReactPortal | Promise | null | undefined) => {text}, - }, - ]; - - // const handleSort = (column: SorterResult | SorterResult[], direction: React.SetStateAction) => { - // setSortColumn(column.dataIndex); - // setSortDirection(direction); - // }; - // const x = 1; - // if (x <= 0) { - // setSortColumn(null); - // setSortDirection(null); - // } + }; + + // 生成页码按钮 + const getPageButtons = () => { + const pageButtons = []; + const maxVisiblePages = 5; + + // 计算要显示的页码范围 + let startPage = Math.max(1, currentPage - 2); + const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1); + + // 调整起始页，确保显示足够的页码 + if (endPage - startPage + 1 < maxVisiblePages) { + startPage = Math.max(1, endPage - maxVisiblePages + 1); + } + + for (let i = startPage; i <= endPage; i++) { + pageButtons.push( + + ); + } + + return pageButtons; + }; + return ( -
- handleSort(sorter, sorter.order)} - // rowKey={(record) => record.Crate} - /> +
+ {/* 搜索和显示选项 */} +
+
+
+
+ +
+ +
+
+ + Show Graph + +
+ + {/* 表格 */} +
+
+
+
+ Crate + +
+
+ Version +
+
+ Relation + +
+
+ License +
+
+ Dependencies + +
+
+
+
+ {currentItems.length > 0 ? ( + currentItems.map((item, index) => ( +
+
+ + {item.crate_name} + +
+
{item.version}
+
{item.relation}
+
{item.license || '-'}
+
{item.dependencies}
+
+ )) + ) : ( +
+ {searchQuery ? 'No matching results found' : 'No data available'} +
+ )} +
+
+ + {/* 分页控制 */} + {sortedData.length > 0 && ( +
+ + + + {getPageButtons()} + + + +
+ )}
); }; diff --git a/components/NewHeader.tsx b/components/NewHeader.tsx index e25c650..0e5e889 100644 --- a/components/NewHeader.tsx +++ b/components/NewHeader.tsx @@ -25,41 +25,39 @@ const NewHeader = () => { return ( <> {contextHolder} -
-
-
- -
- -
- -
- -
-
- setSearchQuery(e.target.value)} - onKeyDown={handleKeyPress} +
+
+ +
+
- + +
+ +
+
+ setSearchQuery(e.target.value)} + onKeyDown={handleKeyPress} + />
-
-
+ +
+
); } diff --git a/public/images/homepage/array-grey.png b/public/images/homepage/array-grey.png new file mode 100644 index 0000000..20f6592 Binary files /dev/null and b/public/images/homepage/array-grey.png differ diff --git a/public/images/homepage/array-up.png b/public/images/homepage/array-up.png new file mode 100644 index 0000000..b84a645 Binary files /dev/null and b/public/images/homepage/array-up.png differ diff --git a/public/images/homepage/arry-down.png b/public/images/homepage/arry-down.png new file mode 100644 index 0000000..b4181ff Binary files /dev/null and b/public/images/homepage/arry-down.png differ diff --git a/public/images/homepage/search-Dependencies.png b/public/images/homepage/search-Dependencies.png new file mode 100644 index 0000000..c6e92a2 Binary files /dev/null and b/public/images/homepage/search-Dependencies.png differ