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()
|
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(() => {
|
useEffect(() => {
|
||||||
const showModelSelector = () => {
|
const showModelSelector = () => {
|
||||||
dropdownRef.current?.click()
|
dropdownRef.current?.click()
|
||||||
setIsOpen(true)
|
setIsOpen(true)
|
||||||
setSelectedIndex(0)
|
setSelectedIndex(0)
|
||||||
setSearchText('')
|
setSearchText('')
|
||||||
|
setTimeout(() => {
|
||||||
|
if (menuRef.current) {
|
||||||
|
menuRef.current.scrollTop = 0
|
||||||
|
}
|
||||||
|
}, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
@ -293,20 +316,25 @@ const DropdownMenuStyle = createGlobalStyle`
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--color-scrollbar);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
background: transparent;
|
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 {
|
.ant-dropdown-menu-item-group {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user