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

lint: fix tailwind lint issues (#23367)

Browse Source 
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
This commit is contained in:
Matri Qi
2025-08-08 09:25:41 +08:00
committed by GitHub
parent 62772e8871
commit cb5e2ad9b2
46 changed files with 99 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/app-icon-picker/ImageInput.tsx
View File

@@ -94,7 +94,7 @@ const ImageInput: FC<UploaderProps> = ({
<div
className={classNames(
isDragActive && 'border-primary-600',
'relative aspect-square border-[1.5px] border-dashed rounded-lg flex flex-col justify-center items-center text-gray-500')}
'relative flex aspect-square flex-col items-center justify-center rounded-lg border-[1.5px] border-dashed text-gray-500')}
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}

4
web/app/components/base/block-input/index.tsx
View File

@@ -112,7 +112,7 @@ const BlockInput: FC<IBlockInputProps> = ({
? <div className='h-full px-4 py-2'>
<textarea
ref={contentEditableRef}
className={classNames(editAreaClassName, 'block w-full h-full resize-none')}
className={classNames(editAreaClassName, 'block h-full w-full resize-none')}
placeholder={placeholder}
onChange={onValueChange}
value={currentValue}
@@ -130,7 +130,7 @@ const BlockInput: FC<IBlockInputProps> = ({
</div>)
return (
<div className={classNames('block-input w-full overflow-y-auto bg-white border-none rounded-xl')}>
<div className={classNames('block-input w-full overflow-y-auto rounded-xl border-none bg-white')}>
{textAreaContent}
{/* footer */}
{!readonly && (

2
web/app/components/base/button/index.tsx
View File

@@ -51,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
>
{children}
{loading && <Spinner loading={loading} className={classNames('!text-white !h-3 !w-3 !border-2 !ml-1', spinnerClassName)} />}
{loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
</button>
)
},

8
web/app/components/base/content-dialog/index.tsx
View File

@@ -24,7 +24,7 @@ const ContentDialog = ({
<TransitionChild>
<div
className={classNames(
'absolute left-0 inset-0 w-full bg-app-detail-overlay-bg',
'absolute inset-0 left-0 w-full bg-app-detail-overlay-bg',
'duration-300 ease-in data-[closed]:opacity-0',
'data-[enter]:opacity-100',
'data-[leave]:opacity-0',
@@ -35,10 +35,10 @@ const ContentDialog = ({
<TransitionChild>
<div className={classNames(
'absolute left-0 w-full bg-app-detail-bg border-r border-divider-burn',
'absolute left-0 w-full border-r border-divider-burn bg-app-detail-bg',
'duration-100 ease-in data-[closed]:-translate-x-full',
'data-[enter]:ease-out data-[enter]:duration-300 data-[enter]:translate-x-0',
'data-[leave]:ease-in data-[leave]:duration-200 data-[leave]:-translate-x-full',
'data-[enter]:translate-x-0 data-[enter]:duration-300 data-[enter]:ease-out',
'data-[leave]:-translate-x-full data-[leave]:duration-200 data-[leave]:ease-in',
className,
)}>
{children}

10
web/app/components/base/dialog/index.tsx
View File

@@ -47,16 +47,16 @@ const CustomDialog = ({
<div className="flex min-h-full items-center justify-center">
<TransitionChild>
<DialogPanel className={classNames(
'w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl',
'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95',
'data-[enter]:opacity-100 data-[enter]:scale-100',
'data-[leave]:opacity-0 data-[enter]:scale-95',
'w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all',
'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
'data-[enter]:scale-100 data-[enter]:opacity-100',
'data-[enter]:scale-95 data-[leave]:opacity-0',
className,
)}>
{Boolean(title) && (
<DialogTitle
as={titleAs || 'h3'}
className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
className={classNames('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)}
>
{title}
</DialogTitle>

2
web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
View File

@@ -24,7 +24,7 @@ const DialogWrapper = ({
<Dialog as="div" className="relative z-40" onClose={close}>
<TransitionChild>
<div className={cn(
'fixed inset-0 bg-black bg-opacity-25',
'fixed inset-0 bg-black/25',
'data-[closed]:opacity-0',
'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',

6
web/app/components/base/fullscreen-modal/index.tsx
View File

@@ -48,9 +48,9 @@ export default function FullScreenModal({
<DialogPanel className={classNames(
'h-full',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95',
'data-[enter]:opacity-100 data-[enter]:scale-100',
'data-[leave]:opacity-0 data-[enter]:scale-95',
'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
'data-[enter]:scale-100 data-[enter]:opacity-100',
'data-[enter]:scale-95 data-[leave]:opacity-0',
className,
)}>
{closable

4
web/app/components/base/grid-mask/index.tsx
View File

@@ -16,8 +16,8 @@ const GridMask: FC<GridMaskProps> = ({
}) => {
return (
<div className={classNames('relative bg-saas-background', wrapperClassName)}>
<div className={classNames('absolute inset-0 w-full h-full z-0 opacity-70', canvasClassName, Style.gridBg)} />
<div className={classNames('absolute w-full h-full z-[1] bg-grid-mask-background rounded-lg', gradientClassName)} />
<div className={classNames('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} />
<div className={classNames('absolute z-[1] h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} />
<div className='relative z-[2]'>{children}</div>
</div>
)

2
web/app/components/base/logo/logo-site.tsx
View File

@@ -13,7 +13,7 @@ const LogoSite: FC<LogoSiteProps> = ({
return (
<img
src={`${basePath}/logo/logo.png`}
className={classNames('block w-[22.651px] h-[24.5px]', className)}
className={classNames('block h-[24.5px] w-[22.651px]', className)}
alt='logo'
/>
)

8
web/app/components/base/modal/index.tsx
View File

@@ -50,11 +50,11 @@ export default function Modal({
<div className="flex min-h-full items-center justify-center p-4 text-center">
<TransitionChild>
<DialogPanel className={classNames(
'w-full max-w-[480px] transform rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
'w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95',
'data-[enter]:opacity-100 data-[enter]:scale-100',
'data-[leave]:opacity-0 data-[enter]:scale-95',
'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
'data-[enter]:scale-100 data-[enter]:opacity-100',
'data-[enter]:scale-95 data-[leave]:opacity-0',
className,
)}>
{title && <DialogTitle

2
web/app/components/base/premium-badge/index.tsx
View File

@@ -61,7 +61,7 @@ const PremiumBadge: React.FC<PremiumBadgeProps> = ({
{children}
<Highlight
className={classNames(
'absolute top-0 opacity-50 right-1/2 translate-x-[20%] transition-all duration-100 ease-out hover:opacity-80 hover:translate-x-[30%]',
'absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80',
size === 's' ? 'h-[18px] w-12' : 'h-6 w-12',
)}
/>

8
web/app/components/base/segmented-control/index.tsx
View File

@@ -21,7 +21,7 @@ export const SegmentedControl = <T extends string | number | symbol>({
return (
<div className={classNames(
'flex items-center rounded-lg bg-components-segmented-control-bg-normal gap-x-[1px] p-0.5',
'flex items-center gap-x-[1px] rounded-lg bg-components-segmented-control-bg-normal p-0.5',
className,
)}>
{options.map((option, index) => {
@@ -34,7 +34,7 @@ export const SegmentedControl = <T extends string | number | symbol>({
type='button'
key={String(option.value)}
className={classNames(
'flex items-center justify-center relative px-2 py-1 rounded-lg gap-x-0.5 group border-0.5 border-transparent',
'border-0.5 group relative flex items-center justify-center gap-x-0.5 rounded-lg border-transparent px-2 py-1',
isSelected
? 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3'
: 'hover:bg-state-base-hover',
@@ -43,12 +43,12 @@ export const SegmentedControl = <T extends string | number | symbol>({
>
<span className='flex h-5 w-5 items-center justify-center'>
<Icon className={classNames(
'w-4 h-4 text-text-tertiary',
'h-4 w-4 text-text-tertiary',
isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
)} />
</span>
<span className={classNames(
'p-0.5 text-text-tertiary system-sm-medium',
'system-sm-medium p-0.5 text-text-tertiary',
isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
)}>
{option.text}

4
web/app/components/base/skeleton/index.tsx
View File

@@ -24,7 +24,7 @@ export const SkeletonRow: FC<SkeletonProps> = (props) => {
export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
const { className, children, ...rest } = props
return (
<div className={classNames('h-2 rounded-sm opacity-20 bg-text-quaternary my-1', className)} {...rest}>
<div className={classNames('my-1 h-2 rounded-sm bg-text-quaternary opacity-20', className)} {...rest}>
{children}
</div>
)
@@ -33,7 +33,7 @@ export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
export const SkeletonPoint: FC<SkeletonProps> = (props) => {
const { className, ...rest } = props
return (
<div className={classNames('text-text-quaternary text-xs font-medium', className)} {...rest}>·</div>
<div className={classNames('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div>
)
}
/** Usage

6
web/app/components/base/switch/index.tsx
View File

@@ -63,8 +63,8 @@ const Switch = (
className={classNames(
wrapStyle[size],
enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
'relative inline-flex flex-shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
disabled ? '!opacity-50 !cursor-not-allowed' : '',
'relative inline-flex shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
disabled ? '!cursor-not-allowed !opacity-50' : '',
size === 'xs' && 'rounded-sm',
className,
)}
@@ -75,7 +75,7 @@ const Switch = (
circleStyle[size],
enabled ? translateLeft[size] : 'translate-x-0',
size === 'xs' && 'rounded-[1px]',
'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
'pointer-events-none inline-block rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
)}
/>
</OriginalSwitch>

4
web/app/components/base/tag/index.tsx
View File

@@ -31,10 +31,10 @@ const COLOR_MAP = {
export default function Tag({ children, color = 'green', className = '', bordered = false, hideBg = false }: ITagProps) {
return (
<div className={
classNames('px-2.5 py-px text-xs leading-5 rounded-md inline-flex items-center flex-shrink-0',
classNames('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs leading-5',
COLOR_MAP[color] ? `${COLOR_MAP[color].text} ${COLOR_MAP[color].bg}` : '',
bordered ? 'border-[1px]' : '',
hideBg ? 'bg-opacity-0' : '',
hideBg ? 'bg-transparent' : '',
className)} >
{children}
</div>