mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-29 17:55:24 +00:00

* feat: add customize toolkit (#3205) * chaoyang * fix-auth * add toolkit * add order * plugin usage * fix * delete console: * Fix: Fix fullscreen preview top positioning and improve Markdown rendering logic (#3247) * 完成任务:修复全屏预览顶部固定问题,优化 Markdown 渲染逻辑 * 有问题修改 * 问题再修改 * 修正问题 * fix: plugin standalone display issue (#3254) * 4.8.15 test (#3246) * o1 config * perf: system plugin code * 调整系统插件代码。增加html 渲染安全配置。 (#3258) * perf: base64 picker * perf: list app or dataset * perf: plugin config code * 小窗适配等问题 (#3257) * 小窗适配等问题 * git问题 * 小窗剩余问题 * feat: system plugin auth and lock version (#3265) * feat: system plugin auth and lock version * update comment * 4.8.15 test (#3267) * tmp log * perf: login direct * perf: iframe html code * remove log * fix: plugin standalone display (#3277) * refactor: 页面拆分&i18n拆分 (#3281) * refactor: account组件拆成独立页面 * script: 新增i18n json文件创建脚本 * refactor: 页面i18n拆分 * i18n: add en&hant * 4.8.15 test (#3285) * tmp log * remove log * fix: watch avatar refresh * perf: i18n code * fix(plugin): use intro instead of userguide (#3290) * Universal SSO (#3292) * tmp log * remove log * feat: common oauth * readme * perf: sso provider * remove sso code * perf: refresh plugins * feat: add api dataset (#3272) * add api-dataset * fix api-dataset * fix api dataset * fix ts * perf: create collection code (#3301) * tmp log * remove log * perf: i18n change * update version doc * feat: question guide from chatId * perf: create collection code * fix: request api * fix: request api * fix: tts auth and response type (#3303) * perf: md splitter * fix: tts auth and response type * fix: api file dataset (#3307) * perf: api dataset init (#3310) * perf: collection schema * perf: api dataset init * refactor: 团队管理独立页面 (#3302) * ui: 团队管理独立页面 * 代码优化 * fix * perf: sync collection and ui check (#3314) * perf: sync collection * remove script * perf: update api server * perf: api dataset parent * perf: team ui * perf: team 18n * update team ui * perf: ui check * perf: i18n * fix: debug variables & cronjob & system plugin callback load (#3315) * fix: debug variables & cronjob & system plugin callback load * fix type * fix * fix * fix: plugin dataset quote;perf: system variables init (#3316) * fix: plugin dataset quote * perf: system variables init * perf: node templates ui;fix: dataset import ui (#3318) * fix: dataset import ui * perf: node templates ui * perf: ui refresh * feat:套餐改名和套餐跳转配置 (#3309) * fixing:except Sidebar * 去除了多余的代码 * 修正了套餐说明的代码 * 修正了误删除的show_git代码 * 修正了名字部分等代码 * 修正了问题,遗留了其他和ui讨论不一致的部分 * 4.8.15 test (#3319) * remove log * pref: bill ui * pref: bill ui * perf: log * html渲染文档 (#3270) * html渲染文档 * 文档有点小问题 * feat: doc (#3322) * 集合重训练 (#3282) * rebaser * 一点补充 * 小问题 * 其他问题修正,删除集合保留文件的参数还没找到... * reTraining * delete uesless * 删除了一行错误代码 * 集合重训练部分 * fixing * 删除console代码 * feat: navbar item config (#3326) * perf: custom navbar code;perf: retraining code;feat: api dataset and dataset api doc (#3329) * feat: api dataset and dataset api doc * perf: retraining code * perf: custom navbar code * fix: ts (#3330) * fix: ts * fix: ts * retraining ui * perf: api collection filter * perf: retrining button --------- Co-authored-by: heheer <heheer@sealos.io> Co-authored-by: Jiangween <145003935+Jiangween@users.noreply.github.com> Co-authored-by: papapatrick <109422393+Patrickill@users.noreply.github.com>
347 lines
9.7 KiB
TypeScript
347 lines
9.7 KiB
TypeScript
import React, { useRef, useCallback, useState, useMemo } from 'react';
|
|
import { Button, useDisclosure, Box, Flex, useOutsideClick, Checkbox } from '@chakra-ui/react';
|
|
import { ListItemType, MultipleArraySelectProps, MultipleSelectProps } from './type';
|
|
import EmptyTip from '../EmptyTip';
|
|
import { useTranslation } from 'next-i18next';
|
|
import MyIcon from '../../common/Icon';
|
|
|
|
export const MultipleRowSelect = ({
|
|
placeholder,
|
|
label,
|
|
value = [],
|
|
list,
|
|
emptyTip,
|
|
maxH = 300,
|
|
onSelect,
|
|
popDirection = 'bottom',
|
|
styles,
|
|
changeOnEverySelect = false
|
|
}: MultipleSelectProps) => {
|
|
const { t } = useTranslation();
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
const [cloneValue, setCloneValue] = useState(value);
|
|
|
|
useOutsideClick({
|
|
ref: ref,
|
|
handler: onClose
|
|
});
|
|
|
|
const RenderList = useCallback(
|
|
({ index, list }: { index: number; list: MultipleSelectProps['list'] }) => {
|
|
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);
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
className="nowheel"
|
|
flex={'1 0 auto'}
|
|
// width={0}
|
|
px={2}
|
|
borderLeft={index !== 0 ? 'base' : 'none'}
|
|
maxH={`${maxH}px`}
|
|
overflowY={'auto'}
|
|
whiteSpace={'nowrap'}
|
|
>
|
|
{list.map((item) => (
|
|
<Flex
|
|
key={item.value}
|
|
py={2}
|
|
cursor={'pointer'}
|
|
px={2}
|
|
borderRadius={'md'}
|
|
_hover={{
|
|
bg: 'primary.50',
|
|
color: 'primary.600'
|
|
}}
|
|
onClick={() => {
|
|
const newValue = [...cloneValue];
|
|
|
|
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 (changeOnEverySelect || !hasChildren) {
|
|
onSelect(newValue);
|
|
}
|
|
|
|
if (!hasChildren) {
|
|
onClose();
|
|
}
|
|
}
|
|
}}
|
|
{...(item.value === selectedValue
|
|
? {
|
|
color: 'primary.600'
|
|
}
|
|
: {})}
|
|
>
|
|
{item.label}
|
|
</Flex>
|
|
))}
|
|
{list.length === 0 && (
|
|
<EmptyTip
|
|
text={emptyTip ?? t('common:common.MultipleRowSelect.No data')}
|
|
pt={1}
|
|
pb={3}
|
|
/>
|
|
)}
|
|
</Box>
|
|
{children.length > 0 && <RenderList list={children} index={index + 1} />}
|
|
</>
|
|
);
|
|
},
|
|
[cloneValue]
|
|
);
|
|
|
|
const onOpenSelect = useCallback(() => {
|
|
setCloneValue(value);
|
|
onOpen();
|
|
}, [value, onOpen]);
|
|
|
|
return (
|
|
<Box ref={ref} position={'relative'}>
|
|
<Button
|
|
justifyContent={'space-between'}
|
|
width={'100%'}
|
|
variant={'whitePrimaryOutline'}
|
|
size={'lg'}
|
|
fontSize={'sm'}
|
|
px={3}
|
|
outline={'none'}
|
|
rightIcon={<MyIcon name={'core/chat/chevronDown'} w="1rem" color={'myGray.500'} />}
|
|
_active={{
|
|
transform: 'none'
|
|
}}
|
|
{...(isOpen
|
|
? {
|
|
borderColor: 'primary.600',
|
|
color: 'primary.700',
|
|
boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
|
|
}
|
|
: {
|
|
borderColor: 'myGray.200',
|
|
boxShadow: 'none'
|
|
})}
|
|
{...styles}
|
|
onClick={() => (isOpen ? onClose() : onOpenSelect())}
|
|
>
|
|
<Box>{label ?? placeholder}</Box>
|
|
</Button>
|
|
{isOpen && (
|
|
<Box
|
|
position={'absolute'}
|
|
{...(popDirection === 'top'
|
|
? {
|
|
transform: 'translateY(-105%)',
|
|
top: '0'
|
|
}
|
|
: {
|
|
transform: 'translateY(105%)',
|
|
bottom: '0'
|
|
})}
|
|
py={2}
|
|
bg={'white'}
|
|
border={'1px solid #fff'}
|
|
boxShadow={'5'}
|
|
borderRadius={'md'}
|
|
zIndex={1}
|
|
minW={'100%'}
|
|
w={'max-content'}
|
|
>
|
|
<Flex>
|
|
<RenderList list={list} index={0} />
|
|
</Flex>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export const MultipleRowArraySelect = ({
|
|
placeholder,
|
|
label,
|
|
value = [],
|
|
list,
|
|
emptyTip,
|
|
maxH = 300,
|
|
onSelect,
|
|
popDirection = 'bottom',
|
|
styles
|
|
}: MultipleArraySelectProps) => {
|
|
const { t } = useTranslation();
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
|
|
const [navigationPath, setNavigationPath] = useState<string[]>([]);
|
|
|
|
const formatValue = useMemo(() => {
|
|
return Array.isArray(value) ? value : [];
|
|
}, [value]);
|
|
|
|
// Close when clicking outside
|
|
useOutsideClick({
|
|
ref: ref,
|
|
handler: onClose
|
|
});
|
|
|
|
const RenderList = useCallback(
|
|
({ index, list }: { index: number; list: MultipleSelectProps['list'] }) => {
|
|
const currentNavValue = navigationPath[index];
|
|
const selectedIndex = list.findIndex((item) => item.value === currentNavValue);
|
|
const children = list[selectedIndex]?.children || [];
|
|
const hasChildren = list.some((item) => item.children && item.children?.length > 0);
|
|
|
|
const handleSelect = (item: ListItemType) => {
|
|
// Has children, set parent value
|
|
if (hasChildren) {
|
|
const newPath = [...navigationPath];
|
|
newPath[index] = item.value;
|
|
setNavigationPath(newPath);
|
|
} else {
|
|
const parentValue = navigationPath[0];
|
|
const newValues = [...formatValue];
|
|
const newValue = [parentValue, item.value];
|
|
|
|
if (newValues.some((v) => v[0] === parentValue && v[1] === item.value)) {
|
|
onSelect(newValues.filter((v) => !(v[0] === parentValue && v[1] === item.value)));
|
|
} else {
|
|
onSelect([...newValues, newValue]);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
className="nowheel"
|
|
flex={'1 0 auto'}
|
|
px={2}
|
|
borderLeft={index !== 0 ? 'base' : 'none'}
|
|
maxH={`${maxH}px`}
|
|
overflowY={'auto'}
|
|
whiteSpace={'nowrap'}
|
|
>
|
|
{list.map((item) => {
|
|
const isSelected = item.value === currentNavValue;
|
|
const showCheckbox = !hasChildren;
|
|
const isChecked =
|
|
showCheckbox &&
|
|
formatValue.some((v) => v[1] === item.value && v[0] === navigationPath[0]);
|
|
|
|
return (
|
|
<Flex
|
|
key={item.value}
|
|
py={2}
|
|
cursor={'pointer'}
|
|
px={2}
|
|
borderRadius={'md'}
|
|
_hover={{
|
|
bg: 'primary.50',
|
|
color: 'primary.600'
|
|
}}
|
|
onClick={() => handleSelect(item)}
|
|
{...(isSelected ? { color: 'primary.600' } : {})}
|
|
>
|
|
{showCheckbox && <Checkbox isChecked={isChecked} mr={1} />}
|
|
<Box>{item.label}</Box>
|
|
</Flex>
|
|
);
|
|
})}
|
|
{list.length === 0 && (
|
|
<EmptyTip
|
|
text={emptyTip ?? t('common:common.MultipleRowSelect.No data')}
|
|
pt={1}
|
|
pb={3}
|
|
/>
|
|
)}
|
|
</Box>
|
|
{children.length > 0 && <RenderList list={children} index={index + 1} />}
|
|
</>
|
|
);
|
|
},
|
|
[navigationPath, formatValue, onSelect]
|
|
);
|
|
|
|
const onOpenSelect = useCallback(() => {
|
|
setNavigationPath([]);
|
|
onOpen();
|
|
}, []);
|
|
|
|
return (
|
|
<Box ref={ref} position={'relative'}>
|
|
<Button
|
|
width={'100%'}
|
|
variant={'whitePrimaryOutline'}
|
|
size={'lg'}
|
|
fontSize={'sm'}
|
|
px={3}
|
|
outline={'none'}
|
|
rightIcon={<MyIcon name={'core/chat/chevronDown'} w="1rem" color={'myGray.500'} />}
|
|
iconSpacing={2}
|
|
h={'auto'}
|
|
_active={{
|
|
transform: 'none'
|
|
}}
|
|
_hover={{
|
|
borderColor: 'primary.500'
|
|
}}
|
|
{...(isOpen
|
|
? {
|
|
borderColor: 'primary.600',
|
|
color: 'primary.700',
|
|
boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)'
|
|
}
|
|
: {
|
|
borderColor: 'myGray.200',
|
|
boxShadow: 'none'
|
|
})}
|
|
{...styles}
|
|
onClick={() => (isOpen ? onClose() : onOpenSelect())}
|
|
className="nowheel"
|
|
>
|
|
<Box w={'100%'} textAlign={'left'}>
|
|
{label ?? placeholder}
|
|
</Box>
|
|
</Button>
|
|
{isOpen && (
|
|
<Box
|
|
position={'absolute'}
|
|
{...(popDirection === 'top'
|
|
? {
|
|
transform: 'translateY(-105%)',
|
|
top: '0'
|
|
}
|
|
: {
|
|
transform: 'translateY(105%)',
|
|
bottom: '0'
|
|
})}
|
|
py={2}
|
|
bg={'white'}
|
|
border={'1px solid #fff'}
|
|
boxShadow={'5'}
|
|
borderRadius={'md'}
|
|
zIndex={1}
|
|
minW={'100%'}
|
|
w={'max-content'}
|
|
>
|
|
<Flex>
|
|
<RenderList list={list} index={0} />
|
|
</Flex>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default React.memo(MultipleRowSelect);
|