vitalitymailg/shorturl-analytics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
William Tso
2025-03-25 22:24:52 +08:00
parent e0ac87fb25
commit 1755b44a39
5 changed files with 29 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/analytics/geo/page.tsx
View File

@@ -37,27 +37,27 @@ export default function GeoAnalyticsPage() {
<div className="container mx-auto px-4 py-8">
{/* 页面标题 */}
<div className="mb-8">
<h1 className="text-2xl font-bold text-foreground">Geographic Analysis</h1>
<p className="mt-2 text-text-secondary">Analyze visitor distribution by location</p>
<h1 className="text-2xl font-bold text-white">Geographic Analysis</h1>
<p className="mt-2 text-white">Analyze visitor distribution by location</p>
</div>
{/* 时间范围选择器 */}
<div className="bg-card-bg rounded-xl p-6 mb-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-text-secondary mb-1">Start Date</label>
<label className="block text-sm font-medium text-white mb-1">Start Date</label>
<input
type="date"
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm"
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm "
value={dateRange.from.toISOString().split('T')[0]}
onChange={e => setDateRange(prev => ({ ...prev, from: new Date(e.target.value) }))}
/>
</div>
<div>
<label className="block text-sm font-medium text-text-secondary mb-1">End Date</label>
<label className="block text-sm font-medium text-white mb-1">End Date</label>
<input
type="date"
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm"
className="block w-full px-3 py-2 bg-background border border-card-border rounded-md text-sm "
value={dateRange.to.toISOString().split('T')[0]}
onChange={e => setDateRange(prev => ({ ...prev, to: new Date(e.target.value) }))}
/>
@@ -71,33 +71,33 @@ export default function GeoAnalyticsPage() {
<table className="min-w-full divide-y divide-card-border">
<thead>
<tr className="bg-background/50">
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider">Location</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider">Visits</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider">Unique Visitors</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider">Percentage</th>
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Location</th>
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Visits</th>
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Unique Visitors</th>
<th className="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Percentage</th>
</tr>
</thead>
<tbody className="divide-y divide-card-border">
{geoData.map(item => (
<tr key={item.location} className="hover:bg-background/50">
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
<td className="px-6 py-4 whitespace-nowrap text-sm text-white">
{item.location}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
<td className="px-6 py-4 whitespace-nowrap text-sm text-white">
{item.visits}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
<td className="px-6 py-4 whitespace-nowrap text-sm text-white">
{item.visitors}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm">
<div className="flex items-center">
<div className="w-full bg-background rounded-full h-2 mr-2">
<div
className="bg-accent-blue h-2 rounded-full"
className="bg-blue-500 h-2 rounded-full"
style={{ width: `${item.percentage}%` }}
/>
</div>
<span className="text-text-secondary">{item.percentage.toFixed(1)}%</span>
<span className="text-white">{item.percentage.toFixed(1)}%</span>
</div>
</td>
</tr>
@@ -122,14 +122,14 @@ export default function GeoAnalyticsPage() {
{/* 无数据状态 */}
{!isLoading && !error && geoData.length === 0 && (
<div className="flex justify-center items-center p-8 text-text-secondary">
<div className="flex justify-center items-center p-8 text-white">
<p>No geographic data available</p>
</div>
)}
</div>
{/* 提示信息 */}
<div className="mt-4 text-sm text-text-secondary">
<div className="mt-4 text-sm text-white">
<p>Note: Geographic data is based on IP addresses and may not be 100% accurate.</p>
</div>
</div>