pucmnw7fs
/
gpustack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: ajust dark theme

Browse Source
main
jialin 12 months ago
parent 60d0750695
commit 3fb3381a19
26 changed files with 274 additions and 221 deletions
Show Stats Download Patch File Download Diff File

4
src/assets/styles/common.less
Unescape View File

@ -311,3 +311,7 @@ textarea:hover {
color: var(--ant-color-text);
font-weight: var(--font-weight-medium);
}
.ant-result-extra {
color: var(--ant-color-text-secondary);
}

10
src/atoms/settings.ts
Unescape View File

@ -3,19 +3,25 @@ import { atomWithStorage } from 'jotai/utils';
type UserSettings = {
theme: 'light' | 'realDark' | 'auto';
isDarkTheme?: boolean;
};
export const userSettingsAtom = atomWithStorage<UserSettings>('userSettings', {
theme: 'light'
theme: 'light',
isDarkTheme: false
});
export const userSettingsHelperAtom = atom(
(get) => get(userSettingsAtom),
(get, set, update: Partial<UserSettings>) => {
const prev = get(userSettingsAtom);
set(userSettingsAtom, {
const newSettings = {
...prev,
...(update || {})
};
set(userSettingsAtom, {
...newSettings,
isDarkTheme: newSettings.theme === 'realDark'
});
}
);

6
src/components/alert-info/block.less
Unescape View File

@ -29,8 +29,8 @@
}
&.success {
border: 1px solid var(--color-progress-green);
color: var(--color-progress-green);
border: 1px solid var(--ant-color-success);
color: var(--ant-color-success);
background: var(--ant-color-success-bg);
.content.success {
@ -61,7 +61,7 @@
}
&.success {
color: var(--color-progress-green);
color: var(--ant-color-success);
}
}

62
src/components/echarts/bar-chart.tsx
Unescape View File

@ -25,34 +25,31 @@ const BarChart: React.FC<ChartProps> = (props) => {
yAxis
} = useChartConfig();
const options = {
title: {
text: ''
},
grid,
tooltip: {
...tooltip
// axisPointer: {
// type: 'shadow'
// }
},
xAxis: {
...xAxis,
axisLabel: {
...xAxis.axisLabel,
formatter: labelFormatter
const dataOptions = useMemo((): any => {
const options = {
title: {
text: ''
},
grid,
tooltip: {
...tooltip
},
xAxis: {
...xAxis,
axisLabel: {
...xAxis.axisLabel,
formatter: labelFormatter
},
data: []
},
yAxis,
legend: {
...legend,
data: []
},
data: []
},
yAxis,
legend: {
...legend,
data: []
},
series: []
};
const dataOptions = useMemo((): any => {
series: []
};
const data = _.map(seriesData, (item: any) => {
return {
...item,
@ -79,7 +76,18 @@ const BarChart: React.FC<ChartProps> = (props) => {
},
series: data
};
}, [seriesData, xAxisData, title]);
}, [
seriesData,
xAxisData,
title,
labelFormatter,
tooltip,
grid,
xAxis,
yAxis,
legend,
barItemConfig
]);
return (
<>

9
src/components/echarts/config.ts
Unescape View File

@ -29,8 +29,7 @@ export const grid = {
export default function useChartConfig() {
const { userSettings, isDarkTheme } = useUserSettings();
const { useToken } = theme;
const { token, hashId } = useToken();
console.log('token+++++++++++++++', token, hashId);
const { token } = useToken();
const chartColorMap = useMemo(() => {
return {
@ -39,13 +38,13 @@ export default function useChartConfig() {
tickLineColor: token.colorSplit,
axislabelColor: token.colorTextTertiary,
gaugeSplitLineColor: 'rgba(255, 255, 255, 0.38)',
colorBgBase: token.colorBgBase
colorBgContainerHover: isDarkTheme ? '#424242' : '#fff'
};
}, [userSettings.theme]);
}, [userSettings.theme, isDarkTheme]);
const tooltip = {
trigger: 'axis',
backgroundColor: chartColorMap.colorBgBase,
backgroundColor: chartColorMap.colorBgContainerHover,
borderColor: 'transparent',
formatter(params: any, callback?: (val: any) => any) {
let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;

61
src/components/echarts/h-bar.tsx
Unescape View File

@ -24,32 +24,31 @@ const BarChart: React.FC<ChartProps> = (props) => {
yAxis
} = useChartConfig();
const options = {
title: {
...titleConfig,
left: 'start'
},
grid,
tooltip: {
...tooltip
},
xAxis: {
...xAxis,
axisLabel: {
...xAxis.axisLabel,
formatter: labelFormatter
}
},
yAxis,
legend: {
...legend,
data: []
},
series: []
};
const dataOptions = useMemo((): any => {
const options = {
title: {
...titleConfig,
left: 'start'
},
grid,
tooltip: {
...tooltip
},
xAxis: {
...xAxis,
axisLabel: {
...xAxis.axisLabel,
formatter: labelFormatter
}
},
yAxis,
legend: {
...legend,
data: []
},
series: []
};
const data = _.map(seriesData, (item: any) => {
return {
...item,
@ -103,7 +102,17 @@ const BarChart: React.FC<ChartProps> = (props) => {
},
series: data
};
}, [seriesData, xAxisData, title]);
}, [
seriesData,
xAxisData,
title,
labelFormatter,
tooltip,
grid,
xAxis,
yAxis,
legend
]);
return (
<>

2
src/components/icon-font/index.tsx
Unescape View File

@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_uw2djf1vxgf.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_dy3zc0nrfgk.js'
});
export default IconFont;

4
src/components/progress-bar/index.tsx
Unescape View File

@ -1,5 +1,5 @@
import { Progress, Tooltip } from 'antd';
import { memo, useMemo } from 'react';
import React, { memo, useMemo } from 'react';
const RenderProgress = memo(
(props: {
@ -19,7 +19,7 @@ const RenderProgress = memo(
}
if (percent <= 50) {
return 'var(--color-progress-green)';
return 'var(--ant-color-success)';
}
if (percent <= 80) {
return 'var(--ant-color-warning)';

3
src/components/seal-form/wrapper/slider.ts
Unescape View File

@ -6,6 +6,9 @@ const SliderWrapper = styled.div`
height: 100%;
justify-content: center;
}
.borderless {
background-color: transparent;
}
padding-block: 0;
padding-inline: 2px;
input.ant-input-number-input {

2
src/components/status-tag/index.less
Unescape View File

@ -41,7 +41,7 @@
position: relative;
z-index: 10;
// color: var(--ant-color-text);
color: var(--color-progress-green);
color: var(--ant-color-success);
}
}

4
src/config/index.ts
Unescape View File

@ -23,8 +23,8 @@ export const StatusColorMap: Record<
bg: `var(--ant-blue-1)`
},
success: {
text: `var(--color-progress-green)`,
bg: `var(--color-green-fill-light)`
text: `var(--ant-color-success)`,
bg: `var(--ant-color-success-bg)`
},
inactive: {
text: `var(--ant-color-text-tertiary)`,

4
src/config/theme/dark.ts
Unescape View File

@ -33,7 +33,7 @@ export default {
itemHeight: 44,
itemSelectedColor: '#007BFF',
darkItemSelectedBg: '#141414',
darkItemHoverBg: '#141414',
darkItemHoverBg: 'rgba(255, 255, 255, 0.03)',
groupTitleColor: 'rgba(0,0,0,1)',
itemHoverColor: 'rgba(0,0,0,1)',
itemColor: 'rgba(0,0,0,1)',
@ -73,7 +73,7 @@ export default {
"Helvetica Neue, -apple-system, BlinkMacSystemFont, Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
colorText: '#ccc',
colorPrimary: '#007BFF',
colorSuccess: '#54cc98',
// colorSuccess: '#48A77E',
borderRadius: 4,
borderRadiusSM: 2,
fontSize: 14,

92
src/global.less
Unescape View File

@ -4,14 +4,6 @@
@import url('./overrides.less');
html {
// --font-family: 'noto sans', sans-serif;
// --ant-color-text-secondary: rgba(0, 0, 0, 65%);
// --ant-color-text-tertiary: rgba(0, 0, 0, 45%);
// --ant-color-text-quaternary: rgba(0, 0, 0, 25%);
// --ant-color-fill: rgba(223, 168, 168, 15%);
// --ant-color-fill-secondary: rgba(0, 0, 0, 6%);
// --ant-color-fill-tertiary: rgba(0, 0, 0, 4%);
// --ant-color-fill-quaternary: rgba(0, 0, 0, 2%);
--color-text-light-1: rgba(255, 255, 255, 90%);
--color-fill-1: var(--ant-color-bg-container);
--color-scrollbar-thumb: rgba(193, 193, 193, 80%);
@ -71,22 +63,15 @@ html {
--ant-color-error: #ff4d4f;
--ant-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 8%),
0 3px 6px -4px rgba(0, 0, 0, 12%), 0 9px 28px 8px rgba(0, 0, 0, 5%);
// --table-cell-padding-inline: var(--ant-table-cell-padding-inline);
// --table-cell-padding-block: var(--ant-table-cell-padding-block);
// --table-header-border-radius: var(--ant-table-header-border-radius);
// --table-header-split-color: var(--ant-table-header-split-color);
// --table-row-selected-bg: var(--ant-table-row-selected-bg);
// --table-row-selected-hover-bg: var(--ant-table-row-selected-hover-bg);
// --table-row-hover-bg: var(--ant-table-row-hover-bg);
--color-chart-red: rgba(255, 77, 79, 80%);
--color-chart-green: rgb(84, 204, 152, 80%);
--color-chart-glod: rgba(250, 173, 20, 80%);
--seal-transition-func: cubic-bezier(0, 0, 1, 1);
--color-progress-green: rgba(84, 204, 152, 100%);
--color-green-fill-light: rgb(243 251 248);
--ant-rate-star-color: #fadb14;
--color-fill-mask: rgba(255, 255, 255, 60%);
--width-tooltip-max: 300px;
--color-bg-tooltip: '#fff';
// ======== input ============
--ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 6%);
--ant-input-active-border-color: #007bff;
@ -97,63 +82,6 @@ html {
--ant-color-border: #d9d9d9;
--ant-line-type: solid;
--ant-line-width: 1px;
.css-var-rf {
--ant-font-size: var(--font-size-base);
}
.css-var-r0 {
--ant-font-size-sm: var(--font-size-base);
--ant-font-size-lg: var(--font-size-base);
--ant-font-size-xl: 20px;
--ant-font-size: var(--font-size-base);
// --ant-padding-sm: 14px;
// --ant-border-radius-lg: 4px;
// --ant-color-text: #000;
// --ant-color-error: #ff4d4f;
// --ant-color-bg-mask: rgba(0, 0, 0, 35%);
// --ant-color-border: blue;
&.ant-popover {
--ant-popover-inner-padding: 26px;
--ant-popover-title-margin-bottom: 22px;
}
&.ant-btn {
--ant-button-content-font-size-lg: 12px;
--ant-button-content-font-size: 12px;
--ant-button-content-font-size-sm: 12px;
}
&.ant-table-css-var {
// --ant-table-row-hover-bg: rgb(249 249 249);
}
&.ant-progress {
--ant-progress-line-border-radius: 2px;
}
&.ant-modal-css-var {
--ant-modal-title-font-size: 14px;
--ant-modal-header-margin-bottom: 20px;
--ant-modal-footer-margin-top: 30px;
--ant-modal-content-padding: 20px 24px 24px;
--ant-modal-title-color: var(--ant-color-text);
}
}
.css-var-rf.ant-menu-css-var,
.css-var-ri.ant-menu-css-var,
.css-var-rh.ant-menu-css-var {
--ant-menu-item-color: var(--ant-color-text);
}
.css-var-r0.ant-input-css-var {
--ant-input-input-font-size: var(--font-size-base);
--ant-input-input-font-size-lg: var(--font-size-base);
--ant-input-input-font-size-sm: var(--font-size-base);
--ant-input-padding-inline-lg: 14px;
}
}
html[data-theme='realDark'] {
@ -163,6 +91,7 @@ html[data-theme='realDark'] {
--color-editor-dark: #141414;
--color-editor-light: #fafafa;
--color-fill-mask: rgba(255, 255, 255, 10%);
--color-bg-tooltip: #424242;
background: #141414;
}
@ -334,10 +263,6 @@ body {
}
.ant-table-content table {
.ant-table-thead > tr > th {
// background-color: unset;
}
.ant-table-tbody {
.ant-table-row {
border-radius: var(--table-td-radius);
@ -690,19 +615,6 @@ body {
z-index: 1;
}
.login-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-height: 100vh;
z-index: -1;
background: url('@/assets/images/bg-2.png') center center no-repeat;
background-size: cover;
opacity: 0.6;
}
.ant-pro-page-container {
.ant-page-header-heading {
min-width: max-content;

32
src/hooks/use-user-settings.ts
Unescape View File

@ -22,13 +22,13 @@ export default function useUserSettings() {
};
}, [userSettings.theme]);
const isDarkTheme = useMemo(() => {
return userSettings.theme === 'realDark';
}, [userSettings.theme]);
const setTheme = (theme: Theme) => {
setHtmlThemeAttr(theme);
setUserSettings({ ...userSettings, theme: theme });
setUserSettings({
...userSettings,
theme: theme,
isDarkTheme: theme === 'realDark'
});
};
useEffect(() => {
@ -37,25 +37,25 @@ export default function useUserSettings() {
// set theme by system theme: only for theme is auto
useEffect(() => {
const handleChange = (e: MediaQueryListEvent) => {
setTheme(e.matches ? 'realDark' : 'light');
};
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', handleChange);
if (userSettings.theme === 'auto') {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
console.log('mediaQuery', mediaQuery);
const handleChange = (e: MediaQueryListEvent) => {
setTheme(e.matches ? 'realDark' : 'light');
};
mediaQuery.addEventListener('change', handleChange);
handleChange(mediaQuery);
return () => {
mediaQuery.removeEventListener('change', handleChange);
};
setTheme(mediaQuery.matches ? 'realDark' : 'light');
}
return () => {
mediaQuery.removeEventListener('change', handleChange);
};
}, [userSettings.theme]);
return {
userSettings,
setUserSettings,
setTheme,
isDarkTheme,
isDarkTheme: userSettings.isDarkTheme,
themeData,
componentSize: 'large'
};

8
src/layouts/index.tsx
Unescape View File

@ -174,6 +174,7 @@ export default (props: any) => {
showShortcuts: () => {
return showShortcuts();
},
setTheme: setTheme,
toggleTheme: () => {
const newTheme = userSettings.theme === 'realDark' ? 'light' : 'realDark';
setTheme(newTheme);
@ -287,6 +288,7 @@ export default (props: any) => {
initialState,
setInitialState,
intl,
isDarkTheme: userSettings.isDarkTheme,
siderWidth: layoutProps.siderWidth,
collapsed: layoutProps.collapsed,
showUpgrade
@ -294,7 +296,7 @@ export default (props: any) => {
return dom;
},
[intl, showUpgrade, userSettings.theme]
[intl, showUpgrade, userSettings.theme, userSettings.isDarkTheme]
);
const itemRender = useCallback((route, _, routes) => {
@ -409,7 +411,9 @@ export default (props: any) => {
<ConfigProvider
componentSize="large"
theme={{
algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
algorithm: userSettings.isDarkTheme
? theme.darkAlgorithm
: theme.defaultAlgorithm,
...themeData
}}
>

62
src/layouts/rightRender.tsx
Unescape View File

@ -13,13 +13,32 @@ import {
MoonOutlined,
QuestionCircleOutlined,
ReadOutlined,
SettingOutlined
SettingOutlined,
SunOutlined
} from '@ant-design/icons';
import { getAllLocales, history, setLocale } from '@umijs/max';
import { Avatar, Menu, Spin } from 'antd';
import _ from 'lodash';
import React from 'react';
const themeConfig = [
{
key: 'realDark',
label: 'common.appearance.dark',
icon: <MoonOutlined />
},
{
key: 'light',
label: 'common.appearance.light',
icon: <SunOutlined />
}
// {
// key: 'auto',
// label: 'common.appearance.system',
// icon: <IconFont type="icon-theme-auto" />
// }
];
export const getRightRenderContent = (opts: {
runtimeConfig: any;
loading: boolean;
@ -29,7 +48,7 @@ export const getRightRenderContent = (opts: {
siderWidth: number;
intl: any;
}) => {
const { intl, collapsed, siderWidth, showUpgrade } = opts;
const { intl, collapsed, siderWidth, showUpgrade, isDarkTheme } = opts;
const allLocals = getAllLocales();
if (opts.runtimeConfig.rightRender) {
@ -215,6 +234,31 @@ export const getRightRenderContent = (opts: {
]
};
const themeMenu = {
selectedKeys: [],
className: collapsed
? 'user-menu-container user-menu-collapsed'
: 'user-menu-container',
mode: 'vertical',
expandIcon: false,
// inlineCollapsed: collapsed,
triggerSubMenuAction: 'click',
items: [
{
key: 'theme',
icon: isDarkTheme ? <MoonOutlined /> : <SunOutlined />,
label: (
<span className="sub-title">
{intl?.formatMessage?.({ id: 'common.appearance' })}
</span>
),
onClick: () => {
opts.runtimeConfig.toggleTheme();
}
}
]
};
const userMenu = {
selectedKeys: [],
className: collapsed
@ -251,14 +295,6 @@ export const getRightRenderContent = (opts: {
</span>
),
children: [
{
key: 'theme',
label: 'Appearance',
icon: <MoonOutlined />,
onClick: () => {
opts.runtimeConfig.toggleTheme();
}
},
{
key: 'settings',
label: (
@ -305,10 +341,8 @@ export const getRightRenderContent = (opts: {
<div>
<Menu {...helpMenu} style={getMenuStyle(collapsed, siderWidth)} />
<Menu {...langMenu} style={getMenuStyle(collapsed, siderWidth)} />
<Menu
{...userMenu}
style={getMenuStyle(collapsed, siderWidth, { marginTop: 20 })}
/>
<Menu {...themeMenu} style={getMenuStyle(collapsed, siderWidth)} />
<Menu {...userMenu} style={getMenuStyle(collapsed, siderWidth)} />
</div>
);
};

6
src/locales/en-US/common.ts
Unescape View File

@ -234,5 +234,9 @@ export default {
'common.button.moreInfo': 'More Info',
'common.text.warning': 'Warning',
'common.text.error': 'Error',
'common.text.tips': 'Tips'
'common.text.tips': 'Tips',
'common.appearance': 'Appearance',
'common.appearance.dark': 'Dark',
'common.appearance.light': 'Light',
'common.appearance.system': 'System Default'
};

13
src/locales/ja-JP/common.ts
Unescape View File

@ -234,5 +234,16 @@ export default {
'common.button.moreInfo': '詳細情報',
'common.text.warning': '警告',
'common.text.error': 'エラー',
'common.text.tips': 'ヒント'
'common.text.tips': 'ヒント',
'common.appearance': 'Appearance',
'common.appearance.dark': 'Dark',
'common.appearance.light': 'Light',
'common.appearance.system': 'System Default'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'common.appearance.dark': 'Dark',
// 2. 'common.appearance.light': 'Light',
// 3. 'common.appearance.system': 'System Default',
// 4. 'common.appearance': 'Appearance',
// ========== End of To-Do List ==========

32
src/locales/ru-RU/common.ts
Unescape View File

@ -81,8 +81,10 @@ export default {
'common.button.back': 'Назад',
'common.button.undo': 'Отменить',
'common.button.discardChange': 'Отменить изменения',
'common.tips.save': 'Есть несохранённые изменения. Выход приведёт к их потере.',
'common.tips.cancel': 'У вас есть несохранённые изменения. Всё равно продолжить?',
'common.tips.save':
'Есть несохранённые изменения. Выход приведёт к их потере.',
'common.tips.cancel':
'У вас есть несохранённые изменения. Всё равно продолжить?',
'common.tips.discard': 'Отменить изменения?',
'common.tips.title': 'Подсказка:',
'common.input.range.start': 'Начальное значение',
@ -135,7 +137,8 @@ export default {
'common.table.createdBy': 'Оператор',
'common.table.yes': 'Да',
'common.table.no': 'Нет',
'common.validate.labelName': 'Должен содержать только строчные буквы, цифры или "-", начинаться и заканчиваться буквой/цифрой.',
'common.validate.labelName':
'Должен содержать только строчные буквы, цифры или "-", начинаться и заканчиваться буквой/цифрой.',
'common.search.nodata': 'Нет совпадений',
'common.data.empty': 'Нет данных',
'common.tips.change': 'Есть несохраненные изменения!',
@ -179,7 +182,8 @@ export default {
'common.rule.array': 'должен быть массивом',
'common.rule.object': 'должен быть объектом',
'common.rule.syntaxerror': 'синтаксическая ошибка',
'common.code.hide.tips': '... Скрыто {rows} строк, нажмите чтобы раскрыть ...',
'common.code.hide.tips':
'... Скрыто {rows} строк, нажмите чтобы раскрыть ...',
'common.nodata.created': 'Еще не создано ни одного {type}',
'common.nodata.added': 'Еще не добавлено ни одного {type}',
'common.status.edited': 'Изменено',
@ -187,11 +191,14 @@ export default {
'common.settings.instructions': 'Инструкции',
'common.settings.language': 'Язык',
'common.delete.confirm': 'Вы уверены, что хотите удалить выбранный {type}?',
'common.delete.single.confirm': 'Вы уверены, что хотите удалить <span style="font-size: 13px;font-weight: 700">{name}</span>?',
'common.delete.single.confirm':
'Вы уверены, что хотите удалить <span style="font-size: 13px;font-weight: 700">{name}</span>?',
'common.stop.confirm': 'Вы уверены, что хотите остановить выбранный {type}?',
'common.stop.single.confirm': 'Вы уверены, что хотите остановить <span style="font-size: 13px;font-weight: 700">{name}</span>?',
'common.stop.single.confirm':
'Вы уверены, что хотите остановить <span style="font-size: 13px;font-weight: 700">{name}</span>?',
'common.start.confirm': 'Вы уверены, что хотите запустить выбранный {type}?',
'common.start.single.confirm': 'Вы уверены, что хотите запустить <span style="font-size: 13px;font-weight: 700">{name}</span>?',
'common.start.single.confirm':
'Вы уверены, что хотите запустить <span style="font-size: 13px;font-weight: 700">{name}</span>?',
'common.filter.name': 'Фильтр по имени',
'common.form.password': 'Пароль',
'common.form.username': 'Имя пользователя',
@ -225,9 +232,16 @@ export default {
'common.button.moreInfo': 'Подробнее',
'common.text.warning': 'Предупреждение',
'common.text.error': 'Ошибка',
'common.text.tips': 'Советы'
'common.text.tips': 'Советы',
'common.appearance': 'Appearance',
'common.appearance.dark': 'Dark',
'common.appearance.light': 'Light',
'common.appearance.system': 'System Default'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'common.appearance': 'Appearance',
// 2. 'common.appearance.dark': 'Dark',
// 3. 'common.appearance.light': 'Light',
// 4. 'common.appearance.system': 'System Default'
// ========== End of To-Do List ==========

6
src/locales/zh-CN/common.ts
Unescape View File

@ -229,5 +229,9 @@ export default {
'common.text.error': '错误',
'common.text.tips': '提示',
'settings.system': '系统设置',
'common.filter.byId': '按 ID 查询'
'common.filter.byId': '按 ID 查询',
'common.appearance': '外观',
'common.appearance.dark': '深色',
'common.appearance.light': '浅色',
'common.appearance.system': '跟随系统'
};

9
src/pages/dashboard/components/usage-inner/request-token-inner.tsx
Unescape View File

@ -18,12 +18,15 @@ interface RequestTokenInnerProps {
}[];
xAxisData: string[];
}
const labelFormatter = (v: any) => {
return dayjs(v).format('MM-DD');
};
const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
const { requestData, tokenData, xAxisData } = props;
const intl = useIntl();
const labelFormatter = (v: any) => {
return dayjs(v).format('MM-DD');
};
return (
<CardWrapper style={{ width: '100%' }}>
<Row style={{ width: '100%' }}>

2
src/pages/llmodels/components/instance-item.tsx
Unescape View File

@ -174,7 +174,7 @@ const RenderWorkerDownloading = (props: {
showInfo={false}
type="circle"
size={16}
strokeColor="var(--color-progress-green)"
strokeColor="var(--ant-color-success)"
percent={
_.find(rayActors, (item: any) => item.download_progress < 100)
?.download_progress || 0

2
src/pages/llmodels/style/search-result.less
Unescape View File

@ -20,7 +20,7 @@
left: 0;
right: 0;
padding-inline: @padding;
background: var(--color-white-1);
background: var(--ant-color-bg-elevated);
padding-bottom: 10px;
.filter {

2
src/pages/llmodels/style/separator.less
Unescape View File

@ -12,7 +12,7 @@
transform: rotate(45deg);
border-left: none;
border-bottom: none;
background-color: var(--color-white-1);
background-color: var(--ant-color-bg-elevated);
z-index: 100;
clip-path: polygon(0 -1px, 24px 0, 24px 23px);
}

2
src/pages/llmodels/style/title-wrapper.less
Unescape View File

@ -12,7 +12,7 @@
padding-top: 10px;
margin-bottom: 0;
font-weight: var(--font-weight-bold);
background-color: var(--color-white-1);
background-color: var(--ant-color-bg-elevated);
.title {
font-weight: var(--font-weight-bold);

56
src/pages/login/index.tsx
Unescape View File

@ -1,15 +1,53 @@
import Bg2 from '@/assets/images/bg-2.png';
import { userAtom } from '@/atoms/user';
import Footer from '@/components/footer';
import useUserSettings from '@/hooks/use-user-settings';
import { useModel } from '@umijs/max';
import { ConfigProvider } from 'antd';
import { useAtom } from 'jotai';
import { useEffect } from 'react';
import styled from 'styled-components';
import LoginForm from './components/login-form';
import PasswordForm from './components/password-form';
import styles from './components/styles.less';
import { checkDefaultPage } from './utils';
const Wrapper = styled.div`
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-height: 100vh;
z-index: -1;
background: url(${Bg2}) center center no-repeat;
background-size: cover;
opacity: 0.6;
`;
const Box = styled.div`
padding-top: 10%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
`;
const FormWrapper = styled.div`
margin: 0 auto;
border-radius: var(--border-radius-modal);
width: max-content;
height: max-content;
padding: 32px;
background-color: rgba(255, 255, 255, 90%);
.field-wrapper {
background-color: transparent !important;
}
.ant-input-outlined.ant-input-status-error:not(.ant-input-disabled) {
background-color: transparent !important;
}
`;
const Login = () => {
const { themeData } = useUserSettings();
const [userInfo, setUserInfo] = useAtom(userAtom);
@ -36,15 +74,15 @@ const Login = () => {
}, []);
return (
<ConfigProvider componentSize="large" theme={themeData}>
<div className="login-wrapper"></div>
<div className={styles.box}>
<div className={styles['login-form-wrapper']}>
<div>
<Wrapper></Wrapper>
<Box>
<FormWrapper>
{userInfo?.require_password_change ? <PasswordForm /> : <LoginForm />}
</div>
</FormWrapper>
<Footer />
</div>
</ConfigProvider>
</Box>
</div>
);
};

Write Preview
Loading…
Cancel
Save