suguo
/
dify
mirror of https://github.com/langgenius/dify.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(web): update account settings header (#33965)

This commit is contained in:
yyh 2026-03-24 10:04:08 +08:00 committed by GitHub
parent 49a1fae555
commit 075b8bf1ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/header/account-setting/__tests__/index.spec.tsx
View File

@ -315,14 +315,14 @@ describe('AccountSetting', () => {
it('should handle scroll event in panel', () => {
// Act
renderAccountSetting()
const scrollContainer = screen.getByRole('dialog').querySelector('.overflow-y-auto')
const scrollContainer = screen.getByRole('dialog').querySelector('.overscroll-contain')
// Assert
expect(scrollContainer).toBeInTheDocument()
if (scrollContainer) {
// Scroll down
fireEvent.scroll(scrollContainer, { target: { scrollTop: 100 } })
expect(scrollContainer).toHaveClass('overflow-y-auto')
expect(scrollContainer).toHaveClass('overscroll-contain')
// Scroll back up
fireEvent.scroll(scrollContainer, { target: { scrollTop: 0 } })

31
web/app/components/header/account-setting/index.tsx
View File

@ -1,8 +1,9 @@
'use client'
import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import SearchInput from '@/app/components/base/search-input'
import { ScrollArea } from '@/app/components/base/ui/scroll-area'
import BillingPage from '@/app/components/billing/billing-page'
import CustomPage from '@/app/components/custom/custom-page'
import {
@ -129,20 +130,6 @@ export default function AccountSetting({
],
},
]
const scrollRef = useRef<HTMLDivElement>(null)
const [scrolled, setScrolled] = useState(false)
useEffect(() => {
const targetElement = scrollRef.current
const scrollHandle = (e: Event) => {
const userScrolled = (e.target as HTMLDivElement).scrollTop > 0
setScrolled(userScrolled)
}
targetElement?.addEventListener('scroll', scrollHandle)
return () => {
targetElement?.removeEventListener('scroll', scrollHandle)
}
}, [])
const activeItem = [...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)
const [searchValue, setSearchValue] = useState<string>('')
@ -201,7 +188,7 @@ export default function AccountSetting({
}
</div>
</div>
<div className="relative flex w-[824px]">
<div className="relative flex min-h-0 w-[824px]">
<div className="fixed right-6 top-6 z-[9999] flex flex-col items-center">
<Button
variant="tertiary"
@ -214,8 +201,14 @@ export default function AccountSetting({
</Button>
<div className="mt-1 text-text-tertiary system-2xs-medium-uppercase">ESC</div>
</div>
<div ref={scrollRef} className="w-full overflow-y-auto bg-components-panel-bg pb-4">
<div className={cn('sticky top-0 z-20 mx-8 mb-[18px] flex items-center bg-components-panel-bg pb-2 pt-[27px]', scrolled && 'border-b border-divider-regular')}>
<ScrollArea
className="h-full min-h-0 flex-1 bg-components-panel-bg"
slotClassNames={{
viewport: 'overscroll-contain',
content: 'min-h-full pb-4',
}}
>
<div className="sticky top-0 z-20 mx-8 mb-[18px] flex items-center bg-components-panel-bg pb-2 pt-[27px]">
<div className="shrink-0 text-text-primary title-2xl-semi-bold">
{activeItem?.name}
{activeItem?.description && (
@ -241,7 +234,7 @@ export default function AccountSetting({
{activeMenu === ACCOUNT_SETTING_TAB.CUSTOM && <CustomPage />}
{activeMenu === ACCOUNT_SETTING_TAB.LANGUAGE && <LanguagePage />}
</div>
</div>
</ScrollArea>
</div>
</div>
</MenuDialog>