fix(inspect): align artifacts empty state with variables empty state design

Replace the minimal centered text card in artifacts tab empty state with
a full-height card layout matching the variables tab, including icon
container (SearchLinesSparkle), title, description, and learn more link.

web/app/components/workflow/variable-inspect/artifacts-tab.tsx

@@ -8,10 +8,12 @@ import {
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
+import SearchLinesSparkle from '@/app/components/base/icons/src/vender/knowledge/SearchLinesSparkle'
 import { FileDownload01 } from '@/app/components/base/icons/src/vender/line/files'
 import Loading from '@/app/components/base/loading'
 import ArtifactsTree from '@/app/components/workflow/skill/file-tree/artifacts-tree'
 import { useAppContext } from '@/context/app-context'
+import { useDocLink } from '@/context/i18n'
 import { useDownloadSandboxFile, useSandboxFilesTree } from '@/service/use-sandbox-file'
 import { cn } from '@/utils/classnames'
 import InspectLayout from './inspect-layout'
@@ -27,6 +29,7 @@ const formatFileSize = (bytes: number | null): string => {
 
 const ArtifactsTab: FC<InspectHeaderProps> = (headerProps) => {
   const { t } = useTranslation('workflow')
+  const docLink = useDocLink()
   const { userProfile } = useAppContext()
   const sandboxId = userProfile?.id
 
@@ -66,11 +69,23 @@ const ArtifactsTab: FC<InspectHeaderProps> = (headerProps) => {
   if (!hasFiles) {
     return (
       <InspectLayout {...headerProps}>
-        <div className="flex h-full items-center justify-center p-2">
+        <div className="h-full p-2">
-          <div className="rounded-lg bg-background-section p-3">
+          <div className="flex h-full flex-col gap-3 rounded-xl bg-background-section p-8">
-            <p className="system-xs-regular text-text-tertiary">
+            <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-sm">
-              {t('skillSidebar.artifacts.emptyState')}
+              <SearchLinesSparkle className="h-5 w-5 text-text-accent" />
-            </p>
+            </div>
+            <div className="flex flex-col gap-1">
+              <div className="system-sm-semibold text-text-secondary">{t('debug.variableInspect.tabArtifacts.emptyTitle')}</div>
+              <div className="system-xs-regular text-text-tertiary">{t('debug.variableInspect.tabArtifacts.emptyTip')}</div>
+              <a
+                className="system-xs-regular cursor-pointer text-text-accent"
+                href={docLink('/use-dify/debug/variable-inspect')}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t('debug.variableInspect.tabArtifacts.emptyLink')}
+              </a>
+            </div>
           </div>
         </div>
       </InspectLayout>

web/i18n/en-US/workflow.json

@@ -293,6 +293,9 @@
   "debug.variableInspect.systemNode": "System",
   "debug.variableInspect.tab.artifacts": "Artifacts",
   "debug.variableInspect.tab.variables": "Variables",
+  "debug.variableInspect.tabArtifacts.emptyLink": "Learn more",
+  "debug.variableInspect.tabArtifacts.emptyTip": "Files generated by the agent during test runs. They may be automatically cleared later.",
+  "debug.variableInspect.tabArtifacts.emptyTitle": "No artifacts generated yet",
   "debug.variableInspect.tabArtifacts.previewNotAvailable": "Preview not available. Click download to view this file.",
   "debug.variableInspect.tabArtifacts.selectFile": "Select a file to preview",
   "debug.variableInspect.title": "Variable Inspect",

web/i18n/zh-Hans/workflow.json

@@ -291,6 +291,9 @@
   "debug.variableInspect.systemNode": "系统变量",
   "debug.variableInspect.tab.artifacts": "产物",
   "debug.variableInspect.tab.variables": "变量",
+  "debug.variableInspect.tabArtifacts.emptyLink": "了解更多",
+  "debug.variableInspect.tabArtifacts.emptyTip": "Agent 在测试运行期间生成的文件，可能会在之后被自动清理。",
+  "debug.variableInspect.tabArtifacts.emptyTitle": "暂无产物",
   "debug.variableInspect.tabArtifacts.previewNotAvailable": "暂不支持预览，请点击下载查看此文件。",
   "debug.variableInspect.tabArtifacts.selectFile": "选择文件进行预览",
   "debug.variableInspect.title": "变量检查",