mirror of
https://github.com/langgenius/dify.git
synced 2026-05-02 16:38:04 +08:00
fe17cbc1a8
Implement MVP features for skill editor based on design doc: - Add Zustand store with Tab, FileTree, and Dirty slices - Rewrite file tree using react-arborist for virtual scrolling - Implement Tab↔FileTree sync with auto-reveal on tab activation - Add upload functionality (new folder, upload file) - Implement Monaco editor with dirty state tracking and Ctrl+S save - Add i18n translations (en-US and zh-Hans)
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import type { FC } from 'react'
|
|
import * as React from 'react'
|
|
import { SkillEditorProvider } from './context'
|
|
import EditorArea from './editor-area'
|
|
import EditorBody from './editor-body'
|
|
import EditorTabs from './editor-tabs'
|
|
import Files from './files'
|
|
import Sidebar from './sidebar'
|
|
import SidebarSearchAdd from './sidebar-search-add'
|
|
import SkillDocEditor from './skill-doc-editor'
|
|
import SkillPageLayout from './skill-page-layout'
|
|
|
|
/**
|
|
* SkillMain - Main entry point for Skill Editor view
|
|
*
|
|
* This component provides the SkillEditorContext and renders the
|
|
* complete Skill Editor UI including:
|
|
* - File tree sidebar
|
|
* - Tab bar
|
|
* - Editor area
|
|
*
|
|
* The store is created at this level and shared with all child components.
|
|
* API data is fetched using TanStack Query hooks within child components.
|
|
*/
|
|
const SkillMain: FC = () => {
|
|
return (
|
|
<SkillEditorProvider>
|
|
<div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">
|
|
<SkillPageLayout>
|
|
<Sidebar>
|
|
<SidebarSearchAdd />
|
|
<Files />
|
|
</Sidebar>
|
|
<EditorArea>
|
|
<EditorTabs />
|
|
<EditorBody>
|
|
<SkillDocEditor />
|
|
</EditorBody>
|
|
</EditorArea>
|
|
</SkillPageLayout>
|
|
</div>
|
|
</SkillEditorProvider>
|
|
)
|
|
}
|
|
|
|
export default React.memo(SkillMain)
|