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

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

@@ -30,13 +30,30 @@ import { Display } from "@/components/display";
 import { useGlobalStore } from "@/stores/global";
 import { formatDate } from "@/utils/common";
 import { SubscriptionDetail } from "./subscription-detail";
-import { SubscriptionForm } from "./subscription-form";
+import {
+  SubscriptionForm,
+  type SubscriptionFormValues,
+} from "./subscription-form";
 
 interface SharedInfo {
   ownerUserId: number;
   familyId: number;
 }
 
+function toUserSubscribePayload(values: SubscriptionFormValues) {
+  return {
+    ...values,
+    expired_at: values.expired_at || 0,
+    subscribe_id: values.subscribe_id || 0,
+    traffic: values.traffic || 0,
+    upload: values.upload || 0,
+    download: values.download || 0,
+    speed_limit: values.speed_limit || 0,
+    device_limit: values.device_limit || 0,
+    traffic_limit: values.traffic_limit || [],
+  };
+}
+
 export default function UserSubscription({ userId }: { userId: number }) {
   const { t } = useTranslation("user");
   const [loading, setLoading] = useState(false);
@@ -166,7 +183,7 @@ export default function UserSubscription({ userId }: { userId: number }) {
                       await updateUserSubscribe({
                         user_id: Number(userId),
                         user_subscribe_id: row.id,
-                        ...values,
+                        ...toUserSubscribePayload(values),
                       });
                       toast.success(t("updateSuccess", "Updated successfully"));
                       ref.current?.refresh();
@@ -296,15 +313,39 @@ export default function UserSubscription({ userId }: { userId: number }) {
             accessorKey: "speed_limit",
             header: t("speedLimit", "Speed Limit"),
             cell: ({ row }) => {
-              const speed = row.original?.subscribe?.speed_limit;
-              return <Display type="trafficSpeed" value={speed} />;
+              const userSpeed = row.original.speed_limit ?? 0;
+              const effectiveSpeed = row.original.effective_speed ?? 0;
+              const planSpeed = row.original.subscribe?.speed_limit ?? 0;
+              const speed = effectiveSpeed || userSpeed || planSpeed;
+              const source =
+                userSpeed > 0
+                  ? t("userOverride", "User Override")
+                  : t("subscriptionDefault", "Subscription Default");
+
+              return (
+                <div className="flex flex-col gap-1">
+                  <div className="flex items-center gap-2">
+                    <Display type="trafficSpeed" value={speed} />
+                    {row.original.is_throttled && (
+                      <Badge variant="destructive">
+                        {t("throttled", "Throttled")}
+                      </Badge>
+                    )}
+                  </div>
+                  <span className="text-muted-foreground text-xs">
+                    {source}
+                  </span>
+                </div>
+              );
             },
           },
           {
             accessorKey: "device_limit",
             header: t("deviceLimit", "Device Limit"),
             cell: ({ row }) => {
-              const limit = row.original?.subscribe?.device_limit;
+              const limit =
+                row.original.device_limit ||
+                row.original?.subscribe?.device_limit;
               return <Display type="number" unlimited value={limit} />;
             },
           },
@@ -352,7 +393,7 @@ export default function UserSubscription({ userId }: { userId: number }) {
                 setLoading(true);
                 await createUserSubscribe({
                   user_id: Number(userId),
-                  ...values,
+                  ...toUserSubscribePayload(values),
                 });
                 toast.success(t("createSuccess", "Created successfully"));
                 ref.current?.refresh();

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" },

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

@@ -3,6 +3,7 @@ import { Button } from "@workspace/ui/components/button";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -19,10 +20,11 @@ import {
 } from "@workspace/ui/components/sheet";
 import { Combobox } from "@workspace/ui/composed/combobox";
 import { DatePicker } from "@workspace/ui/composed/date-picker";
+import { ArrayInput } from "@workspace/ui/composed/dynamic-inputs";
 import { EnhancedInput } from "@workspace/ui/composed/enhanced-input";
 import { Icon } from "@workspace/ui/composed/icon";
 import { unitConversion } from "@workspace/ui/utils/unit-conversions";
-import { type ReactNode, useState } from "react";
+import { type KeyboardEvent, type ReactNode, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
@@ -33,18 +35,50 @@ interface Props {
   title: string;
   loading?: boolean;
   initialData?: API.UserSubscribe;
-  onSubmit: (values: any) => Promise<boolean>;
+  onSubmit: (values: SubscriptionFormValues) => Promise<boolean>;
 }
 
+type SubscriptionTrafficLimitRule = API.UserSubscribeTrafficLimitRule;
+
+const defaultLimitRule: SubscriptionTrafficLimitRule = {
+  stat_type: "day",
+  stat_value: 1,
+  traffic_usage: 0,
+  speed_limit: 0,
+};
+
 const formSchema = z.object({
   subscribe_id: z.number().optional(),
-  traffic: z.number().optional(),
-  speed_limit: z.number().optional(),
-  device_limit: z.number().optional(),
+  traffic: z.number().min(0).optional(),
+  speed_limit: z.number().min(0).optional(),
+  device_limit: z.number().min(0).optional(),
   expired_at: z.number().nullish().optional(),
-  upload: z.number().optional(),
-  download: z.number().optional(),
+  upload: z.number().min(0).optional(),
+  download: z.number().min(0).optional(),
   id: z.number().optional(),
+  traffic_limit: z
+    .array(
+      z.object({
+        stat_type: z.string(),
+        stat_value: z.number().int().min(1),
+        traffic_usage: z.number().min(0),
+        speed_limit: z.number().min(0),
+      })
+    )
+    .optional(),
+});
+
+type SubscriptionFormValues = z.infer<typeof formSchema>;
+
+export type { SubscriptionFormValues };
+
+const normalizeLimitRule = (
+  item: SubscriptionTrafficLimitRule
+): SubscriptionTrafficLimitRule => ({
+  stat_type: item.stat_type || "day",
+  stat_value: Math.max(1, Math.floor(Number(item.stat_value) || 1)),
+  traffic_usage: Math.max(0, Number(item.traffic_usage) || 0),
+  speed_limit: Math.max(0, Number(item.speed_limit) || 0),
 });
 
 export function SubscriptionForm({
@@ -57,11 +91,14 @@ export function SubscriptionForm({
   const { t } = useTranslation("user");
   const [open, setOpen] = useState(false);
 
-  const form = useForm({
+  const form = useForm<SubscriptionFormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       subscribe_id: initialData?.subscribe_id || 0,
       traffic: initialData?.traffic || 0,
+      speed_limit: initialData?.speed_limit || 0,
+      device_limit: initialData?.device_limit || 0,
+      traffic_limit: initialData?.traffic_limit || [],
       upload: initialData?.upload || 0,
       download: initialData?.download || 0,
       expired_at: initialData?.expire_time || 0,
@@ -69,7 +106,7 @@ export function SubscriptionForm({
     },
   });
 
-  const handleSubmit = async (values: any) => {
+  const handleSubmit = async (values: SubscriptionFormValues) => {
     const success = await onSubmit(values);
     if (success) {
       setOpen(false);
@@ -135,6 +172,7 @@ export function SubscriptionForm({
                       </FormLabel>
                       <FormControl>
                         <EnhancedInput
+                          min={0}
                           placeholder={t("unlimited", "Unlimited")}
                           type="number"
                           {...field}
@@ -154,6 +192,56 @@ export function SubscriptionForm({
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="speed_limit"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("speedLimit", "Speed Limit")}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          min={0}
+                          placeholder={t("unlimited", "Unlimited")}
+                          type="number"
+                          {...field}
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value as number);
+                          }}
+                          suffix="Mbps"
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t(
+                          "userSpeedLimitDescription",
+                          "Set to 0 to use the subscription default speed limit."
+                        )}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="device_limit"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("deviceLimit", "Device Limit")}</FormLabel>
+                      <FormControl>
+                        <EnhancedInput
+                          min={0}
+                          placeholder={t("unlimited", "Unlimited")}
+                          step={1}
+                          type="number"
+                          {...field}
+                          onValueChange={(value) => {
+                            form.setValue(field.name, value as number);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
                 <FormField
                   control={form.control}
                   name="upload"
@@ -164,6 +252,7 @@ export function SubscriptionForm({
                       </FormLabel>
                       <FormControl>
                         <EnhancedInput
+                          min={0}
                           placeholder="0"
                           type="number"
                           {...field}
@@ -193,6 +282,7 @@ export function SubscriptionForm({
                       </FormLabel>
                       <FormControl>
                         <EnhancedInput
+                          min={0}
                           placeholder="0"
                           type="number"
                           {...field}
@@ -212,6 +302,119 @@ export function SubscriptionForm({
                     </FormItem>
                   )}
                 />
+                <FormField
+                  control={form.control}
+                  name="traffic_limit"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t("trafficLimitRules", "Traffic Limit Rules")}
+                      </FormLabel>
+                      <FormControl>
+                        <ArrayInput<SubscriptionTrafficLimitRule>
+                          className="grid grid-cols-2 gap-3 lg:grid-cols-4"
+                          fields={[
+                            {
+                              name: "stat_type",
+                              type: "select",
+                              placeholder: t("statType", "Statistics Type"),
+                              value: "day",
+                              options: [
+                                {
+                                  label: t("statTypeHour", "Hour"),
+                                  value: "hour",
+                                },
+                                {
+                                  label: t("statTypeDay", "Day"),
+                                  value: "day",
+                                },
+                              ],
+                            },
+                            {
+                              name: "stat_value",
+                              type: "number",
+                              placeholder: t("statValue", "Time Value"),
+                              min: 1,
+                              step: 1,
+                              onKeyDown: (
+                                e: KeyboardEvent<HTMLInputElement>
+                              ) => {
+                                if (e.key === "." || e.key === ",") {
+                                  e.preventDefault();
+                                }
+                              },
+                              formatOutput: (value: string | number) => {
+                                const num = Number(value);
+                                return String(
+                                  Number.isNaN(num) ? 1 : Math.floor(num)
+                                );
+                              },
+                            },
+                            {
+                              name: "traffic_usage",
+                              type: "number",
+                              placeholder: t(
+                                "trafficUsage",
+                                "Traffic Usage (GB)"
+                              ),
+                              min: 0,
+                              onKeyDown: (
+                                e: KeyboardEvent<HTMLInputElement>
+                              ) => {
+                                if (e.key === "." || e.key === ",") {
+                                  e.preventDefault();
+                                }
+                              },
+                              formatOutput: (value: string | number) => {
+                                const num = Number(value);
+                                return String(
+                                  Number.isNaN(num) ? 0 : Math.floor(num)
+                                );
+                              },
+                            },
+                            {
+                              name: "speed_limit",
+                              type: "number",
+                              placeholder: t(
+                                "speedLimitMbps",
+                                "Speed Limit (Mbps)"
+                              ),
+                              min: 0,
+                              onKeyDown: (
+                                e: KeyboardEvent<HTMLInputElement>
+                              ) => {
+                                if (e.key === "." || e.key === ",") {
+                                  e.preventDefault();
+                                }
+                              },
+                              formatOutput: (value: string | number) => {
+                                const num = Number(value);
+                                return String(
+                                  Number.isNaN(num) ? 0 : Math.floor(num)
+                                );
+                              },
+                            },
+                          ]}
+                          onChange={(items) => {
+                            field.onChange(items.map(normalizeLimitRule));
+                          }}
+                          value={
+                            field.value && field.value.length > 0
+                              ? field.value
+                              : [defaultLimitRule]
+                          }
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        {t(
+                          "trafficLimitDescription",
+                          "Limit speed when usage reaches the configured amount in the selected time window."
+                        )}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
                 <FormField
                   control={form.control}
                   name="expired_at"

packages/ui/src/services/admin/typings.d.ts

@@ -398,6 +398,9 @@ declare namespace API {
     expired_at: number;
     traffic: number;
     subscribe_id: number;
+    speed_limit?: number;
+    device_limit?: number;
+    traffic_limit?: UserSubscribeTrafficLimitRule[];
   };
 
   type CurrencyConfig = {
@@ -2428,12 +2431,16 @@ declare namespace API {
   };
 
   type UpdateUserSubscribeRequest = {
+    user_id?: number;
     user_subscribe_id: number;
     subscribe_id: number;
     traffic: number;
     expired_at: number;
     upload: number;
     download: number;
+    speed_limit?: number;
+    device_limit?: number;
+    traffic_limit?: UserSubscribeTrafficLimitRule[];
   };
 
   type User = {
@@ -2524,6 +2531,12 @@ declare namespace API {
     traffic: number;
     download: number;
     upload: number;
+    speed_limit?: number;
+    device_limit?: number;
+    effective_speed?: number;
+    is_throttled?: boolean;
+    throttle_rule?: string;
+    traffic_limit?: UserSubscribeTrafficLimitRule[];
     token: string;
     status: number;
     short: string;
@@ -2533,6 +2546,13 @@ declare namespace API {
     updated_at: number;
   };
 
+  type UserSubscribeTrafficLimitRule = {
+    stat_type: string;
+    stat_value: number;
+    traffic_usage: number;
+    speed_limit: number;
+  };
+
   type UserSubscribeDetail = {
     id: number;
     user_id: number;
@@ -2546,6 +2566,9 @@ declare namespace API {
     traffic: number;
     download: number;
     upload: number;
+    speed_limit?: number;
+    device_limit?: number;
+    traffic_limit?: UserSubscribeTrafficLimitRule[];
     token: string;
     status: number;
     effective_speed: number;