Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-26 20:12:38 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(AssistantsTab): streamline drag-and-drop structure and improve layout consistency

Browse Source 
- Removed unnecessary div wrappers to simplify the component structure.
- Enhanced the layout of the assistant items for better spacing and alignment.
- Added padding to the GroupTitle for improved visual consistency.
This commit is contained in:
kangfenmao 2025-06-13 10:24:52 +08:00
parent 7a44910847
commit 5f4736e8c1
1 changed files with 58 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
View File

@ -161,68 +161,63 @@ const Assistants: FC<AssistantsTabProps> = ({
if (assistantsTabSortType === 'tags') {
return (
<Container className="assistants-tab" ref={containerRef}>
<div style={{ display: 'flex', flexDirection: 'column', marginBottom: 4, gap: 10 }}>
<DragableList
droppableProps={{ type: 'TAG' }}
list={getGroupedAssistants.map((_) => ({
..._,
disabled: _.tag === t('assistants.tags.untagged')
}))}
onUpdate={() => {}}
onDragEnd={handleGroupDragEnd}
style={{ paddingBottom: 0 }}>
{(group) => (
<Droppable droppableId={group.tag} type="ASSISTANT">
{(provided) => (
<TagsContainer key={group.tag} {...provided.droppableProps} ref={provided.innerRef}>
{group.tag !== t('assistants.tags.untagged') && (
<GroupTitle onClick={() => toggleTagCollapse(group.tag)}>
<Tooltip title={group.tag}>
<GroupTitleName>
{collapsedTags[group.tag] ? (
<RightOutlined style={{ fontSize: '10px', marginRight: '5px' }} />
) : (
<DownOutlined style={{ fontSize: '10px', marginRight: '5px' }} />
)}
{group.tag}
</GroupTitleName>
</Tooltip>
<GroupTitleDivider />
</GroupTitle>
)}
{!collapsedTags[group.tag] && (
<div>
{group.assistants.map((assistant, index) => (
<Draggable
key={`draggable_${group.tag}_${assistant?.id}_${index}`}
draggableId={`draggable_${group.tag}_${assistant?.id}_${index}`}
index={index}>
{(provided) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<AssistantItem
key={assistant?.id}
assistant={assistant}
sortBy="tags"
isActive={assistant?.id === activeAssistant.id}
onSwitch={setActiveAssistant}
onDelete={onDelete}
addAgent={addAgent}
addAssistant={addAssistant}
onCreateDefaultAssistant={() => {}}
/>
</div>
)}
</Draggable>
))}
</div>
)}
{provided.placeholder}
</TagsContainer>
)}
</Droppable>
)}
</DragableList>
</div>
<DragableList
droppableProps={{ type: 'TAG' }}
list={getGroupedAssistants.map((_) => ({ ..._, disabled: _.tag === t('assistants.tags.untagged') }))}
onUpdate={() => {}}
onDragEnd={handleGroupDragEnd}
style={{ paddingBottom: 0 }}>
{(group) => (
<Droppable droppableId={group.tag} type="ASSISTANT">
{(provided) => (
<TagsContainer key={group.tag} {...provided.droppableProps} ref={provided.innerRef}>
{group.tag !== t('assistants.tags.untagged') && (
<GroupTitle onClick={() => toggleTagCollapse(group.tag)}>
<Tooltip title={group.tag}>
<GroupTitleName>
{collapsedTags[group.tag] ? (
<RightOutlined style={{ fontSize: '10px', marginRight: '5px' }} />
) : (
<DownOutlined style={{ fontSize: '10px', marginRight: '5px' }} />
)}
{group.tag}
</GroupTitleName>
</Tooltip>
<GroupTitleDivider />
</GroupTitle>
)}
{!collapsedTags[group.tag] && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
{group.assistants.map((assistant, index) => (
<Draggable
key={`draggable_${group.tag}_${assistant?.id}_${index}`}
draggableId={`draggable_${group.tag}_${assistant?.id}_${index}`}
index={index}>
{(provided) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<AssistantItem
key={assistant?.id}
assistant={assistant}
sortBy="tags"
isActive={assistant?.id === activeAssistant.id}
onSwitch={setActiveAssistant}
onDelete={onDelete}
addAgent={addAgent}
addAssistant={addAssistant}
onCreateDefaultAssistant={() => {}}
/>
</div>
)}
</Draggable>
))}
</div>
)}
{provided.placeholder}
</TagsContainer>
)}
</Droppable>
)}
</DragableList>
<AssistantAddItem onClick={onCreateAssistant}>
<AssistantName>
<PlusOutlined style={{ color: 'var(--color-text-2)', marginRight: 4 }} />
@ -308,6 +303,7 @@ const GroupTitle = styled.div`
justify-content: space-between;
align-items: center;
height: 24px;
padding-top: 8px;
`
const GroupTitleName = styled.div`