feat: 新增simple-import-sort插件规范引入

.eslintrc

@@ -17,7 +17,7 @@
     "defineProps": "readonly",
     "defineEmits": "readonly"
   },
-  "plugins": ["vue", "@typescript-eslint"],
+  "plugins": ["vue", "@typescript-eslint", "simple-import-sort"],
   "parserOptions": {
     "parser": "@typescript-eslint/parser",
     "sourceType": "module",
@@ -65,7 +65,9 @@
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-types": "off",
-    "class-methods-use-this": "off" // 因为AxiosCancel必须实例化而能静态化所以加的规则，如果有办法解决可以取消
+    "class-methods-use-this": "off", // 因为AxiosCancel必须实例化而能静态化所以加的规则，如果有办法解决可以取消
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error"
   },
   "overrides": [
     {

mock/index.ts

@@ -1,5 +1,5 @@
-import { MockMethod } from 'vite-plugin-mock';
 import Mock from 'mockjs';
+import { MockMethod } from 'vite-plugin-mock';
 
 export default [
   {

package.json

@@ -55,6 +55,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-vue": "^9.8.0",
     "eslint-plugin-vue-scoped-css": "^2.2.0",
     "husky": "^8.0.2",

src/App.vue

@@ -3,6 +3,7 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
+
 import { useSettingStore } from '@/store';
 
 const store = useSettingStore();

src/api/detail.ts

@@ -1,5 +1,5 @@
-import { request } from '@/utils/request';
 import type { ProjectListResult, PurchaseListResult } from '@/api/model/detailModel';
+import { request } from '@/utils/request';
 
 const Api = {
   PurchaseList: '/get-purchase-list',

src/api/list.ts

@@ -1,5 +1,5 @@
-import { request } from '@/utils/request';
 import type { CardListResult, ListResult } from '@/api/model/listModel';
+import { request } from '@/utils/request';
 
 const Api = {
   BaseList: '/get-list',

src/api/permission.ts

@@ -1,5 +1,5 @@
-import { request } from '@/utils/request';
 import type { MenuListResult } from '@/api/model/permissionModel';
+import { request } from '@/utils/request';
 
 const Api = {
   MenuList: '/get-menu-list',

src/components/color/index.vue

@@ -3,6 +3,7 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
+
 import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
 
 const panelColor =

src/components/product-card/index.vue

@@ -55,16 +55,16 @@
   </t-card>
 </template>
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import {
-  ShopIcon,
+  AddIcon,
   CalendarIcon,
-  ServiceIcon,
-  UserAvatarIcon,
   LaptopIcon,
   MoreIcon,
-  AddIcon,
+  ServiceIcon,
+  ShopIcon,
+  UserAvatarIcon,
 } from 'tdesign-icons-vue-next';
+import type { PropType } from 'vue';
 
 export interface CardProductType {
   type: number;

src/components/result/index.vue

@@ -10,12 +10,13 @@
 </template>
 <script setup lang="ts">
 import { computed } from 'vue';
+
 import Result403Icon from '@/assets/assets-result-403.svg?component';
 import Result404Icon from '@/assets/assets-result-404.svg?component';
 import Result500Icon from '@/assets/assets-result-500.svg?component';
 import ResultIeIcon from '@/assets/assets-result-ie.svg?component';
-import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
 import ResultMaintenanceIcon from '@/assets/assets-result-maintenance.svg?component';
+import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
 
 const props = defineProps({
   bgUrl: String,

src/hooks/event/useWindowSizeFn.ts

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { onUnmounted, onMounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 
 interface WindowSizeOptions {
   immediate?: boolean;

src/hooks/index.ts

@@ -1,5 +1,5 @@
-import { ref, Ref, onUnmounted, onMounted } from 'vue';
 import * as echarts from 'echarts/core';
+import { onMounted, onUnmounted, Ref, ref } from 'vue';
 
 /**
  * eChart hook

src/layouts/components/Content.vue

@@ -10,10 +10,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import type { ComputedRef } from 'vue';
-import { useTabsRouterStore } from '@/store';
+import { computed } from 'vue';
+
 import FramePage from '@/layouts/frame/index.vue';
+import { useTabsRouterStore } from '@/store';
 
 // <suspense>标签属于实验性功能，请谨慎使用
 // 如果存在需解决/page/1=> /page/2 刷新数据问题 请修改代码 使用activeRouteFullPath 作为key

src/layouts/components/FrameContent.vue

@@ -6,10 +6,11 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { CSSProperties, watch, ref, unref, computed } from 'vue';
 import debounce from 'lodash/debounce';
-import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
+import { computed, CSSProperties, ref, unref, watch } from 'vue';
+
 import { prefix } from '@/config/global';
+import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
 import { useSettingStore } from '@/store';
 
 defineProps({

src/layouts/components/Header.vue

@@ -64,18 +64,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import type { PropType } from 'vue';
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { useSettingStore } from '@/store';
-import { getActive } from '@/router';
-import { prefix } from '@/config/global';
+
 import LogoFull from '@/assets/assets-logo-full.svg?component';
+import { prefix } from '@/config/global';
+import { getActive } from '@/router';
+import { useSettingStore } from '@/store';
 import type { MenuRoute } from '@/types/interface';
 
+import MenuContent from './MenuContent.vue';
 import Notice from './Notice.vue';
 import Search from './Search.vue';
-import MenuContent from './MenuContent.vue';
 
 const props = defineProps({
   theme: {

src/layouts/components/LayoutContent.vue

@@ -70,14 +70,15 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, computed } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { useSettingStore, useTabsRouterStore } from '@/store';
+
 import { prefix } from '@/config/global';
+import { useSettingStore, useTabsRouterStore } from '@/store';
 import type { TRouterInfo } from '@/types/interface';
 
-import LContent from './Content.vue';
 import LBreadcrumb from './Breadcrumb.vue';
+import LContent from './Content.vue';
 import LFooter from './Footer.vue';
 
 const route = useRoute();

src/layouts/components/LayoutHeader.vue

@@ -11,9 +11,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
 import { usePermissionStore, useSettingStore } from '@/store';
+
 import LHeader from './Header.vue';
 
 const permissionStore = usePermissionStore();

src/layouts/components/LayoutSideNav.vue

@@ -11,10 +11,12 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
+
 import { usePermissionStore, useSettingStore } from '@/store';
+
 import LSideNav from './SideNav.vue';
 
 const route = useRoute();

src/layouts/components/MenuContent.vue

@@ -25,10 +25,11 @@
   </div>
 </template>
 <script setup lang="tsx">
-import { computed } from 'vue';
 import type { PropType } from 'vue';
-import type { MenuRoute } from '@/types/interface';
+import { computed } from 'vue';
+
 import { getActive } from '@/router';
+import type { MenuRoute } from '@/types/interface';
 
 type ListItemType = MenuRoute & { icon?: string };
 

src/layouts/components/Notice.vue

@@ -47,8 +47,9 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
+
 import { useNotificationStore } from '@/store';
 import type { NotificationItem } from '@/types/interface';
 

src/layouts/components/SideNav.vue

@@ -16,19 +16,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import union from 'lodash/union';
 import type { PropType } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
-import union from 'lodash/union';
 
-import { useSettingStore } from '@/store';
+import AssetLogoFull from '@/assets/assets-logo-full.svg?component';
+import AssetLogo from '@/assets/assets-t-logo.svg?component';
 import { prefix } from '@/config/global';
-import pgk from '../../../package.json';
-import type { MenuRoute } from '@/types/interface';
 import { getActive, getRoutesExpanded } from '@/router';
+import { useSettingStore } from '@/store';
+import type { MenuRoute } from '@/types/interface';
 
-import AssetLogo from '@/assets/assets-t-logo.svg?component';
-import AssetLogoFull from '@/assets/assets-logo-full.svg?component';
+import pgk from '../../../package.json';
 import MenuContent from './MenuContent.vue';
 
 const MIN_POINT = 992 - 1;

src/layouts/frame/index.vue

@@ -6,9 +6,9 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, unref, computed } from 'vue';
-import FrameContent from '../components/FrameContent.vue';
+import { computed, defineComponent, unref } from 'vue';
 
+import FrameContent from '../components/FrameContent.vue';
 import { useFrameKeepAlive } from './useFrameKeepAlive';
 
 export default defineComponent({

src/layouts/frame/useFrameKeepAlive.ts

@@ -1,6 +1,7 @@
-import { computed, toRaw, unref } from 'vue';
 import uniqBy from 'lodash/uniqBy';
+import { computed, toRaw, unref } from 'vue';
 import { useRouter } from 'vue-router';
+
 import { useSettingStore, useTabsRouterStore } from '@/store';
 import type { MenuRoute } from '@/types/interface';
 

src/layouts/index.vue

@@ -24,19 +24,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch } from 'vue';
+import '@/style/layout.less';
+
 import { storeToRefs } from 'pinia';
+import { computed, onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
+
+import { prefix } from '@/config/global';
 import { useSettingStore, useTabsRouterStore } from '@/store';
 
-import SettingCom from './setting.vue';
-import LayoutHeader from './components/LayoutHeader.vue';
 import LayoutContent from './components/LayoutContent.vue';
+import LayoutHeader from './components/LayoutHeader.vue';
 import LayoutSideNav from './components/LayoutSideNav.vue';
-
-import { prefix } from '@/config/global';
-
-import '@/style/layout.less';
+import SettingCom from './setting.vue';
 
 const route = useRoute();
 const settingStore = useSettingStore();

src/layouts/setting.vue

@@ -92,21 +92,19 @@
   </t-drawer>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted, watchEffect } from 'vue';
-import { MessagePlugin } from 'tdesign-vue-next';
 import type { PopupVisibleChangeContext } from 'tdesign-vue-next';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { computed, onMounted, ref, watchEffect } from 'vue';
 import useClipboard from 'vue-clipboard3';
 
-import { useSettingStore } from '@/store';
-import Thumbnail from '@/components/thumbnail/index.vue';
-import ColorContainer from '@/components/color/index.vue';
-
-import STYLE_CONFIG from '@/config/style';
-import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
-
+import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
 import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
 import SettingLightIcon from '@/assets/assets-setting-light.svg';
-import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
+import ColorContainer from '@/components/color/index.vue';
+import Thumbnail from '@/components/thumbnail/index.vue';
+import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
+import STYLE_CONFIG from '@/config/style';
+import { useSettingStore } from '@/store';
 
 const settingStore = useSettingStore();
 

src/main.ts

@@ -1,12 +1,13 @@
-import { createApp } from 'vue';
-
-import TDesign from 'tdesign-vue-next';
 import 'tdesign-vue-next/es/style/index.css';
-import { store } from './store';
-import router from './router';
 import '@/style/index.less';
 import './permission';
+
+import TDesign from 'tdesign-vue-next';
+import { createApp } from 'vue';
+
 import App from './App.vue';
+import router from './router';
+import { store } from './store';
 
 const app = createApp(App);
 

src/pages/dashboard/base/components/MiddleChart.vue

@@ -35,17 +35,17 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, watch, ref, onUnmounted, nextTick, computed, onDeactivated } from 'vue';
-
+import { LineChart, PieChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
-import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
-import { PieChart, LineChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
+import { computed, nextTick, onDeactivated, onMounted, onUnmounted, ref, watch } from 'vue';
+
 import { useSettingStore } from '@/store';
-import { LAST_7_DAYS } from '@/utils/date';
 import { changeChartsTheme } from '@/utils/color';
+import { LAST_7_DAYS } from '@/utils/date';
 
-import { getPieChartDataSet, getLineChartDataSet } from '../index';
+import { getLineChartDataSet, getPieChartDataSet } from '../index';
 
 echarts.use([TooltipComponent, LegendComponent, PieChart, GridComponent, LineChart, CanvasRenderer]);