fix: Improve the @ model list experience
- 修复使用方向键上下移动时,列表不随之滚动的问题 - 添加滚动条
This commit is contained in:
parent
dabff0a847
commit
c53d63f7af
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user