Fix: Optimized the login page and fixed some known issues. #9869 (#10514)

### What problem does this PR solve?

Fix: Optimized the login page and fixed some known issues. #9869

- Added the FlipCard3D component to implement a 3D flip effect on the
login/registration forms.
- Adjusted the Spotlight component to support custom positioning and
color configurations.
- Updated the route to point to the new login page /login-next.
- Added a cancel interface to the auto-generate function.
- Fixed scroll bar issues in PDF preview.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/login-next/card.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import './index.less';
+
+type IProps = {
+  children: React.ReactNode;
+  isLoginPage: boolean;
+};
+const FlipCard3D = (props: IProps) => {
+  const { children, isLoginPage } = props;
+  const [isFlipped, setIsFlipped] = useState(false);
+  useEffect(() => {
+    console.log('title', isLoginPage);
+    if (isLoginPage) {
+      setIsFlipped(false);
+    } else {
+      setIsFlipped(true);
+    }
+  }, [isLoginPage]);
+
+  return (
+    <div className="relative w-full h-full perspective-1000">
+      <div
+        className={`relative w-full h-full transition-transform transform-style-3d ${isFlipped ? 'rotate-y-180' : ''}`}
+      >
+        {/* Front Face */}
+        <div className="absolute inset-0 flex items-center justify-center bg-blue-500 text-white rounded-xl backface-hidden">
+          {children}
+        </div>
+
+        {/* Back Face */}
+        <div className="absolute inset-0 flex items-center justify-center bg-green-500 text-white rounded-xl backface-hidden rotate-y-180">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FlipCard3D;