wwf
2 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2
app/components/app/configuration/dataset-config/context-var/var-picker.tsx
@@ -3,6 +3,7 @@
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { ChevronDownIcon } from '@heroicons/react/24/outline'
import s from './style.module.css'
import cn from '@/utils/classnames'
import {
  PortalToFollowElem,
@@ -23,7 +24,7 @@
}
const VarItem: FC<{ item: Option }> = ({ item }) => (
  <div className='flex h-[18px] items-center space-x-1 rounded bg-[#EFF8FF] px-1'>
  <div className='flex items-center h-[18px] px-1 bg-[#EFF8FF] rounded space-x-1'>
    <IconTypeIcon type={item.type as IInputTypeIconProps['type']} className='text-[#1570EF]' />
    <div className='flex text-xs font-medium text-[#1570EF]'>
      <span className='opacity-60'>{'{{'}</span>
@@ -55,12 +56,13 @@
    >
      <PortalToFollowElemTrigger className={cn(triggerClassName)} onClick={() => setOpen(v => !v)}>
        <div className={cn(
          s.trigger,
          className,
          notSetVar ? 'border-[#FEDF89] bg-[#FFFCF5] text-[#DC6803]' : ' border-components-button-secondary-border text-text-accent hover:bg-components-button-secondary-bg',
          open ? 'bg-components-button-secondary-bg' : 'bg-transparent',
          notSetVar ? 'bg-[#FFFCF5] border-[#FEDF89] text-[#DC6803]' : ' hover:bg-gray-50 border-gray-200 text-primary-600',
          open ? 'bg-gray-50' : 'bg-white',
          `
          flex h-8 cursor-pointer items-center justify-center space-x-1 rounded-lg border  px-2 text-[13px]
          font-medium  shadow-xs
          flex items-center h-8 justify-center px-2 space-x-1 rounded-lg border  shadow-xs cursor-pointer
          text-[13px]  font-medium
          `)}>
          <div>
            {value
@@ -71,16 +73,16 @@
                {notSelectedVarTip || t('appDebug.feature.dataSet.queryVariable.choosePlaceholder')}
              </div>)}
          </div>
          <ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'h-3.5 w-3.5')} />
          <ChevronDownIcon className={cn(s.dropdownIcon, open && 'rotate-180 text-[#98A2B3]', 'w-3.5 h-3.5')} />
        </div>
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent style={{ zIndex: 1000 }}>
        {options.length > 0
          ? (<div className='max-h-[50vh] w-[240px] overflow-y-auto rounded-lg  border border-components-panel-border bg-components-panel-bg p-1 shadow-lg'>
          ? (<div className='w-[240px] max-h-[50vh] overflow-y-auto p-1  border bg-white border-gray-200 rounded-lg shadow-lg'>
            {options.map(({ name, value, type }, index) => (
              <div
                key={index}
                className='flex cursor-pointer rounded-lg px-3 py-1 hover:bg-state-base-hover'
                className='px-3 py-1 flex rounded-lg hover:bg-gray-50 cursor-pointer'
                onClick={() => {
                  onChange(value)
                  setOpen(false)
@@ -91,9 +93,9 @@
            ))}
          </div>)
          : (
            <div className='w-[240px] rounded-lg border border-components-panel-border bg-components-panel-bg p-6 shadow-lg'>
              <div className='mb-1 text-sm font-medium text-text-secondary'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div>
              <div className='text-xs leading-normal text-text-tertiary'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div>
            <div className='w-[240px] p-6 bg-white border border-gray-200 rounded-lg shadow-lg'>
              <div className='mb-1 text-sm font-medium text-gray-700'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div>
              <div className='text-xs leading-normal text-gray-500'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div>
            </div>
          )}