fix: note head nav related

This commit is contained in:
dev 2025-11-05 17:14:25 +08:00
parent 3f52b7766a
commit 5e22d9d36f

View File

@ -1,4 +1,3 @@
import { BreadcrumbItem, Breadcrumbs } from '@heroui/react'
import { loggerService } from '@logger' import { loggerService } from '@logger'
import { NavbarCenter, NavbarHeader, NavbarRight } from '@renderer/components/app/Navbar' import { NavbarCenter, NavbarHeader, NavbarRight } from '@renderer/components/app/Navbar'
import { HStack } from '@renderer/components/Layout' import { HStack } from '@renderer/components/Layout'
@ -6,7 +5,7 @@ import { useActiveNode } from '@renderer/hooks/useNotesQuery'
import { useNotesSettings } from '@renderer/hooks/useNotesSettings' import { useNotesSettings } from '@renderer/hooks/useNotesSettings'
import { useShowWorkspace } from '@renderer/hooks/useShowWorkspace' import { useShowWorkspace } from '@renderer/hooks/useShowWorkspace'
import { findNode } from '@renderer/services/NotesTreeService' import { findNode } from '@renderer/services/NotesTreeService'
import { Dropdown, Input, Tooltip } from 'antd' import { Breadcrumb, Dropdown, Input, Tooltip } from 'antd'
import { t } from 'i18next' import { t } from 'i18next'
import { MoreHorizontal, PanelLeftClose, PanelRightClose, Star } from 'lucide-react' import { MoreHorizontal, PanelLeftClose, PanelRightClose, Star } from 'lucide-react'
import { useCallback, useEffect, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
@ -191,42 +190,43 @@ const HeaderNavbar = ({ notesTree, getCurrentNoteContent, onToggleStar, onExpand
</HStack> </HStack>
<NavbarCenter style={{ flex: 1, minWidth: 0 }}> <NavbarCenter style={{ flex: 1, minWidth: 0 }}>
<BreadcrumbsContainer> <BreadcrumbsContainer>
<Breadcrumbs style={{ borderRadius: 0 }}> <Breadcrumb
{breadcrumbItems.map((item, index) => { separator={'>'}
items={breadcrumbItems.map((item, index) => {
const isLastItem = index === breadcrumbItems.length - 1 const isLastItem = index === breadcrumbItems.length - 1
const isCurrentNote = isLastItem && !item.isFolder const isCurrentNote = isLastItem && !item.isFolder
return {
return ( title: (
<BreadcrumbItem key={item.key} isCurrent={isLastItem}> <div key={item.key} className="flex">
{isCurrentNote ? ( {isCurrentNote ? (
<TitleInputWrapper> <TitleInputWrapper>
<TitleInput <TitleInput
ref={titleInputRef} ref={titleInputRef}
value={titleValue} value={titleValue}
onChange={handleTitleChange} onChange={handleTitleChange}
onBlur={handleTitleBlur} onBlur={handleTitleBlur}
onKeyDown={handleTitleKeyDown} onKeyDown={handleTitleKeyDown}
size="small" size="small"
variant="borderless" variant="borderless"
style={{ style={{
fontSize: 'inherit', fontSize: 'inherit',
padding: 0, padding: 0,
height: 'auto', height: 'auto',
lineHeight: 'inherit' lineHeight: 'inherit'
}} }}
/> />
</TitleInputWrapper> </TitleInputWrapper>
) : ( ) : (
<BreadcrumbTitle <BreadcrumbTitle
onClick={() => handleBreadcrumbClick(item)} onClick={() => handleBreadcrumbClick(item)}
$clickable={item.isFolder && !isLastItem}> $clickable={item.isFolder && !isLastItem}>
{item.title} {item.title}
</BreadcrumbTitle> </BreadcrumbTitle>
)} )}
</BreadcrumbItem> </div>
) )
})} }
</Breadcrumbs> })}></Breadcrumb>
</BreadcrumbsContainer> </BreadcrumbsContainer>
</NavbarCenter> </NavbarCenter>
<NavbarRight style={{ paddingRight: 0 }}> <NavbarRight style={{ paddingRight: 0 }}>
@ -347,13 +347,6 @@ export const BreadcrumbsContainer = styled.div`
max-width: none !important; max-width: none !important;
} }
/* 覆盖 HeroUI BreadcrumbItem 的样式 */
& li:last-child [data-slot="item"] {
flex: 1 !important;
width: 100% !important;
max-width: none !important;
}
/* 更强的样式覆盖 */ /* 更强的样式覆盖 */
& li:last-child * { & li:last-child * {
max-width: none !important; max-width: none !important;