From f0f4bd8bf28077337211954bfe109a9d5921012e Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 8 May 2025 15:03:24 +0800 Subject: [PATCH] style: login modal --- src/components/footer/index.tsx | 40 ++++++++++++-------- src/constants/external-links.ts | 4 +- src/global.less | 4 +- src/locales/en-US/common.ts | 3 +- src/locales/ja-JP/common.ts | 4 +- src/locales/ru-RU/common.ts | 4 +- src/locales/zh-CN/common.ts | 3 +- src/pages/login/components/login-form.tsx | 30 +++++++++++---- src/pages/login/components/password-form.tsx | 2 +- src/pages/login/index.tsx | 2 +- 10 files changed, 65 insertions(+), 31 deletions(-) diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index b77e5448..f0dbc033 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -3,8 +3,16 @@ import { getAtomStorage } from '@/atoms/utils'; import VersionInfo, { modalConfig } from '@/components/version-info'; import externalLinks from '@/constants/external-links'; import { useIntl } from '@umijs/max'; -import { Button, Modal, Space } from 'antd'; +import { Button, Divider, Modal } from 'antd'; import { createStyles } from 'antd-style'; +import styled from 'styled-components'; + +const CompanyWrapper = styled.div` + display: flex; + align-items: center; + gap: 4px; + padding-inline: 0 8px; +`; const useStyles = createStyles(({ token, css }) => ({ footer: css` @@ -43,24 +51,24 @@ const Footer: React.FC = () => {
- + © {new Date().getFullYear()} {intl.formatMessage({ id: 'settings.company' })} - - - - - + + + + +
diff --git a/src/constants/external-links.ts b/src/constants/external-links.ts index 45789958..e34a0eb6 100644 --- a/src/constants/external-links.ts +++ b/src/constants/external-links.ts @@ -5,7 +5,9 @@ const externalLinks = { site: 'https://gpustack.ai/', release: 'https://github.com/gpustack/gpustack/releases', reportIssue: 'https://github.com/gpustack/gpustack/issues/new/choose', - faq: 'https://docs.gpustack.ai/latest/faq/' + faq: 'https://docs.gpustack.ai/latest/faq/', + resetPassword: + 'https://docs.gpustack.ai/latest/troubleshooting/?h=reset#reset-admin-password' }; export default externalLinks; diff --git a/src/global.less b/src/global.less index 53beb7f3..510f3338 100644 --- a/src/global.less +++ b/src/global.less @@ -25,7 +25,7 @@ html { --layout-content-blockpadding: 32px; --layout-content-inlinepadding: 32px; --layout-content-header-inlinepadding: 40px; - --border-radius-modal: 6px; + --border-radius-modal: 12px; --menu-border-radius-base: 4px; --border-radius-base: 4px; --border-radius-middle: 20px; @@ -75,6 +75,7 @@ html { --width-tooltip-max: 300px; --color-bg-tooltip: '#fff'; --color-modal-content-bg: rgba(255, 255, 255, 90%); + --color-modal-box-shadow: 0 4px 16px rgba(0, 0, 0, 10%); // ======== input ============ --box-shadow-base: 0 4px 6px rgba(227, 232, 240, 70%); --ant-border-radius-lg: 4px; @@ -95,6 +96,7 @@ html[data-theme='realDark'] { --color-editor-header-bg: #292929; --color-progress-text: rgba(255, 255, 255, 80%); --color-modal-content-bg: #1f1f1f; + --color-modal-box-shadow: none; background: #141414; diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index e277f8f5..f4095ce6 100644 --- a/src/locales/en-US/common.ts +++ b/src/locales/en-US/common.ts @@ -242,5 +242,6 @@ export default { 'common.exception.404': 'Sorry, the page you visited does not exist.', 'common.appearance.darkmode': 'Dark Mode', 'common.appearance.lightmode': 'Light Mode', - 'common.appearance.tips': 'Default follows system preference.' + 'common.appearance.tips': 'Default follows system preference.', + 'common.button.forgotpassword': 'Forgot password?' }; diff --git a/src/locales/ja-JP/common.ts b/src/locales/ja-JP/common.ts index 87049b42..b3b2a157 100644 --- a/src/locales/ja-JP/common.ts +++ b/src/locales/ja-JP/common.ts @@ -242,7 +242,8 @@ export default { 'common.exception.404': 'Sorry, the page you visited does not exist.', 'common.appearance.darkmode': 'Dark Mode', 'common.appearance.lightmode': 'Light Mode', - 'common.appearance.tips': 'Default follows system preference.' + 'common.appearance.tips': 'Default follows system preference.', + 'common.button.forgotpassword': 'Forgot password?' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== @@ -254,4 +255,5 @@ export default { // 6. 'common.appearance.darkmode': 'Dark Mode', // 7. 'common.appearance.lightmode': 'Light Mode', // 8. 'common.appearance.tips': 'Default follows system preference.' +// 9. 'common.button.forgotpassword': 'Forgot Password?' // ========== End of To-Do List ========== diff --git a/src/locales/ru-RU/common.ts b/src/locales/ru-RU/common.ts index 4ecefa20..6b3e1187 100644 --- a/src/locales/ru-RU/common.ts +++ b/src/locales/ru-RU/common.ts @@ -240,7 +240,8 @@ export default { 'common.exception.404': 'Sorry, the page you visited does not exist.', 'common.appearance.darkmode': 'Dark Mode', 'common.appearance.lightmode': 'Light Mode', - 'common.appearance.tips': 'Default follows system preference.' + 'common.appearance.tips': 'Default follows system preference.', + 'common.button.forgotpassword': 'Forgot password?' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== @@ -248,4 +249,5 @@ export default { // 2. 'common.appearance.darkmode': 'Dark Mode', // 3. 'common.appearance.lightmode': 'Light Mode', // 4. 'common.appearance.tips': 'Default follows system preference.' +// 5. 'common.button.forgotpassword': 'Forgot Password?' // ========== End of To-Do List ========== diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts index 841f3b04..9f9fed5c 100644 --- a/src/locales/zh-CN/common.ts +++ b/src/locales/zh-CN/common.ts @@ -237,5 +237,6 @@ export default { 'common.exception.404': '抱歉，你访问的页面不存在', 'common.appearance.darkmode': '深色模式', 'common.appearance.lightmode': '浅色模式', - 'common.appearance.tips': '默认跟随系统设置' + 'common.appearance.tips': '默认跟随系统设置', + 'common.button.forgotpassword': '忘记密码？' }; diff --git a/src/pages/login/components/login-form.tsx b/src/pages/login/components/login-form.tsx index 0f78e5b8..93651466 100644 --- a/src/pages/login/components/login-form.tsx +++ b/src/pages/login/components/login-form.tsx @@ -3,6 +3,7 @@ import { initialPasswordAtom, userAtom } from '@/atoms/user'; import LangSelect from '@/components/lang-select'; import SealInput from '@/components/seal-form/seal-input'; import ThemeToggle from '@/components/theme-toggle'; +import externalLinks from '@/constants/external-links'; import { CRYPT_TEXT, REMEMBER_ME_KEY, @@ -158,7 +159,7 @@ const LoginForm = () => {
{renderWelCome} @@ -198,12 +199,27 @@ const LoginForm = () => { /> - - - {' '} - {intl.formatMessage({ id: 'common.login.rember' })} - - +
+ + + {intl.formatMessage({ id: 'common.login.rember' })} + + + +

diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 8665ab32..13b67ea4 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -44,7 +44,7 @@ const FormWrapper = styled.div` height: max-content; padding: 40px; background-color: var(--color-modal-content-bg); - + box-shadow: var(--color-modal-box-shadow); .field-wrapper { background-color: transparent !important; }