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

refactor: ui/ux

Browse Source
This commit is contained in:
jialin
2026-04-08 18:54:06 +08:00
committed by jialin
parent 06160546a6
commit 1c09cc6c8c
22 changed files with 325 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/chat/index.tsx
+41 -22
View File
@@ -1,12 +1,11 @@
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 { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Divider, Segmented, Tabs, TabsProps } from 'antd';
import { Segmented, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useEffect, useMemo, useRef, useState } from 'react';
@@ -109,11 +108,11 @@ const Playground: React.FC = () => {
fetchData();
}, []);
const header = useMemo(() => {
return {
title: (
const title = useMemo(() => {
return (
<div className="flex justify-between items-center">
<div className="flex items-center">
<span className="font-600">
<span className="font-600 flex-center">
{intl.formatMessage({ id: 'menu.playground.chat' })}
</span>
{
@@ -126,8 +125,14 @@ const Playground: React.FC = () => {
></Segmented>
}
</div>
)
};
<ViewCodeButtons
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
activeKey={activeKey}
key="view-code-buttons"
/>
</div>
);
}, [activeKey, optionsList, intl]);
useHotkeys(
@@ -148,25 +153,39 @@ const Playground: React.FC = () => {
compare: activeKey === 'compare',
chat: activeKey !== 'compare'
})}
header={header}
extra={[
styles={{
containerWrapper: {
padding: 0
}
}}
leftContent={
<div className="flex items-center">
<span className="font-600 flex-center">
{intl.formatMessage({ id: 'menu.playground.chat' })}
</span>
{
<Segmented
shape="round"
style={{
backgroundColor: 'var(--ant-color-fill-secondary)'
}}
size="middle"
className="m-l-24 font-400"
options={optionsList}
value={activeKey}
onChange={(key) => setActiveKey(key)}
></Segmented>
}
</div>
}
rightContent={
<ViewCodeButtons
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
activeKey={activeKey}
key="view-code-buttons"
/>,
<div key="divider-wrapper">
{activeKey === 'chat' && (
<Divider
key="divider"
orientation="vertical"
style={{ height: 16, marginInline: 16 }}
/>
)}
</div>,
<ExtraContent key="extra-content" />
]}
/>
}
>
<div className="play-ground">
<div className="chat">
src/pages/playground/components/view-code-buttons.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const ViewCodeButtons: React.FC<{
}
return (
<Space key="buttons" style={{ marginRight: 8 }}>
<Space key="buttons">
<Button
size="middle"
onClick={handleViewCode}
src/pages/playground/embedding/index.tsx
+8 -11
View File
@@ -1,9 +1,7 @@
import HotKeys from '@/config/hotkeys';
import { ExtraContent } from '@/layouts/extraRender';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Divider } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
@@ -81,20 +79,19 @@ const PlaygroundEmbedding: React.FC = () => {
return (
<PageContainerInner
className={classNames('playground-container chat')}
extra={[
styles={{
containerWrapper: {
padding: 0
}
}}
rightContent={
<ViewCodeButtons
activeKey=""
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
key="view-code-buttons"
/>,
<Divider
key="divider"
orientation="vertical"
style={{ height: 16, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
/>
}
>
<div className="play-ground">
<div className="chat">
src/pages/playground/embedding/page.tsx
+1 -1
View File
@@ -622,7 +622,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
className="ground-left-footer"
style={{
width: '100%',
padding: '0 32px 16px'
padding: '0 var(--layout-content-inlinepadding) 16px'
}}
>
<h3 className="m-l-10 flex-between flex-center font-size-14 line-24 m-b-16">
src/pages/playground/images/index.tsx
+23 -12
View File
@@ -1,12 +1,11 @@
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 { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Divider, Segmented, Tabs, TabsProps } from 'antd';
import { Segmented, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useEffect, useMemo, useRef, useState } from 'react';
@@ -156,21 +155,33 @@ const TextToImages: React.FC = () => {
return (
<PageContainerInner
header={header}
extra={[
leftContent={
<div className="flex items-center">
<span className="font-600 flex-center">
{intl.formatMessage({ id: 'menu.playground.text2images' })}
</span>
<Segmented
shape="round"
style={{
backgroundColor: 'var(--ant-color-fill-secondary)'
}}
size="middle"
className="m-l-24 font-400"
options={optionsList}
value={activeKey}
onChange={(key) => setActiveKey(key)}
></Segmented>
</div>
}
rightContent={
<ViewCodeButtons
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
activeKey={activeKey}
key="view-code-buttons"
></ViewCodeButtons>,
<Divider
key="divider"
orientation="vertical"
style={{ height: 16, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
></ViewCodeButtons>
}
styles={{ containerWrapper: { padding: 0 } }}
className={classNames('playground-container chat')}
>
<div className="play-ground">
src/pages/playground/rerank/index.tsx
+8 -11
View File
@@ -1,9 +1,7 @@
import HotKeys from '@/config/hotkeys';
import { ExtraContent } from '@/layouts/extraRender';
import { modelCategoriesMap } from '@/pages/llmodels/config';
import { useIntl } from '@umijs/max';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import { Divider } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
@@ -85,20 +83,19 @@ const PlaygroundRerank: React.FC = () => {
return (
<PageContainerInner
className={classNames('playground-container chat')}
extra={[
styles={{
containerWrapper: {
padding: 0
}
}}
rightContent={
<ViewCodeButtons
activeKey=""
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
key="view-code-buttons"
></ViewCodeButtons>,
<Divider
key="divider"
orientation="vertical"
style={{ height: 16, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
></ViewCodeButtons>
}
>
<div className="play-ground">
<div className="chat">
src/pages/playground/rerank/page.tsx
+5 -2
View File
@@ -41,7 +41,7 @@ import { fieldConfig } from './params-config';
const { Text } = Typography;
const SearchInputWrapper = styled.div`
margin: 16px 32px 10px;
margin: 16px var(--layout-content-inlinepadding) 10px;
position: relative;
`;
@@ -477,7 +477,10 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
<div className="ground-left-footer">
<h3
className="m-l-10 flex-between flex-center font-size-14 line-24 m-b-0"
style={{ padding: '0 32px', marginTop: 16 }}
style={{
padding: '0 var(--layout-content-inlinepadding)',
marginTop: 16
}}
>
<span>{intl.formatMessage({ id: 'playground.rerank.query' })}</span>
</h3>
src/pages/playground/speech/index.tsx
+24 -12
View File
@@ -2,12 +2,11 @@ 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 { useIntl, useSearchParams } from '@umijs/max';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import { Divider, Segmented, Tabs, TabsProps } from 'antd';
import { Segmented, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useEffect, useMemo, useRef, useState } from 'react';
@@ -196,21 +195,34 @@ const Playground: React.FC = () => {
return (
<PageContainerInner
header={header}
extra={[
leftContent={
<div className="flex items-center">
<span className="font-600 flex-center">
{intl.formatMessage({ id: 'menu.playground.speech' })}
</span>
{
<Segmented
shape="round"
style={{
backgroundColor: 'var(--ant-color-fill-secondary)'
}}
size="middle"
className="m-l-24 font-400"
options={optionsList}
value={activeKey}
onChange={(key) => setActiveKey(key)}
></Segmented>
}
</div>
}
rightContent={
<ViewCodeButtons
activeKey=""
handleViewCode={handleViewCode}
handleToggleCollapse={handleToggleCollapse}
key="view-code-buttons"
></ViewCodeButtons>,
<Divider
key="divider"
orientation="vertical"
style={{ height: 16, marginInline: 16 }}
/>,
<ExtraContent key="extra-content" />
]}
></ViewCodeButtons>
}
className={classNames('playground-container', {
compare: activeKey === 'compare',
chat: activeKey !== 'compare'
src/pages/playground/style/ground-llm.less
+4 -1
View File
@@ -9,7 +9,10 @@
justify-content: space-between;
flex-direction: column;
position: relative;
height: calc(100vh - @HEADER_HEIGHT);
height: calc(
100vh - @HEADER_HEIGHT - var(--page-content-padding) -
var(--page-header-height)
);
width: calc(100% - 390px);
.message-list-wrap {
src/pages/playground/style/params-container.module.less
+4 -1
View File
@@ -5,7 +5,10 @@
width: 390px;
border-left: 1px solid var(--ant-color-split);
transition: width 0.3s ease;
height: calc(100vh - @HEADER_HEIGHT);
height: calc(
100vh - @HEADER_HEIGHT - var(--page-content-padding) -
var(--page-header-height)
);
padding-top: 16px;
display: flex;
flex-direction: column;
src/pages/playground/style/play-ground.less
+10 -18
View File
@@ -1,4 +1,4 @@
@HEADER_HEIGHT: 56px;
@HEADER_HEIGHT: 48px;
.play-ground {
display: flex;
@@ -39,7 +39,10 @@
.params {
overflow: hidden;
height: calc(100vh - @HEADER_HEIGHT);
height: calc(
100vh - var(--page-header-height) - var(--page-content-padding) -
@HEADER_HEIGHT
);
.collapse {
width: 0;
@@ -48,7 +51,7 @@
}
.params-box {
padding-inline: 32px;
padding-inline: var(--layout-content-inlinepadding);
height: 100%;
width: 390px;
overflow-y: auto;
@@ -70,7 +73,10 @@
.ant-divider {
margin: 0;
height: calc(100vh - 136px);
height: calc(
100vh - var(--page-header-height) - var(--page-content-padding) -
@HEADER_HEIGHT
);
}
}
}
@@ -85,20 +91,6 @@
position: relative;
}
&.chat {
.ant-page-header {
// &::after {
// position: absolute;
// content: '';
// left: 32px;
// right: 32px;
// bottom: 0;
// height: 1px;
// border-bottom: 1px solid var(--ant-color-split);
// }
}
}
&.compare {
.ant-pro-page-container-children-container {
padding-inline: 0;
src/pages/playground/style/rerank.less
+1 -1
View File
@@ -3,7 +3,7 @@
display: flex;
flex-direction: column;
height: 100%;
padding-inline: 32px;
padding-inline: var(--layout-content-inlinepadding);
padding-bottom: 16px;
.documents {
src/pages/playground/style/speech-to-text.less
+1 -1
View File
@@ -1,5 +1,5 @@
.speech-to-text {
padding: 32px;
padding: var(--layout-content-inlinepadding);
height: 100%;
display: flex;
gap: 30px;