feat: tailwind related improvement (#6085)

web/app/components/header/account-setting/Integrations-page/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import useSWR from 'swr'
 import Link from 'next/link'
 import s from './index.module.css'
+import classNames from '@/utils/classnames'
 import { fetchAccountIntegrates } from '@/service/common'
 
 const titleClassName = `

web/app/components/header/account-setting/account-page/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import {
   RiCloseLine,
   RiErrorWarningFill,
@@ -10,6 +9,7 @@ import { useContext } from 'use-context-selector'
 import Collapse from '../collapse'
 import type { IItem } from '../collapse'
 import s from './index.module.css'
+import classNames from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { updateUserProfile } from '@/service/common'

web/app/components/header/account-setting/collapse/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 export type IItem = {
   key: string

web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx

@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import cn from 'classnames'
 import Panel from '../panel'
 import { DataSourceType } from '../panel/types'
 import ConfigFirecrawlModal from './config-firecrawl-modal'
+import cn from '@/utils/classnames'
 import { fetchDataSources, removeDataSourceApiKeyBinding } from '@/service/datasets'
 
 import type {

web/app/components/header/account-setting/data-source-page/panel/config-item.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -10,6 +9,7 @@ import Indicator from '../../../indicator'
 import Operate from '../data-source-notion/operate'
 import { DataSourceType } from './types'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 export type ConfigItemType = {
   id: string

web/app/components/header/account-setting/data-source-page/panel/index.tsx

@@ -3,12 +3,12 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/24/solid'
-import cn from 'classnames'
 import type { ConfigItemType } from './config-item'
 import ConfigItem from './config-item'
 
 import s from './style.module.css'
 import { DataSourceType } from './types'
+import cn from '@/utils/classnames'
 
 type Props = {
   type: DataSourceType

web/app/components/header/account-setting/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiAccountCircleFill,
   RiAccountCircleLine,
@@ -30,6 +29,7 @@ import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page'
 import ModelProviderPage from './model-provider-page'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
 import Modal from '@/app/components/base/modal'

web/app/components/header/account-setting/members-page/invite-modal/index.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next'
 import { ReactMultiEmail } from 'react-multi-email'
 import { Listbox, Transition } from '@headlessui/react'
 import { CheckIcon } from '@heroicons/react/20/solid'
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { inviteMember } from '@/service/common'
@@ -70,7 +70,7 @@ const InviteModal = ({
 
   return (
     <div className={cn(s.wrap)}>
-      <Modal overflowVisible isShow onClose={() => {}} className={cn(s.modal)}>
+      <Modal overflowVisible isShow onClose={() => { }} className={cn(s.modal)}>
         <div className='flex justify-between mb-2'>
           <div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
           <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />

web/app/components/header/account-setting/members-page/operation/index.tsx

@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { useContext } from 'use-context-selector'
 import { Menu, Transition } from '@headlessui/react'
-import cn from 'classnames'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { Member } from '@/models/common'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
 import { ToastContext } from '@/app/components/base/toast'

web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames'
 import type { FC, ReactNode } from 'react'
+import classNames from '@/utils/classnames'
 
 type ModelBadgeProps = {
   className?: string

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import type { FC } from 'react'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
@@ -17,6 +16,7 @@ import type {
 import { FormTypeEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import Input from './Input'
+import cn from '@/utils/classnames'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip-plus'
 import Radio from '@/app/components/base/radio'

web/app/components/header/account-setting/model-provider-page/model-name/index.tsx

@@ -1,5 +1,4 @@
 import type { FC, PropsWithChildren } from 'react'
-import classNames from 'classnames'
 import {
   modelTypeFormat,
   sizeFormat,
@@ -8,6 +7,7 @@ import { useLanguage } from '../hooks'
 import type { ModelItem } from '../declarations'
 import ModelBadge from '../model-badge'
 import FeatureIcon from '../model-selector/feature-icon'
+import classNames from '@/utils/classnames'
 
 type ModelNameProps = PropsWithChildren<{
   modelItem: ModelItem

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx

@@ -5,7 +5,6 @@ import type {
 import { useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type {
   DefaultModel,
   FormValue,
@@ -21,6 +20,7 @@ import type { ParameterValue } from './parameter-item'
 import Trigger from './trigger'
 import type { TriggerProps } from './trigger'
 import PresetsParameter from './presets-parameter'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import type { ModelParameterRule } from '../declarations'
 import { useLanguage } from '../hooks'
 import { isNullOrUndefined } from '../utils'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Slider from '@/app/components/base/slider'

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import type {
   Model,
@@ -11,6 +10,7 @@ import { MODEL_STATUS_TEXT } from '../declarations'
 import { useLanguage } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
+import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx

@@ -1,12 +1,12 @@
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import { useDebounceFn } from 'ahooks'
 import type { CustomConfigurationModelFixedFields, ModelItem, ModelProvider } from '../declarations'
 import { ConfigurationMethodEnum, ModelStatusEnum } from '../declarations'
 import ModelBadge from '../model-badge'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
+import classNames from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import type { Dispatch, SetStateAction } from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +8,7 @@ import {
 import type { ConfigurationMethodEnum, CustomConfigurationModelFixedFields, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import Indicator from '../../../indicator'
 import CooldownTimer from './cooldown-timer'
+import classNames from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import Switch from '@/app/components/base/switch'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx

@@ -1,6 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import useSWR from 'swr'
 import type { ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import { FormTypeEnum } from '../declarations'
@@ -8,6 +7,7 @@ import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { savePredefinedLoadBalancingConfig } from '../utils'
 import ModelLoadBalancingConfigs from './model-load-balancing-configs'
+import classNames from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { fetchModelLoadBalancingConfig } from '@/service/common'