From 1ac63e36dfe6b961de543ed1f9377bd140bc444e Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 16 Sep 2025 15:03:34 +0800
Subject: [PATCH] feat: add baseSelect

---
 src/components/page-tools/index.tsx           |  7 +--
 src/components/seal-form/base/select.tsx      | 43 +++++++++++++++++++
 src/components/seal-form/seal-select.tsx      |  7 +--
 src/components/seal-form/simple-select.tsx    |  7 +--
 src/pages/llmodels/catalog.tsx                |  7 +--
 .../llmodels/components/hf-model-file.tsx     |  7 +--
 .../llmodels/components/search-model.tsx      |  7 +--
 src/pages/llmodels/components/table-list.tsx  | 11 ++---
 src/pages/llmodels/user-models.tsx            |  7 +--
 .../components/multiple-chat/model-item.tsx   |  7 +--
 src/pages/profile/components/appearance.tsx   | 10 ++---
 src/pages/usage/components/dahboard-inner.tsx |  7 +--
 12 files changed, 90 insertions(+), 37 deletions(-)
 create mode 100644 src/components/seal-form/base/select.tsx

diff --git a/src/components/page-tools/index.tsx b/src/components/page-tools/index.tsx
index 1e1bfe5e..7bcff109 100644
--- a/src/components/page-tools/index.tsx
+++ b/src/components/page-tools/index.tsx
@@ -6,8 +6,9 @@ import {
   SyncOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Select, Space } from 'antd';
+import { Button, Input, Space } from 'antd';
 import React, { useMemo } from 'react';
+import BaseSelect from '../seal-form/base/select';
 import './index.less';
 
 type PageToolsProps = {
@@ -176,7 +177,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
             onChange={handleInputChange}
           ></Input>
           {showSelect && (
-            <Select
+            <BaseSelect
               allowClear
               showSearch={false}
               placeholder={selectHolder}
@@ -184,7 +185,7 @@ export const FilterBar: React.FC<FilterBarProps> = (props) => {
               size="large"
               onChange={handleSelectChange}
               options={selectOptions}
-            ></Select>
+            ></BaseSelect>
           )}
           <Button
             type="text"
diff --git a/src/components/seal-form/base/select.tsx b/src/components/seal-form/base/select.tsx
new file mode 100644
index 00000000..2a42e980
--- /dev/null
+++ b/src/components/seal-form/base/select.tsx
@@ -0,0 +1,43 @@
+import IconFont from '@/components/icon-font';
+import type { SelectProps } from 'antd';
+import { Select } from 'antd';
+import React, { forwardRef, useImperativeHandle } from 'react';
+
+const BaseSelect: React.FC<SelectProps> = forwardRef((props, ref) => {
+  const [isFocus, setIsFocus] = React.useState(false);
+  const inputRef = React.useRef<any>(null);
+
+  useImperativeHandle(ref, () => ({
+    ...(inputRef.current || ({} as any))
+  }));
+
+  const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {
+    setIsFocus(true);
+    props.onFocus?.(e);
+  };
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    setIsFocus(false);
+    props.onBlur?.(e);
+  };
+  const renderSuffixIcon = () => {
+    if (props.suffixIcon) {
+      return props.suffixIcon;
+    }
+    if (!props.showSearch) {
+      return <IconFont type="icon-down"></IconFont>;
+    }
+    return !isFocus ? <IconFont type="icon-down"></IconFont> : undefined;
+  };
+
+  return (
+    <Select
+      {...props}
+      ref={inputRef}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      suffixIcon={renderSuffixIcon()}
+    />
+  );
+});
+
+export default BaseSelect;
diff --git a/src/components/seal-form/seal-select.tsx b/src/components/seal-form/seal-select.tsx
index d3fc9e54..e8d56b95 100644
--- a/src/components/seal-form/seal-select.tsx
+++ b/src/components/seal-form/seal-select.tsx
@@ -1,9 +1,10 @@
 import { isNotEmptyValue } from '@/utils/index';
 import { useIntl } from '@umijs/max';
 import type { SelectProps } from 'antd';
-import { Form, Select } from 'antd';
+import { Form } from 'antd';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import BaseSelect from './base/select';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import SelectWrapper from './wrapper/select';
@@ -96,7 +97,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
         disabled={props.disabled}
         onClick={handleClickWrapper}
       >
-        <Select
+        <BaseSelect
           {...rest}
           ref={inputRef}
           options={children ? null : _options}
@@ -106,7 +107,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
           notFoundContent={notFoundContent}
         >
           {children}
-        </Select>
+        </BaseSelect>
       </Wrapper>
     </SelectWrapper>
   );
diff --git a/src/components/seal-form/simple-select.tsx b/src/components/seal-form/simple-select.tsx
index d9a109b1..163db328 100644
--- a/src/components/seal-form/simple-select.tsx
+++ b/src/components/seal-form/simple-select.tsx
@@ -1,10 +1,11 @@
 import { useIntl } from '@umijs/max';
 import type { SelectProps } from 'antd';
-import { Checkbox, Select, Tag } from 'antd';
+import { Checkbox, Tag } from 'antd';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import AutoTooltip from '../auto-tooltip';
+import BaseSelect from './base/select';
 
 const OptionWrapper = styled.div`
   display: flex;
@@ -236,7 +237,7 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
 
   return (
     <div ref={selectRef}>
-      <Select
+      <BaseSelect
         {...restProps}
         options={optionsList}
         maxTagCount={0}
@@ -251,7 +252,7 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
         onSearch={handleOnSearch}
         filterOption={filterOption}
         onOpenChange={handleOnOpenChange}
-      ></Select>
+      ></BaseSelect>
     </div>
   );
 };
diff --git a/src/pages/llmodels/catalog.tsx b/src/pages/llmodels/catalog.tsx
index 22350517..34036b88 100644
--- a/src/pages/llmodels/catalog.tsx
+++ b/src/pages/llmodels/catalog.tsx
@@ -1,13 +1,14 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
 import MoreButton from '@/components/buttons/more';
 import PageTools from '@/components/page-tools';
+import BaseSelect from '@/components/seal-form/base/select';
 import { PageAction } from '@/config';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import { IS_FIRST_LOGIN, writeState } from '@/utils/localstore/index';
 import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
-import { Button, Input, Pagination, Select, Space, message } from 'antd';
+import { Button, Input, Pagination, Space, message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -278,7 +279,7 @@ const Catalog: React.FC = () => {
               }
               onChange={handleNameChange}
             ></Input>
-            <Select
+            <BaseSelect
               allowClear
               showSearch={false}
               placeholder={intl.formatMessage({ id: 'models.filter.category' })}
@@ -287,7 +288,7 @@ const Catalog: React.FC = () => {
               maxTagCount={1}
               onChange={handleCategoryChange}
               options={categoryOptions}
-            ></Select>
+            ></BaseSelect>
             <Button
               type="text"
               style={{ color: 'var(--ant-color-text-tertiary)' }}
diff --git a/src/pages/llmodels/components/hf-model-file.tsx b/src/pages/llmodels/components/hf-model-file.tsx
index f7063358..b6d9867b 100644
--- a/src/pages/llmodels/components/hf-model-file.tsx
+++ b/src/pages/llmodels/components/hf-model-file.tsx
@@ -1,8 +1,9 @@
 import { getRequestId } from '@/atoms/models';
+import BaseSelect from '@/components/seal-form/base/select';
 import SimpleOverlay from '@/components/simple-overlay';
 import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { useIntl } from '@umijs/max';
-import { Empty, Select, Spin } from 'antd';
+import { Empty, Spin } from 'antd';
 import _ from 'lodash';
 import React, {
   forwardRef,
@@ -367,7 +368,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
           {intl.formatMessage({ id: 'models.available.files' })} (
           {dataSource.fileList.length || 0})
         </span>
-        <Select
+        <BaseSelect
           value={sortType}
           onChange={handleSortChange}
           labelRender={({ label }) => {
@@ -380,7 +381,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
           options={modelFilesSortOptions.current}
           size="middle"
           style={{ width: '120px' }}
-        ></Select>
+        ></BaseSelect>
       </TitleWrapper>
       {dataSource.loading && (
         <div className="spin-wrapper">
diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx
index 99ede4b1..d90b485f 100644
--- a/src/pages/llmodels/components/search-model.tsx
+++ b/src/pages/llmodels/components/search-model.tsx
@@ -1,8 +1,9 @@
 import { getRequestId, setRquestId } from '@/atoms/models';
+import BaseSelect from '@/components/seal-form/base/select';
 import { createAxiosToken } from '@/hooks/use-chunk-request';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Pagination, Select, Tooltip } from 'antd';
+import { Pagination, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -547,7 +548,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
         </div>
         <div className={SearchStyle.filter}>
           <span>
-            <Select
+            <BaseSelect
               value={dataSource.sortType}
               onChange={handleSortChange}
               labelRender={({ label }) => {
@@ -560,7 +561,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
               options={modelFilesSortOptions.current}
               size="middle"
               style={{ width: '150px' }}
-            ></Select>
+            ></BaseSelect>
             {/* <Checkbox
               onChange={handleFilterGGUFChange}
               className="m-l-8"
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index 27aa2f80..79089e25 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/src/pages/llmodels/components/table-list.tsx
@@ -4,6 +4,7 @@ import DropDownActions from '@/components/drop-down-actions';
 import DropdownButtons from '@/components/drop-down-buttons';
 import { PageSize } from '@/components/logs-viewer/config';
 import PageTools from '@/components/page-tools';
+import BaseSelect from '@/components/seal-form/base/select';
 import SealTable from '@/components/seal-table';
 import { PageAction } from '@/config';
 import useBodyScroll from '@/hooks/use-body-scroll';
@@ -16,7 +17,7 @@ import { DownOutlined, SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Button, Input, Select, Space, message } from 'antd';
+import { Button, Input, Space, message } from 'antd';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
 import React, {
@@ -584,7 +585,7 @@ const Models: React.FC<ModelsProps> = ({
                 allowClear
                 onChange={handleNameChange}
               ></Input>
-              <Select
+              <BaseSelect
                 allowClear
                 showSearch={false}
                 placeholder={intl.formatMessage({
@@ -595,8 +596,8 @@ const Models: React.FC<ModelsProps> = ({
                 maxTagCount={1}
                 onChange={handleCategoryChange}
                 options={modelCategories.filter((item) => item.value)}
-              ></Select>
-              <Select
+              ></BaseSelect>
+              <BaseSelect
                 allowClear
                 showSearch={false}
                 placeholder={intl.formatMessage({
@@ -607,7 +608,7 @@ const Models: React.FC<ModelsProps> = ({
                 maxTagCount={1}
                 onChange={handleClusterChange}
                 options={clusterList}
-              ></Select>
+              ></BaseSelect>
               <Button
                 type="text"
                 style={{ color: 'var(--ant-color-text-tertiary)' }}
diff --git a/src/pages/llmodels/user-models.tsx b/src/pages/llmodels/user-models.tsx
index 32c08538..a1ee9154 100644
--- a/src/pages/llmodels/user-models.tsx
+++ b/src/pages/llmodels/user-models.tsx
@@ -1,12 +1,13 @@
 import MoreButton from '@/components/buttons/more';
 import PageTools from '@/components/page-tools';
+import BaseSelect from '@/components/seal-form/base/select';
 import CardList from '@/components/templates/card-list';
 import CardSkeleton from '@/components/templates/card-skelton';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
-import { Button, Input, Select, Space } from 'antd';
+import { Button, Input, Space } from 'antd';
 import React from 'react';
 import { MODELS_API, queryModelsList } from './apis';
 import ModelItem from './components/model-item';
@@ -96,7 +97,7 @@ const UserModels: React.FC = () => {
               }
               onChange={handleNameChange}
             ></Input>
-            <Select
+            <BaseSelect
               allowClear
               showSearch={false}
               placeholder={intl.formatMessage({ id: 'models.filter.category' })}
@@ -105,7 +106,7 @@ const UserModels: React.FC = () => {
               maxTagCount={1}
               options={categoryOptions}
               onChange={handleCategoryChange}
-            ></Select>
+            ></BaseSelect>
             <Button
               type="text"
               style={{ color: 'var(--ant-color-text-tertiary)' }}
diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx
index cb7152c1..f3280507 100644
--- a/src/pages/playground/components/multiple-chat/model-item.tsx
+++ b/src/pages/playground/components/multiple-chat/model-item.tsx
@@ -1,6 +1,7 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import IconFont from '@/components/icon-font';
 import OverlayScroller from '@/components/overlay-scroller';
+import BaseSelect from '@/components/seal-form/base/select';
 import {
   ClearOutlined,
   DeleteOutlined,
@@ -8,7 +9,7 @@ import {
   SettingOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Checkbox, Dropdown, Popover, Select, Spin } from 'antd';
+import { Button, Checkbox, Dropdown, Popover, Spin } from 'antd';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import React, {
@@ -239,7 +240,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
     <div className="model-item">
       <div className="header">
         <span className="title">
-          <Select
+          <BaseSelect
             style={{ width: '100%' }}
             variant="borderless"
             options={modelFullList}
@@ -273,7 +274,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
                 </AutoTooltip>
               );
             }}
-          ></Select>
+          ></BaseSelect>
         </span>
         {tokenResult && !loading && (
           <ReferenceParams usage={tokenResult} scaleable></ReferenceParams>
diff --git a/src/pages/profile/components/appearance.tsx b/src/pages/profile/components/appearance.tsx
index b952d39f..4ed07e73 100644
--- a/src/pages/profile/components/appearance.tsx
+++ b/src/pages/profile/components/appearance.tsx
@@ -1,8 +1,8 @@
+import BaseSelect from '@/components/seal-form/base/select';
 import useUserSettings from '@/hooks/use-user-settings';
 import langConfigMap from '@/locales/lang-config-map';
 import { MoonOutlined, SunOutlined } from '@ant-design/icons';
 import { getAllLocales, setLocale, useIntl } from '@umijs/max';
-import { Select } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
@@ -70,25 +70,25 @@ const Appearance: React.FC = () => {
         <span className="label">
           <span>{intl.formatMessage({ id: 'common.appearance.theme' })}</span>
         </span>
-        <Select
+        <BaseSelect
           value={userSettings.mode}
           options={ThemeOptions}
           onChange={handleOnChange}
           style={{ width: 200 }}
-        ></Select>
+        ></BaseSelect>
       </SettingsItem>
       <SettingsItem>
         <span className="label">
           <span>{intl.formatMessage({ id: 'common.settings.language' })}</span>
         </span>
-        <Select
+        <BaseSelect
           value={intl.locale}
           options={languageOptions}
           onChange={(value) => {
             setLocale(value, false);
           }}
           style={{ width: 200 }}
-        ></Select>
+        ></BaseSelect>
       </SettingsItem>
     </Wrapper>
   );
diff --git a/src/pages/usage/components/dahboard-inner.tsx b/src/pages/usage/components/dahboard-inner.tsx
index 5cb93463..af0d48e3 100644
--- a/src/pages/usage/components/dahboard-inner.tsx
+++ b/src/pages/usage/components/dahboard-inner.tsx
@@ -1,7 +1,8 @@
 import PageTools from '@/components/page-tools';
+import BaseSelect from '@/components/seal-form/base/select';
 import { SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Input, Select, Space } from 'antd';
+import { Button, Input, Space } from 'antd';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { queryDashboardData } from '../apis';
 import DashboardContext from '../config/dashboard-context';
@@ -41,10 +42,10 @@ const Page: React.FC<{ setLoading: (loading: boolean) => void }> = ({
               style={{ width: 200 }}
               allowClear
             ></Input>
-            <Select
+            <BaseSelect
               style={{ width: 300 }}
               placeholder={intl.formatMessage({ id: 'usage.filter.model' })}
-            ></Select>
+            ></BaseSelect>
             <Button
               type="text"
               style={{ color: 'var(--ant-color-text-tertiary)' }}