|
2 | 2 |
|
3 | 3 | import { useEffect, useState } from 'react'; |
4 | 4 |
|
| 5 | +interface RepoData { |
| 6 | + name: string; |
| 7 | + stars: string; |
| 8 | + createdAt: string; |
| 9 | + currentStars: string; |
| 10 | + summary?: string; |
| 11 | +} |
| 12 | + |
5 | 13 | export default function Home() { |
6 | | - const [data, setData] = useState<string[][]>([]); |
| 14 | + const [data, setData] = useState<RepoData[]>([]); |
7 | 15 | const [error, setError] = useState<string | null>(null); |
| 16 | + const [loading, setLoading] = useState(false); |
| 17 | + const [expandedSummaries, setExpandedSummaries] = useState<Set<string>>(new Set()); |
8 | 18 |
|
9 | 19 | useEffect(() => { |
10 | 20 | const fetchData = async () => { |
| 21 | + setLoading(true); |
11 | 22 | try { |
12 | 23 | const response = await fetch('/results/result.csv'); |
13 | 24 | if (!response.ok) { |
14 | 25 | throw new Error(`HTTP error! status: ${response.status}`); |
15 | 26 | } |
16 | 27 | const text = await response.text(); |
17 | | - // Simple CSV parsing |
18 | | - const rows = text.split('\n').map(row => row.split(',')); |
19 | | - setData(rows); |
| 28 | + // Parse CSV handling quoted fields |
| 29 | + const parseCSV = (text: string) => { |
| 30 | + const rows: string[][] = []; |
| 31 | + let currentRow: string[] = []; |
| 32 | + let currentField = ''; |
| 33 | + let inQuotes = false; |
| 34 | + |
| 35 | + for (let i = 0; i < text.length; i++) { |
| 36 | + const char = text[i]; |
| 37 | + const nextChar = text[i + 1]; |
| 38 | + |
| 39 | + if (char === '"') { |
| 40 | + if (inQuotes && nextChar === '"') { |
| 41 | + currentField += '"'; |
| 42 | + i++; |
| 43 | + } else { |
| 44 | + inQuotes = !inQuotes; |
| 45 | + } |
| 46 | + } else if (char === ',' && !inQuotes) { |
| 47 | + currentRow.push(currentField); |
| 48 | + currentField = ''; |
| 49 | + } else if ((char === '\n' || char === '\r') && !inQuotes) { |
| 50 | + if (currentField || currentRow.length > 0) { |
| 51 | + currentRow.push(currentField); |
| 52 | + rows.push(currentRow); |
| 53 | + currentRow = []; |
| 54 | + currentField = ''; |
| 55 | + } |
| 56 | + if (char === '\r' && nextChar === '\n') i++; |
| 57 | + } else { |
| 58 | + currentField += char; |
| 59 | + } |
| 60 | + } |
| 61 | + |
| 62 | + if (currentField || currentRow.length > 0) { |
| 63 | + currentRow.push(currentField); |
| 64 | + rows.push(currentRow); |
| 65 | + } |
| 66 | + |
| 67 | + return rows; |
| 68 | + }; |
| 69 | + |
| 70 | + const rows = parseCSV(text).filter(row => row.some(cell => cell.trim())); |
| 71 | + const repoData: RepoData[] = rows.slice(1).map(row => ({ |
| 72 | + name: row[0] || '', |
| 73 | + stars: row[1] || '0', |
| 74 | + createdAt: row[2] || '', |
| 75 | + currentStars: row[3] || '0', |
| 76 | + summary: row[4] || '', |
| 77 | + })).filter(r => r.name); |
| 78 | + setData(repoData); |
20 | 79 | } catch (e: any) { |
21 | 80 | setError(e.message); |
| 81 | + } finally { |
| 82 | + setLoading(false); |
22 | 83 | } |
23 | 84 | }; |
24 | 85 |
|
25 | 86 | fetchData(); |
26 | 87 | }, []); |
27 | 88 |
|
| 89 | + const toggleSummary = (repoName: string) => { |
| 90 | + setExpandedSummaries(prev => { |
| 91 | + const newSet = new Set(prev); |
| 92 | + if (newSet.has(repoName)) { |
| 93 | + newSet.delete(repoName); |
| 94 | + } else { |
| 95 | + newSet.add(repoName); |
| 96 | + } |
| 97 | + return newSet; |
| 98 | + }); |
| 99 | + }; |
| 100 | + |
28 | 101 | if (error) { |
29 | | - return <div className="p-8">Error: {error}</div>; |
| 102 | + return <div className="p-8 text-red-500">Error: {error}</div>; |
30 | 103 | } |
31 | 104 |
|
32 | | - if (data.length === 0) { |
| 105 | + if (loading) { |
33 | 106 | return <div className="p-8">Loading data...</div>; |
34 | 107 | } |
35 | 108 |
|
36 | 109 | return ( |
37 | | - <div className="p-8"> |
38 | | - <h1 className="text-2xl font-bold mb-4">GitHub Analysis Results</h1> |
39 | | - <div className="overflow-x-auto"> |
40 | | - <table className="min-w-full bg-white border border-gray-300"> |
41 | | - <thead> |
42 | | - {data[0] && ( |
43 | | - <tr> |
44 | | - {data[0].map((header, index) => ( |
45 | | - <th key={index} className="py-2 px-4 border-b text-left"> |
46 | | - {header} |
47 | | - </th> |
48 | | - ))} |
49 | | - </tr> |
50 | | - )} |
51 | | - </thead> |
52 | | - <tbody> |
53 | | - {data.slice(1).map((row, rowIndex) => ( |
54 | | - <tr key={rowIndex} className="hover:bg-gray-50"> |
55 | | - {row.map((cell, cellIndex) => ( |
56 | | - <td key={cellIndex} className="py-2 px-4 border-b"> |
57 | | - {cell} |
58 | | - </td> |
| 110 | + <div className="min-h-screen bg-gray-50 p-4 md:p-8"> |
| 111 | + <div className="max-w-7xl mx-auto"> |
| 112 | + <h1 className="text-2xl md:text-3xl font-bold mb-2 text-gray-900">GitHub 热门项目预测器</h1> |
| 113 | + <p className="text-gray-600 mb-6">基于最近 2 天 star 增长分析的潜力项目,AI 智能总结</p> |
| 114 | + |
| 115 | + <div className="bg-white rounded-lg shadow overflow-hidden"> |
| 116 | + <div className="overflow-x-auto"> |
| 117 | + <table className="min-w-full"> |
| 118 | + <thead className="bg-gray-100"> |
| 119 | + <tr> |
| 120 | + <th className="py-3 px-2 md:px-4 text-left text-xs md:text-sm font-semibold text-gray-700">排名</th> |
| 121 | + <th className="py-3 px-2 md:px-4 text-left text-xs md:text-sm font-semibold text-gray-700">项目名称</th> |
| 122 | + <th className="py-3 px-2 md:px-4 text-left text-xs md:text-sm font-semibold text-gray-700">新增</th> |
| 123 | + <th className="py-3 px-2 md:px-4 text-left text-xs md:text-sm font-semibold text-gray-700">总 Star</th> |
| 124 | + <th className="py-3 px-2 md:px-4 text-left text-xs md:text-sm font-semibold text-gray-700 hidden md:table-cell">创建时间</th> |
| 125 | + <th className="py-3 px-2 md:px-4 text-left text-xs md:text-sm font-semibold text-gray-700">AI 总结</th> |
| 126 | + </tr> |
| 127 | + </thead> |
| 128 | + <tbody className="divide-y divide-gray-200"> |
| 129 | + {data.map((repo, index) => ( |
| 130 | + <> |
| 131 | + <tr key={repo.name} className="hover:bg-gray-50"> |
| 132 | + <td className="py-3 px-2 md:px-4 text-sm text-gray-900">{index + 1}</td> |
| 133 | + <td className="py-3 px-2 md:px-4"> |
| 134 | + <a |
| 135 | + href={`https://github.com/${repo.name}`} |
| 136 | + target="_blank" |
| 137 | + rel="noopener noreferrer" |
| 138 | + className="text-blue-600 hover:text-blue-800 font-medium text-xs md:text-sm" |
| 139 | + > |
| 140 | + {repo.name} |
| 141 | + </a> |
| 142 | + </td> |
| 143 | + <td className="py-3 px-2 md:px-4 text-sm text-gray-900"> |
| 144 | + <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800"> |
| 145 | + +{repo.stars} |
| 146 | + </span> |
| 147 | + </td> |
| 148 | + <td className="py-3 px-2 md:px-4 text-sm text-gray-600">{repo.currentStars}</td> |
| 149 | + <td className="py-3 px-2 md:px-4 text-sm text-gray-600 hidden md:table-cell"> |
| 150 | + {new Date(repo.createdAt).toLocaleDateString('zh-CN')} |
| 151 | + </td> |
| 152 | + <td className="py-3 px-2 md:px-4"> |
| 153 | + {repo.summary ? ( |
| 154 | + <button |
| 155 | + onClick={() => toggleSummary(repo.name)} |
| 156 | + className="text-xs px-2 py-1 rounded bg-blue-500 text-white hover:bg-blue-600 transition-colors" |
| 157 | + > |
| 158 | + {expandedSummaries.has(repo.name) ? '收起' : '查看'} |
| 159 | + </button> |
| 160 | + ) : ( |
| 161 | + <span className="text-xs text-gray-400">-</span> |
| 162 | + )} |
| 163 | + </td> |
| 164 | + </tr> |
| 165 | + {repo.summary && expandedSummaries.has(repo.name) && ( |
| 166 | + <tr key={`${repo.name}-summary`}> |
| 167 | + <td colSpan={6} className="py-4 px-2 md:px-4 bg-blue-50"> |
| 168 | + <div className="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap"> |
| 169 | + {repo.summary} |
| 170 | + </div> |
| 171 | + </td> |
| 172 | + </tr> |
| 173 | + )} |
| 174 | + </> |
59 | 175 | ))} |
60 | | - </tr> |
61 | | - ))} |
62 | | - </tbody> |
63 | | - </table> |
| 176 | + </tbody> |
| 177 | + </table> |
| 178 | + </div> |
| 179 | + </div> |
| 180 | + |
| 181 | + <p className="mt-4 text-xs md:text-sm text-gray-500"> |
| 182 | + 数据更新时间: {new Date().toLocaleString('zh-CN')} |
| 183 | + </p> |
64 | 184 | </div> |
65 | 185 | </div> |
66 | 186 | ); |
|
0 commit comments