mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-29 17:55:24 +00:00
V4.8.14 dev (#3234)
* feat: rewrite chat context (#3176) * feat: add app auto execute (#3115) * feat: add app auto execute * auto exec configtion * chatting animation * change icon * fix * fix * fix link * feat: add chat context to all chatbox * perf: loading ui --------- Co-authored-by: heheer <heheer@sealos.io> * app auto exec (#3179) * add chat records loaded state (#3184) * perf: chat store reset storage (#3186) * perf: chat store reset storage * perf: auto exec code * chore: workflow ui (#3175) * chore: workflow ui * fix * change icon color config * change popover to mymenu * 4.8.14 test (#3189) * update doc * fix: token check * perf: icon button * update doc * feat: share page support configuration Whether to allow the original view (#3194) * update doc * perf: fix index (#3206) * perf: i18n * perf: Add service entry (#3226) * 4.8.14 test (#3228) * fix: ai log * fix: text splitter * fix: reference unselect & user form description & simple to advance (#3229) * fix: reference unselect & user form description & simple to advance * change abort position * perf * perf: code (#3232) * perf: code * update doc * fix: create btn permission (#3233) * update doc * fix: refresh chatbox listener * perf: check invalid reference * perf: check invalid reference * update doc * fix: ui props --------- Co-authored-by: heheer <heheer@sealos.io>
This commit is contained in:
Archer
@@ -7,22 +7,26 @@ import {
|
||||
useOutsideClick,
|
||||
MenuButton,
|
||||
MenuItemProps,
|
||||
PlacementWithLogical
|
||||
PlacementWithLogical,
|
||||
AvatarProps,
|
||||
BoxProps,
|
||||
DividerProps
|
||||
} from '@chakra-ui/react';
|
||||
import MyDivider from '../MyDivider';
|
||||
import type { IconNameType } from '../Icon/type';
|
||||
import { useSystem } from '../../../hooks/useSystem';
|
||||
import Avatar from '../Avatar';
|
||||
|
||||
export type MenuItemType = 'primary' | 'danger';
|
||||
export type MenuItemType = 'primary' | 'danger' | 'gray' | 'grayBg';
|
||||
|
||||
export type MenuSizeType = 'sm' | 'md' | 'xs' | 'mini';
|
||||
|
||||
export type Props = {
|
||||
width?: number | string;
|
||||
offset?: [number, number];
|
||||
Button: React.ReactNode;
|
||||
trigger?: 'hover' | 'click';
|
||||
iconSize?: string;
|
||||
iconRadius?: string;
|
||||
size?: MenuSizeType;
|
||||
|
||||
placement?: PlacementWithLogical;
|
||||
menuList: {
|
||||
@@ -39,18 +43,9 @@ export type Props = {
|
||||
}[];
|
||||
};
|
||||
|
||||
const MyMenu = ({
|
||||
width = 'auto',
|
||||
trigger = 'hover',
|
||||
offset,
|
||||
iconSize = '1rem',
|
||||
Button,
|
||||
menuList,
|
||||
iconRadius,
|
||||
placement = 'bottom-start'
|
||||
}: Props) => {
|
||||
const typeMapStyle: Record<MenuItemType, MenuItemProps> = {
|
||||
primary: {
|
||||
const typeMapStyle: Record<MenuItemType, { styles: MenuItemProps; iconColor?: string }> = {
|
||||
primary: {
|
||||
styles: {
|
||||
_hover: {
|
||||
backgroundColor: 'primary.50',
|
||||
color: 'primary.600'
|
||||
@@ -64,7 +59,44 @@ const MyMenu = ({
|
||||
color: 'primary.600'
|
||||
}
|
||||
},
|
||||
danger: {
|
||||
iconColor: 'myGray.600'
|
||||
},
|
||||
gray: {
|
||||
styles: {
|
||||
_hover: {
|
||||
backgroundColor: 'myGray.05',
|
||||
color: 'primary.600'
|
||||
},
|
||||
_focus: {
|
||||
backgroundColor: 'myGray.05',
|
||||
color: 'primary.600'
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: 'myGray.05',
|
||||
color: 'primary.600'
|
||||
}
|
||||
},
|
||||
iconColor: 'myGray.400'
|
||||
},
|
||||
grayBg: {
|
||||
styles: {
|
||||
_hover: {
|
||||
backgroundColor: 'myGray.05',
|
||||
color: 'primary.600'
|
||||
},
|
||||
_focus: {
|
||||
backgroundColor: 'myGray.05',
|
||||
color: 'primary.600'
|
||||
},
|
||||
_active: {
|
||||
backgroundColor: 'myGray.05',
|
||||
color: 'primary.600'
|
||||
}
|
||||
},
|
||||
iconColor: 'myGray.600'
|
||||
},
|
||||
danger: {
|
||||
styles: {
|
||||
color: 'red.600',
|
||||
_hover: {
|
||||
background: 'red.1'
|
||||
@@ -75,9 +107,97 @@ const MyMenu = ({
|
||||
_active: {
|
||||
background: 'red.1'
|
||||
}
|
||||
},
|
||||
iconColor: 'red.600'
|
||||
}
|
||||
};
|
||||
const sizeMapStyle: Record<
|
||||
MenuSizeType,
|
||||
{
|
||||
iconStyle: AvatarProps;
|
||||
labelStyle: BoxProps;
|
||||
dividerStyle: DividerProps;
|
||||
menuItemStyle: MenuItemProps;
|
||||
}
|
||||
> = {
|
||||
mini: {
|
||||
iconStyle: {
|
||||
w: '14px'
|
||||
},
|
||||
labelStyle: {
|
||||
fontSize: 'mini'
|
||||
},
|
||||
dividerStyle: {
|
||||
my: 0.5
|
||||
},
|
||||
menuItemStyle: {
|
||||
py: 1.5,
|
||||
px: 2
|
||||
}
|
||||
};
|
||||
},
|
||||
xs: {
|
||||
iconStyle: {
|
||||
w: '14px'
|
||||
},
|
||||
labelStyle: {
|
||||
fontSize: 'sm'
|
||||
},
|
||||
dividerStyle: {
|
||||
my: 0.5
|
||||
},
|
||||
menuItemStyle: {
|
||||
py: 1.5,
|
||||
px: 2
|
||||
}
|
||||
},
|
||||
sm: {
|
||||
iconStyle: {
|
||||
w: '1rem'
|
||||
},
|
||||
labelStyle: {
|
||||
fontSize: 'sm'
|
||||
},
|
||||
dividerStyle: {
|
||||
my: 1
|
||||
},
|
||||
menuItemStyle: {
|
||||
py: 2,
|
||||
px: 3,
|
||||
_notLast: {
|
||||
mb: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
md: {
|
||||
iconStyle: {
|
||||
w: '2rem',
|
||||
borderRadius: '6px'
|
||||
},
|
||||
labelStyle: {
|
||||
fontSize: 'sm'
|
||||
},
|
||||
dividerStyle: {
|
||||
my: 1
|
||||
},
|
||||
menuItemStyle: {
|
||||
py: 2,
|
||||
px: 3,
|
||||
_notLast: {
|
||||
mb: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const MyMenu = ({
|
||||
width = 'auto',
|
||||
trigger = 'hover',
|
||||
size = 'sm',
|
||||
offset,
|
||||
Button,
|
||||
menuList,
|
||||
placement = 'bottom-start'
|
||||
}: Props) => {
|
||||
const { isPc } = useSystem();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const closeTimer = useRef<any>();
|
||||
@@ -165,7 +285,7 @@ const MyMenu = ({
|
||||
return (
|
||||
<Box key={i}>
|
||||
{item.label && <Box fontSize={'sm'}>{item.label}</Box>}
|
||||
{i !== 0 && <MyDivider h={'1.5px'} my={1} />}
|
||||
{i !== 0 && <MyDivider h={'1.5px'} {...sizeMapStyle[size].dividerStyle} />}
|
||||
{item.children.map((child, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
@@ -177,29 +297,36 @@ const MyMenu = ({
|
||||
child.onClick();
|
||||
}
|
||||
}}
|
||||
py={2}
|
||||
px={3}
|
||||
alignItems={'center'}
|
||||
fontSize={'sm'}
|
||||
color={child.isActive ? 'primary.700' : 'myGray.600'}
|
||||
whiteSpace={'pre-wrap'}
|
||||
_notLast={{ mb: 0.5 }}
|
||||
{...typeMapStyle[child.type || 'primary']}
|
||||
{...typeMapStyle[child.type || 'primary'].styles}
|
||||
{...sizeMapStyle[size].menuItemStyle}
|
||||
{...child.menuItemStyles}
|
||||
>
|
||||
{!!child.icon && (
|
||||
<Avatar
|
||||
src={child.icon as any}
|
||||
borderRadius={iconRadius}
|
||||
w={iconSize}
|
||||
mr={3}
|
||||
mr={2}
|
||||
{...sizeMapStyle[size].iconStyle}
|
||||
color={
|
||||
child.isActive
|
||||
? 'inherit'
|
||||
: typeMapStyle[child.type || 'primary'].iconColor
|
||||
}
|
||||
sx={{
|
||||
'[role="menuitem"]:hover &': {
|
||||
color: 'inherit'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Box w={'100%'}>
|
||||
<Box
|
||||
w={'100%'}
|
||||
color={child.description ? 'myGray.900' : 'inherit'}
|
||||
fontSize={'sm'}
|
||||
{...sizeMapStyle[size].labelStyle}
|
||||
>
|
||||
{child.label}
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user