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/locales/en.ts

@@ -694,6 +694,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       tocEnhanceTip: ` During the parsing of the document, table of contents information was generated (see the 'Enable Table of Contents Extraction' option in the General method). This allows the large model to return table of contents items relevant to the user's query, thereby using these items to retrieve related chunks and apply weighting to these chunks during the sorting process. This approach is derived from mimicking the behavioral logic of how humans search for knowledge in books.`,
     },
     setting: {
+      selectModelPlaceholder: 'Select model',
       configureModelTitle: 'Configure model',
       confluenceIsCloudTip:
         'Check if this is a Confluence Cloud instance, uncheck for Confluence Server/Data Center',
@@ -729,7 +730,7 @@ Example: general/v2/`,
       google_driveSharedFoldersTip:
         'Comma-separated Google Drive folder links to crawl.',
       availableSourcesDescription: 'Select a data source to add',
-      availableSources: 'Available Sources',
+      availableSources: 'Available sources',
       datasourceDescription: 'Manage your data source and connections',
       save: 'Save',
       search: 'Search',
@@ -748,7 +749,7 @@ Example: general/v2/`,
         'Please enter your current password to change your password.',
       model: 'Model providers',
       systemModelDescription: 'Please complete these settings before beginning',
-      dataSources: 'Data Sources',
+      dataSources: 'Data sources',
       team: 'Team',
       system: 'System',
       logout: 'Log out',
@@ -924,8 +925,8 @@ Example: general/v2/`,
       invite: 'Invite Member',
       agree: 'Accept',
       refuse: 'Decline',
-      teamMembers: 'Team Members',
+      teamMembers: 'Team members',
-      joinedTeams: 'Joined Teams',
+      joinedTeams: 'Joined teams',
       sureDelete: 'Are you sure to remove this member?',
       quit: 'Quit',
       sureQuit: 'Are you sure you want to quit the team you joined?',
@@ -1825,7 +1826,7 @@ Important structured information may include: names, dates, locations, events, k
       addMCP: 'Add MCP',
       editMCP: 'Edit MCP',
       toolsAvailable: 'tools available',
-      mcpServers: 'MCP Servers',
+      mcpServers: 'MCP servers',
       customizeTheListOfMcpServers: 'Customize the list of MCP servers',
       cachedTools: 'cached tools',
       bulkManage: 'Bulk manage',

web/src/locales/zh.ts

@@ -684,6 +684,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       tocEnhanceTip: `解析文档时生成了目录信息（见General方法的‘启用目录抽取’），让大模型返回和用户问题相关的目录项，从而利用目录项拿到相关chunk，对这些chunk在排序中进行加权。这种方法来源于模仿人类查询书本中知识的行为逻辑`,
     },
     setting: {
+      selectModelPlaceholder: '请选择模型',
       configureModelTitle: '配置模型',
       confluenceIsCloudTip:
         '检查这是否是 Confluence Cloud 实例，如果是 Confluence 服务/数据中心，则取消选中。',

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
+              <Button className=" px-2 items-center gap-0 text-xs h-6  rounded-md transition-colors hidden group-hover:flex">
-                className=" px-2 items-center gap-0 text-xs h-6  rounded-md transition-colors hidden group-hover:flex"
-                onClick={() => handleAddModel(model.name)}
-              >
                 <Plus size={12} />
                 {t('addTheModel')}
               </Button>