Feat/header ssr (#594)

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

@@ -5,26 +5,22 @@ import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import classNames from 'classnames'
 import Link from 'next/link'
-import { ArrowRightOnRectangleIcon, ArrowTopRightOnSquareIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
 import { Menu, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
 import AccountSetting from '../account-setting'
 import AccountAbout from '../account-about'
 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'
+import { useAppContext } from '@/context/app-context'
+import { ArrowUpRight, ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 
-type IAppSelectorProps = {
-  userProfile: UserProfileResponse
-  langeniusVersionInfo: LangGeniusVersionResponse
-}
-
-export default function AppSelector({ userProfile, langeniusVersionInfo }: IAppSelectorProps) {
+export default function AppSelector() {
   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
+    flex items-center w-full h-9 px-3 text-gray-700 text-[14px]
+    rounded-lg font-normal hover:bg-gray-50 cursor-pointer
   `
   const router = useRouter()
   const [settingVisible, setSettingVisible] = useState(false)
@@ -32,6 +28,7 @@ export default function AppSelector({ userProfile, langeniusVersionInfo }: IAppS
 
   const { locale } = useContext(I18n)
   const { t } = useTranslation()
+  const { userProfile, langeniusVersionInfo } = useAppContext()
 
   const handleLogout = async () => {
     await logout({
@@ -44,90 +41,94 @@ export default function AppSelector({ userProfile, langeniusVersionInfo }: IAppS
   return (
     <div className="">
       <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <Menu.Button
-            className="
-              inline-flex items-center h-[38px]
-              rounded-xl pl-2 pr-2.5 text-[14px] font-normal
-              text-gray-800 hover:bg-gray-200
-            "
-          >
-            <Avatar name={userProfile.name} className='mr-2' />
-            {userProfile.name}
-            <ChevronDownIcon
-              className="w-3 h-3 ml-1"
-              aria-hidden="true"
-            />
-          </Menu.Button>
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items
-            className="
-              absolute right-0 mt-1.5 w-60 max-w-80
-              divide-y divide-gray-100 origin-top-right rounded-lg bg-white
-              shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.05)]
-            "
-          >
-            <Menu.Item>
-              <div className='flex flex-nowrap items-center px-4 py-[13px]'>
-                <Avatar name={userProfile.name} size={36} className='mr-3' />
-                <div className='grow'>
-                  <div className='leading-5 font-normal text-[14px] text-gray-800 break-all'>{userProfile.name}</div>
-                  <div className='leading-[18px] text-xs font-normal text-gray-500 break-all'>{userProfile.email}</div>
-                </div>
-              </div>
-            </Menu.Item>
-            <div className='px-1 py-1'>
-              <div className='mt-2 px-3 text-xs font-medium text-gray-500'>{t('common.userProfile.workspace')}</div>
-              <WorkplaceSelector />
-            </div>
-            <div className="px-1 py-1">
-              <Menu.Item>
-                <div className={itemClassName} onClick={() => setSettingVisible(true)}>
-                  <div>{t('common.userProfile.settings')}</div>
-                </div>
-              </Menu.Item>
-              <Menu.Item>
-                <Link
-                  className={classNames(itemClassName, 'group justify-between')}
-                  href={
-                    locale === 'zh-Hans' ? 'https://docs.dify.ai/v/zh-hans/' : 'https://docs.dify.ai/'
-                  }
-                  target='_blank'>
-                  <div>{t('common.userProfile.helpCenter')}</div>
-                  <ArrowTopRightOnSquareIcon className='hidden w-4 h-4 group-hover:flex' />
-                </Link>
-              </Menu.Item>
-              <Menu.Item>
-                <div className={classNames(itemClassName, 'justify-between')} onClick={() => setAboutVisible(true)}>
-                  <div>{t('common.userProfile.about')}</div>
-                  <div className='flex items-center'>
-                    <div className='mr-2 text-xs font-normal text-gray-500'>{langeniusVersionInfo.current_version}</div>
-                    <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
-                  </div>
-                </div>
-              </Menu.Item>
-            </div>
-            <Menu.Item>
-              <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'
+        {
+          ({ open }) => (
+            <>
+              <div>
+                <Menu.Button
+                  className={`
+                    inline-flex items-center
+                    rounded-[20px] py-1 pr-2.5 pl-1 text-sm
+                  text-gray-700 hover:bg-gray-200
+                    ${open && 'bg-gray-200'}
+                  `}
                 >
-                  <div className='font-normal text-[14px] text-gray-700'>{t('common.userProfile.logout')}</div>
-                  <ArrowRightOnRectangleIcon className='hidden w-4 h-4 group-hover:flex' />
-                </div>
+                  <Avatar name={userProfile.name} className='mr-2' size={32} />
+                  {userProfile.name}
+                  <ChevronDown className="w-3 h-3 ml-1 text-gray-700"/>
+                </Menu.Button>
               </div>
-            </Menu.Item>
-          </Menu.Items>
-        </Transition>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <Menu.Items
+                  className="
+                    absolute right-0 mt-1.5 w-60 max-w-80
+                    divide-y divide-gray-100 origin-top-right rounded-lg bg-white
+                    shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.05)]
+                  "
+                >
+                  <Menu.Item>
+                    <div className='flex flex-nowrap items-center px-4 py-[13px]'>
+                      <Avatar name={userProfile.name} size={36} className='mr-3' />
+                      <div className='grow'>
+                        <div className='leading-5 font-normal text-[14px] text-gray-800 break-all'>{userProfile.name}</div>
+                        <div className='leading-[18px] text-xs font-normal text-gray-500 break-all'>{userProfile.email}</div>
+                      </div>
+                    </div>
+                  </Menu.Item>
+                  <div className='px-1 py-1'>
+                    <div className='mt-2 px-3 text-xs font-medium text-gray-500'>{t('common.userProfile.workspace')}</div>
+                    <WorkplaceSelector />
+                  </div>
+                  <div className="px-1 py-1">
+                    <Menu.Item>
+                      <div className={itemClassName} onClick={() => setSettingVisible(true)}>
+                        <div>{t('common.userProfile.settings')}</div>
+                      </div>
+                    </Menu.Item>
+                    <Menu.Item>
+                      <Link
+                        className={classNames(itemClassName, 'group justify-between')}
+                        href={
+                          locale === 'zh-Hans' ? 'https://docs.dify.ai/v/zh-hans/' : 'https://docs.dify.ai/'
+                        }
+                        target='_blank'>
+                        <div>{t('common.userProfile.helpCenter')}</div>
+                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
+                      </Link>
+                    </Menu.Item>
+                    <Menu.Item>
+                      <div className={classNames(itemClassName, 'justify-between')} onClick={() => setAboutVisible(true)}>
+                        <div>{t('common.userProfile.about')}</div>
+                        <div className='flex items-center'>
+                          <div className='mr-2 text-xs font-normal text-gray-500'>{langeniusVersionInfo.current_version}</div>
+                          <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
+                        </div>
+                      </div>
+                    </Menu.Item>
+                  </div>
+                  <Menu.Item>
+                    <div className='p-1' onClick={() => handleLogout()}>
+                      <div
+                        className='flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50'
+                      >
+                        <div className='font-normal text-[14px] text-gray-700'>{t('common.userProfile.logout')}</div>
+                        <LogOut01 className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
+                      </div>
+                    </div>
+                  </Menu.Item>
+                </Menu.Items>
+              </Transition>
+            </>
+          )
+        }
       </Menu>
       {
         settingVisible && <AccountSetting onCancel={() => setSettingVisible(false)} />

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

@@ -1,20 +1,21 @@
 import { Fragment } from 'react'
-import { switchWorkspace } from '@/service/common'
-import { Menu, Transition } from '@headlessui/react'
-import { ChevronRightIcon, CheckIcon } from '@heroicons/react/24/outline'
-import cn from 'classnames'
-import s from './index.module.css'
 import { useContext } from 'use-context-selector'
-import { ToastContext } from '@/app/components/base/toast'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
+import { Menu, Transition } from '@headlessui/react'
+import cn from 'classnames'
+import s from './index.module.css'
+import { switchWorkspace } from '@/service/common'
 import { useWorkspacesContext } from '@/context/workspace-context'
+import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Check } from '@/app/components/base/icons/src/vender/line/general'
+import { ToastContext } from '@/app/components/base/toast'
 
 const itemClassName = `
   flex items-center px-3 py-2 h-10 cursor-pointer
 `
 const itemIconClassName = `
-  shrink-0 mr-2 w-6 h-6 bg-[#EFF4FF] rounded-md
+  shrink-0 mr-2 flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600
 `
 const itemNameClassName = `
   grow mr-2 text-sm text-gray-700 text-left
@@ -32,12 +33,12 @@ const WorkplaceSelector = () => {
 
   const handleSwitchWorkspace = async (tenant_id: string) => {
     try {
-      await switchWorkspace({ url: `/workspaces/switch`, body: { tenant_id } })
+      await switchWorkspace({ url: '/workspaces/switch', body: { tenant_id } })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
       router.replace('/apps')
-    } catch (e) {
+    }
+    catch (e) {
       notify({ type: 'error', message: t('common.provider.saveFailed') })
-    } finally {
     }
   }
 
@@ -49,12 +50,12 @@ const WorkplaceSelector = () => {
             <Menu.Button className={cn(
               `
                 ${itemClassName} w-full
-                group hover:bg-gray-50 cursor-pointer ${open && 'bg-gray-50'}
-              `
+                group hover:bg-gray-50 cursor-pointer ${open && 'bg-gray-50'} rounded-lg
+              `,
             )}>
-              <div className={itemIconClassName} />
+              <div className={itemIconClassName}>{currentWrokspace?.name[0].toLocaleUpperCase()}</div>
               <div className={`${itemNameClassName} truncate`}>{currentWrokspace?.name}</div>
-              <ChevronRightIcon className='shrink-0 w-[14px] h-[14px]' />
+              <ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
             </Menu.Button>
             <Transition
               as={Fragment}
@@ -71,16 +72,16 @@ const WorkplaceSelector = () => {
                     absolute top-[1px] min-w-[200px] z-10 bg-white border-[0.5px] border-gray-200
                     divide-y divide-gray-100 origin-top-right rounded-xl
                   `,
-                  s.popup
+                  s.popup,
                 )}
               >
                 <div className="px-1 py-1">
                   {
                     workspaces.map(workspace => (
                       <div className={itemClassName} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
-                        <div className={itemIconClassName} />
+                        <div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
                         <div className={itemNameClassName}>{workspace.name}</div>
-                        {workspace.current && <CheckIcon className={itemCheckClassName} />}
+                        {workspace.current && <Check className={itemCheckClassName} />}
                       </div>
                     ))
                   }
@@ -94,4 +95,4 @@ const WorkplaceSelector = () => {
   )
 }
 
-export default WorkplaceSelector
+export default WorkplaceSelector