perf: 修复部分 eslint 错误

internal/eslint-config/package.json

@@ -35,6 +35,7 @@
     "@typescript-eslint/parser": "^5.57.1",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.10.0",
     "vue-eslint-parser": "^9.1.1"

internal/eslint-config/src/index.ts

@@ -17,7 +17,7 @@ export default {
     createDefaultProgram: false,
     extraFileExtensions: ['.vue'],
   },
-  plugins: ['vue', '@typescript-eslint'],
+  plugins: ['vue', '@typescript-eslint', 'import'],
   extends: [
     'eslint:recommended',
     'plugin:vue/vue3-recommended',
@@ -25,16 +25,20 @@ export default {
     'plugin:prettier/recommended',
   ],
   rules: {
+    'no-unused-vars': 'off',
     'no-case-declarations': 'off',
-    'vue/script-setup-uses-vars': 'error',
-    'vue/no-reserved-component-names': 'off',
+    'no-use-before-define': 'off',
+    'space-before-function-paren': 'off',
+
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/no-empty-function': 'off',
-    'vue/custom-event-name-casing': 'off',
-    'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/ban-types': 'off',
@@ -47,15 +51,9 @@ export default {
         varsIgnorePattern: '^_',
       },
     ],
-    'no-unused-vars': [
-      'error',
-      {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
-      },
-    ],
-    'space-before-function-paren': 'off',
-
+    'vue/script-setup-uses-vars': 'error',
+    'vue/no-reserved-component-names': 'off',
+    'vue/custom-event-name-casing': 'off',
     'vue/attributes-order': 'off',
     'vue/one-component-per-file': 'off',
     'vue/html-closing-bracket-newline': 'off',
@@ -78,5 +76,15 @@ export default {
       },
     ],
     'vue/multi-word-component-names': 'off',
+    // 'sort-imports': [
+    //   'error',
+    //   {
+    //     ignoreCase: true,
+    //     ignoreDeclarationSort: false,
+    //     ignoreMemberSort: false,
+    //     memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+    //     allowSeparatedGroups: false,
+    //   },
+    // ],
   },
 };

src/api/demo/select.ts

 import { defHttp } from '/@/utils/http/axios';
 import { DemoOptionsItem, selectParams } from './model/optionsModel';
+
 enum Api {
   OPTIONS_LIST = '/select/getDemoOptions',
 }

src/api/sys/model/menuModel.ts

 import type { RouteMeta } from 'vue-router';
+
 export interface RouteItem {
   path: string;
   component: any;

src/components/Drawer/src/props.ts

 import type { PropType } from 'vue';
 
 import { useI18n } from '/@/hooks/web/useI18n';
+
 const { t } = useI18n();
 
 export const footerProps = {

src/components/Form/src/hooks/useAdvanced.ts

 import type { ColEx } from '../types';
 import type { AdvanceState } from '../types/hooks';
-import { ComputedRef, getCurrentInstance, Ref, shallowReactive } from 'vue';
+import { ComputedRef, getCurrentInstance, Ref, shallowReactive, computed, unref, watch } from 'vue';
 import type { FormProps, FormSchema } from '../types/form';
-import { computed, unref, watch } from 'vue';
 import { isBoolean, isFunction, isNumber, isObject } from '/@/utils/is';
 import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
 import { useDebounceFn } from '@vueuse/core';

src/components/Form/src/types/form.ts

 import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
-import type { VNode } from 'vue';
+import type { VNode, CSSProperties } from 'vue';
 import type { ButtonProps as AntdButtonProps } from '/@/components/Button';
 import type { FormItem } from './formItem';
 import type { ColEx, ComponentType } from './index';
 import type { TableActionType } from '/@/components/Table/src/types/table';
-import type { CSSProperties } from 'vue';
 import type { RowProps } from 'ant-design-vue/lib/grid/Row';
 
 export type FieldMapToTime = [string, [string, string], (string | [string, string])?][];

src/components/Loading/src/createLoading.ts

-import { VNode, defineComponent } from 'vue';
+import { VNode, defineComponent, createVNode, render, reactive, h } from 'vue';
 import type { LoadingProps } from './typing';
 
-import { createVNode, render, reactive, h } from 'vue';
 import Loading from './Loading.vue';
 
 export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElement, wait = false) {

src/components/Markdown/src/typing.ts

 import Vditor from 'vditor';
+
 export interface MarkDownActionType {
   getVditor: () => Vditor;
 }

src/components/Menu/src/props.ts

@@ -6,6 +6,7 @@ import { ThemeEnum } from '/@/enums/appEnum';
 import { propTypes } from '/@/utils/propTypes';
 import type { MenuTheme } from 'ant-design-vue';
 import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface';
+
 export const basicProps = {
   items: {
     type: Array as PropType<Menu[]>,

src/components/Menu/src/useOpenKeys.ts

@@ -2,9 +2,8 @@ import { MenuModeEnum } from '/@/enums/menuEnum';
 import type { Menu as MenuType } from '/@/router/types';
 import type { MenuState } from './types';
 
-import { computed, Ref, toRaw } from 'vue';
+import { computed, Ref, toRaw, unref } from 'vue';
 
-import { unref } from 'vue';
 import { uniq } from 'lodash-es';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 import { getAllParentPath } from '/@/router/helper/menuHelper';

src/components/Modal/src/hooks/useModal.ts

@@ -14,13 +14,13 @@ import {
   watchEffect,
   nextTick,
   toRaw,
+  computed,
 } from 'vue';
 import { isProdMode } from '/@/utils/env';
 import { isFunction } from '/@/utils/is';
 import { isEqual } from 'lodash-es';
 import { tryOnUnmounted } from '@vueuse/core';
 import { error } from '/@/utils/log';
-import { computed } from 'vue';
 
 const dataTransfer = reactive<any>({});
 

src/components/Qrcode/src/drawLogo.ts

 import { isString } from '/@/utils/is';
 import { RenderQrCodeParams, LogoType } from './typing';
+
 export const drawLogo = ({ canvas, logo }: RenderQrCodeParams) => {
   if (!logo) {
     return new Promise((resolve) => {

src/components/Qrcode/src/qrcodePlus.ts

 // 参考 qr-code-with-logo 进行ts版本修改
 import { toCanvas } from './toCanvas';
+
 export * from './typing';
 export { toCanvas };

src/components/Qrcode/src/toCanvas.ts

 import { renderQrCode } from './drawCanvas';
 import { drawLogo } from './drawLogo';
 import { RenderQrCodeParams } from './typing';
+
 export const toCanvas = (options: RenderQrCodeParams) => {
   return renderQrCode(options)
     .then(() => {

src/components/Scrollbar/src/util.ts

 import type { BarMap } from './types';
+
 export const BAR_MAP: BarMap = {
   vertical: {
     offset: 'offsetHeight',

src/components/SimpleMenu/src/useOpenKeys.ts

 import type { Menu as MenuType } from '/@/router/types';
 import type { MenuState } from './types';
 
-import { computed, Ref, toRaw } from 'vue';
+import { computed, Ref, toRaw, unref } from 'vue';
 
-import { unref } from 'vue';
 import { uniq } from 'lodash-es';
 import { getAllParentPath } from '/@/router/helper/menuHelper';
 

src/components/Table/src/hooks/useTableScroll.ts

 import type { BasicTableProps, TableRowSelection, BasicColumn } from '../types/table';
-import { Ref, ComputedRef, ref } from 'vue';
-import { computed, unref, nextTick, watch } from 'vue';
+import { Ref, ComputedRef, ref, computed, unref, nextTick, watch } from 'vue';
 import { getViewportOffset } from '/@/utils/domUtils';
 import { isBoolean } from '/@/utils/is';
 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';

src/components/Table/src/types/tableAction.ts

 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
 import { RoleEnum } from '/@/enums/roleEnum';
+
 export interface ActionItem extends ButtonProps {
   onClick?: Fn;
   label?: string;

src/components/Upload/src/useUpload.ts

 import { Ref, unref, computed } from 'vue';
 import { useI18n } from '/@/hooks/web/useI18n';
+
 const { t } = useI18n();
 export function useUploadType({
   acceptRef,

src/components/VxeTable/src/VxeBasicTable.tsx

-import { defineComponent } from 'vue';
-import { computed, ref } from 'vue';
+import { defineComponent, computed, ref } from 'vue';
 import { BasicTableProps } from './types';
 import { basicProps } from './props';
 import { ignorePropKeys } from './const';

src/directives/ripple/index.ts

 import type { Directive } from 'vue';
 import './index.less';
+
 export interface RippleOptions {
   event: string;
   transition: number;

src/hooks/core/useAttrs.ts

 import { getCurrentInstance, reactive, shallowRef, watchEffect } from 'vue';
 import type { Ref } from 'vue';
+
 interface Params {
   excludeListeners?: boolean;
   excludeKeys?: string[];

src/hooks/web/useContextMenu.ts

 import { onUnmounted, getCurrentInstance } from 'vue';
 import { createContextMenu, destroyContextMenu } from '/@/components/ContextMenu';
 import type { ContextMenuItem } from '/@/components/ContextMenu';
+
 export type { ContextMenuItem };
 export function useContextMenu(authRemove = true) {
   if (getCurrentInstance() && authRemove) {

src/hooks/web/useCopyToClipboard.ts

 import { ref, watch } from 'vue';
 
 import { isDef } from '/@/utils/is';
+
 interface Options {
   target?: HTMLElement;
 }

src/hooks/web/useECharts.ts

 import type { EChartsOption } from 'echarts';
 import type { Ref } from 'vue';
 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
-import { tryOnUnmounted } from '@vueuse/core';
+import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
 import { unref, nextTick, watch, computed, ref } from 'vue';
-import { useDebounceFn } from '@vueuse/core';
 import { useEventListener } from '/@/hooks/event/useEventListener';
 import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
 import echarts from '/@/utils/lib/echarts';

src/router/routes/modules/demo/iframe.ts

 import type { AppRouteModule } from '/@/router/types';
 
 import { LAYOUT } from '/@/router/constant';
-const IFrame = () => import('/@/views/sys/iframe/FrameBlank.vue');
 import { t } from '/@/hooks/web/useI18n';
 
+const IFrame = () => import('/@/views/sys/iframe/FrameBlank.vue');
+
 const iframe: AppRouteModule = {
   path: '/frame',
   name: 'Frame',

src/settings/projectSetting.ts

@@ -10,6 +10,7 @@ import {
   SessionTimeoutProcessingEnum,
 } from '/@/enums/appEnum';
 import { SIDE_BAR_BG_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST } from './designSetting';
+
 const primaryColor = '#0960bd';
 
 // ! You need to clear the browser cache after the change

src/utils/auth/index.ts

 import { Persistent, BasicKeys } from '/@/utils/cache/persistent';
-import { CacheTypeEnum } from '/@/enums/cacheEnum';
+import { CacheTypeEnum, TOKEN_KEY } from '/@/enums/cacheEnum';
 import projectSetting from '/@/settings/projectSetting';
-import { TOKEN_KEY } from '/@/enums/cacheEnum';
 
 const { permissionCacheType } = projectSetting;
 const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;

src/utils/cache/index.ts

 import { getStorageShortName } from '/@/utils/env';
 import { createStorage as create, CreateStorageParams } from './storageCache';
-import { enableStorageEncryption } from '/@/settings/encryptionSetting';
-import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
+import { enableStorageEncryption, DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
 
 export type Options = Partial<CreateStorageParams>;
 

src/utils/cipher.ts

 import { encrypt, decrypt } from 'crypto-js/aes';
-import { parse } from 'crypto-js/enc-utf8';
+import UTF8, { parse } from 'crypto-js/enc-utf8';
 import pkcs7 from 'crypto-js/pad-pkcs7';
 import ECB from 'crypto-js/mode-ecb';
 import md5 from 'crypto-js/md5';
-import UTF8 from 'crypto-js/enc-utf8';
 import Base64 from 'crypto-js/enc-base64';
 
 export interface EncryptionParams {

src/utils/http/axios/Axios.ts

@@ -6,8 +6,7 @@ import qs from 'qs';
 import { AxiosCanceler } from './axiosCancel';
 import { isFunction } from '/@/utils/is';
 import { cloneDeep } from 'lodash-es';
-import { ContentTypeEnum } from '/@/enums/httpEnum';
-import { RequestEnum } from '/@/enums/httpEnum';
+import { ContentTypeEnum, RequestEnum } from '/@/enums/httpEnum';
 
 export * from './axiosTransform';
 

src/views/demo/page/form/basic/data.ts

 import { FormSchema } from '/@/components/Form';
+
 const colProps = {
   span: 8,
 };

src/views/demo/system/account/account.data.ts

 import { getAllRoleList, isAccountExist } from '/@/api/demo/system';
-import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
+import { BasicColumn, FormSchema } from '/@/components/Table';
 
 export const columns: BasicColumn[] = [
   {

src/views/demo/system/dept/dept.data.ts

-import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
+import { BasicColumn, FormSchema } from '/@/components/Table';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 

src/views/demo/system/menu/menu.data.ts

-import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
+import { BasicColumn, FormSchema } from '/@/components/Table';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import { Icon } from '/@/components/Icon';

src/views/demo/system/role/role.data.ts

-import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
+import { BasicColumn, FormSchema } from '/@/components/Table';
 import { h } from 'vue';
 import { Switch } from 'ant-design-vue';
 import { setRoleStatus } from '/@/api/demo/system';

src/views/form-design/hooks/useFormInstanceMethods.ts

 import { IAnyObject } from '../typings/base-type';
-import { Ref, SetupContext } from 'vue';
+import { Ref, SetupContext, getCurrentInstance, toRaw } from 'vue';
 import { cloneDeep, forOwn, isFunction } from 'lodash-es';
 import { AForm, IVFormComponent } from '../typings/v-form-component';
-import { getCurrentInstance } from 'vue';
 import { Form } from 'ant-design-vue';
-import { toRaw } from 'vue';
 
 export function useFormInstanceMethods(
   props: IAnyObject,

src/views/form-design/typings/v-form-component.ts

@@ -8,6 +8,7 @@ import { SelectValue } from 'ant-design-vue/lib/select';
 import { validateOptions } from 'ant-design-vue/lib/form/useForm';
 import { RuleError } from 'ant-design-vue/lib/form/interface';
 import { FormItem } from '/@/components/Form';
+
 type LayoutType = 'horizontal' | 'vertical' | 'inline';
 type labelLayout = 'flex' | 'Grid';
 export type PropsTabKey = 1 | 2 | 3;

src/views/form-design/utils/message.ts

 import { useMessage } from '/@/hooks/web/useMessage';
+
 const { createMessage } = useMessage();
 const message = Object.assign({
   success: (msg: string) => {

types/module.d.ts

 declare module '*.vue' {
   import { DefineComponent } from 'vue';
+
   const Component: DefineComponent<{}, {}, any>;
   export default Component;
 }
 
 declare module 'ant-design-vue/es/locale/*' {
   import { Locale } from 'ant-design-vue/types/locale-provider';
+
   const locale: Locale & ReadonlyRecordable;
   export default locale as Locale & ReadonlyRecordable;
 }