From 3fb3381a19af7994b51c7c8f2823bad6d003e4bf Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 21 Apr 2025 17:44:19 +0800 Subject: [PATCH] style: ajust dark theme --- src/assets/styles/common.less | 4 + src/atoms/settings.ts | 10 +- src/components/alert-info/block.less | 6 +- src/components/echarts/bar-chart.tsx | 62 +++++++------ src/components/echarts/config.ts | 9 +- src/components/echarts/h-bar.tsx | 61 ++++++------ src/components/icon-font/index.tsx | 2 +- src/components/progress-bar/index.tsx | 4 +- src/components/seal-form/wrapper/slider.ts | 3 + src/components/status-tag/index.less | 2 +- src/config/index.ts | 4 +- src/config/theme/dark.ts | 4 +- src/global.less | 92 +------------------ src/hooks/use-user-settings.ts | 32 +++---- src/layouts/index.tsx | 8 +- src/layouts/rightRender.tsx | 62 ++++++++++--- src/locales/en-US/common.ts | 6 +- src/locales/ja-JP/common.ts | 13 ++- src/locales/ru-RU/common.ts | 32 +++++-- src/locales/zh-CN/common.ts | 6 +- .../usage-inner/request-token-inner.tsx | 9 +- .../llmodels/components/instance-item.tsx | 2 +- src/pages/llmodels/style/search-result.less | 2 +- src/pages/llmodels/style/separator.less | 2 +- src/pages/llmodels/style/title-wrapper.less | 2 +- src/pages/login/index.tsx | 56 +++++++++-- 26 files changed, 274 insertions(+), 221 deletions(-) diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index 71f4a96c..64deea17 100644 --- a/src/assets/styles/common.less +++ b/src/assets/styles/common.less @@ -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); +} diff --git a/src/atoms/settings.ts b/src/atoms/settings.ts index b0685f01..ae3f610d 100644 --- a/src/atoms/settings.ts +++ b/src/atoms/settings.ts @@ -3,19 +3,25 @@ import { atomWithStorage } from 'jotai/utils'; type UserSettings = { theme: 'light' | 'realDark' | 'auto'; + isDarkTheme?: boolean; }; export const userSettingsAtom = atomWithStorage('userSettings', { - theme: 'light' + theme: 'light', + isDarkTheme: false }); export const userSettingsHelperAtom = atom( (get) => get(userSettingsAtom), (get, set, update: Partial) => { const prev = get(userSettingsAtom); - set(userSettingsAtom, { + const newSettings = { ...prev, ...(update || {}) + }; + set(userSettingsAtom, { + ...newSettings, + isDarkTheme: newSettings.theme === 'realDark' }); } ); diff --git a/src/components/alert-info/block.less b/src/components/alert-info/block.less index b6ec0334..bf5e8c37 100644 --- a/src/components/alert-info/block.less +++ b/src/components/alert-info/block.less @@ -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); } } diff --git a/src/components/echarts/bar-chart.tsx b/src/components/echarts/bar-chart.tsx index 49d2af3b..8a9d6bd1 100644 --- a/src/components/echarts/bar-chart.tsx +++ b/src/components/echarts/bar-chart.tsx @@ -25,34 +25,31 @@ const BarChart: React.FC = (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 = (props) => { }, series: data }; - }, [seriesData, xAxisData, title]); + }, [ + seriesData, + xAxisData, + title, + labelFormatter, + tooltip, + grid, + xAxis, + yAxis, + legend, + barItemConfig + ]); return ( <> diff --git a/src/components/echarts/config.ts b/src/components/echarts/config.ts index 9c893c4b..65bc0b75 100644 --- a/src/components/echarts/config.ts +++ b/src/components/echarts/config.ts @@ -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 = `${params[0].axisValue}`; diff --git a/src/components/echarts/h-bar.tsx b/src/components/echarts/h-bar.tsx index 2e93387c..9da1d089 100644 --- a/src/components/echarts/h-bar.tsx +++ b/src/components/echarts/h-bar.tsx @@ -24,32 +24,31 @@ const BarChart: React.FC = (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 = (props) => { }, series: data }; - }, [seriesData, xAxisData, title]); + }, [ + seriesData, + xAxisData, + title, + labelFormatter, + tooltip, + grid, + xAxis, + yAxis, + legend + ]); return ( <> diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index 83639239..9600ccfa 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -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; diff --git a/src/components/progress-bar/index.tsx b/src/components/progress-bar/index.tsx index be800c43..1d55ff7e 100644 --- a/src/components/progress-bar/index.tsx +++ b/src/components/progress-bar/index.tsx @@ -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)'; diff --git a/src/components/seal-form/wrapper/slider.ts b/src/components/seal-form/wrapper/slider.ts index 1c79f214..93b93444 100644 --- a/src/components/seal-form/wrapper/slider.ts +++ b/src/components/seal-form/wrapper/slider.ts @@ -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 { diff --git a/src/components/status-tag/index.less b/src/components/status-tag/index.less index fcb5660d..ac1a8b22 100644 --- a/src/components/status-tag/index.less +++ b/src/components/status-tag/index.less @@ -41,7 +41,7 @@ position: relative; z-index: 10; // color: var(--ant-color-text); - color: var(--color-progress-green); + color: var(--ant-color-success); } } diff --git a/src/config/index.ts b/src/config/index.ts index 3cc6075c..9c59835f 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -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)`, diff --git a/src/config/theme/dark.ts b/src/config/theme/dark.ts index 467328c2..2b0b7c51 100644 --- a/src/config/theme/dark.ts +++ b/src/config/theme/dark.ts @@ -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, diff --git a/src/global.less b/src/global.less index 7885e189..b03224bf 100644 --- a/src/global.less +++ b/src/global.less @@ -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; diff --git a/src/hooks/use-user-settings.ts b/src/hooks/use-user-settings.ts index 0fa827b0..2c6975a7 100644 --- a/src/hooks/use-user-settings.ts +++ b/src/hooks/use-user-settings.ts @@ -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' }; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 52617d61..321fca01 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -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) => { diff --git a/src/layouts/rightRender.tsx b/src/layouts/rightRender.tsx index 436164b7..e8c38977 100644 --- a/src/layouts/rightRender.tsx +++ b/src/layouts/rightRender.tsx @@ -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: + }, + { + key: 'light', + label: 'common.appearance.light', + icon: + } + // { + // key: 'auto', + // label: 'common.appearance.system', + // icon: + // } +]; + 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 ? : , + label: ( + + {intl?.formatMessage?.({ id: 'common.appearance' })} + + ), + onClick: () => { + opts.runtimeConfig.toggleTheme(); + } + } + ] + }; + const userMenu = { selectedKeys: [], className: collapsed @@ -251,14 +295,6 @@ export const getRightRenderContent = (opts: { ), children: [ - { - key: 'theme', - label: 'Appearance', - icon: , - onClick: () => { - opts.runtimeConfig.toggleTheme(); - } - }, { key: 'settings', label: ( @@ -305,10 +341,8 @@ export const getRightRenderContent = (opts: {
- + +
); }; diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index d30e10ad..b00bac66 100644 --- a/src/locales/en-US/common.ts +++ b/src/locales/en-US/common.ts @@ -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' }; diff --git a/src/locales/ja-JP/common.ts b/src/locales/ja-JP/common.ts index 4aeb600c..ebb40241 100644 --- a/src/locales/ja-JP/common.ts +++ b/src/locales/ja-JP/common.ts @@ -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 ========== diff --git a/src/locales/ru-RU/common.ts b/src/locales/ru-RU/common.ts index fab50636..c3ad3f41 100644 --- a/src/locales/ru-RU/common.ts +++ b/src/locales/ru-RU/common.ts @@ -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': 'Вы уверены, что хотите удалить {name}?', + 'common.delete.single.confirm': + 'Вы уверены, что хотите удалить {name}?', 'common.stop.confirm': 'Вы уверены, что хотите остановить выбранный {type}?', - 'common.stop.single.confirm': 'Вы уверены, что хотите остановить {name}?', + 'common.stop.single.confirm': + 'Вы уверены, что хотите остановить {name}?', 'common.start.confirm': 'Вы уверены, что хотите запустить выбранный {type}?', - 'common.start.single.confirm': 'Вы уверены, что хотите запустить {name}?', + 'common.start.single.confirm': + 'Вы уверены, что хотите запустить {name}?', '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 ========== diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts index ab385725..917a9e1a 100644 --- a/src/locales/zh-CN/common.ts +++ b/src/locales/zh-CN/common.ts @@ -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': '跟随系统' }; diff --git a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx index 9a233617..55c23a78 100644 --- a/src/pages/dashboard/components/usage-inner/request-token-inner.tsx +++ b/src/pages/dashboard/components/usage-inner/request-token-inner.tsx @@ -18,12 +18,15 @@ interface RequestTokenInnerProps { }[]; xAxisData: string[]; } + +const labelFormatter = (v: any) => { + return dayjs(v).format('MM-DD'); +}; + const RequestTokenInner: React.FC = (props) => { const { requestData, tokenData, xAxisData } = props; const intl = useIntl(); - const labelFormatter = (v: any) => { - return dayjs(v).format('MM-DD'); - }; + return ( diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx index 03b0366c..02330d59 100644 --- a/src/pages/llmodels/components/instance-item.tsx +++ b/src/pages/llmodels/components/instance-item.tsx @@ -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 diff --git a/src/pages/llmodels/style/search-result.less b/src/pages/llmodels/style/search-result.less index 5df66e0f..5941a5aa 100644 --- a/src/pages/llmodels/style/search-result.less +++ b/src/pages/llmodels/style/search-result.less @@ -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 { diff --git a/src/pages/llmodels/style/separator.less b/src/pages/llmodels/style/separator.less index 43a8f449..24cd9f7f 100644 --- a/src/pages/llmodels/style/separator.less +++ b/src/pages/llmodels/style/separator.less @@ -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); } diff --git a/src/pages/llmodels/style/title-wrapper.less b/src/pages/llmodels/style/title-wrapper.less index 905aeac3..941e9af8 100644 --- a/src/pages/llmodels/style/title-wrapper.less +++ b/src/pages/llmodels/style/title-wrapper.less @@ -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); diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 6822e453..bdae7520 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -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 ( - -
-
-
+
+ + + {userInfo?.require_password_change ? : } -
+
- + +
); };