fix(style): adjust ui
This commit is contained in:
@@ -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;
|
||||
@@ -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'
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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,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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -48,3 +48,5 @@ export const rowActionList = [
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
export const genericReferLink = `https://docs.gpustack.ai/latest/user-guide/model-deployment-management/#enable-generic-proxy`;
|
||||
|
||||
@@ -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'
|
||||
})}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user