mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-24 07:26:47 +08:00
77481ab3ab
### 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)
57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
import { useIsDarkTheme } from '@/components/theme-provider';
|
|
import { parseColorToRGB } from '@/utils/common-util';
|
|
import React from 'react';
|
|
|
|
interface SpotlightProps {
|
|
className?: string;
|
|
opcity?: number;
|
|
coverage?: number;
|
|
X?: string;
|
|
Y?: string;
|
|
color?: string;
|
|
}
|
|
/**
|
|
*
|
|
* @param opcity 0~1 default 0.5
|
|
* @param coverage 0~100 default 60
|
|
* @returns
|
|
*/
|
|
const Spotlight: React.FC<SpotlightProps> = ({
|
|
className,
|
|
opcity = 0.5,
|
|
coverage = 60,
|
|
X = '50%',
|
|
Y = '190%',
|
|
color,
|
|
}) => {
|
|
const isDark = useIsDarkTheme();
|
|
let realColor: [number, number, number] | undefined = undefined;
|
|
if (color) {
|
|
realColor = parseColorToRGB(color);
|
|
}
|
|
const rgb = realColor
|
|
? realColor.join(',')
|
|
: isDark
|
|
? '255, 255, 255'
|
|
: '194, 221, 243';
|
|
return (
|
|
<div
|
|
className={`absolute inset-0 opacity-80 ${className} rounded-lg`}
|
|
style={{
|
|
backdropFilter: 'blur(30px)',
|
|
zIndex: -1,
|
|
}}
|
|
>
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background: `radial-gradient(circle at ${X} ${Y}, rgba(${rgb},${opcity}) 0%, rgba(${rgb},0) ${coverage}%)`,
|
|
pointerEvents: 'none',
|
|
}}
|
|
></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Spotlight;
|