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

style: adjust some styles

Browse Source
This commit is contained in:
jialin
2025-11-21 12:16:49 +08:00
parent 26a4d5474d
commit 19babbc73d
30 changed files with 126 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/backends/forms/basic.tsx
+1 -2
View File
@@ -2,7 +2,6 @@ import ListInput from '@/components/list-input';
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
import { PageAction } from '@/config';
import { GPUSTACK_API_BASE_URL } from '@/config/settings';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
@@ -46,7 +45,7 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
>
<SealInput.Input
trim
placeholder={`/${GPUSTACK_API_BASE_URL}/models`}
placeholder={`/v1/models`}
label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
></SealInput.Input>
</Form.Item>
src/pages/backends/forms/version-info.tsx
+17
View File
@@ -163,6 +163,22 @@ const VersionList: React.FC<{ versionConfigs: VersionListItem[] }> = ({
}
};
const optionRender = (option: any) => {
const { data } = option;
return (
<span>
{option.label}
{data.tips ? (
data.locale ? (
<span className="text-tertiary m-l-4">{` [${intl.formatMessage({ id: data.tips })}]`}</span>
) : (
<span className="text-tertiary m-l-4">{` [${data.tips}]`}</span>
)
) : null}
</span>
);
};
return (
<div>
<FilterBox>
@@ -171,6 +187,7 @@ const VersionList: React.FC<{ versionConfigs: VersionListItem[] }> = ({
placeholder={intl.formatMessage({ id: 'backend.filter.framework' })}
options={frameworks}
style={{ width: '100%' }}
optionRender={optionRender}
onChange={handleChange}
/>
</FilterBox>
src/pages/cluster-management/cluster-create.tsx
+3 -1
View File
@@ -243,7 +243,9 @@ const ClusterCreate = () => {
const info = await queryClusterToken({ id: res.id });
setRegistrationInfo({
...info,
image: info.container_registry,
image: info.container_registry
? `${info.container_registry}/${info.image}`
: info.image,
cluster_id: res.id
});
return true;
src/pages/cluster-management/components/add-worker/index.tsx
+3 -1
View File
@@ -68,7 +68,9 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
firstLoad.current = false;
setRegistrationInfo({
...data,
image: data.container_registry,
image: data.container_registry
? `${data.container_registry}/${data.image}`
: data.image,
cluster_id: value
});
} catch (error) {
src/pages/cluster-management/components/provider-catalog.tsx
+29 -9
View File
@@ -33,6 +33,18 @@ const Title = styled.span`
margin-block: 20px 16px;
`;
const Header = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
.description {
font-size: 13px;
font-weight: 400;
color: var(--ant-color-text-tertiary);
}
`;
interface ProviderCatalogProps {
onSelect?: (provider: string, item: any) => void;
cols?: number;
@@ -71,6 +83,21 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
);
}, [dataList]);
const renderTitle = (item: any) => {
return (
<Header>
<span>
{item.locale ? intl.formatMessage({ id: item.label }) : item.label}
</span>
{item.description && (
<span className="description">
{intl.formatMessage({ id: item.description })}
</span>
)}
</Header>
);
};
return (
<Container>
{Object.entries(groupList).map(([groupName, items]) => (
@@ -87,16 +114,9 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
active={current === action.key}
disabled={action.disabled}
clickable={clickable}
header={
action.locale
? intl.formatMessage({ id: action.label })
: action.label
}
header={renderTitle(action)}
icon={action.icon}
>
{action.description &&
intl.formatMessage({ id: action.description })}
</Card>
></Card>
))}
</Wrapper>
</div>
src/pages/llmodels/components/access-control-modal/form.tsx
+1 -1
View File
@@ -198,7 +198,7 @@ const AccessControlForm = forwardRef((props: AccessControlFormProps, ref) => {
checked={filterInUsers.has('inactive')}
onChange={(e: any) => handleCheck(e, 'inactive')}
>
{intl.formatMessage({ id: 'users.status.deactivate' })}
{intl.formatMessage({ id: 'users.status.inactiveAccount' })}
</Checkbox>
),
key: '1'
src/pages/llmodels/components/access-control-modal/index.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import ModalFooter from '@/components/modal-footer';
import ScrollerModal from '@/components/scroller-modal';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { message } from 'antd';
import { useRef } from 'react';
@@ -53,7 +54,7 @@ const AccessControlModal: React.FC<
<AccessControlForm
ref={form}
currentData={currentData}
action={action}
action={action as PageActionType}
onFinish={handleOnFinish}
/>
</ScrollerModal>
src/pages/llmodels/components/api-access-info.tsx
+1 -1
View File
@@ -168,7 +168,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
{intl.formatMessage({ id: 'models.table.apiAccessInfo.endpoint' })}
</span>
<span className="value">
<AutoTooltip ghost maxWidth={data.generic_proxy ? 400 : 180}>
<AutoTooltip ghost maxWidth={data.generic_proxy ? 400 : 240}>
{endPoint}
</AutoTooltip>
{!data.generic_proxy && (
src/pages/llmodels/config/button-actions.ts
+5 -5
View File
@@ -49,6 +49,11 @@ export const ActionList: ActionItem[] = [
key: 'chat',
icon: icons.ExperimentOutlined
},
{
label: 'common.button.start',
key: 'start',
icon: icons.Play
},
{
label: 'models.table.button.apiAccessInfo',
key: 'api',
@@ -64,11 +69,6 @@ export const ActionList: ActionItem[] = [
key: 'stop',
icon: icons.Stop
},
{
label: 'common.button.start',
key: 'start',
icon: icons.Play
},
{
label: 'common.button.delete',
key: 'delete',
src/pages/llmodels/config/index.ts
+1 -1
View File
@@ -291,9 +291,9 @@ export const modelCategoriesMap = {
export const categoryOptions = [
{ label: 'LLM', value: modelCategoriesMap.llm },
{ label: 'Image', value: modelCategoriesMap.image },
{ label: 'Embedding', value: modelCategoriesMap.embedding },
{ label: 'Reranker', value: modelCategoriesMap.reranker },
{ label: 'Image', value: modelCategoriesMap.image },
{ label: 'Text-to-Speech', value: modelCategoriesMap.text_to_speech },
{ label: 'Speech-to-Text', value: modelCategoriesMap.speech_to_text }
];
src/pages/llmodels/forms/backend-parameters-list.tsx
+15 -20
View File
@@ -1,7 +1,6 @@
import IconFont from '@/components/icon-font';
import ListInput from '@/components/list-input';
import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd';
import { Form } from 'antd';
import _ from 'lodash';
import { useMemo } from 'react';
import { backendParamsHolderTips, getBackendParamsTips } from '../config';
@@ -64,24 +63,20 @@ const BackendParametersList: React.FC = () => {
{intl.formatMessage({ id: 'models.backend.mindie.310p' })}
</span>
)}
<span style={{ marginLeft: 5 }}>
{intl.formatMessage(
{ id: 'models.form.backend_parameters.vllm.tips' },
{ backend: backendParamsTips.backend || '' }
)}{' '}
<Typography.Link
style={{ display: 'inline' }}
className="flex-center"
href={backendParamsTips.link}
target="_blank"
>
<span>{intl.formatMessage({ id: 'common.text.here' })}</span>
<IconFont
type="icon-external-link"
className="font-size-14 m-l-4"
></IconFont>
</Typography.Link>
</span>
<span
style={{
marginLeft: backend === backendOptionsMap.ascendMindie ? 4 : 0
}}
dangerouslySetInnerHTML={{
__html: intl.formatMessage(
{ id: 'models.form.backend_parameters.vllm.tips' },
{
backend: backendParamsTips.backend || '',
link: backendParamsTips.link
}
)
}}
></span>
</span>
)
}
src/pages/llmodels/forms/backend.tsx
+2 -45
View File
@@ -1,15 +1,10 @@
import IconFont from '@/components/icon-font';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd';
import { Form } from 'antd';
import React, { useMemo } from 'react';
import {
backendLabelMap,
backendTipsList,
getBackendParamsTips
} from '../config';
import { backendTipsList } from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { useFormContext } from '../config/form-context';
@@ -21,14 +16,9 @@ const BackendFields: React.FC = () => {
const backend = Form.useWatch('backend', form);
const handleBackendVersionOnChange = (value: any) => {
console.log('value changed:', value);
onValuesChange?.({}, form.getFieldsValue());
};
const backendParamsTips = useMemo(() => {
return getBackendParamsTips(backend);
}, [backend]);
const backendGroupedOptions = useMemo(() => {
const builtInBackends = backendOptions?.filter(
(item) => item.isBuiltIn || item.value === backendOptionsMap.custom
@@ -138,39 +128,6 @@ const BackendFields: React.FC = () => {
})}
onChange={handleBackendVersionOnChange}
label={intl.formatMessage({ id: 'models.form.backendVersion' })}
description={intl.formatMessage(
{
id: 'models.form.backendVersion.tips'
},
{
backend: backendLabelMap[backend],
version: backendParamsTips?.version
? `(${intl.formatMessage({ id: 'common.help.eg' }, { content: '' })} ${backendParamsTips?.version})`
: '',
link: backendParamsTips?.releases && (
<span
style={{
marginLeft: 5
}}
>
<Typography.Link
className="flex-center"
style={{ display: 'inline' }}
href={backendParamsTips?.releases}
target="_blank"
>
<span>
{intl.formatMessage({ id: 'models.form.releases' })}
</span>
<IconFont
type="icon-external-link"
className="font-size-14 m-l-4"
></IconFont>
</Typography.Link>
</span>
)
}
)}
></SealSelect>
</Form.Item>
)}
src/pages/llmodels/user-models.tsx
+1 -1
View File
@@ -154,7 +154,7 @@ const UserModels: React.FC = () => {
return MyModelsStatusValueMap.Degrade;
}
if (model.replicas === model.ready_replicas && model.replicas > 0) {
if (model.ready_replicas > 0 && model.replicas > 0) {
return MyModelsStatusValueMap.Active;
}
return MyModelsStatusValueMap.Degrade;
src/pages/playground/components/ground-left.tsx
-2
View File
@@ -1,4 +1,3 @@
import { useIntl } from '@umijs/max';
import { Spin } from 'antd';
import classNames from 'classnames';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -34,7 +33,6 @@ interface MessageProps {
const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const { modelList } = props;
const intl = useIntl();
const [systemMessage, setSystemMessage] = useState('');
const [show, setShow] = useState(false);
const [collapse, setCollapse] = useState(false);
src/pages/playground/components/multiple-chat/index.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { HEADER_HEIGHT } from '@/config/settings';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import _ from 'lodash';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import CompareContext from '../../config/compare-context';
import {
MessageItem,
@@ -309,4 +309,4 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
);
};
export default memo(MultiCompare);
export default MultiCompare;
src/pages/playground/style/multiple-chat.less
+1 -6
View File
@@ -7,11 +7,6 @@
flex: 1;
overflow-y: auto;
padding-inline: var(--layout-content-inlinepadding);
}
.chat-list-inner {
min-height: calc(100vh - 199px);
max-height: max-content;
height: 100%;
padding-top: 16px;
}
}
src/pages/resources/hooks/use-files-columns.tsx
+1 -1
View File
@@ -304,7 +304,7 @@ const useFilesColumns = (props: {
{
title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
dataIndex: 'resolved_paths',
width: '30%',
width: '20%',
ellipsis: {
showTitle: false
},