1+ 'use client' ;
2+ import React , { useEffect , useState , useCallback } from 'react' ;
3+ import { Table } from 'antd' ;
4+ import { useParams } from 'next/navigation' ;
5+
6+ // 假设后端接口返回的类型
7+ interface VersionInfo {
8+ version : string ;
9+ publishDay : string ;
10+ dependentsNumber : number ;
11+ }
12+
13+ interface VersionsTableProps {
14+ data : string [ ] | undefined ; // 传入的版本号数组
15+ }
16+
17+ const VersionsTable : React . FC < VersionsTableProps > = ( { data } ) => {
18+ const [ versionsData , setVersionsData ] = useState < VersionInfo [ ] > ( [ ] ) ;
19+ const [ loading , setLoading ] = useState < boolean > ( false ) ;
20+ const params = useParams ( ) ;
21+
22+ // 获取版本发布日的函数
23+ const fetchPublishDay = useCallback ( async ( version : string ) => {
24+ try {
25+ const response = await fetch ( `/api/publish-day/${ version } ) ;
26+ if ( ! response . ok ) {
27+ throw new Error ( 'Failed to fetch publish day' ) ;
28+ }
29+ const data = await response . json ( ) ;
30+ return data . publishDay || 'N/A' ; // 如果没有返回值，则默认返回 'N/A'
31+ } catch ( error ) {
32+ console . error ( 'Error fetching publish day:' , error ) ;
33+ return 'N/A' ; // 请求失败时返回默认值
34+ }
35+ } , [ ] ) ;
36+
37+ // 获取版本依赖数的函数
38+ const fetchDependentsNumber = useCallback ( async ( version : string ) => {
39+ try {
40+ const response = await fetch ( `/api/crates/${ params . nsfront } ${ params . nsbehind } ${ params . name } ${ version } ) ;
41+ if ( ! response . ok ) {
42+ throw new Error ( 'Failed to fetch dependents number' ) ;
43+ }
44+ const data = await response . json ( ) ;
45+ return data . direct_count + data . indirect_count || 0 ; // 如果没有返回值，则默认返回 0
46+ } catch ( error ) {
47+ console . error ( 'Error fetching dependents number:' , error ) ;
48+ return 0 ; // 请求失败时返回默认值
49+ }
50+ } , [ params . nsfront , params . nsbehind , params . name ] ) ;
51+
52+ // 请求版本的发布日和依赖数
53+ const fetchVersionDetails = useCallback ( async ( version : string ) => {
54+ const publishDay = await fetchPublishDay ( version ) ;
55+ const dependentsNumber = await fetchDependentsNumber ( version ) ;
56+ return { version, publishDay, dependentsNumber } ;
57+ } , [ fetchPublishDay , fetchDependentsNumber ] ) ;
58+
59+ useEffect ( ( ) => {
60+ const fetchData = async ( ) => {
61+ if ( data && data . length > 0 ) {
62+ setLoading ( true ) ;
63+ const versionDetails = await Promise . all (
64+ data . map ( async ( version ) => {
65+ return await fetchVersionDetails ( version ) ;
66+ } )
67+ ) ;
68+ setVersionsData ( versionDetails ) ;
69+ setLoading ( false ) ;
70+ }
71+ } ;
72+
73+ fetchData ( ) ;
74+ } , [ data , fetchVersionDetails ] ) ;
75+
76+ const columns = [
77+ {
78+ title : 'Version' ,
79+ dataIndex : 'version' ,
80+ key : 'version' ,
81+ render : ( text : string ) => < span > { text } </ span > ,
82+ } ,
83+ {
84+ title : 'Publish Day' ,
85+ dataIndex : 'publishDay' ,
86+ key : 'publishDay' ,
87+ render : ( text : string ) => < span > { text } </ span > ,
88+ } ,
89+ {
90+ title : 'Dependents Number' ,
91+ dataIndex : 'dependentsNumber' ,
92+ key : 'dependentsNumber' ,
93+ render : ( text : number ) => < span > { text } </ span > ,
94+ } ,
95+ ] ;
96+
97+ return (
98+ < Table
99+ columns = { columns }
100+ dataSource = { versionsData }
101+ pagination = { false }
102+ rowKey = "version" // 使用版本字符串作为唯一键
103+ loading = { loading } // 显示加载状态
104+ />
105+ ) ;
106+ } ;
107+
108+ export default VersionsTable ;
0 commit comments