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

26
web/app/components/develop/code.tsx
View File

@@ -9,7 +9,7 @@ import {
} from 'react'
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { Tag } from './tag'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
import { writeTextToClipboard } from '@/utils/clipboard'
import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
@@ -50,12 +50,10 @@ function CopyButton({ code }: { code: string }) {
return (
<button
type="button"
className={classNames(
'group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
className={cn('group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
copied
? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
: 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5',
)}
: 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5')}
onClick={() => {
writeTextToClipboard(code).then(() => {
setCopyCount(count => count + 1)
@@ -64,20 +62,16 @@ function CopyButton({ code }: { code: string }) {
>
<span
aria-hidden={copied}
className={classNames(
'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
copied && '-translate-y-1.5 opacity-0',
)}
className={cn('pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
copied && '-translate-y-1.5 opacity-0')}
>
<ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
Copy
</span>
<span
aria-hidden={!copied}
className={classNames(
'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
!copied && 'translate-y-1.5 opacity-0',
)}
className={cn('pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
!copied && 'translate-y-1.5 opacity-0')}
>
Copied!
</span>
@@ -168,12 +162,10 @@ function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderPro
{tabTitles!.map((tabTitle, tabIndex) => (
<Tab
key={tabIndex}
className={classNames(
'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
className={cn('border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
tabIndex === selectedIndex
? 'border-emerald-500 text-emerald-400'
: 'border-transparent text-zinc-400 hover:text-zinc-300',
)}
: 'border-transparent text-zinc-400 hover:text-zinc-300')}
>
{tabTitle}
</Tab>

2
web/app/components/develop/doc.tsx
View File

@@ -19,7 +19,7 @@ import I18n from '@/context/i18n'
import { LanguagesSupported } from '@/i18n-config/language'
import useTheme from '@/hooks/use-theme'
import { AppModeEnum, Theme } from '@/types/app'
import cn from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type IDocProps = {
appDetail: any

8
web/app/components/develop/md.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import type { PropsWithChildren } from 'react'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
type IChildrenProps = {
children: React.ReactNode
@@ -71,10 +71,8 @@ type IColProps = IChildrenProps & {
export function Col({ children, sticky = false }: IColProps) {
return (
<div
className={classNames(
'[&>:first-child]:mt-0 [&>:last-child]:mb-0',
sticky && 'xl:sticky xl:top-24',
)}
className={cn('[&>:first-child]:mt-0 [&>:last-child]:mb-0',
sticky && 'xl:sticky xl:top-24')}
>
{children}
</div>

8
web/app/components/develop/tag.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import classNames from '@/utils/classnames'
import { cn } from '@/utils/classnames'
const variantStyles = {
medium: 'rounded-lg px-1.5 ring-1 ring-inset',
@@ -53,11 +53,9 @@ export function Tag({
}: ITagProps) {
return (
<span
className={classNames(
'font-mono text-[0.625rem] font-semibold leading-6',
className={cn('font-mono text-[0.625rem] font-semibold leading-6',
variantStyles[variant],
colorStyles[color][variant],
)}
colorStyles[color][variant])}
>
{children}
</span>