1309 lines
55 KiB
TypeScript
1309 lines
55 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import {
|
|
LinkOverviewData,
|
|
ConversionFunnelData,
|
|
VisitTrendsData,
|
|
LinkPerformanceData,
|
|
PlatformDistributionData,
|
|
DeviceAnalysisData,
|
|
PopularReferrersData,
|
|
QrCodeAnalysisData,
|
|
DeviceItem,
|
|
ReferrerItem,
|
|
} from "@/app/api/types";
|
|
import { TimeGranularity } from "@/lib/analytics";
|
|
|
|
interface LinkDetails {
|
|
id: string;
|
|
name: string;
|
|
shortUrl: string;
|
|
originalUrl: string;
|
|
creator: string;
|
|
createdAt: string;
|
|
visits: number;
|
|
visitChange: number;
|
|
uniqueVisitors: number;
|
|
uniqueVisitorsChange: number;
|
|
avgTime: string;
|
|
avgTimeChange: number;
|
|
conversionRate: number;
|
|
conversionChange: number;
|
|
status: "active" | "inactive" | "expired";
|
|
tags: string[];
|
|
}
|
|
|
|
export default function LinkDetailsPage({
|
|
params,
|
|
}: {
|
|
params: { id: string };
|
|
}) {
|
|
const router = useRouter();
|
|
const [linkId, setLinkId] = useState<string>("");
|
|
|
|
const [linkDetails, setLinkDetails] = useState<LinkDetails | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<
|
|
| "overview"
|
|
| "referrers"
|
|
| "devices"
|
|
| "locations"
|
|
| "performance"
|
|
| "qrCodes"
|
|
>("overview");
|
|
|
|
// 添加state变量存储分析数据
|
|
const [overviewData, setOverviewData] = useState<LinkOverviewData | null>(
|
|
null
|
|
);
|
|
const [funnelData, setFunnelData] = useState<ConversionFunnelData | null>(
|
|
null
|
|
);
|
|
const [trendsData, setTrendsData] = useState<VisitTrendsData | null>(null);
|
|
// 添加新的state变量存储新API的数据
|
|
const [performanceData, setPerformanceData] =
|
|
useState<LinkPerformanceData | null>(null);
|
|
const [platformData, setPlatformData] =
|
|
useState<PlatformDistributionData | null>(null);
|
|
const [deviceData, setDeviceData] = useState<DeviceAnalysisData | null>(null);
|
|
const [referrersData, setReferrersData] =
|
|
useState<PopularReferrersData | null>(null);
|
|
const [qrCodeData, setQrCodeData] = useState<QrCodeAnalysisData | null>(null);
|
|
|
|
const [timeGranularity, setTimeGranularity] = useState<TimeGranularity>(
|
|
TimeGranularity.DAY
|
|
);
|
|
const [dateRange, setDateRange] = useState({
|
|
startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
|
|
.toISOString()
|
|
.split("T")[0], // 30天前
|
|
endDate: new Date().toISOString().split("T")[0], // 今天
|
|
});
|
|
|
|
// 定义fetchAnalyticsData函数在所有useEffect前
|
|
const fetchAnalyticsData = useCallback(async (id: string) => {
|
|
try {
|
|
// 构建查询参数
|
|
const queryParams = new URLSearchParams({
|
|
linkId: id,
|
|
startDate: dateRange.startDate,
|
|
endDate: dateRange.endDate,
|
|
});
|
|
|
|
// 并行获取所有数据
|
|
const [
|
|
overviewResponse,
|
|
funnelResponse,
|
|
trendsResponse,
|
|
performanceResponse,
|
|
platformResponse,
|
|
deviceResponse,
|
|
referrersResponse,
|
|
qrCodeResponse,
|
|
] = await Promise.all([
|
|
fetch(`/api/analytics/overview?${queryParams}`),
|
|
fetch(`/api/analytics/funnel?${queryParams}`),
|
|
fetch(
|
|
`/api/analytics/trends?${queryParams}&granularity=${timeGranularity}`
|
|
),
|
|
fetch(`/api/analytics/link-performance?${queryParams}`),
|
|
fetch(`/api/analytics/platform-distribution?${queryParams}`),
|
|
fetch(`/api/analytics/device-analysis?${queryParams}`),
|
|
fetch(`/api/analytics/popular-referrers?${queryParams}`),
|
|
fetch(`/api/analytics/qr-code-analysis?${queryParams}`),
|
|
]);
|
|
|
|
// 检查所有响应
|
|
if (
|
|
!overviewResponse.ok ||
|
|
!funnelResponse.ok ||
|
|
!trendsResponse.ok ||
|
|
!performanceResponse.ok ||
|
|
!platformResponse.ok ||
|
|
!deviceResponse.ok ||
|
|
!referrersResponse.ok ||
|
|
!qrCodeResponse.ok
|
|
) {
|
|
throw new Error("Failed to fetch analytics data");
|
|
}
|
|
|
|
// 解析所有响应数据
|
|
const [
|
|
overviewResult,
|
|
funnelResult,
|
|
trendsResult,
|
|
performanceResult,
|
|
platformResult,
|
|
deviceResult,
|
|
referrersResult,
|
|
qrCodeResult,
|
|
] = await Promise.all([
|
|
overviewResponse.json(),
|
|
funnelResponse.json(),
|
|
trendsResponse.json(),
|
|
performanceResponse.json(),
|
|
platformResponse.json(),
|
|
deviceResponse.json(),
|
|
referrersResponse.json(),
|
|
qrCodeResponse.json(),
|
|
]);
|
|
|
|
// 设置状态
|
|
setOverviewData(overviewResult);
|
|
setFunnelData(funnelResult);
|
|
setTrendsData(trendsResult);
|
|
setPerformanceData(performanceResult);
|
|
setPlatformData(platformResult);
|
|
setDeviceData(deviceResult);
|
|
setReferrersData(referrersResult);
|
|
setQrCodeData(qrCodeResult);
|
|
|
|
// 更新链接详情中的统计数据
|
|
setLinkDetails((prev) => {
|
|
if (!prev) return prev;
|
|
|
|
return {
|
|
...prev,
|
|
visits: overviewResult.totalVisits,
|
|
uniqueVisitors: overviewResult.uniqueVisitors,
|
|
avgTime: formatTime(overviewResult.averageTimeSpent),
|
|
conversionRate: funnelResult.conversionRate,
|
|
};
|
|
});
|
|
|
|
setLoading(false);
|
|
} catch (error) {
|
|
console.error("Failed to fetch analytics data:", error);
|
|
setLoading(false);
|
|
}
|
|
}, [dateRange, timeGranularity]);
|
|
|
|
// 获取并设置linkId
|
|
useEffect(() => {
|
|
const loadParams = async () => {
|
|
const resolvedParams = await params;
|
|
setLinkId(resolvedParams.id);
|
|
};
|
|
|
|
loadParams();
|
|
}, [params]);
|
|
|
|
// 获取链接详情数据
|
|
useEffect(() => {
|
|
if (!linkId) return;
|
|
|
|
const fetchLinkDetails = async () => {
|
|
setLoading(true);
|
|
try {
|
|
// 获取链接详情
|
|
const response = await fetch(`/api/links/${linkId}/details`);
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.message || "Failed to fetch link details");
|
|
}
|
|
|
|
const details = await response.json();
|
|
setLinkDetails(details);
|
|
setLoading(false);
|
|
|
|
// 获取分析数据
|
|
fetchAnalyticsData(linkId);
|
|
} catch (error) {
|
|
console.error("Failed to fetch link details:", error);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchLinkDetails();
|
|
}, [linkId, fetchAnalyticsData]);
|
|
|
|
// 格式化时间（秒转为分钟和秒）
|
|
const formatTime = (seconds: number) => {
|
|
const minutes = Math.floor(seconds / 60);
|
|
const remainingSeconds = Math.round(seconds % 60);
|
|
return `${minutes}m ${remainingSeconds}s`;
|
|
};
|
|
|
|
// 更新时间粒度并重新获取趋势数据
|
|
const updateTimeGranularity = (granularity: TimeGranularity) => {
|
|
setTimeGranularity(granularity);
|
|
if (linkId) {
|
|
const queryParams = new URLSearchParams({
|
|
linkId,
|
|
startDate: dateRange.startDate,
|
|
endDate: dateRange.endDate,
|
|
granularity,
|
|
});
|
|
|
|
fetch(`/api/analytics/trends?${queryParams}`)
|
|
.then((res) => res.json())
|
|
.then((data) => setTrendsData(data))
|
|
.catch((err) => console.error("Failed to update trends data:", err));
|
|
}
|
|
};
|
|
|
|
// 更新日期范围并重新获取所有数据
|
|
const updateDateRange = (startDate: string, endDate: string) => {
|
|
setDateRange({ startDate, endDate });
|
|
if (linkId) {
|
|
fetchAnalyticsData(linkId);
|
|
}
|
|
};
|
|
|
|
const goBack = () => {
|
|
router.back();
|
|
};
|
|
|
|
// 复制链接到剪贴板
|
|
const copyToClipboard = (text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
// 可以添加一个复制成功的提示
|
|
};
|
|
|
|
// 添加加载和错误处理
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen">
|
|
<div className="text-center">
|
|
<h2 className="text-xl font-semibold mb-2">加载中...</h2>
|
|
<p className="text-text-secondary">正在获取链接详情数据</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!linkDetails) {
|
|
return (
|
|
<div className="flex items-center justify-center h-screen">
|
|
<div className="text-center">
|
|
<h2 className="text-xl font-semibold mb-2">未找到链接</h2>
|
|
<p className="text-text-secondary">无法获取该链接的详细信息</p>
|
|
<Link href="/links" className="mt-4 inline-block text-accent-blue hover:underline">
|
|
返回链接列表
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 只有当linkDetails存在时才渲染详情内容
|
|
return (
|
|
<div className="container px-4 py-8 mx-auto">
|
|
<div className="flex flex-col gap-8">
|
|
{/* 顶部导航栏 */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<button
|
|
onClick={goBack}
|
|
className="flex items-center text-text-secondary hover:text-foreground"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="w-5 h-5 mr-1"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
|
/>
|
|
</svg>
|
|
<span>Back to Links</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex space-x-2">
|
|
<button className="px-4 py-2 text-white rounded-lg bg-accent-blue hover:bg-blue-600">
|
|
Edit Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 链接基本信息卡片 */}
|
|
<div className="overflow-hidden border rounded-lg shadow-sm bg-card-bg border-card-border">
|
|
<div className="flex flex-col gap-6 p-6 md:flex-row">
|
|
<div className="flex-1">
|
|
<h1 className="mb-2 text-2xl font-bold text-foreground">
|
|
{linkDetails.name}
|
|
</h1>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<span className="text-xs font-medium uppercase text-text-secondary">
|
|
Short URL
|
|
</span>
|
|
<div className="flex items-center mt-1">
|
|
<a
|
|
href={`https://${linkDetails.shortUrl}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-medium break-all text-accent-blue hover:underline"
|
|
>
|
|
{linkDetails.shortUrl}
|
|
</a>
|
|
<button
|
|
type="button"
|
|
className="ml-2 text-text-secondary hover:text-foreground"
|
|
onClick={() =>
|
|
copyToClipboard(linkDetails.shortUrl)
|
|
}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M16 12h8m0 0v8m0-8h-8"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-xs font-medium uppercase text-text-secondary">
|
|
Original URL
|
|
</span>
|
|
<div className="mt-1">
|
|
<a
|
|
href={linkDetails.originalUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="break-all text-foreground hover:underline"
|
|
>
|
|
{linkDetails.originalUrl}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:w-1/3">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<span className="text-xs font-medium uppercase text-text-secondary">
|
|
Created By
|
|
</span>
|
|
<p className="mt-1 text-foreground">
|
|
{linkDetails.creator}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-xs font-medium uppercase text-text-secondary">
|
|
Created At
|
|
</span>
|
|
<p className="mt-1 text-foreground">
|
|
{linkDetails.createdAt}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-xs font-medium uppercase text-text-secondary">
|
|
Status
|
|
</span>
|
|
<div className="mt-1">
|
|
<span
|
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
|
|
${
|
|
linkDetails.status === "active"
|
|
? "bg-green-500/10 text-accent-green"
|
|
: linkDetails.status === "inactive"
|
|
? "bg-gray-500/10 text-text-secondary"
|
|
: "bg-red-500/10 text-accent-red"
|
|
}`}
|
|
>
|
|
{linkDetails.status ? linkDetails.status.charAt(0).toUpperCase() +
|
|
linkDetails.status.slice(1) : 'Unknown'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{linkDetails.tags && linkDetails.tags.length > 0 && (
|
|
<div>
|
|
<span className="text-xs font-medium uppercase text-text-secondary">
|
|
Tags
|
|
</span>
|
|
<div className="flex flex-wrap gap-2 mt-1">
|
|
{linkDetails.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-500/10 rounded-full text-accent-blue"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 性能指标卡片 */}
|
|
<div className="p-6 border-t border-card-border">
|
|
<h4 className="mb-4 text-lg font-medium text-foreground">
|
|
Performance Metrics
|
|
</h4>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{/* Total Visits */}
|
|
<div className="p-4 border rounded-lg bg-card-bg border-card-border">
|
|
<div className="flex items-center justify-between">
|
|
<h5 className="text-sm font-medium text-text-secondary">
|
|
Total Visits
|
|
</h5>
|
|
<div className="mt-2 flex items-center">
|
|
<div className={`flex items-center ${linkDetails?.visitChange >= 0 ? "text-accent-green" : "text-accent-red"}`}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={`w-3 h-3 mr-1 ${linkDetails?.visitChange >= 0 ? "text-accent-green" : "text-accent-red transform rotate-180"}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 10l7-7m0 0l7 7m-7-7v18"
|
|
/>
|
|
</svg>
|
|
<span className="text-xs font-medium">
|
|
{Math.abs(linkDetails?.visitChange || 0)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="text-2xl font-bold text-foreground">
|
|
{linkDetails?.visits !== undefined
|
|
? linkDetails.visits.toLocaleString()
|
|
: '0'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Unique Visitors */}
|
|
<div className="p-4 border rounded-lg bg-card-bg border-card-border">
|
|
<div className="flex items-center justify-between">
|
|
<h5 className="text-sm font-medium text-text-secondary">
|
|
Unique Visitors
|
|
</h5>
|
|
<div className="mt-2 flex items-center">
|
|
<div className={`flex items-center ${linkDetails?.uniqueVisitorsChange >= 0 ? "text-accent-green" : "text-accent-red"}`}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={`w-3 h-3 mr-1 ${linkDetails?.uniqueVisitorsChange >= 0 ? "text-accent-green" : "text-accent-red transform rotate-180"}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 10l7-7m0 0l7 7m-7-7v18"
|
|
/>
|
|
</svg>
|
|
<span className="text-xs font-medium">
|
|
{Math.abs(linkDetails?.uniqueVisitorsChange || 0)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="text-2xl font-bold text-foreground">
|
|
{linkDetails?.uniqueVisitors !== undefined
|
|
? linkDetails.uniqueVisitors.toLocaleString()
|
|
: '0'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Average Visit Time */}
|
|
<div className="p-4 border rounded-lg bg-card-bg border-card-border">
|
|
<div className="flex items-center justify-between">
|
|
<h5 className="text-sm font-medium text-text-secondary">
|
|
Avg. Time
|
|
</h5>
|
|
<div className="mt-2 flex items-center">
|
|
<div className={`flex items-center ${linkDetails?.avgTimeChange >= 0 ? "text-accent-green" : "text-accent-red"}`}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={`w-3 h-3 mr-1 ${linkDetails?.avgTimeChange >= 0 ? "text-accent-green" : "text-accent-red transform rotate-180"}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 10l7-7m0 0l7 7m-7-7v18"
|
|
/>
|
|
</svg>
|
|
<span className="text-xs font-medium">
|
|
{Math.abs(linkDetails?.avgTimeChange || 0)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="text-2xl font-bold text-foreground">
|
|
{linkDetails?.avgTime || '0s'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Conversion Rate */}
|
|
<div className="p-4 border rounded-lg bg-card-bg border-card-border">
|
|
<div className="flex items-center justify-between">
|
|
<h5 className="text-sm font-medium text-text-secondary">
|
|
Conversion
|
|
</h5>
|
|
<div className="mt-2 flex items-center">
|
|
<div className={`flex items-center ${linkDetails?.conversionChange >= 0 ? "text-accent-green" : "text-accent-red"}`}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={`w-3 h-3 mr-1 ${linkDetails?.conversionChange >= 0 ? "text-accent-green" : "text-accent-red transform rotate-180"}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 10l7-7m0 0l7 7m-7-7v18"
|
|
/>
|
|
</svg>
|
|
<span className="text-xs font-medium">
|
|
{Math.abs(linkDetails?.conversionChange || 0)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2">
|
|
<p className="text-2xl font-bold text-foreground">
|
|
{linkDetails?.conversionRate !== undefined
|
|
? `${linkDetails.conversionRate}%`
|
|
: '0%'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 图表和详细数据部分 */}
|
|
<div className="overflow-hidden border rounded-lg shadow-sm bg-card-bg border-card-border">
|
|
<div className="border-b border-card-border">
|
|
<nav className="flex -mb-px">
|
|
{[
|
|
"overview",
|
|
"referrers",
|
|
"devices",
|
|
"locations",
|
|
"performance",
|
|
"qrCodes",
|
|
].map((tab) => (
|
|
<button
|
|
key={tab}
|
|
className={`py-4 px-6 font-medium text-sm border-b-2 ${
|
|
activeTab === tab
|
|
? "border-accent-blue text-accent-blue"
|
|
: "border-transparent text-text-secondary hover:text-foreground hover:border-card-border"
|
|
}`}
|
|
onClick={() =>
|
|
setActiveTab(
|
|
tab as
|
|
| "overview"
|
|
| "referrers"
|
|
| "devices"
|
|
| "locations"
|
|
| "performance"
|
|
| "qrCodes"
|
|
)
|
|
}
|
|
>
|
|
{tab ? tab.charAt(0).toUpperCase() + tab.slice(1) : ''}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{activeTab === "overview" && (
|
|
<div className="space-y-8">
|
|
{/* 日期范围选择器 */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-lg font-medium text-foreground">
|
|
Analytics Overview
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
<div className="relative">
|
|
<input
|
|
type="date"
|
|
value={dateRange.startDate}
|
|
onChange={(e) =>
|
|
updateDateRange(e.target.value, dateRange.endDate)
|
|
}
|
|
className="px-3 py-2 text-sm border rounded-md bg-card-bg border-card-border"
|
|
/>
|
|
</div>
|
|
<span className="self-center text-text-secondary">
|
|
to
|
|
</span>
|
|
<div className="relative">
|
|
<input
|
|
type="date"
|
|
value={dateRange.endDate}
|
|
onChange={(e) =>
|
|
updateDateRange(
|
|
dateRange.startDate,
|
|
e.target.value
|
|
)
|
|
}
|
|
className="px-3 py-2 text-sm border rounded-md bg-card-bg border-card-border"
|
|
min={dateRange.startDate}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 设备类型分布 */}
|
|
{overviewData && (
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
Device Types
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div className="flex flex-col items-center">
|
|
<div className="mb-2 text-sm font-medium text-text-secondary">
|
|
Mobile
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{overviewData.deviceTypes.mobile}
|
|
</div>
|
|
<div className="mt-1 text-xs text-text-secondary">
|
|
{overviewData.totalVisits
|
|
? Math.round(
|
|
(overviewData.deviceTypes.mobile /
|
|
overviewData.totalVisits) *
|
|
100
|
|
)
|
|
: 0}
|
|
%
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<div className="mb-2 text-sm font-medium text-text-secondary">
|
|
Desktop
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{overviewData.deviceTypes.desktop}
|
|
</div>
|
|
<div className="mt-1 text-xs text-text-secondary">
|
|
{overviewData.totalVisits
|
|
? Math.round(
|
|
(overviewData.deviceTypes.desktop /
|
|
overviewData.totalVisits) *
|
|
100
|
|
)
|
|
: 0}
|
|
%
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<div className="mb-2 text-sm font-medium text-text-secondary">
|
|
Tablet
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{overviewData.deviceTypes.tablet}
|
|
</div>
|
|
<div className="mt-1 text-xs text-text-secondary">
|
|
{overviewData.totalVisits
|
|
? Math.round(
|
|
(overviewData.deviceTypes.tablet /
|
|
overviewData.totalVisits) *
|
|
100
|
|
)
|
|
: 0}
|
|
%
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<div className="mb-2 text-sm font-medium text-text-secondary">
|
|
Other
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{overviewData.deviceTypes.other}
|
|
</div>
|
|
<div className="mt-1 text-xs text-text-secondary">
|
|
{overviewData.totalVisits
|
|
? Math.round(
|
|
(overviewData.deviceTypes.other /
|
|
overviewData.totalVisits) *
|
|
100
|
|
)
|
|
: 0}
|
|
%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 转化漏斗 */}
|
|
{funnelData && (
|
|
<div className="bg-card-bg border border-card-border rounded-lg p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-md font-medium text-foreground">
|
|
Conversion Funnel
|
|
</h3>
|
|
<div className="text-sm text-text-secondary">
|
|
Overall Conversion Rate:{" "}
|
|
<span className="font-medium text-accent-blue">
|
|
{(funnelData.conversionRate || 0).toFixed(2)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative pt-2">
|
|
{funnelData.steps.map((step) => (
|
|
<div key={step.name} className="mb-4">
|
|
<div className="flex justify-between items-center mb-1">
|
|
<span className="text-sm font-medium">
|
|
{step.name}
|
|
</span>
|
|
<span className="text-sm text-text-secondary">
|
|
{step.value} ({(step.percent || 0).toFixed(1)}
|
|
%)
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-card-border rounded-full h-2.5">
|
|
<div
|
|
className="bg-accent-blue h-2.5 rounded-full"
|
|
style={{ width: `${step.percent || 0}%` }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 访问趋势 */}
|
|
{trendsData && (
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="font-medium text-md text-foreground">
|
|
Visit Trends
|
|
</h3>
|
|
<div className="flex space-x-2">
|
|
{Object.values(TimeGranularity).map(
|
|
(granularity) => (
|
|
<button
|
|
key={granularity}
|
|
onClick={() =>
|
|
updateTimeGranularity(granularity)
|
|
}
|
|
className={`px-3 py-1 text-xs rounded-md ${
|
|
timeGranularity === granularity
|
|
? "bg-accent-blue text-white"
|
|
: "bg-card-bg text-text-secondary border border-card-border hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
{granularity.charAt(0).toUpperCase() +
|
|
granularity.slice(1)}
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-4">
|
|
<div className="flex justify-between text-sm text-text-secondary">
|
|
<div>
|
|
Total Visits:{" "}
|
|
<span className="font-medium text-foreground">
|
|
{trendsData.totals.visits}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Unique Visitors:{" "}
|
|
<span className="font-medium text-foreground">
|
|
{trendsData.totals.uniqueVisitors}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 简单趋势表格 */}
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-card-border">
|
|
<thead>
|
|
<tr>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Time
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Visits
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Unique Visitors
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y bg-card-bg divide-card-border">
|
|
{trendsData.trends.map((trend, i) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{trend.timestamp}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{trend.visits}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{trend.uniqueVisitors}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "performance" && performanceData && (
|
|
<div className="space-y-6">
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
Link Performance
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Total Clicks
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{performanceData.totalClicks}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Unique Visitors
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{performanceData.uniqueVisitors}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Bounce Rate
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{performanceData.bounceRate}%
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Conversion Rate
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{performanceData.conversionRate}%
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Avg. Time Spent
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{formatTime(performanceData.averageTimeSpent)}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Active Days
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{performanceData.activeDays}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Unique Referrers
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{performanceData.uniqueReferrers}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Last Click
|
|
</div>
|
|
<div className="text-lg font-medium text-foreground">
|
|
{performanceData.lastClickTime
|
|
? new Date(
|
|
performanceData.lastClickTime
|
|
).toLocaleString()
|
|
: "Never"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "referrers" && referrersData && (
|
|
<div className="space-y-6">
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
Popular Referrers
|
|
</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-card-border">
|
|
<thead>
|
|
<tr>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Source
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Visits
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Unique Visitors
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Conversion Rate
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Avg. Time Spent
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y bg-card-bg divide-card-border">
|
|
{referrersData.referrers.map(
|
|
(referrer: ReferrerItem, i: number) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{referrer.source}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{referrer.visitCount} ({referrer.percent}%)
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{referrer.uniqueVisitors}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{referrer.conversionRate}%
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{formatTime(referrer.averageTimeSpent)}
|
|
</td>
|
|
</tr>
|
|
)
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "devices" && deviceData && (
|
|
<div className="space-y-6">
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
Device Types
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{deviceData.deviceTypes.map(
|
|
(device: DeviceItem, i: number) => (
|
|
<div key={i} className="flex flex-col items-center">
|
|
<div className="mb-2 text-sm font-medium text-text-secondary">
|
|
{device.name}
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{device.count}
|
|
</div>
|
|
<div className="mt-1 text-xs text-text-secondary">
|
|
{device.percent}%
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
Device Brands
|
|
</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-card-border">
|
|
<thead>
|
|
<tr>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Brand
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Count
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Percentage
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y bg-card-bg divide-card-border">
|
|
{deviceData.deviceBrands.map(
|
|
(brand: DeviceItem, i: number) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{brand.name}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{brand.count}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{brand.percent}%
|
|
</td>
|
|
</tr>
|
|
)
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "locations" && platformData && (
|
|
<div className="space-y-6">
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
Platform Distribution
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
|
<div>
|
|
<h4 className="mb-3 text-sm font-medium text-text-secondary">
|
|
Operating Systems
|
|
</h4>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-card-border">
|
|
<thead>
|
|
<tr>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
OS
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Visits
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Percentage
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y bg-card-bg divide-card-border">
|
|
{platformData.platforms.map((platform, i) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{platform.name}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{platform.count}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{platform.percent}%
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="mb-3 text-sm font-medium text-text-secondary">
|
|
Browsers
|
|
</h4>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-card-border">
|
|
<thead>
|
|
<tr>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Browser
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Visits
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Percentage
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y bg-card-bg divide-card-border">
|
|
{platformData.browsers.map((browser, i) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{browser.name}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{browser.count}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{browser.percent}%
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "qrCodes" && qrCodeData && (
|
|
<div className="space-y-6">
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
QR Code Analysis
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Total Scans
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{qrCodeData.overview.totalScans}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Unique Scanners
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{qrCodeData.overview.uniqueScanners}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Conversion Rate
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{qrCodeData.overview.conversionRate}%
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="mb-1 text-sm font-medium text-text-secondary">
|
|
Avg. Time Spent
|
|
</div>
|
|
<div className="text-2xl font-bold text-foreground">
|
|
{formatTime(qrCodeData.overview.averageTimeSpent)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
Scan Locations
|
|
</h3>
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-card-border">
|
|
<thead>
|
|
<tr>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Location
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Scans
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Percentage
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y bg-card-bg divide-card-border">
|
|
{qrCodeData.locations.map((location, i) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{location.city}, {location.country}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{location.scanCount}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{location.percent}%
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 border rounded-lg bg-card-bg border-card-border">
|
|
<h3 className="mb-4 font-medium text-md text-foreground">
|
|
Scan Time Distribution
|
|
</h3>
|
|
<div className="grid grid-cols-1 gap-6">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-card-border">
|
|
<thead>
|
|
<tr>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Hour
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Scans
|
|
</th>
|
|
<th className="px-4 py-3 text-xs font-medium tracking-wider text-left uppercase text-text-secondary">
|
|
Percentage
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y bg-card-bg divide-card-border">
|
|
{qrCodeData.hourlyDistribution.map((hour) => (
|
|
<tr key={hour.hour}>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{hour.hour}:00 - {hour.hour}:59
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{hour.scanCount}
|
|
</td>
|
|
<td className="px-4 py-2 text-sm whitespace-nowrap text-foreground">
|
|
{hour.percent.toFixed(1)}%
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|