From b41c89972b78052d539f02bd5683cad3f9d7626a Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Wed, 11 Jun 2025 12:48:24 +0800
Subject: [PATCH] refactor(Selector): enhance Selector component with
 placeholder support and improve type safety; update GeneralSettings and
 WebSearchSettings to utilize Selector

---
 src/renderer/src/components/Selector.tsx      | 44 ++++++++++++++-----
 src/renderer/src/context/AntdProvider.tsx     |  3 ++
 .../src/pages/settings/GeneralSettings.tsx    | 34 +++++++-------
 .../settings/WebSearchSettings/index.tsx      |  6 +--
 4 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/renderer/src/components/Selector.tsx b/src/renderer/src/components/Selector.tsx
index f405b1202d..860750b94a 100644
--- a/src/renderer/src/components/Selector.tsx
+++ b/src/renderer/src/components/Selector.tsx
@@ -1,19 +1,34 @@
 import { ConfigProvider, Dropdown } from 'antd'
 import { Check, ChevronsUpDown } from 'lucide-react'
-import { FC, useMemo } from 'react'
-import styled from 'styled-components'
+import { ReactNode, useMemo, useState } from 'react'
+import styled, { css } from 'styled-components'
 
-interface SelectorProps {
-  options: { label: string; value: string }[]
-  value: string | number | undefined
+interface SelectorProps<V = string | number> {
+  options: { label: string | ReactNode; value: V }[]
+  value?: V
+  placeholder?: string
   placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'top' | 'bottom'
   /** 字体大小 */
   size?: number
-  onChange: (value: string) => void
+  onChange: (value: V) => void
 }
 
-const Selector: FC<SelectorProps> = ({ options, value, onChange, placement = 'bottomRight', size = 13 }) => {
-  const label = useMemo(() => options?.find((option) => option.value === value)?.label, [options, value])
+const Selector = <V extends string | number>({
+  options,
+  value,
+  onChange = () => {},
+  placement = 'bottomRight',
+  size = 13,
+  placeholder
+}: SelectorProps<V>) => {
+  const [open, setOpen] = useState(false)
+
+  const label = useMemo(() => {
+    if (value) {
+      return options?.find((option) => option.value === value)?.label
+    }
+    return placeholder
+  }, [options, value, placeholder])
 
   const items = useMemo(() => {
     return options.map((option) => ({
@@ -24,7 +39,7 @@ const Selector: FC<SelectorProps> = ({ options, value, onChange, placement = 'bo
   }, [options, value])
 
   function onClick(e: { key: string }) {
-    onChange(e.key)
+    onChange(e.key as V)
   }
 
   return (
@@ -36,8 +51,8 @@ const Selector: FC<SelectorProps> = ({ options, value, onChange, placement = 'bo
           }
         }
       }}>
-      <Dropdown menu={{ items, onClick }} trigger={['click']} placement={placement}>
-        <Label $size={size}>
+      <Dropdown menu={{ items, onClick }} trigger={['click']} placement={placement} open={open} onOpenChange={setOpen}>
+        <Label $size={size} $open={open}>
           {label}
           <LabelIcon size={size + 3} />
         </Label>
@@ -46,7 +61,7 @@ const Selector: FC<SelectorProps> = ({ options, value, onChange, placement = 'bo
   )
 }
 
-const Label = styled.div<{ $size: number }>`
+const Label = styled.div<{ $size: number; $open: boolean }>`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -58,6 +73,11 @@ const Label = styled.div<{ $size: number }>`
   &:hover {
     background-color: var(--color-background-mute);
   }
+  ${({ $open }) =>
+    $open &&
+    css`
+      background-color: var(--color-background-mute);
+    `}
 `
 
 const LabelIcon = styled(ChevronsUpDown)`
diff --git a/src/renderer/src/context/AntdProvider.tsx b/src/renderer/src/context/AntdProvider.tsx
index 592121cccb..39e89ae1c9 100644
--- a/src/renderer/src/context/AntdProvider.tsx
+++ b/src/renderer/src/context/AntdProvider.tsx
@@ -52,6 +52,9 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
           Segmented: {
             itemActiveBg: 'var(--color-background-mute)',
             itemHoverBg: 'var(--color-background-mute)'
+          },
+          Switch: {
+            colorTextQuaternary: 'rgba(153,153,153,0.25)'
           }
         },
         token: {
diff --git a/src/renderer/src/pages/settings/GeneralSettings.tsx b/src/renderer/src/pages/settings/GeneralSettings.tsx
index 7665099f23..cd55beda10 100644
--- a/src/renderer/src/pages/settings/GeneralSettings.tsx
+++ b/src/renderer/src/pages/settings/GeneralSettings.tsx
@@ -1,3 +1,4 @@
+import Selector from '@renderer/components/Selector'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
 import i18n from '@renderer/i18n'
@@ -8,7 +9,7 @@ import { LanguageVarious } from '@renderer/types'
 import { NotificationSource } from '@renderer/types/notification'
 import { isValidProxyUrl } from '@renderer/utils'
 import { defaultLanguage } from '@shared/config/constant'
-import { Input, Select, Space, Switch } from 'antd'
+import { Flex, Input, Switch } from 'antd'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
@@ -79,7 +80,7 @@ const GeneralSettings: FC = () => {
     window.api.setProxy(proxyUrl)
   }
 
-  const proxyModeOptions = [
+  const proxyModeOptions: { value: 'system' | 'custom' | 'none'; label: string }[] = [
     { value: 'system', label: t('settings.proxy.mode.system') },
     { value: 'custom', label: t('settings.proxy.mode.custom') },
     { value: 'none', label: t('settings.proxy.mode.none') }
@@ -121,28 +122,27 @@ const GeneralSettings: FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('common.language')}</SettingRowTitle>
-          <Select defaultValue={language || defaultLanguage} style={{ width: 180 }} onChange={onSelectLanguage}>
-            {languagesOptions.map((lang) => (
-              <Select.Option key={lang.value} value={lang.value}>
-                <Space.Compact direction="horizontal" block>
-                  <Space.Compact block>{lang.label}</Space.Compact>
+          <Selector
+            size={14}
+            value={language || defaultLanguage}
+            onChange={onSelectLanguage}
+            options={languagesOptions.map((lang) => ({
+              label: (
+                <Flex align="center" gap={8}>
                   <span role="img" aria-label={lang.flag}>
                     {lang.flag}
                   </span>
-                </Space.Compact>
-              </Select.Option>
-            ))}
-          </Select>
+                  {lang.label}
+                </Flex>
+              ),
+              value: lang.value
+            }))}
+          />
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.proxy.mode.title')}</SettingRowTitle>
-          <Select
-            value={storeProxyMode}
-            style={{ width: 180 }}
-            onChange={onProxyModeChange}
-            options={proxyModeOptions}
-          />
+          <Selector value={storeProxyMode} onChange={onProxyModeChange} options={proxyModeOptions} />
         </SettingRow>
         {storeProxyMode === 'custom' && (
           <>
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/index.tsx b/src/renderer/src/pages/settings/WebSearchSettings/index.tsx
index e00eb785e7..6fab13d388 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/index.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/index.tsx
@@ -1,8 +1,8 @@
+import Selector from '@renderer/components/Selector'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useDefaultWebSearchProvider, useWebSearchProviders } from '@renderer/hooks/useWebSearchProviders'
 import { WebSearchProvider } from '@renderer/types'
 import { hasObjectKey } from '@renderer/utils'
-import { Select } from 'antd'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -37,9 +37,9 @@ const WebSearchSettings: FC = () => {
         <SettingRow>
           <SettingRowTitle>{t('settings.websearch.search_provider')}</SettingRowTitle>
           <div style={{ display: 'flex', gap: '8px' }}>
-            <Select
+            <Selector
+              size={14}
               value={selectedProvider?.id}
-              style={{ width: '200px' }}
               onChange={(value: string) => updateSelectedWebSearchProvider(value)}
               placeholder={t('settings.websearch.search_provider_placeholder')}
               options={providers.map((p) => ({