From 999bd802c40b443932a13f96241f1307f4c3f7b7 Mon Sep 17 00:00:00 2001 From: magicdmer Date: Fri, 17 Jan 2025 09:34:22 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=99=BA=E8=83=BD?= =?UTF-8?q?=E4=BD=93=E9=A1=B5=E9=9D=A2=E6=80=A7=E8=83=BD=E5=92=8C=E4=BD=93?= =?UTF-8?q?=E9=AA=8C=20(#756)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: improved model validation and error handling * refactor: 优化智能体页面下拉流畅度和分类切换效果，让其更加顺畅自然 --------- Co-authored-by: kangfenmao Co-authored-by: magicdmer --- src/renderer/src/pages/agents/AgentsPage.tsx | 90 +++++++++++-------- .../src/pages/agents/components/AgentCard.tsx | 7 +- .../src/pages/agents/components/MyAgents.tsx | 6 +- 3 files changed, 61 insertions(+), 42 deletions(-) diff --git a/src/renderer/src/pages/agents/AgentsPage.tsx b/src/renderer/src/pages/agents/AgentsPage.tsx index 97e77311..a38e4d85 100644 --- a/src/renderer/src/pages/agents/AgentsPage.tsx +++ b/src/renderer/src/pages/agents/AgentsPage.tsx @@ -120,12 +120,31 @@ const AgentsPage: FC = () => { [i18n.language] ) + const renderAgentList = useCallback( + (agents: Agent[]) => { + return ( + + {agents.map((agent, index) => ( + + onAddAgentConfirm(getAgentFromSystemAgent(agent as any))} + agent={agent as any} + /> + + ))} + + ); + }, + [onAddAgentConfirm] + ); + const tabItems = useMemo(() => { - const groups = Object.keys(filteredAgentGroups) + const groups = Object.keys(filteredAgentGroups); return groups.map((group, i) => { - const id = String(i + 1) - const localizedGroupName = getLocalizedGroupName(group) + const id = String(i + 1); + const localizedGroupName = getLocalizedGroupName(group); + const agents = filteredAgentGroups[group] || []; return { label: localizedGroupName, @@ -135,25 +154,16 @@ const AgentsPage: FC = () => { {localizedGroupName} - - {group === '我的' ? ( - - ) : ( - filteredAgentGroups[group]?.map((agent, index) => ( - - onAddAgentConfirm(getAgentFromSystemAgent(agent as any))} - agent={agent as any} - /> - - )) - )} - + {group === '我的' ? ( + + ) : ( + renderAgentList(agents) + )} ) - } - }) - }, [filteredAgentGroups, getLocalizedGroupName, onAddAgentConfirm, search]) + }; + }); + }, [filteredAgentGroups, getLocalizedGroupName, onAddAgentConfirm, search, renderAgentList]); const handleSearch = () => { if (searchInput.trim() === '') { @@ -185,26 +195,20 @@ const AgentsPage: FC = () => {
- + {Object.values(filteredAgentGroups).flat().length > 0 ? ( search.trim() ? ( - - {Object.values(filteredAgentGroups) - .flat() - .map((agent, index, array) => ( - - onAddAgentConfirm(getAgentFromSystemAgent(agent as any))} - agent={agent as any} - /> - - ))} - + {renderAgentList(Object.values(filteredAgentGroups).flat())} ) : ( - + ) ) : ( @@ -232,6 +236,7 @@ const ContentContainer = styled.div` height: 100%; padding: 0 10px; padding-left: 0; + border-top: 0.5px solid var(--color-border); ` const AssistantsContainer = styled.div` @@ -239,6 +244,7 @@ const AssistantsContainer = styled.div` flex: 1; flex-direction: row; height: calc(100vh - var(--navbar-height)); + border-left: 0.5px solid var(--color-border); ` const TabContent = styled(Scrollbar)` @@ -247,6 +253,9 @@ const TabContent = styled(Scrollbar)` margin-right: -4px; padding-bottom: 20px !important; overflow-x: hidden; + transform: translateZ(0); + will-change: transform; + -webkit-font-smoothing: antialiased; ` const AgentPrompt = styled.div` @@ -268,12 +277,16 @@ const Tabs = styled(TabsAntd)<{ $language: string }>` display: flex; flex: 1; flex-direction: row-reverse; + border-right: 0.5px solid var(--color-border); + .ant-tabs-tabpane { padding-right: 0 !important; } .ant-tabs-nav { min-width: ${({ $language }) => ($language.startsWith('zh') ? '120px' : '140px')}; max-width: ${({ $language }) => ($language.startsWith('zh') ? '120px' : '140px')}; + position: relative; + overflow: hidden; } .ant-tabs-nav-list { padding: 10px 8px; @@ -291,11 +304,14 @@ const Tabs = styled(TabsAntd)<{ $language: string }>` border: 0.5px solid transparent; justify-content: ${({ $language }) => ($language.startsWith('zh') ? 'center' : 'flex-start')}; user-select: none; + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + .ant-tabs-tab-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } &:hover { color: var(--color-text) !important; @@ -304,12 +320,11 @@ const Tabs = styled(TabsAntd)<{ $language: string }>` } .ant-tabs-tab-active { background-color: var(--color-background-soft); - border-right: none; border: 0.5px solid var(--color-border); + transform: scale(1.02); } .ant-tabs-content-holder { border-left: 0.5px solid var(--color-border); - border-right: none; } .ant-tabs-ink-bar { display: none; @@ -322,6 +337,9 @@ const Tabs = styled(TabsAntd)<{ $language: string }>` color: var(--color-text) !important; } } + .ant-tabs-content { + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + } ` export default AgentsPage diff --git a/src/renderer/src/pages/agents/components/AgentCard.tsx b/src/renderer/src/pages/agents/components/AgentCard.tsx index ae87960b..19c53322 100644 --- a/src/renderer/src/pages/agents/components/AgentCard.tsx +++ b/src/renderer/src/pages/agents/components/AgentCard.tsx @@ -3,10 +3,11 @@ import { Agent } from '@renderer/types' import { getLeadingEmoji } from '@renderer/utils' import { Dropdown } from 'antd' import styled from 'styled-components' +import { FC, memo } from 'react' interface Props { agent: Agent - onClick?: () => void + onClick: () => void contextMenu?: { label: string; onClick: () => void }[] menuItems?: { key: string @@ -17,7 +18,7 @@ interface Props { }[] } -const AgentCard: React.FC = ({ agent, onClick, contextMenu, menuItems }) => { +const AgentCard: FC = ({ agent, onClick, contextMenu, menuItems }) => { const emoji = agent.emoji || getLeadingEmoji(agent.name) const prompt = (agent.description || agent.prompt).substring(0, 100).replace(/\\n/g, '') const content = ( @@ -205,4 +206,4 @@ const MenuContainer = styled.div` } ` -export default AgentCard +export default memo(AgentCard) diff --git a/src/renderer/src/pages/agents/components/MyAgents.tsx b/src/renderer/src/pages/agents/components/MyAgents.tsx index a7b85663..f1749b9b 100644 --- a/src/renderer/src/pages/agents/components/MyAgents.tsx +++ b/src/renderer/src/pages/agents/components/MyAgents.tsx @@ -3,7 +3,7 @@ import { useAgents } from '@renderer/hooks/useAgents' import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings' import { createAssistantFromAgent } from '@renderer/services/AssistantService' import { Agent } from '@renderer/types' -import { Col } from 'antd' +import { Col, Row } from 'antd' import { useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' @@ -43,7 +43,7 @@ const MyAgents: React.FC = ({ onClick, search }) => { ) return ( - <> + {filteredAgents.map((agent) => { const dropdownMenuItems = [ { @@ -102,7 +102,7 @@ const MyAgents: React.FC = ({ onClick, search }) => { AddAgentPopup.show()} /> - + ) }