From b108d4e287d97843151ab82e1daf6718420fa4bd Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Mon, 14 Apr 2025 16:58:44 +0800
Subject: [PATCH] fix(style): tooltip overflow

---
 src/components/overlay-scroller/index.tsx     | 33 +++++++++++++-
 src/pages/llmodels/components/file-parts.tsx  | 43 +++++++++++--------
 .../llmodels/components/model-file-item.tsx   | 13 ++----
 src/pages/llmodels/config/mindie-config.ts    |  4 ++
 .../resources/components/model-files.tsx      | 35 ++++-----------
 5 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/src/components/overlay-scroller/index.tsx b/src/components/overlay-scroller/index.tsx
index 650f3728..9ed5e173 100644
--- a/src/components/overlay-scroller/index.tsx
+++ b/src/components/overlay-scroller/index.tsx
@@ -1,4 +1,5 @@
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import { Tooltip, TooltipProps } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -7,7 +8,7 @@ const Wrapper = styled.div<{ $maxHeight?: number }>`
     typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
   overflow-y: auto;
   width: 100%;
-  padding-inline: 10px;
+  padding-inline: 8px;
 `;
 
 const OverlayScroller: React.FC<any> = ({
@@ -33,7 +34,7 @@ const OverlayScroller: React.FC<any> = ({
     <Wrapper
       ref={scroller}
       className="overlay-scroller-wrapper"
-      $maxHeight={maxHeight || '100%'}
+      $maxHeight={maxHeight || 200}
       hidden={false}
       as="div"
       style={{
@@ -45,4 +46,32 @@ const OverlayScroller: React.FC<any> = ({
   );
 };
 
+export const TooltipOverlayScroller: React.FC<
+  TooltipProps & { maxHeight?: number }
+> = ({ children, maxHeight, title, ...rest }) => {
+  return (
+    <Tooltip
+      destroyTooltipOnHide
+      overlayInnerStyle={{
+        width: 'max-content',
+        maxWidth: 300,
+        paddingInlineEnd: 0
+      }}
+      title={
+        title && (
+          <OverlayScroller
+            style={{ paddingInlineStart: 0 }}
+            maxHeight={maxHeight}
+          >
+            {title}
+          </OverlayScroller>
+        )
+      }
+      {...rest}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
 export default OverlayScroller;
diff --git a/src/pages/llmodels/components/file-parts.tsx b/src/pages/llmodels/components/file-parts.tsx
index a11a666a..3fc49a46 100644
--- a/src/pages/llmodels/components/file-parts.tsx
+++ b/src/pages/llmodels/components/file-parts.tsx
@@ -1,31 +1,36 @@
 import { convertFileSize } from '@/utils';
 import React from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  .file-part-item {
+    width: 180px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
 
 const FileParts: React.FC<{
   showSize?: boolean;
   fileList: any[];
 }> = ({ fileList, showSize = true }) => {
   return (
-    <SimpleBar
-      style={{ maxHeight: 200 }}
-      classNames={{ scrollbar: 'scrollbar-handle-light simplebar-scrollbar' }}
-    >
-      <div style={{ padding: 10 }}>
-        {fileList.map((file, index) => {
-          return (
-            <div key={index} className="flex-between m-b-5">
-              <span>
-                {' '}
-                Part {file.part} of {file.total}
-              </span>
-              {showSize && <span>{convertFileSize(file.size)}</span>}
-            </div>
-          );
-        })}
-      </div>
-    </SimpleBar>
+    <Wrapper>
+      {fileList.map((file, index) => {
+        return (
+          <div key={index} className="file-part-item">
+            <span>
+              Part {file.part} of {file.total}
+            </span>
+            {<span>{convertFileSize(file.size)}</span>}
+          </div>
+        );
+      })}
+    </Wrapper>
   );
 };
 
diff --git a/src/pages/llmodels/components/model-file-item.tsx b/src/pages/llmodels/components/model-file-item.tsx
index dac8094e..b7fb1055 100644
--- a/src/pages/llmodels/components/model-file-item.tsx
+++ b/src/pages/llmodels/components/model-file-item.tsx
@@ -1,6 +1,7 @@
+import { TooltipOverlayScroller } from '@/components/overlay-scroller';
 import { convertFileSize } from '@/utils';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tag, Tooltip } from 'antd';
+import { Tag } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
@@ -24,13 +25,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
   }
   const { parts } = props;
   return (
-    <Tooltip
-      overlayInnerStyle={{
-        width: 180,
-        padding: 0
-      }}
-      title={<FileParts fileList={parts}></FileParts>}
-    >
+    <TooltipOverlayScroller title={<FileParts fileList={parts}></FileParts>}>
       <Tag
         className="tag-item"
         color="purple"
@@ -43,7 +38,7 @@ const FilePartsTag = (props: { parts: any[] }) => {
           {parts.length} parts
         </span>
       </Tag>
-    </Tooltip>
+    </TooltipOverlayScroller>
   );
 };
 
diff --git a/src/pages/llmodels/config/mindie-config.ts b/src/pages/llmodels/config/mindie-config.ts
index 4a702899..f489df89 100644
--- a/src/pages/llmodels/config/mindie-config.ts
+++ b/src/pages/llmodels/config/mindie-config.ts
@@ -81,6 +81,10 @@ const options = [
   {
     label: '--truncation',
     value: '--truncation'
+  },
+  {
+    label: '--max-link-num',
+    value: '--max-link-num'
   }
 ];
 
diff --git a/src/pages/resources/components/model-files.tsx b/src/pages/resources/components/model-files.tsx
index 397ee56c..73d75997 100644
--- a/src/pages/resources/components/model-files.tsx
+++ b/src/pages/resources/components/model-files.tsx
@@ -2,7 +2,7 @@ import { modelsExpandKeysAtom } from '@/atoms/models';
 import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
-import OverlayScroller from '@/components/overlay-scroller';
+import { TooltipOverlayScroller } from '@/components/overlay-scroller';
 import { FilterBar } from '@/components/page-tools';
 import StatusTag from '@/components/status-tag';
 import { PageAction } from '@/config';
@@ -27,15 +27,7 @@ import {
   InfoCircleOutlined
 } from '@ant-design/icons';
 import { useIntl, useNavigate } from '@umijs/max';
-import {
-  ConfigProvider,
-  Empty,
-  Table,
-  Tag,
-  Tooltip,
-  Typography,
-  message
-} from 'antd';
+import { ConfigProvider, Empty, Table, Tag, Typography, message } from 'antd';
 import dayjs from 'dayjs';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
@@ -97,18 +89,14 @@ const PathWrapper = styled.div`
   }
 `;
 
-const OverlayScrollerWrapper = styled.div`
-  .overlay-scroller-wrapper {
-    padding-block: 0;
-    padding-inline: 6px 0;
-  }
-`;
-
 const ItemWrapper = styled.ul`
   max-width: 300px;
   margin: 0;
-  padding-inline: 8px 0;
+  padding-inline: 15px 0;
   word-break: break-word;
+  li {
+    line-height: 1.6;
+  }
 `;
 
 const FilesTag = styled(Tag)`
@@ -337,21 +325,14 @@ const ModelFiles = () => {
     };
 
     return (
-      <Tooltip
-        title={
-          <OverlayScrollerWrapper>
-            <OverlayScroller>{renderItem()}</OverlayScroller>
-          </OverlayScrollerWrapper>
-        }
-        overlayInnerStyle={{ width: 'max-content', maxWidth: 300 }}
-      >
+      <TooltipOverlayScroller title={renderItem()}>
         <FilesTag color="purple" icon={<InfoCircleOutlined />}>
           <span style={{ opacity: 1 }}>
             {record.resolved_paths?.length}{' '}
             {intl.formatMessage({ id: 'models.form.files' })}
           </span>
         </FilesTag>
-      </Tooltip>
+      </TooltipOverlayScroller>
     );
   };