AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-15 22:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

wip: add web access control dialog and member&group select

Browse Source
This commit is contained in:
NFish 2025-04-08 14:46:35 +08:00
parent 9368966d28
commit 3d203407e3
3 changed files with 87 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/app/app-access-control/access-control-dialog.tsx
View File

@ -20,7 +20,7 @@ const AccessControlDialog = ({
const close = useCallback(() => onClose?.(), [onClose])
return (
<Transition appear show={show} as={Fragment}>
<Dialog as="div" open={true} className="relative z-40" onClose={close}>
<Dialog as="div" open={true} className="relative z-20" onClose={close}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"

83
web/app/components/app/app-access-control/add-member-or-group-dialog.tsx Normal file
View File

@ -0,0 +1,83 @@
'use client'
import { RiAddCircleFill, RiArrowRightSLine, RiOrganizationChart } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { useState } from 'react'
import Avatar from '../../base/avatar'
import Button from '../../base/button'
import Checkbox from '../../base/checkbox'
import Input from '../../base/input'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
import classNames from '@/utils/classnames'
export default function AddMemberOrGroupDialog() {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
return <PortalToFollowElem open={open} onOpenChange={setOpen} offset={{ crossAxis: 300 }} placement='bottom-end'>
<PortalToFollowElemTrigger asChild>
<Button variant='ghost-accent' size='small' className='shrink-0 flex items-center gap-x-0.5' onClick={() => setOpen(!open)}>
<RiAddCircleFill className='w-4 h-4' />
<span>{t('common.operation.add')}</span>
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[25]'>
<div className='w-[400px] max-h-[400px] overflow-y-auto flex flex-col border-[0.5px] border-components-panel-border rounded-xl bg-components-panel-bg-blur backdrop-blur-[5px] shadow-lg'>
<div className='p-2 pb-0.5'>
<Input placeholder='search...' />
</div>
<div className='flex items-center h-7 px-2 py-0.5'>
<span className='system-xs-regular text-text-tertiary'>All Members</span>
</div>
<div className='p-1'>
<GroupItem />
<MemberItem />
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
}
function GroupItem() {
return <BaseItem>
<Checkbox className='w-4 h-4 shrink-0' />
<div className='flex item-center grow'>
<div className='w-5 h-5 rounded-full bg-components-icon-bg-blue-solid overflow-hidden mr-2'>
<div className='w-full h-full flex items-center justify-center bg-access-app-icon-mask-bg'>
<RiOrganizationChart className='w-[14px] h-[14px] text-components-avatar-shape-fill-stop-0' />
</div>
</div>
<p className='system-sm-medium text-text-secondary mr-1'>Name</p>
<p className='system-xs-regular text-text-tertiary'>5</p>
</div>
<Button size="small" variant='ghost-accent' className='w-[76px] py-1 px-1.5 shrink-0 flex items-center justify-between'>
<span>Expand</span>
<RiArrowRightSLine className='w-4 h-4' />
</Button>
</BaseItem>
}
function MemberItem() {
return <BaseItem className='pr-3'>
<Checkbox className='w-4 h-4 shrink-0' />
<div className='flex items-center grow'>
<div className='w-5 h-5 rounded-full bg-components-icon-bg-blue-solid overflow-hidden mr-2'>
<div className='w-full h-full flex items-center justify-center bg-access-app-icon-mask-bg'>
<Avatar className='w-[14px] h-[14px]' textClassName='text-[12px]' avatar={null} name='M' />
</div>
</div>
<p className='system-sm-medium text-text-secondary mr-1'>Name</p>
<p className='system-xs-regular text-text-tertiary'>5</p>
</div>
<p className='system-xs-regular text-text-quaternary'>douxc512@gmail.com</p>
</BaseItem>
}
type BaseItemProps = {
className?: string
children: React.ReactNode
}
function BaseItem({ children, className }: BaseItemProps) {
return <div className={classNames('p-1 pl-2 flex items-center space-x-2 hover:rounded-lg hover:bg-state-base-hover cursor-pointer', className)}>
{children}
</div>
}

9
web/app/components/app/app-access-control/specific-groups-or-members.tsx
View File

@ -1,8 +1,8 @@
'use client'
import { RiAddCircleFill, RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
import { RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import Avatar from '../../base/avatar'
import Button from '../../base/button'
import AddMemberOrGroupDialog from './add-member-or-group-dialog'
type SpecificGroupsOrMembersProps = {
active: boolean
@ -24,10 +24,7 @@ export default function SpecificGroupsOrMembers(props: SpecificGroupsOrMembersPr
<RiLockLine className='w-4 h-4 text-text-primary' />
<p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.specific')}</p>
</div>
<Button variant='ghost-accent' size='small' className='shrink-0 flex items-center gap-x-0.5'>
<RiAddCircleFill className='w-4 h-4' />
<span>{t('common.operation.add')}</span>
</Button>
<AddMemberOrGroupDialog />
</div>
<div className='px-1 pb-1'>
<div className='bg-background-section rounded-lg p-2 flex flex-col gap-y-2'>