From bc9ce23fdcfa34ede8953e5169394068fe02473c Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 19 Jan 2026 23:50:08 +0800 Subject: [PATCH] refactor(skill): rename components for semantic clarity MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rename components and reorganize directory structure: - skill-doc-editor.tsx → file-content-panel.tsx (handles edit/preview/download) - editor-area.tsx → content-area.tsx - editor-body.tsx → content-body.tsx - editor-tabs.tsx → file-tabs.tsx - editor-tab-item.tsx → file-tab-item.tsx Create viewer/ directory for non-editor components: - Move media-file-preview.tsx from editor/ to viewer/ - Move unsupported-file-download.tsx from editor/ to viewer/ This clarifies the distinction between: - editor/: actual file editors (code, markdown) - viewer/: preview and download components (media, unsupported files) --- .../{editor-area.tsx => content-area.tsx} | 6 +++--- .../{editor-body.tsx => content-body.tsx} | 6 +++--- ...-doc-editor.tsx => file-content-panel.tsx} | 8 ++++---- ...{editor-tab-item.tsx => file-tab-item.tsx} | 6 +++--- .../skill/{editor-tabs.tsx => file-tabs.tsx} | 8 ++++---- web/app/components/workflow/skill/main.tsx | 20 +++++++++---------- .../{editor => viewer}/media-file-preview.tsx | 0 .../unsupported-file-download.tsx | 0 8 files changed, 27 insertions(+), 27 deletions(-) rename web/app/components/workflow/skill/{editor-area.tsx => content-area.tsx} (58%) rename web/app/components/workflow/skill/{editor-body.tsx => content-body.tsx} (54%) rename web/app/components/workflow/skill/{skill-doc-editor.tsx => file-content-panel.tsx} (96%) rename web/app/components/workflow/skill/{editor-tab-item.tsx => file-tab-item.tsx} (96%) rename web/app/components/workflow/skill/{editor-tabs.tsx => file-tabs.tsx} (95%) rename web/app/components/workflow/skill/{editor => viewer}/media-file-preview.tsx (100%) rename web/app/components/workflow/skill/{editor => viewer}/unsupported-file-download.tsx (100%) diff --git a/web/app/components/workflow/skill/editor-area.tsx b/web/app/components/workflow/skill/content-area.tsx similarity index 58% rename from web/app/components/workflow/skill/editor-area.tsx rename to web/app/components/workflow/skill/content-area.tsx index 35e2c8b821..2221b3d392 100644 --- a/web/app/components/workflow/skill/editor-area.tsx +++ b/web/app/components/workflow/skill/content-area.tsx @@ -1,9 +1,9 @@ import type { FC, PropsWithChildren } from 'react' import * as React from 'react' -type EditorAreaProps = PropsWithChildren +type ContentAreaProps = PropsWithChildren -const EditorArea: FC = ({ children }) => { +const ContentArea: FC = ({ children }) => { return (
{children} @@ -11,4 +11,4 @@ const EditorArea: FC = ({ children }) => { ) } -export default React.memo(EditorArea) +export default React.memo(ContentArea) diff --git a/web/app/components/workflow/skill/editor-body.tsx b/web/app/components/workflow/skill/content-body.tsx similarity index 54% rename from web/app/components/workflow/skill/editor-body.tsx rename to web/app/components/workflow/skill/content-body.tsx index b4fd537aca..8a94db6e04 100644 --- a/web/app/components/workflow/skill/editor-body.tsx +++ b/web/app/components/workflow/skill/content-body.tsx @@ -1,9 +1,9 @@ import type { FC, PropsWithChildren } from 'react' import * as React from 'react' -type EditorBodyProps = PropsWithChildren +type ContentBodyProps = PropsWithChildren -const EditorBody: FC = ({ children }) => { +const ContentBody: FC = ({ children }) => { return (
{children} @@ -11,4 +11,4 @@ const EditorBody: FC = ({ children }) => { ) } -export default React.memo(EditorBody) +export default React.memo(ContentBody) diff --git a/web/app/components/workflow/skill/skill-doc-editor.tsx b/web/app/components/workflow/skill/file-content-panel.tsx similarity index 96% rename from web/app/components/workflow/skill/skill-doc-editor.tsx rename to web/app/components/workflow/skill/file-content-panel.tsx index b54922906f..0d619b95a3 100644 --- a/web/app/components/workflow/skill/skill-doc-editor.tsx +++ b/web/app/components/workflow/skill/file-content-panel.tsx @@ -14,18 +14,18 @@ import { Theme } from '@/types/app' import { basePath } from '@/utils/var' import CodeFileEditor from './editor/code-file-editor' import MarkdownFileEditor from './editor/markdown-file-editor' -import MediaFilePreview from './editor/media-file-preview' -import UnsupportedFileDownload from './editor/unsupported-file-download' import { useFileTypeInfo } from './hooks/use-file-type-info' import { useSkillAssetNodeMap } from './hooks/use-skill-asset-tree' import { useSkillFileData } from './hooks/use-skill-file-data' import { useSkillFileSave } from './hooks/use-skill-file-save' import { getFileLanguage } from './utils/file-utils' +import MediaFilePreview from './viewer/media-file-preview' +import UnsupportedFileDownload from './viewer/unsupported-file-download' if (typeof window !== 'undefined') loader.config({ paths: { vs: `${window.location.origin}${basePath}/vs` } }) -const SkillDocEditor: FC = () => { +const FileContentPanel: FC = () => { const { t } = useTranslation('workflow') const { theme: appTheme } = useTheme() const [isMounted, setIsMounted] = useState(false) @@ -199,4 +199,4 @@ const SkillDocEditor: FC = () => { ) } -export default React.memo(SkillDocEditor) +export default React.memo(FileContentPanel) diff --git a/web/app/components/workflow/skill/editor-tab-item.tsx b/web/app/components/workflow/skill/file-tab-item.tsx similarity index 96% rename from web/app/components/workflow/skill/editor-tab-item.tsx rename to web/app/components/workflow/skill/file-tab-item.tsx index 9356ecb9e4..34e41061ea 100644 --- a/web/app/components/workflow/skill/editor-tab-item.tsx +++ b/web/app/components/workflow/skill/file-tab-item.tsx @@ -10,7 +10,7 @@ import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon' import { cn } from '@/utils/classnames' import { getFileIconType } from './utils/file-utils' -type EditorTabItemProps = { +type FileTabItemProps = { fileId: string name: string isActive: boolean @@ -21,7 +21,7 @@ type EditorTabItemProps = { onDoubleClick: (fileId: string) => void } -const EditorTabItem: FC = ({ +const FileTabItem: FC = ({ fileId, name, isActive, @@ -100,4 +100,4 @@ const EditorTabItem: FC = ({ ) } -export default React.memo(EditorTabItem) +export default React.memo(FileTabItem) diff --git a/web/app/components/workflow/skill/editor-tabs.tsx b/web/app/components/workflow/skill/file-tabs.tsx similarity index 95% rename from web/app/components/workflow/skill/editor-tabs.tsx rename to web/app/components/workflow/skill/file-tabs.tsx index 8f5ea5896f..c5de5ad784 100644 --- a/web/app/components/workflow/skill/editor-tabs.tsx +++ b/web/app/components/workflow/skill/file-tabs.tsx @@ -7,10 +7,10 @@ import { useTranslation } from 'react-i18next' import Confirm from '@/app/components/base/confirm' import { useStore, useWorkflowStore } from '@/app/components/workflow/store' import { cn } from '@/utils/classnames' -import EditorTabItem from './editor-tab-item' +import FileTabItem from './file-tab-item' import { useSkillAssetNodeMap } from './hooks/use-skill-asset-tree' -const EditorTabs: FC = () => { +const FileTabs: FC = () => { const { t } = useTranslation('workflow') const openTabIds = useStore(s => s.openTabIds) const activeTabId = useStore(s => s.activeTabId) @@ -73,7 +73,7 @@ const EditorTabs: FC = () => { const isPreview = previewTabId === fileId return ( - { ) } -export default React.memo(EditorTabs) +export default React.memo(FileTabs) diff --git a/web/app/components/workflow/skill/main.tsx b/web/app/components/workflow/skill/main.tsx index 385eab3d40..92f7bb5138 100644 --- a/web/app/components/workflow/skill/main.tsx +++ b/web/app/components/workflow/skill/main.tsx @@ -3,13 +3,13 @@ import type { FC } from 'react' import * as React from 'react' import { useCallback, useState } from 'react' -import EditorArea from './editor-area' -import EditorBody from './editor-body' -import EditorTabs from './editor-tabs' +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 Sidebar from './sidebar' import SidebarSearchAdd from './sidebar-search-add' -import SkillDocEditor from './skill-doc-editor' import SkillPageLayout from './skill-page-layout' const SkillMain: FC = () => { @@ -26,12 +26,12 @@ const SkillMain: FC = () => { - - - - - - + + + + + +
) diff --git a/web/app/components/workflow/skill/editor/media-file-preview.tsx b/web/app/components/workflow/skill/viewer/media-file-preview.tsx similarity index 100% rename from web/app/components/workflow/skill/editor/media-file-preview.tsx rename to web/app/components/workflow/skill/viewer/media-file-preview.tsx diff --git a/web/app/components/workflow/skill/editor/unsupported-file-download.tsx b/web/app/components/workflow/skill/viewer/unsupported-file-download.tsx similarity index 100% rename from web/app/components/workflow/skill/editor/unsupported-file-download.tsx rename to web/app/components/workflow/skill/viewer/unsupported-file-download.tsx