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

feat: improved search functionality for agent page

Browse Source
This commit is contained in:
kangfenmao 2024-12-03 18:46:57 +08:00
parent 9b84176a42
commit a170dbd6f0
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,6 +33,7 @@ let _agentGroups: Record<string, Agent[]> = {}
const AgentsPage: FC = () => { const AgentsPage: FC = () => {
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const [searchInput, setSearchInput] = useState('')
const agentGroups = useMemo(() => { const agentGroups = useMemo(() => {
if (Object.keys(_agentGroups).length === 0) { if (Object.keys(_agentGroups).length === 0) {
@ -154,6 +155,14 @@ const AgentsPage: FC = () => {
}) })
}, [filteredAgentGroups, getLocalizedGroupName, onAddAgentConfirm, search]) }, [filteredAgentGroups, getLocalizedGroupName, onAddAgentConfirm, search])
const handleSearch = () => {
if (searchInput.trim() === '') {
setSearch('')
} else {
setSearch(searchInput)
}
}
return ( return (
<Container> <Container>
<Navbar> <Navbar>
@ -166,10 +175,12 @@ const AgentsPage: FC = () => {
size="small" size="small"
variant="filled" variant="filled"
allowClear allowClear
suffix={<SearchOutlined />} onClear={() => setSearch('')}
value={search} suffix={<SearchOutlined onClick={handleSearch} />}
value={searchInput}
maxLength={50} maxLength={50}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearchInput(e.target.value)}
onPressEnter={handleSearch}
/> />
<div style={{ width: 80 }} /> <div style={{ width: 80 }} />
</NavbarCenter> </NavbarCenter>
@ -182,8 +193,8 @@ const AgentsPage: FC = () => {
<Row gutter={[20, 20]}> <Row gutter={[20, 20]}>
{Object.values(filteredAgentGroups) {Object.values(filteredAgentGroups)
.flat() .flat()
.map((agent, index) => ( .map((agent, index, array) => (
<Col span={6} key={index}> <Col span={array.length === 1 ? 8 : 6} key={index}>
<AgentCard <AgentCard
onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent as any))} onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent as any))}
agent={agent as any} agent={agent as any}
@ -193,7 +204,7 @@ const AgentsPage: FC = () => {
</Row> </Row>
</TabContent> </TabContent>
) : ( ) : (
<Tabs tabPosition="right" animated items={tabItems} /> <Tabs tabPosition="right" animated items={tabItems} $language={i18n.language} />
) )
) : ( ) : (
<EmptyView> <EmptyView>
@ -253,7 +264,7 @@ const EmptyView = styled.div`
color: var(--color-text-secondary); color: var(--color-text-secondary);
` `
const Tabs = styled(TabsAntd)` const Tabs = styled(TabsAntd)<{ $language: string }>`
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -261,8 +272,8 @@ const Tabs = styled(TabsAntd)`
padding-right: 0 !important; padding-right: 0 !important;
} }
.ant-tabs-nav { .ant-tabs-nav {
min-width: 140px; min-width: ${({ $language }) => ($language.startsWith('zh') ? '100px' : '140px')};
max-width: 140px; max-width: ${({ $language }) => ($language.startsWith('zh') ? '100px' : '140px')};
} }
.ant-tabs-nav-list { .ant-tabs-nav-list {
padding: 10px 8px; padding: 10px 8px;
@ -278,6 +289,7 @@ const Tabs = styled(TabsAntd)`
justify-content: left; justify-content: left;
padding: 7px 15px !important; padding: 7px 15px !important;
border: 0.5px solid transparent; border: 0.5px solid transparent;
justify-content: ${({ $language }) => ($language.startsWith('zh') ? 'center' : 'flex-start')};
.ant-tabs-tab-btn { .ant-tabs-tab-btn {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;