feat(providers): add proxy provider traffic display support

Author: keiko233

frontend/interface/service/types.ts

@@ -188,6 +188,12 @@ export interface ProviderItem {
   proxies: Clash.Proxy[];
   updatedAt: string;
   vehicleType: string;
+  subscriptionInfo?: {
+    Upload?: number;
+    Download?: number;
+    Total?: number;
+    Expire?: number;
+  };
 }
 
 export interface Traffic {

frontend/nyanpasu/src/components/providers/proxies-provider-traffic.tsx

@@ -0,0 +1,45 @@
+import parseTraffic from "@/utils/parse-traffic";
+import { LinearProgress, Tooltip } from "@mui/material";
+import { ProxiesProviderProps } from "./proxies-provider";
+
+export const ProxiesProviderTraffic = ({ provider }: ProxiesProviderProps) => {
+  const calc = () => {
+    let progress = 0;
+    let total = 0;
+    let used = 0;
+
+    if (provider.subscriptionInfo) {
+      const {
+        Download: download,
+        Upload: upload,
+        Total: t,
+      } = provider.subscriptionInfo;
+
+      total = t ?? 0;
+
+      used = (download ?? 0) + (upload ?? 0);
+
+      progress = (used / (total ?? 0)) * 100;
+    }
+
+    return { progress, total, used };
+  };
+
+  const { progress, total, used } = calc();
+
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <div className="w-full">
+        <LinearProgress variant="determinate" value={progress} />
+      </div>
+
+      <Tooltip title={`${parseTraffic(used)} / ${parseTraffic(total)}`}>
+        <div className="text-sm font-bold">
+          {((used / total) * 100).toFixed(2)}%
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ProxiesProviderTraffic;

frontend/nyanpasu/src/components/providers/proxies-provider.tsx

@@ -1,12 +1,14 @@
 import { useMessage } from "@/hooks/use-notification";
+import parseTraffic from "@/utils/parse-traffic";
 import { Refresh } from "@mui/icons-material";
 import LoadingButton from "@mui/lab/LoadingButton";
-import { Chip, Paper } from "@mui/material";
+import { Chip, LinearProgress, Paper, Tooltip } from "@mui/material";
 import { ProviderItem, useClashCore } from "@nyanpasu/interface";
 import { useLockFn } from "ahooks";
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import ProxiesProviderTraffic from "./proxies-provider-traffic";
 
 export interface ProxiesProviderProps {
   provider: ProviderItem;
@@ -36,7 +38,7 @@ export const ProxiesProvider = ({ provider }: ProxiesProviderProps) => {
 
   return (
     <Paper
-      className="p-5 flex flex-col gap-2"
+      className="p-5 flex flex-col gap-2 justify-between h-full"
       sx={{
         borderRadius: 6,
       }}
@@ -57,6 +59,10 @@ export const ProxiesProvider = ({ provider }: ProxiesProviderProps) => {
         </div>
       </div>
 
+      {provider.subscriptionInfo && (
+        <ProxiesProviderTraffic provider={provider} />
+      )}
+
       <div className="flex items-center justify-between">
         <Chip
           className="font-bold truncate"