refactor: unified cn utils (#29916)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
This commit is contained in:
Stephen Zhou
2025-12-19 12:08:34 +08:00
committed by GitHub
parent 80f11471ae
commit a26881cb24
815 changed files with 1064 additions and 1227 deletions

View File

@@ -4,7 +4,7 @@ import React from 'react'
import {
RiAddLine,
} from '@remixicon/react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Button from '@/app/components/base/button'
type Props = {

View File

@@ -2,7 +2,7 @@ import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigge
import type { ReactNode } from 'react'
import { memo, useEffect, useMemo, useRef, useState } from 'react'
import type { Strategy } from './agent-strategy'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
import Tooltip from '@/app/components/base/tooltip'
import Link from 'next/link'
@@ -162,7 +162,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
alt='icon'
/></div>}
<p
className={classNames(value ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder', 'px-1 text-xs')}
className={cn(value ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder', 'px-1 text-xs')}
>
{value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}
</p>

View File

@@ -22,7 +22,7 @@ import { Line3 } from '@/app/components/base/icons/src/public/common'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { FileEntity } from '@/app/components/base/file-uploader/types'
import BoolInput from './bool-input'
import { useHooksStore } from '@/app/components/workflow/hooks-store'

View File

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'
import { produce } from 'immer'
import type { InputVar } from '../../../../types'
import FormItem from './form-item'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { InputVarType } from '@/app/components/workflow/types'
import AddButton from '@/app/components/base/button/add-button'
import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'

View File

@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import type { Props as FormProps } from './form'
import Form from './form'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Button from '@/app/components/base/button'
import Split from '@/app/components/workflow/nodes/_base/components/split'
import { InputVarType } from '@/app/components/workflow/types'

View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useBoolean } from 'ahooks'
import cn from 'classnames'
import { cn } from '@/utils/classnames'
import type { CodeLanguage } from '../../code/types'
import { Generator } from '@/app/components/base/icons/src/vender/other'
import { ActionButton } from '@/app/components/base/action-button'

View File

@@ -1,7 +1,7 @@
import type { ReactNode } from 'react'
import { useMemo, useState } from 'react'
import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
export { default as FieldCollapse } from './field-collapse'

View File

@@ -6,7 +6,7 @@ import ToggleExpandBtn from '../toggle-expand-btn'
import CodeGeneratorButton from '../code-generator-button'
import type { CodeLanguage } from '../../../code/types'
import Wrap from './wrap'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
import {
Copy,

View File

@@ -5,7 +5,7 @@ import { useBoolean } from 'ahooks'
import { useTranslation } from 'react-i18next'
import type { Props as EditorProps } from '.'
import Editor from '.'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
import type { NodeOutPutVar, Variable } from '@/app/components/workflow/types'

View File

@@ -3,7 +3,7 @@ import type { FC } from 'react'
import Editor, { loader } from '@monaco-editor/react'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import Base from '../base'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import {
getFilesInLogs,

View File

@@ -5,7 +5,7 @@ import { NodeSourceHandle } from '../node-handle'
import { ErrorHandleTypeEnum } from './types'
import type { Node } from '@/app/components/workflow/types'
import { NodeRunningStatus } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type ErrorHandleOnNodeProps = Pick<Node, 'id' | 'data'>
const ErrorHandleOnNode = ({

View File

@@ -5,7 +5,7 @@ import {
RiArrowDownSLine,
} from '@remixicon/react'
import { useBoolean } from 'ahooks'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
type Props = {

View File

@@ -3,7 +3,7 @@ import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { SupportUploadFileTypes } from '../../../types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
import TagInput from '@/app/components/base/tag-input'
import Checkbox from '@/app/components/base/checkbox'

View File

@@ -1,6 +1,6 @@
'use client'
import type { FC } from 'react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type Props = {
value: boolean

View File

@@ -22,7 +22,7 @@ import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/mo
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import { RiCheckLine, RiLoader4Line } from '@remixicon/react'

View File

@@ -7,7 +7,7 @@ import {
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import Tooltip from '@/app/components/base/tooltip'
import { VarType } from '@/app/components/workflow/nodes/tool/types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type Props = {
value: VarType

View File

@@ -1,11 +1,11 @@
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'
export type GroupLabelProps = ComponentProps<'div'>
export const GroupLabel: FC<GroupLabelProps> = (props) => {
const { children, className, ...rest } = props
return <div {...rest} className={classNames('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
return <div {...rest} className={cn('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
{children}
</div>
}
@@ -16,7 +16,7 @@ export type GroupProps = PropsWithChildren<{
export const Group: FC<GroupProps> = (props) => {
const { children, label } = props
return <div className={classNames('py-1')}>
return <div className={cn('py-1')}>
{label}
<div className='space-y-0.5'>
{children}

View File

@@ -3,7 +3,7 @@ import type { FC } from 'react'
import React, { useEffect } from 'react'
import { useBoolean } from 'ahooks'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type {
Node,
NodeOutPutVar,

View File

@@ -2,7 +2,7 @@ import Button from '@/app/components/base/button'
import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
import type { ComponentProps, MouseEventHandler } from 'react'
import { useState } from 'react'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { useTranslation } from 'react-i18next'
import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
import { TaskStatus } from '@/app/components/plugins/types'
@@ -96,7 +96,7 @@ export const InstallPluginButton = (props: InstallPluginButtonProps) => {
disabled={isLoading}
{...rest}
onClick={handleInstall}
className={classNames('flex items-center', className)}
className={cn('flex items-center', className)}
>
{!isLoading ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
{!isLoading ? <RiInstallLine className='ml-1 size-3.5' /> : <RiLoader2Line className='ml-1 size-3.5 animate-spin' />}

View File

@@ -1,6 +1,6 @@
import type { ReactNode } from 'react'
import { memo } from 'react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
export type BoxProps = {
className?: string

View File

@@ -5,7 +5,7 @@ import {
} from 'react'
import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
import Tooltip from '@/app/components/base/tooltip'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
export type FieldTitleProps = {
title?: string

View File

@@ -1,6 +1,6 @@
import type { ReactNode } from 'react'
import { memo } from 'react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
export type GroupProps = {
className?: string

View File

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
import { produce } from 'immer'
import type { Memory } from '../../../types'
import { MemoryRole } from '../../../types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Field from '@/app/components/workflow/nodes/_base/components/field'
import Switch from '@/app/components/base/switch'
import Slider from '@/app/components/base/slider'

View File

@@ -9,7 +9,7 @@ import type {
NodeOutPutVar,
} from '@/app/components/workflow/types'
import { BlockEnum } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type MixedVariableTextInputProps = {
readOnly?: boolean

View File

@@ -4,7 +4,7 @@ import type {
CommonNodeType,
Node,
} from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type ContainerProps = {
nodeId: string

View File

@@ -15,7 +15,7 @@ import {
useToolIcon,
} from '@/app/components/workflow/hooks'
import Button from '@/app/components/base/button'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type ItemProps = {
nodeId: string

View File

@@ -27,7 +27,7 @@ import {
useStore,
useWorkflowStore,
} from '../../../store'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type NodeHandleProps = {
handleId: string

View File

@@ -6,7 +6,7 @@ import type { OnResize } from 'reactflow'
import { NodeResizeControl } from 'reactflow'
import { useNodesInteractions } from '../../../hooks'
import type { CommonNodeType } from '../../../types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
const Icon = () => {
return (

View File

@@ -4,7 +4,7 @@ import {
RiErrorWarningLine,
RiLoader2Line,
} from '@remixicon/react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type NodeStatusIconProps = {
status: string

View File

@@ -3,7 +3,7 @@ import type { FC } from 'react'
import React, { useCallback } from 'react'
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
const variants = cva([], {

View File

@@ -4,7 +4,7 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
import TreeIndentLine from './variable/object-child-tree-panel/tree-indent-line'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type Props = {
className?: string

View File

@@ -18,7 +18,7 @@ import type {
import Wrap from '../editor/wrap'
import { CodeLanguage } from '../../../code/types'
import PromptGeneratorBtn from '../../../llm/components/prompt-generator-btn'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
import PromptEditor from '@/app/components/base/prompt-editor'

View File

@@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import { cn } from '@/utils/classnames'
import { useWorkflow } from '../../../hooks'
import { BlockEnum } from '../../../types'
import { getNodeInfoById, isSystemVar } from './variable/utils'

View File

@@ -7,7 +7,7 @@ import {
} from '@remixicon/react'
import type { Node } from '@/app/components/workflow/types'
import { NodeRunningStatus } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type RetryOnNodeProps = Pick<Node, 'id' | 'data'>
const RetryOnNode = ({

View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React from 'react'
import { useBoolean, useClickAway } from 'ahooks'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
import { Check } from '@/app/components/base/icons/src/vender/line/general'
type Item = {

View File

@@ -1,6 +1,6 @@
import Tooltip from '@/app/components/base/tooltip'
import Indicator from '@/app/components/header/indicator'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { type ComponentProps, type PropsWithChildren, type ReactNode, memo } from 'react'
export type SettingItemProps = PropsWithChildren<{
@@ -13,7 +13,7 @@ export const SettingItem = memo(({ label, children, status, tooltip }: SettingIt
const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
const needTooltip = ['error', 'warning'].includes(status as any)
return <div className='relative flex items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1.5 py-1 text-xs font-normal'>
<div className={classNames('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
<div className={cn('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
{label}
</div>
<Tooltip popupContent={tooltip} disabled={!needTooltip}>

View File

@@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type Props = {
className?: string

View File

@@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import VarHighlight from '@/app/components/app/configuration/base/var-highlight'
type Props = {
isFocus?: boolean

View File

@@ -8,7 +8,7 @@ import type { ReactNode } from 'react'
import { type FC, useCallback, useState } from 'react'
import { useBoolean } from 'ahooks'
import { useCheckInstalled, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import PluginMutationModel from '@/app/components/plugins/plugin-mutation-model'
import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'

View File

@@ -4,7 +4,7 @@ import React from 'react'
import { Type } from '../../../../../llm/types'
import { getFieldType } from '../../../../../llm/utils'
import type { Field as FieldType } from '../../../../../llm/types'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import TreeIndentLine from '../tree-indent-line'
import { RiMoreFill } from '@remixicon/react'
import Tooltip from '@/app/components/base/tooltip'

View File

@@ -3,7 +3,7 @@ import type { FC } from 'react'
import React, { useRef } from 'react'
import type { StructuredOutput } from '../../../../../llm/types'
import Field from './field'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { useHover } from 'ahooks'
import type { ValueSelector } from '@/app/components/workflow/types'

View File

@@ -1,5 +1,5 @@
'use client'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { RiArrowDropDownLine } from '@remixicon/react'
import { useBoolean } from 'ahooks'
import type { FC } from 'react'

View File

@@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type Props = {
depth?: number,

View File

@@ -14,7 +14,7 @@ import Toast from '@/app/components/base/toast'
import { ReactSortable } from 'react-sortablejs'
import { v4 as uuid4 } from 'uuid'
import { RiDraggable } from '@remixicon/react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { useDebounceFn } from 'ahooks'
type Props = {

View File

@@ -20,7 +20,7 @@ import useAvailableVarList from '../../hooks/use-available-var-list'
import VarReferencePopup from './var-reference-popup'
import { getNodeInfoById, isConversationVar, isENV, isGlobalVar, isRagVariableVar, isSystemVar, removeFileVars, varTypeToStructType } from './utils'
import ConstantField from './constant-field'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CommonNodeType, Node, NodeOutPutVar, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
import type { CredentialFormSchemaSelect } from '@/app/components/header/account-setting/model-provider-page/declarations'

View File

@@ -3,7 +3,7 @@ import type { FC } from 'react'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import { useHover } from 'ahooks'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
import {

View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React, { useCallback, useState } from 'react'
import { RiArrowDownSLine } from '@remixicon/react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import {
PortalToFollowElem,
PortalToFollowElemContent,

View File

@@ -1,5 +1,5 @@
import { memo } from 'react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { useVarIcon } from '../hooks'
import type { VarInInspectType } from '@/types/workflow'

View File

@@ -9,7 +9,7 @@ import { useVarColor } from '../hooks'
import VariableNodeLabel from './variable-node-label'
import VariableIcon from './variable-icon'
import VariableName from './variable-name'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
import { isConversationVar, isENV, isGlobalVar, isRagVariableVar } from '../../utils'

View File

@@ -1,6 +1,6 @@
import { memo } from 'react'
import { useVarName } from '../hooks'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type VariableNameProps = {
variables: string[]

View File

@@ -2,7 +2,7 @@ import { memo } from 'react'
import VariableIcon from './base/variable-icon'
import type { VariableIconProps } from './base/variable-icon'
import { useVarColor } from './hooks'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type VariableIconWithColorProps = {
isExceptionVariable?: boolean

View File

@@ -2,7 +2,7 @@ import { memo } from 'react'
import type { VariablePayload } from './types'
import VariableLabel from './base/variable-label'
import { useVarBgColorInEditor } from './hooks'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type VariableLabelInEditorProps = {
isSelected?: boolean

View File

@@ -1,7 +1,7 @@
import { memo } from 'react'
import type { VariablePayload } from './types'
import VariableLabel from './base/variable-label'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
const VariableLabelInNode = (variablePayload: VariablePayload) => {
return (

View File

@@ -1,7 +1,7 @@
import { memo } from 'react'
import type { VariablePayload } from './types'
import VariableLabel from './base/variable-label'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
const VariableLabelInText = (variablePayload: VariablePayload) => {
return (

View File

@@ -44,7 +44,7 @@ import { useAllBuiltInTools } from '@/service/use-tools'
import { useAllTriggerPlugins } from '@/service/use-triggers'
import { FlowType } from '@/types/common'
import { canFindTool } from '@/utils'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
import {
RiCloseLine,

View File

@@ -2,7 +2,7 @@ import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-
import { CreateButtonType, CreateSubscriptionButton } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create'
import { SubscriptionSelectorEntry } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
import { useSubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { FC } from 'react'
type TriggerSubscriptionProps = {