From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/header/index.tsx | 108 +++++++++++++++++++++++++-----------------------------
1 files changed, 50 insertions(+), 58 deletions(-)
diff --git a/app/components/header/index.tsx b/app/components/header/index.tsx
index c2345fb..9a32bbb 100644
--- a/app/components/header/index.tsx
+++ b/app/components/header/index.tsx
@@ -4,23 +4,23 @@
import { useBoolean } from 'ahooks'
import { useSelectedLayoutSegment } from 'next/navigation'
import { Bars3Icon } from '@heroicons/react/20/solid'
+import { useContextSelector } from 'use-context-selector'
+import HeaderBillingBtn from '../billing/header-billing-btn'
import AccountDropdown from './account-dropdown'
import AppNav from './app-nav'
import DatasetNav from './dataset-nav'
import EnvNav from './env-nav'
-import PluginsNav from './plugins-nav'
import ExploreNav from './explore-nav'
import ToolsNav from './tools-nav'
+import GithubStar from './github-star'
+import LicenseNav from './license-env'
import { WorkspaceProvider } from '@/context/workspace-context'
-import { useAppContext } from '@/context/app-context'
-import DifyLogo from '@/app/components/base/logo/dify-logo'
-import WorkplaceSelector from '@/app/components/header/account-dropdown/workplace-selector'
+import AppContext, { useAppContext } from '@/context/app-context'
+import LogoSite from '@/app/components/base/logo/logo-site'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import { useProviderContext } from '@/context/provider-context'
import { useModalContext } from '@/context/modal-context'
-import PlanBadge from './plan-badge'
-import LicenseNav from './license-env'
-import { Plan } from '../billing/type'
+import { LicenseStatus } from '@/types/feature'
const navClassName = `
flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
@@ -30,13 +30,14 @@
const Header = () => {
const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
+ const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
const selectedSegment = useSelectedLayoutSegment()
const media = useBreakpoints()
const isMobile = media === MediaType.mobile
const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
const { enableBilling, plan } = useProviderContext()
const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
- const isFreePlan = plan.type === Plan.sandbox
+ const isFreePlan = plan.type === 'sandbox'
const handlePlanClick = useCallback(() => {
if (isFreePlan)
setShowPricingModal()
@@ -49,67 +50,58 @@
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedSegment])
return (
- <div className='relative flex flex-1 items-center justify-between bg-background-body'>
+ <div className='flex flex-1 items-center justify-between px-4 bg-background-body'>
<div className='flex items-center'>
{isMobile && <div
- className='flex h-8 w-8 cursor-pointer items-center justify-center'
+ className='flex items-center justify-center h-8 w-8 cursor-pointer'
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 w-[52px] shrink-0 items-center justify-center gap-2'>
- <DifyLogo />
- </Link>
- <div className='font-light text-divider-deep'>/</div>
- <div className='flex items-center gap-0.5'>
- <WorkspaceProvider>
- <WorkplaceSelector />
- </WorkspaceProvider>
- {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
- </div>
- </div>
- }
- </div >
+ {!isMobile && <>
+ <Link href="/apps" className='flex items-center mr-4'>
+ <LogoSite className='object-contain' />
+ </Link>
+ {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
+ </>}
+ </div>
{isMobile && (
<div className='flex'>
- <Link href="/apps" className='mr-4 flex items-center'>
- <DifyLogo />
+ <Link href="/apps" className='flex items-center mr-4'>
+ <LogoSite />
</Link>
- <div className='font-light text-divider-deep'>/</div>
- {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
- </div >
- )}
- {
- !isMobile && (
- <div className='absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center'>
- {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
- {!isCurrentWorkspaceDatasetOperator && <AppNav />}
- {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
- {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
- </div>
- )
- }
- <div className='flex shrink-0 items-center pr-3'>
- <EnvNav />
- <div className='mr-2'>
- <PluginsNav />
+ {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
</div>
- <AccountDropdown />
- </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} />}
+ )}
+ {!isMobile && (
+ <div className='flex items-center'>
+ {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+ {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+ {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+ {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+ </div>
+ )}
+ <div className='flex items-center flex-shrink-0'>
+ <LicenseNav />
+ <EnvNav />
+ {enableBilling && (
+ <div className='mr-3 select-none'>
+ <HeaderBillingBtn onClick={handlePlanClick} />
</div>
- )
- }
- </div >
+ )}
+ <WorkspaceProvider>
+ <AccountDropdown isMobile={isMobile} />
+ </WorkspaceProvider>
+ </div>
+ {(isMobile && isShowNavMenu) && (
+ <div className='w-full flex flex-col p-2 gap-y-1'>
+ {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+ {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+ {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+ {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+ </div>
+ )}
+ </div>
)
}
export default Header
--
Gitblit v1.8.0