root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add baseSelect

Browse Source
This commit is contained in:
jialin
2025-09-17 19:53:40 +08:00
parent f36613227e
commit 1ac63e36df
12 changed files with 90 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/page-tools/index.tsx
+4 -3
View File
@@ -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"
src/components/seal-form/base/select.tsx
+43
View File
@@ -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;
src/components/seal-form/seal-select.tsx
+4 -3
View File
@@ -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>
);
src/components/seal-form/simple-select.tsx
+4 -3
View File
@@ -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>
);
};
src/pages/llmodels/catalog.tsx
+4 -3
View File
@@ -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)' }}
src/pages/llmodels/components/hf-model-file.tsx
+4 -3
View File
@@ -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">
src/pages/llmodels/components/search-model.tsx
+4 -3
View File
@@ -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"
src/pages/llmodels/components/table-list.tsx
+6 -5
View File
@@ -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)' }}
src/pages/llmodels/user-models.tsx
+4 -3
View File
@@ -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)' }}
src/pages/playground/components/multiple-chat/model-item.tsx
+4 -3
View File
@@ -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>
src/pages/profile/components/appearance.tsx
+5 -5
View File
@@ -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>
);
src/pages/usage/components/dahboard-inner.tsx
+4 -3
View File
@@ -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)' }}