mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-23 13:03:50 +00:00
4.6.9-production (#952)
* move components to web package (#37) * move components * fix * fix: cq connection * fix pagination (#41) * doc * openapi config * fix team share app lose (#42) * fix: ts * doc * doc --------- Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com> Co-authored-by: yst <77910600+yu-and-liu@users.noreply.github.com>
This commit is contained in:
Archer
@@ -63,6 +63,8 @@ export type SystemEnvType = {
|
||||
vectorMaxProcess: number;
|
||||
qaMaxProcess: number;
|
||||
pgHNSWEfSearch: number;
|
||||
oneapiUrl?: string;
|
||||
chatApiKey?: string;
|
||||
};
|
||||
|
||||
// declare global {
|
||||
|
||||
@@ -19,6 +19,7 @@ export type BillSchemaType = {
|
||||
datasetSize?: number;
|
||||
extraPoints?: number;
|
||||
};
|
||||
username: string;
|
||||
};
|
||||
|
||||
export type ChatModuleUsageType = {
|
||||
|
||||
@@ -2,9 +2,9 @@ import type { UserModelSchema } from '@fastgpt/global/support/user/type';
|
||||
import OpenAI from '@fastgpt/global/core/ai';
|
||||
|
||||
export const openaiBaseUrl = process.env.OPENAI_BASE_URL || 'https://api.openai.com/v1';
|
||||
export const baseUrl = process.env.ONEAPI_URL || openaiBaseUrl;
|
||||
export const baseUrl = global?.systemEnv?.oneapiUrl || process.env.ONEAPI_URL || openaiBaseUrl;
|
||||
|
||||
export const systemAIChatKey = process.env.CHAT_API_KEY || '';
|
||||
export const systemAIChatKey = global?.systemEnv?.chatApiKey || process.env.CHAT_API_KEY || '';
|
||||
|
||||
export const getAIApi = (props?: {
|
||||
userKey?: UserModelSchema['openaiAccount'];
|
||||
|
||||
125
packages/web/components/common/DateRangePicker/index.tsx
Normal file
125
packages/web/components/common/DateRangePicker/index.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import React, { useState, useMemo, useRef } from 'react';
|
||||
import { Box, Card, Flex, useTheme, useOutsideClick, Button } from '@chakra-ui/react';
|
||||
import { addDays, format } from 'date-fns';
|
||||
import { type DateRange, DayPicker } from 'react-day-picker';
|
||||
import 'react-day-picker/dist/style.css';
|
||||
import zhCN from 'date-fns/locale/zh-CN';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import MyIcon from '../Icon';
|
||||
|
||||
const DateRangePicker = ({
|
||||
onChange,
|
||||
onSuccess,
|
||||
position = 'bottom',
|
||||
defaultDate = {
|
||||
from: addDays(new Date(), -30),
|
||||
to: new Date()
|
||||
}
|
||||
}: {
|
||||
onChange?: (date: DateRange) => void;
|
||||
onSuccess?: (date: DateRange) => void;
|
||||
position?: 'bottom' | 'top';
|
||||
defaultDate?: DateRange;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const OutRangeRef = useRef(null);
|
||||
const [range, setRange] = useState<DateRange | undefined>(defaultDate);
|
||||
const [showSelected, setShowSelected] = useState(false);
|
||||
|
||||
const formatSelected = useMemo(() => {
|
||||
if (range?.from && range.to) {
|
||||
return `${format(range.from, 'y-MM-dd')} ~ ${format(range.to, 'y-MM-dd')}`;
|
||||
}
|
||||
return `${format(new Date(), 'y-MM-dd')} ~ ${format(new Date(), 'y-MM-dd')}`;
|
||||
}, [range]);
|
||||
|
||||
useOutsideClick({
|
||||
ref: OutRangeRef,
|
||||
handler: () => {
|
||||
setShowSelected(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Box position={'relative'} ref={OutRangeRef}>
|
||||
<Flex
|
||||
border={theme.borders.base}
|
||||
px={3}
|
||||
py={1}
|
||||
borderRadius={'sm'}
|
||||
cursor={'pointer'}
|
||||
bg={'myWhite.600'}
|
||||
fontSize={'sm'}
|
||||
onClick={() => setShowSelected(true)}
|
||||
>
|
||||
<Box>{formatSelected}</Box>
|
||||
<MyIcon ml={2} name={'date'} w={'16px'} color={'myGray.600'} />
|
||||
</Flex>
|
||||
{showSelected && (
|
||||
<Card
|
||||
position={'absolute'}
|
||||
zIndex={1}
|
||||
css={{
|
||||
'--rdp-background-color': '#d6e8ff',
|
||||
' --rdp-accent-color': '#0000ff'
|
||||
}}
|
||||
{...(position === 'top'
|
||||
? {
|
||||
bottom: '40px'
|
||||
}
|
||||
: {})}
|
||||
>
|
||||
<DayPicker
|
||||
locale={zhCN}
|
||||
id="test"
|
||||
mode="range"
|
||||
defaultMonth={defaultDate.to}
|
||||
selected={range}
|
||||
disabled={[
|
||||
{ from: new Date(2022, 3, 1), to: addDays(new Date(), -90) },
|
||||
{ from: addDays(new Date(), 1), to: new Date(2099, 1, 1) }
|
||||
]}
|
||||
onSelect={(date) => {
|
||||
if (date?.from === undefined) {
|
||||
date = {
|
||||
from: range?.from,
|
||||
to: range?.from
|
||||
};
|
||||
}
|
||||
if (date?.to === undefined) {
|
||||
date.to = date.from;
|
||||
}
|
||||
setRange(date);
|
||||
onChange && onChange(date);
|
||||
}}
|
||||
footer={
|
||||
<Flex justifyContent={'flex-end'}>
|
||||
<Button
|
||||
variant={'outline'}
|
||||
size={'sm'}
|
||||
mr={2}
|
||||
onClick={() => setShowSelected(false)}
|
||||
>
|
||||
{t('common.Close')}
|
||||
</Button>
|
||||
<Button
|
||||
size={'sm'}
|
||||
onClick={() => {
|
||||
onSuccess && onSuccess(range || defaultDate);
|
||||
setShowSelected(false);
|
||||
}}
|
||||
>
|
||||
{t('common.Confirm')}
|
||||
</Button>
|
||||
</Flex>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DateRangePicker;
|
||||
export type DateRangeType = DateRange;
|
||||
45
packages/web/components/common/MyLoading/index.tsx
Normal file
45
packages/web/components/common/MyLoading/index.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { Spinner, Flex, Box } from '@chakra-ui/react';
|
||||
|
||||
const Loading = ({
|
||||
fixed = true,
|
||||
text = '',
|
||||
bg = 'rgba(255,255,255,0.5)',
|
||||
zIndex = 1000
|
||||
}: {
|
||||
fixed?: boolean;
|
||||
text?: string;
|
||||
bg?: string;
|
||||
zIndex?: number;
|
||||
}) => {
|
||||
return (
|
||||
<Flex
|
||||
position={fixed ? 'fixed' : 'absolute'}
|
||||
zIndex={zIndex}
|
||||
bg={bg}
|
||||
borderRadius={'md'}
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
alignItems={'center'}
|
||||
justifyContent={'center'}
|
||||
flexDirection={'column'}
|
||||
>
|
||||
<Spinner
|
||||
thickness="4px"
|
||||
speed="0.65s"
|
||||
emptyColor="myGray.100"
|
||||
color="primary.500"
|
||||
size="xl"
|
||||
/>
|
||||
{text && (
|
||||
<Box mt={2} color="primary.600" fontWeight={'bold'}>
|
||||
{text}
|
||||
</Box>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
130
packages/web/components/common/MySelect/index.tsx
Normal file
130
packages/web/components/common/MySelect/index.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import React, { useRef, forwardRef, useMemo } from 'react';
|
||||
import {
|
||||
Menu,
|
||||
MenuList,
|
||||
MenuItem,
|
||||
Button,
|
||||
useDisclosure,
|
||||
MenuButton,
|
||||
Box,
|
||||
css
|
||||
} from '@chakra-ui/react';
|
||||
import type { ButtonProps, MenuItemProps } from '@chakra-ui/react';
|
||||
import { ChevronDownIcon } from '@chakra-ui/icons';
|
||||
|
||||
export type SelectProps = ButtonProps & {
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
list: {
|
||||
alias?: string;
|
||||
label: string | React.ReactNode;
|
||||
value: string;
|
||||
}[];
|
||||
onchange?: (val: any) => void;
|
||||
};
|
||||
|
||||
const MySelect = (
|
||||
{ placeholder, value, width = '100%', list, onchange, ...props }: SelectProps,
|
||||
selectRef: any
|
||||
) => {
|
||||
const ref = useRef<HTMLButtonElement>(null);
|
||||
const menuItemStyles: MenuItemProps = {
|
||||
borderRadius: 'sm',
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
_hover: {
|
||||
backgroundColor: 'myWhite.600'
|
||||
},
|
||||
_notLast: {
|
||||
mb: 2
|
||||
}
|
||||
};
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const selectItem = useMemo(() => list.find((item) => item.value === value), [list, value]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
css={css({
|
||||
'& div': {
|
||||
width: 'auto !important'
|
||||
}
|
||||
})}
|
||||
>
|
||||
<Menu
|
||||
autoSelect={false}
|
||||
isOpen={isOpen}
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
strategy={'fixed'}
|
||||
matchWidth
|
||||
>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
ref={ref}
|
||||
width={width}
|
||||
px={3}
|
||||
rightIcon={<ChevronDownIcon />}
|
||||
variant={'whitePrimary'}
|
||||
textAlign={'left'}
|
||||
_active={{
|
||||
transform: 'none'
|
||||
}}
|
||||
{...(isOpen
|
||||
? {
|
||||
boxShadow: '0px 0px 4px #A8DBFF',
|
||||
borderColor: 'primary.500'
|
||||
}
|
||||
: {})}
|
||||
{...props}
|
||||
>
|
||||
{selectItem?.alias || selectItem?.label || placeholder}
|
||||
</MenuButton>
|
||||
|
||||
<MenuList
|
||||
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'}
|
||||
p={'6px'}
|
||||
border={'1px solid #fff'}
|
||||
boxShadow={
|
||||
'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'
|
||||
}
|
||||
zIndex={99}
|
||||
maxH={'40vh'}
|
||||
overflowY={'auto'}
|
||||
>
|
||||
{list.map((item) => (
|
||||
<MenuItem
|
||||
key={item.value}
|
||||
{...menuItemStyles}
|
||||
{...(value === item.value
|
||||
? {
|
||||
color: 'primary.500',
|
||||
bg: 'myWhite.300'
|
||||
}
|
||||
: {})}
|
||||
onClick={() => {
|
||||
if (onchange && value !== item.value) {
|
||||
onchange(item.value);
|
||||
}
|
||||
}}
|
||||
whiteSpace={'pre-wrap'}
|
||||
>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(forwardRef(MySelect));
|
||||
31
packages/web/hooks/useLoading.tsx
Normal file
31
packages/web/hooks/useLoading.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import LoadingComponent from '../components/common/MyLoading';
|
||||
|
||||
export const useLoading = (props?: { defaultLoading: boolean }) => {
|
||||
const [isLoading, setIsLoading] = useState(props?.defaultLoading || false);
|
||||
|
||||
const Loading = useCallback(
|
||||
({
|
||||
loading,
|
||||
fixed = true,
|
||||
text = '',
|
||||
zIndex
|
||||
}: {
|
||||
loading?: boolean;
|
||||
fixed?: boolean;
|
||||
text?: string;
|
||||
zIndex?: number;
|
||||
}): JSX.Element | null => {
|
||||
return isLoading || loading ? (
|
||||
<LoadingComponent fixed={fixed} text={text} zIndex={zIndex} />
|
||||
) : null;
|
||||
},
|
||||
[isLoading]
|
||||
);
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
Loading
|
||||
};
|
||||
};
|
||||
213
packages/web/hooks/usePagination.tsx
Normal file
213
packages/web/hooks/usePagination.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import { IconButton, Flex, Box, Input } from '@chakra-ui/react';
|
||||
import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
|
||||
import { throttle } from 'lodash';
|
||||
import { useToast } from './useToast';
|
||||
|
||||
const thresholdVal = 100;
|
||||
|
||||
type PagingData<T> = {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
data: T[];
|
||||
total?: number;
|
||||
};
|
||||
|
||||
export function usePagination<T = any>({
|
||||
api,
|
||||
pageSize = 10,
|
||||
params = {},
|
||||
defaultRequest = true,
|
||||
type = 'button',
|
||||
onChange,
|
||||
elementRef
|
||||
}: {
|
||||
api: (data: any) => any;
|
||||
pageSize?: number;
|
||||
params?: Record<string, any>;
|
||||
defaultRequest?: boolean;
|
||||
type?: 'button' | 'scroll';
|
||||
onChange?: (pageNum: number) => void;
|
||||
elementRef?: React.RefObject<HTMLDivElement>;
|
||||
}) {
|
||||
const { toast } = useToast();
|
||||
const [pageNum, setPageNum] = useState(1);
|
||||
const pageNumRef = useRef(pageNum);
|
||||
pageNumRef.current = pageNum;
|
||||
const [total, setTotal] = useState(0);
|
||||
const totalRef = useRef(total);
|
||||
totalRef.current = total;
|
||||
const [data, setData] = useState<T[]>([]);
|
||||
const dataLengthRef = useRef(data.length);
|
||||
dataLengthRef.current = data.length;
|
||||
const maxPage = useMemo(() => Math.ceil(total / pageSize) || 1, [pageSize, total]);
|
||||
|
||||
const { mutate, isLoading } = useMutation({
|
||||
mutationFn: async (num: number = pageNum) => {
|
||||
try {
|
||||
const res: PagingData<T> = await api({
|
||||
pageNum: num,
|
||||
pageSize,
|
||||
...params
|
||||
});
|
||||
setPageNum(num);
|
||||
res.total !== undefined && setTotal(res.total);
|
||||
if (type === 'scroll') {
|
||||
setData((prevData) => [...prevData, ...res.data]);
|
||||
} else {
|
||||
setData(res.data);
|
||||
}
|
||||
onChange && onChange(num);
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: error?.message || '获取数据异常',
|
||||
status: 'error'
|
||||
});
|
||||
console.log(error);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
const Pagination = useCallback(() => {
|
||||
return (
|
||||
<Flex alignItems={'center'} justifyContent={'end'}>
|
||||
<IconButton
|
||||
isDisabled={pageNum === 1}
|
||||
icon={<ArrowBackIcon />}
|
||||
aria-label={'left'}
|
||||
size={'smSquare'}
|
||||
isLoading={isLoading}
|
||||
onClick={() => mutate(pageNum - 1)}
|
||||
/>
|
||||
<Flex mx={2} alignItems={'center'}>
|
||||
<Input
|
||||
defaultValue={pageNum}
|
||||
w={'50px'}
|
||||
h={'30px'}
|
||||
size={'xs'}
|
||||
type={'number'}
|
||||
min={1}
|
||||
max={maxPage}
|
||||
onBlur={(e) => {
|
||||
const val = +e.target.value;
|
||||
if (val === pageNum) return;
|
||||
if (val >= maxPage) {
|
||||
mutate(maxPage);
|
||||
} else if (val < 1) {
|
||||
mutate(1);
|
||||
} else {
|
||||
mutate(+e.target.value);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
// @ts-ignore
|
||||
const val = +e.target.value;
|
||||
if (val && e.keyCode === 13) {
|
||||
if (val === pageNum) return;
|
||||
if (val >= maxPage) {
|
||||
mutate(maxPage);
|
||||
} else if (val < 1) {
|
||||
mutate(1);
|
||||
} else {
|
||||
mutate(val);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box mx={2}>/</Box>
|
||||
{maxPage}
|
||||
</Flex>
|
||||
<IconButton
|
||||
isDisabled={pageNum === maxPage}
|
||||
icon={<ArrowForwardIcon />}
|
||||
aria-label={'left'}
|
||||
size={'sm'}
|
||||
isLoading={isLoading}
|
||||
w={'28px'}
|
||||
h={'28px'}
|
||||
onClick={() => mutate(pageNum + 1)}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
}, [isLoading, maxPage, mutate, pageNum]);
|
||||
|
||||
const ScrollData = useCallback(
|
||||
({ children, ...props }: { children: React.ReactNode }) => {
|
||||
const loadText = useMemo(() => {
|
||||
if (isLoading) return '请求中……';
|
||||
if (total <= data.length) return '已加载全部';
|
||||
return '点击加载更多';
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box {...props} ref={elementRef} overflow={'overlay'}>
|
||||
{children}
|
||||
<Box
|
||||
mt={2}
|
||||
fontSize={'xs'}
|
||||
color={'blackAlpha.500'}
|
||||
textAlign={'center'}
|
||||
cursor={loadText === '点击加载更多' ? 'pointer' : 'default'}
|
||||
onClick={() => {
|
||||
if (loadText !== '点击加载更多') return;
|
||||
mutate(pageNum + 1);
|
||||
}}
|
||||
>
|
||||
{loadText}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
[data.length, isLoading, mutate, pageNum, total]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!elementRef?.current || type !== 'scroll') return;
|
||||
|
||||
const scrolling = throttle((e: Event) => {
|
||||
const element = e.target as HTMLDivElement;
|
||||
if (!element) return;
|
||||
// 当前滚动位置
|
||||
const scrollTop = element.scrollTop;
|
||||
// 可视高度
|
||||
const clientHeight = element.clientHeight;
|
||||
// 内容总高度
|
||||
const scrollHeight = element.scrollHeight;
|
||||
// 判断是否滚动到底部
|
||||
if (
|
||||
scrollTop + clientHeight + thresholdVal >= scrollHeight &&
|
||||
dataLengthRef.current < totalRef.current
|
||||
) {
|
||||
mutate(pageNumRef.current + 1);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
const handleScroll = (e: Event) => {
|
||||
scrolling(e);
|
||||
};
|
||||
|
||||
elementRef.current.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
elementRef.current?.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, [elementRef, mutate, pageNum, type, total, data.length]);
|
||||
|
||||
useEffect(() => {
|
||||
defaultRequest && mutate(1);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
pageNum,
|
||||
pageSize,
|
||||
total,
|
||||
data,
|
||||
setData,
|
||||
isLoading,
|
||||
Pagination,
|
||||
ScrollData,
|
||||
getData: mutate
|
||||
};
|
||||
}
|
||||
@@ -26,9 +26,15 @@
|
||||
"@lexical/react": "0.12.6",
|
||||
"papaparse": "^5.4.1",
|
||||
"@lexical/utils": "0.12.6",
|
||||
"@lexical/text": "0.12.6"
|
||||
"@lexical/text": "0.12.6",
|
||||
"date-fns": "2.30.0",
|
||||
"react-day-picker": "^8.7.1",
|
||||
"lodash": "^4.17.21",
|
||||
"@tanstack/react-query": "^4.24.10",
|
||||
"dayjs": "^1.11.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/react": "18.2.0",
|
||||
"@types/papaparse": "^5.3.7",
|
||||
"@types/react-dom": "18.2.0",
|
||||
|
||||
Reference in New Issue
Block a user