mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-27 00:17:31 +00:00
V4.8.20 feature (#3686)
* Aiproxy (#3649) * model config * feat: model config ui * perf: rename variable * feat: custom request url * perf: model buffer * perf: init model * feat: json model config * auto login * fix: ts * update packages * package * fix: dockerfile * feat: usage filter & export & dashbord (#3538) * feat: usage filter & export & dashbord * adjust ui * fix tmb scroll * fix code & selecte all * merge * perf: usages list；perf: move components (#3654) * perf: usages list * team sub plan load * perf: usage dashboard code * perf: dashboard ui * perf: move components * add default model config (#3653) * 4.8.20 test (#3656) * provider * perf: model config * model perf (#3657) * fix: model * dataset quote * perf: model config * model tag * doubao model config * perf: config model * feat: model test * fix: POST 500 error on dingtalk bot (#3655) * feat: default model (#3662) * move model config * feat: default model * fix: false triggerd org selection (#3661) * export usage csv i18n (#3660) * export usage csv i18n * fix build * feat: markdown extension (#3663) * feat: markdown extension * media cros * rerank test * default price * perf: default model * fix: cannot custom provider * fix: default model select * update bg * perf: default model selector * fix: usage export * i18n * fix: rerank * update init extension * perf: ip limit check * doubao model order * web default modle * perf: tts selector * perf: tts error * qrcode package * reload buffer (#3665) * reload buffer * reload buffer * tts selector * fix: err tip (#3666) * fix: err tip * perf: training queue * doc * fix interactive edge (#3659) * fix interactive edge * fix * comment * add gemini model * fix: chat model select * perf: supplement assistant empty response (#3669) * perf: supplement assistant empty response * check array * perf: max_token count;feat: support resoner output;fix: member scroll (#3681) * perf: supplement assistant empty response * check array * perf: max_token count * feat: support resoner output * member scroll * update provider order * i18n * fix: stream response (#3682) * perf: supplement assistant empty response * check array * fix: stream response * fix: model config cannot set to null * fix: reasoning response (#3684) * perf: supplement assistant empty response * check array * fix: reasoning response * fix: reasoning response * doc (#3685) * perf: supplement assistant empty response * check array * doc * lock * animation * update doc * update compose * doc * doc --------- Co-authored-by: heheer <heheer@sealos.io> Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>
This commit is contained in:
Archer
@@ -58,7 +58,6 @@ export const MultipleRowSelect = ({
|
||||
const selectedValue = cloneValue[index];
|
||||
const selectedIndex = list.findIndex((item) => item.value === selectedValue);
|
||||
const children = list[selectedIndex]?.children || [];
|
||||
const hasChildren = list.some((item) => item.children && item.children?.length > 0);
|
||||
|
||||
// Store current scroll position before update
|
||||
const currentScrollTop = MenuRef.current[index]?.scrollTop;
|
||||
@@ -84,54 +83,58 @@ export const MultipleRowSelect = ({
|
||||
overflowY={'auto'}
|
||||
whiteSpace={'nowrap'}
|
||||
>
|
||||
{list.map((item) => (
|
||||
<Flex
|
||||
key={item.value}
|
||||
ref={(ref) => {
|
||||
if (item.value === selectedValue) {
|
||||
SelectedItemRef.current[index] = ref;
|
||||
}
|
||||
}}
|
||||
py={1.5}
|
||||
_notLast={{ mb: 1 }}
|
||||
cursor={'pointer'}
|
||||
px={1.5}
|
||||
borderRadius={'sm'}
|
||||
_hover={{
|
||||
bg: 'primary.50'
|
||||
}}
|
||||
onClick={() => {
|
||||
const newValue = [...cloneValue];
|
||||
{list.map((item) => {
|
||||
const hasChildren = item.children && item.children.length > 0;
|
||||
|
||||
if (item.value === selectedValue) {
|
||||
for (let i = index; i < newValue.length; i++) {
|
||||
newValue[i] = undefined;
|
||||
return (
|
||||
<Flex
|
||||
key={item.value}
|
||||
ref={(ref) => {
|
||||
if (item.value === selectedValue) {
|
||||
SelectedItemRef.current[index] = ref;
|
||||
}
|
||||
setCloneValue(newValue);
|
||||
onSelect(newValue);
|
||||
} else {
|
||||
newValue[index] = item.value;
|
||||
setCloneValue(newValue);
|
||||
}}
|
||||
py={1.5}
|
||||
_notLast={{ mb: 1 }}
|
||||
cursor={'pointer'}
|
||||
px={1.5}
|
||||
borderRadius={'sm'}
|
||||
_hover={{
|
||||
bg: 'primary.50'
|
||||
}}
|
||||
onClick={() => {
|
||||
const newValue = [...cloneValue];
|
||||
|
||||
if (changeOnEverySelect || !hasChildren) {
|
||||
if (item.value === selectedValue) {
|
||||
for (let i = index; i < newValue.length; i++) {
|
||||
newValue[i] = undefined;
|
||||
}
|
||||
setCloneValue(newValue);
|
||||
onSelect(newValue);
|
||||
}
|
||||
} else {
|
||||
newValue[index] = item.value;
|
||||
setCloneValue(newValue);
|
||||
|
||||
if (!hasChildren) {
|
||||
onClose();
|
||||
if (changeOnEverySelect || !hasChildren) {
|
||||
onSelect(newValue);
|
||||
}
|
||||
|
||||
if (!hasChildren) {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
{...(item.value === selectedValue
|
||||
? {
|
||||
bg: 'primary.50',
|
||||
color: 'primary.600'
|
||||
}
|
||||
: {})}
|
||||
>
|
||||
{item.label}
|
||||
</Flex>
|
||||
))}
|
||||
}}
|
||||
{...(item.value === selectedValue
|
||||
? {
|
||||
bg: 'primary.50',
|
||||
color: 'primary.600'
|
||||
}
|
||||
: {})}
|
||||
>
|
||||
{item.label}
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
{list.length === 0 && (
|
||||
<EmptyTip
|
||||
text={emptyTip ?? t('common:common.MultipleRowSelect.No data')}
|
||||
|
||||
@@ -1,44 +1,56 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
ButtonProps,
|
||||
Checkbox,
|
||||
Flex,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItemProps,
|
||||
MenuList,
|
||||
useDisclosure,
|
||||
useOutsideClick
|
||||
useDisclosure
|
||||
} from '@chakra-ui/react';
|
||||
import React, { useRef } from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
||||
import MyTag from '../Tag/index';
|
||||
import MyIcon from '../Icon';
|
||||
import MyAvatar from '../Avatar';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useScrollPagination } from '../../../hooks/useScrollPagination';
|
||||
import MyDivider from '../MyDivider';
|
||||
|
||||
export type SelectProps<T = any> = {
|
||||
value: T[];
|
||||
placeholder?: string;
|
||||
list: {
|
||||
icon?: string;
|
||||
label: string | React.ReactNode;
|
||||
value: T;
|
||||
}[];
|
||||
value: T[];
|
||||
isSelectAll: boolean;
|
||||
setIsSelectAll: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
|
||||
placeholder?: string;
|
||||
maxH?: number;
|
||||
itemWrap?: boolean;
|
||||
onSelect: (val: T[]) => void;
|
||||
closeable?: boolean;
|
||||
ScrollData?: ReturnType<typeof useScrollPagination>['ScrollData'];
|
||||
} & Omit<ButtonProps, 'onSelect'>;
|
||||
|
||||
const MultipleSelect = <T = any,>({
|
||||
value = [],
|
||||
placeholder,
|
||||
list = [],
|
||||
width = '100%',
|
||||
maxH = 400,
|
||||
onSelect,
|
||||
closeable = false,
|
||||
itemWrap = true,
|
||||
ScrollData,
|
||||
isSelectAll,
|
||||
setIsSelectAll,
|
||||
...props
|
||||
}: SelectProps<T>) => {
|
||||
const { t } = useTranslation();
|
||||
const ref = useRef<HTMLButtonElement>(null);
|
||||
const { t } = useTranslation();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const menuItemStyles: MenuItemProps = {
|
||||
borderRadius: 'sm',
|
||||
@@ -53,13 +65,65 @@ const MultipleSelect = <T = any,>({
|
||||
}
|
||||
};
|
||||
|
||||
const onclickItem = (val: T) => {
|
||||
if (value.includes(val)) {
|
||||
onSelect(value.filter((i) => i !== val));
|
||||
} else {
|
||||
onSelect([...value, val]);
|
||||
}
|
||||
};
|
||||
const onclickItem = useCallback(
|
||||
(val: T) => {
|
||||
// 全选状态下，value 实际上上空。
|
||||
if (isSelectAll) {
|
||||
onSelect(list.map((item) => item.value).filter((i) => i !== val));
|
||||
setIsSelectAll(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (value.includes(val)) {
|
||||
onSelect(value.filter((i) => i !== val));
|
||||
} else {
|
||||
onSelect([...value, val]);
|
||||
}
|
||||
},
|
||||
[value, isSelectAll, onSelect, setIsSelectAll]
|
||||
);
|
||||
|
||||
const onSelectAll = useCallback(() => {
|
||||
const hasSelected = isSelectAll || value.length > 0;
|
||||
onSelect(hasSelected ? [] : list.map((item) => item.value));
|
||||
|
||||
setIsSelectAll((state) => !state);
|
||||
}, [value, list, setIsSelectAll, onSelect]);
|
||||
|
||||
const ListRender = useMemo(() => {
|
||||
return (
|
||||
<>
|
||||
{list.map((item, i) => {
|
||||
const isSelected = isSelectAll || value.includes(item.value);
|
||||
return (
|
||||
<MenuItem
|
||||
key={i}
|
||||
{...menuItemStyles}
|
||||
{...(isSelected
|
||||
? {
|
||||
color: 'primary.600'
|
||||
}
|
||||
: {
|
||||
color: 'myGray.900'
|
||||
})}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
onclickItem(item.value);
|
||||
}}
|
||||
whiteSpace={'pre-wrap'}
|
||||
fontSize={'sm'}
|
||||
gap={2}
|
||||
>
|
||||
<Checkbox isChecked={isSelected} />
|
||||
{item.icon && <MyAvatar src={item.icon} w={'1rem'} borderRadius={'0'} />}
|
||||
<Box flex={'1 0 0'}>{item.label}</Box>
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}, [value, list, isSelectAll]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
@@ -73,12 +137,10 @@ const MultipleSelect = <T = any,>({
|
||||
closeOnSelect={false}
|
||||
>
|
||||
<MenuButton
|
||||
as={Box}
|
||||
as={Flex}
|
||||
alignItems={'center'}
|
||||
ref={ref}
|
||||
width={width}
|
||||
minH={'40px'}
|
||||
px={3}
|
||||
py={2}
|
||||
borderRadius={'md'}
|
||||
border={'base'}
|
||||
userSelect={'none'}
|
||||
@@ -86,6 +148,9 @@ const MultipleSelect = <T = any,>({
|
||||
_active={{
|
||||
transform: 'none'
|
||||
}}
|
||||
_hover={{
|
||||
borderColor: 'primary.300'
|
||||
}}
|
||||
{...props}
|
||||
{...(isOpen
|
||||
? {
|
||||
@@ -100,76 +165,90 @@ const MultipleSelect = <T = any,>({
|
||||
{placeholder}
|
||||
</Box>
|
||||
) : (
|
||||
<Flex alignItems={'center'} gap={2} flexWrap={'wrap'}>
|
||||
{value.map((item, i) => {
|
||||
const listItem = list.find((i) => i.value === item);
|
||||
if (!listItem) return null;
|
||||
|
||||
return (
|
||||
<MyTag key={i} colorSchema="blue" type={'borderFill'}>
|
||||
{listItem.label}
|
||||
{/* <MyIcon
|
||||
name={'common/closeLight'}
|
||||
ml={1}
|
||||
w="14px"
|
||||
cursor={'pointer'}
|
||||
onClickCapture={(e) => {
|
||||
console.log(111);
|
||||
e.stopPropagation();
|
||||
onclickItem(item);
|
||||
}}
|
||||
/> */}
|
||||
</MyTag>
|
||||
);
|
||||
})}
|
||||
<Flex alignItems={'center'} gap={2}>
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
gap={2}
|
||||
flexWrap={itemWrap ? 'wrap' : 'nowrap'}
|
||||
overflow={'hidden'}
|
||||
flex={1}
|
||||
>
|
||||
{isSelectAll ? (
|
||||
<Box fontSize={'mini'} color={'myGray.900'}>
|
||||
{t('common:common.All')}
|
||||
</Box>
|
||||
) : (
|
||||
list
|
||||
.filter((item) => value.includes(item.value))
|
||||
.map((item, i) => (
|
||||
<MyTag
|
||||
className="tag-icon"
|
||||
key={i}
|
||||
bg={'primary.100'}
|
||||
color={'primary.700'}
|
||||
type={'fill'}
|
||||
borderRadius={'full'}
|
||||
px={2}
|
||||
py={0.5}
|
||||
flexShrink={0}
|
||||
>
|
||||
{item.label}
|
||||
{closeable && (
|
||||
<MyIcon
|
||||
name={'common/closeLight'}
|
||||
ml={1}
|
||||
w="0.8rem"
|
||||
cursor={'pointer'}
|
||||
_hover={{
|
||||
color: 'red.500'
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onclickItem(item.value);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</MyTag>
|
||||
))
|
||||
)}
|
||||
</Flex>
|
||||
<MyIcon name={'core/chat/chevronDown'} color={'myGray.600'} w={4} h={4} />
|
||||
</Flex>
|
||||
)}
|
||||
</MenuButton>
|
||||
|
||||
<MenuList
|
||||
className={props.className}
|
||||
minW={(() => {
|
||||
const w = ref.current?.clientWidth;
|
||||
if (w) {
|
||||
return `${w}px !important`;
|
||||
}
|
||||
return Array.isArray(width)
|
||||
? width.map((item) => `${item} !important`)
|
||||
: `${width} !important`;
|
||||
})()}
|
||||
w={'auto'}
|
||||
px={'6px'}
|
||||
py={'6px'}
|
||||
border={'1px solid #fff'}
|
||||
boxShadow={
|
||||
'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'
|
||||
'0px 4px 10px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.10);'
|
||||
}
|
||||
zIndex={99}
|
||||
maxH={'40vh'}
|
||||
overflowY={'auto'}
|
||||
>
|
||||
{list.map((item, i) => (
|
||||
<MenuItem
|
||||
key={i}
|
||||
{...menuItemStyles}
|
||||
{...(value.includes(item.value)
|
||||
? {
|
||||
color: 'primary.600'
|
||||
}
|
||||
: {
|
||||
color: 'myGray.900'
|
||||
})}
|
||||
onClick={() => onclickItem(item.value)}
|
||||
whiteSpace={'pre-wrap'}
|
||||
fontSize={'sm'}
|
||||
gap={2}
|
||||
>
|
||||
<Box w={'0.8rem'} lineHeight={1}>
|
||||
{value.includes(item.value) && <MyIcon name={'price/right'} w={'1rem'} />}
|
||||
</Box>
|
||||
<Box>{item.label}</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
<MenuItem
|
||||
{...menuItemStyles}
|
||||
color={isSelectAll ? 'primary.600' : 'myGray.900'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
onSelectAll();
|
||||
}}
|
||||
whiteSpace={'pre-wrap'}
|
||||
fontSize={'sm'}
|
||||
gap={2}
|
||||
mb={1}
|
||||
>
|
||||
<Checkbox isChecked={isSelectAll} />
|
||||
<Box flex={'1 0 0'}>{t('common:common.All')}</Box>
|
||||
</MenuItem>
|
||||
|
||||
<MyDivider my={1} />
|
||||
|
||||
{ScrollData ? <ScrollData>{ListRender}</ScrollData> : ListRender}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
@@ -177,3 +256,9 @@ const MultipleSelect = <T = any,>({
|
||||
};
|
||||
|
||||
export default MultipleSelect;
|
||||
|
||||
export const useMultipleSelect = <T = any,>(defaultValue: T[] = [], defaultSelectAll = false) => {
|
||||
const [value, setValue] = useState<T[]>(defaultValue);
|
||||
const [isSelectAll, setIsSelectAll] = useState<boolean>(defaultSelectAll);
|
||||
return { value, setValue, isSelectAll, setIsSelectAll };
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user