mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-23 21:13:50 +00:00
Updae theme and fix some bug (#1711)
This commit is contained in:
@@ -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 && (
|
||||
|
@@ -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>
|
||||
);
|
||||
|
@@ -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
17
packages/web/components/common/MyBox/FormLabel.tsx
Normal 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;
|
@@ -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} />
|
||||
|
@@ -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} />
|
||||
|
@@ -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>
|
||||
|
@@ -64,6 +64,7 @@ const MyModal = ({
|
||||
borderBottom={'1px solid #F4F6F8'}
|
||||
roundedTop={'lg'}
|
||||
py={'10px'}
|
||||
fontSize={'md'}
|
||||
>
|
||||
{iconSrc && (
|
||||
<>
|
||||
|
@@ -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 && (
|
||||
|
@@ -135,6 +135,7 @@ const MySelect = (
|
||||
}
|
||||
}}
|
||||
whiteSpace={'pre-wrap'}
|
||||
fontSize={'sm'}
|
||||
>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
|
@@ -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>
|
||||
);
|
||||
};
|
||||
|
@@ -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,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>
|
||||
|
@@ -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) => (
|
||||
|
@@ -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>
|
||||
|
@@ -105,7 +105,7 @@ export default function Editor({
|
||||
>
|
||||
<Box
|
||||
color={'myGray.400'}
|
||||
fontSize={'11px'}
|
||||
fontSize={'mini'}
|
||||
userSelect={'none'}
|
||||
whiteSpace={'pre-wrap'}
|
||||
wordBreak={'break-all'}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user