Updae theme and fix some bug (#1711)

This commit is contained in:
Archer
2024-06-07 12:54:30 +08:00
committed by GitHub
parent 19c8a06d51
commit b20d075d35
153 changed files with 1587 additions and 1436 deletions

View File

@@ -15,10 +15,6 @@ import {
useTheme,
Link,
Input,
MenuList,
MenuItem,
MenuButton,
Menu,
IconButton
} from '@chakra-ui/react';
import {
@@ -31,7 +27,7 @@ import type { EditApiKeyProps } from '@/global/support/openapi/api.d';
import { useQuery, useMutation } from '@tanstack/react-query';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import dayjs from 'dayjs';
import { AddIcon, QuestionOutlineIcon } from '@chakra-ui/icons';
import { AddIcon } from '@chakra-ui/icons';
import { useCopyData } from '@/web/common/hooks/useCopyData';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useTranslation } from 'next-i18next';
@@ -39,11 +35,12 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { useForm } from 'react-hook-form';
import { useRequest } from '@fastgpt/web/hooks/useRequest';
import MyTooltip from '@/components/MyTooltip';
import { getDocPath } from '@/web/common/system/doc';
import MyMenu from '@fastgpt/web/components/common/MyMenu';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import { useI18n } from '@/web/context/I18n';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
type EditProps = EditApiKeyProps & { _id?: string };
const defaultEditData: EditProps = {
@@ -91,7 +88,7 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
<Box display={['block', 'flex']} py={[0, 3]} px={5} alignItems={'center'}>
<Box flex={1}>
<Flex alignItems={'flex-end'}>
<Box fontSize={['md', 'xl']} fontWeight={'bold'}>
<Box color={'myGray.900'} fontSize={'lg'}>
{t('support.openapi.Api manager')}
</Box>
{feConfigs?.docUrl && (
@@ -100,18 +97,19 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
target={'_blank'}
ml={1}
color={'primary.500'}
fontSize={'sm'}
>
{t('common.Read document')}
</Link>
)}
</Flex>
<Box fontSize={'sm'} color={'myGray.600'}>
<Box fontSize={'xs'} color={'myGray.600'}>
{tips}
</Box>
</Box>
<Flex
mt={[2, 0]}
bg={'myWhite.600'}
bg={'myGray.100'}
py={2}
px={4}
borderRadius={'md'}
@@ -119,10 +117,10 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
userSelect={'none'}
onClick={() => copyData(baseUrl, t('support.openapi.Copy success'))}
>
<Box border={theme.borders.md} px={2} borderRadius={'md'} fontSize={'sm'}>
<Box border={theme.borders.md} px={2} borderRadius={'md'} fontSize={'xs'}>
{t('support.openapi.Api baseurl')}
</Box>
<Box ml={2} color={'myGray.900'} fontSize={['sm', 'md']}>
<Box ml={2} fontSize={'sm'}>
{baseUrl}
</Box>
</Flex>
@@ -200,21 +198,25 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
}
menuList={[
{
label: t('common.Edit'),
icon: 'edit',
onClick: () =>
setEditData({
_id,
name,
limit,
appId
})
},
{
label: t('common.Delete'),
icon: 'delete',
type: 'danger',
onClick: () => openConfirm(() => onclickRemove(_id))()
children: [
{
label: t('common.Edit'),
icon: 'edit',
onClick: () =>
setEditData({
_id,
name,
limit,
appId
})
},
{
label: t('common.Delete'),
icon: 'delete',
type: 'danger',
onClick: () => openConfirm(() => onclickRemove(_id))()
}
]
}
]}
/>
@@ -248,10 +250,8 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
iconSrc="/imgs/modal/key.svg"
title={
<Box>
<Box fontWeight={'bold'} fontSize={'xl'}>
{t('support.openapi.New api key')}
</Box>
<Box fontSize={'sm'} color={'myGray.600'}>
<Box fontWeight={'bold'}>{t('support.openapi.New api key')}</Box>
<Box fontSize={'xs'} color={'myGray.600'}>
{t('support.openapi.New api key tip')}
</Box>
</Box>
@@ -332,7 +332,7 @@ function EditKeyModal({
>
<ModalBody>
<Flex alignItems={'center'}>
<Box flex={'0 0 90px'}>{t('Name')}:</Box>
<FormLabel flex={'0 0 90px'}>{t('Name')}</FormLabel>
<Input
placeholder={publishT('key alias') || 'key alias'}
maxLength={20}
@@ -344,12 +344,10 @@ function EditKeyModal({
{feConfigs?.isPlus && (
<>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
{t('support.outlink.Max usage points')}:
<MyTooltip label={t('support.outlink.Max usage points tip')}>
<QuestionOutlineIcon ml={1} />
</MyTooltip>
</Flex>
<FormLabel display={'flex'} flex={'0 0 90px'} alignItems={'center'}>
{t('support.outlink.Max usage points')}
<QuestionTip ml={1} label={t('support.outlink.Max usage points tip')}></QuestionTip>
</FormLabel>
<Input
{...register('limit.maxUsagePoints', {
min: -1,
@@ -360,9 +358,7 @@ function EditKeyModal({
/>
</Flex>
<Flex alignItems={'center'} mt={4}>
<Flex flex={'0 0 90px'} alignItems={'center'}>
{t('common.Expired Time')}:
</Flex>
<FormLabel flex={'0 0 90px'}>{t('common.Expired Time')}</FormLabel>
<Input
type="datetime-local"
defaultValue={

View File

@@ -9,6 +9,8 @@ import { Permission } from '@fastgpt/global/support/permission/controller';
const PermissionIconText = ({
permission,
defaultPermission,
w = '1rem',
fontSize = 'mini',
...props
}: {
permission?: `${PermissionTypeEnum}`;
@@ -25,9 +27,9 @@ const PermissionIconText = ({
}, [defaultPermission, permission]);
return PermissionTypeMap[per] ? (
<Flex alignItems={'center'} {...props}>
<MyIcon name={PermissionTypeMap[per]?.iconLight as any} w={'14px'} />
<Box ml={'2px'} lineHeight={1}>
<Flex alignItems={'center'} fontSize={fontSize} {...props}>
<MyIcon name={PermissionTypeMap[per]?.iconLight as any} w={w} />
<Box ml={'2px'} lineHeight={1} fontSize={'xs'}>
{t(PermissionTypeMap[per]?.label)}
</Box>
</Flex>

View File

@@ -93,13 +93,12 @@ export function AddMemberModal({ onClose }: AddModalPropsType) {
p="4"
minH="200px"
>
<InputGroup alignItems="center" h="32px" my="2" py="1">
<InputGroup alignItems="center" size="sm">
<InputLeftElement>
<MyIcon name="common/searchLight" w="16px" color={'myGray.500'} />
</InputLeftElement>
<Input
placeholder="搜索用户名"
fontSize="lg"
bgColor="myGray.50"
onChange={(e) => setSearchText(e.target.value)}
/>
@@ -128,7 +127,6 @@ export function AddMemberModal({ onClose }: AddModalPropsType) {
}}
>
<Checkbox
size="lg"
mr="3"
isChecked={selectedMemberIdList.includes(member.tmbId)}
onChange={onChange}
@@ -167,9 +165,7 @@ export function AddMemberModal({ onClose }: AddModalPropsType) {
_notLast={{ mb: 2 }}
>
<Avatar src={member.avatar} w="24px" />
<Box w="full" fontSize="lg">
{member.memberName}
</Box>
<Box w="full">{member.memberName}</Box>
<MyIcon
name="common/closeLight"
w="16px"
@@ -202,7 +198,7 @@ export function AddMemberModal({ onClose }: AddModalPropsType) {
h={'32px'}
>
{perLabel}
<ChevronDownIcon fontSize={'lg'} />
<ChevronDownIcon fontSize={'md'} />
</Flex>
}
onChange={(v) => setSelectedPermission(v)}

View File

@@ -64,10 +64,13 @@ function ManageModal({ onClose }: ManageModalProps) {
<Tr>
<Th border="none"></Th>
<Th border="none"></Th>
<Th border="none"></Th>
<Th border="none" w={'40px'}>
</Th>
</Tr>
</Thead>
<Tbody>
<Tr h={'10px'} />
{collaboratorList?.map((item) => {
return (
<Tr

View File

@@ -143,6 +143,7 @@ function PermissionSelect({
}
zIndex={99}
overflowY={'auto'}
whiteSpace={'pre-wrap'}
>
{/* The list of single select permissions */}
{permissionSelectList.singleCheckBoxList.map((item) => {
@@ -164,12 +165,14 @@ function PermissionSelect({
: {})}
{...MenuStyle}
onClick={change}
maxW={['70vw', '300px']}
maxW={['70vw', '260px']}
>
<Radio size="lg" isChecked={selectedSingleValue === item.value} />
<Radio isChecked={selectedSingleValue === item.value} />
<Box ml={4}>
<Box>{item.name}</Box>
<Box color={'myGray.500'}>{item.description}</Box>
<Box color={'myGray.500'} fontSize={'mini'}>
{item.description}
</Box>
</Box>
</Flex>
);

View File

@@ -34,7 +34,7 @@ function MemberManger() {
return (
<>
<Flex alignItems="center" flexDirection="row" justifyContent="space-between" w="full">
<Box></Box>
<Box fontSize={'sm'}></Box>
<Flex flexDirection="row" gap="2">
<Button
size="sm"

View File

@@ -97,9 +97,9 @@ function TeamCard() {
py={4}
borderBottom={'1.5px solid'}
borderBottomColor={'myGray.100'}
mb={3}
mb={2}
>
<Box fontSize={['lg', 'xl']} fontWeight={'bold'} alignItems={'center'}>
<Box fontSize={['sm', 'md']} fontWeight={'bold'} alignItems={'center'}>
{userInfo?.team.teamName}
</Box>
{userInfo?.team.role === TeamMemberRoleEnum.owner && (

View File

@@ -1,4 +1,4 @@
import { Box, Button, Flex, IconButton } from '@chakra-ui/react';
import { Box, Button, Flex, IconButton, Text } from '@chakra-ui/react';
import Avatar from '@/components/Avatar';
import { useTranslation } from 'next-i18next';
import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -28,7 +28,7 @@ function TeamList() {
h={'40px'}
borderBottom={'1.5px solid rgba(0, 0, 0, 0.05)'}
>
<Box flex={['0 0 auto', 1]} fontWeight={'bold'} fontSize={['md', 'lg']}>
<Box flex={['0 0 auto', 1]} fontSize={['sm', 'md']}>
{t('common.Team')}
</Box>
{/* if there is no team */}
@@ -73,6 +73,7 @@ function TeamList() {
<Box
flex={'1 0 0'}
w={0}
fontSize={'sm'}
{...(team.role === TeamMemberRoleEnum.owner
? {
fontWeight: 'bold'

View File

@@ -8,7 +8,7 @@ import { getErrText } from '@fastgpt/global/common/error/utils';
import { useRequest } from '@fastgpt/web/hooks/useRequest';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { Box, Button, Flex, Input, ModalBody, ModalFooter } from '@chakra-ui/react';
import MyTooltip from '@/components/MyTooltip';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import Avatar from '@/components/Avatar';
import { postCreateTeam, putUpdateTeam } from '@/web/support/user/team/api';
import { CreateTeamProps } from '@fastgpt/global/support/user/team/controller.d';

View File

@@ -21,7 +21,9 @@ function MemberTable() {
const { t } = useTranslation();
const { members, refetchMembers } = useContextSelector(TeamModalContext, (v) => v);
const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({});
const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({
type: 'delete'
});
const { mutate: onRemoveMember, isLoading: isRemovingMember } = useRequest({
mutationFn: delRemoveMember,
@@ -34,14 +36,14 @@ function MemberTable() {
return (
<MyBox isLoading={isRemovingMember}>
<TableContainer overflow={'unset'}>
<TableContainer overflow={'unset'} fontSize={'sm'}>
<Table overflow={'unset'}>
<Thead bg={'myWhite.400'}>
<Tr>
<Th>{t('common.Username')}</Th>
<Th borderRadius={'none !important'}>{t('common.Username')}</Th>
<Th>{t('user.team.Role')}</Th>
<Th>{t('common.Status')}</Th>
<Th>{t('common.Action')}</Th>
<Th borderRadius={'none !important'}>{t('common.Action')}</Th>
</Tr>
</Thead>
<Tbody>
@@ -67,36 +69,35 @@ function MemberTable() {
Button={
<MenuButton
_hover={{
bg: 'myWhite.600'
color: 'primary.600'
}}
borderRadius={'md'}
px={2}
py={1}
lineHeight={1}
>
<MyIcon
name={'edit'}
cursor={'pointer'}
w="14px"
_hover={{ color: 'primary.500' }}
/>
<MyIcon name={'edit'} cursor={'pointer'} w="1rem" />
</MenuButton>
}
menuList={[
{
label: t('user.team.Remove Member Tip'),
onClick: () =>
openRemoveMember(
() =>
onRemoveMember({
teamId: item.teamId,
memberId: item.tmbId
}),
undefined,
t('user.team.Remove Member Confirm Tip', {
username: item.memberName
})
)()
children: [
{
label: t('user.team.Remove Member Tip'),
onClick: () =>
openRemoveMember(
() =>
onRemoveMember({
teamId: item.teamId,
memberId: item.tmbId
}),
undefined,
t('user.team.Remove Member Confirm Tip', {
username: item.memberName
})
)()
}
]
}
]}
/>

View File

@@ -78,13 +78,13 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
borderColor="myGray.200"
>
<Flex flexDirection="column" p="4">
<InputGroup alignItems="center" h="32px" my="2" py="1">
<InputGroup alignItems="center" size={'sm'}>
<InputLeftElement>
<MyIcon name="common/searchLight" w="16px" color={'myGray.500'} />
</InputLeftElement>
<Input
placeholder="搜索用户名"
fontSize="lg"
fontSize="sm"
bg={'myGray.50'}
onChange={(e) => {
setSearchKey(e.target.value);
@@ -98,7 +98,6 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
py="2"
px={3}
borderRadius={'md'}
fontSize="lg"
alignItems="center"
key={member.tmbId}
cursor={'pointer'}
@@ -112,8 +111,8 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
}
}}
>
<Checkbox isChecked={selected.includes(member)} size="lg" />
<Avatar src={member.avatar} w="24px" />
<Checkbox isChecked={selected.includes(member)} />
<Avatar ml={2} src={member.avatar} w="1.5rem" />
{member.memberName}
</Flex>
);
@@ -135,11 +134,13 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
_hover={{ bg: 'myGray.50' }}
_notLast={{ mb: 2 }}
>
<Avatar src={member.avatar} w="24px" />
<Box w="full" fontSize="lg">
{member.memberName}
</Box>
<CloseButton
<Avatar src={member.avatar} w="1.5rem" />
<Box w="full">{member.memberName}</Box>
<MyIcon
name={'common/closeLight'}
w={'1rem'}
cursor={'pointer'}
_hover={{ color: 'red.600' }}
onClick={() =>
setSelected([...selected.filter((item) => item.tmbId != member.tmbId)])
}

View File

@@ -47,7 +47,7 @@ function PermissionManage() {
justifyContent={'space-between'}
>
<Flex>
<Box fontSize={['md', 'lg']} fontWeight={'bold'} alignItems={'center'}>
<Box fontSize={['sm', 'md']} fontWeight={'bold'} alignItems={'center'}>
{t('user.team.role.Admin')}
</Box>
<Box

View File

@@ -2,7 +2,7 @@ import React from 'react';
import { Box, Button, Flex, Image, useDisclosure } from '@chakra-ui/react';
import { useUserStore } from '@/web/support/user/useUserStore';
import { useTranslation } from 'next-i18next';
import MyTooltip from '@/components/MyTooltip';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import dynamic from 'next/dynamic';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useToast } from '@fastgpt/web/hooks/useToast';

View File

@@ -6,9 +6,9 @@ import { Box, Flex, Grid } from '@chakra-ui/react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useTranslation } from 'next-i18next';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import { useRouter } from 'next/router';
import { AI_POINT_USAGE_CARD_ROUTE } from '@/web/support/wallet/sub/constants';
import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
const StandardPlanContentList = ({
level,
@@ -43,7 +43,7 @@ const StandardPlanContentList = ({
}, [subPlans?.standard, level, mode]);
return planContent ? (
<Grid gap={4}>
<Grid gap={4} fontSize={'sm'}>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<Box color={'myGray.600'}>
@@ -92,14 +92,13 @@ const StandardPlanContentList = ({
amount: planContent.totalPoints
})}
</Box>
<MyTooltip label={t('support.wallet.subscription.AI points click to read tip')}>
<QuestionOutlineIcon
ml={'2px'}
onClick={() => {
router.push(AI_POINT_USAGE_CARD_ROUTE);
}}
/>
</MyTooltip>
<QuestionTip
ml={1}
label={t('support.wallet.subscription.AI points click to read tip')}
onClick={() => {
router.push(AI_POINT_USAGE_CARD_ROUTE);
}}
></QuestionTip>
</Flex>
</Flex>
<Flex alignItems={'center'}>