fix: Improve the @ model list experience

- 修复使用方向键上下移动时,列表不随之滚动的问题
- 添加滚动条
This commit is contained in:
ousugo 2025-02-14 16:03:14 +08:00 committed by 亢奋猫
parent dabff0a847
commit c53d63f7af

View File

@ -167,12 +167,35 @@ const MentionModelsButton: FC<Props> = ({ mentionModels, onMentionModel: onSelec
loadPinnedModels()
}, [])
useEffect(() => {
if (selectedIndex >= 0 && menuRef.current) {
const menuElement = menuRef.current
const selectedElement = menuElement.querySelector('.ant-dropdown-menu-item-selected')
if (selectedElement) {
const menuRect = menuElement.getBoundingClientRect()
const selectedRect = selectedElement.getBoundingClientRect()
if (selectedRect.bottom > menuRect.bottom) {
selectedElement.scrollIntoView({ block: 'nearest', behavior: 'auto' })
} else if (selectedRect.top < menuRect.top) {
selectedElement.scrollIntoView({ block: 'nearest', behavior: 'auto' })
}
}
}
}, [selectedIndex])
useEffect(() => {
const showModelSelector = () => {
dropdownRef.current?.click()
setIsOpen(true)
setSelectedIndex(0)
setSearchText('')
setTimeout(() => {
if (menuRef.current) {
menuRef.current.scrollTop = 0
}
}, 0)
}
const handleKeyDown = (e: KeyboardEvent) => {
@ -293,20 +316,25 @@ const DropdownMenuStyle = createGlobalStyle`
overflow-x: hidden;
padding: 4px 0;
margin-bottom: 40px;
position: relative;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: var(--color-scrollbar);
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background: var(--color-scrollbar-thumb);
&:hover {
background: var(--color-scrollbar-thumb-hover);
}
}
}
.ant-dropdown-menu-item-group {