Initial commit
This commit is contained in:
John Wang
130
web/app/components/header/account-dropdown/index.tsx
Normal file
130
web/app/components/header/account-dropdown/index.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
'use client'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Fragment, useState } from 'react'
|
||||
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 type { LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
|
||||
import I18n from '@/context/i18n'
|
||||
import WorkplaceSelector from './workplace-selector'
|
||||
import Avatar from '@/app/components/base/avatar'
|
||||
|
||||
type IAppSelectorProps = {
|
||||
userProfile: UserProfileResponse
|
||||
onLogout: () => void
|
||||
langeniusVersionInfo: LangGeniusVersionResponse
|
||||
}
|
||||
|
||||
export default function AppSelector({ userProfile, onLogout, 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 [settingVisible, setSettingVisible] = useState(false)
|
||||
const [aboutVisible, setAboutVisible] = useState(false)
|
||||
|
||||
const { locale } = useContext(I18n)
|
||||
const { t } = useTranslation()
|
||||
|
||||
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/zh-hans/' : 'https://docs.dify.ai/en/'
|
||||
}
|
||||
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={() => onLogout()}>
|
||||
<div
|
||||
className='flex items-center justify-between h-12 px-3 rounded-lg cursor-pointer group hover:bg-gray-100'
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
{
|
||||
settingVisible && <AccountSetting onCancel={() => setSettingVisible(false)} />
|
||||
}
|
||||
{
|
||||
aboutVisible && <AccountAbout onCancel={() => setAboutVisible(false)} langeniusVersionInfo={langeniusVersionInfo} />
|
||||
}
|
||||
</div >
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.popup {
|
||||
left: 4px;
|
||||
transform: translateX(-100%);
|
||||
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
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 { useWorkspacesContext } from '@/context/workspace-context'
|
||||
|
||||
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
|
||||
`
|
||||
const itemNameClassName = `
|
||||
grow mr-2 text-sm text-gray-700 text-left
|
||||
`
|
||||
const itemCheckClassName = `
|
||||
shrink-0 w-4 h-4 text-primary-600
|
||||
`
|
||||
|
||||
const WorkplaceSelector = () => {
|
||||
const { t } = useTranslation()
|
||||
const router = useRouter()
|
||||
const { notify } = useContext(ToastContext)
|
||||
const { workspaces } = useWorkspacesContext()
|
||||
const currentWrokspace = workspaces.filter(item => item.current)?.[0]
|
||||
|
||||
const handleSwitchWorkspace = async (tenant_id: string) => {
|
||||
try {
|
||||
await switchWorkspace({ url: `/workspaces/switch`, body: { tenant_id } })
|
||||
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
||||
router.replace('/apps')
|
||||
} catch (e) {
|
||||
notify({ type: 'error', message: t('common.provider.saveFailed') })
|
||||
} finally {
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu as="div" className="relative w-full h-full">
|
||||
{
|
||||
({ open }) => (
|
||||
<>
|
||||
<Menu.Button className={cn(
|
||||
`
|
||||
${itemClassName} w-full
|
||||
group hover:bg-gray-50 cursor-pointer ${open && 'bg-gray-50'}
|
||||
`
|
||||
)}>
|
||||
<div className={itemIconClassName} />
|
||||
<div className={`${itemNameClassName} truncate`}>{currentWrokspace?.name}</div>
|
||||
<ChevronRightIcon className='shrink-0 w-[14px] h-[14px]' />
|
||||
</Menu.Button>
|
||||
<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={cn(
|
||||
`
|
||||
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
|
||||
)}
|
||||
>
|
||||
<div className="px-1 py-1">
|
||||
{
|
||||
workspaces.map(workspace => (
|
||||
<div className={itemClassName} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
|
||||
<div className={itemIconClassName} />
|
||||
<div className={itemNameClassName}>{workspace.name}</div>
|
||||
{workspace.current && <CheckIcon className={itemCheckClassName} />}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkplaceSelector
|
||||
Reference in New Issue
Block a user