Merge pull request #1021 from SuanmoSuanyangTechnology/feature/login_ui_zy

Feature/login UI zy

web/src/assets/images/login/check.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>勾选</title>
+    <g id="空间外层页面优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录页面" transform="translate(-64, -611)" fill="#FFFFFF" fill-rule="nonzero">
+            <g id="编组-8" transform="translate(64, 608)">
+                <g id="勾选" transform="translate(0, 3)">
+                    <path d="M12,0 C14.209139,0 16,1.790861 16,4 L16,12 C16,14.209139 14.209139,16 12,16 L4,16 C1.790861,16 0,14.209139 0,12 L0,4 C0,1.790861 1.790861,4.4408921e-16 4,0 L12,0 Z M11.9182266,4.80024782 C11.7273831,4.80024782 11.5444062,4.87629473 11.4097812,5.0115625 L6.552,9.86932813 L4.4284375,7.74489063 C4.29381317,7.60962766 4.11083967,7.53358379 3.92,7.53358379 C3.72916033,7.53358379 3.54618683,7.60962766 3.4115625,7.74489063 C3.27602096,7.87955071 3.19979999,8.06271883 3.19979999,8.25378125 C3.19979999,8.44484367 3.27602096,8.62801179 3.4115625,8.76267188 L6.0453125,11.3946719 C6.17993745,11.5299396 6.3629143,11.6059866 6.55375781,11.6059866 C6.74460132,11.6059866 6.92757818,11.5299396 7.06220312,11.3946719 L12.4311094,6.02667188 C12.5659036,5.89187668 12.6412595,5.70881589 12.6404302,5.51818919 C12.639587,5.3275625 12.5626279,5.14516989 12.4266562,5.0115625 C12.2920469,4.87629473 12.1090701,4.80024782 11.9182266,4.80024782 Z" id="形状结合"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

web/src/styles/index.css

@@ -467,4 +467,29 @@ input:-webkit-autofill:active {
   animation-name: onAutoFillStart;
   animation-duration: 1ms;
 }
-@keyframes onAutoFillStart { from {} to {} }
+@keyframes onAutoFillStart { from {} to {} }
+/* Login input placeholder */
+.login-input input::placeholder {
+  color: #A8A9AA !important;
+}
+
+.login-input {
+  border-color: #A8A9AA;
+}
+
+/* Login input hover/focus border */
+.login-input:hover,
+.login-input:focus-within {
+  border-color: #FFFFFF !important;
+  box-shadow: none !important;
+}
+
+/* Override browser autofill styles */
+.login-input input:-webkit-autofill,
+.login-input input:-webkit-autofill:hover,
+.login-input input:-webkit-autofill:focus,
+.login-input input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0px 1000px #0A0A0A inset !important;
+  -webkit-text-fill-color: #FFFFFF !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+}

web/src/views/Index/index.tsx

@@ -102,7 +102,7 @@ const Index = () => {
     <Flex gap={12} wrap="nowrap" className="rb:w-full! rb:h-full! rb:overflow-y-auto">
       <div className="rb:flex-1 rb:min-w-0">
         <Flex vertical>
-          <div className='rb:w-full rb:h-26 rb:p-4 rb:bg-cover rb:bg-[url("@/assets/images/index/index_bg@2x.png")] rb:rounded-xl rb:overflow-hidden'>
+          <div className='rb:w-full rb:h-26 rb:p-4 rb:bg-cover rb:bg-[url("@/assets/images/index/index_bg.png")] rb:rounded-xl rb:overflow-hidden'>
             <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-white rb:text-[18px] rb:leading-7">
               {t('index.spaceTitle')}
             </div>

web/src/views/Login/index.tsx

@@ -14,27 +14,33 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input, Form, App } from 'antd';
 import type { FormProps } from 'antd';
+import clsx from 'clsx';
 
 import { useUser, type LoginInfo } from '@/store/user';
 import { login } from '@/api/user'
-import loginBg from '@/assets/images/login/loginBg.png'
-import check from '@/assets/images/login/check.png'
+import loginBg from '@/assets/images/login/bg.mp4'
+import check from '@/assets/images/login/check.svg'
 import email from '@/assets/images/login/email.svg'
 import lock from '@/assets/images/login/lock.svg'
 import type { LoginForm } from './types';
+import { useI18n } from '@/store/locale'
 
 /**
  * Input field styling
  */
-const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
+const inputClassName = "login-input rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]! rb:bg-transparent! rb:text-[#FFFFFF]! [&_input]:rb:text-[#FFFFFF]! [&_input]:rb:caret-[#FFFFFF]!"
 
 /**
  * Login page component
  */const LoginPage: React.FC = () => {
   const { t } = useTranslation();
   const { clearUserInfo, updateLoginInfo, getUserInfo } = useUser();
+  const { language } = useI18n()
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm<LoginForm>();
+  const emailVal = Form.useWatch('email', form);
+  const passwordVal = Form.useWatch('password', form);
+  const canLogin = !!(emailVal && passwordVal);
   const { message } = App.useApp();
 
   useEffect(() => {
@@ -43,6 +49,7 @@ const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
 
   /** Handle login form submission */
   const handleLogin: FormProps<LoginForm>['onFinish'] = async (values) => {
+    if (!canLogin) return;
     if (!values.email) {
       message.warning(t('login.emailPlaceholder'));
       return;
@@ -64,42 +71,45 @@ const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
 
 
   return (
-    <div className="rb:min-h-screen rb:flex rb:h-screen">
+    <div className="rb:min-h-screen rb:flex rb:h-screen rb:bg-[#0A0A0A] rb:text-[#FFFFFF]">
       <div className="rb:relative rb:w-1/2 rb:h-screen rb:overflow-hidden">
-        <img src={loginBg} alt="loginBg" className="rb:w-full rb:h-full rb:object-cover rb:absolute rb:top-1/2 rb:-translate-y-1/2 rb:left-0" />
-        <div className="rb:absolute rb:top-14 rb:left-16">
-          <div className="rb:text-[28px] rb:leading-8.25 rb:font-bold rb:font-[AlimamaShuHeiTi,AlimamaShuHeiTi] rb:mb-4">{t('login.title')}</div>
-          <div className="rb:text-[18px] rb:leading-6.25 rb:font-regular">{t('login.subTitle')}</div>
+        <video src={loginBg} loop autoPlay playsInline muted className="rb:w-full rb:h-full rb:object-cover"></video>
+        <div className="rb:absolute rb:top-10 rb:left-12">
+          <div className={clsx("rb:h-8.25 rb:bg-cover", {
+            "rb:w-89 rb:bg-[url('@/assets/images/login/title_en.png')]": language !== 'zh',
+            "rb:w-42 rb:bg-[url('@/assets/images/login/title_zh.png')]": language === 'zh'
+          })}></div>
+          <div className="rb:text-[18px] rb:text-[rgba(255,255,255,0.7)] rb:leading-6.25 rb:font-regular rb:mt-3">{t('login.subTitle')}</div>
         </div>
 
-        <div className="rb:absolute rb:bottom-20.25 rb:left-16 rb:grid rb:grid-cols-2 rb:gap-x-30 rb:gap-y-10.75">
-          {['intelligentMemory', 'instantRecall', 'knowledgeAssociation'].map(key => (
-            <div key={key} className="rb:flex">
+        <div className="rb:absolute rb:bottom-14 rb:left-12 rb:right-12 rb:grid rb:grid-cols-2 rb:gap-x-30 rb:gap-y-10.75">
+          {['intelligentMemory', 'instantRecall', 'knowledgeAssociation'].map((key, index) => (
+            <div key={key} className={`rb:flex${index === 0 ? ' rb:col-span-2' : ''}`}>
               <img src={check} className="rb:w-4 rb:h-4 rb:mr-2 rb:mt-0.75" />
               <div className="rb:text-[16px] rb:leading-5.5">
                 <div className="rb:font-medium">{t(`login.${key}`)}</div>
-                <div className="rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:font-regular! rb:mt-2">{t(`login.${key}Desc`)}</div>
+                <div className="rb:text-[14px] rb:text-[rgba(255,255,255,0.7)] rb:leading-5 rb:font-regular! rb:mt-2">{t(`login.${key}Desc`)}</div>
               </div>
             </div>
           ))}
         </div>
       </div>
 
-      <div className="rb:bg-[#FFFFFF] rb:flex rb:items-center rb:justify-center rb:flex-[1_1_auto]">
-        <div className="rb:w-100 rb:mx-auto">
-          <div className="rb:text-center rb:text-[28px] rb:font-semibold rb:leading-8 rb:mb-12">{t('login.welcome')}</div>
+      <div className="rb:flex rb:items-center rb:justify-center rb:flex-[1_1_auto]">
+        <div className="rb:w-110 rb:mx-auto">
+          <div className="rb:text-center rb:text-[24px] rb:font-[MiSans-Bold] rb:font-bold rb:leading-8 rb:mb-12">{t('login.welcome')}</div>
           <Form
             form={form}
             onFinish={handleLogin}
           >
-            <Form.Item name="email" className="rb:mb-5!">
+            <Form.Item name="email" className="rb:mb-6!">
               <Input
                 prefix={<img src={email} className="rb:w-5 rb:h-5 rb:mr-2" />}
                 placeholder={t('login.emailPlaceholder')}
                 className={inputClassName}
               />
             </Form.Item>
-            <Form.Item name="password">
+            <Form.Item name="password" className="rb:mb-0!">
               <Input.Password
                 prefix={<img src={lock} className="rb:w-5 rb:h-5 rb:mr-2" />}
                 placeholder={t('login.passwordPlaceholder')}
@@ -111,7 +121,11 @@ const inputClassName = "rb:rounded-[8px]! rb:p-[12px]! rb:h-[44px]!"
               block
               loading={loading}
               htmlType="submit"
-              className="rb:h-10! rb:rounded-lg! rb:mt-4"
+              disabled={!canLogin}
+              className={clsx("rb:h-11.5! rb:rounded-lg! rb:mt-12", {
+                'rb:hover:bg-[#2d6ef1]! rb:bg-[#155EEF]! rb:border-[#155EEF]!': canLogin,
+                'rb:bg-[#171719]! rb:border-[#171719]!': !canLogin
+              })}
             >
               {t('login.loginIn')}
             </Button>

web/src/views/ToolManagement/Market.tsx

@@ -361,7 +361,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
               )}
             </Flex>
             <div>
-              <div className="rb:font-[MiSans Bold] rb:font-bold rb:text-[16px] rb:leading-5.5">{source.name}</div>
+              <div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[16px] rb:leading-5.5">{source.name}</div>
               <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5">{t('tool.availableMcp')} ({mcpTotal})</div>
             </div>
           </Flex>