youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-03-26 16:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): use ScrollArea in skill start tab

Browse Source
This commit is contained in:
yyh
2026-03-25 18:29:32 +08:00
parent 9fe089d355
commit 3571bee55f
4 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/workflow/skill/start-tab/index.spec.tsx
View File

@ -59,8 +59,9 @@ describe('StartTabContent', () => {
expect(screen.getByRole('button', { name: /workflow\.skill\.startTab\.importSkill/i })).toBeInTheDocument()
expect(screen.getByRole('textbox')).toBeInTheDocument()
expect(screen.getByText('workflow.skill.startTab.templatesTitle')).toBeInTheDocument()
expect(screen.getByRole('region', { name: 'workflow.skill.startTab.templatesTitle' })).toBeInTheDocument()
expect(screen.getAllByRole('button', { name: /workflow\.skill\.startTab\.useThisSkill/i }).length).toBeGreaterThan(0)
expect(container.firstChild).toHaveClass('flex', 'h-full', 'w-full', 'bg-components-panel-bg')
expect(container.firstChild).toHaveClass('flex', 'h-full', 'min-h-0', 'w-full', 'bg-components-panel-bg')
})
})
})

19
web/app/components/workflow/skill/start-tab/index.tsx
View File

@ -1,14 +1,27 @@
'use client'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import { ScrollArea } from '@/app/components/base/ui/scroll-area'
import CreateImportSection from './create-import-section'
import SkillTemplatesSection from './skill-templates-section'
const StartTabContent = () => {
const { t } = useTranslation('workflow')
return (
<div className="flex h-full w-full flex-col overflow-auto bg-components-panel-bg">
<CreateImportSection />
<SkillTemplatesSection />
<div className="flex h-full min-h-0 w-full flex-col bg-components-panel-bg">
<ScrollArea
className="min-h-0 flex-1 overflow-hidden"
label={t('skill.startTab.templatesTitle')}
slotClassNames={{
content: 'pb-6',
scrollbar: 'z-20',
}}
>
<CreateImportSection />
<SkillTemplatesSection />
</ScrollArea>
</div>
)
}

3
web/app/components/workflow/skill/start-tab/skill-templates-section.spec.tsx
View File

@ -95,11 +95,12 @@ describe('SkillTemplatesSection', () => {
describe('Rendering', () => {
it('should render all templates from registry', () => {
render(<SkillTemplatesSection />)
const { container } = render(<SkillTemplatesSection />)
expect(screen.getByText('alpha')).toBeInTheDocument()
expect(screen.getByText('beta')).toBeInTheDocument()
expect(screen.getAllByRole('button', { name: /workflow\.skill\.startTab\.useThisSkill/i })).toHaveLength(2)
expect(container.querySelector('.sticky.top-0')).not.toBeNull()
})
it('should render empty state when search query has no matches', async () => {

4
web/app/components/workflow/skill/start-tab/skill-templates-section.tsx
View File

@ -78,7 +78,7 @@ const SkillTemplatesSection = () => {
}, [searchQuery])
return (
<section className="flex flex-1 flex-col gap-3">
<section className="flex flex-col gap-3">
<div className="sticky top-0 z-10 flex flex-col gap-3 bg-components-panel-bg px-6 pb-1 pt-2">
<SectionHeader
title={t('skill.startTab.templatesTitle')}
@ -92,7 +92,7 @@ const SkillTemplatesSection = () => {
</div>
{filtered.length === 0 && searchQuery
? (
<div className="flex flex-1 flex-col items-center justify-center gap-y-2">
<div className="flex min-h-60 flex-col items-center justify-center gap-y-2 px-6">
<SearchMenu className="size-12 text-text-quaternary" />
<span className="text-text-tertiary system-sm-regular">
{t('skill.startTab.noTemplatesFound')}