estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: responsive header (#21115)

Browse Source
This commit is contained in:
zxhlyh
2025-06-17 17:37:06 +08:00
committed by GitHub
parent 0dcacdf83d
commit fc187d6998
9 changed files with 211 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/app/components/header/account-dropdown/workplace-selector/index.tsx
View File

@@ -31,22 +31,22 @@ const WorkplaceSelector = () => {
} }
return ( return (
<Menu as="div" className="relative h-full w-full"> <Menu as="div" className="min-w-0">
{ {
({ open }) => ( ({ open }) => (
<> <>
<MenuButton className={cn( <MenuButton className={cn(
` `
group flex w-full cursor-pointer items-center group flex w-full cursor-pointer items-center
gap-1.5 p-0.5 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} rounded-[10px] p-0.5 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} rounded-[10px]
`, `,
)}> )}>
<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'> <div className='mr-1.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px] max-[800px]:mr-0'>
<span className='h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90'>{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span> <span className='h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90'>{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
</div> </div>
<div className='flex flex-row'> <div className='flex min-w-0 items-center'>
<div className={'system-sm-medium max-w-[160px] truncate text-text-secondary'}>{currentWorkspace?.name}</div> <div className={'system-sm-medium min-w-0 max-w-[149px] truncate text-text-secondary max-[800px]:hidden'}>{currentWorkspace?.name}</div>
<RiArrowDownSLine className='h-4 w-4 text-text-secondary' /> <RiArrowDownSLine className='h-4 w-4 shrink-0 text-text-secondary' />
</div> </div>
</MenuButton> </MenuButton>
<Transition <Transition
@@ -59,10 +59,11 @@ const WorkplaceSelector = () => {
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<MenuItems <MenuItems
anchor="bottom start"
className={cn( className={cn(
` `
shadows-shadow-lg absolute left-[-15px] mt-1 flex max-h-[400px] w-[280px] flex-col items-start overflow-y-auto rounded-xl shadows-shadow-lg absolute left-[-15px] z-[1000] mt-1 flex max-h-[400px] w-[280px] flex-col items-start overflow-y-auto
bg-components-panel-bg-blur backdrop-blur-[5px] rounded-xl bg-components-panel-bg-blur backdrop-blur-[5px]
`, `,
)} )}
> >
@@ -73,7 +74,7 @@ const WorkplaceSelector = () => {
{ {
workspaces.map(workspace => ( workspaces.map(workspace => (
<div className='flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}> <div className='flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
<div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'> <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'>
<span className='h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90'>{workspace?.name[0]?.toLocaleUpperCase()}</span> <span className='h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90'>{workspace?.name[0]?.toLocaleUpperCase()}</span>
</div> </div>
<div className='system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary'>{workspace.name}</div> <div className='system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary'>{workspace.name}</div>

4
web/app/components/header/app-nav/index.tsx
View File

@@ -96,7 +96,7 @@ const AppNav = () => {
link, link,
} }
}) })
setNavItems(navItems) setNavItems(navItems as any)
} }
}, [appsData, isCurrentWorkspaceEditor, setNavItems]) }, [appsData, isCurrentWorkspaceEditor, setNavItems])
@@ -122,7 +122,7 @@ const AppNav = () => {
text={t('common.menus.apps')} text={t('common.menus.apps')}
activeSegment={['apps', 'app']} activeSegment={['apps', 'app']}
link='/apps' link='/apps'
curNav={appDetail} curNav={appDetail as any}
navs={navItems} navs={navItems}
createText={t('common.menus.newApp')} createText={t('common.menus.newApp')}
onCreate={openModal} onCreate={openModal}

3
web/app/components/header/dataset-nav/index.tsx
View File

@@ -48,7 +48,7 @@ const DatasetNav = () => {
text={t('common.menus.datasets')} text={t('common.menus.datasets')}
activeSegment='datasets' activeSegment='datasets'
link='/datasets' link='/datasets'
curNav={currentDataset as Omit<NavItem, 'link'>} curNav={currentDataset as any}
navs={datasetItems.map(dataset => ({ navs={datasetItems.map(dataset => ({
id: dataset.id, id: dataset.id,
name: dataset.name, name: dataset.name,
@@ -59,6 +59,7 @@ const DatasetNav = () => {
createText={t('common.menus.newDataset')} createText={t('common.menus.newDataset')}
onCreate={() => router.push(`${basePath}/datasets/create`)} onCreate={() => router.push(`${basePath}/datasets/create`)}
onLoadmore={handleLoadmore} onLoadmore={handleLoadmore}
isApp={false}
/> />
) )
} }

10
web/app/components/header/env-nav/index.tsx
View File

@@ -20,22 +20,22 @@ const EnvNav = () => {
return ( return (
<div className={` <div className={`
mr-4 flex h-[22px] items-center rounded-md border px-2 text-xs font-medium mr-1 flex h-[22px] items-center rounded-md border px-2 text-xs font-medium
${headerEnvClassName[langeniusVersionInfo.current_env]} ${headerEnvClassName[langeniusVersionInfo.current_env]}
`}> `}>
{ {
langeniusVersionInfo.current_env === 'TESTING' && ( langeniusVersionInfo.current_env === 'TESTING' && (
<> <>
<Beaker02 className='mr-1 h-3 w-3' /> <Beaker02 className='h-3 w-3' />
{t('common.environment.testing')} <div className='ml-1 max-[1280px]:hidden'>{t('common.environment.testing')}</div>
</> </>
) )
} }
{ {
langeniusVersionInfo.current_env === 'DEVELOPMENT' && ( langeniusVersionInfo.current_env === 'DEVELOPMENT' && (
<> <>
<TerminalSquare className='mr-1 h-3 w-3' /> <TerminalSquare className='h-3 w-3' />
{t('common.environment.development')} <div className='ml-1 max-[1280px]:hidden'>{t('common.environment.development')}</div>
</> </>
) )
} }

8
web/app/components/header/explore-nav/index.tsx
View File

@@ -27,10 +27,12 @@ const ExploreNav = ({
)}> )}>
{ {
activated activated
? <RiPlanetFill className='mr-2 h-4 w-4' /> ? <RiPlanetFill className='h-4 w-4' />
: <RiPlanetLine className='mr-2 h-4 w-4' /> : <RiPlanetLine className='h-4 w-4' />
} }
{t('common.menus.explore')} <div className='ml-2 max-[1024px]:hidden'>
{t('common.menus.explore')}
</div>
</Link> </Link>
) )
} }

124
web/app/components/header/index.tsx
View File

@@ -1,9 +1,6 @@
'use client' 'use client'
import { useCallback, useEffect } from 'react' import { useCallback } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { useBoolean } from 'ahooks'
import { useSelectedLayoutSegment } from 'next/navigation'
import { Bars3Icon } from '@heroicons/react/20/solid'
import AccountDropdown from './account-dropdown' import AccountDropdown from './account-dropdown'
import AppNav from './app-nav' import AppNav from './app-nav'
import DatasetNav from './dataset-nav' import DatasetNav from './dataset-nav'
@@ -24,17 +21,15 @@ import { Plan } from '../billing/type'
import { useGlobalPublicStore } from '@/context/global-public-context' import { useGlobalPublicStore } from '@/context/global-public-context'
const navClassName = ` const navClassName = `
flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl flex items-center relative px-3 h-8 rounded-xl
font-medium text-sm font-medium text-sm
cursor-pointer cursor-pointer
` `
const Header = () => { const Header = () => {
const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext() const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
const selectedSegment = useSelectedLayoutSegment()
const media = useBreakpoints() const media = useBreakpoints()
const isMobile = media === MediaType.mobile const isMobile = media === MediaType.mobile
const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
const { enableBilling, plan } = useProviderContext() const { enableBilling, plan } = useProviderContext()
const { setShowPricingModal, setShowAccountSettingModal } = useModalContext() const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
const systemFeatures = useGlobalPublicStore(s => s.systemFeatures) const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@@ -46,23 +41,12 @@ const Header = () => {
setShowAccountSettingModal({ payload: 'billing' }) setShowAccountSettingModal({ payload: 'billing' })
}, [isFreePlan, setShowAccountSettingModal, setShowPricingModal]) }, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
useEffect(() => { if (isMobile) {
hideNavMenu() return (
// eslint-disable-next-line react-hooks/exhaustive-deps <div className=''>
}, [selectedSegment]) <div className='flex items-center justify-between px-2'>
return ( <div className='flex items-center'>
<div className='relative flex flex-1 items-center justify-between bg-background-body'> <Link href="/apps" className='flex h-8 shrink-0 items-center justify-center px-0.5'>
<div className='flex items-center'>
{isMobile && <div
className='flex h-8 w-8 cursor-pointer items-center justify-center'
onClick={toggle}
>
<Bars3Icon className="h-4 w-4 text-gray-500" />
</div>}
{
!isMobile
&& <div className='flex shrink-0 items-center gap-1.5 self-stretch pl-3'>
<Link href="/apps" className='flex h-8 shrink-0 items-center justify-center gap-2 px-0.5'>
{systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
? <img ? <img
src={systemFeatures.branding.workspace_logo} src={systemFeatures.branding.workspace_logo}
@@ -71,59 +55,61 @@ const Header = () => {
/> />
: <DifyLogo />} : <DifyLogo />}
</Link> </Link>
<div className='font-light text-divider-deep'>/</div> <div className='mx-1.5 shrink-0 font-light text-divider-deep'>/</div>
<div className='flex items-center gap-0.5'> <WorkspaceProvider>
<WorkspaceProvider> <WorkplaceSelector />
<WorkplaceSelector /> </WorkspaceProvider>
</WorkspaceProvider> {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
{enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />} </div>
<div className='flex items-center'>
<div className='mr-2'>
<PluginsNav />
</div> </div>
<AccountDropdown />
</div> </div>
} </div>
</div > <div className='my-1 flex items-center justify-center space-x-1'>
{isMobile && ( {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
<div className='flex'> {!isCurrentWorkspaceDatasetOperator && <AppNav />}
<Link href="/apps" className='mr-4 flex items-center'> {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
{systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
? <img </div>
src={systemFeatures.branding.workspace_logo} </div>
className='block h-[22px] w-auto object-contain' )
alt='logo' }
/>
: <DifyLogo />} return (
</Link> <div className='flex h-[60px] items-center'>
<div className='font-light text-divider-deep'>/</div> <div className='flex min-w-0 flex-[1] items-center pl-3 pr-2 min-[1280px]:pr-3'>
{enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />} <Link href="/apps" className='flex h-8 shrink-0 items-center justify-center px-0.5'>
</div > {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
)} ? <img
{ src={systemFeatures.branding.workspace_logo}
!isMobile && ( className='block h-[22px] w-auto object-contain'
<div className='absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center'> alt='logo'
{!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />} />
{!isCurrentWorkspaceDatasetOperator && <AppNav />} : <DifyLogo />}
{(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />} </Link>
{!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />} <div className='mx-1.5 shrink-0 font-light text-divider-deep'>/</div>
</div> <WorkspaceProvider>
) <WorkplaceSelector />
} </WorkspaceProvider>
<div className='flex shrink-0 items-center pr-3'> {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
</div>
<div className='flex items-center space-x-2'>
{!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
{!isCurrentWorkspaceDatasetOperator && <AppNav />}
{(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
{!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
</div>
<div className='flex min-w-0 flex-[1] items-center justify-end pl-2 pr-3 min-[1280px]:pl-3'>
<EnvNav /> <EnvNav />
<div className='mr-2'> <div className='mr-2'>
<PluginsNav /> <PluginsNav />
</div> </div>
<AccountDropdown /> <AccountDropdown />
</div> </div>
{ </div>
(isMobile && isShowNavMenu) && (
<div className='flex w-full flex-col gap-y-1 p-2'>
{!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
{!isCurrentWorkspaceDatasetOperator && <AppNav />}
{(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
{!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
</div>
)
}
</div >
) )
} }
export default Header export default Header

8
web/app/components/header/nav/index.tsx
View File

@@ -46,7 +46,7 @@ const Nav = ({
return ( return (
<div className={` <div className={`
mr-0 flex h-8 shrink-0 items-center rounded-xl px-0.5 text-sm font-medium sm:mr-3 flex h-8 max-w-[670px] shrink-0 items-center rounded-xl px-0.5 text-sm font-medium max-[1024px]:max-w-[400px]
${isActivated && 'bg-components-main-nav-nav-button-bg-active font-semibold shadow-md'} ${isActivated && 'bg-components-main-nav-nav-button-bg-active font-semibold shadow-md'}
${!curNav && !isActivated && 'hover:bg-components-main-nav-nav-button-bg-hover'} ${!curNav && !isActivated && 'hover:bg-components-main-nav-nav-button-bg-hover'}
`}> `}>
@@ -61,7 +61,7 @@ const Nav = ({
onMouseEnter={() => setHovered(true)} onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)} onMouseLeave={() => setHovered(false)}
> >
<div className='mr-2'> <div>
{ {
(hovered && curNav) (hovered && curNav)
? <ArrowNarrowLeft className='h-4 w-4' /> ? <ArrowNarrowLeft className='h-4 w-4' />
@@ -70,7 +70,9 @@ const Nav = ({
: icon : icon
} }
</div> </div>
{text} <div className='ml-2 max-[1024px]:hidden'>
{text}
</div>
</div> </div>
</Link> </Link>
{ {

246
web/app/components/header/nav/nav-selector/index.tsx
View File

@@ -53,136 +53,134 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
}, 50), []) }, 50), [])
return ( return (
<div className=""> <Menu as="div" className="relative">
<Menu as="div" className="relative inline-block text-left"> {({ open }) => (
{({ open }) => ( <>
<> <MenuButton className={cn(
<MenuButton className={cn( 'hover:hover:bg-components-main-nav-nav-button-bg-active-hover group inline-flex h-7 w-full items-center justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active',
'hover:hover:bg-components-main-nav-nav-button-bg-active-hover group inline-flex h-7 w-full items-center justify-center rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold text-components-main-nav-nav-button-text-active', open && 'bg-components-main-nav-nav-button-bg-active',
open && 'bg-components-main-nav-nav-button-bg-active', )}>
)}> <div className='max-w-[157px] truncate' title={curNav?.name}>{curNav?.name}</div>
<div className='max-w-[180px] truncate' title={curNav?.name}>{curNav?.name}</div> <RiArrowDownSLine
<RiArrowDownSLine className={cn('ml-1 h-3 w-3 shrink-0 opacity-50 group-hover:opacity-100', open && '!opacity-100')}
className={cn('ml-1 h-3 w-3 shrink-0 opacity-50 group-hover:opacity-100', open && '!opacity-100')} aria-hidden="true"
aria-hidden="true" />
/> </MenuButton>
</MenuButton> <MenuItems
<MenuItems className="
className=" absolute -left-11 right-0 mt-1.5 w-60 max-w-80
absolute -left-11 right-0 mt-1.5 w-60 max-w-80 origin-top-right divide-y divide-divider-regular rounded-lg bg-components-panel-bg-blur
origin-top-right divide-y divide-divider-regular rounded-lg bg-components-panel-bg-blur shadow-lg
shadow-lg "
" >
> <div className="overflow-auto px-1 py-1" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
<div className="overflow-auto px-1 py-1" style={{ maxHeight: '50vh' }} onScroll={handleScroll}> {
{ navs.map(nav => (
navs.map(nav => ( <MenuItem key={nav.id}>
<MenuItem key={nav.id}> <div className='flex w-full cursor-pointer items-center truncate rounded-lg px-3 py-[6px] text-[14px] font-normal text-text-secondary hover:bg-state-base-hover' onClick={() => {
<div className='flex w-full cursor-pointer items-center truncate rounded-lg px-3 py-[6px] text-[14px] font-normal text-text-secondary hover:bg-state-base-hover' onClick={() => { if (curNav?.id === nav.id)
if (curNav?.id === nav.id) return
return setAppDetail()
setAppDetail() router.push(nav.link)
router.push(nav.link) }} title={nav.name}>
}} title={nav.name}> <div className='relative mr-2 h-6 w-6 rounded-md'>
<div className='relative mr-2 h-6 w-6 rounded-md'> <AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url} />
<AppIcon size='tiny' iconType={nav.icon_type} icon={nav.icon} background={nav.icon_background} imageUrl={nav.icon_url} /> {!!nav.mode && (
{!!nav.mode && ( <span className={cn(
<span className={cn( 'absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded border-[0.5px] border-[rgba(0,0,0,0.02)] bg-white p-0.5 shadow-sm',
'absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded border-[0.5px] border-[rgba(0,0,0,0.02)] bg-white p-0.5 shadow-sm', )}>
)}> {nav.mode === 'advanced-chat' && (
{nav.mode === 'advanced-chat' && ( <ChatBot className='h-2.5 w-2.5 text-[#1570EF]' />
<ChatBot className='h-2.5 w-2.5 text-[#1570EF]' /> )}
)} {nav.mode === 'agent-chat' && (
{nav.mode === 'agent-chat' && ( <CuteRobot className='h-2.5 w-2.5 text-indigo-600' />
<CuteRobot className='h-2.5 w-2.5 text-indigo-600' /> )}
)} {nav.mode === 'chat' && (
{nav.mode === 'chat' && ( <ChatBot className='h-2.5 w-2.5 text-[#1570EF]' />
<ChatBot className='h-2.5 w-2.5 text-[#1570EF]' /> )}
)} {nav.mode === 'completion' && (
{nav.mode === 'completion' && ( <AiText className='h-2.5 w-2.5 text-[#0E9384]' />
<AiText className='h-2.5 w-2.5 text-[#0E9384]' /> )}
)} {nav.mode === 'workflow' && (
{nav.mode === 'workflow' && ( <Route className='h-2.5 w-2.5 text-[#f79009]' />
<Route className='h-2.5 w-2.5 text-[#f79009]' /> )}
)} </span>
</span> )}
)} </div>
</div> <div className='truncate'>
<div className='truncate'> {nav.name}
{nav.name}
</div>
</div> </div>
</MenuItem>
))
}
</div>
{!isApp && isCurrentWorkspaceEditor && (
<MenuItem as="div" className='w-full p-1'>
<div onClick={() => onCreate('')} className={cn(
'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover ',
)}>
<div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default'>
<RiAddLine className='h-4 w-4 text-text-primary' />
</div> </div>
<div className='grow text-left text-[14px] font-normal text-text-secondary'>{createText}</div> </MenuItem>
))
}
</div>
{!isApp && isCurrentWorkspaceEditor && (
<MenuItem as="div" className='w-full p-1'>
<div onClick={() => onCreate('')} className={cn(
'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover ',
)}>
<div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default'>
<RiAddLine className='h-4 w-4 text-text-primary' />
</div> </div>
</MenuItem> <div className='grow text-left text-[14px] font-normal text-text-secondary'>{createText}</div>
)} </div>
{isApp && isCurrentWorkspaceEditor && ( </MenuItem>
<Menu as="div" className="relative h-full w-full"> )}
{({ open }) => ( {isApp && isCurrentWorkspaceEditor && (
<> <Menu as="div" className="relative h-full w-full">
<MenuButton className='w-full p-1'> {({ open }) => (
<div className={cn( <>
'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover', <MenuButton className='w-full p-1'>
open && '!bg-state-base-hover', <div className={cn(
)}> 'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-[6px] hover:bg-state-base-hover',
<div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default'> open && '!bg-state-base-hover',
<RiAddLine className='h-4 w-4 text-text-primary' /> )}>
</div> <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] border-[0.5px] border-divider-regular bg-background-default'>
<div className='grow text-left text-[14px] font-normal text-text-secondary'>{createText}</div> <RiAddLine className='h-4 w-4 text-text-primary' />
<RiArrowRightSLine className='h-3.5 w-3.5 shrink-0 text-text-primary' />
</div> </div>
</MenuButton> <div className='grow text-left text-[14px] font-normal text-text-secondary'>{createText}</div>
<Transition <RiArrowRightSLine className='h-3.5 w-3.5 shrink-0 text-text-primary' />
as={Fragment} </div>
enter="transition ease-out duration-100" </MenuButton>
enterFrom="transform opacity-0 scale-95" <Transition
enterTo="transform opacity-100 scale-100" as={Fragment}
leave="transition ease-in duration-75" enter="transition ease-out duration-100"
leaveFrom="transform opacity-100 scale-100" enterFrom="transform opacity-0 scale-95"
leaveTo="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100"
> leave="transition ease-in duration-75"
<MenuItems className={cn( leaveFrom="transform opacity-100 scale-100"
'absolute right-[-198px] top-[3px] z-10 min-w-[200px] rounded-lg bg-components-panel-bg-blur shadow-lg', leaveTo="transform opacity-0 scale-95"
)}> >
<div className='p-1'> <MenuItems className={cn(
<div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('blank')}> 'absolute right-[-198px] top-[3px] z-10 min-w-[200px] rounded-lg bg-components-panel-bg-blur shadow-lg',
<FilePlus01 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' /> )}>
{t('app.newApp.startFromBlank')} <div className='p-1'>
</div> <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('blank')}>
<div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('template')}> <FilePlus01 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
<FilePlus02 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' /> {t('app.newApp.startFromBlank')}
{t('app.newApp.startFromTemplate')}
</div>
</div> </div>
<div className='border-t border-divider-regular p-1'> <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('template')}>
<div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('dsl')}> <FilePlus02 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
<FileArrow01 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' /> {t('app.newApp.startFromTemplate')}
{t('app.importDSL')}
</div>
</div> </div>
</MenuItems> </div>
</Transition> <div className='border-t border-divider-regular p-1'>
</> <div className={cn('flex cursor-pointer items-center rounded-lg px-3 py-[6px] font-normal text-text-secondary hover:bg-state-base-hover')} onClick={() => onCreate('dsl')}>
)} <FileArrow01 className='mr-2 h-4 w-4 shrink-0 text-text-secondary' />
</Menu> {t('app.importDSL')}
)} </div>
</MenuItems> </div>
</> </MenuItems>
)} </Transition>
</Menu> </>
</div> )}
</Menu>
)}
</MenuItems>
</>
)}
</Menu>
) )
} }

8
web/app/components/header/tools-nav/index.tsx
View File

@@ -28,10 +28,12 @@ const ToolsNav = ({
)}> )}>
{ {
activated activated
? <RiHammerFill className='mr-2 h-4 w-4' /> ? <RiHammerFill className='h-4 w-4' />
: <RiHammerLine className='mr-2 h-4 w-4' /> : <RiHammerLine className='h-4 w-4' />
} }
{t('common.menus.tools')} <div className='ml-2 max-[1024px]:hidden'>
{t('common.menus.tools')}
</div>
</Link> </Link>
) )
} }