style: hidden expand button when no replicas

2025-04-11 18:49:06 +08:00
parent b27ebaaccf
commit 7542ac9d87
12 changed files with 78 additions and 41 deletions
@@ -104,7 +104,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
            {children}
          </TitleTip>
        ) : (
-          ''
+          false
        )
      }
      {...tooltipProps}
@@ -1,13 +1,26 @@
 import IconFont from '@/components/icon-font';
 import { Button, Checkbox } from 'antd';
+import classNames from 'classnames';
 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 {
  expandable?: boolean | React.ReactNode;
  enableSelection?: boolean;
  expanded?: boolean;
  checked?: boolean;
+  disableExpand?: boolean;
  handleRowExpand?: () => void;
  handleSelectChange?: (e: any) => void;
 }
@@ -18,26 +31,33 @@ const RowPrefix: React.FC<RowPrefixProps> = (props) => {
    enableSelection,
    expanded,
    checked,
+    disableExpand,
    handleRowExpand,
    handleSelectChange
  } = props;

+  const isExpanded = useMemo(() => {
+    return expanded;
+  }, [expanded]);
+
  if (expandable && enableSelection) {
    return (
      <div className="row-prefix-wrapper">
-        <span style={{ marginRight: 5 }}>
+        <ButtonWrapper
+          className={classNames({ 'disable-expand': disableExpand })}
+        >
          {_.isBoolean(expandable) ? (
            <Button type="text" size="small" onClick={handleRowExpand}>
              <IconFont
                type="icon-down"
-                rotate={expanded ? 0 : -90}
+                rotate={isExpanded ? 0 : -90}
                className="size-14"
              ></IconFont>
            </Button>
          ) : (
            expandable
          )}
-        </span>
+        </ButtonWrapper>
        <Checkbox onChange={handleSelectChange} checked={checked}></Checkbox>
      </div>
    );
@@ -45,17 +65,26 @@ const RowPrefix: React.FC<RowPrefixProps> = (props) => {
  if (expandable) {
    return (
      <div className="row-prefix-wrapper">
-        {_.isBoolean(expandable) ? (
-          <Button type="text" size="small" onClick={handleRowExpand}>
-            <IconFont
-              type="icon-down"
-              rotate={expanded ? 0 : -90}
-              className="size-14"
-            ></IconFont>
-          </Button>
-        ) : (
-          expandable
-        )}
+        <ButtonWrapper
+          className={classNames({ 'disable-expand': disableExpand })}
+        >
+          {_.isBoolean(expandable) ? (
+            <Button
+              type="text"
+              size="small"
+              onClick={handleRowExpand}
+              disabled={disableExpand}
+            >
+              <IconFont
+                type="icon-down"
+                rotate={isExpanded ? 0 : -90}
+                className="size-14"
+              ></IconFont>
+            </Button>
+          ) : (
+            expandable
+          )}
+        </ButtonWrapper>
      </div>
    );
  }
@@ -42,6 +42,7 @@ const TableRow: React.FC<
  const tableContext: any = React.useContext<{
    allChildren?: any[];
    allSubChildren?: any[];
+    setDisableExpand?: (record: any) => boolean;
  }>(TableContext);
  const { setChunkRequest } = useSetChunkRequest();
  const [childrenData, setChildrenData] = useState<any[]>([]);
@@ -206,6 +207,10 @@ const TableRow: React.FC<
    }
  };

+  const disableExpand = useMemo(() => {
+    return tableContext.setDisableExpand?.(record);
+  }, [tableContext.setDisableExpand, record]);
+
  useEffect(() => {
    const handleVisibilityChange = async () => {
      if (document.visibilityState === 'hidden') {
@@ -249,6 +254,7 @@ const TableRow: React.FC<
            checked={checked}
            handleRowExpand={handleRowExpand}
            handleSelectChange={handleSelectChange}
+            disableExpand={disableExpand}
          ></RowPrefix>
          <Row className="seal-table-row">
            {columns?.map((columnProps) => {
@@ -828,7 +828,7 @@ body {

 .ant-tooltip-content {
  .ant-tooltip-inner {
-    width: max-content;
+    width: fit-content;
    max-width: 300px;

    .text-tertiary {
@@ -64,7 +64,8 @@ export default {
    'Non-GGUF models use vox-box for audio and vLLM(x86 Linux only) for others.',
  'models.search.voxbox.tips':
    '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':
    'e.g., --ctx-size=8192',
  'models.form.backend_parameters.vllm.placeholder':
@@ -64,7 +64,8 @@ export default {
    '非GGUFモデルは、音声にはvox-boxを、その他にはvLLM（x86 Linuxのみ）を使用します。',
  'models.search.voxbox.tips':
    '音声モデルをデプロイするには、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.vllm.placeholder': '例: --max-model-len=8192',
  'models.form.backend_parameters.vllm.tips': '詳細な{backend}パラメータ情報',
@@ -64,7 +64,8 @@ export default {
    'Не-GGUF модели используют vox-box для аудио и vLLM (только x86 Linux) для остальных.',
  'models.search.voxbox.tips':
    'Для развертывания аудиомодели снимите отметку 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.vllm.placeholder':
@@ -64,7 +64,8 @@ export default {
  'models.search.vllm.tips':
    ' 非 GGUF 的语音模型用 vox-box，其它非 GGUF 的模型用 vLLM（仅支持 x86 Linux）。',
  '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':
    '例如，--ctx-size=8192',
  'models.form.backend_parameters.vllm.placeholder':
@@ -1,8 +1,7 @@
-import IconFont from '@/components/icon-font';
 import SealAutoComplete from '@/components/seal-form/auto-complete';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
-import { Form, Typography } from 'antd';
+import { Form } from 'antd';
 import React from 'react';
 import { modelSourceMap, ollamaModelOptions } from '../config';
 import { useFormContext, useFormInnerContext } from '../config/form-context';
@@ -50,21 +49,11 @@ const OllamaForm: React.FC = () => {
          onSelect={handleModelNameChange}
          onBlur={handleOnBlur}
          description={
-            <span>
-              <span>
-                {intl.formatMessage({ id: 'models.form.ollamalink' })}
-              </span>
-              <Typography.Link
-                className="flex-center"
-                href="https://www.ollama.com/library"
-                target="_blank"
-              >
-                <IconFont
-                  type="icon-external-link"
-                  className="font-size-14"
-                ></IconFont>
-              </Typography.Link>
-            </span>
+            <span
+              dangerouslySetInnerHTML={{
+                __html: intl.formatMessage({ id: 'models.form.ollamalink' })
+              }}
+            ></span>
          }
          label={intl.formatMessage({ id: 'model.form.ollama.model' })}
          placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
@@ -389,6 +389,10 @@ const Models: React.FC = () => {
    };
  }, []);

+  const setDisableExpand = useCallback((record: any) => {
+    return !record?.replicas;
+  }, []);
+
  useEffect(() => {
    const handleVisibilityChange = async () => {
      if (document.visibilityState === 'visible') {
@@ -419,7 +423,8 @@ const Models: React.FC = () => {
  return (
    <TableContext.Provider
      value={{
-        allChildren: modelInstances
+        allChildren: modelInstances,
+        setDisableExpand: setDisableExpand
      }}
    >
      <TableList
@@ -17,7 +17,7 @@
  }

  .code-pre {
-    white-space: pre-line;
+    white-space: pre-line !important;
  }

  .ant-radio-button-wrapper {