From 1f21b99820df6c6c50d46c3fe09a67997d47fcdc Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 8 Apr 2025 21:29:26 +0800
Subject: [PATCH] feat(ModelTagsWithLabel): enhance tag component styling and
 update layout

- Improved icon size handling in the ModelTagsWithLabel component for better visual consistency.
- Adjusted the layout of the tags to prevent wrapping and added horizontal scrolling for better usability.
- Updated the EditModelsPopup to increase its width for improved content display.
- Removed unnecessary CustomTag usage in ModelList for cleaner code.
---
 .../src/components/ModelTagsWithLabel.tsx     | 24 +++++++++++++++----
 .../ProviderSettings/EditModelsPopup.tsx      |  7 +++---
 .../settings/ProviderSettings/ModelList.tsx   | 16 +++++--------
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/renderer/src/components/ModelTagsWithLabel.tsx b/src/renderer/src/components/ModelTagsWithLabel.tsx
index bc2de857..d119eeb3 100644
--- a/src/renderer/src/components/ModelTagsWithLabel.tsx
+++ b/src/renderer/src/components/ModelTagsWithLabel.tsx
@@ -66,12 +66,20 @@ const ModelTagsWithLabel: FC<ModelTagsProps> = ({
   return (
     <Container ref={containerRef}>
       {isVisionModel(model) && (
-        <CustomTag size={size} color="#00b96b" icon={<EyeOutlined />} tooltip={t('models.type.vision')}>
+        <CustomTag
+          size={size}
+          color="#00b96b"
+          icon={<EyeOutlined style={{ fontSize: size }} />}
+          tooltip={t('models.type.vision')}>
           {_showLabel ? t('models.type.vision') : ''}
         </CustomTag>
       )}
       {isWebSearchModel(model) && (
-        <CustomTag size={size} color="#1677ff" icon={<GlobalOutlined />} tooltip={t('models.type.websearch')}>
+        <CustomTag
+          size={size}
+          color="#1677ff"
+          icon={<GlobalOutlined style={{ fontSize: size }} />}
+          tooltip={t('models.type.websearch')}>
           {_showLabel ? t('models.type.websearch') : ''}
         </CustomTag>
       )}
@@ -85,7 +93,11 @@ const ModelTagsWithLabel: FC<ModelTagsProps> = ({
         </CustomTag>
       )}
       {showToolsCalling && isFunctionCallingModel(model) && (
-        <CustomTag size={size} color="#f18737" icon={<ToolOutlined />} tooltip={t('models.type.function_calling')}>
+        <CustomTag
+          size={size}
+          color="#f18737"
+          icon={<ToolOutlined style={{ fontSize: size }} />}
+          tooltip={t('models.type.function_calling')}>
           {_showLabel ? t('models.type.function_calling') : ''}
         </CustomTag>
       )}
@@ -107,7 +119,11 @@ const Container = styled.div`
   flex-direction: row;
   align-items: center;
   gap: 4px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `
 
 export default ModelTagsWithLabel
diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx
index 8766df3a..21de9462 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx
@@ -162,7 +162,7 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
       onCancel={onCancel}
       afterClose={onClose}
       footer={null}
-      width="680px"
+      width="800px"
       styles={{
         content: { padding: 0 },
         header: { padding: '16px 22px 30px 22px' }
@@ -202,7 +202,7 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
               defaultActiveKey={i >= 5 ? [] : ['1']}
               label={
                 <Flex align="center" gap={10}>
-                  <span>{group}</span>
+                  <span style={{ fontWeight: 600 }}>{group}</span>
                   <CustomTag color="#02B96B" size={10}>
                     {modelGroups[group].length}
                   </CustomTag>
@@ -262,12 +262,11 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
                             placement="top">
                             <span style={{ cursor: 'help' }}>{model.name}</span>
                           </Tooltip>
+                          <ModelTagsWithLabel model={model} size={11} />
                         </ListItemName>
                       ),
                       extra: (
                         <div style={{ marginTop: 6 }}>
-                          <ModelTagsWithLabel model={model} size={11} />
-
                           {model.description && (
                             <Typography.Paragraph
                               type="secondary"
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList.tsx
index ac59bbe0..36b933db 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList.tsx
@@ -10,7 +10,6 @@ import {
   SettingOutlined
 } from '@ant-design/icons'
 import CustomCollapse from '@renderer/components/CustomCollapse'
-import CustomTag from '@renderer/components/CustomTag'
 import ModelTagsWithLabel from '@renderer/components/ModelTagsWithLabel'
 import { getModelLogo } from '@renderer/config/models'
 import { PROVIDER_CONFIG } from '@renderer/config/providers'
@@ -252,9 +251,6 @@ const ModelList: React.FC<ModelListProps> = ({ providerId, modelStatuses = [], s
             label={
               <Flex align="center" gap={10}>
                 <span style={{ fontWeight: 600 }}>{group}</span>
-                <CustomTag color="#02B96B" size={10}>
-                  {modelGroups[group].length}
-                </CustomTag>
               </Flex>
             }
             extra={
@@ -294,14 +290,10 @@ const ModelList: React.FC<ModelListProps> = ({ providerId, modelStatuses = [], s
                               </Typography.Text>
                             }
                             placement="top">
-                            <span style={{ cursor: 'help' }}>{model.name}</span>
+                            <span>{model.name}</span>
                           </Tooltip>
-                        </ListItemName>
-                      ),
-                      extra: (
-                        <div style={{ marginTop: 6 }}>
                           <ModelTagsWithLabel model={model} size={11} />
-                        </div>
+                        </ListItemName>
                       ),
                       ext: '.model',
                       actions: (
@@ -378,6 +370,10 @@ const ListItemName = styled.div`
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    cursor: help;
+    font-family: 'Ubuntu';
+    line-height: 30px;
+    font-size: 14px;
   }
 `