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-setting/members-page/operation/index.tsx | 76 +++++++++++++++++++++++++------------
1 files changed, 51 insertions(+), 25 deletions(-)
diff --git a/app/components/header/account-setting/members-page/operation/index.tsx b/app/components/header/account-setting/members-page/operation/index.tsx
index 46f842d..82867ec 100644
--- a/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/app/components/header/account-setting/members-page/operation/index.tsx
@@ -2,13 +2,27 @@
import { useTranslation } from 'react-i18next'
import { Fragment, useMemo } from 'react'
import { useContext } from 'use-context-selector'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import { Menu, Transition } from '@headlessui/react'
import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
+import s from './index.module.css'
import { useProviderContext } from '@/context/provider-context'
import cn from '@/utils/classnames'
import type { Member } from '@/models/common'
import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
import { ToastContext } from '@/app/components/base/toast'
+
+const itemClassName = `
+ flex px-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg
+`
+const itemIconClassName = `
+ w-4 h-4 mt-[2px] mr-1 text-primary-600
+`
+const itemTitleClassName = `
+ leading-[20px] text-sm text-gray-700 whitespace-nowrap
+`
+const itemDescClassName = `
+ leading-[18px] text-xs text-gray-500 whitespace-nowrap
+`
type IOperationProps = {
member: Member
@@ -53,7 +67,7 @@
onOperate()
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
}
- catch {
+ catch (e) {
}
}
@@ -66,20 +80,26 @@
onOperate()
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
}
- catch {
+ catch (e) {
}
}
return (
- <Menu as="div" className="relative h-full w-full">
+ <Menu as="div" className="relative w-full h-full">
{
({ open }) => (
<>
- <MenuButton className={cn('system-sm-regular group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+ <Menu.Button className={cn(
+ `
+ group flex items-center justify-between w-full h-full
+ hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'}
+ text-[13px] text-gray-700 px-3
+ `,
+ )}>
{RoleMap[member.role] || RoleMap.normal}
- <ChevronDownIcon className={cn('h-4 w-4 group-hover:block', open ? 'block' : 'hidden')} />
- </MenuButton>
+ <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
+ </Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
@@ -89,40 +109,46 @@
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
- <MenuItems
- className={cn('absolute right-0 top-[52px] z-10 origin-top-right rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm')}
+ <Menu.Items
+ className={cn(
+ `
+ absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200
+ divide-y divide-gray-100 origin-top-right rounded-lg
+ `,
+ s.popup,
+ )}
>
- <div className="p-1">
+ <div className="px-1 py-1">
{
roleList.map(role => (
- <MenuItem key={role}>
- <div className='flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover' onClick={() => handleUpdateMemberRole(role)}>
+ <Menu.Item key={role}>
+ <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
{
role === member.role
- ? <CheckIcon className='mr-1 mt-[2px] h-4 w-4 text-text-accent' />
- : <div className='mr-1 mt-[2px] h-4 w-4 text-text-accent' />
+ ? <CheckIcon className={itemIconClassName} />
+ : <div className={itemIconClassName} />
}
<div>
- <div className='system-sm-semibold whitespace-nowrap text-text-secondary'>{t(`common.members.${toHump(role)}`)}</div>
- <div className='system-xs-regular whitespace-nowrap text-text-tertiary'>{t(`common.members.${toHump(role)}Tip`)}</div>
+ <div className={itemTitleClassName}>{t(`common.members.${toHump(role)}`)}</div>
+ <div className={itemDescClassName}>{t(`common.members.${toHump(role)}Tip`)}</div>
</div>
</div>
- </MenuItem>
+ </Menu.Item>
))
}
</div>
- <MenuItem>
- <div className='border-t border-divider-subtle p-1'>
- <div className='flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover' onClick={handleDeleteMemberOrCancelInvitation}>
- <div className='mr-1 mt-[2px] h-4 w-4 text-text-accent' />
+ <Menu.Item>
+ <div className='px-1 py-1'>
+ <div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
+ <div className={itemIconClassName} />
<div>
- <div className='system-sm-semibold whitespace-nowrap text-text-secondary'>{t('common.members.removeFromTeam')}</div>
- <div className='system-xs-regular whitespace-nowrap text-text-tertiary'>{t('common.members.removeFromTeamTip')}</div>
+ <div className={itemTitleClassName}>{t('common.members.removeFromTeam')}</div>
+ <div className={itemDescClassName}>{t('common.members.removeFromTeamTip')}</div>
</div>
</div>
</div>
- </MenuItem>
- </MenuItems>
+ </Menu.Item>
+ </Menu.Items>
</Transition>
</>
)
--
Gitblit v1.8.0