From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/header/account-dropdown/workplace-selector/index.tsx | 78 ++++++++++++++++++++++-----------------
1 files changed, 44 insertions(+), 34 deletions(-)
diff --git a/app/components/header/account-dropdown/workplace-selector/index.tsx b/app/components/header/account-dropdown/workplace-selector/index.tsx
index b62e607..bcc72a7 100644
--- a/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -1,15 +1,28 @@
import { Fragment } from 'react'
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
-import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
-import { RiArrowDownSLine } from '@remixicon/react'
+import { Menu, Transition } from '@headlessui/react'
+import s from './index.module.css'
import cn from '@/utils/classnames'
-import { WEB_PREFIX } from '@/config'
-import PlanBadge from '@/app/components/header/plan-badge'
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'
-import type { Plan } from '@/app/components/billing/type'
+import classNames from '@/utils/classnames'
+
+const itemClassName = `
+ flex items-center px-3 py-2 h-10 cursor-pointer
+`
+const itemIconClassName = `
+ 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
+`
+const itemCheckClassName = `
+ shrink-0 w-4 h-4 text-primary-600
+`
const WorkplaceSelector = () => {
const { t } = useTranslation()
@@ -23,32 +36,28 @@
return
await switchWorkspace({ url: '/workspaces/switch', body: { tenant_id } })
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
- location.assign(WEB_PREFIX)
+ location.assign(`${location.origin}`)
}
- catch {
+ catch (e) {
notify({ type: 'error', message: t('common.provider.saveFailed') })
}
}
return (
- <Menu as="div" className="relative h-full w-full">
+ <Menu as="div" className="relative w-full h-full">
{
({ open }) => (
<>
- <MenuButton className={cn(
+ <Menu.Button className={cn(
`
- group flex w-full cursor-pointer items-center
- gap-1.5 p-0.5 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} rounded-[10px]
+ ${itemClassName} w-full
+ group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-lg
`,
)}>
- <div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'>
- <span className='h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90'>{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
- </div>
- <div className='flex flex-row'>
- <div className={'system-sm-medium max-w-[160px] truncate text-text-secondary'}>{currentWorkspace?.name}</div>
- <RiArrowDownSLine className='h-4 w-4 text-text-secondary' />
- </div>
- </MenuButton>
+ <div className={itemIconClassName}>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
+ <div className={`${itemNameClassName} truncate`}>{currentWorkspace?.name}</div>
+ <ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
+ </Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -58,31 +67,32 @@
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
- <MenuItems
+ <Menu.Items
className={cn(
`
- shadows-shadow-lg absolute left-[-15px] mt-1 flex max-h-[400px] w-[280px] flex-col items-start overflow-y-auto rounded-xl
- bg-components-panel-bg-blur backdrop-blur-[5px]
+ absolute top-[1px] min-w-[200px] max-h-[70vh] overflow-y-scroll z-10 bg-white border-[0.5px] border-gray-200
+ divide-y divide-gray-100 origin-top-right rounded-xl focus:outline-none
`,
+ s.popup,
)}
>
- <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg ">
- <div className='flex items-start self-stretch px-3 pb-0.5 pt-1'>
- <span className='system-xs-medium-uppercase flex-1 text-text-tertiary'>{t('common.userProfile.workspace')}</span>
- </div>
+ <div className="px-1 py-1">
{
workspaces.map(workspace => (
- <div className='flex items-center gap-2 self-stretch rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
- <div className='flex h-6 w-6 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]'>
- <span className='h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90'>{workspace?.name[0]?.toLocaleUpperCase()}</span>
- </div>
- <div className='system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary'>{workspace.name}</div>
- <PlanBadge plan={workspace.plan as Plan} />
- </div>
+ <Menu.Item key={workspace.id}>
+ {({ active }) => <div className={classNames(itemClassName,
+ active && 'bg-state-base-hover',
+ )} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
+ <div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
+ <div className={itemNameClassName}>{workspace.name}</div>
+ {workspace.current && <Check className={itemCheckClassName} />}
+ </div>}
+
+ </Menu.Item>
))
}
</div>
- </MenuItems>
+ </Menu.Items>
</Transition>
</>
)
--
Gitblit v1.8.0