whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: improved 'my agents' list rendering

Browse Source
This commit is contained in:
kangfenmao 2025-01-17 09:36:39 +08:00
parent 999bd802c4
commit c46219cd6c
2 changed files with 15 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/renderer/src/pages/agents/AgentsPage.tsx
View File

@ -133,18 +133,18 @@ const AgentsPage: FC = () => {
</Col> </Col>
))} ))}
</Row> </Row>
); )
}, },
[onAddAgentConfirm] [onAddAgentConfirm]
); )
const tabItems = useMemo(() => { const tabItems = useMemo(() => {
const groups = Object.keys(filteredAgentGroups); const groups = Object.keys(filteredAgentGroups)
return groups.map((group, i) => { return groups.map((group, i) => {
const id = String(i + 1); const id = String(i + 1)
const localizedGroupName = getLocalizedGroupName(group); const localizedGroupName = getLocalizedGroupName(group)
const agents = filteredAgentGroups[group] || []; const agents = filteredAgentGroups[group] || []
return { return {
label: localizedGroupName, label: localizedGroupName,
@ -154,16 +154,12 @@ const AgentsPage: FC = () => {
<Title level={5} key={group} style={{ marginBottom: 10 }}> <Title level={5} key={group} style={{ marginBottom: 10 }}>
{localizedGroupName} {localizedGroupName}
</Title> </Title>
{group === '我的' ? ( {group === '我的' ? <MyAgents onClick={onAddAgentConfirm} search={search} /> : renderAgentList(agents)}
<MyAgents onClick={onAddAgentConfirm} search={search} />
) : (
renderAgentList(agents)
)}
</TabContent> </TabContent>
) )
}; }
}); })
}, [filteredAgentGroups, getLocalizedGroupName, onAddAgentConfirm, search, renderAgentList]); }, [filteredAgentGroups, getLocalizedGroupName, onAddAgentConfirm, search, renderAgentList])
const handleSearch = () => { const handleSearch = () => {
if (searchInput.trim() === '') { if (searchInput.trim() === '') {
@ -195,20 +191,13 @@ const AgentsPage: FC = () => {
<div style={{ width: 80 }} /> <div style={{ width: 80 }} />
</NavbarCenter> </NavbarCenter>
</Navbar> </Navbar>
<ContentContainer> <ContentContainer id="content-container">
<AssistantsContainer> <AssistantsContainer>
{Object.values(filteredAgentGroups).flat().length > 0 ? ( {Object.values(filteredAgentGroups).flat().length > 0 ? (
search.trim() ? ( search.trim() ? (
<TabContent> <TabContent>{renderAgentList(Object.values(filteredAgentGroups).flat())}</TabContent>
{renderAgentList(Object.values(filteredAgentGroups).flat())}
</TabContent>
) : ( ) : (
<Tabs <Tabs tabPosition="right" animated={false} items={tabItems} $language={i18n.language} />
tabPosition="right"
animated={false}
items={tabItems}
$language={i18n.language}
/>
) )
) : ( ) : (
<EmptyView> <EmptyView>
@ -244,7 +233,6 @@ const AssistantsContainer = styled.div`
flex: 1; flex: 1;
flex-direction: row; flex-direction: row;
height: calc(100vh - var(--navbar-height)); height: calc(100vh - var(--navbar-height));
border-left: 0.5px solid var(--color-border);
` `
const TabContent = styled(Scrollbar)` const TabContent = styled(Scrollbar)`
@ -277,7 +265,6 @@ const Tabs = styled(TabsAntd)<{ $language: string }>`
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: row-reverse; flex-direction: row-reverse;
border-right: 0.5px solid var(--color-border);
.ant-tabs-tabpane { .ant-tabs-tabpane {
padding-right: 0 !important; padding-right: 0 !important;
@ -325,6 +312,7 @@ const Tabs = styled(TabsAntd)<{ $language: string }>`
} }
.ant-tabs-content-holder { .ant-tabs-content-holder {
border-left: 0.5px solid var(--color-border); border-left: 0.5px solid var(--color-border);
border-right: none;
} }
.ant-tabs-ink-bar { .ant-tabs-ink-bar {
display: none; display: none;

2
src/renderer/src/pages/agents/components/AgentCard.tsx
View File

@ -2,8 +2,8 @@ import { EllipsisOutlined } from '@ant-design/icons'
import { Agent } from '@renderer/types' import { Agent } from '@renderer/types'
import { getLeadingEmoji } from '@renderer/utils' import { getLeadingEmoji } from '@renderer/utils'
import { Dropdown } from 'antd' import { Dropdown } from 'antd'
import styled from 'styled-components'
import { FC, memo } from 'react' import { FC, memo } from 'react'
import styled from 'styled-components'
interface Props { interface Props {
agent: Agent agent: Agent