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

fix(style): dark style

Browse Source
This commit is contained in:
jialin
2025-04-29 18:05:43 +08:00
parent e5aa5ace15
commit 954b034b8b
23 changed files with 176 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/grid_background_1920x1080.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

src/components/auto-tooltip/index.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
...tooltipProps,
destroyTooltipOnHide: false
}}
title={isOverflowing || showTitle ? children : false}
title={isOverflowing || showTitle ? title || children : false}
>
{ghost ? (
<div ref={contentRef} style={tagStyle} data-overflow={isOverflowing}>
src/components/echarts/scatter.tsx
+1 -1
View File
@@ -168,7 +168,7 @@ const Scatter: React.FC<ChartProps> = (props) => {
tooltip: {
trigger: 'item',
borderWidth: 0,
backgroundColor: chartColorMap.colorBgBase,
backgroundColor: chartColorMap.splitLineColor,
borderColor: 'transparent',
formatter(params: any, callback?: (val: any) => any) {
const dataList = findOverlappingPoints(seriseDataList, params.data);
src/components/footer/index.tsx
+28 -24
View File
@@ -25,10 +25,11 @@ const useStyles = createStyles(({ token, css }) => ({
const Footer: React.FC = () => {
const intl = useIntl();
const [modal, contextHolder] = Modal.useModal();
const { styles } = useStyles();
const showVersion = () => {
Modal.info({
modal.info({
...modalConfig,
width: 460,
content: <VersionInfo intl={intl} />
@@ -36,32 +37,35 @@ const Footer: React.FC = () => {
};
return (
<div className={styles.footer}>
<div className="footer-content">
<div className="footer-content-left">
<div className={styles['footer-content-left-text']}>
<Space size={4}>
<span>&copy;</span>
<span> {new Date().getFullYear()}</span>
<span> {intl.formatMessage({ id: 'settings.company' })}</span>
</Space>
<Space size={8} style={{ marginLeft: 18 }}>
<Button
type="link"
size="small"
href={externalLinks.documentation}
target="_blank"
>
{intl.formatMessage({ id: 'common.button.help' })}
</Button>
<Button type="link" size="small" onClick={showVersion}>
{getAtomStorage(GPUStackVersionAtom)?.version}
</Button>
</Space>
<>
{contextHolder}
<div className={styles.footer}>
<div className="footer-content">
<div className="footer-content-left">
<div className={styles['footer-content-left-text']}>
<Space size={4}>
<span>&copy;</span>
<span> {new Date().getFullYear()}</span>
<span> {intl.formatMessage({ id: 'settings.company' })}</span>
</Space>
<Space size={8} style={{ marginLeft: 18 }}>
<Button
type="link"
size="small"
href={externalLinks.documentation}
target="_blank"
>
{intl.formatMessage({ id: 'common.button.help' })}
</Button>
<Button type="link" size="small" onClick={showVersion}>
{getAtomStorage(GPUStackVersionAtom)?.version}
</Button>
</Space>
</div>
</div>
</div>
</div>
</div>
</>
);
};
src/components/seal-form/wrapper/input.ts
+33
View File
@@ -14,6 +14,39 @@ const InputWrapper = styled.div`
top: 9px;
}
}
// ============= input initial =============
.ant-input-outlined.ant-input-status-error:not(.ant-input-disabled) {
border: none;
box-shadow: none;
}
.ant-input-outlined.ant-input-status-error:not(.ant-input-disabled):focus,
.ant-input-outlined.ant-input-status-error:not(
.ant-input-disabled
):focus-within {
border: none;
box-shadow: none;
}
.ant-input-number-outlined.ant-input-number-status-error:not(
.ant-input-number-disabled
) {
border: none;
box-shadow: none;
}
.ant-input-number-outlined.ant-input-number-status-error:not(
.ant-input-number-disabled
):focus,
.ant-input-number-outlined.ant-input-number-status-error:not(
.ant-input-disabled
):focus-within {
border: none;
box-shadow: none;
}
// ============= input initial end =============
.seal-input-wrapper-disabled {
background-color: var(--ant-color-bg-container-disabled);
cursor: not-allowed;
src/components/seal-form/wrapper/slider.ts
-1
View File
@@ -42,7 +42,6 @@ const SliderWrapper = styled.div`
.ant-input-number-input {
text-align: center !important;
background-color: var(--color-white-1);
}
}
}
src/components/seal-table/components/header-prefix.tsx
+7 -2
View File
@@ -13,6 +13,7 @@ interface HeaderPrefixProps {
indeterminate?: boolean;
selectAll?: boolean;
hasColumns?: boolean;
disabled?: boolean;
}
const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
@@ -24,7 +25,8 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
onExpandAll,
indeterminate,
selectAll,
expandAll
expandAll,
disabled
} = props;
const handleToggleExpand = () => {
@@ -68,6 +70,7 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
onChange={onSelectAll}
indeterminate={indeterminate}
checked={selectAll}
disabled={disabled}
></Checkbox>
</div>
);
@@ -87,7 +90,9 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
}
if (enableSelection) {
return (
<div className="header-row-prefix-wrapper">{<Checkbox></Checkbox>}</div>
<div className="header-row-prefix-wrapper">
{<Checkbox disabled={disabled}></Checkbox>}
</div>
);
}
return null;
src/components/seal-table/index.tsx
+9 -3
View File
@@ -14,7 +14,8 @@ const Wrapper = styled.div<{ $token: any }>`
--ant-table-cell-padding-block: ${(props) => props.$token.cellPaddingBlock}px;
--ant-table-header-border-radius: ${(props) =>
props.$token.headerBorderRadius}px;
--ant-table-header-split-color: ${(props) => props.$token.headerSplitColor};
--ant-table-header-split-color: ${(props) =>
props.$token.colorBorderSecondary};
--ant-table-row-selected-bg: ${(props) => props.$token.rowSelectedBg};
--ant-table-row-selected-hover-bg: ${(props) =>
props.$token.rowSelectedHoverBg};
@@ -47,7 +48,6 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
loadChildrenAPI
} = props;
const { token } = theme.useToken();
console.log('seal-table-props', token.Table);
const parsedColumns = useMemo(() => {
if (columns) return columns;
@@ -137,7 +137,12 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
};
return (
<Wrapper $token={token.Table}>
<Wrapper
$token={{
...token.Table,
colorBorderSecondary: token.colorBorderSecondary
}}
>
<div className="seal-table-container">
<div className="header-row-wrapper">
<HeaderPrefix
@@ -148,6 +153,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
expandAll={expandAll}
expandable={expandable}
enableSelection={rowSelection?.enableSelection}
disabled={!props.dataSource?.length}
hasColumns={parsedColumns.length > 0}
></HeaderPrefix>
<Header onSort={onSort} columns={parsedColumns}></Header>
src/components/seal-table/styles/header.less
+12 -1
View File
@@ -1,10 +1,21 @@
.table-header {
position: relative;
min-height: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
padding-inline: var(--ant-table-cell-padding-inline);
border-right: 1px solid var(--ant-table-header-split-color);
&::before {
position: absolute;
top: 50%;
inset-inline-end: 0;
width: 1px;
height: 1.6em;
background-color: var(--ant-table-header-split-color);
transform: translateY(-50%);
content: '';
}
&-last {
border-right: none;
src/global.less
+38 -49
View File
@@ -94,9 +94,13 @@ html[data-theme='realDark'] {
--color-bg-tooltip: #424242;
--color-editor-header-bg: #292929;
--color-progress-text: rgba(255, 255, 255, 80%);
--color-modal-content-bg: #1f1f1f;
--color-modal-content-bg: #080808;
background: #141414;
.ant-result-image {
opacity: 0.9;
}
}
body {
@@ -118,6 +122,10 @@ body {
// table
.ant-table-wrapper {
.ant-table {
background: transparent !important;
}
.ant-table-selection-column {
padding-inline-start: 16px !important;
}
@@ -144,11 +152,21 @@ body {
display: flex !important;
}
tr > th {
border: none;
padding-block: 0;
height: 50px;
background-color: var(--ant-color-fill-tertiary);
.ant-table-thead {
tr {
background-color: var(--ant-color-fill-tertiary);
> th {
border: none;
padding-block: 0;
height: 50px;
background-color: transparent;
&::before {
transition: none !important;
}
}
}
}
tr > td {
@@ -157,46 +175,17 @@ body {
}
}
// input
// .ant-input-css-var.ant-input {
// height: 40px;
// }
// .ant-input-outlined,
// .ant-input-affix-wrapper,
// .ant-picker {
// height: 40px;
// }
.ant-input-outlined.ant-input-status-error:not(.ant-input-disabled) {
border: none;
box-shadow: none;
.ant-input-outlined,
.ant-input-number,
.ant-select-selector {
background: transparent !important;
}
.ant-input-outlined.ant-input-status-error:not(.ant-input-disabled):focus,
.ant-input-outlined.ant-input-status-error:not(
.ant-input-disabled
):focus-within {
border: none;
box-shadow: none;
}
// input number
.ant-input-number-outlined.ant-input-number-status-error:not(
.ant-input-number-disabled
) {
border: none;
box-shadow: none;
}
.ant-input-number-outlined.ant-input-number-status-error:not(
.ant-input-number-disabled
):focus,
.ant-input-number-outlined.ant-input-number-status-error:not(
.ant-input-disabled
):focus-within {
border: none;
box-shadow: none;
// set for the non-form item
.ant-input-outlined,
.ant-input-affix-wrapper,
.ant-picker {
height: 40px;
}
// form item help
@@ -261,10 +250,6 @@ body {
}
}
.ant-table-wrapper .ant-table {
background-color: unset;
}
.ant-table-content table {
.ant-table-tbody {
.ant-table-row {
@@ -732,7 +717,11 @@ body {
}
a {
color: var(--ant-color-link-hover);
color: var(--ant-blue);
&:hover {
color: var(--ant-blue-5);
}
}
}
}
src/layouts/index.tsx
+3 -1
View File
@@ -99,6 +99,7 @@ export default (props: any) => {
const { initialize: initialize } = useOverlayScroller({
defer: false
});
const [modal, contextHolder] = Modal.useModal();
const { themeData, setTheme, userSettings, isDarkTheme } = useUserSettings();
const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
const { initialize: initializeMenu } = useOverlayScroller();
@@ -132,7 +133,7 @@ export default (props: any) => {
const showVersion = () => {
saveScrollHeight();
Modal.info({
modal.info({
...modalConfig,
width: 460,
content: <VersionInfo intl={intl} />,
@@ -477,6 +478,7 @@ export default (props: any) => {
)}
</Exception>
</ProLayout>
{contextHolder}
</ConfigProvider>
);
};
src/locales/en-US/common.ts
+2 -1
View File
@@ -238,5 +238,6 @@ export default {
'common.appearance': 'Appearance',
'common.appearance.dark': 'Dark',
'common.appearance.light': 'Light',
'common.appearance.system': 'System Default'
'common.appearance.system': 'System Default',
'common.exception.404': 'Sorry, the page you visited does not exist.'
};
src/locales/ja-JP/common.ts
+3 -1
View File
@@ -238,7 +238,8 @@ export default {
'common.appearance': 'Appearance',
'common.appearance.dark': 'Dark',
'common.appearance.light': 'Light',
'common.appearance.system': 'System Default'
'common.appearance.system': 'System Default',
'common.exception.404': 'Sorry, the page you visited does not exist.'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -246,4 +247,5 @@ export default {
// 2. 'common.appearance.light': 'Light',
// 3. 'common.appearance.system': 'System Default',
// 4. 'common.appearance': 'Appearance',
// 5. 'common.exception.404': 'Sorry, the page you visited does not exist.'
// ========== End of To-Do List ==========
src/locales/ru-RU/common.ts
+3 -2
View File
@@ -236,9 +236,10 @@ export default {
'common.appearance': 'Внешний вид',
'common.appearance.dark': 'Темная',
'common.appearance.light': 'Светлая',
'common.appearance.system': 'Как в системе'
'common.appearance.system': 'Как в системе',
'common.exception.404': 'Sorry, the page you visited does not exist.'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'common.exception.404': 'Sorry, the page you visited does not exist.'
// ========== End of To-Do List ==========
src/locales/zh-CN/common.ts
+2 -1
View File
@@ -233,5 +233,6 @@ export default {
'common.appearance': '外观',
'common.appearance.dark': '深色',
'common.appearance.light': '浅色',
'common.appearance.system': '跟随系统'
'common.appearance.system': '跟随系统',
'common.exception.404': '抱歉，你访问的页面不存在'
};
src/pages/404.tsx
+12 -14
View File
@@ -1,18 +1,16 @@
import { history } from '@umijs/max';
import { Button, Result } from 'antd';
import { useIntl } from '@umijs/max';
import { Result } from 'antd';
import React from 'react';
const NoFoundPage: React.FC = () => (
<Result
status="404"
title="404"
subTitle="Sorry, the page you visited does not exist."
extra={
<Button type="primary" onClick={() => history.push('/')}>
Back Home
</Button>
}
/>
);
const NoFoundPage: React.FC = () => {
const intl = useIntl();
return (
<Result
status="404"
title="404"
subTitle={intl.formatMessage({ id: 'common.exception.404' })}
/>
);
};
export default NoFoundPage;
src/pages/llmodels/components/deploy-modal.tsx
+1
View File
@@ -154,6 +154,7 @@ const AddModal: FC<AddModalProps> = (props) => {
const handleOnSelectModel = (item: any, evaluate?: boolean) => {
setSelectedModel(item);
console.log('item.isGGUF=========>', item.isGGUF);
if (!item.isGGUF) {
setIsGGUF(false);
form.current?.form?.resetFields(resetFields);
src/pages/llmodels/config/index.ts
+2 -1
View File
@@ -489,7 +489,8 @@ export const updateExcludeFields = [
'ollama_library_model_name',
'scheduleType',
'backend',
'gpu_selector'
'gpu_selector',
'categories'
];
export const formFields = [
src/pages/login/index.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import Bg2 from '@/assets/images/bg-2.png';
import GridBg from '@/assets/images/grid_background_1920x1080.png';
import { userAtom } from '@/atoms/user';
import Footer from '@/components/footer';
import useUserSettings from '@/hooks/use-user-settings';
@@ -21,7 +22,7 @@ const Wrapper = styled.div<{ $isDarkTheme: boolean }>`
z-index: -1;
background: ${({ $isDarkTheme }) =>
$isDarkTheme
? `repeating-linear-gradient(45deg, #000, transparent 120px)`
? `url(${GridBg}) center center /cover no-repeat`
: `url(${Bg2}) center center /cover no-repeat`};
opacity: ${({ $isDarkTheme }) => ($isDarkTheme ? 1 : 0.6)};
`;
src/pages/playground/style/message-input.less
-1
View File
@@ -80,7 +80,6 @@
width: 100%;
display: flex;
position: relative;
background-color: var(--ant-color-bg-elevated);
border-radius: var(--border-radius-base);
textarea {
src/pages/resources/components/model-files.tsx
+12 -5
View File
@@ -154,8 +154,10 @@ const getWorkerName = (
};
const getModelInfo = (record: ListItem) => {
const source = _.get(modelSourceMap, record.source, '');
if (record.source === modelSourceMap.huggingface_value) {
return {
source: `${source}/${record.huggingface_repo_id}`,
repo_id: record.huggingface_repo_id,
title: `${record.huggingface_repo_id}/${record.huggingface_filename}`,
filename: record.huggingface_filename || record.huggingface_repo_id
@@ -163,6 +165,7 @@ const getModelInfo = (record: ListItem) => {
}
if (record.source === modelSourceMap.modelscope_value) {
return {
source: `${source}/${record.model_scope_model_id}`,
repo_id: record.model_scope_model_id,
title: `${record.model_scope_model_id}/${record.model_scope_file_path}`,
filename: record.model_scope_file_path || record.model_scope_model_id
@@ -170,12 +173,14 @@ const getModelInfo = (record: ListItem) => {
}
if (record.source === modelSourceMap.ollama_library_value) {
return {
source: `${source}/${record.ollama_library_model_name}`,
repo_id: record.ollama_library_model_name,
title: record.ollama_library_model_name,
filename: record.ollama_library_model_name
};
}
return {
source: `${source}${record.local_path}`,
repo_id: record.local_path,
title: record.local_path,
filename: _.split(record.local_path, /[\\/]/).pop()
@@ -551,11 +556,11 @@ const ModelFiles = () => {
},
render: (text: string, record: ListItem) => {
const modelInfo = getModelInfo(record);
const { repo_id } = modelInfo;
const { repo_id, source } = modelInfo;
return (
<TextWrapper>
<AutoTooltip ghost showTitle title={repo_id}>
{_.get(modelSourceMap, record.source, '')}
<TextWrapper style={{ paddingRight: 8 }}>
<AutoTooltip ghost title={source}>
{source}
</AutoTooltip>
</TextWrapper>
);
@@ -586,7 +591,7 @@ const ModelFiles = () => {
{
title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
dataIndex: 'resolved_paths',
width: '35%',
width: '30%',
ellipsis: {
showTitle: false
},
@@ -597,6 +602,7 @@ const ModelFiles = () => {
{
title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
dataIndex: 'size',
width: 100,
ellipsis: {
showTitle: false
},
@@ -612,6 +618,7 @@ const ModelFiles = () => {
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
sorter: false,
width: 180,
ellipsis: {
showTitle: false
},
src/pages/resources/index.tsx
+4
View File
@@ -12,6 +12,10 @@ const Wrapper = styled.div`
.ant-page-header-heading {
padding-inline: 8px;
}
.ant-tabs-nav .ant-tabs-tab-active,
.ant-tabs-tab {
background: transparent;
}
`;
const Resources = () => {