mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-30 10:28:42 +00:00
feat: new app page
This commit is contained in:
archer
160
client/src/components/APIKeyModal/index.tsx
Normal file
160
client/src/components/APIKeyModal/index.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
Flex,
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
TableContainer,
|
||||
IconButton
|
||||
} from '@chakra-ui/react';
|
||||
import { getOpenApiKeys, createAOpenApiKey, delOpenApiById } from '@/api/openapi';
|
||||
import { useQuery, useMutation } from '@tanstack/react-query';
|
||||
import { useLoading } from '@/hooks/useLoading';
|
||||
import dayjs from 'dayjs';
|
||||
import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
|
||||
import { getErrText, useCopyData } from '@/utils/tools';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import MyIcon from '../Icon';
|
||||
|
||||
const APIKeyModal = ({ onClose }: { onClose: () => void }) => {
|
||||
const { Loading } = useLoading();
|
||||
const { toast } = useToast();
|
||||
const {
|
||||
data: apiKeys = [],
|
||||
isLoading: isGetting,
|
||||
refetch
|
||||
} = useQuery(['getOpenApiKeys'], getOpenApiKeys);
|
||||
const [apiKey, setApiKey] = useState('');
|
||||
const { copyData } = useCopyData();
|
||||
|
||||
const { mutate: onclickCreateApiKey, isLoading: isCreating } = useMutation({
|
||||
mutationFn: () => createAOpenApiKey(),
|
||||
onSuccess(res) {
|
||||
setApiKey(res);
|
||||
refetch();
|
||||
},
|
||||
onError(err) {
|
||||
toast({
|
||||
status: 'warning',
|
||||
title: getErrText(err)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const { mutate: onclickRemove, isLoading: isDeleting } = useMutation({
|
||||
mutationFn: async (id: string) => delOpenApiById(id),
|
||||
onSuccess() {
|
||||
refetch();
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal isOpen onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent w={'600px'} maxW={'90vw'} position={'relative'}>
|
||||
<Box py={3} px={5}>
|
||||
<Box fontWeight={'bold'} fontSize={'2xl'}>
|
||||
API 秘钥管理
|
||||
</Box>
|
||||
<Box fontSize={'sm'} color={'myGray.600'}>
|
||||
如果你不想 API 秘钥被滥用，请勿将秘钥直接放置在前端使用~
|
||||
</Box>
|
||||
</Box>
|
||||
<ModalCloseButton />
|
||||
<ModalBody minH={'300px'} maxH={['70vh', '500px']} overflow={'overlay'}>
|
||||
<TableContainer mt={2} position={'relative'}>
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Api Key</Th>
|
||||
<Th>创建时间</Th>
|
||||
<Th>最后一次使用时间</Th>
|
||||
<Th />
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody fontSize={'sm'}>
|
||||
{apiKeys.map(({ id, apiKey, createTime, lastUsedTime }) => (
|
||||
<Tr key={id}>
|
||||
<Td>{apiKey}</Td>
|
||||
<Td>{dayjs(createTime).format('YYYY/MM/DD HH:mm:ss')}</Td>
|
||||
<Td>
|
||||
{lastUsedTime
|
||||
? dayjs(lastUsedTime).format('YYYY/MM/DD HH:mm:ss')
|
||||
: '没有使用过'}
|
||||
</Td>
|
||||
<Td>
|
||||
<IconButton
|
||||
icon={<DeleteIcon />}
|
||||
size={'xs'}
|
||||
aria-label={'delete'}
|
||||
variant={'base'}
|
||||
colorScheme={'gray'}
|
||||
onClick={() => onclickRemove(id)}
|
||||
/>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button
|
||||
variant="base"
|
||||
leftIcon={<AddIcon color={'myGray.600'} fontSize={'sm'} />}
|
||||
onClick={() => onclickCreateApiKey()}
|
||||
>
|
||||
新建秘钥
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
|
||||
<Loading loading={isGetting || isCreating || isDeleting} fixed={false} />
|
||||
</ModalContent>
|
||||
<Modal isOpen={!!apiKey} onClose={() => setApiKey('')}>
|
||||
<ModalOverlay />
|
||||
<ModalContent w={'400px'} maxW={'90vw'}>
|
||||
<Box py={3} px={5}>
|
||||
<Box fontWeight={'bold'} fontSize={'2xl'}>
|
||||
新的 API 秘钥
|
||||
</Box>
|
||||
<Box fontSize={'sm'} color={'myGray.600'}>
|
||||
请保管好你的秘钥，秘钥不会再次展示~
|
||||
</Box>
|
||||
</Box>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Flex
|
||||
bg={'myGray.100'}
|
||||
px={3}
|
||||
py={2}
|
||||
cursor={'pointer'}
|
||||
onClick={() => copyData(apiKey)}
|
||||
>
|
||||
<Box flex={1}>{apiKey}</Box>
|
||||
<MyIcon name={'copy'} w={'16px'}></MyIcon>
|
||||
</Flex>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button variant="base" onClick={() => setApiKey('')}>
|
||||
好的
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default APIKeyModal;
|
||||
1
client/src/components/Icon/icons/apikey.svg
Normal file
1
client/src/components/Icon/icons/apikey.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686969412308" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3481" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M517.864056 487.834624c-56.774051-54.213739-58.850339-144.187937-4.6366-200.960964 54.212716-56.773028 144.187937-58.849316 200.960964-4.6366 56.775074 54.213739 58.850339 144.186913 4.6366 200.960964C664.613328 539.972075 574.639131 542.048363 517.864056 487.834624zM687.194626 452.994118c37.533848-39.308261 36.09508-101.596909-3.210112-139.128711-39.304168-37.531801-101.593839-36.094056-139.127687 3.211135-37.532825 39.307238-36.093033 101.593839 3.212158 139.125641C587.374176 493.736031 649.660778 492.302379 687.194626 452.994118zM479.104287 670.917406l-101.495602 106.289792c26.206872 25.024953 27.167756 66.540486 2.14178 92.749404-25.028023 26.209942-66.543555 27.16571-92.750427 2.140757l-58.361199 53.027727c0 0-68.750827 11.100826-100.379175-19.101033-31.630395-30.205952-37.865399-112.721271-37.865399-112.721271l246.37427-258.302951c-63.173808-117.608581-47.24707-267.162736 49.939389-368.939747 36.517705-38.242999 80.346933-65.156976 127.165238-81.040734l1.084705 46.269813c-35.443233 14.07967-68.566632 35.596729-96.618525 64.973804-80.271208 84.064604-96.099708 205.865671-49.433876 305.083393l23.075555 39.163975L146.090774 798.015106c0 0 0.593518 49.77873 17.242709 65.677838 14.888082 14.216793 61.832254 9.828856 61.832254 9.828856l60.407812-63.260789 31.631418 30.203906c8.741082 8.346085 22.570042 8.030907 30.91715-0.711198 8.347109-8.742105 8.026814-22.571065-0.713244-30.91715l-31.632441-30.207999 156.456355-163.846672 39.009456 22.481014c101.259218 42.039465 222.201731 20.61041 302.474986-63.453171 104.251366-109.178585 100.260471-282.211477-8.91709-386.464889-33.591049-32.075533-73.260537-53.829999-115.093295-65.49262l-1.030469-45.153386c53.197596 12.471033 103.945397 38.547944 146.323577 79.015611 126.645398 120.931257 131.277906 321.649698 10.344602 448.296119C748.158093 705.787588 599.500355 728.598106 479.104287 670.917406z" p-id="3482"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683254594671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1491" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M46.95735957 106.20989621h930.08528086v158.0067668H46.95735957zM46.95735957 353.99323467v608.68515424h930.08528086V353.99323467H46.95735957z m346.5375657 418.35882335L328.85579413 835.19565715l-165.18889183-172.37101684 165.18889183-172.37101686 64.63913114 62.84359914-105.93635373 109.52741772 105.93635373 109.52741771z m127.48273175 62.84359913l-86.18550917-23.34190854 87.98104116-330.37778366 86.1855077 23.34191003L520.97765702 835.19565715z m193.91739489 0l-64.63913114-62.84359913 105.93635372-109.52741771-105.93635372-109.52741772 64.63913114-62.84359914 165.18889182 172.37101686-165.18889182 172.37101684z" p-id="1492"></path></svg>
|
||||
|
Before Width: | Height: | Size: 976 B |
@@ -6,7 +6,6 @@ const map = {
|
||||
model: require('./icons/model.svg').default,
|
||||
copy: require('./icons/copy.svg').default,
|
||||
chatSend: require('./icons/chatSend.svg').default,
|
||||
develop: require('./icons/develop.svg').default,
|
||||
user: require('./icons/user.svg').default,
|
||||
delete: require('./icons/delete.svg').default,
|
||||
withdraw: require('./icons/withdraw.svg').default,
|
||||
@@ -34,7 +33,8 @@ const map = {
|
||||
text: require('./icons/text.svg').default,
|
||||
history: require('./icons/history.svg').default,
|
||||
kbTest: require('./icons/kbTest.svg').default,
|
||||
date: require('./icons/date.svg').default
|
||||
date: require('./icons/date.svg').default,
|
||||
apikey: require('./icons/apikey.svg').default
|
||||
};
|
||||
|
||||
export type IconName = keyof typeof map;
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
type TIconfont = {
|
||||
name: string;
|
||||
color?: string;
|
||||
width?: number | string;
|
||||
height?: number | string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
function Iconfont({ name, color = 'inherit', width = 16, height = 16, className = '' }: TIconfont) {
|
||||
const style = {
|
||||
fill: color,
|
||||
width,
|
||||
height
|
||||
};
|
||||
|
||||
return (
|
||||
<svg className={`icon ${className}`} aria-hidden="true" style={style}>
|
||||
<use xlinkHref={`#${name}`}></use>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Iconfont;
|
||||
@@ -44,12 +44,6 @@ const Navbar = ({ unread }: { unread: number }) => {
|
||||
link: '/model/share',
|
||||
activeLink: ['/model/share']
|
||||
},
|
||||
{
|
||||
label: '开发',
|
||||
icon: 'develop',
|
||||
link: '/openapi',
|
||||
activeLink: ['/openapi']
|
||||
},
|
||||
{
|
||||
label: '账号',
|
||||
icon: 'user',
|
||||
|
||||
81
client/src/components/Select/index.tsx
Normal file
81
client/src/components/Select/index.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import { Menu, MenuButton, MenuList, MenuItem, Button, useDisclosure } from '@chakra-ui/react';
|
||||
import type { ButtonProps } from '@chakra-ui/react';
|
||||
import { ChevronDownIcon } from '@chakra-ui/icons';
|
||||
interface Props extends ButtonProps {
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
list: {
|
||||
label: string;
|
||||
id: string;
|
||||
}[];
|
||||
onchange?: (val: string) => void;
|
||||
}
|
||||
|
||||
const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props }: Props) => {
|
||||
const menuItemStyles = {
|
||||
borderRadius: 'sm',
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
_hover: {
|
||||
backgroundColor: 'myWhite.600'
|
||||
}
|
||||
};
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
return (
|
||||
<Menu autoSelect={false} onOpen={onOpen} onClose={onClose}>
|
||||
<MenuButton as={'span'}>
|
||||
<Button
|
||||
width={width}
|
||||
px={3}
|
||||
variant={'base'}
|
||||
display={'flex'}
|
||||
alignItems={'center'}
|
||||
justifyContent={'space-between'}
|
||||
{...(isOpen
|
||||
? {
|
||||
boxShadow: '0px 0px 4px #A8DBFF',
|
||||
borderColor: 'myBlue.600'
|
||||
}
|
||||
: {})}
|
||||
{...props}
|
||||
>
|
||||
{list.find((item) => item.id === value)?.label || placeholder}
|
||||
<ChevronDownIcon />
|
||||
</Button>
|
||||
</MenuButton>
|
||||
<MenuList
|
||||
minW={
|
||||
Array.isArray(width) ? width.map((item) => `${item} !important`) : `${width} !important`
|
||||
}
|
||||
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}
|
||||
>
|
||||
{list.map((item) => (
|
||||
<MenuItem
|
||||
key={item.id}
|
||||
{...menuItemStyles}
|
||||
{...(value === item.id
|
||||
? {
|
||||
color: 'myBlue.600'
|
||||
}
|
||||
: {})}
|
||||
onClick={() => {
|
||||
if (onchange && value !== item.id) {
|
||||
onchange(item.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
||||
export default MySelect;
|
||||
@@ -9,28 +9,30 @@ import {
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
const MySlider = ({
|
||||
markList,
|
||||
markList = [],
|
||||
setVal,
|
||||
activeVal,
|
||||
max = 100,
|
||||
min = 0,
|
||||
step = 1
|
||||
step = 1,
|
||||
width = '100%'
|
||||
}: {
|
||||
markList: {
|
||||
markList?: {
|
||||
label: string | number;
|
||||
value: number;
|
||||
}[];
|
||||
activeVal?: number;
|
||||
activeVal: number;
|
||||
setVal: (index: number) => void;
|
||||
max?: number;
|
||||
min?: number;
|
||||
step?: number;
|
||||
width?: string | string[] | number | number[];
|
||||
}) => {
|
||||
const startEndPointStyle = {
|
||||
content: '""',
|
||||
borderRadius: '10px',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
borderRadius: '6px',
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
backgroundColor: '#ffffff',
|
||||
border: '2px solid #D7DBE2',
|
||||
position: 'absolute',
|
||||
@@ -44,37 +46,62 @@ const MySlider = ({
|
||||
}, [activeVal, markList]);
|
||||
|
||||
return (
|
||||
<Slider max={max} min={min} step={step} size={'lg'} value={value} onChange={setVal}>
|
||||
{markList.map((item, i) => (
|
||||
<Slider
|
||||
max={max}
|
||||
min={min}
|
||||
step={step}
|
||||
size={'lg'}
|
||||
value={activeVal}
|
||||
width={width}
|
||||
onChange={setVal}
|
||||
>
|
||||
{markList?.map((item, i) => (
|
||||
<SliderMark
|
||||
key={item.value}
|
||||
value={i}
|
||||
mt={3}
|
||||
value={item.value}
|
||||
fontSize={'sm'}
|
||||
mt={3}
|
||||
whiteSpace={'nowrap'}
|
||||
transform={'translateX(-50%)'}
|
||||
{...(activeVal === item.value ? { color: 'myBlue.500', fontWeight: 'bold' } : {})}
|
||||
color={'myGray.600'}
|
||||
>
|
||||
<Box px={3} cursor={'pointer'}>
|
||||
{item.label}
|
||||
</Box>
|
||||
</SliderMark>
|
||||
))}
|
||||
<SliderMark
|
||||
value={activeVal}
|
||||
textAlign="center"
|
||||
bg="myBlue.600"
|
||||
color="white"
|
||||
px={1}
|
||||
minW={'18px'}
|
||||
w={'auto'}
|
||||
h={'18px'}
|
||||
borderRadius={'18px'}
|
||||
fontSize={'xs'}
|
||||
transform={'translate(-50%, -170%)'}
|
||||
boxSizing={'border-box'}
|
||||
>
|
||||
{activeVal}
|
||||
</SliderMark>
|
||||
<SliderTrack
|
||||
bg={'#EAEDF3'}
|
||||
overflow={'visible'}
|
||||
h={'4px'}
|
||||
_before={{
|
||||
...startEndPointStyle,
|
||||
left: '-5px'
|
||||
left: '-3px'
|
||||
}}
|
||||
_after={{
|
||||
...startEndPointStyle,
|
||||
right: '-5px'
|
||||
right: '-3px'
|
||||
}}
|
||||
>
|
||||
<SliderFilledTrack />
|
||||
<SliderFilledTrack bg={'myBlue.600'} />
|
||||
</SliderTrack>
|
||||
<SliderThumb border={'2.5px solid'} borderColor={'myBlue.500'}></SliderThumb>
|
||||
<SliderThumb border={'3px solid'} borderColor={'myBlue.600'}></SliderThumb>
|
||||
</Slider>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -24,13 +24,13 @@ const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
|
||||
return {
|
||||
fontSize: 'md',
|
||||
outP: '4px',
|
||||
inlineP: 2
|
||||
inlineP: 1
|
||||
};
|
||||
case 'lg':
|
||||
return {
|
||||
fontSize: 'lg',
|
||||
outP: '5px',
|
||||
inlineP: 3
|
||||
inlineP: 2
|
||||
};
|
||||
}
|
||||
}, [size]);
|
||||
|
||||
Reference in New Issue
Block a user