125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Divider, SxProps } from '@mui/material';
|
|
import Box from '@mui/material/Box';
|
|
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
|
|
import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
|
|
import { IAgentAction, globalStorage } from '@/storage';
|
|
import { getActionTypeDisplayText } from '@/storage/plan/action'; // 导入映射函数
|
|
|
|
export interface IDutyItem {
|
|
action: IAgentAction;
|
|
style?: SxProps;
|
|
}
|
|
|
|
export default React.memo<IDutyItem>(({ action, style = {} }) => {
|
|
const [expand, setExpand] = React.useState(false);
|
|
const _style = {
|
|
...action.style,
|
|
...style,
|
|
};
|
|
React.useEffect(() => {
|
|
globalStorage.renderLines({
|
|
repeat: 3,
|
|
delay: 0,
|
|
interval: 20,
|
|
});
|
|
}, [expand]);
|
|
if (!expand) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'inline-flex',
|
|
fontSize: '14px',
|
|
alignItems: 'center',
|
|
borderRadius: '10px',
|
|
padding: '0 4px 0 8px',
|
|
marginRight: '4px',
|
|
fontWeight: 600,
|
|
border: '2px solid #0003',
|
|
..._style,
|
|
}}
|
|
>
|
|
{getActionTypeDisplayText(action.type)}
|
|
<Box
|
|
onClick={() => setExpand(true)}
|
|
sx={{
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
height: '14px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: '#0002',
|
|
borderRadius: '8px',
|
|
marginLeft: '8px',
|
|
padding: '0 4px',
|
|
'&:hover': {
|
|
background: '#0003',
|
|
},
|
|
}}
|
|
>
|
|
<MoreHorizIcon sx={{ fontSize: '16px' }} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
fontSize: '14px',
|
|
flexDirection: 'column',
|
|
borderRadius: '10px',
|
|
border: '2px solid #0003',
|
|
padding: '4px 4px 4px 8px',
|
|
margin: '4px 0',
|
|
..._style,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
fontWeight: 600,
|
|
paddingBottom: '4px',
|
|
marginLeft: '2px',
|
|
}}
|
|
>
|
|
{getActionTypeDisplayText(action.type)}
|
|
</Box>
|
|
<Divider
|
|
sx={{
|
|
margin: '1px 0px',
|
|
borderBottom: '2px dashed', // 设置为虚线
|
|
borderColor: (action.style as any).borderColor ?? '#888888',
|
|
}}
|
|
/>
|
|
<Box sx={{ margin: '4px 2px', color: '#0009', fontWeight: 400 }}>
|
|
{action.description}
|
|
</Box>
|
|
<Box
|
|
onClick={() => setExpand(false)}
|
|
sx={{
|
|
position: 'absolute',
|
|
right: '6px',
|
|
bottom: '6px',
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
height: '14px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: '#0002',
|
|
borderRadius: '12px',
|
|
marginLeft: '4px',
|
|
padding: '0 4px',
|
|
'&:hover': {
|
|
background: '#0003',
|
|
},
|
|
}}
|
|
>
|
|
<UnfoldLessIcon sx={{ fontSize: '16px', transform: 'rotate(90deg)' }} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
});
|