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

style: ajust dark theme

Browse Source
This commit is contained in:
jialin
2025-04-28 10:05:06 +08:00
parent 60d0750695
commit 3fb3381a19
26 changed files with 275 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/common.less
+4
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);
}
src/atoms/settings.ts
+8 -2
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'
});
}
);
src/components/alert-info/block.less
+3 -3
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);
}
}
src/components/echarts/bar-chart.tsx
+36 -28
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
},
data: []
},
yAxis,
legend: {
...legend,
data: []
},
series: []
};
const dataOptions = useMemo((): any => {
const options = {
title: {
text: ''
},
grid,
tooltip: {
...tooltip
},
xAxis: {
...xAxis,
axisLabel: {
...xAxis.axisLabel,
formatter: labelFormatter
},
data: []
},
yAxis,
legend: {
...legend,
data: []
},
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 (
<>
src/components/echarts/config.ts
+4 -5
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>`;
src/components/echarts/h-bar.tsx
+35 -26
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 (
<>
src/components/icon-font/index.tsx
+1 -1
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;
src/components/progress-bar/index.tsx
+2 -2
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)';
src/components/seal-form/wrapper/slider.ts
+3
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 {
src/components/status-tag/index.less
+1 -1
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);
}
}
src/config/index.ts
+2 -2
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)`,
src/config/theme/dark.ts
+2 -2
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,
src/global.less
+2 -90
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;
src/hooks/use-user-settings.ts
+16 -16
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'
};
src/layouts/index.tsx
+6 -2
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
}}
>
src/layouts/rightRender.tsx
+48 -14
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>
);
};
src/locales/en-US/common.ts
+5 -1
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'
};
src/locales/ja-JP/common.ts
+12 -1
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 ==========
src/locales/ru-RU/common.ts
+23 -9
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 ==========
src/locales/zh-CN/common.ts
+5 -1
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': '跟随系统'
};
src/pages/dashboard/components/usage-inner/request-token-inner.tsx
+6 -3
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%' }}>
src/pages/llmodels/components/instance-item.tsx
+1 -1
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
src/pages/llmodels/style/search-result.less
+1 -1
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 {
src/pages/llmodels/style/separator.less
+1 -1
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);
}
src/pages/llmodels/style/title-wrapper.less
+1 -1
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);
src/pages/login/index.tsx
+47 -9
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>
);
};