style: hidden expand button when no replicas

This commit is contained in:
jialin
2025-04-11 18:49:06 +08:00
parent b27ebaaccf
commit 7542ac9d87
12 changed files with 78 additions and 41 deletions
+4
View File
@@ -3,3 +3,7 @@ node_modules
.umi-production .umi-production
public/static/*.js public/static/*.js
public/static/*.css public/static/*.css
src/components/icon-font/iconfont/iconfont.js
src/components/icon-font/iconfont/*.css
+1 -1
View File
@@ -104,7 +104,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
{children} {children}
</TitleTip> </TitleTip>
) : ( ) : (
'' false
) )
} }
{...tooltipProps} {...tooltipProps}
@@ -1,13 +1,26 @@
import IconFont from '@/components/icon-font'; import IconFont from '@/components/icon-font';
import { Button, Checkbox } from 'antd'; import { Button, Checkbox } from 'antd';
import classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import React from 'react'; import React, { useMemo } from 'react';
import styled from 'styled-components';
const ButtonWrapper = styled.div`
width: 30px;
margin-right: 5px;
&.disable-expand {
.ant-btn {
display: none;
}
}
`;
interface RowPrefixProps { interface RowPrefixProps {
expandable?: boolean | React.ReactNode; expandable?: boolean | React.ReactNode;
enableSelection?: boolean; enableSelection?: boolean;
expanded?: boolean; expanded?: boolean;
checked?: boolean; checked?: boolean;
disableExpand?: boolean;
handleRowExpand?: () => void; handleRowExpand?: () => void;
handleSelectChange?: (e: any) => void; handleSelectChange?: (e: any) => void;
} }
@@ -18,26 +31,33 @@ const RowPrefix: React.FC<RowPrefixProps> = (props) => {
enableSelection, enableSelection,
expanded, expanded,
checked, checked,
disableExpand,
handleRowExpand, handleRowExpand,
handleSelectChange handleSelectChange
} = props; } = props;
const isExpanded = useMemo(() => {
return expanded;
}, [expanded]);
if (expandable && enableSelection) { if (expandable && enableSelection) {
return ( return (
<div className="row-prefix-wrapper"> <div className="row-prefix-wrapper">
<span style={{ marginRight: 5 }}> <ButtonWrapper
className={classNames({ 'disable-expand': disableExpand })}
>
{_.isBoolean(expandable) ? ( {_.isBoolean(expandable) ? (
<Button type="text" size="small" onClick={handleRowExpand}> <Button type="text" size="small" onClick={handleRowExpand}>
<IconFont <IconFont
type="icon-down" type="icon-down"
rotate={expanded ? 0 : -90} rotate={isExpanded ? 0 : -90}
className="size-14" className="size-14"
></IconFont> ></IconFont>
</Button> </Button>
) : ( ) : (
expandable expandable
)} )}
</span> </ButtonWrapper>
<Checkbox onChange={handleSelectChange} checked={checked}></Checkbox> <Checkbox onChange={handleSelectChange} checked={checked}></Checkbox>
</div> </div>
); );
@@ -45,17 +65,26 @@ const RowPrefix: React.FC<RowPrefixProps> = (props) => {
if (expandable) { if (expandable) {
return ( return (
<div className="row-prefix-wrapper"> <div className="row-prefix-wrapper">
{_.isBoolean(expandable) ? ( <ButtonWrapper
<Button type="text" size="small" onClick={handleRowExpand}> className={classNames({ 'disable-expand': disableExpand })}
<IconFont >
type="icon-down" {_.isBoolean(expandable) ? (
rotate={expanded ? 0 : -90} <Button
className="size-14" type="text"
></IconFont> size="small"
</Button> onClick={handleRowExpand}
) : ( disabled={disableExpand}
expandable >
)} <IconFont
type="icon-down"
rotate={isExpanded ? 0 : -90}
className="size-14"
></IconFont>
</Button>
) : (
expandable
)}
</ButtonWrapper>
</div> </div>
); );
} }
@@ -42,6 +42,7 @@ const TableRow: React.FC<
const tableContext: any = React.useContext<{ const tableContext: any = React.useContext<{
allChildren?: any[]; allChildren?: any[];
allSubChildren?: any[]; allSubChildren?: any[];
setDisableExpand?: (record: any) => boolean;
}>(TableContext); }>(TableContext);
const { setChunkRequest } = useSetChunkRequest(); const { setChunkRequest } = useSetChunkRequest();
const [childrenData, setChildrenData] = useState<any[]>([]); const [childrenData, setChildrenData] = useState<any[]>([]);
@@ -206,6 +207,10 @@ const TableRow: React.FC<
} }
}; };
const disableExpand = useMemo(() => {
return tableContext.setDisableExpand?.(record);
}, [tableContext.setDisableExpand, record]);
useEffect(() => { useEffect(() => {
const handleVisibilityChange = async () => { const handleVisibilityChange = async () => {
if (document.visibilityState === 'hidden') { if (document.visibilityState === 'hidden') {
@@ -249,6 +254,7 @@ const TableRow: React.FC<
checked={checked} checked={checked}
handleRowExpand={handleRowExpand} handleRowExpand={handleRowExpand}
handleSelectChange={handleSelectChange} handleSelectChange={handleSelectChange}
disableExpand={disableExpand}
></RowPrefix> ></RowPrefix>
<Row className="seal-table-row"> <Row className="seal-table-row">
{columns?.map((columnProps) => { {columns?.map((columnProps) => {
+1 -1
View File
@@ -828,7 +828,7 @@ body {
.ant-tooltip-content { .ant-tooltip-content {
.ant-tooltip-inner { .ant-tooltip-inner {
width: max-content; width: fit-content;
max-width: 300px; max-width: 300px;
.text-tertiary { .text-tertiary {
+2 -1
View File
@@ -64,7 +64,8 @@ export default {
'Non-GGUF models use vox-box for audio and vLLM(x86 Linux only) for others.', 'Non-GGUF models use vox-box for audio and vLLM(x86 Linux only) for others.',
'models.search.voxbox.tips': 'models.search.voxbox.tips':
'To deploy an audio model, uncheck the checkbox.', 'To deploy an audio model, uncheck the checkbox.',
'models.form.ollamalink': 'Find More in Ollama Library', 'models.form.ollamalink':
'Find More in <a href="https://www.ollama.com/library" target="_blank">Ollama Library</a>.',
'models.form.backend_parameters.llamabox.placeholder': 'models.form.backend_parameters.llamabox.placeholder':
'e.g., --ctx-size=8192', 'e.g., --ctx-size=8192',
'models.form.backend_parameters.vllm.placeholder': 'models.form.backend_parameters.vllm.placeholder':
+2 -1
View File
@@ -64,7 +64,8 @@ export default {
'非GGUFモデルは、音声にはvox-boxを、その他にはvLLM(x86 Linuxのみ)を使用します。', '非GGUFモデルは、音声にはvox-boxを、その他にはvLLM(x86 Linuxのみ)を使用します。',
'models.search.voxbox.tips': 'models.search.voxbox.tips':
'音声モデルをデプロイするには、GGUFチェックボックスをオフにしてください。', '音声モデルをデプロイするには、GGUFチェックボックスをオフにしてください。',
'models.form.ollamalink': 'Ollamaライブラリでさらに探す', 'models.form.ollamalink':
'<a href="https://www.ollama.com/library" target="_blank">Ollama</a>ライブラリでさらに探す',
'models.form.backend_parameters.llamabox.placeholder': '例: --ctx-size=8192', 'models.form.backend_parameters.llamabox.placeholder': '例: --ctx-size=8192',
'models.form.backend_parameters.vllm.placeholder': '例: --max-model-len=8192', 'models.form.backend_parameters.vllm.placeholder': '例: --max-model-len=8192',
'models.form.backend_parameters.vllm.tips': '詳細な{backend}パラメータ情報', 'models.form.backend_parameters.vllm.tips': '詳細な{backend}パラメータ情報',
+2 -1
View File
@@ -64,7 +64,8 @@ export default {
'Не-GGUF модели используют vox-box для аудио и vLLM (только x86 Linux) для остальных.', 'Не-GGUF модели используют vox-box для аудио и vLLM (только x86 Linux) для остальных.',
'models.search.voxbox.tips': 'models.search.voxbox.tips':
'Для развертывания аудиомодели снимите отметку GGUF.', 'Для развертывания аудиомодели снимите отметку GGUF.',
'models.form.ollamalink': 'Больше моделей в библиотеке Ollama', 'models.form.ollamalink':
'Больше моделей в библиотеке <a href="https://www.ollama.com/library" target="_blank">Ollama</a>',
'models.form.backend_parameters.llamabox.placeholder': 'models.form.backend_parameters.llamabox.placeholder':
'например: --ctx-size=8192', 'например: --ctx-size=8192',
'models.form.backend_parameters.vllm.placeholder': 'models.form.backend_parameters.vllm.placeholder':
+2 -1
View File
@@ -64,7 +64,8 @@ export default {
'models.search.vllm.tips': 'models.search.vllm.tips':
' 非 GGUF 的语音模型用 vox-box,其它非 GGUF 的模型用 vLLM(仅支持 x86 Linux)。', ' 非 GGUF 的语音模型用 vox-box,其它非 GGUF 的模型用 vLLM(仅支持 x86 Linux)。',
'models.search.voxbox.tips': '若需部署语音模型取消勾选。', 'models.search.voxbox.tips': '若需部署语音模型取消勾选。',
'models.form.ollamalink': '在 Ollama Library 中查找', 'models.form.ollamalink':
'在 <a href="https://www.ollama.com/library" target="_blank">Ollama Library</a> 中查找',
'models.form.backend_parameters.llamabox.placeholder': 'models.form.backend_parameters.llamabox.placeholder':
'例如,--ctx-size=8192', '例如,--ctx-size=8192',
'models.form.backend_parameters.vllm.placeholder': 'models.form.backend_parameters.vllm.placeholder':
+6 -17
View File
@@ -1,8 +1,7 @@
import IconFont from '@/components/icon-font';
import SealAutoComplete from '@/components/seal-form/auto-complete'; import SealAutoComplete from '@/components/seal-form/auto-complete';
import useAppUtils from '@/hooks/use-app-utils'; import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd'; import { Form } from 'antd';
import React from 'react'; import React from 'react';
import { modelSourceMap, ollamaModelOptions } from '../config'; import { modelSourceMap, ollamaModelOptions } from '../config';
import { useFormContext, useFormInnerContext } from '../config/form-context'; import { useFormContext, useFormInnerContext } from '../config/form-context';
@@ -50,21 +49,11 @@ const OllamaForm: React.FC = () => {
onSelect={handleModelNameChange} onSelect={handleModelNameChange}
onBlur={handleOnBlur} onBlur={handleOnBlur}
description={ description={
<span> <span
<span> dangerouslySetInnerHTML={{
{intl.formatMessage({ id: 'models.form.ollamalink' })} __html: intl.formatMessage({ id: 'models.form.ollamalink' })
</span> }}
<Typography.Link ></span>
className="flex-center"
href="https://www.ollama.com/library"
target="_blank"
>
<IconFont
type="icon-external-link"
className="font-size-14"
></IconFont>
</Typography.Link>
</span>
} }
label={intl.formatMessage({ id: 'model.form.ollama.model' })} label={intl.formatMessage({ id: 'model.form.ollama.model' })}
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })} placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
+6 -1
View File
@@ -389,6 +389,10 @@ const Models: React.FC = () => {
}; };
}, []); }, []);
const setDisableExpand = useCallback((record: any) => {
return !record?.replicas;
}, []);
useEffect(() => { useEffect(() => {
const handleVisibilityChange = async () => { const handleVisibilityChange = async () => {
if (document.visibilityState === 'visible') { if (document.visibilityState === 'visible') {
@@ -419,7 +423,8 @@ const Models: React.FC = () => {
return ( return (
<TableContext.Provider <TableContext.Provider
value={{ value={{
allChildren: modelInstances allChildren: modelInstances,
setDisableExpand: setDisableExpand
}} }}
> >
<TableList <TableList
@@ -17,7 +17,7 @@
} }
.code-pre { .code-pre {
white-space: pre-line; white-space: pre-line !important;
} }
.ant-radio-button-wrapper { .ant-radio-button-wrapper {