refactor(web): migrate operation-dropdown to base UI and align provider card styles with Figma

- 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
2026-04-26 05:35:58 +08:00 · 2026-03-04 21:55:23 +08:00
parent 1af1fb6913
commit 784bda9c86
5 changed files with 82 additions and 137 deletions
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import { useMemo } from 'react'
-import Badge from '@/app/components/base/badge'
 import { HeaderModals } from '@/app/components/plugins/plugin-detail-panel/detail-header/components'
 import { useDetailHeaderState, usePluginOperations } from '@/app/components/plugins/plugin-detail-panel/detail-header/hooks'
 import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
@ -68,21 +67,21 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
          pluginID={detail.plugin_id}
          currentVersion={version}
          onSelect={handleVersionSelect}
+          offset={{ mainAxis: 4, crossAxis: 0 }}
          trigger={(
-            <Badge
+            <div
              className={cn(
-                'relative',
+                'relative inline-flex min-w-5 items-center justify-center gap-[3px] rounded-md border border-divider-deep px-[5px] py-[2px] text-text-tertiary system-xs-medium-uppercase',
                versionPicker.isShow && 'bg-state-base-hover',
-                isFromMarketplace && 'hover:bg-state-base-hover',
+                isFromMarketplace && 'cursor-pointer hover:bg-state-base-hover',
              )}
-              uppercase
            >
              <span>{version}</span>
-              {isFromMarketplace && <span className="i-ri-arrow-down-s-line h-3 w-3 text-text-tertiary" />}
+              {isFromMarketplace && <span className="i-ri-arrow-down-s-line h-3 w-3" />}
              {hasNewVersion && (
                <span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 rounded-full bg-state-destructive-solid" />
              )}
-            </Badge>
+            </div>
          )}
        />
      )}
@ -93,6 +92,8 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
        onCheckVersion={() => handleUpdate()}
        onRemove={modalStates.showDeleteConfirm}
        detailUrl={detailUrl}
+        placement="bottom-start"
+        popupClassName="w-[192px]"
      />

      <HeaderModals
--- a/web/app/components/plugins/plugin-detail-panel/tests/operation-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tests/operation-dropdown.spec.tsx
@ -1,3 +1,5 @@
+import type { ReactElement, ReactNode } from 'react'
+import { cloneElement } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { PluginSource } from '../../types'
@ -12,24 +14,22 @@ vi.mock('@/utils/classnames', () => ({
  cn: (...args: (string | undefined | false | null)[]) => args.filter(Boolean).join(' '),
 }))

-vi.mock('@/app/components/base/action-button', () => ({
-  default: ({ children, className, onClick }: { children: React.ReactNode, className?: string, onClick?: () => void }) => (
-    <button data-testid="action-button" className={className} onClick={onClick}>
-      {children}
-    </button>
+vi.mock('@/app/components/base/ui/dropdown-menu', () => ({
+  DropdownMenu: ({ children, open }: { children: ReactNode, open: boolean }) => (
+    <div data-testid="dropdown-menu" data-open={open}>{children}</div>
  ),
-}))
-
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-    <div data-testid="portal-elem" data-open={open}>{children}</div>
+  DropdownMenuTrigger: ({ children, className }: { children: ReactNode, className?: string }) => (
+    <button data-testid="dropdown-trigger" className={className}>{children}</button>
  ),
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>{children}</div>
-  ),
-  PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => (
-    <div data-testid="portal-content" className={className}>{children}</div>
+  DropdownMenuContent: ({ children }: { children: ReactNode }) => (
+    <div data-testid="dropdown-content">{children}</div>
  ),
+  DropdownMenuItem: ({ children, onClick, render, destructive }: { children: ReactNode, onClick?: () => void, render?: ReactElement, destructive?: boolean }) => {
+    if (render)
+      return cloneElement(render, { onClick, 'data-destructive': destructive } as Record<string, unknown>, children)
+    return <div data-testid="dropdown-item" data-destructive={destructive} onClick={onClick}>{children}</div>
+  },
+  DropdownMenuSeparator: () => <hr data-testid="dropdown-separator" />,
 }))

 describe('OperationDropdown', () => {
@ -52,14 +52,13 @@ describe('OperationDropdown', () => {
    it('should render trigger button', () => {
      render(<OperationDropdown {...defaultProps} />)

-      expect(screen.getByTestId('portal-trigger')).toBeInTheDocument()
-      expect(screen.getByTestId('action-button')).toBeInTheDocument()
+      expect(screen.getByTestId('dropdown-trigger')).toBeInTheDocument()
    })

    it('should render dropdown content', () => {
      render(<OperationDropdown {...defaultProps} />)

-      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+      expect(screen.getByTestId('dropdown-content')).toBeInTheDocument()
    })

    it('should render info option for github source', () => {
@ -118,14 +117,10 @@ describe('OperationDropdown', () => {
  })

  describe('User Interactions', () => {
-    it('should toggle dropdown when trigger is clicked', () => {
+    it('should render dropdown menu root', () => {
      render(<OperationDropdown {...defaultProps} />)

-      const trigger = screen.getByTestId('portal-trigger')
-      fireEvent.click(trigger)
-
-      // The portal-elem should reflect the open state
-      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      expect(screen.getByTestId('dropdown-menu')).toBeInTheDocument()
    })

    it('should call onInfo when info option is clicked', () => {
@ -174,7 +169,7 @@ describe('OperationDropdown', () => {
        const { unmount } = render(
          <OperationDropdown {...defaultProps} source={source} />,
        )
-        expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+        expect(screen.getByTestId('dropdown-menu')).toBeInTheDocument()
        expect(screen.getByText('plugin.detailPanel.operation.remove')).toBeInTheDocument()
        unmount()
      })
@ -199,9 +194,7 @@ describe('OperationDropdown', () => {

  describe('Memoization', () => {
    it('should be wrapped with React.memo', () => {
-      // Verify the component is exported as a memo component
      expect(OperationDropdown).toBeDefined()
-      // React.memo wraps the component, so it should have $$typeof
      expect((OperationDropdown as { $$typeof?: symbol }).$$typeof).toBeDefined()
    })
  })
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@ -1,16 +1,15 @@
 'use client'
 import type { FC } from 'react'
-import { RiArrowRightUpLine, RiMoreFill } from '@remixicon/react'
+import type { Placement } from '@/app/components/base/ui/placement'
 import * as React from 'react'
-import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import ActionButton from '@/app/components/base/action-button'
-// import Button from '@/app/components/base/button'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  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'
@ -21,6 +20,10 @@ type Props = {
  onCheckVersion: () => void
  onRemove: () => void
  detailUrl: string
+  placement?: Placement
+  sideOffset?: number
+  alignOffset?: number
+  popupClassName?: string
 }

 const OperationDropdown: FC<Props> = ({
@ -29,83 +32,52 @@ const OperationDropdown: FC<Props> = ({
  onInfo,
  onCheckVersion,
  onRemove,
+  placement = 'bottom-end',
+  sideOffset = 4,
+  alignOffset = 0,
+  popupClassName,
 }) => {
  const { t } = useTranslation()
-  const [open, doSetOpen] = useState(false)
-  const openRef = useRef(open)
-  const setOpen = useCallback((v: boolean) => {
-    doSetOpen(v)
-    openRef.current = v
-  }, [doSetOpen])
-
-  const handleTrigger = useCallback(() => {
-    setOpen(!openRef.current)
-  }, [setOpen])
-
+  const [open, setOpen] = React.useState(false)
  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)

  return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: -12,
-        crossAxis: 36,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <div>
-          <ActionButton className={cn(open && 'bg-state-base-hover')}>
-            <RiMoreFill className="h-4 w-4" />
-          </ActionButton>
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-50">
-        <div className="w-[160px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
-          {source === PluginSource.github && (
-            <div
-              onClick={() => {
-                onInfo()
-                handleTrigger()
-              }}
-              className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
-            >
-              {t('detailPanel.operation.info', { ns: 'plugin' })}
-            </div>
-          )}
-          {source === PluginSource.github && (
-            <div
-              onClick={() => {
-                onCheckVersion()
-                handleTrigger()
-              }}
-              className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover"
-            >
-              {t('detailPanel.operation.checkUpdate', { ns: 'plugin' })}
-            </div>
-          )}
-          {(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
-            <a href={detailUrl} target="_blank" className="system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">
-              <span className="grow">{t('detailPanel.operation.viewDetail', { ns: 'plugin' })}</span>
-              <RiArrowRightUpLine className="h-3.5 w-3.5 shrink-0 text-text-tertiary" />
-            </a>
-          )}
-          {(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
-            <div className="my-1 h-px bg-divider-subtle"></div>
-          )}
-          <div
-            onClick={() => {
-              onRemove()
-              handleTrigger()
-            }}
-            className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive"
-          >
-            {t('detailPanel.operation.remove', { ns: 'plugin' })}
-          </div>
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+    <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)
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@ -59,7 +59,7 @@ const PluginVersionPicker: FC<Props> = ({
  const handleTriggerClick = () => {
    if (disabled)
      return
-    onShowChange(true)
+    onShowChange(!isShow)
  }

  const { data: res } = useVersionListOfPlugin(pluginID)
@ -94,7 +94,7 @@ const PluginVersionPicker: FC<Props> = ({
          <div className="system-xs-medium-uppercase px-3 pb-0.5 pt-1 text-text-tertiary">
            {t('detailPanel.switchVersion', { ns: 'plugin' })}
          </div>
-          <div className="relative">
+          <div className="relative max-h-[224px] overflow-y-auto">
            {res?.data.versions.map(version => (
              <div
                key={version.unique_identifier}
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@ -4875,11 +4875,6 @@
      "count": 1
    }
  },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
  "app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx": {
    "no-restricted-imports": {
      "count": 1
@ -4920,14 +4915,6 @@
      "count": 1
    }
  },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
  "app/components/header/account-setting/model-provider-page/provider-icon/index.tsx": {
    "tailwindcss/enforce-consistent-class-order": {
      "count": 1
@ -5424,14 +5411,6 @@
      "count": 1
    }
  },
-  "app/components/plugins/plugin-detail-panel/operation-dropdown.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
  "app/components/plugins/plugin-detail-panel/strategy-detail.tsx": {
    "tailwindcss/enforce-consistent-class-order": {
      "count": 11