opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-24 13:01:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): move snippet collapsed preview component

Browse Source
This commit is contained in:
JzoNg 2026-06-23 12:01:52 +08:00
parent b9d398aff9
commit 9ca24a5b8f
2 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/app/components/main-nav/index.tsx
View File

@ -14,6 +14,7 @@ import DatasetDetailTop from '@/app/components/app-sidebar/dataset-detail-top'
import { useStore as useAppStore } from '@/app/components/app/store'
import DifyLogo from '@/app/components/base/logo/dify-logo'
import EnvNav from '@/app/components/header/env-nav'
import { SnippetCollapsedPreview } from '@/app/components/snippets/components/snippet-collapsed-preview'
import { SnippetSidebarContent } from '@/app/components/snippets/components/snippet-sidebar'
import { useSnippetDraftStore } from '@/app/components/snippets/draft-store'
import { useSnippetDetailStore } from '@/app/components/snippets/store'
@ -52,41 +53,6 @@ function SecondarySidebarHelpMenu({
)
}
function SnippetCollapsedPreview({
inputFieldCount,
}: {
inputFieldCount: number
}) {
return (
<div
className="flex min-h-0 grow flex-col items-center px-2 pt-4"
aria-label="Snippet collapsed preview"
>
<div
className="flex size-10 items-center justify-center rounded-[16px] border border-divider-subtle bg-background-default-subtle text-text-tertiary shadow-xs"
aria-hidden="true"
>
<span className="relative block size-6">
<span className="absolute top-1/2 left-1/2 h-4 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-util-colors-blue-blue-500" />
<span className="absolute top-0 left-0 size-3 rounded-md bg-util-colors-blue-blue-300 shadow-xs" />
<span className="absolute top-1/2 right-0 size-3 -translate-y-1/2 rounded-md bg-util-colors-blue-blue-600 shadow-xs" />
<span className="absolute bottom-0 left-0 size-3 rounded-md bg-util-colors-indigo-indigo-400 shadow-xs" />
</span>
</div>
<div className="my-2 h-0.5 w-8 rounded-full bg-divider-subtle" aria-hidden="true" />
<div
className="relative flex size-8 items-center justify-center rounded-[16px] border border-divider-subtle bg-background-default-subtle text-text-accent shadow-xs"
aria-label={`${inputFieldCount} input fields`}
>
<span aria-hidden="true" className="i-custom-vender-solid-development-variable-02 size-5" />
<span className="absolute -right-1.5 -bottom-1.5 flex size-5.5 items-center justify-center rounded-full border-2 border-components-panel-bg bg-state-accent-solid text-xs leading-none font-semibold text-text-primary-on-surface shadow-xs">
{inputFieldCount}
</span>
</div>
</div>
)
}
const isDatasetDetailPathname = (pathname: string) => {
const [section, datasetId, subSection, action] = pathname.split('/').filter(Boolean)

36
web/app/components/snippets/components/snippet-collapsed-preview.tsx Normal file
View File

@ -0,0 +1,36 @@
'use client'
export function SnippetCollapsedPreview({
inputFieldCount,
}: {
inputFieldCount: number
}) {
return (
<div
className="flex min-h-0 grow flex-col items-center px-2 pt-4"
aria-label="Snippet collapsed preview"
>
<div
className="flex size-10 items-center justify-center rounded-[16px] border border-divider-subtle bg-background-default-subtle text-text-tertiary shadow-xs"
aria-hidden="true"
>
<span className="relative block size-6">
<span className="absolute top-1/2 left-1/2 h-4 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-util-colors-blue-blue-500" />
<span className="absolute top-0 left-0 size-3 rounded-md bg-util-colors-blue-blue-300 shadow-xs" />
<span className="absolute top-1/2 right-0 size-3 -translate-y-1/2 rounded-md bg-util-colors-blue-blue-600 shadow-xs" />
<span className="absolute bottom-0 left-0 size-3 rounded-md bg-util-colors-indigo-indigo-400 shadow-xs" />
</span>
</div>
<div className="my-2 h-0.5 w-8 rounded-full bg-divider-subtle" aria-hidden="true" />
<div
className="relative flex size-8 items-center justify-center rounded-[16px] border border-divider-subtle bg-background-default-subtle text-text-accent shadow-xs"
aria-label={`${inputFieldCount} input fields`}
>
<span aria-hidden="true" className="i-custom-vender-solid-development-variable-02 size-5" />
<span className="absolute -right-1.5 -bottom-1.5 flex size-5.5 items-center justify-center rounded-full border-2 border-components-panel-bg bg-state-accent-solid text-xs leading-none font-semibold text-text-primary-on-surface shadow-xs">
{inputFieldCount}
</span>
</div>
</div>
)
}