From db417e6a5fcca9d8a4b055b7642792544d21300b Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 20 Mar 2025 20:33:40 +0800 Subject: [PATCH] style: set theme token --- config/config.ts | 11 ++- config/theme.ts | 6 +- src/assets/styles/common.less | 4 + .../highlight-code/styles/index.less | 2 +- src/components/logs-viewer/styles/index.less | 2 +- .../seal-table/components/header-prefix.tsx | 2 +- src/components/seal-table/styles/header.less | 2 +- src/config/theme.ts | 70 +++++++++++++++++ src/global.less | 76 ++++--------------- src/layouts/index.tsx | 7 +- .../dashboard/components/active-table.tsx | 7 +- src/pages/dashboard/components/over-view.less | 4 + src/pages/dashboard/components/over-view.tsx | 4 +- .../dashboard/components/system-load.tsx | 4 +- .../components/usage-inner/index.tsx | 10 ++- .../llmodels/components/deploy-modal.tsx | 10 +-- src/pages/llmodels/components/table-list.tsx | 4 +- .../llmodels/components/view-logs-modal.tsx | 2 +- src/pages/llmodels/style/catalog-item.less | 7 +- src/pages/llmodels/style/data-form.less | 3 +- src/pages/llmodels/style/hf-model-item.less | 3 +- .../playground/components/dynamic-params.tsx | 4 +- 22 files changed, 142 insertions(+), 102 deletions(-) create mode 100644 src/config/theme.ts diff --git a/config/config.ts b/config/config.ts index 7c1e7492..307f9c9f 100644 --- a/config/config.ts +++ b/config/config.ts @@ -2,7 +2,6 @@ import { defineConfig } from '@umijs/max'; import keepAlive from './keep-alive'; import proxy from './proxy'; import routes from './routes'; -import theme from './theme'; import { getBranchInfo } from './utils'; const CompressionWebpackPlugin = require('compression-webpack-plugin'); @@ -80,11 +79,11 @@ export default defineConfig({ presets: ['umi-presets-pro'], clickToComponent: {}, antd: { - style: 'less', - configProvider: { - componentSize: 'large', - theme - } + style: 'less' + // configProvider: { + // componentSize: 'large', + // theme + // } }, hash: true, access: {}, diff --git a/config/theme.ts b/config/theme.ts index 90d48f31..c9e93937 100644 --- a/config/theme.ts +++ b/config/theme.ts @@ -4,10 +4,10 @@ export default { hashed: false, components: { Input: { - inputFontSize: 12 + inputFontSize: 14 }, Table: { - cellFontSize: 12, + cellFontSize: 14, rowSelectedHoverBg: 'rgb(249 249 249)', rowHoverBg: 'rgb(249 249 249)', rowSelectedBg: 'transparent' @@ -57,7 +57,7 @@ export default { colorSuccess: '#54cc98', borderRadius: 4, borderRadiusSM: 2, - fontSize: 12, + fontSize: 14, motion: true } }; diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index ccc9b627..fe0b4012 100644 --- a/src/assets/styles/common.less +++ b/src/assets/styles/common.less @@ -228,6 +228,10 @@ font-weight: var(--font-weight-medium); } +.font-500 { + font-weight: var(--font-weight-500); +} + .font-700 { font-weight: var(--font-weight-bold); } diff --git a/src/components/highlight-code/styles/index.less b/src/components/highlight-code/styles/index.less index 3b857b68..cc82d047 100644 --- a/src/components/highlight-code/styles/index.less +++ b/src/components/highlight-code/styles/index.less @@ -1,6 +1,6 @@ .high-light-wrapper { text-align: left; - font-size: var(--font-size-base); + font-size: var(--font-size-code); .hljs { font-weight: var(--font-weight-normal); diff --git a/src/components/logs-viewer/styles/index.less b/src/components/logs-viewer/styles/index.less index 5f0f3b4c..8a3c51a0 100644 --- a/src/components/logs-viewer/styles/index.less +++ b/src/components/logs-viewer/styles/index.less @@ -96,7 +96,7 @@ } color: var(--color-logs-text); - font-size: var(--font-size-small); + font-size: var(--font-size-base); line-height: 22px; white-space: pre-wrap; background-color: var(--color-logs-bg); diff --git a/src/components/seal-table/components/header-prefix.tsx b/src/components/seal-table/components/header-prefix.tsx index 84a626f7..be4451d1 100644 --- a/src/components/seal-table/components/header-prefix.tsx +++ b/src/components/seal-table/components/header-prefix.tsx @@ -38,7 +38,7 @@ const HeaderPrefix: React.FC = (props) => { return (
{_.isBoolean(expandable) ? ( diff --git a/src/components/seal-table/styles/header.less b/src/components/seal-table/styles/header.less index f0f27261..87db0fac 100644 --- a/src/components/seal-table/styles/header.less +++ b/src/components/seal-table/styles/header.less @@ -11,7 +11,7 @@ } &-cell { - font-weight: 600; + font-weight: var(--font-weight-medium); } &-left { diff --git a/src/config/theme.ts b/src/config/theme.ts new file mode 100644 index 00000000..a4f14a12 --- /dev/null +++ b/src/config/theme.ts @@ -0,0 +1,70 @@ +export default { + 'root-entry-name': 'variable', + cssVar: true, + hashed: false, + components: { + Input: { + inputFontSize: 14, + inputFontSizeLG: 14 + }, + Table: { + cellFontSize: 14, + rowSelectedHoverBg: 'rgba(230, 230, 230, 0.88)', + rowSelectedBg: 'rgb(244, 245, 244)' + }, + Button: { + contentFontSizeLG: 14 + }, + Tabs: { + titleFontSizeLG: 14 + }, + Menu: { + iconSize: 16, + iconMarginInlineEnd: 12, + itemBorderRadius: 4, + itemSelectedColor: '#007BFF', + itemHeight: 44, + groupTitleColor: 'rgba(0,0,0,1)', + itemHoverColor: 'rgba(0,0,0,1)', + itemColor: 'rgba(0,0,0,1)', + itemHoverBg: 'rgba(0,0,0,0.04)', + itemActiveBg: 'rgba(0,0,0,0.04)' + }, + Progress: { + lineBorderRadius: 2 + }, + Select: { + optionSelectedBg: 'rgba(230, 230, 230, 88%)', + fontSizeLG: 14 + }, + Message: { + contentPadding: '12px 16px' + }, + Tooltip: { + colorBgSpotlight: '#3e3e3e' + }, + Cascader: { + dropdownHeight: 240 + }, + Slider: { + handleSize: 8, + handleSizeHover: 8, + trackBg: 'rgba(0,0,0,0.15)', + handleColor: 'rgba(0,0,0,0.2)', + trackHoverBg: 'rgba(0,0,0,0.25)', + handleActiveColor: 'rgba(0,0,0,0.3)', + dotActiveBorderColor: 'rgba(0,0,0,0.25)', + handleActiveOutlineColor: 'rgba(0,0,0,0.25)', + dotBorderColor: 'rgba(0,0,0,0.25)' + } + }, + token: { + colorText: 'rgba(0,0,0,1)', + colorPrimary: '#007BFF', + colorSuccess: '#54cc98', + borderRadius: 4, + borderRadiusSM: 2, + fontSize: 14, + motion: true + } +}; diff --git a/src/global.less b/src/global.less index ae3d7144..45a789e4 100644 --- a/src/global.less +++ b/src/global.less @@ -22,7 +22,6 @@ html { --color-editor-dark: #282c34; --color-editor-light: #fafafa; --color-scrollbar-track: var(--ant-color-fill-tertiary); - // --color-fill-1: #fff; --ant-color-text: #000; --color-bg-1: #f4f5f4; --color-scroll-bg: #d9d9d9; @@ -43,7 +42,8 @@ html { --border-radius-2px: 2px; --color-white-1: rgba(255, 255, 255, 100%); --color-fill-sider: #f4f5f4; - --font-weight-normal: 500; + --font-weight-500: 500; + --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-bold: 700; --color-white-primary: rgba(255, 255, 255, 100%); @@ -61,7 +61,8 @@ html { --color-text-2: rgba(0, 0, 0, 65%); --color-bg-light-1: #e6f6ff; --font-size-small: 13px; - --font-size-base: 12px; + --font-size-code: 12px; + --font-size-base: 14px; --font-size-large: 16px; --font-size-middle: 14px; --table-td-radius: 4px; @@ -87,32 +88,16 @@ html { --ant-input-hover-border-color: #2997ff; --box-shadow-base: 0 4px 6px rgba(227, 232, 240, 70%); --ant-border-radius-lg: 4px; - --ant-menu-item-color: var(--color-text-1); --color-selected-bg: rgba(230, 230, 230, 88%); - // --box-shadow-base: none; + --ant-color-border: #d9d9d9; + --ant-line-type: solid; + --ant-line-width: 1px; .css-var-rf { --ant-font-size: var(--font-size-base); } - .css-var-rg, - .css-var-ri, - .css-var-rh { - --ant-font-size: var(--font-size-base); - - &.ant-menu-css-var { - --ant-menu-item-border-radius: 4px; - --ant-menu-item-selected-color: var(--ant-color-primary); - --ant-menu-item-color: var(--color-text-1); - } - } - - .css-var-rj.ant-menu-css-var { - --ant-menu-item-color: var(--color-text-1); - } - .css-var-r0 { - // --ant-control-height: 36px; --ant-font-size-sm: var(--font-size-base); --ant-font-size-lg: var(--font-size-base); --ant-font-size-xl: 20px; @@ -152,22 +137,10 @@ html { } } - .css-var-r11.ant-menu-css-var { - --ant-menu-item-color: var(--color-text-1); - } - - .css-var-rk.ant-menu-css-var { - --ant-menu-item-color: var(--color-text-1); - } - .css-var-rf.ant-menu-css-var, .css-var-ri.ant-menu-css-var, .css-var-rh.ant-menu-css-var { - --ant-menu-item-height: 46px; - --ant-menu-item-border-radius: 4px; - --ant-menu-item-selected-color: var(--ant-color-primary); - --ant-menu-item-color: var(--color-text-1); - --ant-menu-item-active-bg: rgba(0, 0, 0, 4%); + --ant-menu-item-color: var(--ant-color-text); } .css-var-r0.ant-input-css-var { @@ -176,16 +149,10 @@ html { --ant-input-input-font-size-sm: var(--font-size-base); --ant-input-padding-inline-lg: 14px; } - - .css-var-r0.ant-select-css-var { - --ant-select-option-active-bg: var(--color-fill-1); - --ant-select-option-font-size: var(--font-size-base); - --ant-select-option-selected-bg: var(--color-selected-bg); - } } body * { - font-weight: var(--font-weight-normal); + // font-weight: var(--font-weight-normal); } body { @@ -254,7 +221,6 @@ body { } tr > td { - // background-color: var(--color-fill-1); border-bottom: none; height: 68px; @@ -429,7 +395,6 @@ body { .ant-pro-layout-container { overflow-x: auto; min-height: 100vh; - // background-color: var(--color-fill-2); } .ant-pro-sider { @@ -439,8 +404,7 @@ body { .ant-menu { .ant-menu-item { - border-radius: var(--border-radius-small); - color: var(--color-text-1) !important; + color: var(--ant-color-text) !important; &:active { background-color: var(--ant-menu-item-selected-bg); @@ -451,18 +415,8 @@ body { color: var(--ant-color-text); } - .ant-menu-item:hover { - color: var(--ant-color-text); - } - - .ant-menu-item.ant-menu-item-selected:hover { - color: var(--ant-color-primary) !important; - background-color: var(--ant-menu-item-selected-bg); - } - .ant-menu-item.ant-menu-item-selected { color: var(--ant-color-primary) !important; - background-color: var(--ant-menu-item-selected-bg); } } } @@ -474,7 +428,7 @@ body { .ant-menu-item-only-child { height: 40px; line-height: 40px; - color: var(--color-text-1); + color: var(--ant-color-text); .anticon { font-size: var(--font-size-middle); @@ -505,7 +459,7 @@ body { .ant-menu { .ant-menu-submenu-title { - color: var(--color-text-1) !important; + color: var(--ant-color-text) !important; } } @@ -513,7 +467,7 @@ body { .user-avatar.ant-menu-submenu { .ant-menu-submenu-title { padding-left: 10px; - color: var(--color-text-1) !important; + color: var(--ant-color-text) !important; } } @@ -522,7 +476,7 @@ body { display: flex; justify-content: center; align-items: center; - color: var(--color-text-1) !important; + color: var(--ant-color-text) !important; padding-inline: unset !important; width: 100%; margin-inline: 0 !important; @@ -549,7 +503,7 @@ body { display: flex; justify-content: flex-start; align-items: center; - color: var(--color-text-1) !important; + color: var(--ant-color-text) !important; } } diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 69907a96..9c8d7f13 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -7,6 +7,7 @@ import ShortCuts, { } from '@/components/short-cuts'; import VersionInfo, { modalConfig } from '@/components/version-info'; import routeCachekey from '@/config/route-cachekey'; +import theme from '@/config/theme'; import useBodyScroll from '@/hooks/use-body-scroll'; import useOverlayScroller from '@/hooks/use-overlay-scroller'; import { logout } from '@/pages/login/apis'; @@ -26,7 +27,7 @@ import { useNavigate, type IRoute } from '@umijs/max'; -import { Button, Modal } from 'antd'; +import { Button, ConfigProvider, Modal } from 'antd'; import 'driver.js/dist/driver.css'; import { useAtom } from 'jotai'; import 'overlayscrollbars/overlayscrollbars.css'; @@ -399,7 +400,7 @@ export default (props: any) => { }; return ( -
+
{ )} -
+ ); }; diff --git a/src/pages/dashboard/components/active-table.tsx b/src/pages/dashboard/components/active-table.tsx index 9e6dbade..3464394c 100644 --- a/src/pages/dashboard/components/active-table.tsx +++ b/src/pages/dashboard/components/active-table.tsx @@ -73,7 +73,12 @@ const ActiveTable = () => { + {intl.formatMessage({ id: 'dashboard.activeModels' })} } diff --git a/src/pages/dashboard/components/over-view.less b/src/pages/dashboard/components/over-view.less index e3b421ef..5c0c9297 100644 --- a/src/pages/dashboard/components/over-view.less +++ b/src/pages/dashboard/components/over-view.less @@ -23,4 +23,8 @@ justify-content: space-between; align-items: center; font-size: 14px; + + .label { + font-weight: var(--font-weight-medium); + } } diff --git a/src/pages/dashboard/components/over-view.tsx b/src/pages/dashboard/components/over-view.tsx index 2f02315b..00ca4d03 100644 --- a/src/pages/dashboard/components/over-view.tsx +++ b/src/pages/dashboard/components/over-view.tsx @@ -20,8 +20,8 @@ const renderCardItem = (data: { className={styles['card-body']} >
-
{label}
-
{value}
+
{label}
+
{value}
); diff --git a/src/pages/dashboard/components/system-load.tsx b/src/pages/dashboard/components/system-load.tsx index 0225f605..40b47033 100644 --- a/src/pages/dashboard/components/system-load.tsx +++ b/src/pages/dashboard/components/system-load.tsx @@ -65,7 +65,9 @@ const SystemLoad = () => { {intl.formatMessage({ id: 'dashboard.systemload' })} + + {intl.formatMessage({ id: 'dashboard.systemload' })} + } /> diff --git a/src/pages/dashboard/components/usage-inner/index.tsx b/src/pages/dashboard/components/usage-inner/index.tsx index df347e81..6c76da64 100644 --- a/src/pages/dashboard/components/usage-inner/index.tsx +++ b/src/pages/dashboard/components/usage-inner/index.tsx @@ -4,7 +4,7 @@ import { useIntl } from '@umijs/max'; import { Col, Row } from 'antd'; import dayjs from 'dayjs'; import _ from 'lodash'; -import { memo, useCallback, useContext, useEffect, useState } from 'react'; +import { FC, memo, useCallback, useContext, useEffect, useState } from 'react'; import { DashboardContext } from '../../config/dashboard-context'; import RequestTokenInner from './request-token-inner'; import TopUser from './top-user'; @@ -31,7 +31,7 @@ const getCurrentMonthDays = () => { return dates; }; -const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { +const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => { const intl = useIntl(); const [topUserData, setTopUserData] = useState<{ @@ -191,7 +191,11 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { <> {intl.formatMessage({ id: 'dashboard.usage' })}} + left={ + + {intl.formatMessage({ id: 'dashboard.usage' })} + + } /> = (props) => { - - {title} - + {title} diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index ea308d1a..78f0efd1 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -585,7 +585,9 @@ const Models: React.FC = ({ { api: `${window.location.origin}/v1` } )} > - {intl.formatMessage({ id: 'models.form.replicas' })} + + {intl.formatMessage({ id: 'models.form.replicas' })} + ), diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx index 92e446ca..f4ae394c 100644 --- a/src/pages/llmodels/components/view-logs-modal.tsx +++ b/src/pages/llmodels/components/view-logs-modal.tsx @@ -107,7 +107,7 @@ const ViewLogsModal: React.FC = (props) => {
= forwardRef(
{ <> -

+

{parametersTitle || ( {intl.formatMessage({ id: 'playground.parameters' })}