dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/header/index.tsx
+++ b/dify/web/app/components/header/index.tsx
@@ -0,0 +1,116 @@
+'use client'
+import { useCallback } from 'react'
+import Link from 'next/link'
+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 { 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 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 { useGlobalPublicStore } from '@/context/global-public-context'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+
+const navClassName = `
+  flex items-center relative px-3 h-8 rounded-xl
+  font-medium text-sm
+  cursor-pointer
+`
+
+const Header = () => {
+  const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const { enableBilling, plan } = useProviderContext()
+  const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const isFreePlan = plan.type === Plan.sandbox
+  const isBrandingEnabled = systemFeatures.branding.enabled
+  const handlePlanClick = useCallback(() => {
+    if (isFreePlan)
+      setShowPricingModal()
+    else
+      setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
+  }, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
+
+  const renderLogo = () => (
+    <h1>
+      <Link href="/apps" className='flex h-8 shrink-0 items-center justify-center px-0.5 indent-[-9999px]'>
+        {systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
+          ? <img
+            src={systemFeatures.branding.workspace_logo}
+            className='block h-[22px] w-auto object-contain'
+            alt='logo'
+          />
+          : <DifyLogo />}
+        {isBrandingEnabled && systemFeatures.branding.application_title ? systemFeatures.branding.application_title : 'dify'}
+      </Link>
+    </h1>
+  )
+
+  if (isMobile) {
+    return (
+      <div className=''>
+        <div className='flex items-center justify-between px-2'>
+          <div className='flex items-center'>
+            {renderLogo()}
+            <div className='mx-1.5 shrink-0 font-light text-divider-deep'>/</div>
+            <WorkspaceProvider>
+              <WorkplaceSelector />
+            </WorkspaceProvider>
+            {enableBilling ? <PlanBadge allowHover sandboxAsUpgrade plan={plan.type} onClick={handlePlanClick} /> : <LicenseNav />}
+          </div>
+          <div className='flex items-center'>
+            <div className='mr-2'>
+              <PluginsNav />
+            </div>
+            <AccountDropdown />
+          </div>
+        </div>
+        <div className='my-1 flex items-center justify-center space-x-1'>
+          {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+          {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+          {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+          {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex h-[56px] items-center'>
+      <div className='flex min-w-0 flex-[1]  items-center pl-3 pr-2 min-[1280px]:pr-3'>
+        {renderLogo()}
+        <div className='mx-1.5 shrink-0 font-light text-divider-deep'>/</div>
+        <WorkspaceProvider>
+          <WorkplaceSelector />
+        </WorkspaceProvider>
+        {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 />
+        <div className='mr-2'>
+          <PluginsNav />
+        </div>
+        <AccountDropdown />
+      </div>
+    </div>
+  )
+}
+export default Header