refactor(AddKnowledgePopup, KnowledgeSettingsPopup, ModelSettings): enhance select components with consistent icons

- Updated Select components in AddKnowledgePopup and KnowledgeSettingsPopup to include a ChevronDown icon for improved visual consistency. - Refactored ModelSettings to add ChevronDown icon to Select components, enhancing the overall UI experience. - Simplified Slider component usage by removing unnecessary styling for a cleaner layout.
2025-12-26 20:12:38 +08:00 · 2025-06-13 23:27:46 +08:00 · 2025-06-13 23:27:46 +08:00 · eb832cc25a
commit eb832cc25a
parent 0378f9ceb1
3 changed files with 38 additions and 27 deletions
--- a/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx
+++ b/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx
@ -13,6 +13,7 @@ import { KnowledgeBase, Model } from '@renderer/types'
 import { getErrorMessage } from '@renderer/utils/error'
 import { Flex, Form, Input, InputNumber, Modal, Select, Slider, Switch } from 'antd'
 import { find, sortBy } from 'lodash'
+import { ChevronDown } from 'lucide-react'
 import { nanoid } from 'nanoid'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@ -182,7 +183,12 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
          label={t('models.embedding_model')}
          tooltip={{ title: t('models.embedding_model_tooltip'), placement: 'right' }}
          rules={[{ required: true, message: t('message.error.enter.model') }]}>
-          <Select style={{ width: '100%' }} options={embeddingSelectOptions} placeholder={t('settings.models.empty')} />
+          <Select
+            style={{ width: '100%' }}
+            options={embeddingSelectOptions}
+            placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
+          />
        </Form.Item>

        <Form.Item
@ -190,7 +196,12 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
          label={t('models.rerank_model')}
          tooltip={{ title: t('models.rerank_model_tooltip'), placement: 'right' }}
          rules={[{ required: false, message: t('message.error.enter.model') }]}>
-          <Select style={{ width: '100%' }} options={rerankSelectOptions} placeholder={t('settings.models.empty')} />
+          <Select
+            style={{ width: '100%' }}
+            options={rerankSelectOptions}
+            placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
+          />
        </Form.Item>
        <SettingHelpText style={{ marginTop: -15, marginBottom: 20 }}>
          {t('models.rerank_model_not_support_provider', {
@ -202,13 +213,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
          label={t('knowledge.document_count')}
          initialValue={DEFAULT_KNOWLEDGE_DOCUMENT_COUNT} // 设置初始值
          tooltip={{ title: t('knowledge.document_count_help') }}>
-          <Slider
-            style={{ width: '100%' }}
-            min={1}
-            max={30}
-            step={1}
-            marks={{ 1: '1', 6: t('knowledge.document_count_default'), 30: '30' }}
-          />
+          <Slider min={1} max={30} step={1} marks={{ 1: '1', 6: t('knowledge.document_count_default'), 30: '30' }} />
        </Form.Item>
        <Form.Item
          name="autoDims"
--- a/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
+++ b/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
@ -1,4 +1,4 @@
-import { DownOutlined, WarningOutlined } from '@ant-design/icons'
+import { WarningOutlined } from '@ant-design/icons'
 import { TopView } from '@renderer/components/TopView'
 import { DEFAULT_KNOWLEDGE_DOCUMENT_COUNT } from '@renderer/config/constant'
 import { getEmbeddingMaxContext } from '@renderer/config/embedings'
@ -10,8 +10,9 @@ import { useProviders } from '@renderer/hooks/useProvider'
 import { SettingHelpText } from '@renderer/pages/settings'
 import { getModelUniqId } from '@renderer/services/ModelService'
 import { KnowledgeBase } from '@renderer/types'
-import { Alert, Form, Input, InputNumber, Modal, Select, Slider } from 'antd'
+import { Alert, Button, Form, Input, InputNumber, Modal, Select, Slider } from 'antd'
 import { sortBy } from 'lodash'
+import { ChevronDown } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@ -140,7 +141,13 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
          initialValue={getModelUniqId(base.model)}
          tooltip={{ title: t('models.embedding_model_tooltip'), placement: 'right' }}
          rules={[{ required: true, message: t('message.error.enter.model') }]}>
-          <Select style={{ width: '100%' }} options={selectOptions} placeholder={t('settings.models.empty')} disabled />
+          <Select
+            style={{ width: '100%' }}
+            options={selectOptions}
+            placeholder={t('settings.models.empty')}
+            disabled
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
+          />
        </Form.Item>

        <Form.Item
@ -154,6 +161,7 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
            options={rerankSelectOptions}
            placeholder={t('settings.models.empty')}
            allowClear
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
          />
        </Form.Item>
        <SettingHelpText style={{ marginTop: -15, marginBottom: 20 }}>
@ -166,27 +174,21 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
          name="documentCount"
          label={t('knowledge.document_count')}
          tooltip={{ title: t('knowledge.document_count_help') }}>
-          <Slider
-            style={{ width: '100%' }}
-            min={1}
-            max={30}
-            step={1}
-            marks={{ 1: '1', 6: t('knowledge.document_count_default'), 30: '30' }}
-          />
+          <Slider min={1} max={30} step={1} marks={{ 1: '1', 6: t('knowledge.document_count_default'), 30: '30' }} />
        </Form.Item>

-        <AdvancedSettingsButton onClick={() => setShowAdvanced(!showAdvanced)}>
-          <DownOutlined
+        <Button color="default" variant="filled" onClick={() => setShowAdvanced(!showAdvanced)}>
+          {t('common.advanced_settings')}
+          <ChevronDown
+            size={16}
            style={{
              transform: showAdvanced ? 'rotate(180deg)' : 'rotate(0deg)',
-              transition: 'transform 0.3s',
-              marginRight: 8
+              transition: 'transform 0.3s'
            }}
          />
-          {t('common.advanced_settings')}
-        </AdvancedSettingsButton>
+        </Button>

-        <div style={{ display: showAdvanced ? 'block' : 'none' }}>
+        <div style={{ display: showAdvanced ? 'block' : 'none', marginTop: 16 }}>
          <Form.Item
            name="chunkSize"
            label={t('knowledge.chunk_size')}
--- a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
@ -13,7 +13,7 @@ import { setTranslateModelPrompt } from '@renderer/store/settings'
 import { Model } from '@renderer/types'
 import { Button, Select, Tooltip } from 'antd'
 import { find, sortBy } from 'lodash'
-import { FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
+import { ChevronDown, FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'

@ -110,6 +110,7 @@ const ModelSettings: FC = () => {
            options={selectOptions}
            showSearch
            placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
          />
          <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={DefaultAssistantSettings.show} />
        </HStack>
@ -131,6 +132,7 @@ const ModelSettings: FC = () => {
            options={selectOptions}
            showSearch
            placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
          />
          <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={TopicNamingModalPopup.show} />
        </HStack>
@ -152,6 +154,7 @@ const ModelSettings: FC = () => {
            options={selectOptions}
            showSearch
            placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
          />
          <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={onUpdateTranslateModel} />
          {translateModelPrompt !== TRANSLATE_PROMPT && (
@ -178,6 +181,7 @@ const ModelSettings: FC = () => {
            options={selectOptions}
            showSearch
            placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
          />
        </HStack>
        <SettingDescription>{t('settings.models.quick_assistant_model_description')}</SettingDescription>