Files
dify/web/app/components/workflow/skill/main.tsx
yyh bf12445960 fix(workflow): make FileTree and ArtifactsSection scroll independently
The sidebar layout was broken when ArtifactsSection expanded - it would
squeeze the FileTree and neither area could scroll. This restructures the
layout so each section has its own scroll container with proper height
constraints.
2026-01-27 00:14:33 +08:00

50 lines
1.4 KiB
TypeScript

'use client'
import type { FC } from 'react'
import * as React from 'react'
import { useStore as useAppStore } from '@/app/components/app/store'
import ContentArea from './content-area'
import ContentBody from './content-body'
import FileContentPanel from './file-content-panel'
import FileTabs from './file-tabs'
import FileTree from './file-tree'
import ArtifactsSection from './file-tree/artifacts-section'
import { useSkillAutoSave } from './hooks/use-skill-auto-save'
import { SkillSaveProvider } from './hooks/use-skill-save-manager'
import Sidebar from './sidebar'
import SidebarSearchAdd from './sidebar-search-add'
import SkillPageLayout from './skill-page-layout'
const SkillAutoSaveManager: FC = () => {
useSkillAutoSave()
return null
}
const SkillMain: FC = () => {
const appDetail = useAppStore(s => s.appDetail)
const appId = appDetail?.id || ''
return (
<div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">
<SkillSaveProvider appId={appId}>
<SkillAutoSaveManager />
<SkillPageLayout>
<Sidebar>
<SidebarSearchAdd />
<FileTree />
<ArtifactsSection />
</Sidebar>
<ContentArea>
<FileTabs />
<ContentBody>
<FileContentPanel />
</ContentBody>
</ContentArea>
</SkillPageLayout>
</SkillSaveProvider>
</div>
)
}
export default React.memo(SkillMain)