修复(#117): 补齐用户订阅限速配置 UI

apps/admin/src/sections/user/user-subscription/subscription-detail.tsx

@@ -7,6 +7,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@workspace/ui/components/sheet";
+import { Skeleton } from "@workspace/ui/components/skeleton";
 import { Switch } from "@workspace/ui/components/switch";
 import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
 import { ProTable } from "@workspace/ui/composed/pro-table/pro-table";
@@ -16,7 +17,7 @@ import {
   kickOfflineByUserDevice,
 } from "@workspace/ui/services/admin/user";
 import { deviceIdToHash } from "@workspace/ui/utils/device";
-import { AlertTriangle, Gauge } from "lucide-react";
+import { AlertCircle, AlertTriangle, Gauge } from "lucide-react";
 import { type ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -26,20 +27,81 @@ import { formatDate } from "@/utils/common";
 function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
   const { t } = useTranslation("user");
   const [detail, setDetail] = useState<API.UserSubscribeDetail | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
 
   useEffect(() => {
-    getUserSubscribeById({ id: subscriptionId }).then(({ data }) => {
-      if (data.data) setDetail(data.data);
-    });
+    let ignore = false;
+
+    setIsLoading(true);
+    setIsError(false);
+    getUserSubscribeById({ id: subscriptionId })
+      .then(({ data }) => {
+        if (!ignore) setDetail(data.data || null);
+      })
+      .catch(() => {
+        if (!ignore) {
+          setDetail(null);
+          setIsError(true);
+        }
+      })
+      .finally(() => {
+        if (!ignore) setIsLoading(false);
+      });
+
+    return () => {
+      ignore = true;
+    };
   }, [subscriptionId]);
 
-  if (!detail || detail.status !== 1) return null;
+  if (isLoading) {
+    return (
+      <div className="mb-4 rounded-lg border bg-muted/30 p-3">
+        <Skeleton className="mb-3 h-5 w-40" />
+        <div className="grid grid-cols-2 gap-3">
+          <Skeleton className="h-16" />
+          <Skeleton className="h-16" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="mb-4 flex items-start gap-3 rounded-lg border border-destructive/40 bg-destructive/5 p-3 text-destructive text-sm">
+        <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+        <span>
+          {t("subscriptionDetailLoadFailed", "Failed to load speed settings.")}
+        </span>
+      </div>
+    );
+  }
+
+  if (!detail) {
+    return (
+      <div className="mb-4 rounded-lg border bg-muted/30 p-3 text-muted-foreground text-sm">
+        {t("subscriptionDetailEmpty", "No subscription details found.")}
+      </div>
+    );
+  }
+
+  if (detail.status !== 1) return null;
 
   const baseSpeed = detail.subscribe?.speed_limit ?? 0;
+  const userSpeed = detail.speed_limit ?? 0;
   const effectiveSpeed = detail.effective_speed ?? 0;
   const isThrottled = detail.is_throttled;
+  const rules = detail.traffic_limit || [];
+  const hasLimitConfig =
+    baseSpeed > 0 || userSpeed > 0 || effectiveSpeed > 0 || rules.length > 0;
 
-  if (baseSpeed === 0 && !isThrottled) return null;
+  if (!(hasLimitConfig || isThrottled)) {
+    return (
+      <div className="mb-4 rounded-lg border bg-muted/30 p-3 text-muted-foreground text-sm">
+        {t("speedLimitEmpty", "No user-level speed limit rules configured.")}
+      </div>
+    );
+  }
 
   return (
     <div
@@ -54,7 +116,7 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
       ) : (
         <Gauge className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
       )}
-      <div className="space-y-1">
+      <div className="min-w-0 flex-1 space-y-3">
         <div className="flex flex-wrap items-center gap-2 font-medium">
           {isThrottled ? (
             <>
@@ -64,6 +126,7 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
               </Badge>
               {baseSpeed > 0 && (
                 <span className="text-muted-foreground text-xs line-through">
+                  {t("subscriptionDefault", "Subscription Default")}:{" "}
                   {baseSpeed} Mbps
                 </span>
               )}
@@ -81,6 +144,20 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
             </>
           )}
         </div>
+        <div className="grid gap-2 sm:grid-cols-3">
+          <SpeedMetric
+            label={t("subscriptionDefault", "Subscription Default")}
+            value={baseSpeed}
+          />
+          <SpeedMetric
+            label={t("userOverride", "User Override")}
+            value={userSpeed}
+          />
+          <SpeedMetric
+            label={t("effectiveSpeed", "Effective Speed")}
+            value={effectiveSpeed}
+          />
+        </div>
         {isThrottled && detail.throttle_rule && (
           <p className="text-muted-foreground text-xs">
             {detail.throttle_rule}
@@ -92,6 +169,46 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
             {formatDate(detail.throttle_end)}
           </p>
         )}
+        {rules.length > 0 && (
+          <div className="space-y-2">
+            <p className="font-medium text-foreground text-xs">
+              {t("trafficLimitRules", "Traffic Limit Rules")}
+            </p>
+            <div className="grid gap-2">
+              {rules.map((rule, index) => (
+                <div
+                  className="rounded-md border bg-background/60 px-3 py-2 text-muted-foreground text-xs"
+                  key={`${rule.stat_type}-${rule.stat_value}-${index}`}
+                >
+                  {t("trafficLimitRuleSummary", {
+                    defaultValue:
+                      "{{traffic}} GB in {{value}} {{type}} -> {{speed}} Mbps",
+                    traffic: rule.traffic_usage,
+                    value: rule.stat_value,
+                    type:
+                      rule.stat_type === "hour"
+                        ? t("hour", "Hour")
+                        : t("day", "Day"),
+                    speed: rule.speed_limit,
+                  })}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function SpeedMetric({ label, value }: { label: string; value: number }) {
+  const { t } = useTranslation("user");
+
+  return (
+    <div className="rounded-md border bg-background/60 p-2">
+      <div className="text-muted-foreground text-xs">{label}</div>
+      <div className="font-medium text-foreground">
+        {value > 0 ? `${value} Mbps` : t("unlimited", "Unlimited")}
       </div>
     </div>
   );
@@ -155,12 +272,7 @@ export function SubscriptionDetail({
                 accessorKey: "enabled",
                 header: t("enable", "Enable"),
                 cell: ({ row }) => (
-                  <Switch
-                    checked={row.getValue("enabled")}
-                    onChange={(checked) => {
-                      console.log("Switch:", checked);
-                    }}
-                  />
+                  <Switch checked={row.getValue("enabled")} disabled />
                 ),
               },
               { accessorKey: "id", header: "ID" },