修复(#122): 补齐促销价档位提交

apps/admin/public/assets/locales/en-US/promo.json

@@ -22,10 +22,13 @@
     "inactiveMonthsPlaceholder": "Months without purchase",
     "name": "Name",
     "namePlaceholder": "Rule name",
+    "noDiscounts": "This subscribe has no discount quantities and cannot be configured.",
+    "promoPriceLessThanOriginalPrice": "Promo price must be lower than original price",
     "promoPriceLessThanUnitPrice": "Promo price must be lower than unit price",
     "selectEndTime": "Select time",
     "selectRule": "Select rule",
     "selectStartTime": "Select time",
+    "selectQuantity": "Select discount quantity",
     "selectSubscribe": "Select subscribe",
     "type": "Rule Type",
     "windowHours": "Window Hours",
@@ -38,10 +41,12 @@
   "name": "Name",
   "no": "No",
   "orderNo": "Order No.",
+  "originalPriceHint": "Original price",
   "params": "Params",
   "prices": "Prices",
   "priority": "Priority",
   "promoPrice": "Promo Price",
+  "quantity": "Quantity",
   "rule": "Rule",
   "ruleDetail": "Rule Detail",
   "rules": "Rules",

apps/admin/public/assets/locales/zh-CN/promo.json

@@ -22,10 +22,13 @@
     "inactiveMonthsPlaceholder": "未购买的月数",
     "name": "名称",
     "namePlaceholder": "规则名称",
+    "noDiscounts": "该订阅没有 discount 档位，不能配置促销价。",
+    "promoPriceLessThanOriginalPrice": "促销价必须低于原价",
     "promoPriceLessThanUnitPrice": "促销价必须低于原价",
     "selectEndTime": "选择时间",
     "selectRule": "选择规则",
     "selectStartTime": "选择时间",
+    "selectQuantity": "选择 discount 档位",
     "selectSubscribe": "选择订阅",
     "type": "规则类型",
     "windowHours": "新用户窗口小时数",
@@ -38,10 +41,12 @@
   "name": "名称",
   "no": "否",
   "orderNo": "订单号",
+  "originalPriceHint": "原价",
   "params": "参数",
   "prices": "商品促销价",
   "priority": "优先级",
   "promoPrice": "促销价",
+  "quantity": "档位",
   "rule": "规则",
   "ruleDetail": "规则详情",
   "rules": "促销规则",

apps/admin/src/sections/promo/index.tsx

@@ -46,7 +46,7 @@ type RuleFilters = {
 };
 
 type PriceFilters = {
-  rule_id?: string;
+  promo_rule_id?: string;
   subscribe_id?: string;
 };
 
@@ -301,12 +301,13 @@ export default function PromoPage() {
             }}
             columns={[
               {
-                accessorKey: "rule_id",
+                accessorKey: "promo_rule_id",
                 header: t("rule", "Rule"),
                 cell: ({ row }) =>
-                  row.original.rule_id
-                    ? rules.find((rule) => rule.id === row.original.rule_id)
-                        ?.name || `#${row.original.rule_id}`
+                  row.original.promo_rule_id
+                    ? rules.find(
+                        (rule) => rule.id === row.original.promo_rule_id
+                      )?.name || `#${row.original.promo_rule_id}`
                     : "--",
               },
               {
@@ -316,6 +317,11 @@ export default function PromoPage() {
                   row.original.subscribe_name ||
                   getSubscribeName(row.original.subscribe_id),
               },
+              {
+                accessorKey: "quantity",
+                header: t("quantity", "Quantity"),
+                cell: ({ row }) => row.original.quantity || "--",
+              },
               {
                 accessorKey: "unit_price",
                 header: t("unitPrice", "Unit Price"),
@@ -361,7 +367,7 @@ export default function PromoPage() {
             }}
             params={[
               {
-                key: "rule_id",
+                key: "promo_rule_id",
                 placeholder: t("rule", "Rule"),
                 options: rules.map((rule) => ({
                   label: rule.name,
@@ -382,7 +388,7 @@ export default function PromoPage() {
             request={async (pagination, filters) => {
               const { data } = await getPromoPriceList({
                 ...pagination,
-                rule_id: parseOptionalNumber(filters.rule_id),
+                promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
                 subscribe_id: parseOptionalNumber(filters.subscribe_id),
               });
               return {
@@ -398,13 +404,13 @@ export default function PromoPage() {
             action={usageRef}
             columns={[
               {
-                accessorKey: "rule_id",
+                accessorKey: "promo_rule_id",
                 header: t("rule", "Rule"),
                 cell: ({ row }) =>
                   row.original.rule_name ||
-                  rules.find((rule) => rule.id === row.original.rule_id)
+                  rules.find((rule) => rule.id === row.original.promo_rule_id)
                     ?.name ||
-                  `#${row.original.rule_id}`,
+                  `#${row.original.promo_rule_id}`,
               },
               {
                 accessorKey: "user_id",
@@ -418,6 +424,11 @@ export default function PromoPage() {
                   row.original.subscribe_name ||
                   getSubscribeName(row.original.subscribe_id),
               },
+              {
+                accessorKey: "quantity",
+                header: t("quantity", "Quantity"),
+                cell: ({ row }) => row.original.quantity || "--",
+              },
               {
                 accessorKey: "order_no",
                 header: t("orderNo", "Order No."),
@@ -447,7 +458,7 @@ export default function PromoPage() {
             }
             params={[
               {
-                key: "rule_id",
+                key: "promo_rule_id",
                 placeholder: t("rule", "Rule"),
                 options: rules.map((rule) => ({
                   label: rule.name,
@@ -470,7 +481,7 @@ export default function PromoPage() {
             request={async (pagination, filters) => {
               const { data } = await getPromoUsageList({
                 ...pagination,
-                rule_id: parseOptionalNumber(filters.rule_id),
+                promo_rule_id: parseOptionalNumber(filters.promo_rule_id),
                 subscribe_id: parseOptionalNumber(filters.subscribe_id),
                 user_id: parseOptionalNumber(filters.user_id),
                 order_no: filters.order_no?.trim() || undefined,

apps/admin/src/sections/promo/price-form.test.tsx

@@ -0,0 +1,152 @@
+/**
+ * @vitest-environment jsdom
+ */
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import PriceForm from "./price-form";
+
+globalThis.ResizeObserver = class ResizeObserver {
+  observe() {
+    return;
+  }
+  unobserve() {
+    return;
+  }
+  disconnect() {
+    return;
+  }
+};
+Element.prototype.scrollIntoView = function scrollIntoView() {
+  return;
+};
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback: string): string => fallback,
+  }),
+}));
+
+const rules: API.PromoRule[] = [
+  {
+    id: 1,
+    name: "Campaign Rule",
+    type: "campaign",
+    params: {},
+    priority: 1,
+    enabled: true,
+  },
+];
+
+const subscribes: API.SubscribeItem[] = [
+  {
+    id: 8,
+    name: "Monthly Plan",
+    unit_price: 1200,
+    unit_time: "Month",
+    sold: 0,
+    discount: [
+      {
+        quantity: 3,
+        discount: 90,
+      },
+    ],
+  },
+];
+const subscribesWithoutDiscounts: API.SubscribeItem[] = [
+  {
+    id: 8,
+    name: "Monthly Plan",
+    unit_price: 1200,
+    unit_time: "Month",
+    sold: 0,
+    discount: [],
+  },
+];
+
+async function selectCombobox(index: number, option: string) {
+  const combobox = screen.getAllByRole("combobox")[index];
+  if (!combobox) throw new Error(`Combobox ${index} not found`);
+  fireEvent.click(combobox);
+  fireEvent.click(await screen.findByText(option));
+}
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("PriceForm", () => {
+  it("submits promo price with promo_rule_id and selected quantity item", async () => {
+    const onSubmit = vi.fn().mockResolvedValue(true);
+    render(
+      <PriceForm onSubmit={onSubmit} rules={rules} subscribes={subscribes} />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(0, "Campaign Rule");
+    await selectCombobox(1, "Monthly Plan");
+    await selectCombobox(2, "3 x Month");
+    fireEvent.change(screen.getByPlaceholderText("Enter price"), {
+      target: { value: "20" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+    await waitFor(() =>
+      expect(onSubmit).toHaveBeenCalledWith({
+        promo_rule_id: 1,
+        items: [{ subscribe_id: 8, quantity: 3, promo_price: 2000 }],
+      })
+    );
+  });
+
+  it("blocks submit when subscribe has no discount quantities", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <PriceForm
+        onSubmit={onSubmit}
+        rules={rules}
+        subscribes={subscribesWithoutDiscounts}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(1, "Monthly Plan");
+
+    expect(
+      screen.getByText(
+        "This subscribe has no discount quantities and cannot be configured."
+      )
+    ).not.toBeNull();
+    expect(screen.getByRole("button", { name: "Confirm" })).toHaveProperty(
+      "disabled",
+      true
+    );
+  });
+
+  it("keeps the form open and shows an error when promo price reaches original price", async () => {
+    const onSubmit = vi.fn();
+    render(
+      <PriceForm onSubmit={onSubmit} rules={rules} subscribes={subscribes} />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Create Promo Price" }));
+    await selectCombobox(0, "Campaign Rule");
+    await selectCombobox(1, "Monthly Plan");
+    await selectCombobox(2, "3 x Month");
+    fireEvent.change(screen.getByPlaceholderText("Enter price"), {
+      target: { value: "36" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Confirm" }));
+
+    expect(
+      await screen.findByText("Promo price must be lower than original price")
+    ).not.toBeNull();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});

apps/admin/src/sections/promo/price-form.tsx

@@ -23,11 +23,16 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
-import { getSubscribeUnitPrice } from "./utils";
+import {
+  formatCurrency,
+  getSubscribeDiscounts,
+  getSubscribeUnitPrice,
+} from "./utils";
 
 const priceSchema = z.object({
-  rule_id: z.number().min(1),
+  promo_rule_id: z.number().min(1),
   subscribe_id: z.number().min(1),
+  quantity: z.number().min(1),
   promo_price: z.number().min(1),
 });
 
@@ -51,26 +56,42 @@ export default function PriceForm({
   const form = useForm<PriceFormValues>({
     resolver: zodResolver(priceSchema),
     defaultValues: {
-      rule_id: 0,
+      promo_rule_id: 0,
       subscribe_id: 0,
+      quantity: 0,
       promo_price: 0,
     },
   });
   const subscribeId = form.watch("subscribe_id");
+  const quantity = form.watch("quantity");
   const subscribe = subscribes.find((item) => item.id === subscribeId);
+  const discounts = getSubscribeDiscounts(subscribe);
   const unitPrice = getSubscribeUnitPrice(subscribe);
+  const originalPrice = unitPrice * quantity;
+  const hasSelectedSubscribe = subscribeId > 0;
+  const hasDiscounts = discounts.length > 0;
 
   async function handleSubmit(values: PriceFormValues) {
-    if (unitPrice > 0 && values.promo_price >= unitPrice) {
+    const maxPrice = unitPrice * values.quantity;
+    if (maxPrice > 0 && values.promo_price >= maxPrice) {
       form.setError("promo_price", {
         message: t(
-          "form.promoPriceLessThanUnitPrice",
-          "Promo price must be lower than unit price"
+          "form.promoPriceLessThanOriginalPrice",
+          "Promo price must be lower than original price"
         ),
       });
       return;
     }
-    const success = await onSubmit(values);
+    const success = await onSubmit({
+      promo_rule_id: values.promo_rule_id,
+      items: [
+        {
+          subscribe_id: values.subscribe_id,
+          quantity: values.quantity,
+          promo_price: values.promo_price,
+        },
+      ],
+    });
     if (success) setOpen(false);
   }
 
@@ -79,7 +100,12 @@ export default function PriceForm({
       <SheetTrigger asChild>
         <Button
           onClick={() => {
-            form.reset({ rule_id: 0, subscribe_id: 0, promo_price: 0 });
+            form.reset({
+              promo_rule_id: 0,
+              subscribe_id: 0,
+              quantity: 0,
+              promo_price: 0,
+            });
             setOpen(true);
           }}
           size="sm"
@@ -99,7 +125,7 @@ export default function PriceForm({
           >
             <FormField
               control={form.control}
-              name="rule_id"
+              name="promo_rule_id"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>{t("rule", "Rule")}</FormLabel>
@@ -126,7 +152,14 @@ export default function PriceForm({
                   <FormLabel>{t("subscribe", "Subscribe")}</FormLabel>
                   <FormControl>
                     <Combobox<number>
-                      onChange={field.onChange}
+                      onChange={(value) => {
+                        field.onChange(value);
+                        form.setValue("quantity", 0, {
+                          shouldDirty: true,
+                          shouldValidate: true,
+                        });
+                        form.clearErrors(["quantity", "promo_price"]);
+                      }}
                       options={subscribes
                         .filter((item) => typeof item.id === "number")
                         .map((item) => ({
@@ -144,6 +177,41 @@ export default function PriceForm({
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="quantity"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("quantity", "Quantity")}</FormLabel>
+                  <FormControl>
+                    <Combobox<number>
+                      onChange={field.onChange}
+                      options={discounts.map((item) => ({
+                        label: `${item.quantity} x ${t(
+                          subscribe?.unit_time || "Month",
+                          subscribe?.unit_time || "Month"
+                        )}`,
+                        value: item.quantity,
+                      }))}
+                      placeholder={t(
+                        "form.selectQuantity",
+                        "Select discount quantity"
+                      )}
+                      value={field.value}
+                    />
+                  </FormControl>
+                  {hasSelectedSubscribe && !hasDiscounts && (
+                    <p className="text-destructive text-xs">
+                      {t(
+                        "form.noDiscounts",
+                        "This subscribe has no discount quantities and cannot be configured."
+                      )}
+                    </p>
+                  )}
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             <FormField
               control={form.control}
               name="promo_price"
@@ -165,10 +233,10 @@ export default function PriceForm({
                       value={field.value}
                     />
                   </FormControl>
-                  {unitPrice > 0 && (
+                  {originalPrice > 0 && (
                     <p className="text-muted-foreground text-xs">
-                      {t("unitPriceHint", "Unit price")}:{" "}
-                      {unitConversion("centsToDollars", unitPrice)}
+                      {t("originalPriceHint", "Original price")}:{" "}
+                      {formatCurrency(originalPrice)}
                     </p>
                   )}
                   <FormMessage />
@@ -178,7 +246,11 @@ export default function PriceForm({
           </form>
         </Form>
         <SheetFooter>
-          <Button disabled={loading} form="promo-price-form" type="submit">
+          <Button
+            disabled={loading || (hasSelectedSubscribe && !hasDiscounts)}
+            form="promo-price-form"
+            type="submit"
+          >
             {t("confirm", "Confirm")}
           </Button>
         </SheetFooter>

apps/admin/src/sections/promo/utils.ts

@@ -20,3 +20,9 @@ export function parseOptionalNumber(value?: string) {
 export function getSubscribeUnitPrice(subscribe?: API.SubscribeItem) {
   return typeof subscribe?.unit_price === "number" ? subscribe.unit_price : 0;
 }
+
+export function getSubscribeDiscounts(subscribe?: API.SubscribeItem) {
+  return (subscribe?.discount || []).filter(
+    (item) => typeof item.quantity === "number" && item.quantity > 0
+  );
+}

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();
@@ -278,17 +295,6 @@ export default function UserSubscription({ userId }: { userId: number }) {
               />
             ),
           },
-          {
-            accessorKey: "traffic_limit",
-            header: t("userTrafficLimit", "User Traffic Limit"),
-            cell: ({ row }) => (
-              <Display
-                type="traffic"
-                unlimited
-                value={row.original.traffic_limit}
-              />
-            ),
-          },
           {
             id: "remaining_traffic",
             header: t("remainingTraffic", "Remaining Traffic"),
@@ -307,10 +313,30 @@ export default function UserSubscription({ userId }: { userId: number }) {
             accessorKey: "speed_limit",
             header: t("speedLimit", "Speed Limit"),
             cell: ({ row }) => {
-              const speed =
-                row.original.speed_limit ||
-                row.original?.subscribe?.speed_limit;
-              return <Display type="trafficSpeed" unlimited 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>
+              );
             },
           },
           {
@@ -367,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,41 +17,90 @@ 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";
-import { Display } from "@/components/display";
 import { IpLink } from "@/components/ip-link";
 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 userTraffic = detail.traffic_limit ?? 0;
-  const userDeviceLimit = detail.device_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 &&
-    userSpeed === 0 &&
-    userTraffic === 0 &&
-    userDeviceLimit === 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 (
@@ -66,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 ? (
             <>
@@ -76,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>
               )}
@@ -93,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}
@@ -104,39 +169,51 @@ function SpeedLimitCard({ subscriptionId }: { subscriptionId: number }) {
             {formatDate(detail.throttle_end)}
           </p>
         )}
-        {(userSpeed > 0 || userTraffic > 0 || userDeviceLimit > 0) && (
-          <dl className="grid gap-2 pt-2 text-xs sm:grid-cols-3">
-            <div>
-              <dt className="text-muted-foreground">
-                {t("userSpeedLimit", "User Speed Limit")}
-              </dt>
-              <dd className="font-medium">
-                <Display type="trafficSpeed" unlimited value={userSpeed} />
-              </dd>
+        {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>
-              <dt className="text-muted-foreground">
-                {t("userTrafficLimit", "User Traffic Limit")}
-              </dt>
-              <dd className="font-medium">
-                <Display type="traffic" unlimited value={userTraffic} />
-              </dd>
-            </div>
-            <div>
-              <dt className="text-muted-foreground">
-                {t("userDeviceLimit", "User Device Limit")}
-              </dt>
-              <dd className="font-medium">
-                <Display type="number" unlimited value={userDeviceLimit} />
-              </dd>
-            </div>
-          </dl>
+          </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>
+  );
+}
+
 export function SubscriptionDetail({
   trigger,
   userId,
@@ -195,11 +272,7 @@ export function SubscriptionDetail({
                 accessorKey: "enabled",
                 header: t("enable", "Enable"),
                 cell: ({ row }) => (
-                  <Switch
-                    aria-label={t("deviceEnabled", "Device enabled")}
-                    checked={row.getValue("enabled")}
-                    disabled
-                  />
+                  <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";
@@ -36,19 +38,48 @@ interface Props {
   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().default(0),
-  traffic: z.number().default(0),
-  speed_limit: z.number().optional(),
-  traffic_limit: z.number().optional(),
-  device_limit: z.number().optional(),
-  expired_at: z.number().default(0),
-  upload: z.number().default(0),
-  download: z.number().default(0),
+  subscribe_id: 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().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(),
 });
 
-export type SubscriptionFormValues = z.infer<typeof formSchema>;
+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({
   trigger,
@@ -60,14 +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,
-      traffic_limit: initialData?.traffic_limit || 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,
@@ -141,6 +172,7 @@ export function SubscriptionForm({
                       </FormLabel>
                       <FormControl>
                         <EnhancedInput
+                          min={0}
                           placeholder={t("unlimited", "Unlimited")}
                           type="number"
                           {...field}
@@ -160,52 +192,16 @@ export function SubscriptionForm({
                     </FormItem>
                   )}
                 />
-                <FormField
-                  control={form.control}
-                  name="traffic_limit"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        {t("userTrafficLimit", "User Traffic Limit")}
-                      </FormLabel>
-                      <FormControl>
-                        <EnhancedInput
-                          placeholder={t(
-                            "followSubscription",
-                            "Follow Subscription"
-                          )}
-                          type="number"
-                          {...field}
-                          formatInput={(value) =>
-                            unitConversion("bytesToGb", value)
-                          }
-                          formatOutput={(value) =>
-                            unitConversion("gbToBytes", value)
-                          }
-                          onValueChange={(value) => {
-                            form.setValue(field.name, value as number);
-                          }}
-                          suffix="GB"
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
                 <FormField
                   control={form.control}
                   name="speed_limit"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>
-                        {t("userSpeedLimit", "User Speed Limit")}
-                      </FormLabel>
+                      <FormLabel>{t("speedLimit", "Speed Limit")}</FormLabel>
                       <FormControl>
                         <EnhancedInput
-                          placeholder={t(
-                            "followSubscription",
-                            "Follow Subscription"
-                          )}
+                          min={0}
+                          placeholder={t("unlimited", "Unlimited")}
                           type="number"
                           {...field}
                           onValueChange={(value) => {
@@ -214,6 +210,12 @@ export function SubscriptionForm({
                           suffix="Mbps"
                         />
                       </FormControl>
+                      <FormDescription>
+                        {t(
+                          "userSpeedLimitDescription",
+                          "Set to 0 to use the subscription default speed limit."
+                        )}
+                      </FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
@@ -223,15 +225,12 @@ export function SubscriptionForm({
                   name="device_limit"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>
-                        {t("userDeviceLimit", "User Device Limit")}
-                      </FormLabel>
+                      <FormLabel>{t("deviceLimit", "Device Limit")}</FormLabel>
                       <FormControl>
                         <EnhancedInput
-                          placeholder={t(
-                            "followSubscription",
-                            "Follow Subscription"
-                          )}
+                          min={0}
+                          placeholder={t("unlimited", "Unlimited")}
+                          step={1}
                           type="number"
                           {...field}
                           onValueChange={(value) => {
@@ -253,6 +252,7 @@ export function SubscriptionForm({
                       </FormLabel>
                       <FormControl>
                         <EnhancedInput
+                          min={0}
                           placeholder="0"
                           type="number"
                           {...field}
@@ -282,6 +282,7 @@ export function SubscriptionForm({
                       </FormLabel>
                       <FormControl>
                         <EnhancedInput
+                          min={0}
                           placeholder="0"
                           type="number"
                           {...field}
@@ -301,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"

apps/user/public/assets/locales/en-US/subscribe.json

@@ -37,6 +37,10 @@
   "passwordHint": "If you do not enter a password, we will automatically generate one and send it to your email.",
   "paymentMethod": "Payment Method",
   "productDescription": "productDescription",
+  "promo": {
+    "available": "Promo Available",
+    "validUntil": "Valid until"
+  },
   "purchaseDuration": "Purchase Duration",
   "recharge": "Recharge",
   "rechargeAmount": "Recharge Amount",

apps/user/public/assets/locales/zh-CN/subscribe.json

@@ -37,6 +37,10 @@
   "passwordHint": "如果您不输入密码，我们将自动生成一个并发送到您的邮箱。",
   "paymentMethod": "支付方式",
   "productDescription": "商品描述",
+  "promo": {
+    "available": "促销可用",
+    "validUntil": "有效期至"
+  },
   "purchaseDuration": "购买时长",
   "recharge": "充值",
   "rechargeAmount": "充值金额",

apps/user/src/sections/purchasing/content.tsx

@@ -17,6 +17,7 @@ import CouponInput from "@/sections/subscribe/coupon-input";
 import { SubscribeDetail } from "@/sections/subscribe/detail";
 import DurationSelector from "@/sections/subscribe/duration-selector";
 import PaymentMethods from "@/sections/subscribe/payment-methods";
+import { PromoInfo } from "@/sections/subscribe/promo-info";
 import { useGlobalStore } from "@/stores/global";
 
 export default function Content({
@@ -49,6 +50,9 @@ export default function Content({
     valid: false,
     message: "",
   });
+  const selectedDiscount = subscription?.discount?.find(
+    (item) => item.quantity === params.quantity
+  );
 
   const { data: order } = useQuery({
     enabled: !!subscription?.id && !!params.payment,
@@ -103,7 +107,10 @@ export default function Content({
           navigate({ to: "/purchasing/order", search: { order_no } });
         }
       } catch (error) {
-        console.log(error);
+        setIsEmailValid((prev) => ({
+          ...prev,
+          message: error instanceof Error ? error.message : prev.message,
+        }));
       }
     });
   }, [params, navigate]);
@@ -285,6 +292,7 @@ export default function Content({
                 show_original_price: subscription?.show_original_price,
               }}
             />
+            <PromoInfo discount={selectedDiscount} />
           </CardContent>
         </Card>
       </div>

apps/user/src/sections/subscribe/promo-info.tsx

@@ -0,0 +1,33 @@
+import { Badge } from "@workspace/ui/components/badge";
+import { useTranslation } from "react-i18next";
+import { Display } from "@/components/display";
+
+interface PromoInfoProps {
+  discount?: API.SubscribeDiscount;
+}
+
+export function PromoInfo({ discount }: Readonly<PromoInfoProps>) {
+  const { t } = useTranslation("subscribe");
+  const promo = discount?.promo;
+
+  if (!promo) return null;
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/40 p-3 text-sm">
+      <div className="grid gap-1">
+        <span className="font-medium">
+          {promo.rule_name || t("promo.available", "Promo Available")}
+        </span>
+        {promo.end_time && (
+          <span className="text-muted-foreground text-xs">
+            {t("promo.validUntil", "Valid until")}:{" "}
+            {new Date(promo.end_time * 1000).toLocaleString()}
+          </span>
+        )}
+      </div>
+      <Badge variant="secondary">
+        <Display type="currency" value={promo.promo_price} />
+      </Badge>
+    </div>
+  );
+}

apps/user/src/sections/subscribe/purchase.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from "react-i18next";
 import CouponInput from "@/sections/subscribe/coupon-input";
 import DurationSelector from "@/sections/subscribe/duration-selector";
 import PaymentMethods from "@/sections/subscribe/payment-methods";
+import { PromoInfo } from "@/sections/subscribe/promo-info";
 import { useGlobalStore } from "@/stores/global";
 import { SubscribeBilling } from "./billing";
 import { SubscribeDetail } from "./detail";
@@ -41,7 +42,12 @@ export default function Purchase({
     coupon: "",
   });
   const [loading, startTransition] = useTransition();
-  const lastSuccessOrderRef = useRef<any>(null);
+  const lastSuccessOrderRef = useRef<API.PreOrderResponse | undefined>(
+    undefined
+  );
+  const selectedDiscount = subscribe?.discount?.find(
+    (item) => item.quantity === params.quantity
+  );
 
   const { data: order } = useQuery({
     enabled: !!subscribe?.id,
@@ -140,6 +146,7 @@ export default function Purchase({
                   show_original_price: subscribe?.show_original_price,
                 }}
               />
+              <PromoInfo discount={selectedDiscount} />
             </CardContent>
           </Card>
           <div className="flex flex-col justify-between text-sm">

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

@@ -307,27 +307,34 @@ declare namespace API {
 
   type PromoPrice = {
     id: number;
-    rule_id: number;
+    promo_rule_id: number;
     subscribe_id: number;
     subscribe_name?: string;
+    quantity: number;
     unit_price: number;
     promo_price: number;
     created_at?: number;
     updated_at?: number;
   };
 
-  type CreatePromoPriceRequest = {
-    rule_id: number;
+  type CreatePromoPriceItem = {
     subscribe_id: number;
+    quantity: number;
     promo_price: number;
   };
 
+  type CreatePromoPriceRequest = {
+    promo_rule_id: number;
+    items: CreatePromoPriceItem[];
+  };
+
   type PromoUsage = {
     id: number;
-    rule_id: number;
+    promo_rule_id: number;
     rule_name?: string;
     subscribe_id: number;
     subscribe_name?: string;
+    quantity: number;
     user_id: number;
     order_no: string;
     unit_price: number;
@@ -462,10 +469,8 @@ declare namespace API {
     traffic: number;
     subscribe_id: number;
     speed_limit?: number;
-    traffic_limit?: number;
     device_limit?: number;
-    upload?: number;
-    download?: number;
+    traffic_limit?: UserSubscribeTrafficLimitRule[];
   };
 
   type CurrencyConfig = {
@@ -1022,7 +1027,7 @@ declare namespace API {
   type GetPromoPriceListParams = {
     page: number;
     size: number;
-    rule_id?: number;
+    promo_rule_id?: number;
     subscribe_id?: number;
   };
 
@@ -1038,7 +1043,7 @@ declare namespace API {
   type GetPromoUsageListParams = {
     page: number;
     size: number;
-    rule_id?: number;
+    promo_rule_id?: number;
     subscribe_id?: number;
     user_id?: number;
     order_no?: string;
@@ -2221,6 +2226,13 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    promo_price: number;
+    end_time?: number;
   };
 
   type SubscribeGroup = {
@@ -2559,8 +2571,8 @@ declare namespace API {
     upload: number;
     download: number;
     speed_limit?: number;
-    traffic_limit?: number;
     device_limit?: number;
+    traffic_limit?: UserSubscribeTrafficLimitRule[];
   };
 
   type User = {
@@ -2649,11 +2661,14 @@ declare namespace API {
     finished_at: number;
     reset_time: number;
     traffic: number;
-    traffic_limit?: number;
-    speed_limit?: number;
-    device_limit?: 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;
@@ -2663,6 +2678,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;
@@ -2674,11 +2696,11 @@ declare namespace API {
     expire_time: number;
     reset_time: number;
     traffic: number;
-    traffic_limit?: number;
-    speed_limit?: number;
-    device_limit?: number;
     download: number;
     upload: number;
+    speed_limit?: number;
+    device_limit?: number;
+    traffic_limit?: UserSubscribeTrafficLimitRule[];
     token: string;
     status: number;
     effective_speed: number;

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

@@ -910,6 +910,13 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    promo_price: number;
+    end_time?: number;
   };
 
   type SubscribeGroup = {

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

@@ -1019,6 +1019,13 @@ declare namespace API {
     quantity: number;
     discount: number;
     map_apple?: string;
+    promo?: SubscribeDiscountPromo;
+  };
+
+  type SubscribeDiscountPromo = {
+    rule_name?: string;
+    promo_price: number;
+    end_time?: number;
   };
 
   type SubscribeGroup = {