diff --git a/libs/components/editor-core/src/render-block/RenderKanbanBlock.tsx b/libs/components/editor-core/src/render-block/RenderKanbanBlock.tsx index 54f9e2276e..9eb01dbde4 100644 --- a/libs/components/editor-core/src/render-block/RenderKanbanBlock.tsx +++ b/libs/components/editor-core/src/render-block/RenderKanbanBlock.tsx @@ -25,32 +25,64 @@ const OneLevelBlockRender = ({ blockId }: RenderBlockProps) => { ); }; -export const KanbanBlockRender = ({ blockId }: RenderBlockProps) => { +export const KanbanParentBlockRender = ({ + blockId, + active, +}: RenderBlockProps & { active?: boolean }) => { + return ( + + + + ); +}; + +const KanbanChildrenRender = ({ + blockId, + activeBlock, +}: RenderBlockProps & { activeBlock?: string | null }) => { const { block } = useBlock(blockId); if (!block) { - return ( - - - - ); + return null; } return ( - {block?.childrenIds.map(childId => ( - + - + ))} ); }; -const StyledBorder = styled('div')({ - border: '1px solid #E0E6EB', - borderRadius: '5px', - margin: '4px', - padding: '0 4px', -}); +export const KanbanBlockRender = ({ + blockId, + activeBlock, +}: RenderBlockProps & { activeBlock?: string | null }) => { + return ( + + + + + ); +}; + +const BlockBorder = styled('div')<{ active?: boolean }>( + ({ theme, active }) => ({ + borderRadius: '5px', + padding: '0 4px', + border: `1px solid ${ + active ? theme.affine.palette.primary : 'transparent' + }`, + }) +); + +const ChildBorder = styled(BlockBorder)(({ active, theme }) => ({ + border: `1px solid ${active ? theme.affine.palette.primary : '#E0E6EB'}`, + margin: '4px 0', +}));