admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: unified cn utils (#29916)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/datasets/create/embedding-process/index.tsx
View File

@@ -13,7 +13,7 @@ import Image from 'next/image'
import { indexMethodIcon, retrievalIcon } from '../icons'
import { IndexingType } from '../step-two'
import DocumentFileIcon from '../../common/document-file-icon'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
import Button from '@/app/components/base/button'
import type {

2
web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
View File

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import s from './index.module.css'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Modal from '@/app/components/base/modal'
import Input from '@/app/components/base/input'
import Button from '@/app/components/base/button'

2
web/app/components/datasets/create/file-preview/index.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/20/solid'
import Loading from '@/app/components/base/loading'
import s from './index.module.css'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CustomFile as File } from '@/models/datasets'
import { fetchFilePreview } from '@/service/common'

2
web/app/components/datasets/create/file-uploader/index.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { RiDeleteBinLine, RiUploadCloud2Line } from '@remixicon/react'
import DocumentFileIcon from '../../common/document-file-icon'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CustomFile as File, FileItem } from '@/models/datasets'
import { ToastContext } from '@/app/components/base/toast'
import SimplePieChart from '@/app/components/base/simple-pie-chart'

2
web/app/components/datasets/create/notion-page-preview/index.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/20/solid'
import Loading from '@/app/components/base/loading'
import s from './index.module.css'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { NotionPage } from '@/models/common'
import NotionIcon from '@/app/components/base/notion-icon'
import { fetchNotionPagePreview } from '@/service/datasets'

7
web/app/components/datasets/create/step-one/index.tsx
View File

@@ -9,7 +9,6 @@ import EmptyDatasetCreationModal from '../empty-dataset-creation-modal'
import Website from '../website'
import WebsitePreview from '../website/preview'
import s from './index.module.css'
import cn from '@/utils/classnames'
import type { CrawlOptions, CrawlResultItem, FileItem } from '@/models/datasets'
import type { DataSourceProvider, NotionPage } from '@/models/common'
import { DataSourceType } from '@/models/datasets'
@@ -18,7 +17,7 @@ import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
import { useProviderContext } from '@/context/provider-context'
import VectorSpaceFull from '@/app/components/billing/vector-space-full'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
import NotionConnector from '@/app/components/base/notion-connector'
import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
@@ -165,10 +164,10 @@ const StepOne = ({
<div className='flex h-full w-full min-w-[1440px]'>
<div className='relative h-full w-1/2 overflow-y-auto'>
<div className='flex justify-end'>
<div className={classNames(s.form)}>
<div className={cn(s.form)}>
{
shouldShowDataSourceTypeList && (
<div className={classNames(s.stepHeader, 'system-md-semibold text-text-secondary')}>
<div className={cn(s.stepHeader, 'system-md-semibold text-text-secondary')}>
{t('datasetCreation.steps.one')}
</div>
)

2
web/app/components/datasets/create/step-two/index.tsx
View File

@@ -28,7 +28,7 @@ import escape from './escape'
import { OptionCard } from './option-card'
import LanguageSelect from './language-select'
import { DelimiterInput, MaxLengthInput, OverlapInput } from './inputs'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CrawlOptions, CrawlResultItem, CreateDocumentReq, CustomFile, DocumentItem, FullDocumentDetail, ParentMode, PreProcessingRule, ProcessRule, Rules, createDocumentResponse } from '@/models/datasets'
import { ChunkingMode, DataSourceType, ProcessMode } from '@/models/datasets'

2
web/app/components/datasets/create/step-two/language-select/index.tsx
View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React from 'react'
import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Popover from '@/app/components/base/popover'
import { languages } from '@/i18n-config/language'

16
web/app/components/datasets/create/step-two/option-card.tsx
View File

@@ -1,6 +1,6 @@
import type { ComponentProps, FC, ReactNode } from 'react'
import Image from 'next/image'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
@@ -20,11 +20,9 @@ type OptionCardHeaderProps = {
export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props
return <div className={classNames(
'relative flex h-full overflow-hidden rounded-t-xl',
return <div className={cn('relative flex h-full overflow-hidden rounded-t-xl',
isActive && activeClassName,
!disabled && 'cursor-pointer',
)}>
!disabled && 'cursor-pointer')}>
<div className='relative flex size-14 items-center justify-center overflow-hidden'>
{isActive && effectImg && <Image src={effectImg} className='absolute left-0 top-0 h-full w-full' alt='' width={56} height={56} />}
<div className='p-1'>
@@ -34,7 +32,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
</div>
</div>
<TriangleArrow
className={classNames('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
className={cn('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
/>
<div className='flex-1 space-y-0.5 py-3 pr-4'>
<div className='system-md-semibold text-text-secondary'>{title}</div>
@@ -66,14 +64,12 @@ export const OptionCard: FC<OptionCardProps> = (
const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, noHighlight, disabled, ...rest } = props
return (
<div
className={classNames(
'rounded-xl bg-components-option-card-option-bg shadow-xs',
className={cn('rounded-xl bg-components-option-card-option-bg shadow-xs',
(isActive && !noHighlight)
? 'border-[1.5px] border-components-option-card-option-selected-border'
: 'border border-components-option-card-option-border',
disabled && 'pointer-events-none opacity-50',
className,
)}
className)}
style={{
...style,
}}

19
web/app/components/datasets/create/stepper/step.tsx
View File

@@ -1,5 +1,5 @@
import type { FC } from 'react'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
export type Step = {
name: string
@@ -16,31 +16,26 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
const isDisabled = activeIndex < index
const label = isActive ? `STEP ${index + 1}` : `${index + 1}`
return <div className='flex items-center gap-2'>
<div className={classNames(
'inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1',
<div className={cn('inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1',
isActive
? 'bg-state-accent-solid px-2'
: !isDisabled
? 'w-5 border border-text-quaternary'
: 'w-5 border border-divider-deep',
)}>
<div className={classNames(
'system-2xs-semibold-uppercase text-center',
: 'w-5 border border-divider-deep')}>
<div className={cn('system-2xs-semibold-uppercase text-center',
isActive
? 'text-text-primary-on-surface'
: !isDisabled
? 'text-text-tertiary'
: 'text-text-quaternary',
)}>
: 'text-text-quaternary')}>
{label}
</div>
</div>
<div className={classNames('system-xs-medium-uppercase',
<div className={cn('system-xs-medium-uppercase',
isActive
? 'system-xs-semibold-uppercase text-text-accent'
: !isDisabled
? 'text-text-tertiary'
: 'text-text-quaternary',
)}>{name}</div>
: 'text-text-quaternary')}>{name}</div>
</div>
}

2
web/app/components/datasets/create/stop-embedding-modal/index.tsx
View File

@@ -2,7 +2,7 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import s from './index.module.css'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'

4
web/app/components/datasets/create/top-bar/index.tsx
View File

@@ -3,7 +3,7 @@ import { RiArrowLeftLine } from '@remixicon/react'
import Link from 'next/link'
import { useTranslation } from 'react-i18next'
import { Stepper, type StepperProps } from '../stepper'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
export type TopBarProps = Pick<StepperProps, 'activeIndex'> & {
className?: string
@@ -24,7 +24,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
return datasetId ? `/datasets/${datasetId}/documents` : '/datasets'
}, [datasetId])
return <div className={classNames('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
return <div className={cn('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
<Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
<div className='p-2'>
<RiArrowLeftLine className='size-4 text-text-primary' />

2
web/app/components/datasets/create/website/base/checkbox-with-label.tsx
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 Checkbox from '@/app/components/base/checkbox'
import Tooltip from '@/app/components/base/tooltip'

2
web/app/components/datasets/create/website/base/crawled-result-item.tsx
View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
import Checkbox from '@/app/components/base/checkbox'
import Button from '@/app/components/base/button'

2
web/app/components/datasets/create/website/base/crawled-result.tsx
View File

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import CheckboxWithLabel from './checkbox-with-label'
import CrawledResultItem from './crawled-result-item'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CrawlResultItem } from '@/models/datasets'
const I18N_PREFIX = 'datasetCreation.stepOne.website'

2
web/app/components/datasets/create/website/base/error-message.tsx
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 { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
type Props = {

2
web/app/components/datasets/create/website/base/field.tsx
View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React from 'react'
import Input from './input'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import Tooltip from '@/app/components/base/tooltip'
type Props = {

2
web/app/components/datasets/create/website/base/header.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'
import Divider from '@/app/components/base/divider'
import Button from '@/app/components/base/button'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
type HeaderProps = {

2
web/app/components/datasets/create/website/base/options-wrap.tsx
View File

@@ -4,7 +4,7 @@ import type { FC } from 'react'
import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { RiEqualizer2Line } from '@remixicon/react'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
const I18N_PREFIX = 'datasetCreation.stepOne.website'

2
web/app/components/datasets/create/website/firecrawl/options.tsx
View File

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import CheckboxWithLabel from '../base/checkbox-with-label'
import Field from '../base/field'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CrawlOptions } from '@/models/datasets'
const I18N_PREFIX = 'datasetCreation.stepOne.website'

2
web/app/components/datasets/create/website/index.tsx
View File

@@ -7,7 +7,7 @@ import NoData from './no-data'
import Firecrawl from './firecrawl'
import Watercrawl from './watercrawl'
import JinaReader from './jina-reader'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { useModalContext } from '@/context/modal-context'
import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
import { DataSourceProvider } from '@/models/common'

2
web/app/components/datasets/create/website/jina-reader/options.tsx
View File

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import CheckboxWithLabel from '../base/checkbox-with-label'
import Field from '../base/field'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CrawlOptions } from '@/models/datasets'
const I18N_PREFIX = 'datasetCreation.stepOne.website'

2
web/app/components/datasets/create/website/preview.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/20/solid'
import s from '../file-preview/index.module.css'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CrawlResultItem } from '@/models/datasets'
type IProps = {

2
web/app/components/datasets/create/website/watercrawl/options.tsx
View File

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import CheckboxWithLabel from '../base/checkbox-with-label'
import Field from '../base/field'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import type { CrawlOptions } from '@/models/datasets'
const I18N_PREFIX = 'datasetCreation.stepOne.website'