From bfbba8f5db1ab8738cb0963f1e6e8b34df15d58d Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sat, 9 Aug 2025 11:40:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(ProviderSetting):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=AD=E9=97=B4=E7=9C=81=E7=95=A5=E6=96=87=E6=9C=AC=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96HostPreview=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在ProviderSetting页面中引入EllipsisMiddle组件，用于处理长文本的中间省略显示
重构hostPreview为HostPreview组件，使用EllipsisMiddle优化长URL的展示效果
---
 .../components/Ellipsis/EllipsisMiddle.tsx    | 18 +++++++++
 .../ProviderSettings/ProviderSetting.tsx      | 40 ++++++++++++-------
 2 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/src/components/Ellipsis/EllipsisMiddle.tsx

diff --git a/src/renderer/src/components/Ellipsis/EllipsisMiddle.tsx b/src/renderer/src/components/Ellipsis/EllipsisMiddle.tsx
new file mode 100644
index 0000000000..9102afd234
--- /dev/null
+++ b/src/renderer/src/components/Ellipsis/EllipsisMiddle.tsx
@@ -0,0 +1,18 @@
+import { Typography } from 'antd'
+import { CSSProperties } from 'react'
+
+const { Text } = Typography
+
+export const EllipsisMiddle: React.FC<{ suffixCount: number; children: string; style: CSSProperties }> = ({
+  suffixCount,
+  children,
+  style
+}) => {
+  const start = children.slice(0, children.length - suffixCount)
+  const suffix = children.slice(-suffixCount).trim()
+  return (
+    <Text style={{ maxWidth: '100%', ...style }} ellipsis={{ suffix }}>
+      {start}
+    </Text>
+  )
+}
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
index 76f8958f34..18b66af615 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
@@ -1,4 +1,5 @@
 import OpenAIAlert from '@renderer/components/Alert/OpenAIAlert'
+import { EllipsisMiddle } from '@renderer/components/Ellipsis/EllipsisMiddle'
 import { LoadingIcon } from '@renderer/components/Icons'
 import { HStack } from '@renderer/components/Layout'
 import { ApiKeyListPopup } from '@renderer/components/Popups/ApiKeyListPopup'
@@ -17,7 +18,7 @@ import { Button, Divider, Flex, Input, Space, Switch, Tooltip, Typography } from
 import Link from 'antd/es/typography/Link'
 import { debounce, isEmpty } from 'lodash'
 import { Check, Settings2, SquareArrowOutUpRight, TriangleAlert } from 'lucide-react'
-import { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { CSSProperties, FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -192,18 +193,22 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
     updateProvider({ apiHost: configedApiHost })
   }
 
-  const hostPreview = () => {
+  const HostPreview = ({ style }: { style: CSSProperties }) => {
+    let text: string
     if (apiHost.endsWith('#')) {
-      return apiHost.replace('#', '')
+      text = apiHost.replace('#', '')
+    } else if (provider.type === 'openai') {
+      text = formatApiHost(apiHost) + 'chat/completions'
+    } else if (provider.type === 'azure-openai') {
+      text = formatApiHost(apiHost) + 'openai/v1'
+    } else {
+      text = formatApiHost(apiHost) + 'responses'
     }
-    if (provider.type === 'openai') {
-      return formatApiHost(apiHost) + 'chat/completions'
-    }
-
-    if (provider.type === 'azure-openai') {
-      return formatApiHost(apiHost) + 'openai/v1'
-    }
-    return formatApiHost(apiHost) + 'responses'
+    return (
+      <EllipsisMiddle suffixCount={32} style={style}>
+        {text}
+      </EllipsisMiddle>
+    )
   }
 
   // API key 连通性检查状态指示器，目前仅在失败时显示
@@ -330,9 +335,16 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
               </Space.Compact>
               {isOpenAIProvider(provider) && (
                 <SettingHelpTextRow style={{ justifyContent: 'space-between' }}>
-                  <SettingHelpText
-                    style={{ marginLeft: 6, marginRight: '1em', whiteSpace: 'break-spaces', wordBreak: 'break-all' }}>
-                    {hostPreview()}
+                  <SettingHelpText>
+                    <HostPreview
+                      style={{
+                        marginLeft: 6,
+                        marginRight: '1em',
+                        whiteSpace: 'break-spaces',
+                        wordBreak: 'break-all',
+                        fontSize: 'inherit'
+                      }}
+                    />
                   </SettingHelpText>
                   <SettingHelpText style={{ minWidth: 'fit-content' }}>
                     {t('settings.provider.api.url.tip')}