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

style: dark theme for scroller

Browse Source
This commit is contained in:
jialin
2025-04-28 10:05:06 +08:00
parent ce9c31f368
commit 60d0750695
39 changed files with 216 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/noise_background_1f1f1f_style.svg
+8
View File
@@ -0,0 +1,8 @@
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<filter id="n" x="0" y="0">
<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="5" stitchTiles="stitch"/>
</filter>
<rect width="500" height="500" fill="#1f1f1f" opacity="0.4"/>
<rect width="500" height="500" filter="url(#n)" opacity="0.09"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 366 B

src/atoms/settings.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { atom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
type UserSettings = {
theme: 'light' | 'realDark';
theme: 'light' | 'realDark' | 'auto';
};
export const userSettingsAtom = atomWithStorage<UserSettings>('userSettings', {
src/components/alert-info/block.less
+1 -1
View File
@@ -31,7 +31,7 @@
&.success {
border: 1px solid var(--color-progress-green);
color: var(--color-progress-green);
background: var(--color-green-fill-light);
background: var(--ant-color-success-bg);
.content.success {
font-weight: var(--font-weight-normal);
src/components/drop-down-buttons/index.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import { useIntl } from '@umijs/max';
import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import React from 'react';
import './index.less';
type Trigger = 'click' | 'hover';
@@ -68,7 +69,7 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
<div
className="flex flex-column "
style={{
backgroundColor: 'var(--color-white-1)',
backgroundColor: 'var(--ant-color-bg-elevated)',
padding: 5,
alignItems: 'flex-start',
borderRadius: 'var(--border-radius-base)',
src/components/echarts/config.ts
-1
View File
@@ -68,7 +68,6 @@ export default function useChartConfig() {
const legend = {
itemWidth: 8,
itemHeight: 8,
padding: 0,
textStyle: {
color: chartColorMap.axislabelColor
}
src/components/echarts/line-chart.tsx
+6 -1
View File
@@ -51,7 +51,12 @@ const LineChart: React.FC<ChartProps> = (props) => {
yAxis,
legend: {
...legend,
data: legendData
data: legendData.map((item: any) => {
return {
name: item,
icon: 'circle'
};
})
},
series: []
src/components/highlight-code/index.tsx
+8 -1
View File
@@ -1,3 +1,4 @@
import useUserSettings from '@/hooks/use-user-settings';
import React from 'react';
import CodeViewerDark from './code-viewer-dark';
import CodeViewerLight from './code-viewer-light';
@@ -22,9 +23,15 @@ const HighlightCode: React.FC<{
height = 'auto'
} = props;
const { userSettings } = useUserSettings();
const currentTheme = React.useMemo(() => {
return theme || userSettings.theme === 'realDark' ? 'dark' : 'light';
}, [theme, userSettings.theme]);
return (
<div className="high-light-wrapper hj-wrapper">
{theme === 'dark' ? (
{currentTheme === 'dark' ? (
<CodeViewerDark
lang={lang}
code={code}
src/components/highlight-code/styles/dark.less
+1 -1
View File
@@ -31,7 +31,7 @@ hue-6-2: #e6c07b
.code-pre.dark {
.hljs {
color: #abb2bf;
background: #282c34;
background: var(--color-editor-dark);
}
.hljs-comment,
src/components/highlight-code/styles/index.less
+1 -1
View File
@@ -60,7 +60,7 @@
}
&.dark {
background-color: #282c34;
background-color: var(--color-editor-dark);
&:hover {
&::-webkit-scrollbar-thumb {
src/components/highlight-code/styles/light.less
+1 -1
View File
@@ -31,7 +31,7 @@ hue-6-2: #c18401
.code-pre.light {
.hljs {
color: #383a42;
background: #fafafa;
background: var(--color-editor-light);
}
.hljs-comment,
src/components/icon-font/index.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { createFromIconfontCN } from '@ant-design/icons';
import './iconfont/iconfont.js';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: ''
scriptUrl: '//at.alicdn.com/t/c/font_4613488_uw2djf1vxgf.js'
});
export default IconFont;
src/components/image-editor/tools-bar.tsx
+1 -1
View File
@@ -177,7 +177,7 @@ const ImageActionsBar: React.FC<ImageActionsBarProps> = (props) => {
})}
>
<Button onClick={downloadMask} size="middle" type="text">
<IconFont className="font-size-14" type="icon-save2"></IconFont>
<IconFont className="font-size-14" type="icon-save1"></IconFont>
</Button>
</Tooltip>
</>
src/components/markdown-viewer/index.tsx
+1 -3
View File
@@ -152,9 +152,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
}
if (token.type === 'code') {
htmlstr = (
<HighlightCode theme={theme} code={token.text} lang={token.lang} />
);
htmlstr = <HighlightCode code={token.text} lang={token.lang} />;
}
if (token.type === 'link') {
src/components/seal-form/wrapper/index.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ const WrapperBox = styled.div`
border-style: var(--ant-line-type);
border-color: var(--ant-color-border);
border-radius: var(--border-radius-base);
// background-color: var(--color-white-1);
background-color: var(--ant-color-bg-container);
&.borderless {
border: none;
box-shadow: none;
@@ -167,7 +167,7 @@ const Extra = styled.div`
const AddAfter = styled.div`
position: relative;
color: var(--ant-color-text-quaternary);
font-size: 14px;
font-size: var(--font-size-base);
padding-right: calc(var(--ant-padding-sm) - 1px);
`;
src/components/seal-table/index.tsx
+5 -2
View File
@@ -15,8 +15,10 @@ const Wrapper = styled.div<{ $token: any }>`
--ant-table-header-border-radius: ${(props) =>
props.$token.headerBorderRadius}px;
--ant-table-header-split-color: ${(props) => props.$token.headerSplitColor};
--ant-table-row-selected-bg: var(--ant-table-row-selected-bg);
--ant-table-row-selected-hover-bg: var(--ant-table-row-selected-hover-bg);
--ant-table-row-selected-bg: ${(props) => props.$token.rowSelectedBg};
--ant-table-row-selected-hover-bg: ${(props) =>
props.$token.rowSelectedHoverBg};
--ant-table-row-hover-bg: ${(props) => props.$token.rowHoverBg};
`;
const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
@@ -45,6 +47,7 @@ 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;
src/components/seal-table/styles/skeleton.less
Vendored
+1 -1
View File
@@ -1,7 +1,7 @@
.row-skeleton {
display: flex;
justify-content: flex-start;
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
padding: 16px;
height: 68px;
border-radius: var(--border-radius-base);
src/components/segment-line/index.tsx
+1
View File
@@ -28,6 +28,7 @@ const SegmentedQwrapper = styled.div<{ $height: number }>`
padding: 0px;
bottom: 0px;
top: unset;
background-color: var(--color-white-primary) !important;
}
.ant-segmented-item-label {
display: flex;
src/components/short-cuts/index.less
+2 -2
View File
@@ -23,7 +23,7 @@
}
.ant-table-thead > tr > th {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
height: 36px;
padding-block: 0;
}
@@ -34,7 +34,7 @@
// overflow-y: auto !important;
// }
.ant-table-thead > tr > th {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
height: 36px;
padding-block: 0;
}
src/components/simple-overlay/index.tsx
+46
View File
@@ -0,0 +1,46 @@
import useUserSettings from '@/hooks/use-user-settings';
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import styled from 'styled-components';
const Wrapper = styled.div`
.simplebar-scrollbar::before {
width: var(--scrollbar-size);
background: var(--scrollbar-handle-bg);
}
&.dark {
.simplebar-scrollbar::before {
width: var(--scrollbar-size);
background: var(--scrollbar-handle-light-bg);
}
}
`;
interface SimpleOverlayProps {
height?: string | number;
children?: React.ReactNode;
style?: React.CSSProperties;
}
const SimpleOverlay: React.FC<SimpleOverlayProps> = ({
height,
children,
style
}) => {
const { isDarkTheme } = useUserSettings();
return (
<Wrapper className={isDarkTheme ? 'dark' : 'light'}>
<SimpleBar
style={{
height: height,
...style
}}
>
{children}
</SimpleBar>
</Wrapper>
);
};
export default SimpleOverlay;
src/components/status-tag/index.tsx
+4 -7
View File
@@ -4,9 +4,9 @@ import { InfoCircleOutlined } from '@ant-design/icons';
import { Button, Divider, Tooltip } from 'antd';
import classNames from 'classnames';
import React, { useEffect, useMemo, useState } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import CopyButton from '../copy-button';
import SimpleOverlay from '../simple-overlay';
import CopyStyle from './copy-btn.less';
import './index.less';
@@ -118,11 +118,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
})}
</div>
<SimpleBar
style={{ maxHeight: 200 }}
autoHide={false}
className="tooltip-scrollbar"
>
<SimpleOverlay style={{ maxHeight: 200 }}>
<div
style={{
width: 'max-content',
@@ -139,7 +135,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
<span dangerouslySetInnerHTML={{ __html: messageLink }}></span>
)}
</div>
</SimpleBar>
</SimpleOverlay>
</div>
);
}, [statusValue]);
@@ -155,6 +151,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
>
{statusValue.message ? (
<Tooltip
trigger={['hover']}
title={renderTitle}
destroyTooltipOnHide={true}
overlayInnerStyle={{ paddingInline: 0 }}
src/config/theme/dark.ts
+22 -22
View File
@@ -12,8 +12,8 @@ export default {
cellPaddingInline: 16,
cellPaddingBlock: 6,
cellFontSize: 14,
rowSelectedHoverBg: 'rgb(24 25 27)',
rowHoverBg: 'rgb(24 25 27)',
rowSelectedHoverBg: '#1d1d1d',
rowHoverBg: '#1d1d1d',
rowSelectedBg: 'transparent'
},
Button: {
@@ -23,8 +23,8 @@ export default {
dangerShadow: 'none'
},
Tabs: {
titleFontSizeLG: 14,
cardBg: '#1D1E20'
titleFontSizeLG: 14
// cardBg: '#1D1E20'
},
Menu: {
iconSize: 16,
@@ -32,8 +32,8 @@ export default {
itemBorderRadius: 4,
itemHeight: 44,
itemSelectedColor: '#007BFF',
darkItemSelectedBg: 'rgb(24 25 27)',
darkItemHoverBg: 'rgb(24 25 27)',
darkItemSelectedBg: '#141414',
darkItemHoverBg: '#141414',
groupTitleColor: 'rgba(0,0,0,1)',
itemHoverColor: 'rgba(0,0,0,1)',
itemColor: 'rgba(0,0,0,1)',
@@ -44,14 +44,14 @@ export default {
lineBorderRadius: 2
},
Select: {
optionSelectedBg: 'rgba(230, 230, 230, 88%)',
optionSelectedBg: '#333',
fontSizeLG: 14
},
Message: {
contentPadding: '12px 16px'
},
Tooltip: {
colorBgSpotlight: '#1D1E20'
// colorBgSpotlight: '#333'
},
Cascader: {
dropdownHeight: 240
@@ -59,13 +59,13 @@ export default {
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)'
trackBg: 'rgba(255,255,255,.15)',
handleColor: 'rgba(255,255,255,0.2)',
trackHoverBg: 'rgba(255,255,255,0.25)',
handleActiveColor: 'rgba(255,255,255,0.3)',
dotActiveBorderColor: 'rgba(255,255,255,0.25)',
handleActiveOutlineColor: 'rgba(255,255,255,0.25)',
dotBorderColor: 'rgba(255,255,255,0.25)'
}
},
token: {
@@ -78,12 +78,12 @@ export default {
borderRadiusSM: 2,
fontSize: 14,
motion: true,
colorFill: 'rgb(0,0,0)',
colorFillTertiary: '#1D1E20',
colorBgContainer: '#141414',
colorBgBase: '#000',
colorBorder: '#353535',
colorSplit: '#262626',
colorBorderSecondary: '#262626'
colorFill: '#000',
// colorFillTertiary: '#1D1E20',
// colorBgContainer: '#141414',
colorBgBase: '#000'
// colorBorder: '#353535'
// colorSplit: '#262626',
// colorBorderSecondary: '#262626'
}
};
src/global.less
+26 -35
View File
@@ -4,7 +4,7 @@
@import url('./overrides.less');
html {
--font-family: 'noto sans', sans-serif;
// --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%);
@@ -21,7 +21,8 @@ html {
--scrollbar-handle-hover-bg: rgba(0, 0, 0, 55%);
--color-editor-dark: #282c34;
--color-editor-light: #fafafa;
--color-scrollbar-track: var(--ant-color-fill-tertiary);
--color-scrollbar-track: #f4f5f4; // according to: --ant-color-fill-tertiary
--color-fill-sider: #f4f5f4;
--color-bg-1: #f4f5f4;
--color-scroll-bg: #d9d9d9;
--color-fill-2: #fff;
@@ -40,7 +41,6 @@ html {
--border-radius-mini: 4px;
--border-radius-2px: 2px;
--color-white-1: rgba(255, 255, 255, 100%);
--color-fill-sider: var(--ant-color-fill-tertiary);
--font-weight-500: 500;
--font-weight-normal: 400;
--font-weight-medium: 600;
@@ -71,13 +71,13 @@ 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);
// --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%);
@@ -107,12 +107,12 @@ html {
--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: rgb(217 217 217 / 100%);
// --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;
@@ -157,7 +157,14 @@ html {
}
html[data-theme='realDark'] {
--color-white-1: #1d1e20;
--color-logs-bg: #141414;
--color-white-1: #141414;
--color-fill-sider: #1f1f1f;
--color-editor-dark: #141414;
--color-editor-light: #fafafa;
--color-fill-mask: rgba(255, 255, 255, 10%);
background: #141414;
}
body {
@@ -177,18 +184,6 @@ body {
var(--ant-slider-track-hover-bg);
}
.ant-select-selector {
.ant-select-selection-item {
font-weight: var(--font-weight-normal);
}
}
.ant-checkbox {
.ant-checkbox-inner {
border-radius: var(--checkbox-border-radius) !important;
}
}
// table
.ant-table-wrapper {
.ant-table-selection-column {
@@ -330,11 +325,7 @@ body {
}
.ant-pro-sider .ant-layout-sider-children {
background-color: var(--ant-color-fill-tertiary);
// box-shadow:
// 0px 1px 2px 0px rgb(0 0 0 / 30%),
// 0px 2px 6px 2px rgb(0 0 0 / 15%);
// border-radius: 0 16px 16px 0;
background-color: var(--color-fill-sider);
}
}
@@ -393,7 +384,7 @@ body {
.ant-pro-layout-container {
overflow-x: auto;
min-height: 100vh;
background: var(--ant-color-bg-container);
background-color: var(--ant-color-bg-container);
}
.ant-pro-sider {
src/hooks/use-user-settings.ts
+17 -1
View File
@@ -3,7 +3,7 @@ import themeConfig from '@/config/theme';
import { useAtom } from 'jotai';
import { useEffect, useMemo } from 'react';
type Theme = 'light' | 'realDark';
type Theme = 'light' | 'realDark' | 'auto';
export default function useUserSettings() {
const { light, dark } = themeConfig;
@@ -35,6 +35,22 @@ export default function useUserSettings() {
setHtmlThemeAttr(userSettings.theme);
}, [userSettings.theme]);
// set theme by system theme: only for theme is auto
useEffect(() => {
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);
};
}
}, [userSettings.theme]);
return {
userSettings,
setUserSettings,
src/layouts/index.tsx
+9 -3
View File
@@ -27,7 +27,7 @@ import {
useNavigate,
type IRoute
} from '@umijs/max';
import { Button, ConfigProvider, Modal } from 'antd';
import { Button, ConfigProvider, Modal, theme } from 'antd';
import 'driver.js/dist/driver.css';
import { useAtom } from 'jotai';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -99,7 +99,7 @@ export default (props: any) => {
const { initialize: initialize } = useOverlayScroller({
defer: false
});
const { themeData, setTheme, userSettings } = useUserSettings();
const { themeData, setTheme, userSettings, isDarkTheme } = useUserSettings();
const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
const { initialize: initializeMenu } = useOverlayScroller();
const [userInfo] = useAtom(userAtom);
@@ -406,7 +406,13 @@ export default (props: any) => {
};
return (
<ConfigProvider componentSize="large" theme={themeData}>
<ConfigProvider
componentSize="large"
theme={{
algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
...themeData
}}
>
<ProLayout
route={route}
location={location}
src/pages/llmodels/components/hf-model-file.tsx
+3 -7
View File
@@ -1,3 +1,4 @@
import SimpleOverlay from '@/components/simple-overlay';
import { createAxiosToken } from '@/hooks/use-chunk-request';
import { useIntl } from '@umijs/max';
import { Empty, Select, Spin } from 'antd';
@@ -11,7 +12,6 @@ import React, {
useRef,
useState
} from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import styled from 'styled-components';
import {
@@ -399,11 +399,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
></Spin>
</div>
)}
<SimpleBar
style={{
height: collapsed ? 'max-content' : 'calc(100vh - 300px)'
}}
>
<SimpleOverlay height={collapsed ? 'max-content' : 'calc(100vh - 300px)'}>
<div style={{ padding: '16px 24px' }}>
{dataSource.fileList.length ? (
<ItemFileWrapper>
@@ -433,7 +429,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
)
)}
</div>
</SimpleBar>
</SimpleOverlay>
</div>
);
});
src/pages/llmodels/components/model-card.tsx
+3 -3
View File
@@ -1,5 +1,6 @@
import IconFont from '@/components/icon-font';
import MarkdownViewer from '@/components/markdown-viewer';
import SimpleOverlay from '@/components/simple-overlay';
import useRequestToken from '@/hooks/use-request-token';
import {
DownOutlined,
@@ -17,7 +18,6 @@ import React, {
useRef,
useState
} from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import {
downloadModelFile,
@@ -357,7 +357,7 @@ const ModelCard: React.FC<{
{collapsed ? <DownOutlined /> : <RightOutlined />}
</span>
</span>
<SimpleBar
<SimpleOverlay
style={{
paddingTop: collapsed ? 12 : 0,
maxHeight: collapsed ? 300 : 0
@@ -368,7 +368,7 @@ const ModelCard: React.FC<{
content={readmeText}
theme="light"
></MarkdownViewer>
</SimpleBar>
</SimpleOverlay>
</div>
)}
</div>
src/pages/llmodels/components/search-result.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import IconFont from '@/components/icon-font';
import SimpleOverlay from '@/components/simple-overlay';
import { SearchOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Col, Empty, Row, Spin } from 'antd';
import React, { useMemo } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import { modelSourceMap } from '../config';
import '../style/search-result.less';
@@ -89,7 +89,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
}, [networkError, source, intl]);
return (
<SimpleBar style={{ height: 'calc(100vh - 224px)' }}>
<SimpleOverlay style={{ height: 'calc(100vh - 224px)' }}>
<div style={{ ...props.style }} className="search-result-wrap">
<Spin spinning={props.loading}>
<div style={{ minHeight: 200 }}>
@@ -124,7 +124,7 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
</div>
</Spin>
</div>
</SimpleBar>
</SimpleOverlay>
);
};
src/pages/llmodels/style/catalog-item.less
+2 -2
View File
@@ -34,11 +34,11 @@
}
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.title {
src/pages/llmodels/style/column-wrapper.less
+1 -1
View File
@@ -26,6 +26,6 @@
right: 0;
z-index: 100;
padding-block: 0;
background-color: var(--color-white-1);
background-color: var(--ant-color-bg-elevated);
}
}
src/pages/llmodels/style/data-form.less
+1 -1
View File
@@ -11,7 +11,7 @@
font-weight: var(--font-weight-bold) !important;
&:hover {
background-color: var(--color-fill-sider) !important;
background-color: var(--ant-color-fill-tertiary) !important;
}
}
src/pages/llmodels/style/hf-model-file.less
+3 -2
View File
@@ -8,13 +8,14 @@
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
cursor: pointer;
background-color: var(--ant-color-bg-container);
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.tags {
src/pages/llmodels/style/hf-model-item.less
+3 -2
View File
@@ -7,13 +7,14 @@
border-radius: var(--border-radius-base);
padding: 12px 14px;
cursor: pointer;
background-color: var(--ant-color-bg-container);
&:hover {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
&.active {
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
}
.title {
src/pages/llmodels/style/model-card.less
+1 -1
View File
@@ -27,7 +27,7 @@
.mkd-title {
cursor: pointer;
background-color: var(--color-fill-sider);
background-color: var(--ant-color-fill-tertiary);
border-bottom: 1px solid rgba(255, 255, 255, 10%);
display: flex;
justify-content: space-between;
src/pages/llmodels/style/search-result.less
-1
View File
@@ -1,7 +1,6 @@
@padding: 24px;
.search-result-wrap {
background-color: rgba(255, 255, 255, 100%);
padding: 16px @padding;
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
}
src/pages/playground/components/view-code-modal.tsx
+9 -16
View File
@@ -113,8 +113,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
return '';
}, [lang, payload, parameters, api, clientType, logcommand]);
const handleOnChangeLang = (value: string) => {
setLang(value);
const handleOnChangeLang = (value: string | number) => {
setLang(value as string);
};
const handleClose = () => {
@@ -152,20 +152,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
}
}}
>
<div
style={{
paddingRight: 2,
paddingBottom: 2
}}
>
<HighlightCode
height={380}
theme="dark"
code={codeValue}
lang={lang}
copyable={false}
></HighlightCode>
</div>
<HighlightCode
height={380}
theme="dark"
code={codeValue}
lang={lang}
copyable={false}
></HighlightCode>
</EditorWrap>
<div
style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}
src/pages/playground/components/view-common-code.tsx
+7 -14
View File
@@ -86,20 +86,13 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
}
}}
>
<div
style={{
paddingRight: 2,
paddingBottom: 2
}}
>
<HighlightCode
height={380}
theme="dark"
code={codeValue}
lang={lang}
copyable={false}
></HighlightCode>
</div>
<HighlightCode
height={380}
theme="dark"
code={codeValue}
lang={lang}
copyable={false}
></HighlightCode>
</EditorWrap>
<div
style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}
src/pages/playground/style/message-input.less
+7 -1
View File
@@ -80,11 +80,17 @@
width: 100%;
display: flex;
position: relative;
background-color: var(--ant-color-bg-elevated);
border-radius: var(--border-radius-base);
textarea {
padding-block-start: var(--ant-padding-xxs);
}
.holder {
pointer-events: none;
position: absolute;
top: 0;
top: var(--ant-padding-xxs);
left: 6px;
color: var(--ant-color-text-quaternary);
src/pages/resources/components/styles/installation.less
+2 -1
View File
@@ -7,7 +7,7 @@
border-left: 2px solid var(--ant-color-split);
margin-bottom: 16px;
padding-left: 16px;
background: var(--color-fill-sider);
background: var(--ant-color-fill-tertiary);
border-radius: 2px;
list-style-type: decimal;
@@ -23,6 +23,7 @@
.ant-radio-button-wrapper {
flex: auto;
font-size: var(--font-size-small);
background-color: var(--ant-tabs-card-bg);
}
}
src/pages/resources/components/update-labels.tsx
+3 -3
View File
@@ -2,11 +2,11 @@ import LabelSelector from '@/components/label-selector';
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
import SealInput from '@/components/seal-form/seal-input';
import SimpleOverlay from '@/components/simple-overlay';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
type ViewModalProps = {
@@ -67,7 +67,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
<ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
}
>
<SimpleBar
<SimpleOverlay
style={{
maxHeight: '550px'
}}
@@ -131,7 +131,7 @@ const UpdateLabels: React.FC<ViewModalProps> = (props) => {
></LabelSelector>
</Form.Item>
</Form>
</SimpleBar>
</SimpleOverlay>
</ScrollerModal>
);
};