refactor(skill): extract save logic into SkillSaveProvider with auto-save support

Centralize file save operations using Context/Provider pattern for better
maintainability. Add auto-save on tab switch, visibility change, page unload,
and component unmount.
This commit is contained in:
yyh
2026-01-25 19:05:00 +08:00
parent 150730d322
commit e1e7b7e88a
5 changed files with 328 additions and 57 deletions

View File

@ -2,30 +2,48 @@
import type { FC } from 'react'
import * as React from 'react'
import { useStore as useAppStore } from '@/app/components/app/store'
import { useStore } from '@/app/components/workflow/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 { 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 = () => {
const activeTabId = useStore(s => s.activeTabId)
useSkillAutoSave({ activeTabId })
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]">
<SkillPageLayout>
<Sidebar>
<SidebarSearchAdd />
<FileTree />
</Sidebar>
<ContentArea>
<FileTabs />
<ContentBody>
<FileContentPanel />
</ContentBody>
</ContentArea>
</SkillPageLayout>
<SkillSaveProvider appId={appId}>
<SkillAutoSaveManager />
<SkillPageLayout>
<Sidebar>
<SidebarSearchAdd />
<FileTree />
</Sidebar>
<ContentArea>
<FileTabs />
<ContentBody>
<FileContentPanel />
</ContentBody>
</ContentArea>
</SkillPageLayout>
</SkillSaveProvider>
</div>
)
}