chore(web): new lint setup (#30020)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

web/app/components/plugins/update-plugin/downgrade-warning.tsx

@@ -17,16 +17,16 @@ const DowngradeWarningModal = ({
 
   return (
     <>
-      <div className='flex flex-col items-start gap-2 self-stretch'>
-        <div className='title-2xl-semi-bold text-text-primary'>{t(`${i18nPrefix}.title`)}</div>
-        <div className='system-md-regular text-text-secondary'>
+      <div className="flex flex-col items-start gap-2 self-stretch">
+        <div className="title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.title`)}</div>
+        <div className="system-md-regular text-text-secondary">
           {t(`${i18nPrefix}.description`)}
         </div>
       </div>
-      <div className='mt-9 flex items-start justify-end space-x-2 self-stretch'>
-        <Button variant='secondary' onClick={() => onCancel()}>{t('app.newApp.Cancel')}</Button>
-        <Button variant='secondary' destructive onClick={onJustDowngrade}>{t(`${i18nPrefix}.downgrade`)}</Button>
-        <Button variant='primary' onClick={onExcludeAndDowngrade}>{t(`${i18nPrefix}.exclude`)}</Button>
+      <div className="mt-9 flex items-start justify-end space-x-2 self-stretch">
+        <Button variant="secondary" onClick={() => onCancel()}>{t('app.newApp.Cancel')}</Button>
+        <Button variant="secondary" destructive onClick={onJustDowngrade}>{t(`${i18nPrefix}.downgrade`)}</Button>
+        <Button variant="primary" onClick={onExcludeAndDowngrade}>{t(`${i18nPrefix}.exclude`)}</Button>
       </div>
     </>
   )

web/app/components/plugins/update-plugin/from-github.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
 import type { UpdateFromGitHubPayload } from '../types'
+import React from 'react'
 import InstallFromGitHub from '../install-plugin/install-from-github'
 
 type Props = {

web/app/components/plugins/update-plugin/from-market-place.tsx

@@ -1,21 +1,21 @@
 'use client'
 import type { FC } from 'react'
+import type { UpdateFromMarketPlacePayload } from '../types'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Card from '@/app/components/plugins/card'
-import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { TaskStatus, type UpdateFromMarketPlacePayload } from '../types'
-import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
-import useGetIcon from '../install-plugin/base/use-get-icon'
-import { updateFromMarketPlace } from '@/service/plugins'
+import Button from '@/app/components/base/button'
+import Modal from '@/app/components/base/modal'
+import Card from '@/app/components/plugins/card'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
-import { usePluginTaskList } from '@/service/use-plugins'
-import Toast from '../../base/toast'
-import DowngradeWarningModal from './downgrade-warning'
-import { useInvalidateReferenceSettings, useRemoveAutoUpgrade } from '@/service/use-plugins'
+import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
+import { updateFromMarketPlace } from '@/service/plugins'
+import { useInvalidateReferenceSettings, usePluginTaskList, useRemoveAutoUpgrade } from '@/service/use-plugins'
 import { cn } from '@/utils/classnames'
+import Toast from '../../base/toast'
+import useGetIcon from '../install-plugin/base/use-get-icon'
+import { TaskStatus } from '../types'
+import DowngradeWarningModal from './downgrade-warning'
 
 const i18nPrefix = 'plugin.upgrade'
 
@@ -140,27 +140,27 @@ const UpdatePluginModal: FC<Props> = ({
       )}
       {!doShowDowngradeWarningModal && (
         <>
-          <div className='system-md-regular mb-2 mt-3 text-text-secondary'>
+          <div className="system-md-regular mb-2 mt-3 text-text-secondary">
             {t(`${i18nPrefix}.description`)}
           </div>
-          <div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
+          <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
             <Card
               installed={uploadStep === UploadStep.installed}
               payload={pluginManifestToCardPluginProps({
                 ...originalPackageInfo.payload,
                 icon: icon!,
               })}
-              className='w-full'
-              titleLeft={
+              className="w-full"
+              titleLeft={(
                 <>
-                  <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+                  <Badge className="mx-1" size="s" state={BadgeState.Warning}>
                     {`${originalPackageInfo.payload.version} -> ${targetPackageInfo.version}`}
                   </Badge>
                 </>
-              }
+              )}
             />
           </div>
-          <div className='flex items-center justify-end gap-2 self-stretch pt-5'>
+          <div className="flex items-center justify-end gap-2 self-stretch pt-5">
             {uploadStep === UploadStep.notStarted && (
               <Button
                 onClick={handleCancel}
@@ -169,7 +169,7 @@ const UpdatePluginModal: FC<Props> = ({
               </Button>
             )}
             <Button
-              variant='primary'
+              variant="primary"
               loading={uploadStep === UploadStep.upgrading}
               onClick={handleConfirm}
               disabled={uploadStep === UploadStep.upgrading}

web/app/components/plugins/update-plugin/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
 import type { UpdatePluginModalType } from '../types'
+import React from 'react'
 import { PluginSource } from '../types'
 import UpdateFromGitHub from './from-github'
 import UpdateFromMarketplace from './from-market-place'

web/app/components/plugins/update-plugin/plugin-version-picker.tsx

@@ -1,21 +1,21 @@
 'use client'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { lt } from 'semver'
+import Badge from '@/app/components/base/badge'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import Badge from '@/app/components/base/badge'
-import type {
-  OffsetOptions,
-  Placement,
-} from '@floating-ui/react'
-import { useVersionListOfPlugin } from '@/service/use-plugins'
 import useTimestamp from '@/hooks/use-timestamp'
+import { useVersionListOfPlugin } from '@/service/use-plugins'
 import { cn } from '@/utils/classnames'
-import { lt } from 'semver'
 
 type Props = {
   disabled?: boolean
@@ -56,7 +56,8 @@ const PluginVersionPicker: FC<Props> = ({
   const { formatDate } = useTimestamp()
 
   const handleTriggerClick = () => {
-    if (disabled) return
+    if (disabled)
+      return
     onShowChange(true)
   }
 
@@ -87,12 +88,12 @@ const PluginVersionPicker: FC<Props> = ({
         {trigger}
       </PortalToFollowElemTrigger>
 
-      <PortalToFollowElemContent className='z-[1000]'>
+      <PortalToFollowElemContent className="z-[1000]">
         <div className="relative w-[209px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm">
-          <div className='system-xs-medium-uppercase px-3 pb-0.5 pt-1 text-text-tertiary'>
+          <div className="system-xs-medium-uppercase px-3 pb-0.5 pt-1 text-text-tertiary">
             {t('plugin.detailPanel.switchVersion')}
           </div>
-          <div className='relative'>
+          <div className="relative">
             {res?.data.versions.map(version => (
               <div
                 key={version.unique_identifier}
@@ -106,11 +107,11 @@ const PluginVersionPicker: FC<Props> = ({
                   isDowngrade: lt(version.version, currentVersion),
                 })}
               >
-                <div className='flex grow items-center'>
-                  <div className='system-sm-medium text-text-secondary'>{version.version}</div>
-                  {currentVersion === version.version && <Badge className='ml-1' text='CURRENT'/>}
+                <div className="flex grow items-center">
+                  <div className="system-sm-medium text-text-secondary">{version.version}</div>
+                  {currentVersion === version.version && <Badge className="ml-1" text="CURRENT" />}
                 </div>
-                <div className='system-xs-regular shrink-0 text-text-tertiary'>{formatDate(version.created_at, format)}</div>
+                <div className="system-xs-regular shrink-0 text-text-tertiary">{formatDate(version.created_at, format)}</div>
               </div>
             ))}
           </div>