opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-10 05:56:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): align account dropdown submenu semantics

Browse Source
This commit is contained in:
yyh 2026-03-02 15:18:32 +08:00
parent 22ce39cd0e
commit 3377240c3b
No known key found for this signature in database
3 changed files with 91 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
web/app/components/header/account-dropdown/compliance.tsx
View File

@ -1,8 +1,8 @@
import type { FC, MouseEvent, ReactNode } from 'react'
import type { ReactNode } from 'react'
import { useMutation } from '@tanstack/react-query'
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
import { Plan } from '@/app/components/billing/type'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import { useModalContext } from '@/context/modal-context'
@ -10,20 +10,20 @@ import { useProviderContext } from '@/context/provider-context'
import { getDocDownloadUrl } from '@/service/common'
import { cn } from '@/utils/classnames'
import { downloadUrl } from '@/utils/download'
import Button from '../../base/button'
import Gdpr from '../../base/icons/src/public/common/Gdpr'
import Iso from '../../base/icons/src/public/common/Iso'
import Soc2 from '../../base/icons/src/public/common/Soc2'
import SparklesSoft from '../../base/icons/src/public/common/SparklesSoft'
import PremiumBadge from '../../base/premium-badge'
import Spinner from '../../base/spinner'
import Toast from '../../base/toast'
import Tooltip from '../../base/tooltip'
const submenuTriggerClassName = '!mx-0 !h-8 !rounded-lg !px-3 data-[highlighted]:!bg-state-base-hover'
const submenuItemClassName = '!mx-0 !h-10 !rounded-lg !py-1 !pl-1 !pr-2 data-[highlighted]:!bg-state-base-hover'
const menuLabelClassName = 'grow px-1 text-text-secondary system-md-regular'
const menuLeadingIconClassName = 'size-4 shrink-0 text-text-tertiary'
const menuTrailingIconClassName = 'size-[14px] shrink-0 text-text-tertiary'
const complianceRowClassName = 'mx-0 flex h-10 w-full items-center gap-1 rounded-lg py-1 pl-1 pr-2 text-text-secondary system-md-regular'
enum DocName {
SOC2_Type_I = 'SOC2_Type_I',
@ -52,28 +52,70 @@ function ComplianceMenuItemContent({
)
}
type UpgradeOrDownloadProps = {
doc_name: DocName
type ComplianceDocActionVisualProps = {
isCurrentPlanCanDownload: boolean
isPending: boolean
tooltipText: string
downloadText: string
upgradeText: string
}
const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
function ComplianceDocActionVisual({
isCurrentPlanCanDownload,
isPending,
tooltipText,
downloadText,
upgradeText,
}: ComplianceDocActionVisualProps) {
if (isCurrentPlanCanDownload) {
return (
<div
aria-hidden
className={cn(
'btn btn-small btn-secondary pointer-events-none flex items-center gap-[1px]',
isPending && 'btn-disabled',
)}
>
<span className="i-ri-arrow-down-circle-line size-[14px] text-components-button-secondary-text-disabled" />
<span className="px-[3px] text-components-button-secondary-text system-xs-medium">{downloadText}</span>
{isPending && <Spinner loading={true} className="!ml-1 !h-3 !w-3 !border-2 !text-text-tertiary" />}
</div>
)
}
return (
<Tooltip asChild={false} popupContent={tooltipText}>
<PremiumBadge color="blue" allowHover={true}>
<SparklesSoft className="flex h-3.5 w-3.5 items-center py-[1px] pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
<div className="px-1 system-xs-medium">
{upgradeText}
</div>
</PremiumBadge>
</Tooltip>
)
}
type ComplianceDocRowItemProps = {
icon: ReactNode
label: ReactNode
docName: DocName
}
function ComplianceDocRowItem({
icon,
label,
docName,
}: ComplianceDocRowItemProps) {
const { t } = useTranslation()
const { plan } = useProviderContext()
const { setShowPricingModal, setShowAccountSettingModal } = useModalContext()
const isFreePlan = plan.type === Plan.sandbox
const handlePlanClick = useCallback(() => {
if (isFreePlan)
setShowPricingModal()
else
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
}, [isFreePlan, setShowAccountSettingModal, setShowPricingModal])
const { isPending, mutate: downloadCompliance } = useMutation({
mutationKey: ['downloadCompliance', doc_name],
mutationKey: ['downloadCompliance', docName],
mutationFn: async () => {
try {
const ret = await getDocDownloadUrl(doc_name)
const ret = await getDocDownloadUrl(docName)
downloadUrl({ url: ret.url })
Toast.notify({
type: 'success',
@ -89,6 +131,7 @@ const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
}
},
})
const whichPlanCanDownloadCompliance = {
[DocName.SOC2_Type_I]: [Plan.professional, Plan.team],
[DocName.SOC2_Type_II]: [Plan.team],
@ -96,56 +139,44 @@ const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
[DocName.GDPR]: [Plan.team, Plan.professional, Plan.sandbox],
}
const isCurrentPlanCanDownload = whichPlanCanDownloadCompliance[doc_name].includes(plan.type)
const handleDownloadClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
downloadCompliance()
}, [downloadCompliance])
if (isCurrentPlanCanDownload) {
return (
<Button loading={isPending} disabled={isPending} size="small" variant="secondary" className="flex items-center gap-[1px]" onClick={handleDownloadClick}>
<span aria-hidden className="i-ri-arrow-down-circle-line size-[14px] text-components-button-secondary-text-disabled" />
<span className="px-[3px] text-components-button-secondary-text system-xs-medium">{t('operation.download', { ns: 'common' })}</span>
</Button>
)
}
const isCurrentPlanCanDownload = whichPlanCanDownloadCompliance[docName].includes(plan.type)
const handleSelect = useCallback(() => {
if (isCurrentPlanCanDownload) {
if (!isPending)
downloadCompliance()
return
}
if (isFreePlan)
setShowPricingModal()
else
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
}, [downloadCompliance, isCurrentPlanCanDownload, isFreePlan, isPending, setShowAccountSettingModal, setShowPricingModal])
const upgradeTooltip: Record<Plan, string> = {
[Plan.sandbox]: t('compliance.sandboxUpgradeTooltip', { ns: 'common' }),
[Plan.professional]: t('compliance.professionalUpgradeTooltip', { ns: 'common' }),
[Plan.team]: '',
[Plan.enterprise]: '',
}
return (
<Tooltip asChild={false} popupContent={upgradeTooltip[plan.type]}>
<PremiumBadge color="blue" allowHover={true} onClick={handlePlanClick}>
<SparklesSoft className="flex h-3.5 w-3.5 items-center py-[1px] pl-[3px] text-components-premium-badge-indigo-text-stop-0" />
<div className="system-xs-medium">
<span className="p-1">
{t('upgradeBtn.encourageShort', { ns: 'billing' })}
</span>
</div>
</PremiumBadge>
</Tooltip>
)
}
type ComplianceDocRowProps = {
icon: ReactNode
label: ReactNode
docName: DocName
}
function ComplianceDocRow({
icon,
label,
docName,
}: ComplianceDocRowProps) {
return (
<div className={cn(complianceRowClassName, 'justify-between')}>
<DropdownMenuItem
className={cn(submenuItemClassName, 'justify-between')}
closeOnClick={false}
onClick={handleSelect}
>
{icon}
<div className="grow truncate px-1 text-text-secondary system-md-regular">{label}</div>
<UpgradeOrDownload doc_name={docName} />
</div>
<ComplianceDocActionVisual
isCurrentPlanCanDownload={isCurrentPlanCanDownload}
isPending={isPending}
tooltipText={upgradeTooltip[plan.type]}
downloadText={t('operation.download', { ns: 'common' })}
upgradeText={t('upgradeBtn.encourageShort', { ns: 'billing' })}
/>
</DropdownMenuItem>
)
}
@ -162,26 +193,25 @@ export default function Compliance() {
/>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent
className="!z-20"
popupClassName="!w-[337px] !max-h-[70vh] !overflow-y-auto !divide-y !divide-divider-subtle !rounded-xl !bg-components-panel-bg-blur !py-0 !shadow-lg !backdrop-blur-sm"
>
<DropdownMenuGroup className="p-1">
<ComplianceDocRow
<ComplianceDocRowItem
icon={<Soc2 aria-hidden className="size-7 shrink-0" />}
label={t('compliance.soc2Type1', { ns: 'common' })}
docName={DocName.SOC2_Type_I}
/>
<ComplianceDocRow
<ComplianceDocRowItem
icon={<Soc2 aria-hidden className="size-7 shrink-0" />}
label={t('compliance.soc2Type2', { ns: 'common' })}
docName={DocName.SOC2_Type_II}
/>
<ComplianceDocRow
<ComplianceDocRowItem
icon={<Iso aria-hidden className="size-7 shrink-0" />}
label={t('compliance.iso27001', { ns: 'common' })}
docName={DocName.ISO_27001}
/>
<ComplianceDocRow
<ComplianceDocRowItem
icon={<Gdpr aria-hidden className="size-7 shrink-0" />}
label={t('compliance.gdpr', { ns: 'common' })}
docName={DocName.GDPR}

1
web/app/components/header/account-dropdown/index.tsx
View File

@ -167,7 +167,6 @@ export default function AppSelector() {
<Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} />
</DropdownMenuTrigger>
<DropdownMenuContent
className="!z-20"
popupClassName="!mt-1.5 !w-60 !max-w-80 !rounded-xl !bg-components-panel-bg-blur !py-0 !shadow-lg !backdrop-blur-sm"
>
<DropdownMenuGroup className="px-1 py-1">

1
web/app/components/header/account-dropdown/support.tsx
View File

@ -61,7 +61,6 @@ export default function Support({ closeAccountDropdown }: SupportProps) {
/>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent
className="!z-20"
popupClassName="!w-[216px] !max-h-[70vh] !overflow-y-auto !divide-y !divide-divider-subtle !rounded-xl !bg-components-panel-bg-blur !py-0 !shadow-lg !backdrop-blur-sm"
>
<DropdownMenuGroup className="p-1">