feat: http node hightlight node

web/app/components/app/configuration/base/var-highlight/index.tsx

@@ -6,15 +6,17 @@ import s from './style.module.css'
 
 export type IVarHighlightProps = {
   name: string
+  className?: string
 }
 
 const VarHighlight: FC<IVarHighlightProps> = ({
   name,
+  className = '',
 }) => {
   return (
     <div
       key={name}
-      className={`${s.item} flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600`}
+      className={`${s.item} ${className} flex mb-2 items-center justify-center rounded-md px-1 h-5 text-xs font-medium text-primary-600`}
     >
       <span className='opacity-60'>{'{{'}</span>
       <span>{name}</span>
@@ -23,8 +25,8 @@ const VarHighlight: FC<IVarHighlightProps> = ({
   )
 }
 
-export const varHighlightHTML = ({ name }: IVarHighlightProps) => {
-  const html = `<div class="${s.item} inline-flex mb-2 items-center justify-center px-1 rounded-md h-5 text-xs font-medium text-primary-600">
+export const varHighlightHTML = ({ name, className = '' }: IVarHighlightProps) => {
+  const html = `<div class="${s.item} ${className} inline-flex mb-2 items-center justify-center px-1 rounded-md h-5 text-xs font-medium text-primary-600">
   <span class='opacity-60'>{{</span>
   <span>${name}</span>
   <span class='opacity-60'>}}</span>

web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx

@@ -4,10 +4,10 @@ import React from 'react'
 import cn from 'classnames'
 import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
 type Props = {
-  isFocus: boolean
-  onFocus: () => void
+  isFocus?: boolean
+  onFocus?: () => void
   value: string
-  children: React.ReactNode
+  children?: React.ReactNode
   wrapClassName?: string
   textClassName?: string
   readonly?: boolean
@@ -25,22 +25,23 @@ const SupportVarInput: FC<Props> = ({
   const withHightContent = (value || '')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
-    .replace(/\{\{([^}]+)\}\}/g, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
+    .replace(/\{\{([^}]+)\}\}/g, varHighlightHTML({ name: '$1', className: '!mb-0' })) // `<span class="${highLightClassName}">{{$1}}</span>`
     .replace(/\n/g, '<br />')
 
   return (
     <div
       className={
-        cn(wrapClassName, 'w-full h-full')
+        cn(wrapClassName, 'flex w-full h-full')
       } onClick={onFocus}
     >
-      {(isFocus && !readonly)
+      {(isFocus && !readonly && children)
         ? (
           children
         )
         : (
           <div
-            className={cn(textClassName, 'w-full h-full')}
+            className={cn(textClassName, 'w-0 grow h-full whitespace-nowrap truncate')}
+            title={value}
             dangerouslySetInnerHTML={{
               __html: withHightContent,
             }}></div>

web/app/components/workflow/nodes/http/node.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import React from 'react'
 import type { HttpNodeType } from './types'
 import type { NodeProps } from '@/app/components/workflow/types'
+import SupportVarInput from '@/app/components/workflow/nodes/_base/components/support-var-input'
 
 const Node: FC<NodeProps<HttpNodeType>> = ({
   data,
@@ -11,7 +12,12 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
     <div className='mb-1 px-3 py-1'>
       <div className='flex items-center p-1 rounded-md bg-gray-100'>
         <div className='shrink-0 px-1 h-7 leading-7 rounded bg-gray-25 text-xs font-semibold text-gray-700 uppercase'>{method}</div>
-        <div className='ml-1 w-0 grow truncate text-xs font-normal text-gray-700'>{url}</div>
+        <SupportVarInput
+          wrapClassName='w-0 grow truncate flex items-center'
+          textClassName='ml-1 text-xs font-normal text-gray-700'
+          value={url}
+          readonly
+        />
       </div>
     </div>
   )