fix: sidebar navigation and active state handling

- 当固定在侧边栏的小程序被打开时,对应图标显示为被选中
- 修复点击两次主题切换按钮会导致当前 Webview 被错误关闭的问题
- 修复当 Webview 处于打开状态,点击侧边栏按钮无法立即跳转到对应界面的问题
- 修复打开帮助文档,其按钮没有显示为被选中的问题
- 修复在设置界面时打开帮助文档,设置按钮继续显示为被选中的问题
This commit is contained in:
ousugo 2025-02-17 03:48:42 +08:00 committed by 亢奋猫
parent 30e8cef9cc
commit fa8bf61532

View File

@ -77,9 +77,11 @@ const Sidebar: FC = () => {
</AppsContainer> </AppsContainer>
)} )}
</MainMenusContainer> </MainMenusContainer>
<Menus onClick={MinApp.onClose}> <Menus>
<Tooltip title={t('docs.title')} mouseEnterDelay={0.8} placement="right"> <Tooltip title={t('docs.title')} mouseEnterDelay={0.8} placement="right">
<Icon onClick={onOpenDocs}> <Icon
onClick={onOpenDocs}
className={minappShow && MinApp.app?.url === 'https://docs.cherry-ai.com/' ? 'active' : ''}>
<QuestionCircleOutlined /> <QuestionCircleOutlined />
</Icon> </Icon>
</Tooltip> </Tooltip>
@ -93,8 +95,14 @@ const Sidebar: FC = () => {
</Icon> </Icon>
</Tooltip> </Tooltip>
<Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right"> <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
<StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}> <StyledLink
<Icon className={pathname.startsWith('/settings') ? 'active' : ''}> onClick={async () => {
if (minappShow) {
await MinApp.close()
}
await to(isLocalAi ? '/settings/assistant' : '/settings/provider')
}}>
<Icon className={pathname.startsWith('/settings') && !minappShow ? 'active' : ''}>
<i className="iconfont icon-setting" /> <i className="iconfont icon-setting" />
</Icon> </Icon>
</StyledLink> </StyledLink>
@ -108,10 +116,11 @@ const MainMenus: FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
const { pathname } = useLocation() const { pathname } = useLocation()
const { sidebarIcons } = useSettings() const { sidebarIcons } = useSettings()
const { minappShow } = useRuntime()
const navigate = useNavigate() const navigate = useNavigate()
const isRoute = (path: string): string => (pathname === path ? 'active' : '') const isRoute = (path: string): string => (pathname === path && !minappShow ? 'active' : '')
const isRoutes = (path: string): string => (pathname.startsWith(path) ? 'active' : '') const isRoutes = (path: string): string => (pathname.startsWith(path) && !minappShow ? 'active' : '')
const iconMap = { const iconMap = {
assistants: <i className="iconfont icon-chat" />, assistants: <i className="iconfont icon-chat" />,
@ -139,7 +148,13 @@ const MainMenus: FC = () => {
return ( return (
<Tooltip key={icon} title={t(`${icon}.title`)} mouseEnterDelay={0.8} placement="right"> <Tooltip key={icon} title={t(`${icon}.title`)} mouseEnterDelay={0.8} placement="right">
<StyledLink onClick={() => navigate(path)}> <StyledLink
onClick={async () => {
if (minappShow) {
await MinApp.close()
}
navigate(path)
}}>
<Icon className={isActive}>{iconMap[icon]}</Icon> <Icon className={isActive}>{iconMap[icon]}</Icon>
</StyledLink> </StyledLink>
</Tooltip> </Tooltip>
@ -150,6 +165,7 @@ const MainMenus: FC = () => {
const PinnedApps: FC = () => { const PinnedApps: FC = () => {
const { pinned, updatePinnedMinapps } = useMinapps() const { pinned, updatePinnedMinapps } = useMinapps()
const { t } = useTranslation() const { t } = useTranslation()
const { minappShow } = useRuntime()
return ( return (
<DragableList list={pinned} onUpdate={updatePinnedMinapps} listStyle={{ marginBottom: 5 }}> <DragableList list={pinned} onUpdate={updatePinnedMinapps} listStyle={{ marginBottom: 5 }}>
@ -164,11 +180,12 @@ const PinnedApps: FC = () => {
} }
} }
] ]
const isActive = minappShow && MinApp.app?.id === app.id
return ( return (
<Tooltip key={app.id} title={app.name} mouseEnterDelay={0.8} placement="right"> <Tooltip key={app.id} title={app.name} mouseEnterDelay={0.8} placement="right">
<StyledLink> <StyledLink>
<Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}> <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
<Icon onClick={() => MinApp.start(app)}> <Icon onClick={() => MinApp.start(app)} className={isActive ? 'active' : ''}>
<MinAppIcon size={20} app={app} style={{ borderRadius: 6 }} /> <MinAppIcon size={20} app={app} style={{ borderRadius: 6 }} />
</Icon> </Icon>
</Dropdown> </Dropdown>