ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-07-24 22:03:54 +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;
}

4
packages/web/components/core/workflow/NodeInputSelect.tsx
View File

@@ -142,7 +142,7 @@ const NodeInputSelect = ({
return (
<MyMenu
offset={[0, -1]}
offset={[-0.5, -0.5]}
Button={
<Button
size={'xs'}
@@ -154,7 +154,7 @@ const NodeInputSelect = ({
<Box fontWeight={'medium'}>{renderTypeData.title}</Box>
</Button>
}
menuList={filterMenuList}
menuList={[{ children: filterMenuList }]}
/>
);
};

2
packages/web/hooks/useScrollPagination.tsx
View File

@@ -115,7 +115,7 @@ export function useScrollPagination<
<MyBox isLoading={isLoading} ref={containerRef} overflow={'overlay'} {...props}>
<Box ref={wrapperRef}>{children}</Box>
{noMore.current && list.length > 0 && (
<Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'sm'}>
<Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'xs'}>
{t('common.No more data')}
</Box>
)}

3
packages/web/hooks/useToast.ts → packages/web/hooks/useToast.tsx
View File

@@ -5,6 +5,9 @@ export const useToast = (props?: UseToastOptions) => {
const toast = uToast({
position: 'top',
duration: 2000,
containerStyle: {
fontSize: 'sm'
},
...props
});

124
packages/web/styles/theme.ts
View File

@@ -4,13 +4,14 @@ import {
switchAnatomy,
selectAnatomy,
numberInputAnatomy,
checkboxAnatomy
checkboxAnatomy,
tableAnatomy,
radioAnatomy
} from '@chakra-ui/anatomy';
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';
const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
modalAnatomy.keys
);
const { definePartsStyle: modalPart, defineMultiStyleConfig: modalMultiStyle } =
createMultiStyleConfigHelpers(modalAnatomy.keys);
const { definePartsStyle: switchPart, defineMultiStyleConfig: switchMultiStyle } =
createMultiStyleConfigHelpers(switchAnatomy.keys);
const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } =
@@ -19,6 +20,10 @@ const { definePartsStyle: numInputPart, defineMultiStyleConfig: numInputMultiSty
createMultiStyleConfigHelpers(numberInputAnatomy.keys);
const { definePartsStyle: checkBoxPart, defineMultiStyleConfig: checkBoxMultiStyle } =
createMultiStyleConfigHelpers(checkboxAnatomy.keys);
const { definePartsStyle: tablePart, defineMultiStyleConfig: tableMultiStyle } =
createMultiStyleConfigHelpers(tableAnatomy.keys);
const { definePartsStyle: radioParts, defineMultiStyleConfig: radioStyle } =
createMultiStyleConfigHelpers(radioAnatomy.keys);
const shadowLight = '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)';
@@ -65,7 +70,7 @@ const Button = defineStyleConfig({
borderRadius: '8px'
},
md: {
fontSize: 'md',
fontSize: 'sm',
px: '20px',
py: 0,
h: '36px',
@@ -73,7 +78,7 @@ const Button = defineStyleConfig({
borderRadius: '8px'
},
mdSquare: {
fontSize: 'md',
fontSize: 'sm',
px: '0',
py: 0,
h: '36px',
@@ -267,9 +272,6 @@ const Button = defineStyleConfig({
});
const Input: ComponentStyleConfig = {
baseStyle: {
fontsize: '1rem'
},
sizes: {
sm: defineStyle({
field: {
@@ -312,13 +314,15 @@ const NumberInput = numInputMultiStyle({
sm: defineStyle({
field: {
h: '32px',
borderRadius: 'md'
borderRadius: 'md',
fontsize: 'sm'
}
}),
md: defineStyle({
field: {
h: '40px',
borderRadius: 'md'
borderRadius: 'md',
fontsize: 'sm'
}
})
},
@@ -359,6 +363,7 @@ const Textarea: ComponentStyleConfig = {
border: '1px solid',
borderRadius: 'md',
borderColor: 'myGray.200',
fontSize: 'sm',
_hover: {
borderColor: ''
},
@@ -406,12 +411,34 @@ const Select = selectMultiStyle({
}
});
const Radio = radioStyle({
baseStyle: radioParts({
control: {
_hover: {
borderColor: 'primary.300',
bg: 'primary.50'
},
_checked: {
borderColor: 'primary.600',
bg: 'primary.50',
boxShadow: shadowLight,
_before: {
bg: 'primary.600'
},
_hover: {
bg: 'primary.50'
}
}
}
})
});
const Checkbox = checkBoxMultiStyle({
baseStyle: checkBoxPart({
label: {
fontFamily: 'mono' // change the font family of the label
},
control: {
borderRadius: 'xs',
bg: 'none',
_checked: {
bg: 'primary.50',
@@ -429,10 +456,10 @@ const Checkbox = checkBoxMultiStyle({
})
});
const Modal = defineMultiStyleConfig({
baseStyle: definePartsStyle({
const Modal = modalMultiStyle({
baseStyle: modalPart({
body: {
py: [3, 5],
py: [2, 4],
px: [5, 7]
},
footer: {
@@ -441,20 +468,62 @@ const Modal = defineMultiStyleConfig({
})
});
const Table = tableMultiStyle({
sizes: {
md: defineStyle({
table: {
fontsize: 'sm'
},
thead: {
tr: {
bg: 'myGray.100',
fontSize: 'sm',
th: {
borderBottom: 'none',
overflow: 'hidden',
'&:first-of-type': {
borderLeftRadius: 'md'
},
'&:last-of-type': {
borderRightRadius: 'md'
}
}
}
},
tbody: {
tr: {
td: {
overflow: 'hidden',
'&:first-of-type': {
borderLeftRadius: 'md'
},
'&:last-of-type': {
borderRightRadius: 'md'
}
}
}
}
})
},
defaultProps: {
size: 'md'
}
});
// 全局主题
export const theme = extendTheme({
styles: {
global: {
'html, body': {
fontSize: '14px',
color: 'myGray.900',
fontWeight: 400,
color: 'myGray.600',
fontWeight: 'normal',
height: '100%',
overflow: 'hidden'
},
a: {
color: 'primary.600'
},
'*': {
_focusVisible: {
boxShadow: 'none'
@@ -586,16 +655,17 @@ export const theme = extendTheme({
body: 'PingFang,Noto Sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
},
fontSizes: {
mini: '0.75rem',
xs: '0.8rem',
sm: '0.93rem',
sm: '0.875rem',
md: '1rem',
lg: '1.15rem',
xl: '1.3rem',
'2xl': '1.45rem',
'3xl': '1.6rem',
'4xl': '1.75rem',
'5xl': '1.9rem',
'6xl': '2.05rem'
lg: '1.25rem',
xl: '1.5rem',
'2xl': '1.75rem',
'3xl': '2rem',
'4xl': '2.25rem',
'5xl': '2.8rem',
'6xl': '3.6rem'
},
borders: {
sm: '1px solid #E8EBF0',
@@ -644,6 +714,8 @@ export const theme = extendTheme({
Select,
NumberInput,
Checkbox,
Modal
Modal,
Table,
Radio
}
});