ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-07-27 00:17:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updae theme and fix some bug (#1711)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/components/common/DateRangePicker/index.tsx
View File

@@ -49,11 +49,13 @@ const DateRangePicker = ({
py={1}
borderRadius={'sm'}
cursor={'pointer'}
bg={'myWhite.600'}
bg={'myGray.100'}
fontSize={'sm'}
onClick={() => setShowSelected(true)}
>
<Box>{formatSelected}</Box>
<Box color={'myGray.600'} fontWeight={'400'}>
{formatSelected}
</Box>
<MyIcon ml={2} name={'date'} w={'16px'} color={'myGray.600'} />
</Flex>
{showSelected && (

2
packages/web/components/common/DndDrag/DragIcon.tsx
View File

@@ -5,7 +5,7 @@ import { DraggableProvided } from 'react-beautiful-dnd';
const DragIcon = ({ provided, ...props }: { provided: DraggableProvided } & BoxProps) => {
return (
<Box {...provided.dragHandleProps} {...props}>
<Box {...provided.dragHandleProps} {...props} lineHeight={1}>
<DragHandleIcon color={'myGray.500'} _hover={{ color: 'primary.600' }} />
</Box>
);

2
packages/web/components/common/EmptyTip/index.tsx
View File

@@ -12,7 +12,7 @@ const EmptyTip = ({ text, ...props }: Props) => {
return (
<Flex mt={5} flexDirection={'column'} alignItems={'center'} py={'10vh'} {...props}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
<Box mt={2} color={'myGray.500'} fontSize={'sm'}>
{text || t('common.empty.Common Tip')}
</Box>
</Flex>

17
packages/web/components/common/MyBox/FormLabel.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Box, BoxProps } from '@chakra-ui/react';
const FormLabel = ({
children,
...props
}: BoxProps & {
children: React.ReactNode;
}) => {
return (
<Box color={'myGray.900'} fontSize={'sm'} {...props}>
{children}
</Box>
);
};
export default FormLabel;

2
packages/web/components/common/MyDrawer/CustomRightDrawer.tsx
View File

@@ -56,7 +56,7 @@ const CustomRightDrawer = ({
)}
</>
)}
<Box flex={'1'} fontSize={'lg'}>
<Box flex={'1'} fontSize={'md'}>
{title}
</Box>
<CloseButton position={'relative'} fontSize={'sm'} top={0} right={0} onClick={onClose} />

2
packages/web/components/common/MyDrawer/MyRightDrawer.tsx
View File

@@ -61,7 +61,7 @@ const MyRightDrawer = ({
)}
</>
)}
<Box flex={'1'} fontSize={'lg'}>
<Box flex={'1'} fontSize={'md'}>
{title}
</Box>
<DrawerCloseButton position={'relative'} fontSize={'sm'} top={0} right={0} />

63
packages/web/components/common/MyMenu/index.tsx
View File

@@ -9,6 +9,7 @@ import {
MenuItemProps
} from '@chakra-ui/react';
import MyIcon from '../Icon';
import MyDivider from '../MyDivider';
type MenuItemType = 'primary' | 'danger';
@@ -18,11 +19,14 @@ export type Props = {
Button: React.ReactNode;
trigger?: 'hover' | 'click';
menuList: {
isActive?: boolean;
label: string | React.ReactNode;
icon?: string;
type?: MenuItemType;
onClick: () => any;
label?: string;
children: {
isActive?: boolean;
type?: MenuItemType;
icon?: string;
label: string | React.ReactNode;
onClick: () => any;
}[];
}[];
};
@@ -49,9 +53,11 @@ const MyMenu = ({
};
const menuItemStyles: MenuItemProps = {
borderRadius: 'sm',
py: 3,
py: 2,
px: 3,
display: 'flex',
alignItems: 'center'
alignItems: 'center',
fontSize: 'sm'
};
const ref = useRef<HTMLDivElement>(null);
const closeTimer = useRef<any>();
@@ -109,23 +115,32 @@ const MyMenu = ({
'0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'
}
>
{menuList.map((item, i) => (
<MenuItem
key={i}
{...menuItemStyles}
{...typeMapStyle[item.type || 'primary']}
onClick={(e) => {
e.stopPropagation();
setIsOpen(false);
item.onClick && item.onClick();
}}
color={item.isActive ? 'primary.700' : 'myGray.600'}
whiteSpace={'pre-wrap'}
>
{!!item.icon && <MyIcon name={item.icon as any} w={'16px'} mr={2} />}
{item.label}
</MenuItem>
))}
{menuList.map((item, i) => {
return (
<Box key={i}>
{item.label && <Box fontSize={'sm'}>{item.label}</Box>}
{i !== 0 && <MyDivider h={'1.5px'} my={1} />}
{item.children.map((child, index) => (
<MenuItem
key={index}
{...menuItemStyles}
{...typeMapStyle[child.type || 'primary']}
onClick={(e) => {
e.stopPropagation();
setIsOpen(false);
child.onClick && child.onClick();
}}
color={child.isActive ? 'primary.700' : 'myGray.600'}
whiteSpace={'pre-wrap'}
_notLast={{ mb: 0.5 }}
>
{!!child.icon && <MyIcon name={child.icon as any} w={'16px'} mr={2} />}
<Box>{child.label}</Box>
</MenuItem>
))}
</Box>
);
})}
</MenuList>
</Box>
</Menu>

1
packages/web/components/common/MyModal/index.tsx
View File

@@ -64,6 +64,7 @@ const MyModal = ({
borderBottom={'1px solid #F4F6F8'}
roundedTop={'lg'}
py={'10px'}
fontSize={'md'}
>
{iconSrc && (
<>

6
packages/web/components/common/MySelect/MultipleSelect.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Flex, useDisclosure, useOutsideClick } from '@chakra-ui/react';
import React, { useRef } from 'react';
import { useTranslation } from 'next-i18next';
import FillTag from '../Tag/index';
import MyTag from '../Tag/index';
import MyIcon from '../Icon';
export type SelectProps = {
@@ -51,7 +51,7 @@ const MultipleSelect = ({
if (!listItem) return null;
return (
<FillTag colorSchema="blue" p={2} cursor={'default'}>
<MyTag colorSchema="blue" p={2} cursor={'default'}>
{listItem.alias || listItem.label}
<MyIcon
name={'common/closeLight'}
@@ -63,7 +63,7 @@ const MultipleSelect = ({
onSelect(value.filter((i) => i !== item));
}}
/>
</FillTag>
</MyTag>
);
})}
{value.length === 0 && placeholder && (

1
packages/web/components/common/MySelect/index.tsx
View File

@@ -135,6 +135,7 @@ const MySelect = (
}
}}
whiteSpace={'pre-wrap'}
fontSize={'sm'}
>
{item.label}
</MenuItem>

2
packages/web/components/common/MyTooltip/QuestionTip.tsx
View File

@@ -9,7 +9,7 @@ type Props = IconProps & {
const QuestionTip = ({ label, maxW, ...props }: Props) => {
return (
<MyTooltip label={label} maxW={maxW}>
<QuestionOutlineIcon {...props} />
<QuestionOutlineIcon w={'0.9rem'} {...props} />
</MyTooltip>
);
};

2
packages/web/components/common/MyTooltip/index.tsx
View File

@@ -17,7 +17,7 @@ const MyTooltip = ({ children, forceShow = false, shouldWrapChildren = true, ...
})}
>
<Tooltip
className="tooltip"
className="chakra-tooltip"
bg={'white'}
arrowShadowColor={'rgba(0,0,0,0.05)'}
hasArrow

2
packages/web/components/common/Radio/LeftRadio.tsx
View File

@@ -2,7 +2,6 @@ import React from 'react';
import { Box, Flex, useTheme, Grid, type GridProps } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import MyTooltip from '../MyTooltip';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import QuestionTip from '../MyTooltip/QuestionTip';
// @ts-ignore
@@ -95,6 +94,7 @@ const LeftRadio = ({
color={'myGray.900'}
fontWeight={item.desc ? '500' : 'normal'}
whiteSpace={'nowrap'}
fontSize={'sm'}
>
{typeof item.title === 'string' ? t(item.title) : item.title}
</Box>

1
packages/web/components/common/Tabs/RowTabs.tsx
View File

@@ -23,6 +23,7 @@ const RowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props }: P
borderColor={'borderColor.base'}
bg={'myGray.50'}
gap={'4px'}
fontSize={'sm'}
{...props}
>
{list.map((item) => (

101
packages/web/components/common/Tag/index.tsx
View File

@@ -1,69 +1,78 @@
import React, { useMemo } from 'react';
import { Flex, type FlexProps } from '@chakra-ui/react';
type ColorSchemaType = 'blue' | 'green' | 'red' | 'yellow' | 'gray' | 'purple' | 'adora';
interface Props extends FlexProps {
children: React.ReactNode | React.ReactNode[];
colorSchema?: 'blue' | 'green' | 'gray' | 'purple';
type?: 'fill' | 'solid';
colorSchema?: ColorSchemaType;
type?: 'fill' | 'borderFill' | 'borderSolid';
}
const colorMap: Record<
ColorSchemaType,
{
borderColor: string;
bg: string;
color: string;
}
> = {
yellow: {
borderColor: 'yellow.200',
bg: 'yellow.50',
color: 'yellow.600'
},
green: {
borderColor: 'green.200',
bg: 'green.50',
color: 'green.600'
},
red: {
borderColor: 'red.200',
bg: 'red.50',
color: 'red.600'
},
gray: {
borderColor: 'myGray.200',
bg: 'myGray.50',
color: 'myGray.700'
},
blue: {
borderColor: 'primary.200',
bg: 'primary.50',
color: 'primary.600'
},
purple: {
borderColor: '#ECF',
bg: '#F6EEFA',
color: '#A558C9'
},
adora: {
borderColor: '#D3CAFF',
bg: '#F0EEFF',
color: '#6F5DD7'
}
};
const MyTag = ({ children, colorSchema = 'blue', type = 'fill', ...props }: Props) => {
const theme = useMemo(() => {
const fillMap = {
blue: {
borderColor: 'primary.200',
bg: 'primary.50',
color: 'primary.700'
},
green: {
borderColor: 'green.200',
bg: 'green.50',
color: 'green.600'
},
purple: {
borderColor: '#ECF',
bg: '#F6EEFA',
color: '#A558C9'
},
gray: {
borderColor: 'myGray.200',
bg: 'myGray.50',
color: 'myGray.700'
}
};
const solidMap = {
blue: {
borderColor: 'primary.200',
color: 'primary.600'
},
green: {
borderColor: 'green.200',
color: 'green.600'
},
purple: {
borderColor: '#ECF',
color: '#9E53C1'
},
gray: {
borderColor: 'myGray.200',
color: 'myGray.700'
}
};
return type === 'fill' ? fillMap[colorSchema] : solidMap[colorSchema];
return colorMap[colorSchema];
}, [colorSchema]);
return (
<Flex
px={2}
px={2.5}
lineHeight={1}
py={1}
borderRadius={'sm'}
fontSize={'sm'}
fontSize={'xs'}
alignItems={'center'}
whiteSpace={'nowrap'}
borderWidth={'1px'}
{...props}
{...theme}
{...props}
borderColor={type !== 'fill' ? theme.borderColor : 'transparent'}
bg={type !== 'borderSolid' ? theme.bg : 'transparent'}
>
{children}
</Flex>

2
packages/web/components/common/Textarea/PromptEditor/Editor.tsx
View File

@@ -105,7 +105,7 @@ export default function Editor({
>
<Box
color={'myGray.400'}
fontSize={'11px'}
fontSize={'mini'}
userSelect={'none'}
whiteSpace={'pre-wrap'}
wordBreak={'break-all'}

4
packages/web/components/common/Textarea/PromptEditor/index.module.scss
View File

@@ -6,7 +6,7 @@
border-radius: var(--chakra-radii-md);
padding: 8px 12px;
background: var(--chakra-colors-gray-50);
font-size: 14px;
font-size: var(--chakra-fontSizes-sm);
overflow-y: auto;
}
@@ -18,7 +18,7 @@
border-radius: var(--chakra-radii-sm);
padding: 6px 8px;
background: #fff;
font-size: 14px;
font-size: var(--chakra-fontSizes-sm);
overflow-y: auto;
}