HI-VPN/hi-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

✨ feat: add traffic limit rules and user traffic statistics

Browse Source
This commit is contained in:
EUForest
2026-03-14 17:59:27 +08:00
parent eac7b27f60
commit f8fbf5529f
23 changed files with 823 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/public/assets/locales/en-US/components.json
+1
View File
@@ -76,6 +76,7 @@
"server": "Server Management",
"subscribe": "Subscribe",
"ticket": "Ticket Management",
"traffic": "Traffic Statistics",
"wallet": "Balance"
},
"pagination": {
apps/user/public/assets/locales/en-US/traffic.json
+16
View File
@@ -0,0 +1,16 @@
{
"title": "Traffic Statistics",
"selectSubscription": "Select Subscription",
"days7": "7 Days",
"days30": "30 Days",
"totalTraffic": "Total Traffic",
"uploadTraffic": "Upload Traffic",
"downloadTraffic": "Download Traffic",
"trafficTrend": "Traffic Trend",
"trafficRatio": "Upload/Download Ratio",
"upload": "Upload",
"download": "Download",
"noData": "No traffic data available",
"date": "Date",
"traffic": "Traffic (MB)"
}
apps/user/public/assets/locales/zh-CN/components.json
+1
View File
@@ -76,6 +76,7 @@
"server": "服务器管理",
"subscribe": "订阅管理",
"ticket": "工单管理",
"traffic": "流量统计",
"wallet": "余额管理"
},
"pagination": {
apps/user/public/assets/locales/zh-CN/traffic.json
+16
View File
@@ -0,0 +1,16 @@
{
"title": "流量统计",
"selectSubscription": "选择订阅",
"days7": "7 天",
"days30": "30 天",
"totalTraffic": "总流量",
"uploadTraffic": "上传流量",
"downloadTraffic": "下载流量",
"trafficTrend": "流量趋势",
"trafficRatio": "上传/下载占比",
"upload": "上传",
"download": "下载",
"noData": "暂无流量数据",
"date": "日期",
"traffic": "流量 (MB)"
}
apps/user/src/layout/navs.ts
+5
View File
@@ -40,6 +40,11 @@ export function useNavs() {
icon: "uil:shop",
title: t("menu.subscribe", "Subscribe"),
},
{
url: "/traffic",
icon: "uil:chart-line",
title: t("menu.traffic", "Traffic Statistics"),
},
],
},
{
apps/user/src/routeTree.gen.ts
+27
View File
@@ -28,6 +28,9 @@ const mainPurchasingIndexLazyRouteImport = createFileRoute(
'/(main)/purchasing/',
)()
const mainuserWalletLazyRouteImport = createFileRoute('/(main)/(user)/wallet')()
const mainuserTrafficLazyRouteImport = createFileRoute(
'/(main)/(user)/traffic',
)()
const mainuserTicketLazyRouteImport = createFileRoute('/(main)/(user)/ticket')()
const mainuserSubscribeLazyRouteImport = createFileRoute(
'/(main)/(user)/subscribe',
@@ -126,6 +129,15 @@ const mainuserWalletLazyRoute = mainuserWalletLazyRouteImport
getParentRoute: () => mainuserRouteLazyRoute,
} as any)
.lazy(() => import('./routes/(main)/(user)/wallet.lazy').then((d) => d.Route))
const mainuserTrafficLazyRoute = mainuserTrafficLazyRouteImport
.update({
id: '/traffic',
path: '/traffic',
getParentRoute: () => mainuserRouteLazyRoute,
} as any)
.lazy(() =>
import('./routes/(main)/(user)/traffic.lazy').then((d) => d.Route),
)
const mainuserTicketLazyRoute = mainuserTicketLazyRouteImport
.update({
id: '/ticket',
@@ -220,6 +232,7 @@ export interface FileRoutesByFullPath {
'/profile': typeof mainuserProfileLazyRoute
'/subscribe': typeof mainuserSubscribeLazyRoute
'/ticket': typeof mainuserTicketLazyRoute
'/traffic': typeof mainuserTrafficLazyRoute
'/wallet': typeof mainuserWalletLazyRoute
'/purchasing': typeof mainPurchasingIndexLazyRoute
'/purchasing/order': typeof mainPurchasingOrderIndexRoute
@@ -240,6 +253,7 @@ export interface FileRoutesByTo {
'/profile': typeof mainuserProfileLazyRoute
'/subscribe': typeof mainuserSubscribeLazyRoute
'/ticket': typeof mainuserTicketLazyRoute
'/traffic': typeof mainuserTrafficLazyRoute
'/wallet': typeof mainuserWalletLazyRoute
'/purchasing': typeof mainPurchasingIndexLazyRoute
'/purchasing/order': typeof mainPurchasingOrderIndexRoute
@@ -263,6 +277,7 @@ export interface FileRoutesById {
'/(main)/(user)/profile': typeof mainuserProfileLazyRoute
'/(main)/(user)/subscribe': typeof mainuserSubscribeLazyRoute
'/(main)/(user)/ticket': typeof mainuserTicketLazyRoute
'/(main)/(user)/traffic': typeof mainuserTrafficLazyRoute
'/(main)/(user)/wallet': typeof mainuserWalletLazyRoute
'/(main)/purchasing/': typeof mainPurchasingIndexLazyRoute
'/(main)/purchasing/order/': typeof mainPurchasingOrderIndexRoute
@@ -285,6 +300,7 @@ export interface FileRouteTypes {
| '/profile'
| '/subscribe'
| '/ticket'
| '/traffic'
| '/wallet'
| '/purchasing'
| '/purchasing/order'
@@ -305,6 +321,7 @@ export interface FileRouteTypes {
| '/profile'
| '/subscribe'
| '/ticket'
| '/traffic'
| '/wallet'
| '/purchasing'
| '/purchasing/order'
@@ -327,6 +344,7 @@ export interface FileRouteTypes {
| '/(main)/(user)/profile'
| '/(main)/(user)/subscribe'
| '/(main)/(user)/ticket'
| '/(main)/(user)/traffic'
| '/(main)/(user)/wallet'
| '/(main)/purchasing/'
| '/(main)/purchasing/order/'
@@ -418,6 +436,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof mainuserWalletLazyRouteImport
parentRoute: typeof mainuserRouteLazyRoute
}
'/(main)/(user)/traffic': {
id: '/(main)/(user)/traffic'
path: '/traffic'
fullPath: '/traffic'
preLoaderRoute: typeof mainuserTrafficLazyRouteImport
parentRoute: typeof mainuserRouteLazyRoute
}
'/(main)/(user)/ticket': {
id: '/(main)/(user)/ticket'
path: '/ticket'
@@ -493,6 +518,7 @@ interface mainuserRouteLazyRouteChildren {
mainuserProfileLazyRoute: typeof mainuserProfileLazyRoute
mainuserSubscribeLazyRoute: typeof mainuserSubscribeLazyRoute
mainuserTicketLazyRoute: typeof mainuserTicketLazyRoute
mainuserTrafficLazyRoute: typeof mainuserTrafficLazyRoute
mainuserWalletLazyRoute: typeof mainuserWalletLazyRoute
}
@@ -505,6 +531,7 @@ const mainuserRouteLazyRouteChildren: mainuserRouteLazyRouteChildren = {
mainuserProfileLazyRoute: mainuserProfileLazyRoute,
mainuserSubscribeLazyRoute: mainuserSubscribeLazyRoute,
mainuserTicketLazyRoute: mainuserTicketLazyRoute,
mainuserTrafficLazyRoute: mainuserTrafficLazyRoute,
mainuserWalletLazyRoute: mainuserWalletLazyRoute,
}
apps/user/src/routes/(main)/(user)/traffic.lazy.tsx
+6
View File
@@ -0,0 +1,6 @@
import { createLazyFileRoute } from "@tanstack/react-router";
import TrafficStatistics from "@/sections/user/traffic-statistics";
export const Route = createLazyFileRoute("/(main)/(user)/traffic")({
component: TrafficStatistics,
});
apps/user/src/sections/user/traffic-statistics/index.tsx
+132
View File
@@ -0,0 +1,132 @@
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@workspace/ui/components/select";
import { Tabs, TabsList, TabsTrigger } from "@workspace/ui/components/tabs";
import { Icon } from "@workspace/ui/composed/icon";
import { queryUserSubscribe } from "@workspace/ui/services/user/user";
import { getUserTrafficStats } from "@workspace/ui/services/user/traffic";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import TrafficTrendChart from "./traffic-trend-chart";
import TrafficRatioChart from "./traffic-ratio-chart";
import TrafficStatsCards from "./traffic-stats-cards";
export default function TrafficStatistics() {
const { t } = useTranslation("traffic");
const [days, setDays] = useState<7 | 30>(7);
const [selectedSubscribeId, setSelectedSubscribeId] = useState<string | null>(null);
// 查询用户订阅列表
const { data: userSubscribe = [] } = useQuery({
queryKey: ["queryUserSubscribe"],
queryFn: async () => {
const { data } = await queryUserSubscribe();
return data.data?.list || [];
},
});
// 使用 id_str 字段，避免 JavaScript 精度丢失
const activeSubscribeId = selectedSubscribeId || (userSubscribe[0]?.id_str || null);
// 查询流量统计数据
const { data: trafficStats, isLoading } = useQuery({
queryKey: ["getUserTrafficStats", activeSubscribeId, days],
queryFn: async () => {
if (!activeSubscribeId) return null;
const { data } = await getUserTrafficStats({
user_subscribe_id: activeSubscribeId,
days,
});
return data.data;
},
enabled: !!activeSubscribeId,
});
return (
<div className="flex min-h-[calc(100vh-64px-58px-32px-114px)] w-full flex-col gap-4">
{/* 标题和控制栏 */}
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<h2 className="flex items-center gap-1.5 font-semibold">
<Icon className="size-5" icon="uil:chart-line" />
{t("title", "Traffic Statistics")}
</h2>
<div className="flex flex-col gap-2 md:flex-row md:items-center">
{/* 订阅选择 */}
{userSubscribe.length > 1 && (
<Select
value={activeSubscribeId || undefined}
onValueChange={(value) => setSelectedSubscribeId(value)}
>
<SelectTrigger className="w-full md:w-[200px]">
<SelectValue placeholder={t("selectSubscription", "Select Subscription")} />
</SelectTrigger>
<SelectContent>
{userSubscribe.map((sub) => (
<SelectItem key={sub.id} value={sub.id_str}>
{sub.subscribe.name}
</SelectItem>
))}
</SelectContent>
</Select>
)}
{/* 时间范围切换 */}
<Tabs value={String(days)} onValueChange={(value) => setDays(Number(value) as 7 | 30)}>
<TabsList>
<TabsTrigger value="7">{t("days7", "7 Days")}</TabsTrigger>
<TabsTrigger value="30">{t("days30", "30 Days")}</TabsTrigger>
</TabsList>
</Tabs>
</div>
</div>
{/* 统计卡片 */}
{trafficStats && <TrafficStatsCards stats={trafficStats} />}
{/* 图表区域 */}
<div className="grid gap-4 md:grid-cols-2">
{/* 流量趋势图 */}
<Card>
<CardHeader>
<CardTitle className="text-base">{t("trafficTrend", "Traffic Trend")}</CardTitle>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="flex h-[300px] items-center justify-center">
<Icon className="size-8 animate-spin" icon="uil:spinner" />
</div>
) : trafficStats && trafficStats.list.length > 0 ? (
<TrafficTrendChart data={trafficStats.list} />
) : (
<div className="flex h-[300px] items-center justify-center text-muted-foreground">
{t("noData", "No traffic data available")}
</div>
)}
</CardContent>
</Card>
{/* 流量占比图 */}
<Card>
<CardHeader>
<CardTitle className="text-base">{t("trafficRatio", "Upload/Download Ratio")}</CardTitle>
</CardHeader>
<CardContent>
{isLoading ? (
<div className="flex h-[300px] items-center justify-center">
<Icon className="size-8 animate-spin" icon="uil:spinner" />
</div>
) : trafficStats && (trafficStats.total_upload > 0 || trafficStats.total_download > 0) ? (
<TrafficRatioChart
upload={trafficStats.total_upload}
download={trafficStats.total_download}
/>
) : (
<div className="flex h-[300px] items-center justify-center text-muted-foreground">
{t("noData", "No traffic data available")}
</div>
)}
</CardContent>
</Card>
</div>
</div>
);
}
apps/user/src/sections/user/traffic-statistics/traffic-ratio-chart.tsx
+55
View File
@@ -0,0 +1,55 @@
import { useTranslation } from "react-i18next";
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts";
interface TrafficRatioChartProps {
upload: number;
download: number;
}
export default function TrafficRatioChart({ upload, download }: TrafficRatioChartProps) {
const { t } = useTranslation("traffic");
const data = [
{ name: t("upload", "Upload"), value: upload },
{ name: t("download", "Download"), value: download },
];
const COLORS = ["#10b981", "#3b82f6"];
// 格式化流量显示
const formatTraffic = (value: number) => {
if (value >= 1024 * 1024 * 1024) {
return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GB`;
}
if (value >= 1024 * 1024) {
return `${(value / (1024 * 1024)).toFixed(2)} MB`;
}
if (value >= 1024) {
return `${(value / 1024).toFixed(2)} KB`;
}
return `${value} B`;
};
return (
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
labelLine={false}
label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(1)}%`}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((_, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip formatter={(value: number) => formatTraffic(value)} />
<Legend />
</PieChart>
</ResponsiveContainer>
);
}
apps/user/src/sections/user/traffic-statistics/traffic-stats-cards.tsx
+52
View File
@@ -0,0 +1,52 @@
import { Card, CardContent } from "@workspace/ui/components/card";
import { Icon } from "@workspace/ui/composed/icon";
import type { GetUserTrafficStatsResponse } from "@workspace/ui/services/user/traffic";
import { useTranslation } from "react-i18next";
import { Display } from "@/components/display";
interface TrafficStatsCardsProps {
stats: GetUserTrafficStatsResponse;
}
export default function TrafficStatsCards({ stats }: TrafficStatsCardsProps) {
const { t } = useTranslation("traffic");
const cards = [
{
title: t("totalTraffic", "Total Traffic"),
value: stats.total_traffic,
icon: "uil:chart-line",
color: "text-blue-500",
},
{
title: t("uploadTraffic", "Upload Traffic"),
value: stats.total_upload,
icon: "uil:upload",
color: "text-green-500",
},
{
title: t("downloadTraffic", "Download Traffic"),
value: stats.total_download,
icon: "uil:download",
color: "text-purple-500",
},
];
return (
<div className="grid gap-4 md:grid-cols-3">
{cards.map((card) => (
<Card key={card.title}>
<CardContent className="flex items-center justify-between p-6">
<div className="flex flex-col gap-1">
<span className="text-muted-foreground text-sm">{card.title}</span>
<span className="font-bold text-2xl">
<Display type="traffic" value={card.value} />
</span>
</div>
<Icon className={`size-10 ${card.color}`} icon={card.icon} />
</CardContent>
</Card>
))}
</div>
);
}
apps/user/src/sections/user/traffic-statistics/traffic-trend-chart.tsx
+81
View File
@@ -0,0 +1,81 @@
import type { GetUserTrafficStatsResponse } from "@workspace/ui/services/user/traffic";
import { format } from "date-fns";
import { useTranslation } from "react-i18next";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from "recharts";
interface TrafficTrendChartProps {
data: GetUserTrafficStatsResponse["list"];
}
export default function TrafficTrendChart({ data }: TrafficTrendChartProps) {
const { t } = useTranslation("traffic");
// 转换数据格式，将字节转换为 MB（保持为数字）
const chartData = data.map((item) => ({
date: format(new Date(item.date), "MM-dd"),
upload: Number((item.upload / (1024 * 1024)).toFixed(2)),
download: Number((item.download / (1024 * 1024)).toFixed(2)),
}));
// 格式化流量显示
const formatTraffic = (value: number | string) => {
const numValue = typeof value === "string" ? parseFloat(value) : value;
if (numValue >= 1024) {
return `${(numValue / 1024).toFixed(2)} GB`;
}
return `${numValue.toFixed(2)} MB`;
};
return (
<ResponsiveContainer width="100%" height={300}>
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
dataKey="date"
label={{ value: t("date", "Date"), position: "insideBottom", offset: -5 }}
/>
<YAxis
label={{ value: t("traffic", "Traffic (MB)"), angle: -90, position: "insideLeft" }}
/>
<Tooltip
formatter={(value: number | string) => formatTraffic(value)}
labelStyle={{ color: "#000" }}
/>
<Legend
verticalAlign="bottom"
height={36}
wrapperStyle={{
position: "absolute",
width: "444px",
height: "36px",
left: "5px",
bottom: "-5px"
}}
/>
<Line
type="monotone"
dataKey="upload"
stroke="#10b981"
name={t("upload", "Upload")}
strokeWidth={2}
/>
<Line
type="monotone"
dataKey="download"
stroke="#3b82f6"
name={t("download", "Download")}
strokeWidth={2}
/>
</LineChart>
</ResponsiveContainer>
);
}