refactor: 更换 ESLint 配置为 @antfu/eslint-config

src/layout/LayoutMix.vue

@@ -38,6 +38,8 @@
 </template>
 
 <script setup lang="ts">
+import type { RouteRecordRaw } from 'vue-router'
+import { searchTree } from 'xe-utils'
 import Main from './components/Main.vue'
 import Tabs from './components/Tabs/index.vue'
 import Menu from './components/Menu/index.vue'
@@ -45,9 +47,7 @@ import HeaderRightBar from './components/HeaderRightBar/index.vue'
 import Logo from './components/Logo.vue'
 import MenuFoldBtn from './components/MenuFoldBtn.vue'
 import { useAppStore, useRouteStore } from '@/stores'
-import type { RouteRecordRaw } from 'vue-router'
 import { isExternal } from '@/utils/validate'
-import { searchTree } from 'xe-utils'
 import { filterTree } from '@/utils'
 import { useDevice } from '@/hooks'
 
@@ -63,23 +63,11 @@ const menuRoutes = filterTree(routeStore.routes, (i) => i.meta?.hidden === false
 // 顶部一级菜单
 const topMenus = ref<RouteRecordRaw[]>([])
 topMenus.value = JSON.parse(JSON.stringify(menuRoutes))
-console.log('topMenus', toRaw(topMenus.value))
 
 const getMenuIcon = (item: RouteRecordRaw) => {
   return item.meta?.icon || item.children?.[0].meta?.icon
 }
 
-const onMenuItemClick = (key: string) => {
-  if (isExternal(key)) {
-    window.open(key)
-    return
-  }
-  setTimeout(() => getLeftMenus(key))
-  const obj = topMenus.value.find((i) => i.path === key)
-  if (obj && obj.redirect === 'noRedirect') return
-  router.push({ path: key })
-}
-
 // 克隆是菜单的路由
 const cloneMenuRoutes: RouteRecordRaw[] = JSON.parse(JSON.stringify(menuRoutes))
 // 顶部一级菜单选中的
@@ -95,6 +83,17 @@ const getLeftMenus = (key: string) => {
   leftMenus.value = obj ? (obj.children as RouteRecordRaw[]) : []
 }
 
+const onMenuItemClick = (key: string) => {
+  if (isExternal(key)) {
+    window.open(key)
+    return
+  }
+  setTimeout(() => getLeftMenus(key))
+  const obj = topMenus.value.find((i) => i.path === key)
+  if (obj && obj.redirect === 'noRedirect') return
+  router.push({ path: key })
+}
+
 watch(
   () => route.path,
   (newPath) => {

src/layout/components/Asider/index.vue

@@ -23,9 +23,9 @@
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from '@/stores'
 import Menu from '../Menu/index.vue'
 import Logo from '../Logo.vue'
+import { useAppStore } from '@/stores'
 import { useDevice } from '@/hooks'
 
 defineOptions({ name: 'Asider' })

src/layout/components/HeaderRightBar/SettingDrawer.vue

@@ -82,10 +82,10 @@
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from '@/stores'
 import { ColorPicker } from 'vue-color-kit'
 import 'vue-color-kit/dist/vue-color-kit.css'
 import LayoutItem from './components/LayoutItem.vue'
+import { useAppStore } from '@/stores'
 
 defineOptions({ name: 'SettingDrawer' })
 const appStore = useAppStore()
@@ -133,8 +133,8 @@ const defaultColorList = [
 
 type ColorObj = {
   hex: string
-  hsv: { h: number; s: number; v: number }
-  rgba: { r: number; g: number; b: number; a: number }
+  hsv: { h: number, s: number, v: number }
+  rgba: { r: number, g: number, b: number, a: number }
 }
 
 // 改变主题色

src/layout/components/HeaderRightBar/index.vue

@@ -67,15 +67,16 @@
 
 <script setup lang="ts">
 import { Modal } from '@arco-design/web-vue'
-import { useUserStore } from '@/stores'
+import { useFullscreen } from '@vueuse/core'
 import SettingDrawer from './SettingDrawer.vue'
 import Message from './Message.vue'
+import { useUserStore } from '@/stores'
 import { isMobile } from '@/utils'
-import { useFullscreen } from '@vueuse/core'
+
+defineOptions({ name: 'HeaderRight' })
 
 const { isFullscreen, toggle } = useFullscreen()
 
-defineOptions({ name: 'HeaderRight' })
 const router = useRouter()
 const userStore = useUserStore()
 const SettingDrawerRef = ref<InstanceType<typeof SettingDrawer>>()

src/layout/components/Logo.vue

@@ -9,6 +9,9 @@
 <script setup lang="ts">
 import { useAppStore } from '@/stores'
 
+const props = withDefaults(defineProps<Props>(), {
+  collapsed: false
+})
 const appStore = useAppStore()
 const title = computed(() => appStore.getTitle())
 const logo = computed(() => appStore.getLogo())
@@ -16,10 +19,6 @@ const logo = computed(() => appStore.getLogo())
 interface Props {
   collapsed?: boolean
 }
-const props = withDefaults(defineProps<Props>(), {
-  collapsed: false
-})
-
 const router = useRouter()
 // 跳转首页
 const toHome = () => {

src/layout/components/Menu/MenuItem.vue

@@ -2,9 +2,9 @@
   <template v-if="!item.meta?.hidden">
     <a-menu-item
       v-if="
-        isOneShowingChild &&
-        (!onlyOneChild?.children || onlyOneChild?.meta?.noShowingChildren) &&
-        !item?.meta?.alwaysShow
+        isOneShowingChild
+        && (!onlyOneChild?.children || onlyOneChild?.meta?.noShowingChildren)
+        && !item?.meta?.alwaysShow
       "
       v-bind="attrs"
       :key="onlyOneChild?.path"
@@ -32,14 +32,14 @@ import type { RouteRecordRaw } from 'vue-router'
 import MenuIcon from './MenuIcon.vue'
 
 defineOptions({ name: 'MenuItem' })
+const props = withDefaults(defineProps<Props>(), {})
+
 const attrs = useAttrs()
 
 interface Props {
   item: RouteRecordRaw
 }
 
-const props = withDefaults(defineProps<Props>(), {})
-
 // 如果hidden: false那么代表这个路由项显示在左侧菜单栏中
 // 如果props.item的子项chidren只有一个hidden: false的子元素, 那么onlyOneChild就表示这个子元素
 const onlyOneChild = ref<RouteRecordRaw | null>(null)

src/layout/components/Menu/index.vue

@@ -11,21 +11,23 @@
     @menu-item-click="onMenuItemClick"
     @collapse="onCollapse"
   >
-    <MenuItem v-for="(route, index) in sidebarRoutes" :key="route.path + index" :item="route"></MenuItem>
+    <MenuItem v-for="(item, index) in sidebarRoutes" :key="item.path + index" :item="item"></MenuItem>
   </a-menu>
 </template>
 
 <script setup lang="ts">
-import { useAppStore, useRouteStore } from '@/stores'
-import MenuItem from './MenuItem.vue'
-import { isExternal } from '@/utils/validate'
 import type { RouteRecordRaw } from 'vue-router'
 import type { CSSProperties } from 'vue'
+import MenuItem from './MenuItem.vue'
+import { useAppStore, useRouteStore } from '@/stores'
+import { isExternal } from '@/utils/validate'
 import { useDevice } from '@/hooks'
 
-defineOptions({ name: 'Menu' })
+defineOptions({ name: 'AppMenu' })
+const props = withDefaults(defineProps<Props>(), {})
+
 const emit = defineEmits<{
-  (e: 'menuItemClickAfter'): void
+  (e: 'menu-item-click-after'): void
 }>()
 
 interface Props {
@@ -33,15 +35,12 @@ interface Props {
   menuStyle?: CSSProperties
 }
 
-const props = withDefaults(defineProps<Props>(), {})
-
 const { isDesktop } = useDevice()
 const route = useRoute()
 const router = useRouter()
 const appStore = useAppStore()
 const routeStore = useRouteStore()
 const sidebarRoutes = computed(() => (props.menus ? props.menus : routeStore.routes))
-// console.log('sidebarRoutes', sidebarRoutes.value)
 
 // 菜单垂直模式/水平模式
 const mode = computed(() => {
@@ -73,7 +72,7 @@ const onMenuItemClick = (key: string) => {
     return
   }
   router.push({ path: key })
-  emit('menuItemClickAfter')
+  emit('menu-item-click-after')
 }
 
 // 折叠状态改变时触发

src/layout/components/MenuFoldBtn.vue

@@ -20,7 +20,7 @@
       :drawer-style="{
         'border-right': '1px solid var(--color-border-2)',
         'box-sizing': 'border-box',
-        'background-color': 'var(--color-bg-1)'
+        'background-color': 'var(--color-bg-1)',
       }"
     >
       <Logo :collapsed="false"></Logo>

src/layout/components/Tabs/index.vue

@@ -41,8 +41,8 @@
 
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router'
-import { useTabsStore, useAppStore } from '@/stores'
 import MagicIcon from './MagicIcon.vue'
+import { useAppStore, useTabsStore } from '@/stores'
 
 defineOptions({ name: 'Tabs' })
 const route = useRoute()
@@ -53,14 +53,6 @@ const tabsStore = useTabsStore()
 // 重置, 同时把 affix: true 的路由筛选出来
 tabsStore.reset()
 
-// 监听路由变化
-watch(
-  () => route.path,
-  () => {
-    handleRouteChange()
-  }
-)
-
 // 路由发生改变触发
 const handleRouteChange = () => {
   const item = { ...route } as unknown as RouteRecordRaw
@@ -72,6 +64,14 @@ const handleRouteChange = () => {
 }
 handleRouteChange()
 
+// 监听路由变化
+watch(
+  () => route.path,
+  () => {
+    handleRouteChange()
+  }
+)
+
 // 点击页签
 const handleTabClick = (key: string) => {
   router.push({ path: key })