mirror of
https://github.com/langgenius/dify.git
synced 2026-03-06 08:06:37 +08:00
784bda9c86
- Migrate OperationDropdown from legacy portal-to-follow-elem to base UI DropdownMenu primitives - Add placement, sideOffset, alignOffset, popupClassName props for flexible positioning - Fix version badge font size: system-2xs-medium-uppercase (10px) → system-xs-medium-uppercase (12px) - Set provider card dropdown to bottom-start placement with 192px width per Figma spec - Fix PluginVersionPicker toggle: clicking badge now opens and closes the picker - Add max-h-[224px] overflow scroll to version list - Replace Remix icon imports with Tailwind CSS icon classes - Prune stale eslint suppressions for migrated files
84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import type { Placement } from '@/app/components/base/ui/placement'
|
|
import * as React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/app/components/base/ui/dropdown-menu'
|
|
import { useGlobalPublicStore } from '@/context/global-public-context'
|
|
import { cn } from '@/utils/classnames'
|
|
import { PluginSource } from '../types'
|
|
|
|
type Props = {
|
|
source: PluginSource
|
|
onInfo: () => void
|
|
onCheckVersion: () => void
|
|
onRemove: () => void
|
|
detailUrl: string
|
|
placement?: Placement
|
|
sideOffset?: number
|
|
alignOffset?: number
|
|
popupClassName?: string
|
|
}
|
|
|
|
const OperationDropdown: FC<Props> = ({
|
|
source,
|
|
detailUrl,
|
|
onInfo,
|
|
onCheckVersion,
|
|
onRemove,
|
|
placement = 'bottom-end',
|
|
sideOffset = 4,
|
|
alignOffset = 0,
|
|
popupClassName,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const [open, setOpen] = React.useState(false)
|
|
const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
|
|
|
|
return (
|
|
<DropdownMenu open={open} onOpenChange={setOpen}>
|
|
<DropdownMenuTrigger
|
|
className={cn('action-btn action-btn-m', open && 'bg-state-base-hover')}
|
|
>
|
|
<span className="i-ri-more-fill h-4 w-4" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
placement={placement}
|
|
sideOffset={sideOffset}
|
|
alignOffset={alignOffset}
|
|
popupClassName={cn('w-[160px]', popupClassName)}
|
|
>
|
|
{source === PluginSource.github && (
|
|
<DropdownMenuItem onClick={onInfo}>
|
|
{t('detailPanel.operation.info', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{source === PluginSource.github && (
|
|
<DropdownMenuItem onClick={onCheckVersion}>
|
|
{t('detailPanel.operation.checkUpdate', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
|
|
<DropdownMenuItem render={<a href={detailUrl} target="_blank" rel="noopener noreferrer" />}>
|
|
<span className="grow">{t('detailPanel.operation.viewDetail', { ns: 'plugin' })}</span>
|
|
<span className="i-ri-arrow-right-up-line h-3.5 w-3.5 shrink-0 text-text-tertiary" />
|
|
</DropdownMenuItem>
|
|
)}
|
|
{(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
|
|
<DropdownMenuSeparator />
|
|
)}
|
|
<DropdownMenuItem destructive onClick={onRemove}>
|
|
{t('detailPanel.operation.remove', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
export default React.memo(OperationDropdown)
|