Fix/ts type imports

app/renderer/engine-link-startup/.eslintrc.cjs

@@ -4,34 +4,68 @@ module.exports = {
   env: {
     browser: true,
     es2022: true,
+    node: true,
   },
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: { jsx: true },
   },
-  plugins: ['@typescript-eslint', 'react'],
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:react/jsx-runtime'],
+  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
   settings: {
     react: { version: '18.2' },
   },
   rules: {
-    'no-empty': 'warn',
+    'no-empty': ['warn', { allowEmptyCatch: true }],
     'no-unused-vars': 'off',
     'prefer-const': 'warn',
     'no-var': 'warn',
     'no-extra-boolean-cast': 'warn',
     'no-fallthrough': 'warn',
     'no-async-promise-executor': 'warn',
     'no-extra-semi': 'warn',
-    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-unused-vars': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-require-imports': 'off',
     '@typescript-eslint/ban-ts-comment': 'warn',
     'react/prop-types': 'off',
     'react/display-name': 'off',
-    'react/no-unknown-property': ['error', { ignore: ['css'] }],
+    'react/no-unknown-property': ['error', { ignore: ['css', 'p-id'] }],
+    'react-hooks/rules-of-hooks': 'error', // 强制执行 React Hooks 的规则。
+    'react-hooks/exhaustive-deps': 'warn', // 依赖数组是否完整
+
+    // 关闭 v7 新增的 React Compiler lint 规则
+    'react-hooks/set-state-in-effect': 'off', // 检查在 useEffect 中直接调用 setState 是否会导致不必要的重新渲染或无限循环
+    'react-hooks/immutability': 'off', //  检查 Hook 是否以不可变方式更新状态
+    'react-hooks/refs': 'off', // 检查 useRef 的使用规范。
+    'react-hooks/use-memo': 'off', // useMemo 的使用是否合理
+    'react-hooks/purity': 'off',
+    'react-hooks/set-state-in-render': 'off',
+    'react-hooks/static-components': 'off',
+    'react-hooks/void-use-memo': 'off',
+    'react-hooks/effect-deps': 'off',
+    'react-hooks/memo-dependencies': 'off',
+    'react-hooks/config': 'off',
+    'react-hooks/suppression': 'off',
+    'react-hooks/preserve-manual-memoization': 'off', // 保留现有手动 memoization
+    'react-hooks/error-boundaries': 'off', // 要求组件实现错误边界
+
+    'no-useless-escape': 'warn',
+    'no-control-regex': 'warn',
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {
+        prefer: 'type-imports',
+        fixStyle: 'separate-type-imports',
+      },
+    ],
   },
   ignorePatterns: ['dist', 'node_modules', 'scripts'],
 }

app/renderer/engine-link-startup/package.json

@@ -64,6 +64,7 @@
     "@xterm/xterm": "5.5.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "7.1.1",
     "happy-dom": "^12.10.3",
     "jsdom": "^23.0.1",
     "postcss-normalize": "^13.0.1",

app/renderer/engine-link-startup/src/assets/colors.tsx

@@ -1,6 +1,6 @@
 import Icon from '@ant-design/icons'
-import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
-import React from 'react'
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
+import type React from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
 interface IconProps extends CustomIconComponentProps {

app/renderer/engine-link-startup/src/assets/newIcon.tsx

@@ -1,6 +1,6 @@
 import Icon from '@ant-design/icons'
-import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
-import React from 'react'
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
+import type React from 'react'
 
 export interface IconProps extends CustomIconComponentProps {
   onClick: (e: React.MouseEvent) => void

app/renderer/engine-link-startup/src/assets/outline.tsx

@@ -1,6 +1,6 @@
 import Icon from '@ant-design/icons'
-import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
-import React from 'react'
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
+import type React from 'react'
 
 interface IconProps extends CustomIconComponentProps {
   onClick: (e: React.MouseEvent) => void

app/renderer/engine-link-startup/src/assets/solid.tsx

@@ -1,6 +1,6 @@
 import Icon from '@ant-design/icons'
-import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
-import React from 'react'
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon'
+import type React from 'react'
 
 interface IconProps extends CustomIconComponentProps {
   onClick: (e: React.MouseEvent) => void

app/renderer/engine-link-startup/src/components/Editor/index.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useLayoutEffect, useState } from 'react'
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import type React from 'react'
+import { useEffect, useLayoutEffect, useState } from 'react'
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import MonacoEditor from 'react-monaco-editor'
 import ReactResizeDetector from 'react-resize-detector'
-import { Theme, useTheme } from '@/hooks/useTheme'
+import { type Theme, useTheme } from '@/hooks/useTheme'
 import { applyYakitMonacoTheme } from '@/utils/theme'
 
 export interface EditorProp {

app/renderer/engine-link-startup/src/components/yakitUI/YakitAutoComplete/YakitAutoComplete.tsx

@@ -1,10 +1,10 @@
 import { AutoComplete } from 'antd'
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { YakitAutoCompleteCacheDataHistoryProps, YakitAutoCompleteProps } from './YakitAutoCompleteType'
+import type { YakitAutoCompleteCacheDataHistoryProps, YakitAutoCompleteProps } from './YakitAutoCompleteType'
 import styles from './YakitAutoComplete.module.scss'
 import classNames from 'classnames'
 import { useInViewport, useMemoizedFn } from 'ahooks'
-import { onGetRemoteValuesBase, onSetRemoteValuesBase, YakitOptionTypeProps } from '../../utils'
+import { onGetRemoteValuesBase, onSetRemoteValuesBase, type YakitOptionTypeProps } from '../../utils'
 import { OutlineXIcon } from '@/assets/outline'
 export const defYakitAutoCompleteRef = {
   onGetRemoteValues: () => ({ options: [], defaultValue: '' }),
@@ -42,7 +42,7 @@
   })
   useEffect(() => {
     inViewport && onGetRemoteValues(isInit)
   }, [initValue, inViewport])
   useImperativeHandle(
     ref,
     () => ({
@@ -54,7 +54,7 @@
         return cacheHistoryData
       },
     }),
     [cacheHistoryData, restProps.value, loading],
   )
   /**@description 缓存 cacheHistoryDataKey 对应的数据 */
   const onSetRemoteValues = useMemoizedFn((newValue: string) => {
@@ -81,7 +81,7 @@
           // 主要是删缓存需要
           onSetRemoteValues(initValue)
         } else {
-          // @ts-ignore
+          // @ts-expect-error cacheData.options 类型可能与 setCacheHistoryData 参数不兼容
           setCacheHistoryData({ defaultValue: value, options: newOption })
         }
         //非form表单时,设置value
@@ -143,7 +143,7 @@
     } else {
       return restProps.options
     }
   }, [cacheHistoryData, restProps])
 
   return (
     <div

app/renderer/engine-link-startup/src/components/yakitUI/YakitAutoComplete/YakitAutoCompleteType.d.ts

@@ -1,8 +1,7 @@
-import { AutoCompleteProps } from 'antd'
-import { SizeType } from 'antd/lib/config-provider/SizeContext'
-import { CacheDataHistoryProps } from '../../utils'
-import { BaseSelectRef } from 'rc-select'
-import { CSSProperties, ReactNode } from 'react'
+import type { AutoCompleteProps } from 'antd'
+import type { CacheDataHistoryProps } from '../../utils'
+import type { BaseSelectRef } from 'rc-select'
+import type { CSSProperties, ReactNode } from 'react'
 
 /**
  * @description YakitAutoCompleteProps 的属性

app/renderer/engine-link-startup/src/components/yakitUI/YakitButton/YakitButton.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { Button, ButtonProps } from 'antd'
+import { Button, type ButtonProps } from 'antd'
 
 import styles from './yakitButton.module.scss'
 import classNames from 'classnames'

app/renderer/engine-link-startup/src/components/yakitUI/YakitCheckbox/YakitCheckbox.tsx

@@ -1,6 +1,6 @@
 import { Checkbox } from 'antd'
-import React from 'react'
-import { YakitCheckboxProps } from './YakitCheckboxType'
+import type React from 'react'
+import type { YakitCheckboxProps } from './YakitCheckboxType'
 import styles from './YakitCheckbox.module.scss'
 import classNames from 'classnames'
 import './yakitCheckBoxAnimation.scss'

app/renderer/engine-link-startup/src/components/yakitUI/YakitCheckbox/YakitCheckboxType.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxProps } from 'antd'
+import type { CheckboxProps } from 'antd'
 
 /**
  * @description YakitCheckboxPropsProps 的属性

app/renderer/engine-link-startup/src/components/yakitUI/YakitDropdownMenu/YakitDropdownMenu.tsx

@@ -1,7 +1,7 @@
-import { Dropdown, DropdownProps } from 'antd'
+import { Dropdown, type DropdownProps } from 'antd'
 import classNames from 'classnames'
-import { memo, ReactNode, useMemo } from 'react'
-import { YakitMenu, YakitMenuProp } from '../YakitMenu/YakitMenu'
+import { memo, type ReactNode, useMemo } from 'react'
+import { YakitMenu, type YakitMenuProp } from '../YakitMenu/YakitMenu'
 import styles from './YakitDropdownMenu.module.scss'
 
 /** 可能准备写成基础组件 */

app/renderer/engine-link-startup/src/components/yakitUI/YakitEmpty/YakitEmpty.tsx

@@ -1,6 +1,7 @@
 import { Empty } from 'antd'
-import React, { useMemo } from 'react'
-import { YakitEmptyProps } from './YakitEmptyType'
+import type React from 'react'
+import { useMemo } from 'react'
+import type { YakitEmptyProps } from './YakitEmptyType'
 import classNames from 'classnames'
 import styles from './YakitEmpty.module.scss'
 
@@ -31,8 +32,8 @@ export const YakitEmpty: React.FC<YakitEmptyProps> = (props) => {
         return theme === 'dark' ? IrifyDarkEmptyPng : IrifyEmptyPng
       case 'memfit':
         return theme === 'dark' ? MemfitDarkEmptyPng : MemfitEmptyPng
-      case 'enterprise':
-      case 'simple-enterprise':
+      // case 'enterprise':
+      // case 'simple-enterprise':
 
       default:
         return theme === 'dark' ? YakitDarkEmptyPng : YakitEmptyPng

app/renderer/engine-link-startup/src/components/yakitUI/YakitEmpty/YakitEmptyType.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react'
-import { EmptyProps } from 'antd'
+import type { ReactNode } from 'react'
+import type { EmptyProps } from 'antd'
 export interface YakitEmptyProps extends EmptyProps {
   title?: string | null | ReactNode
   descriptionReactNode?: ReactNode

app/renderer/engine-link-startup/src/components/yakitUI/YakitForm/YakitForm.module.scss

@@ -23,7 +23,7 @@
     }
 
     .ant-upload.ant-upload-drag {
-      text-align: start;
+      text-align: left;
     }
   }
 }

app/renderer/engine-link-startup/src/components/yakitUI/YakitForm/YakitForm.tsx

@@ -1,13 +1,13 @@
 import { Spin, Divider } from 'antd'
-import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import React, { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './YakitForm.module.scss'
 import classNames from 'classnames'
 import { YakitInput } from '../YakitInput/YakitInput'
 import { useDebounceEffect, useMemoizedFn } from 'ahooks'
 import { yakitNotify } from '@/utils/notification'
 import { getRemoteValue, setRemoteValue } from '@/utils/kv'
-import { handleOpenFileSystemDialog, OpenDialogOptions } from '@/utils/fileSystemDialog'
-import { FileDraggerProps, YakitDraggerProps } from './YakitFormType'
+import { handleOpenFileSystemDialog, type OpenDialogOptions } from '@/utils/fileSystemDialog'
+import type { FileDraggerProps, YakitDraggerProps } from './YakitFormType'
 import { YakitAutoComplete } from '../YakitAutoComplete/YakitAutoComplete'
 import { yakitFileSystem } from '@/utils/electronBridge'
 import { useI18nNamespaces } from '@/i18n/useI18nNamespaces'
@@ -315,7 +315,7 @@
         }
       })
     }
   }, [])
 
   /**
    * @description 选择文件夹
@@ -326,7 +326,7 @@
     if (multiple !== false) {
       properties.push('multiSelections')
     }
-    let option: OpenDialogOptions = {
+    const option: OpenDialogOptions = {
       title: t('YakitFormDragger.selectFolder'),
       properties,
     }
@@ -353,7 +353,7 @@
     if (multiple !== false) {
       properties.push('multiSelections')
     }
-    let option: OpenDialogOptions = {
+    const option: OpenDialogOptions = {
       title: t('YakitFormDragger.selectFile'),
       properties,
     }
@@ -394,8 +394,8 @@
   /**拖拽文件夹后的路径回显文本处理 */
   const afterFolderDrop = useMemoizedFn((e) => {
     const { files = [] } = e.dataTransfer
-    let paths: string[] = []
-    let isNoFit: string[] = []
+    const paths: string[] = []
+    const isNoFit: string[] = []
     const filesLength = files.length
     if (multiple === false && filesLength > 1) {
       yakitNotify('error', t('YakitFormDragger.multiSelectNotSupported'))
@@ -419,8 +419,8 @@
   /**拖拽文件后的处理 */
   const afterFileDrop = useMemoizedFn((e) => {
     const { files = [] } = e.dataTransfer
-    let paths: string[] = []
-    let isNoFit: string[] = []
+    const paths: string[] = []
+    const isNoFit: string[] = []
     const filesLength = files.length
     if (multiple === false && filesLength > 1) {
       yakitNotify('error', t('YakitFormDragger.multiSelectNotSupported'))
@@ -447,7 +447,7 @@
   /**拖拽文件/文件夹的路径回显 */
   const afterAllDrop = useMemoizedFn((e) => {
     const { files = [] } = e.dataTransfer
-    let paths: string[] = []
+    const paths: string[] = []
     const filesLength = files.length
     if (multiple === false && filesLength > 1) {
       yakitNotify('error', t('YakitFormDragger.multiSelectNotSupported'))
@@ -469,7 +469,7 @@
       yakitNotify('error', t('YakitFormDragger.filePathCountError'))
     }
     return arr.length
   }, [fileName, name, i18nRefresh])
   return (
     <>
       {selectType === 'file' && (

app/renderer/engine-link-startup/src/components/yakitUI/YakitForm/YakitFormType.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import type { YakitSizeType } from '../YakitInputNumber/YakitInputNumberType'
-import { InputProps } from 'antd'
+import type { InputProps } from 'antd'
 
 /**拖拽属性 */
 export interface FileDraggerProps {

app/renderer/engine-link-startup/src/components/yakitUI/YakitHint/YakitHint.tsx

@@ -1,7 +1,8 @@
 import ReactDOM from 'react-dom'
-import React, { memo, useMemo, useState } from 'react'
+import type React from 'react'
+import { memo, useMemo, useState } from 'react'
 import { HintModal, YakitHintModal } from './YakitHintModal'
-import { YakitHintProps, YakitHintWhiteProps } from './YakitHintType'
+import type { YakitHintProps, YakitHintWhiteProps } from './YakitHintType'
 import { usePrevious } from 'ahooks'
 
 import classNames from 'classnames'
@@ -21,7 +22,7 @@
 
   const modals = useMemo(() => {
     if (!!modalsPrevious && modalsPrevious.length > 0) {
-      for (let index in childModal) {
+      for (const index in childModal) {
         /** 判断新数据位置是否超出旧数据长度 */
         const position = +index < modalsPrevious.length
         if (position) {
@@ -41,7 +42,7 @@
     }
 
     return childModal
   }, [childModal])
 
   return ReactDOM.createPortal(
     <div

app/renderer/engine-link-startup/src/components/yakitUI/YakitHint/YakitHintModal.tsx

@@ -1,8 +1,9 @@
-import React, { memo, useRef, useState } from 'react'
+import type React from 'react'
+import { memo, useRef, useState } from 'react'
 import { useDebounce, useMemoizedFn } from 'ahooks'
 import Draggable from 'react-draggable'
 import type { DraggableEvent, DraggableData } from 'react-draggable'
-import { HintModalProps, YakitHintModalProps } from './YakitHintType'
+import type { HintModalProps, YakitHintModalProps } from './YakitHintType'
 import { YakitButton } from '../YakitButton/YakitButton'
 import { ShieldExclamationSvgIcon } from '@/assets/newIcon'
 

app/renderer/engine-link-startup/src/components/yakitUI/YakitHint/YakitHintType.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react'
-import { YakitButtonProp } from '../YakitButton/YakitButton'
+import type { ReactNode } from 'react'
+import type { YakitButtonProp } from '../YakitButton/YakitButton'
 
 export interface YakitHintProps extends YakitHintModalTypes {
   /** 是否展示遮罩 */

app/renderer/engine-link-startup/src/components/yakitUI/YakitInput/YakitInput.tsx

@@ -1,6 +1,7 @@
-import { Input, InputRef } from 'antd'
-import React, { forwardRef, useState } from 'react'
-import {
+import { Input, type InputRef } from 'antd'
+import type React from 'react'
+import { forwardRef, useState } from 'react'
+import type {
   YakitInputSearchProps,
   YakitInputProps,
   InternalTextAreaProps,
@@ -10,7 +11,7 @@ import styles from './YakitInput.module.scss'
 import classNames from 'classnames'
 import { useMemoizedFn } from 'ahooks'
 import { ResizerIcon } from '@/assets/newIcon'
-import { TextAreaRef } from 'antd/lib/input/TextArea'
+import { type TextAreaRef } from 'antd/lib/input/TextArea'
 import { SolidCloseCircleIcon } from '@/assets/colors'
 
 /**
@@ -34,7 +35,7 @@ const InternalInput: React.FC<YakitInputProps & React.RefAttributes<InputRef>> =
         style={{ ...(wrapperStyle || {}) }}
       >
         <Input
-          allowClear={!!allowClear ? { clearIcon: <SolidCloseCircleIcon style={{ display: 'flex' }} /> } : undefined}
+          allowClear={allowClear ? { clearIcon: <SolidCloseCircleIcon style={{ display: 'flex' }} /> } : undefined}
           spellCheck={false}
           {...restProps}
           ref={ref}
@@ -83,7 +84,7 @@ const InternalSearch: React.FC<YakitInputSearchProps & React.RefAttributes<Input
         style={{ ...(wrapperStyle || {}) }}
       >
         <Input.Search
-          allowClear={!!allowClear ? { clearIcon: <SolidCloseCircleIcon style={{ display: 'flex' }} /> } : undefined}
+          allowClear={allowClear ? { clearIcon: <SolidCloseCircleIcon style={{ display: 'flex' }} /> } : undefined}
           enterButton
           spellCheck={false}
           {...restProps}
@@ -143,7 +144,7 @@ const InternalInputPassword: React.FC<InternalInputPasswordProps & React.RefAttr
         style={{ ...(wrapperStyle || {}) }}
       >
         <Input.Password
-          allowClear={!!allowClear ? { clearIcon: <SolidCloseCircleIcon style={{ display: 'flex' }} /> } : undefined}
+          allowClear={allowClear ? { clearIcon: <SolidCloseCircleIcon style={{ display: 'flex' }} /> } : undefined}
           spellCheck={false}
           {...restProps}
           ref={ref}