fix(trigger): readme portal zindex

2025-10-27 17:45:18 +08:00 · 2025-10-27 17:45:18 +08:00 · 96a461646e
parent 5df94fd866
commit 96a461646e
5 changed files with 47 additions and 39 deletions
--- a/web/app/components/base/modal/modal.tsx
+++ b/web/app/components/base/modal/modal.tsx
@ -1,13 +1,14 @@
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
+import type { ButtonProps } from '@/app/components/base/button'
+import Button from '@/app/components/base/button'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
-import Button from '@/app/components/base/button'
-import type { ButtonProps } from '@/app/components/base/button'
 import cn from '@/utils/classnames'
+import { RiCloseLine } from '@remixicon/react'
+import { noop } from 'lodash-es'
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'

 type ModalProps = {
  onClose?: () => void
@ -27,6 +28,7 @@ type ModalProps = {
  bottomSlot?: React.ReactNode
  disabled?: boolean
  containerClassName?: string
+  wrapperClassName?: string
  clickOutsideNotClose?: boolean
 }
 const Modal = ({
@ -47,6 +49,7 @@ const Modal = ({
  bottomSlot,
  disabled,
  containerClassName,
+  wrapperClassName,
  clickOutsideNotClose = false,
 }: ModalProps) => {
  const { t } = useTranslation()
@ -54,8 +57,8 @@ const Modal = ({
  return (
    <PortalToFollowElem open>
      <PortalToFollowElemContent
-        className='z-[9998] flex h-full w-full items-center justify-center bg-background-overlay'
-        onClick={clickOutsideNotClose ? undefined : onClose}
+        className={cn('z-[9998] flex h-full w-full items-center justify-center bg-background-overlay', wrapperClassName)}
+        onClick={clickOutsideNotClose ? noop : onClose}
      >
        <div
          className={cn(
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@ -142,6 +142,7 @@ const ApiKeyModal = ({
      onExtraButtonClick={onRemove}
      disabled={disabled || isLoading || doingAction}
      clickOutsideNotClose={true}
+      wrapperClassName='!z-[101]'
    >
      <ReadmeEntrance pluginDetail={pluginPayload.detail} showType={ReadmeShowType.modal} />
      {
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@ -157,6 +157,7 @@ const OAuthClientSettings = ({
        )
      }
      containerClassName='pt-0'
+      wrapperClassName='!z-[101]'
      clickOutsideNotClose={true}
    >
      <ReadmeEntrance pluginDetail={pluginPayload.detail} showType={ReadmeShowType.modal} />
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@ -85,7 +85,8 @@ const DetailHeader = ({
    deprecated_reason,
    alternative_plugin_id,
  } = detail
-  const { author, category, name, label, description, icon, verified, tool } = detail.declaration
+
+  const { author, category, name, label, description, icon, verified, tool } = detail.declaration || detail
  const isTool = category === PluginCategoryEnum.tool
  const providerBriefInfo = tool?.identity
  const providerKey = `${plugin_id}/${providerBriefInfo?.name}`
@ -213,13 +214,13 @@ const DetailHeader = ({
    <div className={cn('shrink-0 border-b border-divider-subtle bg-components-panel-bg p-4 pb-3', isReadmeView && 'border-b-0 bg-transparent p-0')}>
      <div className="flex">
        <div className={cn('overflow-hidden rounded-xl border border-components-panel-border-subtle', isReadmeView && 'bg-components-panel-bg')}>
-          <Icon src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`} />
+          <Icon src={icon.startsWith('http') ? icon : `${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`} />
        </div>
        <div className="ml-3 w-0 grow">
          <div className="flex h-5 items-center">
            <Title title={label[locale]} />
            {verified && !isReadmeView && <RiVerifiedBadgeLine className="ml-0.5 h-4 w-4 shrink-0 text-text-accent" />}
-            <PluginVersionPicker
+            {version && <PluginVersionPicker
              disabled={!isFromMarketplace || isReadmeView}
              isShow={isShow}
              onShowChange={setIsShow}
@ -246,7 +247,7 @@ const DetailHeader = ({
                  hasRedCornerMark={hasNewVersion}
                />
              }
-            />
+            />}
            {/* Auto update info */}
            {isAutoUpgradeEnabled && !isReadmeView && (
              <Tooltip popupContent={t('plugin.autoUpdate.nextUpdateTime', { time: timeOfDayToDayjs(convertUTCDaySecondsToLocalSeconds(autoUpgradeInfo?.upgrade_time_of_day || 0, timezone!)).format('hh:mm A') })}>
@ -276,36 +277,38 @@ const DetailHeader = ({
              <OrgInfo
                packageNameClassName='w-auto'
                orgName={author}
-                packageName={name}
+                packageName={name?.includes('/') ? (name.split('/').pop() || '') : name}
              />
-              <div className='system-xs-regular ml-1 mr-0.5 text-text-quaternary'>·</div>
-              {detail.source === PluginSource.marketplace && (
-                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.marketplace')} >
-                  <div><BoxSparkleFill className='h-3.5 w-3.5 text-text-tertiary hover:text-text-accent' /></div>
-                </Tooltip>
-              )}
-              {detail.source === PluginSource.github && (
-                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.github')} >
-                  <div><Github className='h-3.5 w-3.5 text-text-secondary hover:text-text-primary' /></div>
-                </Tooltip>
-              )}
-              {detail.source === PluginSource.local && (
-                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.local')} >
-                  <div><RiHardDrive3Line className='h-3.5 w-3.5 text-text-tertiary' /></div>
-                </Tooltip>
-              )}
-              {detail.source === PluginSource.debugging && (
-                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.debugging')} >
-                  <div><RiBugLine className='h-3.5 w-3.5 text-text-tertiary hover:text-text-warning' /></div>
-                </Tooltip>
-              )}
+              {source && <>
+                <div className='system-xs-regular ml-1 mr-0.5 text-text-quaternary'>·</div>
+                {source === PluginSource.marketplace && (
+                  <Tooltip popupContent={t('plugin.detailPanel.categoryTip.marketplace')} >
+                    <div><BoxSparkleFill className='h-3.5 w-3.5 text-text-tertiary hover:text-text-accent' /></div>
+                  </Tooltip>
+                )}
+                {source === PluginSource.github && (
+                  <Tooltip popupContent={t('plugin.detailPanel.categoryTip.github')} >
+                    <div><Github className='h-3.5 w-3.5 text-text-secondary hover:text-text-primary' /></div>
+                  </Tooltip>
+                )}
+                {source === PluginSource.local && (
+                  <Tooltip popupContent={t('plugin.detailPanel.categoryTip.local')} >
+                    <div><RiHardDrive3Line className='h-3.5 w-3.5 text-text-tertiary' /></div>
+                  </Tooltip>
+                )}
+                {source === PluginSource.debugging && (
+                  <Tooltip popupContent={t('plugin.detailPanel.categoryTip.debugging')} >
+                    <div><RiBugLine className='h-3.5 w-3.5 text-text-tertiary hover:text-text-warning' /></div>
+                  </Tooltip>
+                )}
+              </>}
            </div>
          </div>
        </div>
        {!isReadmeView && (
          <div className='flex gap-1'>
            <OperationDropdown
-              source={detail.source}
+              source={source}
              onInfo={showPluginInfo}
              onCheckVersion={handleUpdate}
              onRemove={showDeleteConfirm}
--- a/web/app/components/plugins/readme-panel/index.tsx
+++ b/web/app/components/plugins/readme-panel/index.tsx
@ -1,9 +1,9 @@
 'use client'
 import ActionButton from '@/app/components/base/action-button'
-import Drawer from '@/app/components/base/drawer'
 import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import Modal from '@/app/components/base/modal'
+import Drawer from '@/app/components/base/drawer'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { usePluginReadme } from '@/service/use-plugins'
 import cn from '@/utils/classnames'
@ -95,13 +95,13 @@ const ReadmePanel: FC = () => {
        positionCenter={false}
        showClose={false}
        panelClassName={cn(
-          'mb-2 ml-2 mt-16 !w-[600px] !max-w-[600px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl',
+          '!pointer-events-auto mb-2 ml-2 mt-16 !w-[600px] !max-w-[600px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl',
          '!z-[9999]',
        )}
-        dialogClassName={cn('!z-[9998]')}
+        dialogClassName={cn('!pointer-events-none')}
        containerClassName='!justify-start'
        noOverlay
-        clickOutsideNotOpen={false}
+        clickOutsideNotOpen={true}
      >
        {children}
      </Drawer>
@ -111,7 +111,7 @@ const ReadmePanel: FC = () => {
        onClose={onClose}
        overlayOpacity={true}
        className='h-[calc(100vh-16px)] max-w-[800px] p-0'
-        wrapperClassName='!z-[10000]'
+        wrapperClassName='!z-[102]'
        containerClassName='p-2'
        clickOutsideNotClose={true}
      >