From 204385a7bf9f266515c70b6a28be2382301f556e Mon Sep 17 00:00:00 2001 From: balibabu Date: Fri, 29 Mar 2024 16:15:12 +0800 Subject: [PATCH] feat: add background image to login page and alter tooltip of base_url and add llm type to Added models List (#173) * feat: add llm type to Added models List * feat: alter tooltip of base_url * feat: add background image to login page --- web/src/assets/svg/login-avatars.svg | 90 ++++++++++++++++++ web/src/assets/svg/login-background.svg | 10 ++ web/src/assets/svg/login-star.svg | 11 +++ web/src/global.less | 1 + web/src/pages/login/index.less | 91 ++++++++++++++----- web/src/pages/login/index.tsx | 8 +- web/src/pages/login/right-panel.tsx | 46 ++++++++++ .../setting-model/api-key-modal/index.tsx | 5 +- .../user-setting/setting-model/index.tsx | 9 +- 9 files changed, 244 insertions(+), 27 deletions(-) create mode 100644 web/src/assets/svg/login-avatars.svg create mode 100644 web/src/assets/svg/login-background.svg create mode 100644 web/src/assets/svg/login-star.svg create mode 100644 web/src/pages/login/right-panel.tsx diff --git a/web/src/assets/svg/login-avatars.svg b/web/src/assets/svg/login-avatars.svg new file mode 100644 index 000000000..d235c326a --- /dev/null +++ b/web/src/assets/svg/login-avatars.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web/src/assets/svg/login-background.svg b/web/src/assets/svg/login-background.svg new file mode 100644 index 000000000..ca0269da7 --- /dev/null +++ b/web/src/assets/svg/login-background.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/web/src/assets/svg/login-star.svg b/web/src/assets/svg/login-star.svg new file mode 100644 index 000000000..09a8d3d41 --- /dev/null +++ b/web/src/assets/svg/login-star.svg @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/web/src/global.less b/web/src/global.less index 70714eae7..5a3fd95f7 100644 --- a/web/src/global.less +++ b/web/src/global.less @@ -2,4 +2,5 @@ body { font-family: Inter; + margin: 0; } diff --git a/web/src/pages/login/index.less b/web/src/pages/login/index.less index 82f3c20cc..e1b5ef9cb 100644 --- a/web/src/pages/login/index.less +++ b/web/src/pages/login/index.less @@ -1,32 +1,77 @@ @import '../../theme/vars'; .loginPage { - // width: 100%; display: flex; - .loginLeft { // width: 610px; width: 40%; background-color: #fff; height: 100vh; + display: flex; + align-items: center; } - @media screen and (max-width: 957px) { - .loginLeft { - // width: 610px; - width: 100%; - background-color: #fff; - height: 100vh; - } - - .modal { - width: 80%; - } + .leftContainer { + width: 60%; + padding: 5px, 0px, 5px, 0px; + margin: 0 auto; } .loginRight { + display: flex; + align-items: center; + justify-content: center; flex: 1; - background-color: #f2f4f7; + position: relative; + &::before { + content: ' '; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(24, 73, 169, 0.6); + background-image: url('@/assets/svg/login-background.svg'); + background-size: cover; + background-blend-mode: multiply; + filter: blur(3px); + background-position: center; + z-index: -1; + } + .white { + color: #fff; + } + .pink { + color: #e9d7fe; + } + .rightPanel { + max-width: 640px; + .loginTitle { + font-size: 72px; + font-style: normal; + font-weight: 600; + line-height: 90px; + letter-spacing: -1.44px; + } + .loginDescription { + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 30px; + } + .loginRateNumber { + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; + } + .loginRateReviews { + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + } + } } .loginTitle { @@ -46,12 +91,16 @@ color: #000000a6; } } -} -.modal { - // width: 360px; - width: 60%; - height: 724px; - padding: 5px, 0px, 5px, 0px; - margin: 80px auto; + @media screen and (max-width: 957px) { + .loginLeft { + width: 100%; + background-color: #fff; + height: 100%; + } + + .modal { + width: 80%; + } + } } diff --git a/web/src/pages/login/index.tsx b/web/src/pages/login/index.tsx index cb6aa4130..5a89c98d2 100644 --- a/web/src/pages/login/index.tsx +++ b/web/src/pages/login/index.tsx @@ -2,6 +2,8 @@ import { rsaPsw } from '@/utils'; import { Button, Checkbox, Form, Input } from 'antd'; import { useEffect, useState } from 'react'; import { Icon, useDispatch, useNavigate, useSelector } from 'umi'; +import RightPanel from './right-panel'; + import styles from './index.less'; const Login = () => { @@ -73,7 +75,7 @@ const Login = () => { return (
-
+
{title === 'login' ? 'Sign in' : 'Create an account'}
@@ -189,7 +191,9 @@ const Login = () => {
-
+
+ +
); }; diff --git a/web/src/pages/login/right-panel.tsx b/web/src/pages/login/right-panel.tsx new file mode 100644 index 000000000..f40725670 --- /dev/null +++ b/web/src/pages/login/right-panel.tsx @@ -0,0 +1,46 @@ +import { ReactComponent as Avatars } from '@/assets/svg/login-avatars.svg'; +import SvgIcon from '@/components/svg-icon'; +import { Flex, Rate, Space, Typography } from 'antd'; +import classNames from 'classnames'; + +import styles from './index.less'; + +const { Title, Text } = Typography; + +const LoginRightPanel = () => { + return ( +
+ + + + Start building your smart assisstants. + + + Sign up for free to explore top RAG technology. Create knowledge bases + and AIs to empower your business. + + + + + + + + 5.0 + + + + from 500+ reviews + + + + +
+ ); +}; + +export default LoginRightPanel; diff --git a/web/src/pages/user-setting/setting-model/api-key-modal/index.tsx b/web/src/pages/user-setting/setting-model/api-key-modal/index.tsx index b77d68e95..e4270e423 100644 --- a/web/src/pages/user-setting/setting-model/api-key-modal/index.tsx +++ b/web/src/pages/user-setting/setting-model/api-key-modal/index.tsx @@ -78,10 +78,9 @@ const ApiKeyModal = ({ label="Base-Url" name="base_url" - tooltip="The API key can be obtained by registering the corresponding LLM supplier." - rules={[{ required: true, message: 'Please input base url!' }]} + tooltip="If your API key is from OpenAI, just ignore it. Any other intermediate providers will give this base url with the API key." > - + )} diff --git a/web/src/pages/user-setting/setting-model/index.tsx b/web/src/pages/user-setting/setting-model/index.tsx index 17c7e1574..4c8d2e8fe 100644 --- a/web/src/pages/user-setting/setting-model/index.tsx +++ b/web/src/pages/user-setting/setting-model/index.tsx @@ -24,6 +24,7 @@ import { Row, Space, Spin, + Tag, Typography, } from 'antd'; import { useCallback } from 'react'; @@ -105,7 +106,13 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => { size="small" dataSource={item.llm} className={styles.llmList} - renderItem={(item) => {item.name}} + renderItem={(item) => ( + + + {item.name} {item.type} + + + )} /> )}