refact header

web/app/(commonLayout)/layout.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react'
 import SwrInitor from '@/app/components/swr-initor'
 import { AppContextProvider } from '@/context/app-context'
 import GA, { GaType } from '@/app/components/base/ga'
+import HeaderWrapper from '@/app/components/header/HeaderWrapper'
 import Header from '@/app/components/header'
 
 const Layout = ({ children }: { children: ReactNode }) => {
@@ -11,7 +12,9 @@ const Layout = ({ children }: { children: ReactNode }) => {
       <GA gaType={GaType.admin} />
       <SwrInitor>
         <AppContextProvider>
-          <Header />
+          <HeaderWrapper>
+            <Header />
+          </HeaderWrapper>
           {children}
         </AppContextProvider>
       </SwrInitor>

web/app/components/header/HeaderWrapper.tsx

+'use client'
+import classNames from 'classnames'
+import { usePathname } from 'next/navigation'
+import s from './index.module.css'
+import { useAppContext } from '@/context/app-context'
+
+type HeaderWrapperProps = {
+  children: React.ReactNode
+}
+
+const HeaderWrapper = ({
+  children,
+}: HeaderWrapperProps) => {
+  const pathname = usePathname()
+  const { langeniusVersionInfo } = useAppContext()
+  const isBordered = ['/apps', '/datasets'].includes(pathname)
+
+  return (
+    <div className={classNames(
+      'sticky top-0 left-0 right-0 z-20 flex bg-gray-100 grow-0 shrink-0 basis-auto h-14',
+      s.header,
+      isBordered ? 'border-b border-gray-200' : '',
+    )}
+    >
+      <div className={classNames(
+        s[`header-${langeniusVersionInfo.current_env}`],
+        'flex flex-1 items-center justify-between px-4',
+      )}>
+        {children}
+      </div>
+    </div>
+  )
+}
+export default HeaderWrapper

web/app/components/header/github-star/index.tsx

@@ -11,10 +11,13 @@ const getStar = async () => {
 }
 
 const GithubStar = async () => {
-  const githubRepo: GithubRepo = await getStar()
-
-  if (!githubRepo.stargazers_count)
+  let githubRepo: GithubRepo = { stargazers_count: 0 }
+  try {
+    githubRepo = await getStar()
+  }
+  catch (e) {
     return null
+  }
 
   return (
     <a

web/app/components/header/index.tsx

-// 'use client'
-// import { useEffect, useState } from 'react'
-import classNames from 'classnames'
 import Link from 'next/link'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
@@ -10,7 +7,6 @@ import ExploreNav from './explore-nav'
 import GithubStar from './github-star'
 import PluginNav from './plugin-nav'
 import s from './index.module.css'
-// import type { GithubRepo } from '@/models/common'
 import { WorkspaceProvider } from '@/context/workspace-context'
 
 const navClassName = `
@@ -20,62 +16,27 @@ const navClassName = `
 `
 
 const Header = () => {
-  // const pathname = usePathname()
-  // const { userProfile, langeniusVersionInfo } = useAppContext()
-  // const [starCount, setStarCount] = useState(0)
-  // const isBordered = ['/apps', '/datasets'].includes(pathname)
-
-  // useEffect(() => {
-  //   globalThis.fetch('https://api.github.com/repos/langgenius/dify').then(res => res.json()).then((data: GithubRepo) => {
-  //     setStarCount(data.stargazers_count)
-  //   })
-  // }, [])
-
   return (
-    <div className={classNames(
-      'sticky top-0 left-0 right-0 z-20 flex bg-gray-100 grow-0 shrink-0 basis-auto h-14',
-      s.header,
-      // isBordered ? 'border-b border-gray-200' : '',
-    )}
-    >
-      <div className={classNames(
-        // s[`header-${langeniusVersionInfo.current_env}`],
-        'flex flex-1 items-center justify-between px-4',
-      )}>
-        <div className='flex items-center'>
-          <Link href="/apps" className='flex items-center mr-4'>
-            <div className={s.logo} />
-          </Link>
-          <GithubStar />
-          {/* {
-            starCount > 0 && (
-              <Link
-                href='https://github.com/langgenius/dify'
-                target='_blank'
-                className='flex items-center leading-[18px] border border-gray-200 rounded-md text-xs text-gray-700 font-semibold overflow-hidden'>
-                <div className='flex items-center px-2 py-1 bg-gray-100'>
-                  <div className={`${s['github-icon']} mr-1 rounded-full`} />
-                  Star
-                </div>
-                <div className='px-2 py-1 bg-white border-l border-gray-200'>{`${starCount}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</div>
-              </Link>
-            )
-          } */}
-        </div>
-        <div className='flex items-center'>
-          <ExploreNav className={navClassName} />
-          <AppNav />
-          <PluginNav className={navClassName} />
-          <DatasetNav />
-        </div>
-        <div className='flex items-center flex-shrink-0'>
-          <EnvNav />
-          <WorkspaceProvider>
-            <AccountDropdown />
-          </WorkspaceProvider>
-        </div>
+    <>
+      <div className='flex items-center'>
+        <Link href="/apps" className='flex items-center mr-4'>
+          <div className={s.logo} />
+        </Link>
+        <GithubStar />
+      </div>
+      <div className='flex items-center'>
+        <ExploreNav className={navClassName} />
+        <AppNav />
+        <PluginNav className={navClassName} />
+        <DatasetNav />
+      </div>
+      <div className='flex items-center flex-shrink-0'>
+        <EnvNav />
+        <WorkspaceProvider>
+          <AccountDropdown />
+        </WorkspaceProvider>
       </div>
-    </div>
+    </>
   )
 }
 export default Header