diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
index 69bef12e94..dc0899bfca 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/file-preview-panel.tsx
@@ -2,12 +2,11 @@ import type { FileAppearanceType } from '@/app/components/base/file-uploader/typ
 import type { AppAssetTreeView } from '@/types/app-asset'
 import { RiCloseLine, RiExternalLinkLine, RiFolderLine } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useContext, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import Loading from '@/app/components/base/loading'
-import { WorkflowContext } from '@/app/components/workflow/context'
 import SkillEditor from '@/app/components/workflow/skill/editor/skill-editor'
 import { useFileTypeInfo } from '@/app/components/workflow/skill/hooks/use-file-type-info'
 import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
@@ -24,7 +23,6 @@ type FilePreviewPanelProps = {
 
 const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }: FilePreviewPanelProps) => {
   const { t } = useTranslation(['workflow', 'common'])
-  const workflowStore = useContext(WorkflowContext)
   const appId = useAppStore(s => s.appDetail?.id || '')
 
   const isFolder = currentNode?.node_type === 'folder'
@@ -58,13 +56,16 @@ const FilePreviewPanel = ({ resourceId, currentNode, className, style, onClose }
     ? getFileIconType(currentNode.name, currentNode.extension)
     : null
 
-  const canOpenInEditor = Boolean(resourceId && !isFolder && workflowStore)
+  const canOpenInEditor = Boolean(resourceId && !isFolder && typeof window !== 'undefined')
 
   const handleOpenInEditor = useCallback(() => {
-    if (!canOpenInEditor || !workflowStore)
+    if (!canOpenInEditor)
       return
-    workflowStore.getState().openTab(resourceId)
-  }, [canOpenInEditor, workflowStore, resourceId])
+    const nextUrl = new URL(window.location.href)
+    nextUrl.searchParams.set('view', 'skill')
+    nextUrl.searchParams.set('fileId', resourceId)
+    window.open(nextUrl.toString(), '_blank', 'noopener,noreferrer')
+  }, [canOpenInEditor, resourceId])
 
   return (
     <div
diff --git a/web/app/components/workflow/skill/main.tsx b/web/app/components/workflow/skill/main.tsx
index 29f554464b..d0f5dc4c70 100644
--- a/web/app/components/workflow/skill/main.tsx
+++ b/web/app/components/workflow/skill/main.tsx
@@ -1,8 +1,9 @@
 'use client'
 
+import { useSearchParams } from 'next/navigation'
 import * as React from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { useStore } from '@/app/components/workflow/store'
+import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import ArtifactContentPanel from './artifact-content-panel'
 import { isArtifactTab } from './constants'
 import ContentArea from './content-area'
@@ -32,6 +33,17 @@ const ContentRouter = () => {
 const SkillMain = () => {
   const appDetail = useAppStore(s => s.appDetail)
   const appId = appDetail?.id || ''
+  const searchParams = useSearchParams()
+  const storeApi = useWorkflowStore()
+  const openedFileRef = React.useRef<string | null>(null)
+
+  React.useEffect(() => {
+    const fileId = searchParams.get('fileId')
+    if (!fileId || openedFileRef.current === fileId)
+      return
+    openedFileRef.current = fileId
+    storeApi.getState().openTab(fileId, { pinned: true })
+  }, [searchParams, storeApi])
 
   return (
     <div className="h-full bg-workflow-canvas-workflow-top-bar-1 pl-3 pt-[52px]">