diff --git a/src/assets/images/noise_background_1f1f1f_style.svg b/src/assets/images/noise_background_1f1f1f_style.svg new file mode 100644 index 00000000..55c39818 --- /dev/null +++ b/src/assets/images/noise_background_1f1f1f_style.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/atoms/settings.ts b/src/atoms/settings.ts index cba83bf7..b0685f01 100644 --- a/src/atoms/settings.ts +++ b/src/atoms/settings.ts @@ -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', { diff --git a/src/components/alert-info/block.less b/src/components/alert-info/block.less index 098b717b..b6ec0334 100644 --- a/src/components/alert-info/block.less +++ b/src/components/alert-info/block.less @@ -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); diff --git a/src/components/drop-down-buttons/index.tsx b/src/components/drop-down-buttons/index.tsx index 8a29d4f4..dd0aa802 100644 --- a/src/components/drop-down-buttons/index.tsx +++ b/src/components/drop-down-buttons/index.tsx @@ -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 = ({
= (props) => { yAxis, legend: { ...legend, - data: legendData + data: legendData.map((item: any) => { + return { + name: item, + icon: 'circle' + }; + }) }, series: [] diff --git a/src/components/highlight-code/index.tsx b/src/components/highlight-code/index.tsx index a8a23d70..15c41a8f 100644 --- a/src/components/highlight-code/index.tsx +++ b/src/components/highlight-code/index.tsx @@ -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 (
- {theme === 'dark' ? ( + {currentTheme === 'dark' ? ( = (props) => { })} > diff --git a/src/components/markdown-viewer/index.tsx b/src/components/markdown-viewer/index.tsx index 9de57be2..0dbfdd41 100644 --- a/src/components/markdown-viewer/index.tsx +++ b/src/components/markdown-viewer/index.tsx @@ -152,9 +152,7 @@ const MarkdownViewer: React.FC = ({ } if (token.type === 'code') { - htmlstr = ( - - ); + htmlstr = ; } if (token.type === 'link') { diff --git a/src/components/seal-form/wrapper/index.tsx b/src/components/seal-form/wrapper/index.tsx index 4ff946e7..be2a2b9d 100644 --- a/src/components/seal-form/wrapper/index.tsx +++ b/src/components/seal-form/wrapper/index.tsx @@ -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); `; diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index ccc27435..a170dafb 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -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 = ( @@ -45,6 +47,7 @@ const SealTable: React.FC = ( loadChildrenAPI } = props; const { token } = theme.useToken(); + console.log('seal-table-props', token.Table); const parsedColumns = useMemo(() => { if (columns) return columns; diff --git a/src/components/seal-table/styles/skeleton.less b/src/components/seal-table/styles/skeleton.less index ae8c0a58..0c0cdea6 100644 --- a/src/components/seal-table/styles/skeleton.less +++ b/src/components/seal-table/styles/skeleton.less @@ -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); diff --git a/src/components/segment-line/index.tsx b/src/components/segment-line/index.tsx index f8c0638d..870f6039 100644 --- a/src/components/segment-line/index.tsx +++ b/src/components/segment-line/index.tsx @@ -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; diff --git a/src/components/short-cuts/index.less b/src/components/short-cuts/index.less index 78f569e2..c409b0a2 100644 --- a/src/components/short-cuts/index.less +++ b/src/components/short-cuts/index.less @@ -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; } diff --git a/src/components/simple-overlay/index.tsx b/src/components/simple-overlay/index.tsx new file mode 100644 index 00000000..72579df1 --- /dev/null +++ b/src/components/simple-overlay/index.tsx @@ -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 = ({ + height, + children, + style +}) => { + const { isDarkTheme } = useUserSettings(); + return ( + + + {children} + + + ); +}; + +export default SimpleOverlay; diff --git a/src/components/status-tag/index.tsx b/src/components/status-tag/index.tsx index 8d8d7f65..30f23b36 100644 --- a/src/components/status-tag/index.tsx +++ b/src/components/status-tag/index.tsx @@ -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 = ({ })}
- +
= ({ )}
- +
); }, [statusValue]); @@ -155,6 +151,7 @@ const StatusTag: React.FC = ({ > {statusValue.message ? ( { + 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, diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 90058d3b..52617d61 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -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 ( - + = forwardRef((props, ref) => { > )} - +
{dataSource.fileList.length ? ( @@ -433,7 +429,7 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { ) )}
- + ); }); diff --git a/src/pages/llmodels/components/model-card.tsx b/src/pages/llmodels/components/model-card.tsx index 84bce061..7f4bee99 100644 --- a/src/pages/llmodels/components/model-card.tsx +++ b/src/pages/llmodels/components/model-card.tsx @@ -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 ? : } - - + )} diff --git a/src/pages/llmodels/components/search-result.tsx b/src/pages/llmodels/components/search-result.tsx index 822bbcb2..e7712e06 100644 --- a/src/pages/llmodels/components/search-result.tsx +++ b/src/pages/llmodels/components/search-result.tsx @@ -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 = (props) => { }, [networkError, source, intl]); return ( - +
@@ -124,7 +124,7 @@ const SearchResult: React.FC = (props) => {
- + ); }; diff --git a/src/pages/llmodels/style/catalog-item.less b/src/pages/llmodels/style/catalog-item.less index 2c92883b..de110f6a 100644 --- a/src/pages/llmodels/style/catalog-item.less +++ b/src/pages/llmodels/style/catalog-item.less @@ -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 { diff --git a/src/pages/llmodels/style/column-wrapper.less b/src/pages/llmodels/style/column-wrapper.less index 804edbc1..6774f907 100644 --- a/src/pages/llmodels/style/column-wrapper.less +++ b/src/pages/llmodels/style/column-wrapper.less @@ -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); } } diff --git a/src/pages/llmodels/style/data-form.less b/src/pages/llmodels/style/data-form.less index fa30a0cd..17f9d27c 100644 --- a/src/pages/llmodels/style/data-form.less +++ b/src/pages/llmodels/style/data-form.less @@ -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; } } diff --git a/src/pages/llmodels/style/hf-model-file.less b/src/pages/llmodels/style/hf-model-file.less index 50f0da4b..564d9e14 100644 --- a/src/pages/llmodels/style/hf-model-file.less +++ b/src/pages/llmodels/style/hf-model-file.less @@ -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 { diff --git a/src/pages/llmodels/style/hf-model-item.less b/src/pages/llmodels/style/hf-model-item.less index 883da356..0223d9c6 100644 --- a/src/pages/llmodels/style/hf-model-item.less +++ b/src/pages/llmodels/style/hf-model-item.less @@ -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 { diff --git a/src/pages/llmodels/style/model-card.less b/src/pages/llmodels/style/model-card.less index e93107ea..2ecf7f8f 100644 --- a/src/pages/llmodels/style/model-card.less +++ b/src/pages/llmodels/style/model-card.less @@ -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; diff --git a/src/pages/llmodels/style/search-result.less b/src/pages/llmodels/style/search-result.less index cc16e52d..5df66e0f 100644 --- a/src/pages/llmodels/style/search-result.less +++ b/src/pages/llmodels/style/search-result.less @@ -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); } diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx index e3c67162..8972f71e 100644 --- a/src/pages/playground/components/view-code-modal.tsx +++ b/src/pages/playground/components/view-code-modal.tsx @@ -113,8 +113,8 @@ const ViewCodeModal: React.FC = (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 = (props) => { } }} > -
- -
+
= (props) => { } }} > -
- -
+
= (props) => { } > - = (props) => { > - + ); };