refactor: align model list buttons, use lucide icons (#8803)

* refactor: align model list buttons, use lucide icons

* refactor: align provider setting icons

src/renderer/src/assets/styles/scrollbar.scss

@@ -6,6 +6,9 @@
 
   --color-scrollbar-thumb: var(--color-scrollbar-thumb-dark);
   --color-scrollbar-thumb-hover: var(--color-scrollbar-thumb-dark-hover);
+
+  --scrollbar-width: 6px;
+  --scrollbar-height: 6px;
 }
 
 body[theme-mode='light'] {
@@ -15,8 +18,8 @@ body[theme-mode='light'] {
 
 /* 全局初始化滚动条样式 */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-height);
 }
 
 ::-webkit-scrollbar-track,

src/renderer/src/components/ModelList/ManageModelsList.tsx

@@ -1,4 +1,3 @@
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons'
 import CustomTag from '@renderer/components/CustomTag'
 import ExpandableText from '@renderer/components/ExpandableText'
 import ModelIdWithTags from '@renderer/components/ModelIdWithTags'
@@ -9,7 +8,7 @@ import FileItem from '@renderer/pages/files/FileItem'
 import { Model, Provider } from '@renderer/types'
 import { Button, Flex, Tooltip } from 'antd'
 import { Avatar } from 'antd'
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight, Minus, Plus } from 'lucide-react'
 import React, { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -120,7 +119,7 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
           placement="top">
           <Button
             type="text"
-            icon={isAllInProvider ? <MinusOutlined /> : <PlusOutlined />}
+            icon={isAllInProvider ? <Minus size={16} /> : <Plus size={16} />}
             onClick={(e) => {
               e.stopPropagation()
               handleGroupAction()
@@ -205,9 +204,9 @@ const ModelListItem: React.FC<ModelListItemProps> = memo(({ model, provider, onA
           extra: model.description && <ExpandableText text={model.description} />,
           ext: '.model',
           actions: isAdded ? (
-            <Button type="text" onClick={() => onRemoveModel(model)} icon={<MinusOutlined />} />
+            <Button type="text" onClick={() => onRemoveModel(model)} icon={<Minus size={16} />} />
           ) : (
-            <Button type="text" onClick={() => onAddModel(model)} icon={<PlusOutlined />} />
+            <Button type="text" onClick={() => onAddModel(model)} icon={<Plus size={16} />} />
           )
         }}
       />

src/renderer/src/components/ModelList/ManageModelsPopup.tsx

@@ -1,4 +1,3 @@
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons'
 import { loggerService } from '@logger'
 import SvgSpinners180Ring from '@renderer/components/Icons/SvgSpinners180Ring'
 import NewApiAddModelPopup from '@renderer/components/ModelList/NewApiAddModelPopup'
@@ -23,7 +22,7 @@ import { Button, Empty, Flex, Modal, Spin, Tabs, Tooltip } from 'antd'
 import Input from 'antd/es/input/Input'
 import { groupBy, isEmpty, uniqBy } from 'lodash'
 import { debounce } from 'lodash'
-import { RefreshCcw, Search } from 'lucide-react'
+import { Eraser, ListPlus, RefreshCcw, Search } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useOptimistic, useRef, useState, useTransition } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -252,7 +251,7 @@ const PopupContainer: React.FC<Props> = ({ providerId, resolve }) => {
           mouseLeaveDelay={0}>
           <Button
             type="default"
-            icon={isAllFilteredInProvider ? <MinusOutlined /> : <PlusOutlined />}
+            icon={isAllFilteredInProvider ? <Eraser size={18} /> : <ListPlus size={18} />}
             size="large"
             onClick={(e) => {
               e.stopPropagation()

src/renderer/src/components/ModelList/ModelListGroup.tsx

@@ -1,15 +1,17 @@
-import { MinusOutlined } from '@ant-design/icons'
 import CustomCollapse from '@renderer/components/CustomCollapse'
 import { DynamicVirtualList, type DynamicVirtualListRef } from '@renderer/components/VirtualList'
 import { Model } from '@renderer/types'
 import { ModelWithStatus } from '@renderer/types/healthCheck'
 import { Button, Flex, Tooltip } from 'antd'
+import { Minus } from 'lucide-react'
 import React, { memo, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import ModelListItem from './ModelListItem'
 
+const MAX_SCROLLER_HEIGHT = 390
+
 interface ModelListGroupProps {
   groupName: string
   models: Model[]
@@ -57,7 +59,7 @@ const ModelListGroup: React.FC<ModelListGroupProps> = ({
             <Button
               type="text"
               className="toolbar-item"
-              icon={<MinusOutlined />}
+              icon={<Minus size={14} />}
               onClick={(e) => {
                 e.stopPropagation()
                 onRemoveGroup()
@@ -65,15 +67,21 @@ const ModelListGroup: React.FC<ModelListGroupProps> = ({
               disabled={disabled}
             />
           </Tooltip>
-        }>
+        }
+        styles={{
+          header: {
+            padding: '3px calc(6px + var(--scrollbar-width)) 3px 16px'
+          }
+        }}>
         <DynamicVirtualList
           ref={listRef}
           list={models}
           estimateSize={useCallback(() => 52, [])} // 44px item + 8px padding
           overscan={5}
           scrollerStyle={{
-            maxHeight: '390px',
-            padding: '4px 16px'
+            maxHeight: `${MAX_SCROLLER_HEIGHT}px`,
+            padding: '4px 6px 4px 12px',
+            scrollbarGutter: 'stable'
           }}
           itemContainerStyle={{
             padding: '4px 0'

src/renderer/src/components/ModelList/ModelListItem.tsx

@@ -1,4 +1,3 @@
-import { MinusOutlined } from '@ant-design/icons'
 import { type HealthResult, HealthStatusIndicator } from '@renderer/components/HealthStatusIndicator'
 import { HStack } from '@renderer/components/Layout'
 import ModelIdWithTags from '@renderer/components/ModelIdWithTags'
@@ -7,7 +6,7 @@ import { Model } from '@renderer/types'
 import { ModelWithStatus } from '@renderer/types/healthCheck'
 import { maskApiKey } from '@renderer/utils/api'
 import { Avatar, Button, Tooltip } from 'antd'
-import { Bolt } from 'lucide-react'
+import { Minus, Pen } from 'lucide-react'
 import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -52,20 +51,10 @@ const ModelListItem: React.FC<ModelListItemProps> = ({ ref, model, modelStatus,
         <HealthStatusIndicator results={healthResults} loading={isChecking} showLatency />
         <HStack alignItems="center" gap={0}>
           <Tooltip title={t('models.edit')} mouseLeaveDelay={0}>
-            <Button
-              type="text"
-              onClick={() => onEdit(model)}
-              disabled={disabled || isChecking}
-              icon={<Bolt size={16} />}
-            />
+            <Button type="text" onClick={() => onEdit(model)} disabled={disabled} icon={<Pen size={14} />} />
           </Tooltip>
           <Tooltip title={t('settings.models.manage.remove_model')} mouseLeaveDelay={0}>
-            <Button
-              type="text"
-              onClick={() => onRemove(model)}
-              disabled={disabled || isChecking}
-              icon={<MinusOutlined />}
-            />
+            <Button type="text" onClick={() => onRemove(model)} disabled={disabled} icon={<Minus size={14} />} />
           </Tooltip>
         </HStack>
       </HStack>

src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx

@@ -1,10 +1,9 @@
-import { MinusOutlined } from '@ant-design/icons'
 import { type HealthResult, HealthStatusIndicator } from '@renderer/components/HealthStatusIndicator'
 import { StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons/SVGIcon'
 import { ApiKeyWithStatus } from '@renderer/types/healthCheck'
 import { maskApiKey } from '@renderer/utils/api'
 import { Button, Flex, Input, InputRef, List, Popconfirm, Tooltip, Typography } from 'antd'
-import { Check, PenLine, X } from 'lucide-react'
+import { Check, Minus, Pen, X } from 'lucide-react'
 import { FC, memo, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -142,14 +141,14 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
                 <Tooltip title={t('settings.provider.check')} mouseLeaveDelay={0}>
                   <Button
                     type="text"
-                    icon={<StreamlineGoodHealthAndWellBeing size={'1.2em'} isActive={keyStatus.checking} />}
+                    icon={<StreamlineGoodHealthAndWellBeing size={18} isActive={keyStatus.checking} />}
                     onClick={onCheck}
                     disabled={disabled}
                   />
                 </Tooltip>
               )}
               <Tooltip title={t('common.edit')} mouseLeaveDelay={0}>
-                <Button type="text" icon={<PenLine size={16} />} onClick={handleEdit} disabled={disabled} />
+                <Button type="text" icon={<Pen size={16} />} onClick={handleEdit} disabled={disabled} />
               </Tooltip>
               <Popconfirm
                 title={t('common.delete_confirm')}
@@ -159,7 +158,7 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
                 cancelText={t('common.cancel')}
                 okButtonProps={{ danger: true }}>
                 <Tooltip title={t('common.delete')} mouseLeaveDelay={0}>
-                  <Button type="text" icon={<MinusOutlined />} disabled={disabled} />
+                  <Button type="text" icon={<Minus size={16} />} disabled={disabled} />
                 </Tooltip>
               </Popconfirm>
             </Flex>

src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx

@@ -264,7 +264,7 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
             {t('settings.provider.api_key.label')}
             {provider.id !== 'copilot' && (
               <Tooltip title={t('settings.provider.api.key.list.open')} mouseEnterDelay={0.5}>
-                <Button type="text" size="small" onClick={openApiKeyList} icon={<Settings2 size={14} />} />
+                <Button type="text" onClick={openApiKeyList} icon={<Settings2 size={16} />} />
               </Tooltip>
             )}
           </SettingSubtitle>
@@ -311,9 +311,8 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
                 {t('settings.provider.api_host')}
                 <Button
                   type="text"
-                  size="small"
                   onClick={() => CustomHeaderPopup.show({ provider })}
-                  icon={<Settings2 size={14} />}
+                  icon={<Settings2 size={16} />}
                 />
               </SettingSubtitle>
               <Space.Compact style={{ width: '100%', marginTop: 5 }}>