root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(style): global theme settings in login

Browse Source
This commit is contained in:
jialin
2025-04-28 18:22:05 +08:00
parent bcfa80a2d5
commit beb395ce32
17 changed files with 165 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/deploy-modal.tsx
+18 -3
View File
@@ -132,6 +132,7 @@ const AddModal: FC<AddModalProps> = (props) => {
}
return categories || null;
};
const handleSelectModelFile = (item: any, evaluate?: boolean) => {
form.current?.form?.resetFields(resetFields);
const modelInfo = onSelectModel(selectedModel, props.source);
@@ -142,7 +143,11 @@ const AddModal: FC<AddModalProps> = (props) => {
categories: getCategory(item)
});
if (item.fakeName) {
if (
item.fakeName &&
!isHolderRef.current.model &&
!isHolderRef.current.file
) {
handleShowCompatibleAlert(item.evaluateResult);
}
};
@@ -153,7 +158,9 @@ const AddModal: FC<AddModalProps> = (props) => {
setIsGGUF(false);
form.current?.form?.resetFields(resetFields);
const modelInfo = onSelectModel(item, props.source);
handleShowCompatibleAlert(item.evaluateResult);
if (!isHolderRef.current.model) {
handleShowCompatibleAlert(item.evaluateResult);
}
form.current?.setFieldsValue?.({
...getDefaultSpec(item),
...modelInfo,
@@ -256,7 +263,15 @@ const AddModal: FC<AddModalProps> = (props) => {
const displayEvaluateStatus = (data: {
show?: boolean;
flag: Record<string, boolean>;
}) => {};
}) => {
setIsHolderRef(data.flag);
setWarningStatus({
show: isHolderRef.current.model || isHolderRef.current.file,
title: '',
type: 'transition',
message: intl.formatMessage({ id: 'models.form.evaluating' })
});
};
useEffect(() => {
if (open) {
src/pages/llmodels/style/model-card.less
-1
View File
@@ -28,7 +28,6 @@
.mkd-title {
cursor: pointer;
background-color: var(--ant-color-fill-tertiary);
border-bottom: 1px solid rgba(255, 255, 255, 10%);
display: flex;
justify-content: space-between;
align-items: center;
src/pages/login/components/login-form.tsx
+23 -8
View File
@@ -2,6 +2,7 @@ import LogoIcon from '@/assets/images/gpustack-logo.png';
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 {
CRYPT_TEXT,
REMEMBER_ME_KEY,
@@ -12,6 +13,7 @@ import {
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useIntl, useModel } from '@umijs/max';
import { Button, Checkbox, Form } from 'antd';
import { createStyles } from 'antd-style';
import CryptoJS from 'crypto-js';
import { useAtom } from 'jotai';
import { useEffect, useMemo } from 'react';
@@ -19,7 +21,26 @@ import { flushSync } from 'react-dom';
import { login } from '../apis';
import { checkDefaultPage } from '../utils';
const useStyles = createStyles(({ token, css }) => ({
header: css`
display: flex;
align-items: center;
gap: 8px;
position: fixed;
right: 0;
top: 0;
padding: 20px;
.anticon-global {
color: ${token.colorText};
}
.anticon:hover {
color: ${token.colorTextTertiary};
}
`
}));
const LoginForm = () => {
const { styles } = useStyles();
const [userInfo, setUserInfo] = useAtom(userAtom);
const [initialPassword, setInitialPassword] = useAtom(initialPasswordAtom);
const { initialState, setInitialState } = useModel('@@initialState') || {};
@@ -130,14 +151,8 @@ const LoginForm = () => {
return (
<div>
<div
style={{
position: 'fixed',
right: 0,
top: 0,
padding: '20px'
}}
>
<div className={styles.header}>
<ThemeToggle></ThemeToggle>
<LangSelect />
</div>
<div>
src/pages/login/index.tsx
+12 -13
View File
@@ -11,7 +11,7 @@ import LoginForm from './components/login-form';
import PasswordForm from './components/password-form';
import { checkDefaultPage } from './utils';
const Wrapper = styled.div`
const Wrapper = styled.div<{ $isDarkTheme: boolean }>`
position: fixed;
top: 0;
left: 0;
@@ -19,9 +19,11 @@ const Wrapper = styled.div`
right: 0;
min-height: 100vh;
z-index: -1;
background: url(${Bg2}) center center no-repeat;
background-size: cover;
opacity: 0.6;
background: ${({ $isDarkTheme }) =>
$isDarkTheme
? `repeating-linear-gradient(45deg, #000, transparent 120px)`
: `url(${Bg2}) center center /cover no-repeat`};
opacity: ${({ $isDarkTheme }) => ($isDarkTheme ? 1 : 0.6)};
`;
const Box = styled.div`
@@ -38,7 +40,7 @@ const FormWrapper = styled.div`
width: max-content;
height: max-content;
padding: 32px;
background-color: var(--ant-modal-content-bg);
background-color: var(--color-modal-content-bg);
.field-wrapper {
background-color: transparent !important;
@@ -50,15 +52,10 @@ const FormWrapper = styled.div`
`;
const Login = () => {
const { themeData, userSettings } = useUserSettings();
const { token } = theme.useToken();
const { themeData, userSettings, isDarkTheme } = useUserSettings();
const [userInfo, setUserInfo] = useAtom(userAtom);
const { initialState, setInitialState } = useModel('@@initialState') || {};
const globalCssvars: Record<string, any> = {
'--ant-modal-content-bg': 'rgba(255, 255, 255, 0.9)'
};
const gotoDefaultPage = async (userInfo: any) => {
if (!userInfo || userInfo?.require_password_change) {
return;
@@ -72,9 +69,11 @@ const Login = () => {
}));
}
};
useEffect(() => {
gotoDefaultPage(userInfo);
}, [userInfo]);
useEffect(() => {
document.title = 'GPUStack';
}, []);
@@ -90,8 +89,8 @@ const Login = () => {
...themeData
}}
>
<div style={globalCssvars}>
<Wrapper></Wrapper>
<div>
<Wrapper $isDarkTheme={isDarkTheme}></Wrapper>
<Box>
<FormWrapper>
{userInfo?.require_password_change ? (
src/pages/playground/components/ground-images.tsx
+1 -9
View File
@@ -158,15 +158,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}
const params = {
..._.omitBy(
parameters,
(value: string, key: string) =>
!value || ['width', 'height', 'seed'].includes(key)
),
size:
parameters.size === 'custom'
? `${parameters.width}x${parameters.height}`
: parameters.size,
..._.omitBy(finalParameters, (value: string) => !value),
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true,
stream_options: {
src/pages/playground/components/image-edit.tsx
+1 -1
View File
@@ -154,7 +154,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
prompt: currentPrompt
}
});
}, [finalParameters, currentPrompt, parameters.size]);
}, [finalParameters, currentPrompt, isOpenaiCompatible]);
const handleClear = () => {
setCurrentPrompt('');
src/pages/profile/backup.tsx
-135
View File
@@ -1,135 +0,0 @@
import FormButtons from '@/components/form-buttons';
import SealInput from '@/components/seal-form/seal-input';
import { PasswordReg } from '@/config';
import { INPUT_WIDTH } from '@/constants';
import { updatePassword } from '@/pages/login/apis';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React from 'react';
interface ProfileProps {
username?: string;
new_password: string;
current_password: string;
}
const Profile: React.FC = () => {
const [form] = Form.useForm();
const intl = useIntl();
const handleOnFinish = async (values: any) => {
try {
await updatePassword({
new_password: values.new_password,
current_password: values.current_password
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {}
};
const handleOnFinishFailed = (errorInfo: any) => {
console.log('handleOnFinishFailed', errorInfo);
};
const handleCancel = () => {
form.resetFields();
};
return (
<PageContainer
ghost
header={{
title: intl.formatMessage({ id: 'users.form.updatepassword' }),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
}
}}
extra={[]}
>
<Form
style={{ width: '524px' }}
name="profileForm"
form={form}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
>
<Form.Item<ProfileProps>
name="current_password"
rules={[
{
required: true,
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{
name: intl.formatMessage({
id: 'users.form.currentpassword'
})
}
)
}
]}
>
<SealInput.Password
label={intl.formatMessage({ id: 'users.form.currentpassword' })}
required
style={{ width: INPUT_WIDTH.default }}
></SealInput.Password>
</Form.Item>
<Form.Item<ProfileProps>
name="new_password"
rules={[
{
required: true,
pattern: PasswordReg,
message: intl.formatMessage({
id: 'users.form.rule.password'
})
}
]}
>
<SealInput.Password
label={intl.formatMessage({ id: 'users.form.newpassword' })}
required
style={{ width: INPUT_WIDTH.default }}
></SealInput.Password>
</Form.Item>
<Form.Item
name="confirm_password"
dependencies={['new_password']}
rules={[
{
required: true,
message: intl.formatMessage({
id: 'users.password.confirm.empty'
})
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('new_password') === value) {
return Promise.resolve();
}
return Promise.reject(
new Error(
intl.formatMessage({ id: 'users.password.confirm.error' })
)
);
}
})
]}
>
<SealInput.Password
required={true}
style={{ width: INPUT_WIDTH.default }}
label={intl.formatMessage({ id: 'users.password.confirm' })}
/>
</Form.Item>
<FormButtons
htmlType="submit"
onCancel={handleCancel}
showCancel={false}
></FormButtons>
</Form>
</PageContainer>
);
};
export default Profile;
src/pages/profile/components/appearance.tsx
+6 -2
View File
@@ -17,14 +17,18 @@ const ThemeOptions = [
}
];
const Appearance: React.FC = () => {
const { setTheme } = useUserSettings();
const { setTheme, userSettings } = useUserSettings();
const intl = useIntl();
const handleOnChange = (e: any) => {
setTheme(e.target.value);
};
return (
<Radio.Group onChange={handleOnChange} style={{ marginTop: 16 }}>
<Radio.Group
onChange={handleOnChange}
style={{ marginTop: 16 }}
value={userSettings.theme}
>
{ThemeOptions.map((item) => (
<Radio key={item.key} value={item.key}>
{intl.formatMessage({ id: item.label })}
src/pages/resources/components/model-files.tsx
+17 -4
View File
@@ -546,6 +546,9 @@ const ModelFiles = () => {
{
title: intl.formatMessage({ id: 'models.form.source' }),
dataIndex: 'source',
ellipsis: {
showTitle: false
},
render: (text: string, record: ListItem) => {
const modelInfo = getModelInfo(record);
const { repo_id } = modelInfo;
@@ -561,6 +564,9 @@ const ModelFiles = () => {
{
title: 'Worker',
dataIndex: 'worker_name',
ellipsis: {
showTitle: false
},
render: (text: string, record: ListItem) => {
return (
<AutoTooltip ghost>
@@ -581,6 +587,9 @@ const ModelFiles = () => {
title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
dataIndex: 'resolved_paths',
width: '35%',
ellipsis: {
showTitle: false
},
render: (text: string, record: ListItem) => (
<ResolvedPathColumn record={record} />
)
@@ -588,10 +597,12 @@ const ModelFiles = () => {
{
title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
dataIndex: 'size',
width: 100,
ellipsis: {
showTitle: false
},
render: (text: string, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={100}>
<AutoTooltip ghost>
<span>{convertFileSize(record.size, 1, true)}</span>
</AutoTooltip>
);
@@ -601,9 +612,11 @@ const ModelFiles = () => {
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
sorter: false,
width: 180,
ellipsis: {
showTitle: false
},
render: (text: number) => (
<AutoTooltip ghost>
<AutoTooltip ghost minWidth={20}>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
</AutoTooltip>
)