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

refactor: page layout

Browse Source
This commit is contained in:
jialin
2025-11-05 10:02:25 +08:00
parent 219f9871a7
commit 4c22d08da5
43 changed files with 784 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/ground-stt.tsx
+2 -2
View File
@@ -5,6 +5,7 @@ import AudioPlayer from '@/components/audio-player';
import CopyButton from '@/components/copy-button';
import IconFont from '@/components/icon-font';
import UploadAudio from '@/components/upload-audio';
import { HEADER_HEIGHT } from '@/config/constants';
import routeCachekey from '@/config/route-cachekey';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import { useCancelToken } from '@/hooks/use-request-token';
@@ -13,7 +14,6 @@ import { SendOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Spin, Tooltip } from 'antd';
import classNames from 'classnames';
import 'overlayscrollbars/overlayscrollbars.css';
import React, {
forwardRef,
useCallback,
@@ -289,7 +289,7 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
<div
className="ground-left-wrapper"
style={{
height: 'calc(100vh - 72px)'
height: `calc(100vh - ${HEADER_HEIGHT}px)`
}}
>
<div className="ground-left">
src/pages/playground/components/multiple-chat/index.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { HEADER_HEIGHT } from '@/config/constants';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import CompareContext from '../../config/compare-context';
import {
@@ -39,7 +39,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
const modelsCounterMap = useRef<Record<string, number>>({});
const modelRefs = useRef<any>({});
const chatListScrollRef = useRef<any>(null);
const boxHeight = 'calc(100vh - 72px)';
const boxHeight = `calc(100vh - ${HEADER_HEIGHT}px)`;
const [actions, setActions] = useState<MessageItemAction[]>([
'upload',
'delete',
src/pages/playground/components/view-code-buttons.tsx
+40
View File
@@ -0,0 +1,40 @@
import { useIntl } from '@umijs/max';
import { Button, Space } from 'antd';
import React from 'react';
import IconFont from '../../../components/icon-font';
const ViewCodeButtons: React.FC<{
handleViewCode: () => void;
handleToggleCollapse: () => void;
activeKey: string;
}> = ({ handleViewCode, handleToggleCollapse, activeKey }) => {
const intl = useIntl();
if (activeKey === 'compare') {
return null;
}
return (
<Space key="buttons" style={{ marginRight: 8 }}>
<Button
size="middle"
onClick={handleViewCode}
icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button
size="middle"
onClick={handleToggleCollapse}
icon={
<IconFont
type="icon-a-layout6-line"
className="font-size-16"
></IconFont>
}
></Button>
</Space>
);
};
export default ViewCodeButtons;
src/pages/playground/embedding.tsx
+26 -43
View File
@@ -1,15 +1,17 @@
import IconFont from '@/components/icon-font';
import HotKeys from '@/config/hotkeys';
import { ExtraContent } from '@/layouts/extraRender';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Space } from 'antd';
import { useMemoizedFn } from 'ahooks';
import { Divider } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { PageContainerInner } from '../_components/page-box';
import { queryModelsList } from './apis';
import GroundEmbedding from './components/ground-embedding';
import ViewCodeButtons from './components/view-code-buttons';
import useCollapseLayout from './hooks/use-collapse-layout';
import './style/play-ground.less';
@@ -27,12 +29,12 @@ const PlaygroundEmbedding: React.FC = () => {
triggeredRef: groundLeftRef.current
});
const handleViewCode = useCallback(() => {
const handleViewCode = useMemoizedFn(() => {
groundLeftRef.current?.viewCode?.();
}, [groundLeftRef.current]);
const handleToggleCollapse = useCallback(() => {
});
const handleToggleCollapse = useMemoizedFn(() => {
groundLeftRef.current?.setCollapse?.();
}, [groundLeftRef.current]);
});
useEffect(() => {
const getModelListByEmbedding = async () => {
@@ -66,30 +68,6 @@ const PlaygroundEmbedding: React.FC = () => {
fetchData();
}, []);
const renderExtra = () => {
return (
<Space key="buttons">
<Button
size="middle"
onClick={handleViewCode}
icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button
size="middle"
onClick={handleToggleCollapse}
icon={
<IconFont
type="icon-a-layout6-line"
className="font-size-16"
></IconFont>
}
></Button>
</Space>
);
};
useHotkeys(
HotKeys.RIGHT.join(','),
() => {
@@ -101,17 +79,22 @@ const PlaygroundEmbedding: React.FC = () => {
);
return (
<PageContainer
ghost
header={{
title: intl.formatMessage({ id: 'menu.playground.embedding' }),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
}}
extra={renderExtra()}
<PageContainerInner
className={classNames('playground-container chat')}
extra={[
<ViewCodeButtons
activeKey=""
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
key="view-code-buttons"
/>,
<Divider
key="divider"
type="vertical"
style={{ height: 24, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
>
<div className="play-ground">
<div className="chat">
@@ -122,7 +105,7 @@ const PlaygroundEmbedding: React.FC = () => {
></GroundEmbedding>
</div>
</div>
</PageContainer>
</PageContainerInner>
);
};
src/pages/playground/images.tsx
+27 -41
View File
@@ -1,19 +1,21 @@
import IconFont from '@/components/icon-font';
import breakpoints from '@/config/breakpoints';
import HotKeys from '@/config/hotkeys';
import useWindowResize from '@/hooks/use-window-resize';
import { ExtraContent } from '@/layouts/extraRender';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { DiffOutlined, HighlightOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
import { useMemoizedFn } from 'ahooks';
import { Divider, Segmented, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { PageContainerInner } from '../_components/page-box';
import { queryModelsList } from './apis';
import GroundImages from './components/ground-images';
import ImageEdit from './components/image-edit';
import ViewCodeButtons from './components/view-code-buttons';
import './style/play-ground.less';
const TabsValueMap = {
@@ -44,21 +46,21 @@ const TextToImages: React.FC = () => {
];
}, [intl]);
const handleViewCode = useCallback(() => {
const handleViewCode = useMemoizedFn(() => {
if (activeKey === TabsValueMap.Tab1) {
groundTabRef1.current?.viewCode?.();
} else if (activeKey === TabsValueMap.Tab2) {
groundTabRef2.current?.viewCode?.();
}
}, [activeKey]);
});
const handleToggleCollapse = useCallback(() => {
const handleToggleCollapse = useMemoizedFn(() => {
if (activeKey === TabsValueMap.Tab1) {
groundTabRef1.current?.setCollapse?.();
return;
}
groundTabRef2.current?.setCollapse?.();
}, [activeKey]);
});
const items: TabsProps['items'] = useMemo(() => {
return [
@@ -124,30 +126,6 @@ const TextToImages: React.FC = () => {
fetchData();
}, []);
const renderExtra = useMemo(() => {
return (
<Space key="buttons">
<Button
size="middle"
onClick={handleViewCode}
icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button
size="middle"
onClick={handleToggleCollapse}
icon={
<IconFont
type="icon-a-layout6-line"
className="font-size-16"
></IconFont>
}
></Button>
</Space>
);
}, [intl, handleViewCode, handleToggleCollapse]);
const header = useMemo(() => {
return {
title: (
@@ -164,11 +142,7 @@ const TextToImages: React.FC = () => {
></Segmented>
}
</div>
),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
)
};
}, [optionsList]);
@@ -183,10 +157,22 @@ const TextToImages: React.FC = () => {
);
return (
<PageContainer
ghost
<PageContainerInner
header={header}
extra={renderExtra}
extra={[
<ViewCodeButtons
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
activeKey={activeKey}
key="view-code-buttons"
></ViewCodeButtons>,
<Divider
key="divider"
type="vertical"
style={{ height: 24, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
className={classNames('playground-container chat')}
>
<div className="play-ground">
@@ -194,7 +180,7 @@ const TextToImages: React.FC = () => {
<Tabs items={items} activeKey={activeKey}></Tabs>
</div>
</div>
</PageContainer>
</PageContainerInner>
);
};
src/pages/playground/index.tsx
+39 -45
View File
@@ -1,21 +1,32 @@
import IconFont from '@/components/icon-font';
import breakpoints from '@/config/breakpoints';
import HotKeys from '@/config/hotkeys';
import useWindowResize from '@/hooks/use-window-resize';
import { ExtraContent } from '@/layouts/extraRender';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
import { useMemoizedFn } from 'ahooks';
import { Divider, Segmented, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import styled from 'styled-components';
import { PageContainerInner } from '../_components/page-box';
import { queryModelsList } from './apis';
import GroundLeft from './components/ground-left';
import MultipleChat from './components/multiple-chat';
import ViewCodeButtons from './components/view-code-buttons';
import './style/play-ground.less';
const Header = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
padding-inline: 32px;
`;
const Playground: React.FC = () => {
const intl = useIntl();
const { size } = useWindowResize();
@@ -40,27 +51,28 @@ const Playground: React.FC = () => {
];
}, [intl]);
const handleViewCode = useCallback(() => {
const handleViewCode = useMemoizedFn(() => {
if (activeKey === 'reranker') {
groundRerankerRef.current?.viewCode?.();
} else if (activeKey === 'chat') {
groundLeftRef.current?.viewCode?.();
}
}, [activeKey]);
});
const handleToggleCollapse = useCallback(() => {
const handleToggleCollapse = useMemoizedFn(() => {
if (activeKey === 'reranker') {
groundRerankerRef.current?.setCollapse?.();
return;
}
groundLeftRef.current?.setCollapse?.();
}, [activeKey]);
});
const items: TabsProps['items'] = useMemo(() => {
return [
{
key: 'chat',
label: 'Chat',
icon: <MessageOutlined />,
children: (
<GroundLeft ref={groundLeftRef} modelList={modelList}></GroundLeft>
)
@@ -68,6 +80,7 @@ const Playground: React.FC = () => {
{
key: 'compare',
label: 'Compare',
icon: <OneToOneOutlined />,
children: <MultipleChat modelList={modelList} loaded={loaded} />
}
];
@@ -105,33 +118,6 @@ const Playground: React.FC = () => {
fetchData();
}, []);
const renderExtra = useMemo(() => {
if (activeKey === 'compare') {
return false;
}
return (
<Space key="buttons">
<Button
size="middle"
onClick={handleViewCode}
icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button
size="middle"
onClick={handleToggleCollapse}
icon={
<IconFont
type="icon-a-layout6-line"
className="font-size-16"
></IconFont>
}
></Button>
</Space>
);
}, [activeKey, intl, handleViewCode, handleToggleCollapse]);
const header = useMemo(() => {
return {
title: (
@@ -148,11 +134,7 @@ const Playground: React.FC = () => {
></Segmented>
}
</div>
),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
)
};
}, [optionsList]);
@@ -169,21 +151,33 @@ const Playground: React.FC = () => {
);
return (
<PageContainer
ghost
header={header}
extra={renderExtra}
<PageContainerInner
className={classNames('playground-container', {
compare: activeKey === 'compare',
chat: activeKey !== 'compare'
})}
header={header}
extra={[
<ViewCodeButtons
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
activeKey={activeKey}
key="view-code-buttons"
/>,
<Divider
key="divider"
type="vertical"
style={{ height: 24, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
>
<div className="play-ground">
<div className="chat">
<Tabs items={items} activeKey={activeKey}></Tabs>
</div>
</div>
</PageContainer>
</PageContainerInner>
);
};
src/pages/playground/rerank.tsx
+26 -44
View File
@@ -1,21 +1,22 @@
import IconFont from '@/components/icon-font';
import HotKeys from '@/config/hotkeys';
import { ExtraContent } from '@/layouts/extraRender';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Space } from 'antd';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import { Divider } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { PageContainerInner } from '../_components/page-box';
import { queryModelsList } from './apis';
import GroundReranker from './components/ground-reranker';
import ViewCodeButtons from './components/view-code-buttons';
import useCollapseLayout from './hooks/use-collapse-layout';
import './style/play-ground.less';
const PlaygroundRerank: React.FC = () => {
const intl = useIntl();
const groundLeftRef = useRef<any>(null);
const groundRerankerRef = useRef<any>(null);
const [rerankerModelList, setRerankerModelList] = useState<
Global.BaseOption<string>[]
@@ -29,13 +30,13 @@ const PlaygroundRerank: React.FC = () => {
triggeredRef: groundRerankerRef.current
});
const handleViewCode = useCallback(() => {
const handleViewCode = useMemoizedFn(() => {
groundRerankerRef.current?.viewCode?.();
}, [groundRerankerRef]);
});
const handleToggleCollapse = useCallback(() => {
const handleToggleCollapse = useMemoizedFn(() => {
groundRerankerRef.current?.setCollapse?.();
}, [groundRerankerRef]);
});
useEffect(() => {
const getModelListByReranker = async () => {
@@ -71,30 +72,6 @@ const PlaygroundRerank: React.FC = () => {
fetchData();
}, []);
const renderExtra = () => {
return (
<Space key="buttons">
<Button
size="middle"
onClick={handleViewCode}
icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button
size="middle"
onClick={handleToggleCollapse}
icon={
<IconFont
type="icon-a-layout6-line"
className="font-size-16"
></IconFont>
}
></Button>
</Space>
);
};
useHotkeys(
HotKeys.RIGHT.join(','),
() => {
@@ -106,17 +83,22 @@ const PlaygroundRerank: React.FC = () => {
);
return (
<PageContainer
ghost
header={{
title: intl.formatMessage({ id: 'menu.playground.rerank' }),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
}}
extra={renderExtra()}
<PageContainerInner
className={classNames('playground-container chat')}
extra={[
<ViewCodeButtons
activeKey=""
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
key="view-code-buttons"
></ViewCodeButtons>,
<Divider
key="divider"
type="vertical"
style={{ height: 24, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
>
<div className="play-ground">
<div className="chat">
@@ -127,7 +109,7 @@ const PlaygroundRerank: React.FC = () => {
></GroundReranker>
</div>
</div>
</PageContainer>
</PageContainerInner>
);
};
src/pages/playground/speech.tsx
+27 -40
View File
@@ -2,18 +2,21 @@ import IconFont from '@/components/icon-font';
import breakpoints from '@/config/breakpoints';
import HotKeys from '@/config/hotkeys';
import useWindowResize from '@/hooks/use-window-resize';
import { ExtraContent } from '@/layouts/extraRender';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { AudioOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import { Divider, Segmented, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { PageContainerInner } from '../_components/page-box';
import { queryModelsList } from './apis';
import GroundSTT from './components/ground-stt';
import GroundTTS from './components/ground-tts';
import ViewCodeButtons from './components/view-code-buttons';
import './style/play-ground.less';
const TabsValueMap = {
@@ -53,21 +56,21 @@ const Playground: React.FC = () => {
];
}, [intl]);
const handleViewCode = useCallback(() => {
const handleViewCode = useMemoizedFn(() => {
if (activeKey === TabsValueMap.Tab1) {
groundTabRef1.current?.viewCode?.();
} else if (activeKey === TabsValueMap.Tab2) {
groundTabRef2.current?.viewCode?.();
}
}, [activeKey]);
});
const handleToggleCollapse = useCallback(() => {
const handleToggleCollapse = useMemoizedFn(() => {
if (activeKey === TabsValueMap.Tab1) {
groundTabRef1.current?.setCollapse?.();
return;
}
groundTabRef2.current?.setCollapse?.();
}, [activeKey]);
});
const items: TabsProps['items'] = useMemo(() => {
return [
@@ -160,30 +163,6 @@ const Playground: React.FC = () => {
fetchData();
}, []);
const renderExtra = useMemo(() => {
return (
<Space key="buttons">
<Button
size="middle"
onClick={handleViewCode}
icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button
size="middle"
onClick={handleToggleCollapse}
icon={
<IconFont
type="icon-a-layout6-line"
className="font-size-16"
></IconFont>
}
></Button>
</Space>
);
}, [handleToggleCollapse, handleViewCode, intl]);
const header = useMemo(() => {
return {
title: (
@@ -201,11 +180,7 @@ const Playground: React.FC = () => {
></Segmented>
}
</div>
),
style: {
paddingInline: 'var(--layout-content-header-inlinepadding)'
},
breadcrumb: {}
)
};
}, [activeKey, optionsList]);
@@ -220,10 +195,22 @@ const Playground: React.FC = () => {
);
return (
<PageContainer
ghost
<PageContainerInner
header={header}
extra={renderExtra}
extra={[
<ViewCodeButtons
activeKey=""
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
key="view-code-buttons"
></ViewCodeButtons>,
<Divider
key="divider"
type="vertical"
style={{ height: 24, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
className={classNames('playground-container', {
compare: activeKey === 'compare',
chat: activeKey !== 'compare'
@@ -234,7 +221,7 @@ const Playground: React.FC = () => {
<Tabs items={items} activeKey={activeKey}></Tabs>
</div>
</div>
</PageContainer>
</PageContainerInner>
);
};
src/pages/playground/style/ground-left.less
+4 -2
View File
@@ -1,3 +1,5 @@
@HEADER_HEIGHT: 56px;
.ground-left-wrapper {
display: flex;
@@ -7,7 +9,7 @@
width: 390px;
border-left: 1px solid var(--ant-color-split);
transition: width 0.3s ease;
height: calc(100vh - 72px);
height: calc(100vh - @HEADER_HEIGHT);
padding-top: 16px;
overflow-y: auto;
@@ -40,7 +42,7 @@
justify-content: space-between;
flex-direction: column;
position: relative;
height: calc(100vh - 72px);
height: calc(100vh - @HEADER_HEIGHT);
width: calc(100% - 390px);
.message-list-wrap {
src/pages/playground/style/play-ground.less
+12 -11
View File
@@ -1,3 +1,5 @@
@HEADER_HEIGHT: 56px;
.play-ground {
display: flex;
align-items: flex-start;
@@ -37,7 +39,7 @@
.params {
overflow: hidden;
height: calc(100vh - 72px);
height: calc(100vh - @HEADER_HEIGHT);
.collapse {
width: 0;
@@ -81,20 +83,19 @@
.ant-page-header {
position: relative;
height: 72px;
}
&.chat {
.ant-page-header {
&::after {
position: absolute;
content: '';
left: 32px;
right: 32px;
bottom: 0;
height: 1px;
border-bottom: 1px solid var(--ant-color-split);
}
// &::after {
// position: absolute;
// content: '';
// left: 32px;
// right: 32px;
// bottom: 0;
// height: 1px;
// border-bottom: 1px solid var(--ant-color-split);
// }
}
}