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

style: custom srcoll bar style

Browse Source
This commit is contained in:
jialin
2024-08-19 14:34:29 +08:00
parent 5b050265c1
commit 5d1d8773ec
8 changed files with 190 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -38,6 +38,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hotkeys-hook": "^4.5.0",
"simplebar-react": "^3.2.6",
"umi-presets-pro": "^2.0.3"
},
"devDependencies": {
pnpm-lock.yaml
Generated
+30 -28
View File
@@ -86,6 +86,9 @@ dependencies:
react-hotkeys-hook:
specifier: ^4.5.0
version: 4.5.0(react-dom@18.2.0)(react@18.2.0)
simplebar-react:
specifier: ^3.2.6
version: 3.2.6(react@18.2.0)
umi-presets-pro:
specifier: ^2.0.3
version: 2.0.3(@babel/core@7.24.9)(@types/react-dom@18.3.0)(@types/react@18.3.1)(antd@5.18.3)(dva@2.5.0-beta.2)(rc-field-form@1.44.0)(react-dom@18.2.0)(react@18.2.0)(umi@4.3.6)
@@ -4456,7 +4459,7 @@ packages:
dependencies:
'@babel/core': 7.24.5
postcss: 7.0.39
postcss-syntax: 0.36.2(postcss@7.0.39)
postcss-syntax: 0.36.2(postcss@8.4.38)
transitivePeerDependencies:
- supports-color
dev: false
@@ -4497,7 +4500,7 @@ packages:
postcss-syntax: '>=0.36.2'
dependencies:
postcss: 7.0.39
postcss-syntax: 0.36.2(postcss@7.0.39)
postcss-syntax: 0.36.2(postcss@8.4.38)
remark: 13.0.0
unist-util-find-all-after: 3.0.2
transitivePeerDependencies:
@@ -4820,6 +4823,12 @@ packages:
/@types/json-schema@7.0.15:
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==, tarball: https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz}
/@types/lodash-es@4.17.12:
resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==, tarball: https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz}
dependencies:
'@types/lodash': 4.17.4
dev: false
/@types/lodash@4.17.4:
resolution: {integrity: sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==}
dev: false
@@ -13116,7 +13125,7 @@ packages:
dependencies:
htmlparser2: 3.10.1
postcss: 7.0.39
postcss-syntax: 0.36.2(postcss@7.0.39)
postcss-syntax: 0.36.2(postcss@8.4.38)
dev: false
/postcss-image-set-function@4.0.7(postcss@8.4.38):
@@ -13590,30 +13599,6 @@ packages:
lodash: 4.17.21
postcss: 8.4.38
/postcss-syntax@0.36.2(postcss@7.0.39):
resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
peerDependencies:
postcss: '>=5.0.0'
postcss-html: '*'
postcss-jsx: '*'
postcss-less: '*'
postcss-markdown: '*'
postcss-scss: '*'
peerDependenciesMeta:
postcss-html:
optional: true
postcss-jsx:
optional: true
postcss-less:
optional: true
postcss-markdown:
optional: true
postcss-scss:
optional: true
dependencies:
postcss: 7.0.39
dev: false
/postcss-syntax@0.36.2(postcss@8.4.38):
resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
peerDependencies:
@@ -16262,6 +16247,23 @@ packages:
resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
engines: {node: '>=14'}
/simplebar-core@1.2.6:
resolution: {integrity: sha512-H5NYU+O+uvqOH5VXw3+lgoc1vTI6jL8LOZJsw4xgRpV7uIPjRpmLPdz0TrouxwKHBhpVLzVIlyKhaRLelIThMw==, tarball: https://registry.npmjs.org/simplebar-core/-/simplebar-core-1.2.6.tgz}
dependencies:
'@types/lodash-es': 4.17.12
lodash: 4.17.21
lodash-es: 4.17.21
dev: false
/simplebar-react@3.2.6(react@18.2.0):
resolution: {integrity: sha512-8jDiBuVCG86JmOrsmkA+4q77iFAEbhU9EX62PohLisg3dnxdLXFFhkxnx2Es3Cxt8IlZFlJsF9GaobFL3ukwiA==, tarball: https://registry.npmjs.org/simplebar-react/-/simplebar-react-3.2.6.tgz}
peerDependencies:
react: '>=16.8.0'
dependencies:
react: 18.2.0
simplebar-core: 1.2.6
dev: false
/single-spa@5.9.5:
resolution: {integrity: sha512-9SQdmsyz4HSP+3gs6PJzhkaMEg+6zTlu9oxIghnwUX3eq+ajq4ft5egl0iyR55LAmO/UwvU8NgIWs/ZyQMa6dw==}
dev: false
@@ -16771,7 +16773,7 @@ packages:
postcss-sass: 0.4.4
postcss-scss: 2.1.1
postcss-selector-parser: 6.0.16
postcss-syntax: 0.36.2(postcss@7.0.39)
postcss-syntax: 0.36.2(postcss@8.4.38)
postcss-value-parser: 4.2.0
resolve-from: 5.0.0
slash: 3.0.0
src/pages/llmodels/components/column-wrapper.tsx
+14 -2
View File
@@ -1,16 +1,28 @@
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import '../style/column-wrapper.less';
const ColumnWrapper: React.FC<any> = ({ children, footer }) => {
if (footer) {
return (
<div className="column-wrapper-footer">
<div className="column-wrapper">{children}</div>
<div className="column-wrapper">
<SimpleBar
style={{ height: 'calc(100vh - 89px)', paddingBottom: '50px' }}
>
{children}
</SimpleBar>
</div>
{<div className="footer">{footer}</div>}
</div>
);
}
return <div className="column-wrapper">{children}</div>;
return (
<div className="column-wrapper">
<SimpleBar style={{ height: 'calc(100vh - 89px)' }}>{children}</SimpleBar>
</div>
);
};
export default ColumnWrapper;
src/pages/llmodels/components/deploy-modal.tsx
+89 -84
View File
@@ -302,21 +302,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
styles={{
body: {
height: 'calc(100vh - 57px)',
padding: '16px 0'
padding: '16px 0',
overflowX: 'hidden'
},
content: {
borderRadius: '8px 0 0 8px'
}
}}
width={
modelSource === modelSourceMap.huggingface_value
props.source === modelSourceMap.huggingface_value
? 'calc(100vw - 220px)'
: 600
}
footer={false}
>
<div style={{ display: 'flex' }}>
{modelSource === modelSourceMap.huggingface_value && (
{props.source === modelSourceMap.huggingface_value && (
<ColumnWrapper>
<SearchModel
modelSource={modelSource}
@@ -324,7 +325,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
></SearchModel>
</ColumnWrapper>
)}
{modelSource === modelSourceMap.huggingface_value && (
{props.source === modelSourceMap.huggingface_value && (
<ColumnWrapper>
<ModelCard repo={huggingfaceRepoId}></ModelCard>
<HFModelFile
@@ -346,92 +347,96 @@ const AddModal: React.FC<AddModalProps> = (props) => {
></ModalFooter>
}
>
<TitleWrapper>Configuration</TitleWrapper>
<Form
name="deployModel"
form={form}
onFinish={onOk}
preserve={false}
style={{ padding: '16px 24px' }}
>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
}
]}
<>
<TitleWrapper>Configuration</TitleWrapper>
<Form
name="deployModel"
form={form}
onFinish={onOk}
preserve={false}
style={{ padding: '16px 24px' }}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
}
]}
>
{
<SealSelect
disabled={true}
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'models.form.source'
id: 'common.table.name'
})}
options={sourceOptions}
required
></SealSelect>
}
</Form.Item>
{renderFieldsBySource()}
<Form.Item<FormData>
name="replicas"
rules={[
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
}
]}
>
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.replicas' }) }
)
<SealSelect
disabled={true}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceOptions}
required
></SealSelect>
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form>
</Form.Item>
{renderFieldsBySource()}
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'models.form.replicas' })
}
)
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form>
</>
</ColumnWrapper>
</div>
</Drawer>
src/pages/llmodels/components/search-result.tsx
+47 -43
View File
@@ -1,6 +1,8 @@
import { SearchOutlined } from '@ant-design/icons';
import { Col, Empty, Row, Spin } from 'antd';
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import '../style/search-result.less';
import HFModelItem from './hf-model-item';
@@ -28,49 +30,51 @@ const SearchResult: React.FC<SearchResultProps> = (props) => {
}
};
return (
<div style={{ ...props.style }} className="search-result-wrap">
<Spin spinning={props.loading}>
<div style={{ minHeight: 200 }}>
{resultList.length ? (
<Row gutter={[16, 24]}>
{resultList.map((item, index) => (
<Col span={24} key={item.name}>
<div
onClick={(e) => handleSelect(e, item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<HFModelItem
source={source}
tags={item.tags}
key={index}
title={item.name}
downloads={item.downloads}
likes={item.likes}
task={item.task}
updatedAt={item.updatedAt}
active={item.id === props.current}
/>
</div>
</Col>
))}
</Row>
) : (
!props.loading && (
<Empty
imageStyle={{ height: 'auto', marginTop: '20px' }}
image={
<SearchOutlined
className="font-size-16"
style={{ color: 'var(--ant-color-text-tertiary)' }}
></SearchOutlined>
}
description="No models found"
/>
)
)}
</div>
</Spin>
</div>
<SimpleBar style={{ height: 'calc(100vh - 194px)' }}>
<div style={{ ...props.style }} className="search-result-wrap">
<Spin spinning={props.loading}>
<div style={{ minHeight: 200 }}>
{resultList.length ? (
<Row gutter={[16, 24]}>
{resultList.map((item, index) => (
<Col span={24} key={item.name}>
<div
onClick={(e) => handleSelect(e, item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<HFModelItem
source={source}
tags={item.tags}
key={index}
title={item.name}
downloads={item.downloads}
likes={item.likes}
task={item.task}
updatedAt={item.updatedAt}
active={item.id === props.current}
/>
</div>
</Col>
))}
</Row>
) : (
!props.loading && (
<Empty
imageStyle={{ height: 'auto', marginTop: '20px' }}
image={
<SearchOutlined
className="font-size-16"
style={{ color: 'var(--ant-color-text-tertiary)' }}
></SearchOutlined>
}
description="No models found"
/>
)
)}
</div>
</Spin>
</div>
</SimpleBar>
);
};
src/pages/llmodels/style/column-wrapper.less
+4 -23
View File
@@ -1,38 +1,19 @@
.column-wrapper {
flex: 1;
height: calc(100vh - 89px);
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid var(--ant-color-split);
// custom scrollbar
&::-webkit-scrollbar {
width: 8px;
}
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--ant-color-fill);
border-radius: 4px;
}
}
.simplebar-scrollbar::before {
background: rgba(0, 0, 0, 50%);
}
.column-wrapper-footer {
flex: 1;
display: flex;
position: relative;
border-left: 1px solid var(--ant-color-split);
.column-wrapper {
padding-bottom: 50px;
border-left: none;
}
src/pages/llmodels/style/search-result.less
+5 -20
View File
@@ -4,27 +4,12 @@
background-color: rgba(255, 255, 255, 100%);
padding: 16px @padding;
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
overflow-y: auto;
height: calc(100vh - 194px);
// custom scrollbar
&::-webkit-scrollbar {
width: 8px;
}
// overflow-y: auto;
// height: calc(100vh - 194px);
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 4px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&:hover {
&::-webkit-scrollbar-thumb {
background-color: var(--ant-color-fill);
}
}
.simplebar-scrollbar::before {
background: rgba(0, 0, 0, 50%);
}
.search-bar {
src/pages/playground/components/chat-footer.tsx
-9
View File
@@ -88,15 +88,6 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
style={{ textAlign: 'right' }}
>
<Space size={20}>
{/* <Button
icon={
<IconFont type="icon-code" className="font-size-16"></IconFont>
}
onClick={onView}
disabled={disabled}
>
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button> */}
{!disabled ? (
<Button
type="primary"