fix(style): adjust ui

This commit is contained in:
jialin
2026-02-10 17:29:57 +08:00
parent 15d635322b
commit 35ae7b9643
19 changed files with 115 additions and 43 deletions
+38
View File
@@ -0,0 +1,38 @@
import IconFont from '@/components/icon-font';
import { useIntl } from '@umijs/max';
import { Button } from 'antd';
import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
align-items: center;
flex-wrap: wrap;
.title {
margin-right: 8px;
}
`;
const DocLink: React.FC<{
link: string;
title?: React.ReactNode;
}> = ({ link, title }) => {
const intl = useIntl();
return (
<Wrapper>
{title && <span className="title">{title}</span>}
<Button
size="small"
type="link"
target="_blank"
href={link}
style={{ padding: 0 }}
>
{intl.formatMessage({ id: 'playground.audio.enablemic.doc' })}
<IconFont type="icon-external-link" className="font-size-14"></IconFont>
</Button>
</Wrapper>
);
};
export default DocLink;
+1 -1
View File
@@ -418,7 +418,7 @@ export const getBackendParamsTips = (backend: string) => {
return {
backend: 'Ascend MindIE',
releases: '',
link: 'http://docs.gpustack.ai/latest/user-guide/inference-backends/#parameters-reference_2',
link: 'https://docs.gpustack.ai/latest/user-guide/built-in-inference-backends/?h=parameters+reference#parameters-reference_2',
version: '1.0.0'
};
}
+10 -3
View File
@@ -2,6 +2,8 @@ import LabelSelector from '@/components/label-selector';
import CheckboxField from '@/components/seal-form/checkbox-field';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import DocLink from '@/pages/_components/doc-link';
import { genericReferLink } from '@/pages/model-routes/config';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
@@ -156,9 +158,14 @@ const AdvanceConfig = () => {
style={{ marginBottom: 8 }}
>
<CheckboxField
description={intl.formatMessage({
id: 'models.form.generic_proxy.tips'
})}
description={
<DocLink
title={intl.formatMessage({
id: 'models.form.generic_proxy.tips'
})}
link={genericReferLink}
></DocLink>
}
label={intl.formatMessage({
id: 'models.form.generic_proxy'
})}
@@ -59,11 +59,6 @@ const BackendParametersList: React.FC = () => {
description={
backendParamsTips.link && (
<span>
{backend === backendOptionsMap.ascendMindie && (
<span>
{intl.formatMessage({ id: 'models.backend.mindie.310p' })}
</span>
)}
<span
style={{
marginLeft: backend === backendOptionsMap.ascendMindie ? 4 : 0
+2 -2
View File
@@ -2,7 +2,7 @@ import AutoTooltip from '@/components/auto-tooltip';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { modelNameReg, PageAction } from '@/config';
import { GPUSTACK_API_BASE_URL } from '@/config/settings';
import { OPENAI_COMPATIBLE } from '@/config/settings';
import useAppUtils from '@/hooks/use-app-utils';
import {
ClusterStatusLabelMap,
@@ -248,7 +248,7 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
required
description={intl.formatMessage(
{ id: 'models.form.replicas.tips' },
{ api: `${window.location.origin}/${GPUSTACK_API_BASE_URL}` }
{ api: `${window.location.origin}/${OPENAI_COMPATIBLE}` }
)}
min={0}
></SealInput.Number>
+3
View File
@@ -44,3 +44,6 @@ export const rowActionList = [
}
}
];
export const referLinkZh = `https://higress.cn/docs/latest/plugins/ai/api-provider/ai-proxy/?spm=36971b57.3562eb7c.0.0.31764f5f7uLs2F#%E6%8F%90%E4%BE%9B%E5%95%86%E7%89%B9%E6%9C%89%E9%85%8D%E7%BD%AE`;
export const referLinkEn = `https://higress.cn/en/docs/latest/plugins/ai/api-provider/ai-proxy/?spm=36971b57.4a688c53.0.0.64ac436ewz1xGA`;
@@ -5,12 +5,10 @@ import YamlEditor from '@/pages/_components/yaml-editor';
import { useIntl } from '@umijs/max';
import { Button, Form } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import { referLinkEn, referLinkZh } from '../config';
import APIKeys from './api-keys';
import ProxyConfig from './proxy-config';
const referLinkZh = `https://higress.cn/docs/latest/plugins/ai/api-provider/ai-proxy/?spm=36971b57.3562eb7c.0.0.31764f5f7uLs2F#%E6%8F%90%E4%BE%9B%E5%95%86%E7%89%B9%E6%9C%89%E9%85%8D%E7%BD%AE`;
const referLinkEn = `https://higress.cn/en/docs/latest/plugins/ai/api-provider/ai-proxy/?spm=36971b57.4a688c53.0.0.64ac436ewz1xGA`;
const AdvanceConfig: React.FC<{
action: PageActionType;
ref?: any;
+2
View File
@@ -48,3 +48,5 @@ export const rowActionList = [
}
}
];
export const genericReferLink = `https://docs.gpustack.ai/latest/user-guide/model-deployment-management/#enable-generic-proxy`;
+10 -3
View File
@@ -2,9 +2,11 @@ import CheckboxField from '@/components/seal-form/checkbox-field';
import SealInput from '@/components/seal-form/seal-input';
import useAppUtils from '@/hooks/use-app-utils';
import CategorySelect from '@/pages/_components/category-select';
import DocLink from '@/pages/_components/doc-link';
import { categoryOptions } from '@/pages/llmodels/config';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { genericReferLink } from '../config';
import { FormData } from '../config/types';
const Basic = () => {
@@ -61,9 +63,14 @@ const Basic = () => {
style={{ marginBottom: 8 }}
>
<CheckboxField
description={intl.formatMessage({
id: 'models.form.generic_proxy.tips'
})}
description={
<DocLink
title={intl.formatMessage({
id: 'models.form.generic_proxy.tips'
})}
link={genericReferLink}
></DocLink>
}
label={intl.formatMessage({
id: 'models.form.generic_proxy'
})}
+14 -2
View File
@@ -4,8 +4,9 @@ import { PageActionType } from '@/config/types';
import CollapsePanel from '@/pages/_components/collapse-panel';
import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
import ScrollSpyTabs from '@/pages/_components/scroll-spy-tabs';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { Flex, Form, Tooltip } from 'antd';
import _ from 'lodash';
import {
forwardRef,
@@ -194,7 +195,18 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
items={[
{
key: TABKeysMap.TARGETS,
label: intl.formatMessage({ id: 'routes.form.target.title' }),
label: (
<Flex gap={4} align="center">
{intl.formatMessage({ id: 'routes.form.target.title' })}
<Tooltip
title={intl.formatMessage({
id: 'routes.form.weight.tips'
})}
>
<QuestionCircleOutlined />
</Tooltip>
</Flex>
),
forceRender: true,
children: <Targets ref={targetsRef}></Targets>
}
+10 -10
View File
@@ -216,22 +216,22 @@ const TargetsForm = forwardRef((props, ref) => {
if (data.providerType === 'deployments') {
return (
<AutoTooltip ghost maxWidth={140}>
<OptionWrapper>
<ProviderLogo provider={data.providerType as string} />
<OptionWrapper>
<ProviderLogo provider={data.providerType as string} />
<AutoTooltip ghost maxWidth={105}>
{intl.formatMessage({ id: 'menu.models.deployment' })}
</OptionWrapper>
</AutoTooltip>
</AutoTooltip>
</OptionWrapper>
);
}
return (
<AutoTooltip ghost maxWidth={140}>
<OptionWrapper>
<ProviderLogo provider={data.providerType as string} />
<OptionWrapper>
<ProviderLogo provider={data.providerType as string} />
<AutoTooltip ghost maxWidth={105}>
<span>{data.label}</span>
</OptionWrapper>
</AutoTooltip>
</AutoTooltip>
</OptionWrapper>
);
};