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

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

web/app/account/(commonLayout)/account-page/index.tsx

@@ -1,30 +1,29 @@
 'use client'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import type { IItem } from '@/app/components/header/account-setting/collapse'
+import type { App } from '@/types/app'
 import {
   RiGraduationCapFill,
 } from '@remixicon/react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import DeleteAccount from '../delete-account'
-import AvatarWithEdit from './AvatarWithEdit'
-import Collapse from '@/app/components/header/account-setting/collapse'
-import type { IItem } from '@/app/components/header/account-setting/collapse'
-import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
-import { updateUserProfile } from '@/service/common'
-import { useAppContext } from '@/context/app-context'
-import { useProviderContext } from '@/context/provider-context'
-import { ToastContext } from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
-import { IS_CE_EDITION } from '@/config'
+import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import Modal from '@/app/components/base/modal'
 import PremiumBadge from '@/app/components/base/premium-badge'
+import { ToastContext } from '@/app/components/base/toast'
+import Collapse from '@/app/components/header/account-setting/collapse'
+import { IS_CE_EDITION, validPassword } from '@/config'
+import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import EmailChangeModal from './email-change-modal'
-import { validPassword } from '@/config'
-
-import type { App } from '@/types/app'
+import { useProviderContext } from '@/context/provider-context'
+import { updateUserProfile } from '@/service/common'
 import { useAppList } from '@/service/use-apps'
+import DeleteAccount from '../delete-account'
+
+import AvatarWithEdit from './AvatarWithEdit'
+import EmailChangeModal from './email-change-modal'
 
 const titleClassName = `
   system-sm-semibold text-text-secondary
@@ -129,60 +128,60 @@ export default function AccountPage() {
   const renderAppItem = (item: IItem) => {
     const { icon, icon_background, icon_type, icon_url } = item as any
     return (
-      <div className='flex px-3 py-1'>
-        <div className='mr-3'>
+      <div className="flex px-3 py-1">
+        <div className="mr-3">
           <AppIcon
-            size='tiny'
+            size="tiny"
             iconType={icon_type}
             icon={icon}
             background={icon_background}
             imageUrl={icon_url}
           />
         </div>
-        <div className='system-sm-medium mt-[3px] text-text-secondary'>{item.name}</div>
+        <div className="system-sm-medium mt-[3px] text-text-secondary">{item.name}</div>
       </div>
     )
   }
 
   return (
     <>
-      <div className='pb-3 pt-2'>
-        <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
+      <div className="pb-3 pt-2">
+        <h4 className="title-2xl-semi-bold text-text-primary">{t('common.account.myAccount')}</h4>
       </div>
-      <div className='mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6'>
+      <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size={64} />
-        <div className='ml-4'>
-          <p className='system-xl-semibold text-text-primary'>
+        <div className="ml-4">
+          <p className="system-xl-semibold text-text-primary">
             {userProfile.name}
             {isEducationAccount && (
-              <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
-                <RiGraduationCapFill className='mr-1 h-3 w-3' />
-                <span className='system-2xs-medium'>EDU</span>
+              <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
+                <RiGraduationCapFill className="mr-1 h-3 w-3" />
+                <span className="system-2xs-medium">EDU</span>
               </PremiumBadge>
             )}
           </p>
-          <p className='system-xs-regular text-text-tertiary'>{userProfile.email}</p>
+          <p className="system-xs-regular text-text-tertiary">{userProfile.email}</p>
         </div>
       </div>
-      <div className='mb-8'>
+      <div className="mb-8">
         <div className={titleClassName}>{t('common.account.name')}</div>
-        <div className='mt-2 flex w-full items-center justify-between gap-2'>
-          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
-            <span className='pl-1'>{userProfile.name}</span>
+        <div className="mt-2 flex w-full items-center justify-between gap-2">
+          <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
+            <span className="pl-1">{userProfile.name}</span>
           </div>
-          <div className='system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text' onClick={handleEditName}>
+          <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={handleEditName}>
             {t('common.operation.edit')}
           </div>
         </div>
       </div>
-      <div className='mb-8'>
+      <div className="mb-8">
         <div className={titleClassName}>{t('common.account.email')}</div>
-        <div className='mt-2 flex w-full items-center justify-between gap-2'>
-          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
-            <span className='pl-1'>{userProfile.email}</span>
+        <div className="mt-2 flex w-full items-center justify-between gap-2">
+          <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
+            <span className="pl-1">{userProfile.email}</span>
           </div>
           {systemFeatures.enable_change_email && (
-            <div className='system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text' onClick={() => setShowUpdateEmail(true)}>
+            <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={() => setShowUpdateEmail(true)}>
               {t('common.operation.change')}
             </div>
           )}
@@ -190,17 +189,17 @@ export default function AccountPage() {
       </div>
       {
         systemFeatures.enable_email_password_login && (
-          <div className='mb-8 flex justify-between gap-2'>
+          <div className="mb-8 flex justify-between gap-2">
             <div>
-              <div className='system-sm-semibold mb-1 text-text-secondary'>{t('common.account.password')}</div>
-              <div className='body-xs-regular mb-2 text-text-tertiary'>{t('common.account.passwordTip')}</div>
+              <div className="system-sm-semibold mb-1 text-text-secondary">{t('common.account.password')}</div>
+              <div className="body-xs-regular mb-2 text-text-tertiary">{t('common.account.passwordTip')}</div>
             </div>
             <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
           </div>
         )
       }
-      <div className='mb-6 border-[1px] border-divider-subtle' />
-      <div className='mb-8'>
+      <div className="mb-6 border-[1px] border-divider-subtle" />
+      <div className="mb-8">
         <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
         <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
         {!!apps.length && (
@@ -208,29 +207,30 @@ export default function AccountPage() {
             title={`${t('common.account.showAppLength', { length: apps.length })}`}
             items={apps.map((app: App) => ({ ...app, key: app.id, name: app.name }))}
             renderItem={renderAppItem}
-            wrapperClassName='mt-2'
+            wrapperClassName="mt-2"
           />
         )}
-        {!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
+        {!IS_CE_EDITION && <Button className="mt-2 text-components-button-destructive-secondary-text" onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
       </div>
       {
         editNameModalVisible && (
           <Modal
             isShow
             onClose={() => setEditNameModalVisible(false)}
-            className='!w-[420px] !p-6'
+            className="!w-[420px] !p-6"
           >
-            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{t('common.account.editName')}</div>
+            <div className="title-2xl-semi-bold mb-6 text-text-primary">{t('common.account.editName')}</div>
             <div className={titleClassName}>{t('common.account.name')}</div>
-            <Input className='mt-2'
+            <Input
+              className="mt-2"
               value={editName}
               onChange={e => setEditName(e.target.value)}
             />
-            <div className='mt-10 flex justify-end'>
-              <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
+            <div className="mt-10 flex justify-end">
+              <Button className="mr-2" onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
               <Button
                 disabled={editing || !editName}
-                variant='primary'
+                variant="primary"
                 onClick={handleSaveName}
               >
                 {t('common.operation.save')}
@@ -247,13 +247,13 @@ export default function AccountPage() {
               setEditPasswordModalVisible(false)
               resetPasswordForm()
             }}
-            className='!w-[420px] !p-6'
+            className="!w-[420px] !p-6"
           >
-            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            <div className="title-2xl-semi-bold mb-6 text-text-primary">{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
             {userProfile.is_password_set && (
               <>
                 <div className={titleClassName}>{t('common.account.currentPassword')}</div>
-                <div className='relative mt-2'>
+                <div className="relative mt-2">
                   <Input
                     type={showCurrentPassword ? 'text' : 'password'}
                     value={currentPassword}
@@ -263,7 +263,7 @@ export default function AccountPage() {
                   <div className="absolute inset-y-0 right-0 flex items-center">
                     <Button
                       type="button"
-                      variant='ghost'
+                      variant="ghost"
                       onClick={() => setShowCurrentPassword(!showCurrentPassword)}
                     >
                       {showCurrentPassword ? '👀' : '😝'}
@@ -272,10 +272,10 @@ export default function AccountPage() {
                 </div>
               </>
             )}
-            <div className='system-sm-semibold mt-8 text-text-secondary'>
+            <div className="system-sm-semibold mt-8 text-text-secondary">
               {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
             </div>
-            <div className='relative mt-2'>
+            <div className="relative mt-2">
               <Input
                 type={showPassword ? 'text' : 'password'}
                 value={password}
@@ -284,15 +284,15 @@ export default function AccountPage() {
               <div className="absolute inset-y-0 right-0 flex items-center">
                 <Button
                   type="button"
-                  variant='ghost'
+                  variant="ghost"
                   onClick={() => setShowPassword(!showPassword)}
                 >
                   {showPassword ? '👀' : '😝'}
                 </Button>
               </div>
             </div>
-            <div className='system-sm-semibold mt-8 text-text-secondary'>{t('common.account.confirmPassword')}</div>
-            <div className='relative mt-2'>
+            <div className="system-sm-semibold mt-8 text-text-secondary">{t('common.account.confirmPassword')}</div>
+            <div className="relative mt-2">
               <Input
                 type={showConfirmPassword ? 'text' : 'password'}
                 value={confirmPassword}
@@ -301,21 +301,26 @@ export default function AccountPage() {
               <div className="absolute inset-y-0 right-0 flex items-center">
                 <Button
                   type="button"
-                  variant='ghost'
+                  variant="ghost"
                   onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                 >
                   {showConfirmPassword ? '👀' : '😝'}
                 </Button>
               </div>
             </div>
-            <div className='mt-10 flex justify-end'>
-              <Button className='mr-2' onClick={() => {
-                setEditPasswordModalVisible(false)
-                resetPasswordForm()
-              }}>{t('common.operation.cancel')}</Button>
+            <div className="mt-10 flex justify-end">
+              <Button
+                className="mr-2"
+                onClick={() => {
+                  setEditPasswordModalVisible(false)
+                  resetPasswordForm()
+                }}
+              >
+                {t('common.operation.cancel')}
+              </Button>
               <Button
                 disabled={editing}
-                variant='primary'
+                variant="primary"
                 onClick={handleSavePassword}
               >
                 {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}