refactor(script-setup): use defineOptions

.eslintrc.js

@@ -15,12 +15,28 @@ module.exports = {
       jsx: true,
     },
   },
+  plugins: ['@typescript-eslint', 'prettier', 'import'],
   extends: [
-    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
     'prettier',
-    'plugin:prettier/recommended',
   ],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.vue'],
+      rules: {
+        'no-undef': 'off',
+      },
+    },
+  ],
+  // plugins: ['@typescript-eslint', 'prettier', 'import'],
+  // extends: [
+  //   'plugin:vue/vue3-recommended',
+  //   'plugin:@typescript-eslint/recommended',
+  //   'prettier',
+  //   'plugin:prettier/recommended',
+  // ],
   rules: {
     'vue/script-setup-uses-vars': 'error',
     '@typescript-eslint/ban-ts-ignore': 'off',
@@ -73,5 +89,28 @@ module.exports = {
       },
     ],
     'vue/multi-word-component-names': 'off',
+    // import
+    'import/first': 'error',
+    'import/no-duplicates': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
+
+        pathGroups: [
+          {
+            pattern: 'vue',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@vue/**',
+            group: 'external',
+            position: 'before',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['type'],
+      },
+    ],
   },
 };

package.json

@@ -27,11 +27,11 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.0.1",
-    "@vueuse/core": "^7.6.2",
-    "ant-design-vue": "3.0.0-beta.9",
+    "@vueuse/core": "^7.7.1",
+    "ant-design-vue": "3.0.0-beta.13",
     "axios": "^0.26.0",
     "core-js": "^3.21.1",
-    "dayjs": "^1.10.7",
+    "dayjs": "^1.10.8",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
@@ -43,17 +43,17 @@
     "sortablejs": "^1.14.0",
     "vue": "^3.2.31",
     "vue-i18n": "^9.2.0-beta.30",
-    "vue-router": "^4.0.12",
-    "xlsx": "^0.18.2"
+    "vue-router": "^4.0.13",
+    "xlsx": "^0.18.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.18",
+    "@types/node": "^17.0.21",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
-    "@typescript-eslint/parser": "^5.12.0",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
     "@vue/cli-plugin-babel": "^5.0.1",
     "@vue/cli-plugin-eslint": "^5.0.1",
     "@vue/cli-plugin-router": "^5.0.1",
@@ -66,28 +66,30 @@
     "commitizen": "^4.2.4",
     "compression-webpack-plugin": "^9.2.0",
     "conventional-changelog-cli": "^2.2.2",
-    "eslint": "^8.9.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.4.1",
+    "eslint-plugin-vue": "^8.5.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.3.4",
+    "lint-staged": "^12.3.5",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
     "prettier": "^2.5.1",
     "regenerator-runtime": "^0.13.9",
-    "stylelint": "^14.5.1",
+    "stylelint": "^14.5.3",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-order": "^5.0.0",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^4.5.5",
+    "unplugin-vue-define-options": "^0.4.0",
     "vue-cli-plugin-windicss": "^1.1.3",
-    "vue-eslint-parser": "^8.2.0"
+    "vue-eslint-parser": "^8.3.0"
   },
   "__npminstall_done": false,
   "repository": {

src/App.vue

@@ -10,10 +10,10 @@
 <script setup lang="ts">
   import { watchEffect } from 'vue';
   import { ConfigProvider } from 'ant-design-vue';
-  import { LockScreen } from '@/components/basic/lockscreen';
   import { useRoute } from 'vue-router';
-  import { useLocale } from '@/locales/useLocale';
   import { transformI18n } from './hooks/useI18n';
+  import { LockScreen } from '@/components/basic/lockscreen';
+  import { useLocale } from '@/locales/useLocale';
 
   const route = useRoute();
   const { getAntdLocale } = useLocale();

src/api/demos/hero.ts

@@ -37,7 +37,7 @@ export function getLolHeroList(query: API.PageParams) {
 /**
  * @description 获取英雄联盟英雄列表
  */
-export function getLolHeroInfo(query: { id: number | string }) {
+export function getLolHeroInfo(query: { id: string | string[] }) {
   return request<BaseResponse>(
     {
       url: '/demos/lol/hero_info',

src/components/basic/basic-help/index.vue

@@ -1,8 +1,8 @@
 <script lang="tsx">
-  import type { CSSProperties, PropType } from 'vue';
   import { defineComponent, computed, unref } from 'vue';
   import { Tooltip } from 'ant-design-vue';
   import { InfoCircleOutlined } from '@ant-design/icons-vue';
+  import type { CSSProperties, PropType } from 'vue';
   import { isString, isArray } from '@/utils/is';
   import { getSlot } from '@/utils/helper/tsxHelper';
 

src/components/basic/button/button.vue

@@ -11,8 +11,8 @@
   </Button>
 </template>
 <script lang="ts" setup>
-  import { Button } from 'ant-design-vue';
   import { computed, type PropType } from 'vue';
+  import { Button } from 'ant-design-vue';
   import buttonProps, { type ButtonType } from 'ant-design-vue/es/button/buttonTypes';
 
   const props = defineProps({

src/components/basic/check-box/index.vue

@@ -4,18 +4,16 @@
   </Checkbox>
 </template>
 
-<script lang="ts">
-  export default {
-    inheritAttrs: false,
-  };
-</script>
-
 <script lang="ts" setup>
   import { computed } from 'vue';
   import { Checkbox } from 'ant-design-vue';
   import { checkboxProps } from 'ant-design-vue/es/checkbox';
   import { omit } from 'lodash-es';
 
+  defineOptions({
+    inheritAttrs: false,
+  });
+
   const props = defineProps({
     ...checkboxProps(),
     trueValue: {

src/components/basic/context-menu/src/ContextMenu.vue

@@ -1,9 +1,9 @@
 <script lang="tsx">
+  import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
+  import { Menu, Divider } from 'ant-design-vue';
   import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
   import type { FunctionalComponent, CSSProperties } from 'vue';
-  import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
   import { IconFont } from '@/components/basic/iconfont';
-  import { Menu, Divider } from 'ant-design-vue';
 
   const prefixCls = 'context-menu';
 

src/components/basic/context-menu/src/createContextMenu.ts

@@ -1,7 +1,7 @@
+import { createVNode, render } from 'vue';
 import contextMenuVue from './ContextMenu.vue';
-import { isClient } from '@/utils/is';
 import { CreateContextOptions, ContextMenuProps } from './typing';
-import { createVNode, render } from 'vue';
+import { isClient } from '@/utils/is';
 
 const menuManager: {
   domList: Element[];
@@ -50,7 +50,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
       menuManager.domList.forEach((dom: Element) => {
         try {
           dom && body.removeChild(dom);
-        } catch (error) {}
+        } catch (error) {
+          console.error(error);
+        }
       });
       body.removeEventListener('click', handleClick);
       body.removeEventListener('scroll', handleClick);

src/components/basic/excel/index.ts

@@ -1,5 +1,5 @@
-import { withInstall } from '@/utils';
 import impExcel from './src/ImportExcel.vue';
+import { withInstall } from '@/utils';
 export { useExportExcelModal } from './src/ExportExcelModal';
 
 export const ImpExcel = withInstall(impExcel);

src/components/basic/excel/src/ExportExcelModal.tsx

@@ -1,10 +1,9 @@
+import { useI18n } from 'vue-i18n';
 import type { ExportModalResult } from './typing';
 import type { FormItemSchema } from '@/components/core/schema-form/types/form';
 
 import { useFormModal } from '@/hooks/useModal/useFormModal';
 
-import { useI18n } from 'vue-i18n';
-
 export type OpenModalOptions = {
   onOk: (val: ExportModalResult) => any;
 };

src/components/basic/excel/src/ImportExcel.vue

@@ -16,9 +16,9 @@
   import { defineComponent, ref, unref } from 'vue';
   import { read, utils } from 'xlsx';
   import type { WorkSheet, WorkBook } from 'xlsx';
+  import type { ExcelData } from './typing';
   import { dateUtil } from '@/utils/dateUtil';
 
-  import type { ExcelData } from './typing';
   export default defineComponent({
     name: 'ImportExcel',
     props: {

src/components/basic/icons-select/index.vue

@@ -24,9 +24,9 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { Popover } from 'ant-design-vue';
-  import { IconFont } from '@/components/basic/iconfont';
-  import icons from './icons.json';
   import { useVModel } from '@vueuse/core';
+  import icons from './icons.json';
+  import { IconFont } from '@/components/basic/iconfont';
 
   const { glyphs } = icons;
 

src/components/basic/lockscreen/index.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script setup lang="ts">
-  import LockScreen from './lockscreen.vue';
   import { computed, ref, onMounted, onUnmounted } from 'vue';
   import { useRoute } from 'vue-router';
+  import LockScreen from './lockscreen.vue';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { LOGIN_NAME } from '@/router/constant';
 

src/components/basic/lockscreen/lockscreen.vue

@@ -77,11 +77,11 @@
   } from '@ant-design/icons-vue';
 
   import { useRouter, useRoute } from 'vue-router';
+  import HuaweiCharge from './huawei-charge.vue';
+  import XiaomiCharge from './xiaomi-charge.vue';
   import { useOnline } from '@/hooks/useOnline';
   import { useTime } from '@/hooks/useTime';
   // import md5 from 'blueimp-md5'
-  import HuaweiCharge from './huawei-charge.vue';
-  import XiaomiCharge from './xiaomi-charge.vue';
   import { useBattery } from '@/hooks/useBattery';
   import { useLockscreenStore } from '@/store/modules/lockscreen';
   import { useUserStore } from '@/store/modules/user';

src/components/core/dynamic-table/components/query-form/index.vue

@@ -25,8 +25,8 @@
   import { defineComponent, reactive, toRefs, computed, ref, nextTick } from 'vue';
   import { DownOutlined } from '@ant-design/icons-vue';
   import type { TableColumn } from '../../typing';
-  import SchemaForm from '@/components/core/schema-form/schema-form.vue';
   import type { FormItemSchema, FormProps } from '@/components/core/schema-form/types/form';
+  import SchemaForm from '@/components/core/schema-form/schema-form.vue';
 
   export default defineComponent({
     name: 'QueryForm',

src/components/core/dynamic-table/components/table-action.vue

@@ -11,9 +11,9 @@
 </template>
 
 <script lang="ts" setup>
+  import { computed } from 'vue';
   import { Popconfirm } from 'ant-design-vue';
   import type { PropType } from 'vue';
-  import { computed } from 'vue';
   import type { ActionItem } from '../types/tableAction';
   import { verifyAuth } from '@/core/permission/';
   import { isString, isObject } from '@/utils/is';

src/components/core/dynamic-table/components/table-settings/column-setting.vue

@@ -76,10 +76,10 @@
     VerticalLeftOutlined,
     DragOutlined,
   } from '@ant-design/icons-vue';
-  import { useTableContext } from '../../hooks/useTableContext';
   import { cloneDeep } from 'lodash-es';
-  import Checkbox from '@/components/basic/check-box/index.vue';
+  import { useTableContext } from '../../hooks/useTableContext';
   import type { TableColumn } from '../../typing';
+  import Checkbox from '@/components/basic/check-box/index.vue';
   import { useSortable } from '@/hooks/useSortable';
   import { isNullAndUnDef } from '@/utils/is';
 

src/components/core/dynamic-table/components/table-settings/size-setting.vue

@@ -25,9 +25,9 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { Tooltip, Dropdown, Menu } from 'ant-design-vue';
-  import type { TableProps } from 'ant-design-vue/es/table/Table';
   import { ColumnHeightOutlined } from '@ant-design/icons-vue';
   import { useTableContext } from '../../hooks/useTableContext';
+  import type { TableProps } from 'ant-design-vue/es/table/Table';
 
   type SizeType = NonNullable<TableProps['size']>;
 

src/components/core/dynamic-table/components/tool-bar/index.vue

@@ -18,8 +18,8 @@
 
 <script lang="ts" setup>
   import { Divider } from 'ant-design-vue';
-  import BasicHelp from '@/components/basic/basic-help/index.vue';
   import TableSetting from '../table-settings/index.vue';
+  import BasicHelp from '@/components/basic/basic-help/index.vue';
 
   defineProps({
     title: {

src/components/core/dynamic-table/dynamic-table.vue

@@ -81,12 +81,12 @@
     unref,
   } from 'vue';
   import { Table, Space } from 'ant-design-vue';
-  import { usePagination, createTableContext, useExportData2Excel } from './hooks/';
-  import type { TableColumn, OnChangeCallbackParams } from './typing';
-  import { isBoolean, isObject } from '@/utils/is';
   import { omit } from 'lodash-es';
+  import { usePagination, createTableContext, useExportData2Excel } from './hooks/';
   import { TableAction, QueryForm, ToolBar } from './components';
   import dynamicTableProps, { TableProps } from './props';
+  import type { TableColumn, OnChangeCallbackParams } from './typing';
+  import { isBoolean, isObject } from '@/utils/is';
   import { type SchemaFormRef } from '@/components/core/schema-form';
 
   export default defineComponent({

src/components/core/dynamic-table/hooks/useExportData2Excel.ts

@@ -1,7 +1,7 @@
+import { type ComponentInternalInstance } from 'vue';
 import { isEmpty } from 'lodash-es';
-import { export_json_to_excel } from '@/utils/Export2Excel';
 import { type DynamicTableInstance } from '../typing';
-import { type ComponentInternalInstance } from 'vue';
+import { export_json_to_excel } from '@/utils/Export2Excel';
 
 /**
  * 导出表格Excel

src/components/core/dynamic-table/hooks/usePagination.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 // import Pagination from 'ant-design-vue/es/pagination/Pagination'
-import type { TableProps } from 'ant-design-vue';
 import { useI18n } from 'vue-i18n';
+import type { TableProps } from 'ant-design-vue';
 
 export type Pagination = TableProps['pagination'];
 

src/components/core/dynamic-table/hooks/useTableContext.ts

@@ -1,5 +1,5 @@
-import type { DynamicTableInstance } from './../typing';
 import { provide, inject, type ComponentInternalInstance } from 'vue';
+import type { DynamicTableInstance } from './../typing';
 
 const key = Symbol('dynamic-table');