merge: 同步 upstream/main 新功能到定制版本

- feat: Add slider verification code (bd67997)
- fix bug: Inventory cannot be zero (1f7a6ee)
- fix: resolve merge conflicts and lint errors

apps/user/src/sections/auth/local-captcha.tsx

@@ -2,7 +2,7 @@ import { Button } from "@workspace/ui/components/button";
 import { Input } from "@workspace/ui/components/input";
 import { Icon } from "@workspace/ui/composed/icon";
 import { generateCaptcha } from "@workspace/ui/services/common/auth";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export interface LocalCaptchaRef {
@@ -15,80 +15,85 @@ interface LocalCaptchaProps {
   onCaptchaIdChange?: (id: string) => void;
 }
 
-const LocalCaptcha = forwardRef<LocalCaptchaRef, LocalCaptchaProps>(
-  ({ value, onChange, onCaptchaIdChange }, ref) => {
-    const { t } = useTranslation("auth");
-    const [captchaImage, setCaptchaImage] = useState("");
-    const [loading, setLoading] = useState(false);
+const LocalCaptcha = ({
+  value,
+  onChange,
+  onCaptchaIdChange,
+  ref,
+}: LocalCaptchaProps & { ref?: RefObject<LocalCaptchaRef | null> }) => {
+  const { t } = useTranslation("auth");
+  const [captchaImage, setCaptchaImage] = useState("");
+  const [loading, setLoading] = useState(false);
 
-    const fetchCaptcha = async () => {
-      setLoading(true);
-      try {
-        const res = await generateCaptcha();
-        const captchaData = res.data?.data;
-        if (captchaData) {
-          setCaptchaImage(captchaData.image);
-          onCaptchaIdChange?.(captchaData.id);
-        }
-      } catch (error) {
-        console.error("Failed to generate captcha:", error);
-      } finally {
-        setLoading(false);
+  const fetchCaptcha = async () => {
+    setLoading(true);
+    try {
+      const res = await generateCaptcha();
+      const captchaData = res.data?.data;
+      if (captchaData) {
+        setCaptchaImage(captchaData.image);
+        onCaptchaIdChange?.(captchaData.id);
       }
-    };
+    } catch (error) {
+      console.error("Failed to generate captcha:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-    useEffect(() => {
+  useEffect(() => {
+    fetchCaptcha();
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    reset: () => {
+      onChange?.("");
       fetchCaptcha();
-    }, []);
+    },
+  }));
 
-    useImperativeHandle(ref, () => ({
-      reset: () => {
-        onChange?.("");
-        fetchCaptcha();
-      },
-    }));
-
-    return (
-      <div className="flex gap-2">
-        <Input
-          placeholder={t("captcha.placeholder", "Enter captcha code...")}
-          value={value || ""}
-          onChange={(e) => onChange?.(e.target.value)}
-          className="flex-1"
-        />
-        <div className="relative h-10 w-32 flex-shrink-0">
-          {loading ? (
-            <div className="flex h-full items-center justify-center bg-muted">
-              <Icon className="animate-spin" icon="mdi:loading" />
-            </div>
-          ) : captchaImage ? (
-            <img
-              src={captchaImage}
-              alt="captcha"
-              className="h-full w-full cursor-pointer object-contain"
-              onClick={fetchCaptcha}
-              title={t("captcha.clickToRefresh", "Click to refresh")}
-            />
-          ) : (
-            <div className="flex h-full items-center justify-center bg-muted text-xs text-muted-foreground">
-              {t("captcha.noImage", "No Image")}
-            </div>
-          )}
-        </div>
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          onClick={fetchCaptcha}
-          disabled={loading}
-          title={t("captcha.refresh", "Refresh captcha")}
-        >
-          <Icon icon="mdi:refresh" />
-        </Button>
+  return (
+    <div className="flex gap-2">
+      <Input
+        className="flex-1"
+        onChange={(e) => onChange?.(e.target.value)}
+        placeholder={t("captcha.placeholder", "Enter captcha code...")}
+        value={value || ""}
+      />
+      <div className="relative h-10 w-32 flex-shrink-0">
+        {loading ? (
+          <div className="flex h-full items-center justify-center bg-muted">
+            <Icon className="animate-spin" icon="mdi:loading" />
+          </div>
+        ) : captchaImage ? (
+          <img
+            alt="captcha"
+            className="h-full w-full cursor-pointer object-contain"
+            height={40}
+            onClick={fetchCaptcha}
+            src={captchaImage}
+            title={t("captcha.clickToRefresh", "Click to refresh")}
+            width={120}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center bg-muted text-muted-foreground text-xs">
+            {t("captcha.noImage", "No Image")}
+          </div>
+        )}
       </div>
-    );
-  }
-);
+      <Button
+        disabled={loading}
+        onClick={fetchCaptcha}
+        size="icon"
+        title={t("captcha.refresh", "Refresh captcha")}
+        type="button"
+        variant="outline"
+      >
+        <Icon icon="mdi:refresh" />
+      </Button>
+    </div>
+  );
+};
 
 LocalCaptcha.displayName = "LocalCaptcha";