mirror of
https://github.com/langgenius/dify.git
synced 2026-05-12 15:58:19 +08:00
fix: align main nav interactions
Update active main nav icon positioning from the refreshed Figma assets, remove the transparent active border that caused nav item jitter, and route mobile common layout through the new MainNav instead of the legacy Header. Also align workspace plan actions with the new UI contract by showing Upgrade for sandbox workspaces and View Plan for paid workspaces, both opening the pricing modal.
This commit is contained in:
Jingyi-Dify
parent
b20de089ce
commit
15292ba527
@ -1,5 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-5.5 -7.3)">
|
||||
<g transform="translate(-5.5 -6.95)">
|
||||
<path d="M14.449 8.37314C15.0613 7.87562 15.9387 7.87562 16.551 8.37314L22.3843 13.1127C22.7738 13.4292 23 13.9044 23 14.4063V22.7596C23 23.6801 22.2538 24.4263 21.3333 24.4263H18.8333V17.7599C18.8333 17.2997 18.4602 16.9266 18 16.9266H13C12.5398 16.9266 12.1667 17.2997 12.1667 17.7599V24.4263H9.66667C8.74619 24.4263 8 23.6801 8 22.7596V14.4063C8 13.9044 8.22616 13.4292 8.61568 13.1127L14.449 8.37314Z" fill="currentColor"/>
|
||||
<path d="M13.833 24.4263H17.1663V18.5933H13.833V24.4263Z" fill="currentColor"/>
|
||||
</g>
|
||||
|
||||
|
Before Width: | Height: | Size: 665 B After Width: | Height: | Size: 666 B |
@ -1,5 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-6.33 -5.5)">
|
||||
<g transform="translate(-6.33 -5.55)">
|
||||
<path d="M9.66602 8.83333C9.66602 8.3731 10.0391 8 10.4993 8H14.666C15.1263 8 15.4993 8.3731 15.4993 8.83333V10.5H9.66602V8.83333Z" fill="currentColor"/>
|
||||
<path d="M17.166 8.83333C17.166 8.3731 17.5391 8 17.9993 8H22.166C22.6263 8 22.9993 8.3731 22.9993 8.83333V10.5H17.166V8.83333Z" fill="currentColor"/>
|
||||
<path d="M8 13.0001C8 12.5398 8.3731 12.1667 8.83333 12.1667H23.8333C24.2936 12.1667 24.6667 12.5398 24.6667 13.0001V21.3334C24.6667 21.7937 24.2936 22.1667 23.8333 22.1667H8.83333C8.3731 22.1667 8 21.7937 8 21.3334V13.0001Z" fill="currentColor"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 715 B After Width: | Height: | Size: 716 B |
@ -1,5 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-7.14 -5.08)">
|
||||
<g transform="translate(-7.14 -6.38)">
|
||||
<path d="M13.7969 17.1665C14.465 17.1665 15.1067 17.2803 15.7045 17.4872L14.7247 20.9165H12.9636C11.8131 20.9167 10.8803 21.8493 10.8803 22.9998C10.8803 23.2963 10.9436 23.5778 11.0552 23.8332H8.79695C8.33682 23.833 7.95953 23.4587 8.00349 23.0007C8.30296 19.8813 10.2937 17.1666 13.7969 17.1665Z" fill="currentColor"/>
|
||||
<path d="M25.4632 16.3333C25.7246 16.3333 25.9715 16.4558 26.1289 16.6645C26.2668 16.8473 26.3224 17.0777 26.286 17.3008L26.2648 17.3953L24.5981 23.2286C24.4959 23.5863 24.1686 23.8333 23.7965 23.8333H12.9632C12.5031 23.8331 12.1299 23.4601 12.1299 22.9999C12.1299 22.5398 12.5031 22.1668 12.9632 22.1666H15.6675L17.1616 16.9379L17.2105 16.8093C17.3465 16.5223 17.6376 16.3333 17.9632 16.3333H25.4632Z" fill="currentColor"/>
|
||||
<path d="M14.2132 9.25C16.0541 9.25 17.5465 10.7424 17.5465 12.5833C17.5465 14.4243 16.0541 15.9167 14.2132 15.9167C12.3724 15.9165 10.8799 14.4242 10.8799 12.5833C10.8799 10.7425 12.3724 9.25013 14.2132 9.25Z" fill="currentColor"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"prefix": "custom-vender",
|
||||
"lastModified": 1778201271,
|
||||
"lastModified": 1778535177,
|
||||
"icons": {
|
||||
"features-citations": {
|
||||
"body": "<g fill=\"none\"><path d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM7 11.9702V14.958H11.0356V11.2339H8.8125C8.78418 10.8185 8.85498 10.4173 9.0249 10.0303C9.35531 9.29395 10.002 8.77474 10.9648 8.47266V7C9.67155 7.25488 8.68506 7.79297 8.00537 8.61426C7.33512 9.43555 7 10.5542 7 11.9702ZM15.0391 10.0586C15.3695 9.29395 16.0114 8.7653 16.9648 8.47266V7C15.7093 7.25488 14.7323 7.78825 14.0337 8.6001C13.3446 9.41195 13 10.5353 13 11.9702V14.958H17.0356V11.2339H14.8125C14.7747 10.8563 14.8503 10.4645 15.0391 10.0586Z\" fill=\"currentColor\"/></g>",
|
||||
@ -697,7 +697,7 @@
|
||||
"height": 20
|
||||
},
|
||||
"main-nav-home-active": {
|
||||
"body": "<g fill=\"none\"><g transform=\"translate(-5.5 -7.3)\"><path d=\"M14.449 8.37314C15.0613 7.87562 15.9387 7.87562 16.551 8.37314L22.3843 13.1127C22.7738 13.4292 23 13.9044 23 14.4063V22.7596C23 23.6801 22.2538 24.4263 21.3333 24.4263H18.8333V17.7599C18.8333 17.2997 18.4602 16.9266 18 16.9266H13C12.5398 16.9266 12.1667 17.2997 12.1667 17.7599V24.4263H9.66667C8.74619 24.4263 8 23.6801 8 22.7596V14.4063C8 13.9044 8.22616 13.4292 8.61568 13.1127L14.449 8.37314Z\" fill=\"currentColor\"/><path d=\"M13.833 24.4263H17.1663V18.5933H13.833V24.4263Z\" fill=\"currentColor\"/></g></g>",
|
||||
"body": "<g fill=\"none\"><g transform=\"translate(-5.5 -6.95)\"><path d=\"M14.449 8.37314C15.0613 7.87562 15.9387 7.87562 16.551 8.37314L22.3843 13.1127C22.7738 13.4292 23 13.9044 23 14.4063V22.7596C23 23.6801 22.2538 24.4263 21.3333 24.4263H18.8333V17.7599C18.8333 17.2997 18.4602 16.9266 18 16.9266H13C12.5398 16.9266 12.1667 17.2997 12.1667 17.7599V24.4263H9.66667C8.74619 24.4263 8 23.6801 8 22.7596V14.4063C8 13.9044 8.22616 13.4292 8.61568 13.1127L14.449 8.37314Z\" fill=\"currentColor\"/><path d=\"M13.833 24.4263H17.1663V18.5933H13.833V24.4263Z\" fill=\"currentColor\"/></g></g>",
|
||||
"width": 20,
|
||||
"height": 20
|
||||
},
|
||||
@ -707,7 +707,7 @@
|
||||
"height": 20
|
||||
},
|
||||
"main-nav-integrations-active": {
|
||||
"body": "<g fill=\"none\"><g transform=\"translate(-6.33 -5.5)\"><path d=\"M9.66602 8.83333C9.66602 8.3731 10.0391 8 10.4993 8H14.666C15.1263 8 15.4993 8.3731 15.4993 8.83333V10.5H9.66602V8.83333Z\" fill=\"currentColor\"/><path d=\"M17.166 8.83333C17.166 8.3731 17.5391 8 17.9993 8H22.166C22.6263 8 22.9993 8.3731 22.9993 8.83333V10.5H17.166V8.83333Z\" fill=\"currentColor\"/><path d=\"M8 13.0001C8 12.5398 8.3731 12.1667 8.83333 12.1667H23.8333C24.2936 12.1667 24.6667 12.5398 24.6667 13.0001V21.3334C24.6667 21.7937 24.2936 22.1667 23.8333 22.1667H8.83333C8.3731 22.1667 8 21.7937 8 21.3334V13.0001Z\" fill=\"currentColor\"/></g></g>",
|
||||
"body": "<g fill=\"none\"><g transform=\"translate(-6.33 -5.55)\"><path d=\"M9.66602 8.83333C9.66602 8.3731 10.0391 8 10.4993 8H14.666C15.1263 8 15.4993 8.3731 15.4993 8.83333V10.5H9.66602V8.83333Z\" fill=\"currentColor\"/><path d=\"M17.166 8.83333C17.166 8.3731 17.5391 8 17.9993 8H22.166C22.6263 8 22.9993 8.3731 22.9993 8.83333V10.5H17.166V8.83333Z\" fill=\"currentColor\"/><path d=\"M8 13.0001C8 12.5398 8.3731 12.1667 8.83333 12.1667H23.8333C24.2936 12.1667 24.6667 12.5398 24.6667 13.0001V21.3334C24.6667 21.7937 24.2936 22.1667 23.8333 22.1667H8.83333C8.3731 22.1667 8 21.7937 8 21.3334V13.0001Z\" fill=\"currentColor\"/></g></g>",
|
||||
"width": 20,
|
||||
"height": 20
|
||||
},
|
||||
@ -742,7 +742,7 @@
|
||||
"height": 20
|
||||
},
|
||||
"main-nav-studio-active": {
|
||||
"body": "<g fill=\"none\"><g transform=\"translate(-7.14 -5.08)\"><path d=\"M13.7969 17.1665C14.465 17.1665 15.1067 17.2803 15.7045 17.4872L14.7247 20.9165H12.9636C11.8131 20.9167 10.8803 21.8493 10.8803 22.9998C10.8803 23.2963 10.9436 23.5778 11.0552 23.8332H8.79695C8.33682 23.833 7.95953 23.4587 8.00349 23.0007C8.30296 19.8813 10.2937 17.1666 13.7969 17.1665Z\" fill=\"currentColor\"/><path d=\"M25.4632 16.3333C25.7246 16.3333 25.9715 16.4558 26.1289 16.6645C26.2668 16.8473 26.3224 17.0777 26.286 17.3008L26.2648 17.3953L24.5981 23.2286C24.4959 23.5863 24.1686 23.8333 23.7965 23.8333H12.9632C12.5031 23.8331 12.1299 23.4601 12.1299 22.9999C12.1299 22.5398 12.5031 22.1668 12.9632 22.1666H15.6675L17.1616 16.9379L17.2105 16.8093C17.3465 16.5223 17.6376 16.3333 17.9632 16.3333H25.4632Z\" fill=\"currentColor\"/><path d=\"M14.2132 9.25C16.0541 9.25 17.5465 10.7424 17.5465 12.5833C17.5465 14.4243 16.0541 15.9167 14.2132 15.9167C12.3724 15.9165 10.8799 14.4242 10.8799 12.5833C10.8799 10.7425 12.3724 9.25013 14.2132 9.25Z\" fill=\"currentColor\"/><path d=\"M22.5474 8C22.7539 8.00029 22.9276 8.15533 22.951 8.36052C23.0941 9.62402 23.8103 10.3975 25.093 10.5114C25.3029 10.53 25.4635 10.7067 25.4632 10.9175C25.4628 11.128 25.3019 11.3037 25.0921 11.3219C23.8276 11.4314 23.0613 12.1977 22.9518 13.4622C22.9335 13.672 22.758 13.833 22.5474 13.8333C22.3367 13.8336 22.1609 13.6728 22.1421 13.4631C22.0281 12.1805 21.2546 11.4635 19.9912 11.3203C19.786 11.2971 19.6303 11.124 19.6299 10.9175C19.6297 10.7108 19.7851 10.5367 19.9904 10.513C21.2719 10.3651 21.9951 9.64128 22.1429 8.3597C22.1667 8.15453 22.3408 7.99979 22.5474 8Z\" fill=\"currentColor\"/></g></g>",
|
||||
"body": "<g fill=\"none\"><g transform=\"translate(-7.14 -6.38)\"><path d=\"M13.7969 17.1665C14.465 17.1665 15.1067 17.2803 15.7045 17.4872L14.7247 20.9165H12.9636C11.8131 20.9167 10.8803 21.8493 10.8803 22.9998C10.8803 23.2963 10.9436 23.5778 11.0552 23.8332H8.79695C8.33682 23.833 7.95953 23.4587 8.00349 23.0007C8.30296 19.8813 10.2937 17.1666 13.7969 17.1665Z\" fill=\"currentColor\"/><path d=\"M25.4632 16.3333C25.7246 16.3333 25.9715 16.4558 26.1289 16.6645C26.2668 16.8473 26.3224 17.0777 26.286 17.3008L26.2648 17.3953L24.5981 23.2286C24.4959 23.5863 24.1686 23.8333 23.7965 23.8333H12.9632C12.5031 23.8331 12.1299 23.4601 12.1299 22.9999C12.1299 22.5398 12.5031 22.1668 12.9632 22.1666H15.6675L17.1616 16.9379L17.2105 16.8093C17.3465 16.5223 17.6376 16.3333 17.9632 16.3333H25.4632Z\" fill=\"currentColor\"/><path d=\"M14.2132 9.25C16.0541 9.25 17.5465 10.7424 17.5465 12.5833C17.5465 14.4243 16.0541 15.9167 14.2132 15.9167C12.3724 15.9165 10.8799 14.4242 10.8799 12.5833C10.8799 10.7425 12.3724 9.25013 14.2132 9.25Z\" fill=\"currentColor\"/><path d=\"M22.5474 8C22.7539 8.00029 22.9276 8.15533 22.951 8.36052C23.0941 9.62402 23.8103 10.3975 25.093 10.5114C25.3029 10.53 25.4635 10.7067 25.4632 10.9175C25.4628 11.128 25.3019 11.3037 25.0921 11.3219C23.8276 11.4314 23.0613 12.1977 22.9518 13.4622C22.9335 13.672 22.758 13.833 22.5474 13.8333C22.3367 13.8336 22.1609 13.6728 22.1421 13.4631C22.0281 12.1805 21.2546 11.4635 19.9912 11.3203C19.786 11.2971 19.6303 11.124 19.6299 10.9175C19.6297 10.7108 19.7851 10.5367 19.9904 10.513C21.2719 10.3651 21.9951 9.64128 22.1429 8.3597C22.1667 8.15453 22.3408 7.99979 22.5474 8Z\" fill=\"currentColor\"/></g></g>",
|
||||
"width": 20,
|
||||
"height": 20
|
||||
},
|
||||
|
||||
@ -154,9 +154,9 @@ const appContextValue: AppContextValue = {
|
||||
isValidatingCurrentWorkspace: false,
|
||||
}
|
||||
|
||||
const renderMainNav = () => renderWithSystemFeatures(<MainNav />, {
|
||||
systemFeatures: { branding: { enabled: false } },
|
||||
})
|
||||
const renderMainNav = (
|
||||
systemFeatures = { branding: { enabled: false } },
|
||||
) => renderWithSystemFeatures(<MainNav />, { systemFeatures })
|
||||
|
||||
describe('MainNav', () => {
|
||||
beforeEach(() => {
|
||||
@ -321,7 +321,6 @@ describe('MainNav', () => {
|
||||
const homeLink = screen.getByRole('link', { name: /common.mainNav.home/ })
|
||||
|
||||
expect(homeLink).toHaveClass(
|
||||
'border-transparent',
|
||||
'backdrop-blur-[5px]',
|
||||
'text-saas-dify-blue-inverted',
|
||||
activeEdgeClassName,
|
||||
@ -357,13 +356,19 @@ describe('MainNav', () => {
|
||||
expect(mockPush).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('opens workspace settings, members, provider credits, upgrade, and workspace switching actions', async () => {
|
||||
it('hides the help menu when branding is enabled', () => {
|
||||
renderMainNav({ branding: { enabled: true } })
|
||||
|
||||
expect(screen.queryByRole('button', { name: 'common.mainNav.help.openMenu' })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('opens workspace settings, members, provider credits, plan, and workspace switching actions', async () => {
|
||||
renderMainNav()
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /common\.mainNav\.workspace\.credits|7,500 credits/ }))
|
||||
expect(mockSetShowAccountSettingModal).toHaveBeenCalledWith({ payload: ACCOUNT_SETTING_TAB.PROVIDER })
|
||||
|
||||
fireEvent.click(screen.getByText('billing.upgradeBtn.encourageShort'))
|
||||
fireEvent.click(screen.getByText('billing.upgradeBtn.plain'))
|
||||
expect(mockSetShowPricingModal).toHaveBeenCalled()
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'common.mainNav.workspace.openMenu' }))
|
||||
@ -381,7 +386,20 @@ describe('MainNav', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('hides the upgrade shortcut for paid plans', () => {
|
||||
it('shows the upgrade shortcut for sandbox workspaces', () => {
|
||||
;(useWorkspacesContext as Mock).mockReturnValue({
|
||||
workspaces: [
|
||||
{ id: 'workspace-1', name: 'Solar Studio', plan: Plan.sandbox, status: 'normal', created_at: 0, current: true },
|
||||
],
|
||||
})
|
||||
|
||||
renderMainNav()
|
||||
|
||||
expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
|
||||
expect(screen.queryByText('billing.upgradeBtn.plain')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows the view plan shortcut for paid workspaces', () => {
|
||||
;(useProviderContext as Mock).mockReturnValue({
|
||||
enableBilling: true,
|
||||
isEducationAccount: false,
|
||||
@ -393,6 +411,9 @@ describe('MainNav', () => {
|
||||
renderMainNav()
|
||||
|
||||
expect(screen.queryByText('billing.upgradeBtn.encourageShort')).not.toBeInTheDocument()
|
||||
fireEvent.click(screen.getByText('billing.upgradeBtn.plain'))
|
||||
expect(mockSetShowPricingModal).toHaveBeenCalled()
|
||||
expect(mockSetShowAccountSettingModal).not.toHaveBeenCalledWith({ payload: ACCOUNT_SETTING_TAB.BILLING })
|
||||
})
|
||||
|
||||
it('limits workspace settings and invite actions by role', async () => {
|
||||
|
||||
@ -58,14 +58,14 @@ describe('MainNavLayout', () => {
|
||||
expect(screen.getByText('content')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('keeps the current header on mobile', () => {
|
||||
it('uses the main nav on mobile too', () => {
|
||||
mockMediaType = MediaType.mobile
|
||||
|
||||
render(<MainNavLayout><div>content</div></MainNavLayout>)
|
||||
|
||||
expect(screen.getByTestId('header-wrapper')).toBeInTheDocument()
|
||||
expect(screen.getByTestId('desktop-header')).toBeInTheDocument()
|
||||
expect(screen.queryByTestId('main-nav')).not.toBeInTheDocument()
|
||||
expect(screen.getByTestId('main-nav')).toBeInTheDocument()
|
||||
expect(screen.queryByTestId('header-wrapper')).not.toBeInTheDocument()
|
||||
expect(screen.queryByTestId('desktop-header')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('hides the desktop main nav on fullscreen workflow canvases', () => {
|
||||
|
||||
@ -36,6 +36,9 @@ const HelpMenu = () => {
|
||||
const [aboutVisible, setAboutVisible] = useState(false)
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
if (systemFeatures.branding.enabled)
|
||||
return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu open={open} onOpenChange={setOpen}>
|
||||
@ -54,76 +57,74 @@ const HelpMenu = () => {
|
||||
sideOffset={8}
|
||||
popupClassName="w-60 overflow-hidden bg-components-panel-bg-blur! p-0! backdrop-blur-[5px]"
|
||||
>
|
||||
{!systemFeatures.branding.enabled && (
|
||||
<>
|
||||
<DropdownMenuGroup className="p-1">
|
||||
<DropdownMenuLinkItem href={docLink('/use-dify/getting-started/introduction')} target="_blank" rel="noopener noreferrer" className="mx-0 h-8 gap-1 px-3 py-1">
|
||||
<>
|
||||
<DropdownMenuGroup className="p-1">
|
||||
<DropdownMenuLinkItem href={docLink('/use-dify/getting-started/introduction')} target="_blank" rel="noopener noreferrer" className="mx-0 h-8 gap-1 px-3 py-1">
|
||||
<MenuItemContent
|
||||
iconClassName="i-ri-book-open-line"
|
||||
label={t('mainNav.help.docs', { ns: 'common' })}
|
||||
trailing={<ExternalLinkIndicator />}
|
||||
/>
|
||||
</DropdownMenuLinkItem>
|
||||
<div className="mx-0 flex h-8 items-center gap-1 rounded-lg py-1 pr-2 pl-3">
|
||||
<span aria-hidden className="i-custom-vender-workflow-docs-extractor size-4 shrink-0 text-text-tertiary" />
|
||||
<span className="min-w-0 flex-1 truncate px-1 py-0.5 system-md-regular text-text-secondary">
|
||||
{t('mainNav.help.learnDify', { ns: 'common' })}
|
||||
</span>
|
||||
<Switch
|
||||
size="md"
|
||||
checked={!learnDifyHidden}
|
||||
aria-label={t('mainNav.help.learnDify', { ns: 'common' })}
|
||||
onClick={event => event.stopPropagation()}
|
||||
onCheckedChange={checked => setLearnDifyHidden(!checked)}
|
||||
/>
|
||||
</div>
|
||||
<Support closeAccountDropdown={() => setOpen(false)} />
|
||||
{IS_CLOUD_EDITION && isCurrentWorkspaceOwner && <Compliance />}
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator className="my-0!" />
|
||||
<DropdownMenuGroup className="p-1">
|
||||
<DropdownMenuLinkItem href="https://roadmap.dify.ai" target="_blank" rel="noopener noreferrer" className="mx-0 h-8 gap-1 px-3 py-1.5">
|
||||
<MenuItemContent
|
||||
iconClassName="i-ri-map-2-line"
|
||||
label={t('userProfile.roadmap', { ns: 'common' })}
|
||||
trailing={<ExternalLinkIndicator />}
|
||||
/>
|
||||
</DropdownMenuLinkItem>
|
||||
<DropdownMenuLinkItem href="https://github.com/langgenius/dify" target="_blank" rel="noopener noreferrer" className="mx-0 h-8 gap-1 px-3 py-1.5">
|
||||
<MenuItemContent
|
||||
iconClassName="i-ri-github-line"
|
||||
label={t('userProfile.github', { ns: 'common' })}
|
||||
trailing={(
|
||||
<div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
|
||||
<span aria-hidden className="i-ri-star-line size-3 shrink-0 text-text-tertiary" />
|
||||
<GithubStar className="system-2xs-medium-uppercase text-text-tertiary" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</DropdownMenuLinkItem>
|
||||
{env.NEXT_PUBLIC_SITE_ABOUT !== 'hide' && (
|
||||
<DropdownMenuItem
|
||||
className="mx-0 h-8 gap-1 px-3 py-1.5"
|
||||
onClick={() => {
|
||||
setAboutVisible(true)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<MenuItemContent
|
||||
iconClassName="i-ri-book-open-line"
|
||||
label={t('mainNav.help.docs', { ns: 'common' })}
|
||||
trailing={<ExternalLinkIndicator />}
|
||||
/>
|
||||
</DropdownMenuLinkItem>
|
||||
<div className="mx-0 flex h-8 items-center gap-1 rounded-lg py-1 pr-2 pl-3">
|
||||
<span aria-hidden className="i-custom-vender-workflow-docs-extractor size-4 shrink-0 text-text-tertiary" />
|
||||
<span className="min-w-0 flex-1 truncate px-1 py-0.5 system-md-regular text-text-secondary">
|
||||
{t('mainNav.help.learnDify', { ns: 'common' })}
|
||||
</span>
|
||||
<Switch
|
||||
size="md"
|
||||
checked={!learnDifyHidden}
|
||||
aria-label={t('mainNav.help.learnDify', { ns: 'common' })}
|
||||
onClick={event => event.stopPropagation()}
|
||||
onCheckedChange={checked => setLearnDifyHidden(!checked)}
|
||||
/>
|
||||
</div>
|
||||
<Support closeAccountDropdown={() => setOpen(false)} />
|
||||
{IS_CLOUD_EDITION && isCurrentWorkspaceOwner && <Compliance />}
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator className="my-0!" />
|
||||
<DropdownMenuGroup className="p-1">
|
||||
<DropdownMenuLinkItem href="https://roadmap.dify.ai" target="_blank" rel="noopener noreferrer" className="mx-0 h-8 gap-1 px-3 py-1.5">
|
||||
<MenuItemContent
|
||||
iconClassName="i-ri-map-2-line"
|
||||
label={t('userProfile.roadmap', { ns: 'common' })}
|
||||
trailing={<ExternalLinkIndicator />}
|
||||
/>
|
||||
</DropdownMenuLinkItem>
|
||||
<DropdownMenuLinkItem href="https://github.com/langgenius/dify" target="_blank" rel="noopener noreferrer" className="mx-0 h-8 gap-1 px-3 py-1.5">
|
||||
<MenuItemContent
|
||||
iconClassName="i-ri-github-line"
|
||||
label={t('userProfile.github', { ns: 'common' })}
|
||||
iconClassName="i-ri-information-2-line"
|
||||
label={t('userProfile.about', { ns: 'common' })}
|
||||
trailing={(
|
||||
<div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
|
||||
<span aria-hidden className="i-ri-star-line size-3 shrink-0 text-text-tertiary" />
|
||||
<GithubStar className="system-2xs-medium-uppercase text-text-tertiary" />
|
||||
<div className="flex shrink-0 items-center">
|
||||
<div className="mr-2 system-xs-regular text-text-tertiary">{t('about.version', { ns: 'common', version: langGeniusVersionInfo.current_version })}</div>
|
||||
<Indicator color={langGeniusVersionInfo.current_version === langGeniusVersionInfo.latest_version ? 'green' : 'orange'} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</DropdownMenuLinkItem>
|
||||
{env.NEXT_PUBLIC_SITE_ABOUT !== 'hide' && (
|
||||
<DropdownMenuItem
|
||||
className="mx-0 h-8 gap-1 px-3 py-1.5"
|
||||
onClick={() => {
|
||||
setAboutVisible(true)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<MenuItemContent
|
||||
iconClassName="i-ri-information-2-line"
|
||||
label={t('userProfile.about', { ns: 'common' })}
|
||||
trailing={(
|
||||
<div className="flex shrink-0 items-center">
|
||||
<div className="mr-2 system-xs-regular text-text-tertiary">{t('about.version', { ns: 'common', version: langGeniusVersionInfo.current_version })}</div>
|
||||
<Indicator color={langGeniusVersionInfo.current_version === langGeniusVersionInfo.latest_version ? 'green' : 'orange'} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuGroup>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuGroup>
|
||||
</>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{aboutVisible && <AccountAbout onCancel={() => setAboutVisible(false)} langGeniusVersionInfo={langGeniusVersionInfo} />}
|
||||
|
||||
@ -7,7 +7,7 @@ import Link from '@/next/link'
|
||||
const navItemClassName = 'group relative flex h-9 items-center gap-2 rounded-xl p-2 transition-colors'
|
||||
|
||||
const activeNavItemClassName = cn(
|
||||
'overflow-hidden border border-transparent',
|
||||
'overflow-hidden',
|
||||
'bg-[linear-gradient(98.077deg,rgba(0,51,255,0.08)_0%,rgba(0,51,255,0.12)_17.98%,rgba(0,51,255,0.1)_58.75%,rgba(0,51,255,0.08)_101.09%)]',
|
||||
'system-md-semibold text-saas-dify-blue-inverted backdrop-blur-[5px]',
|
||||
'shadow-[0px_4px_8px_0px_rgba(255,255,255,0),0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03),0px_10px_16px_-4px_rgba(0,51,255,0.06)]',
|
||||
|
||||
@ -60,18 +60,16 @@ const WorkspaceCard = () => {
|
||||
const credits = getRemainingCredits(currentWorkspace.trial_credits, currentWorkspace.trial_credits_used)
|
||||
const formattedCredits = formatCredits(credits)
|
||||
const workspacePlan = (workspaces.find(workspace => workspace.current)?.plan || currentWorkspace.plan || plan.type) as Plan
|
||||
const isFreePlan = plan.type === Plan.sandbox
|
||||
const isFreePlan = workspacePlan === Plan.sandbox
|
||||
const showCloudBilling = IS_CLOUD_EDITION && enableBilling
|
||||
const showUpgradeAction = showCloudBilling && isFreePlan
|
||||
const showPlanAction = showCloudBilling
|
||||
const planActionLabel = t(isFreePlan ? 'upgradeBtn.encourageShort' : 'upgradeBtn.plain', { ns: 'billing' })
|
||||
const showWorkspaceSettings = !isCurrentWorkspaceDatasetOperator
|
||||
const showInviteMembers = showWorkspaceSettings && isCurrentWorkspaceManager
|
||||
const renderWorkspaceStatus = () => enableBilling ? <WorkspacePlanBadge plan={workspacePlan} /> : <LicenseNav />
|
||||
|
||||
const handlePlanClick = () => {
|
||||
if (isFreePlan)
|
||||
setShowPricingModal()
|
||||
else
|
||||
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
|
||||
setShowPricingModal()
|
||||
}
|
||||
|
||||
const handleSwitchWorkspace = async (tenant_id: string) => {
|
||||
@ -135,17 +133,17 @@ const WorkspaceCard = () => {
|
||||
<span className="truncate system-xs-medium" title={formattedCredits}>{formattedCredits}</span>
|
||||
<span className="shrink-0 system-xs-regular">{t('mainNav.workspace.creditsUnit', { ns: 'common' })}</span>
|
||||
</button>
|
||||
{showUpgradeAction && (
|
||||
{showPlanAction && (
|
||||
<button
|
||||
type="button"
|
||||
className="max-w-[120px] shrink-0 truncate px-1 system-xs-semibold-uppercase text-saas-dify-blue-accessible transition-colors hover:text-saas-dify-blue-static-hover"
|
||||
title={t('upgradeBtn.encourageShort', { ns: 'billing' })}
|
||||
title={planActionLabel}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handlePlanClick()
|
||||
}}
|
||||
>
|
||||
{t('upgradeBtn.encourageShort', { ns: 'billing' })}
|
||||
{planActionLabel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -4,11 +4,8 @@ import type { ReactNode } from 'react'
|
||||
import type { EventEmitterValue } from '@/context/event-emitter'
|
||||
import { cn } from '@langgenius/dify-ui/cn'
|
||||
import { useState } from 'react'
|
||||
import Header from '@/app/components/header'
|
||||
import HeaderWrapper from '@/app/components/header/header-wrapper'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
import { WorkspaceProvider } from '@/context/workspace-context-provider'
|
||||
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
||||
import { usePathname } from '@/next/navigation'
|
||||
import MainNav from './index'
|
||||
|
||||
@ -19,8 +16,6 @@ type MainNavLayoutProps = {
|
||||
const MainNavLayout = ({
|
||||
children,
|
||||
}: MainNavLayoutProps) => {
|
||||
const media = useBreakpoints()
|
||||
const isMobile = media === MediaType.mobile
|
||||
const pathname = usePathname()
|
||||
const inWorkflowCanvas = pathname.endsWith('/workflow')
|
||||
const isPipelineCanvas = pathname.endsWith('/pipeline')
|
||||
@ -34,17 +29,6 @@ const MainNavLayout = ({
|
||||
setHideMainNav(v.payload)
|
||||
})
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<>
|
||||
<HeaderWrapper>
|
||||
<Header />
|
||||
</HeaderWrapper>
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-0 min-h-0 grow overflow-hidden bg-background-body">
|
||||
<WorkspaceProvider>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user