wwf
3 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2
app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
@@ -1,17 +1,19 @@
'use client'
import type { FC } from 'react'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import {
  RiEqualizer2Line,
} from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import type { PopupProps } from './config-popup'
import ConfigPopup from './config-popup'
import cn from '@/utils/classnames'
import Button from '@/app/components/base/button'
import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
const I18N_PREFIX = 'app.tracing'
type Props = {
  readOnly: boolean
@@ -26,6 +28,7 @@
  controlShowPopup,
  ...popupProps
}) => {
  const { t } = useTranslation()
  const [open, doSetOpen] = useState(false)
  const openRef = useRef(open)
  const setOpen = useCallback((v: boolean) => {
@@ -47,6 +50,21 @@
  if (popupProps.readOnly && !hasConfigured)
    return null
  const triggerContent = hasConfigured
    ? (
      <div className={cn(className, 'p-1 rounded-md hover:bg-black/5 cursor-pointer')}>
        <Settings04 className='w-4 h-4 text-gray-500' />
      </div>
    )
    : (
      <Button variant='primary'
        className={cn(className, '!h-8 !px-3 select-none')}
      >
        <Settings04 className='mr-1 w-4 h-4' />
        <span className='text-[13px]'>{t(`${I18N_PREFIX}.config`)}</span>
      </Button>
    )
  return (
    <PortalToFollowElem
      open={open}
@@ -54,13 +72,11 @@
      placement='bottom-end'
      offset={{
        mainAxis: 12,
        crossAxis: hasConfigured ? 8 : 49,
        crossAxis: hasConfigured ? 8 : 0,
      }}
    >
      <PortalToFollowElemTrigger onClick={handleTrigger}>
        <div className={cn(className, 'rounded-md p-1')}>
          <RiEqualizer2Line className='h-4 w-4 text-text-tertiary' />
        </div>
        {triggerContent}
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className='z-[11]'>
        <ConfigPopup {...popupProps} />