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/index.tsx | 121 +++++++++++++++-------------------------
1 files changed, 45 insertions(+), 76 deletions(-)
diff --git a/app/components/header/account-setting/members-page/index.tsx b/app/components/header/account-setting/members-page/index.tsx
index 939834e..de3fef9 100644
--- a/app/components/header/account-setting/members-page/index.tsx
+++ b/app/components/header/account-setting/members-page/index.tsx
@@ -9,22 +9,18 @@
import { useTranslation } from 'react-i18next'
import InviteModal from './invite-modal'
import InvitedModal from './invited-modal'
-import EditWorkspaceModal from './edit-workspace-modal'
import Operation from './operation'
import { fetchMembers } from '@/service/common'
import I18n from '@/context/i18n'
import { useAppContext } from '@/context/app-context'
import Avatar from '@/app/components/base/avatar'
import type { InvitationResult } from '@/models/common'
+import LogoEmbeddedChatHeader from '@/app/components/base/logo/logo-embedded-chat-header'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '@/app/components/billing/type'
-import Button from '@/app/components/base/button'
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
import { NUM_INFINITE } from '@/app/components/billing/config'
import { LanguagesSupported } from '@/i18n/language'
-import cn from '@/utils/classnames'
-import Tooltip from '@/app/components/base/tooltip'
-import { RiPencilLine } from '@remixicon/react'
dayjs.extend(relativeTime)
const MembersPage = () => {
@@ -39,13 +35,7 @@
const { locale } = useContext(I18n)
const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager, systemFeatures } = useAppContext()
- const { data, mutate } = useSWR(
- {
- url: '/workspaces/current/members',
- params: {},
- },
- fetchMembers,
- )
+ const { data, mutate } = useSWR({ url: '/workspaces/current/members' }, fetchMembers)
const [inviteModalVisible, setInviteModalVisible] = useState(false)
const [invitationResults, setInvitationResults] = useState<InvitationResult[]>([])
const [invitedModalVisible, setInvitedModalVisible] = useState(false)
@@ -53,88 +43,74 @@
const { plan, enableBilling } = useProviderContext()
const isNotUnlimitedMemberPlan = enableBilling && plan.type !== Plan.team && plan.type !== Plan.enterprise
const isMemberFull = enableBilling && isNotUnlimitedMemberPlan && accounts.length >= plan.total.teamMembers
- const [editWorkspaceModalVisible, setEditWorkspaceModalVisible] = useState(false)
return (
<>
<div className='flex flex-col'>
- <div className='mb-4 flex items-center gap-3 rounded-xl border-l-[0.5px] border-t-[0.5px] border-divider-subtle bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-3 pr-5'>
- <div className='flex h-12 w-12 items-center justify-center rounded-xl bg-components-icon-bg-blue-solid text-[20px]'>
- <span className='bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text font-semibold uppercase text-shadow-shadow-1 opacity-90'>{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
- </div>
- <div className='grow'>
- <div className='system-md-semibold flex items-center gap-1 text-text-secondary'>
- <span>{currentWorkspace?.name}</span>
- {isCurrentWorkspaceOwner && <span>
- <Tooltip
- popupContent={t('common.account.editWorkspaceInfo')}
- needsDelay
- >
- <div
- className='cursor-pointer rounded-md p-1 hover:bg-black/5'
- onClick={() => {
- setEditWorkspaceModalVisible(true)
- }}
- >
- <RiPencilLine className='h-4 w-4 text-text-tertiary' />
- </div>
- </Tooltip>
- </span>}
- </div>
- <div className='system-xs-medium mt-1 text-text-tertiary'>
- {enableBilling && isNotUnlimitedMemberPlan
- ? (
- <div className='flex space-x-1'>
- <div>{t('billing.plansCommon.member')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}</div>
- <div className=''>{accounts.length}</div>
- <div>/</div>
- <div>{plan.total.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') : plan.total.teamMembers}</div>
- </div>
- )
- : (
- <div className='flex space-x-1'>
- <div>{accounts.length}</div>
- <div>{t('billing.plansCommon.memberAfter')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}</div>
- </div>
- )}
- </div>
+ <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
+ <LogoEmbeddedChatHeader className='!w-10 !h-10' />
+ <div className='grow mx-2'>
+ <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
+ {enableBilling && (
+ <div className='text-xs text-gray-500'>
+ {isNotUnlimitedMemberPlan
+ ? (
+ <div className='flex space-x-1'>
+ <div>{t('billing.plansCommon.member')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}</div>
+ <div className='text-gray-700'>{accounts.length}</div>
+ <div>/</div>
+ <div>{plan.total.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') : plan.total.teamMembers}</div>
+ </div>
+ )
+ : (
+ <div className='flex space-x-1'>
+ <div>{accounts.length}</div>
+ <div>{t('billing.plansCommon.memberAfter')}{locale !== LanguagesSupported[1] && accounts.length > 1 && 's'}</div>
+ </div>
+ )}
+ </div>
+ )}
</div>
{isMemberFull && (
<UpgradeBtn className='mr-2' loc='member-invite' />
)}
- <Button variant='primary' className={cn('shrink-0')} disabled={!isCurrentWorkspaceManager || isMemberFull} onClick={() => setInviteModalVisible(true)}>
- <RiUserAddLine className='mr-1 h-4 w-4' />
+ <div className={
+ `shrink-0 flex items-center py-[7px] px-3 border-[0.5px] border-gray-200
+ text-[13px] font-medium text-primary-600 bg-white
+ shadow-xs rounded-lg ${(isCurrentWorkspaceManager && !isMemberFull) ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+ } onClick={() => (isCurrentWorkspaceManager && !isMemberFull) && setInviteModalVisible(true)}>
+ <RiUserAddLine className='w-4 h-4 mr-2 ' />
{t('common.members.invite')}
- </Button>
+ </div>
</div>
<div className='overflow-visible lg:overflow-visible'>
- <div className='flex min-w-[480px] items-center border-b border-divider-regular py-[7px]'>
- <div className='system-xs-medium-uppercase grow px-3 text-text-tertiary'>{t('common.members.name')}</div>
- <div className='system-xs-medium-uppercase w-[104px] shrink-0 text-text-tertiary'>{t('common.members.lastActive')}</div>
- <div className='system-xs-medium-uppercase w-[96px] shrink-0 px-3 text-text-tertiary'>{t('common.members.role')}</div>
+ <div className='flex items-center py-[7px] border-b border-divider-regular min-w-[480px]'>
+ <div className='grow px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.name')}</div>
+ <div className='shrink-0 w-[104px] system-xs-medium-uppercase text-text-tertiary'>{t('common.members.lastActive')}</div>
+ <div className='shrink-0 w-[96px] px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.role')}</div>
</div>
- <div className='relative min-w-[480px]'>
+ <div className='min-w-[480px] relative'>
{
accounts.map(account => (
<div key={account.id} className='flex border-b border-divider-subtle'>
- <div className='flex grow items-center px-3 py-2'>
+ <div className='grow flex items-center py-2 px-3'>
<Avatar avatar={account.avatar_url} size={24} className='mr-2' name={account.name} />
<div className=''>
- <div className='system-sm-medium text-text-secondary'>
+ <div className='text-text-secondary system-sm-medium'>
{account.name}
- {account.status === 'pending' && <span className='system-xs-medium ml-1 text-text-warning'>{t('common.members.pending')}</span>}
+ {account.status === 'pending' && <span className='ml-1 system-xs-regular text-[#DC6803]'>{t('common.members.pending')}</span>}
{userProfile.email === account.email && <span className='system-xs-regular text-text-tertiary'>{t('common.members.you')}</span>}
</div>
- <div className='system-xs-regular text-text-tertiary'>{account.email}</div>
+ <div className='text-text-tertiary system-xs-regular'>{account.email}</div>
</div>
</div>
- <div className='system-sm-regular flex w-[104px] shrink-0 items-center py-2 text-text-secondary'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
- <div className='flex w-[96px] shrink-0 items-center'>
+ <div className='shrink-0 flex items-center w-[104px] py-2 system-xs-regular text-text-secondary'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
+ <div className='shrink-0 w-[96px] flex items-center'>
{
- isCurrentWorkspaceOwner && account.role !== 'owner'
+ ((isCurrentWorkspaceOwner && account.role !== 'owner') || (isCurrentWorkspaceManager && !['owner', 'admin'].includes(account.role)))
? <Operation member={account} operatorRole={currentWorkspace.role} onOperate={mutate} />
- : <div className='system-sm-regular px-3 text-text-secondary'>{RoleMap[account.role] || RoleMap.normal}</div>
+ : <div className='px-3 system-xs-regular text-text-secondary'>{RoleMap[account.role] || RoleMap.normal}</div>
}
</div>
</div>
@@ -161,13 +137,6 @@
<InvitedModal
invitationResults={invitationResults}
onCancel={() => setInvitedModalVisible(false)}
- />
- )
- }
- {
- editWorkspaceModalVisible && (
- <EditWorkspaceModal
- onCancel={() => setEditWorkspaceModalVisible(false)}
/>
)
}
--
Gitblit v1.8.0