refact common layout (#490)

web/app/components/header/account-dropdown/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import { Fragment, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import classNames from 'classnames'
 import Link from 'next/link'
@@ -13,24 +14,33 @@ import WorkplaceSelector from './workplace-selector'
 import type { LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
 import I18n from '@/context/i18n'
 import Avatar from '@/app/components/base/avatar'
+import { logout } from '@/service/common'
 
 type IAppSelectorProps = {
   userProfile: UserProfileResponse
-  onLogout: () => void
   langeniusVersionInfo: LangGeniusVersionResponse
 }
 
-export default function AppSelector({ userProfile, onLogout, langeniusVersionInfo }: IAppSelectorProps) {
+export default function AppSelector({ userProfile, langeniusVersionInfo }: IAppSelectorProps) {
   const itemClassName = `
     flex items-center w-full h-10 px-3 text-gray-700 text-[14px]
     rounded-lg font-normal hover:bg-gray-100 cursor-pointer
   `
+  const router = useRouter()
   const [settingVisible, setSettingVisible] = useState(false)
   const [aboutVisible, setAboutVisible] = useState(false)
 
   const { locale } = useContext(I18n)
   const { t } = useTranslation()
 
+  const handleLogout = async () => {
+    await logout({
+      url: '/logout',
+      params: {},
+    })
+    router.push('/signin')
+  }
+
   return (
     <div className="">
       <Menu as="div" className="relative inline-block text-left">
@@ -107,7 +117,7 @@ export default function AppSelector({ userProfile, onLogout, langeniusVersionInf
               </Menu.Item>
             </div>
             <Menu.Item>
-              <div className='p-1' onClick={() => onLogout()}>
+              <div className='p-1' onClick={() => handleLogout()}>
                 <div
                   className='flex items-center justify-between h-12 px-3 rounded-lg cursor-pointer group hover:bg-gray-100'
                 >

web/app/components/header/index.tsx

@@ -1,8 +1,7 @@
 'use client'
 import { useEffect, useState } from 'react'
-import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useSelectedLayoutSegment } from 'next/navigation'
+import { usePathname, useSelectedLayoutSegment } from 'next/navigation'
 import classNames from 'classnames'
 import { CommandLineIcon } from '@heroicons/react/24/solid'
 import Link from 'next/link'
@@ -10,19 +9,14 @@ import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
 import DatasetNav from './dataset-nav'
 import s from './index.module.css'
-import type { GithubRepo, LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
+import type { GithubRepo } from '@/models/common'
 import { WorkspaceProvider } from '@/context/workspace-context'
+import { useAppContext } from '@/context/app-context'
 import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
 import { Grid01 as Grid01Solid } from '@/app/components/base/icons/src/vender/solid/layout'
 import { PuzzlePiece01 } from '@/app/components/base/icons/src/vender/line/development'
 import { PuzzlePiece01 as PuzzlePiece01Solid } from '@/app/components/base/icons/src/vender/solid/development'
 
-export type IHeaderProps = {
-  userProfile: UserProfileResponse
-  onLogout: () => void
-  langeniusVersionInfo: LangGeniusVersionResponse
-  isBordered: boolean
-}
 const navClassName = `
   flex items-center relative mr-3 px-3 h-8 rounded-xl
   font-medium text-sm
@@ -32,18 +26,16 @@ const headerEnvClassName: { [k: string]: string } = {
   DEVELOPMENT: 'bg-[#FEC84B] border-[#FDB022] text-[#93370D]',
   TESTING: 'bg-[#A5F0FC] border-[#67E3F9] text-[#164C63]',
 }
-const Header: FC<IHeaderProps> = ({
-  userProfile,
-  onLogout,
-  langeniusVersionInfo,
-  isBordered,
-}) => {
+const Header = () => {
   const { t } = useTranslation()
+  const pathname = usePathname()
+  const { userProfile, langeniusVersionInfo } = useAppContext()
   const showEnvTag = langeniusVersionInfo.current_env === 'TESTING' || langeniusVersionInfo.current_env === 'DEVELOPMENT'
   const selectedSegment = useSelectedLayoutSegment()
   const isPluginsComingSoon = selectedSegment === 'plugins-coming-soon'
   const isExplore = selectedSegment === 'explore'
   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) => {
@@ -136,7 +128,7 @@ const Header: FC<IHeaderProps> = ({
             )
           }
           <WorkspaceProvider>
-            <AccountDropdown userProfile={userProfile} onLogout={onLogout} langeniusVersionInfo={langeniusVersionInfo} />
+            <AccountDropdown userProfile={userProfile} langeniusVersionInfo={langeniusVersionInfo} />
           </WorkspaceProvider>
         </div>
       </div>