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): add snippet collapsed nav preview

Browse Source
This commit is contained in:
JzoNg 2026-06-23 11:47:40 +08:00
parent 85edb8c73e
commit 1f593d4f9b
2 changed files with 49 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/main-nav/__tests__/index.spec.tsx
View File

@ -677,6 +677,8 @@ describe('MainNav', () => {
expect(screen.getByRole('complementary')).toHaveClass('p-1')
expect(screen.getByTestId('snippet-detail-top')).toHaveAttribute('data-expand', 'false')
expect(screen.queryByTestId('snippet-sidebar-content')).not.toBeInTheDocument()
expect(screen.getByLabelText('Snippet collapsed preview')).toBeInTheDocument()
expect(screen.getByLabelText('1 input fields')).toBeInTheDocument()
expect(localStorage.getItem(DETAIL_SIDEBAR_STORAGE_KEY)).toBe('collapse')
})

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

@ -52,6 +52,41 @@ function SecondarySidebarHelpMenu({
)
}
function SnippetCollapsedPreview({
inputFieldCount,
}: {
inputFieldCount: number
}) {
return (
<div
className="flex min-h-0 grow flex-col items-center px-2 pt-12"
aria-label="Snippet collapsed preview"
>
<div
className="flex size-11 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-12 h-0.5 w-8 rounded-full bg-divider-subtle" aria-hidden="true" />
<div
className="relative flex size-11 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-6" />
<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)
@ -304,16 +339,18 @@ const MainNav = ({
? <AgentDetailSection expand={detailNavigationVisibleExpanded} />
: showDeploymentDetailNavigation
? <DeploymentDetailSection expand={detailNavigationVisibleExpanded} />
: detailNavigationVisibleExpanded && snippetNavigation.snippet && snippetNavigation.onFieldsChange
? (
<SnippetSidebarContent
snippet={snippetNavigation.snippet}
fields={snippetInputFields}
readonly={snippetNavigation.readonly}
onFieldsChange={snippetNavigation.onFieldsChange}
/>
)
: null
: detailNavigationVisibleExpanded
? snippetNavigation.snippet && snippetNavigation.onFieldsChange
? (
<SnippetSidebarContent
snippet={snippetNavigation.snippet}
fields={snippetInputFields}
readonly={snippetNavigation.readonly}
onFieldsChange={snippetNavigation.onFieldsChange}
/>
)
: null
: <SnippetCollapsedPreview inputFieldCount={snippetInputFields.length} />
: (
<>
<nav className="flex flex-col gap-px p-2">