Fixes: Fixed some bugs #10703 (#11200)

### What problem does this PR solve?

Fixes: Fixed some bugs #10703

- Removed login page animation
- Modified some styles in the user profile center

### Type of change

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

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

@@ -5,7 +5,9 @@ const aspectRatio = {
   bottom: 704,
 };
 
-export const BgSvg = () => {
+export const BgSvg = ({ isPaused = false }: { isPaused?: boolean }) => {
+  const animationClass = isPaused ? 'paused' : '';
+
   const def = (
     path: string,
     id: number | string = '',
@@ -124,7 +126,7 @@ export const BgSvg = () => {
     <div className="absolute inset-0 overflow-hidden pointer-events-none ">
       <div className="absolute top-0 left-0 right-0 w-full">
         <div
-          className={`w-full ml-10`}
+          className={`w-full ml-10 ${animationClass}`}
           style={{ height: aspectRatio['top'] + 'px' }}
         >
           {def(
@@ -134,7 +136,7 @@ export const BgSvg = () => {
           )}
         </div>
         <div
-          className={`w-full -mt-48`}
+          className={`w-full -mt-48 ${animationClass}`}
           style={{ height: aspectRatio['middle'] + 'px' }}
         >
           {def(
@@ -144,7 +146,7 @@ export const BgSvg = () => {
           )}
         </div>
         <div
-          className={`w-full -mt-72`}
+          className={`w-full -mt-72 ${animationClass}`}
           style={{ height: aspectRatio['bottom'] + 'px' }}
         >
           {def(

web/src/pages/login-next/index.less

@@ -1,6 +1,3 @@
-.animate-glow {
-  animation: glow 16s infinite linear;
-}
 .mask-path {
   stroke-width: 8;
   ::after {
@@ -34,11 +31,20 @@
     stroke-dashoffset: -600;
   } /* 15+300-30=285 */
 }
-
+.animate-glow {
+  animation: glow 16s infinite linear;
+}
 .animate-highlight {
   animation: highlight-flow 16s linear infinite;
 }
 
+.paused {
+  .animate-glow,
+  .animate-highlight {
+    animation-play-state: paused;
+  }
+}
+
 //////////////////////////////////////////////////////////////////////////
 .perspective-1000 {
   perspective: 1000px;
@@ -47,11 +53,13 @@
   min-height: 680px;
   display: flex;
   align-items: center;
+  will-change: transform;
 }
 .transform-style-3d {
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transition-duration: 0.4s;
+  will-change: transform;
 }
 .backface-hidden {
   backface-visibility: hidden;

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

@@ -42,7 +42,9 @@ const Login = () => {
     useLoginWithChannel();
   const { t } = useTranslation('translation', { keyPrefix: 'login' });
   const [isLoginPage, setIsLoginPage] = useState(true);
-  const [showPassword, setShowPassword] = useState(false);
+
+  const [isUserInteracting, setIsUserInteracting] = useState(true);
+
   const loading =
     signLoading ||
     registerLoading ||
@@ -152,9 +154,8 @@ const Login = () => {
         color={'rgb(128, 255, 248)'}
       />
       <div className=" h-[inherit] relative overflow-auto">
-        <BgSvg />
+        <BgSvg isPaused={isUserInteracting} />
 
-        {/* <SpotlightTopRight opcity={0.7} coverage={10} /> */}
         <div className="absolute top-3 flex flex-col items-center mb-12 w-full text-text-primary">
           <div className="flex items-center mb-4 w-full pl-10 pt-10 ">
             <div className="w-12 h-12 p-2 rounded-lg flex items-center justify-center mr-3">
@@ -237,7 +238,7 @@ const Login = () => {
                           <FormControl>
                             <div className="relative">
                               <Input
-                                type={showPassword ? 'text' : 'password'}
+                                type={'password'}
                                 placeholder={t('passwordPlaceholder')}
                                 autoComplete={
                                   title === 'login'

web/src/pages/user-setting/data-source/contant.tsx

@@ -189,7 +189,7 @@ export const DataSourceFormFields = {
       name: 'config.credentials.google_tokens',
       type: FormFieldType.Textarea,
       required: true,
-      render: (fieldProps) => (
+      render: (fieldProps: any) => (
         <GoogleDriveTokenField
           value={fieldProps.value}
           onChange={fieldProps.onChange}

web/src/pages/user-setting/setting-model/components/system-setting.tsx

@@ -161,7 +161,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
           value={value}
           options={options}
           onChange={(value) => handleFieldChange(id, value)}
-          placeholder={tcommon('selectPlaceholder')}
+          placeholder={t('selectModelPlaceholder')}
         />
       </div>
     );

web/src/pages/user-setting/setting-model/components/un-add-model.tsx

@@ -123,16 +123,14 @@ export const AvailableModels: FC<{
           <div
             key={model.name}
             className=" border border-border-button rounded-lg p-3 hover:bg-bg-input transition-colors group"
+            onClick={() => handleAddModel(model.name)}
           >
             <div className="flex items-center space-x-3 mb-3">
               <LlmIcon name={model.name} imgClass="h-8 w-8 text-text-primary" />
               <div className="flex-1">
                 <h3 className="font-medium truncate">{model.name}</h3>
               </div>
-              <Button
-                className=" px-2 items-center gap-0 text-xs h-6  rounded-md transition-colors hidden group-hover:flex"
-                onClick={() => handleAddModel(model.name)}
-              >
+              <Button className=" px-2 items-center gap-0 text-xs h-6  rounded-md transition-colors hidden group-hover:flex">
                 <Plus size={12} />
                 {t('addTheModel')}
               </Button>