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

style: ui style

Browse Source
This commit is contained in:
jialin
2024-07-02 15:03:38 +08:00
parent 6989345088
commit 49efbd1a7f
38 changed files with 336 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard/components/active-table.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ const ActiveTable = () => {
<Row gutter={[20, 0]}>
<Col xs={24} sm={24} md={24} lg={24} xl={24}>
<PageTools
style={{ margin: '32px 8px' }}
style={{ margin: '26px 0px' }}
left={
<span
style={{ fontSize: 'var(--font-size-large)', padding: '9px 0' }}
src/pages/dashboard/components/over-view.less
+2 -1
View File
@@ -3,8 +3,9 @@
height: 110px;
display: flex;
justify-content: space-around;
box-shadow: var(--box-shadow-base);
// box-shadow: var(--box-shadow-base);
border-radius: var(--ant-border-radius-lg);
// border: 1px solid var(--ant-color-border);
}
}
src/pages/dashboard/components/over-view.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const renderCardItem = (data: {
const { label, value, bgColor } = data;
return (
<Card
bordered={false}
bordered={true}
style={{ background: bgColor }}
className={styles['card-body']}
>
src/pages/dashboard/components/system-load.tsx
+1 -6
View File
@@ -11,11 +11,6 @@ import { DashboardContext } from '../config/dashboard-context';
import ResourceUtilization from './resource-utilization';
const SystemLoad = () => {
const colors = [
'linear-gradient(90deg, rgba(84, 204, 152,.8) 0%, rgba(84, 204, 152,0.5) 50%, rgba(84, 204, 152,.8) 100%)',
'linear-gradient(90deg, rgba(255, 214, 102,.8) 0%, rgba(255, 214, 102,0.5) 50%, rgba(255, 214, 102,.8) 100%)',
'linear-gradient(90deg, rgba(255, 120, 117,.8) 0%, rgba(255, 120, 117,0.5) 50%, rgba(255, 120, 117,.8) 100%)'
];
const intl = useIntl();
const data = useContext(DashboardContext)?.system_load?.current || {};
const { size } = useWindowResize();
@@ -39,7 +34,7 @@ const SystemLoad = () => {
<div>
<div className="system-load">
<PageTools
style={{ margin: '32px 8px' }}
style={{ margin: '26px 0px' }}
left={
<span style={{ fontSize: 'var(--font-size-large)' }}>
{intl.formatMessage({ id: 'dashboard.systemload' })}
src/pages/dashboard/components/usage.tsx
+7 -1
View File
@@ -225,6 +225,10 @@ const Usage = () => {
setUserData(userList);
};
const labelFormatter = (v: any) => {
return dayjs(v).format('MM-DD');
};
useEffect(() => {
if (size.width < breakpoints.xl) {
setPaddingRight('0');
@@ -240,7 +244,7 @@ const Usage = () => {
return (
<>
<PageTools
style={{ margin: '32px 8px' }}
style={{ margin: '26px 0px' }}
left={
<span style={{ fontSize: 'var(--font-size-large)' }}>
{intl.formatMessage({ id: 'dashboard.usage' })}
@@ -272,6 +276,7 @@ const Usage = () => {
xField="time"
yField="value"
height={360}
labelFormatter={labelFormatter}
></AreaChart>
</Col>
<Col span={12}>
@@ -285,6 +290,7 @@ const Usage = () => {
legend={false}
yField="value"
height={360}
labelFormatter={labelFormatter}
></ColumnBar>
</Col>
</Row>
src/pages/login/components/login-form.tsx
+57 -13
View File
@@ -1,13 +1,23 @@
import LogoIcon from '@/assets/images/logo.png';
import { initialPasswordAtom, userAtom } from '@/atoms/user';
import SealInput from '@/components/seal-form/seal-input';
import {
getRememberMe,
rememberMe,
removeRememberMe
} from '@/utils/localstore/index';
import { GlobalOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
import { SelectLang, history, useIntl, useModel } from '@umijs/max';
import { Button, Checkbox, Form } from 'antd';
import CryptoJS from 'crypto-js';
import { useAtom } from 'jotai';
import { useEffect } from 'react';
import { flushSync } from 'react-dom';
import { login } from '../apis';
const REMEMBER_ME_KEY = 'r_m';
const CRYPT_TEXT = 'seal';
const renderLogo = () => {
return (
<div
@@ -28,7 +38,6 @@ const LoginForm = () => {
const [userInfo, setUserInfo] = useAtom(userAtom);
const [initialPassword, setInitialPassword] = useAtom(initialPasswordAtom);
const { initialState, setInitialState } = useModel('@@initialState');
const { globalState, setGlobalState } = useModel('global');
const intl = useIntl();
const [form] = Form.useForm();
@@ -51,28 +60,65 @@ const LoginForm = () => {
return userInfo;
};
const encryptPassword = (password: string) => {
const psw = CryptoJS.AES?.encrypt?.(password, CRYPT_TEXT).toString();
return psw;
};
const decryptPassword = (password: string) => {
const bytes = CryptoJS.AES?.decrypt?.(password, CRYPT_TEXT);
const res = bytes.toString(CryptoJS.enc.Utf8);
return res;
};
const callRememberMe = async (values: any) => {
const { autoLogin } = values;
if (autoLogin) {
await rememberMe(REMEMBER_ME_KEY, {
um: encryptPassword(values.username),
pw: encryptPassword(values.password),
f: true
});
} else {
await removeRememberMe(REMEMBER_ME_KEY);
}
};
const callGetRememberMe = async () => {
const rememberMe = await getRememberMe(REMEMBER_ME_KEY);
if (rememberMe?.f) {
const username = decryptPassword(rememberMe?.um);
const password = decryptPassword(rememberMe?.pw);
form.setFieldsValue({ username, password, autoLogin: true });
}
};
const handleLogin = async (values: any) => {
console.log('values', values, form);
try {
await login({
username: values.username,
password: values.password
});
const userInfo = await fetchUserInfo();
setGlobalState({
userInfo
});
setUserInfo(userInfo);
setInitialPassword(values.password);
if (values.autoLogin) {
await callRememberMe(values);
} else {
await removeRememberMe(REMEMBER_ME_KEY);
}
if (!userInfo?.require_password_change) {
gotoDefaultPage(userInfo);
}
// gotoDefaultPage(userInfo);
} catch (error) {
console.log('error====', error);
// to do something
}
};
useEffect(() => {
callGetRememberMe();
}, []);
return (
<div>
<div style={{ position: 'fixed', right: 0, top: 0, padding: '0 20px' }}>
@@ -119,12 +165,10 @@ const LoginForm = () => {
label={intl.formatMessage({ id: 'common.form.password' })}
/>
</Form.Item>
<Form.Item name="autoLogin">
<div style={{ paddingLeft: 10 }}>
<Checkbox>
{intl.formatMessage({ id: 'common.login.rember' })}
</Checkbox>
</div>
<Form.Item name="autoLogin" valuePropName="checked">
<Checkbox style={{ marginLeft: 10 }}>
{intl.formatMessage({ id: 'common.login.rember' })}
</Checkbox>
</Form.Item>
<Button htmlType="submit" type="primary" block>
{intl.formatMessage({ id: 'menu.login' })}
src/pages/login/index.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const Login = () => {
}, [userInfo]);
return (
<div>
<div className="login-wrapper">
{userInfo?.require_password_change ? <PasswordForm /> : <LoginForm />}
</div>
);
src/pages/playground/components/chat-footer.tsx
+8
View File
@@ -39,6 +39,13 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
},
{ enabled: !disabled }
);
useHotkeys(
HotKeys.CREATE.join(','),
(e) => {
onNewMessage();
},
{ enabled: !disabled }
);
return (
<div className="chat-footer">
@@ -52,6 +59,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
onClick={onNewMessage}
>
{intl.formatMessage({ id: 'playground.newMessage' })}
<span className="m-l-5 opct-7">CTRL+SHIFT+ N</span>
</Button>
<Button
icon={<DeleteOutlined></DeleteOutlined>}
src/pages/playground/components/json
View File
src/pages/playground/style/chat-footer.less
-3
View File
@@ -1,7 +1,4 @@
.chat-footer {
display: flex;
align-items: center;
padding-inline: 0 32px;
height: 100px;
// box-shadow: 0px -1px 2px 0px var(--ant-color-border);
}
src/pages/playground/style/custom-label.less
+2 -1
View File
@@ -9,8 +9,9 @@
top: -14px;
right: 26px;
width: 80px;
border-radius: var(--border-radius-small);
border-radius: 8px;
text-align: center;
border: 1px solid var(--ant-color-border) !important;
:global(.ant-input-number-input) {
text-align: center !important;
src/pages/playground/style/ground-left.less
+8 -5
View File
@@ -1,7 +1,10 @@
.ground-left {
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
height: calc(100vh - 84px);
padding-bottom: 120px;
height: calc(100vh - 136px);
// padding-bottom: 120px;
padding-right: 32px;
.message-list-wrap {
@@ -10,8 +13,8 @@
}
.ground-left-footer {
position: absolute;
bottom: 20px;
width: 100%;
// position: absolute;
// bottom: 20px;
// width: 100%;
}
}
src/pages/playground/style/play-ground.less
+2 -2
View File
@@ -9,8 +9,8 @@
}
.params {
// width: 465px;
padding: 20px;
padding-top: 0;
}
.divider-line {
@@ -18,7 +18,7 @@
.ant-divider {
margin: 0;
min-height: calc(100vh - 84px);
min-height: calc(100vh - 136px);
}
}
}
src/pages/resources/index.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ const Resources = () => {
}}
extra={[]}
>
<div style={{ marginTop: 70 }}>
<div style={{ marginTop: 60 }}>
<Tabs
type="card"
defaultActiveKey="workers"