refactor: Vite2的别名方式修改后对应引用路径调整

README.md

@@ -194,15 +194,15 @@ export default defineConfig({
                 replacement: path.resolve("./src/assets/images")
             },
             {
-                find: "@router",
+                find: "@/router",
                 replacement: path.resolve("./src/router")
             },
             {
-                find: "@store",
+                find: "@/store",
                 replacement: path.resolve("./src/store")
             },
             {
-                find: "@api",
+                find: "@/api",
                 replacement: path.resolve("./src/api")
             }
         ]
@@ -380,7 +380,7 @@ export const Session = {
 ```typescript
 import axios from "axios";
 import {ElMessage, ElMessageBox} from "element-plus";
-import {Session} from "@utils/storage";
+import {Session} from "@/utils/storage";
 
 
 // 创建 axios 实例

src/api/login/index.ts

@@ -1,4 +1,4 @@
-import request from "@utils/request";
+import request from "@/utils/request";
 
 /**
  * 登录

src/api/pms/category.ts

@@ -1,4 +1,4 @@
-import request from "@utils/request";
+import request from "@/utils/request";
 
 export const list=(queryParams:object)=>{
     return request({

src/api/system/dict.ts

@@ -1,4 +1,4 @@
-import request from "@utils/request";
+import request from "@/utils/request";
 
 /**
  * 获取字典分页列表

src/api/system/user.ts

@@ -1,5 +1,5 @@
 
-import request from "@utils/request";
+import request from "@/utils/request";
 export const listUser = (queryParams:any)=> {
     return request({
         url: '/youlai-admin/api/v2/users',

src/layout/components/index.ts

@@ -1,5 +1,4 @@
 export { default as Navbar } from './Navbar.vue'
-export { default as Sidebar } from './Sidebar/index.vue'
 export { default as AppMain } from './AppMain.vue'
 export { default as Settings } from './Settings/index.vue'
 export { default as TagsView } from './TagsView/index.vue'

src/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div v-if="classObj.mobile==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
@@ -8,123 +8,56 @@
         <tags-view v-if="needTagsView"/>
       </div>
       <app-main/>
-      <!--
-        <right-panel v-if="showSettings">
-              <settings/>
-            </right-panel>
-      -->
+<!--      <right-panel v-if="showSettings">
+        <settings/>
+      </right-panel>-->
     </div>
   </div>
 </template>
 
+<script setup lang="ts">
+import {computed, watchEffect,markRaw } from "vue"
+import {useWindowSize} from '@vueuse/core'
+import {AppMain, Navbar, Settings,TagsView} from './components/index.ts'
+import Sidebar from './components/Sidebar/index.vue'
 
-<script>
-import {computed, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, toRefs, watch} from "vue";
-import {AppMain, Navbar, Settings, Sidebar, TagsView} from './components/index.ts'
-       import {useRoute} from "vue-router";
-import { useAppStoreHook } from "@/store/modules/app";
-import { useSettingStoreHook } from "@/store/modules/settings";
-const {body} = document
+import {useAppStoreHook} from "@/store/modules/app"
+import {useSettingStoreHook} from "@/store/modules/settings"
+
+const classObj = computed(() => ({
+  hideSidebar: !useAppStoreHook().sidebar.opened,
+  openSidebar: useAppStoreHook().sidebar.opened,
+  withoutAnimation: useAppStoreHook().sidebar.withoutAnimation,
+  mobile: useAppStoreHook().device === 'mobile'
+}))
+
+
+const {width, height} = useWindowSize();
 const WIDTH = 992
 
-export default defineComponent({
-  name: 'Layout',
-  components: {
-    AppMain,
-    Navbar,
-    Settings,
-    Sidebar,
-    TagsView
-  },
-  setup() {
-    const sidebar = computed(() => useAppStoreHook().sidebar)
-    const isMobile = () => {
-      const rect = body.getBoundingClientRect()
-      return rect.width - 1 < WIDTH
-    }
+const sidebar = computed(() => useAppStoreHook().sidebar);
+const device = computed(() => useAppStoreHook().device);
+const needTagsView = computed(() => useSettingStoreHook().tagsView);
+const fixedHeader = computed(() => useSettingStoreHook().fixedHeader);
 
-    const resizeHandler = () => {
-      if (!document.hidden) {
-        useAppStoreHook().toggleSidebar( isMobile() ? 'mobile' : 'desktop')
-        if (isMobile()) {
-          useAppStoreHook().closeSideBar({withoutAnimation: true});
-        }
-      }
-    }
-
-    const resizeMounted = () => {
-      if (isMobile()) {
-        useAppStoreHook().toggleDevice(  'mobile' )
-        useAppStoreHook().toggleSidebar({withoutAnimation: true});
-      }
-    }
-    const addEventListenerOnResize = () => {
-      window.addEventListener('resize', resizeHandler)
-    }
-
-    const removeEventListenerResize = () => {
-      window.removeEventListener('resize', resizeHandler)
-    }
-
-    const currentRoute = useRoute()
-    const watchRouter = watch(() => currentRoute.name, () => {
-      if (useAppStoreHook().device === 'mobile' && useAppStoreHook().sidebar.opened) {
-        useAppStoreHook().closeSideBar(false)
-      }
-    })
-
-    const state = reactive({
-      handleClickOutside: () => {
-        useAppStoreHook().closeSideBar(false)
-      }
-    })
-
-    const classObj = computed(() => {
-      return {
-        hideSidebar:  !useAppStoreHook().sidebar.opened,
-        openSidebar: useAppStoreHook().sidebar.opened,
-        withoutAnimation: useAppStoreHook().sidebar.withoutAnimation,
-        mobile: useAppStoreHook().device === 'mobile'
-      }
-    })
-    const showSettings = computed(() => {
-      return useSettingStoreHook().showSettings
-    })
-
-    const needTagsView = computed(() => {
-      return useSettingStoreHook().tagsView
-    })
-
-    const fixedHeader = computed(() => {
-      return useSettingStoreHook().fixedHeader
-    })
-
-    watchRouter()
-
-    onBeforeMount(() => {
-      addEventListenerOnResize()
-    })
-
-    onMounted(() => {
-      resizeMounted()
-    })
-
-    onBeforeUnmount(() => {
-      removeEventListenerResize()
-    })
-
-    return {
-      classObj,
-      showSettings,
-      needTagsView,
-      fixedHeader,
-      sidebar,
-      ...toRefs(state)
-    }
+watchEffect(() => {
+  if (device.value === 'mobile' && sidebar.value.opened == true) {
+    useAppStoreHook().closeSideBar(false)
+  }
+  if (width.value < WIDTH) {
+    useAppStoreHook().toggleDevice("mobile")
+    useAppStoreHook().closeSideBar(true)
+  } else {
+    useAppStoreHook().toggleDevice("desktop")
   }
 })
 
+function handleClickOutside() {
+  useAppStoreHook().closeSideBar(false)
+}
 </script>
+
+
 <style lang="scss" scoped>
 @import "@/styles/mixin.scss";
 @import "@/styles/variables.scss";

src/permission.ts

@@ -1,4 +1,4 @@
-import router from "@router";
+import router from "@/router";
 import NProgress from 'nprogress';
 import {ElMessage} from "element-plus";
 import { usePermissionStoreHook } from "@/store/modules/permission";

src/router/index.ts

@@ -37,7 +37,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
         children: [
             {
                 path: 'dashboard',
-                component: () => import('@views/dashboard/index.vue'),
+                component: () => import('@/views/dashboard/index.vue'),
                 name: 'Dashboard',
                 meta: {title: '首页', icon: 'dashboard', affix: true}
             }

src/store/modules/app.ts

@@ -1,5 +1,5 @@
-import {AppState} from "@store/interface";
-import {Local} from "@utils/storage";
+import {AppState} from "@/store/interface";
+import {Local} from "@/utils/storage";
 import { store } from "@/store";
 import { defineStore } from "pinia";
 

src/store/modules/permission.ts

@@ -1,4 +1,4 @@
-import {PermissionState} from "@store/interface";
+import {PermissionState} from "@/store/interface";
 import {RouteRecordRaw} from 'vue-router'
 import {constantRoutes} from '@/router'
 import {listRoutes} from "@/api/system/menu";

src/store/modules/settings.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
-import {SettingState} from "@store/interface";
+import {SettingState} from "@/store/interface";
 import defaultSettings from '../../settings'
 
 const {showSettings, tagsView, fixedHeader, sidebarLogo} = defaultSettings

src/store/modules/tagsView.ts

@@ -1,6 +1,6 @@
 import {defineStore} from "pinia";
 import {store} from "@/store";
-import {TagsViewState} from "@store/interface";
+import {TagsViewState} from "@/store/interface";
 
 const tagsViewStore = defineStore({
     id: "tagsView",
@@ -112,7 +112,7 @@ const tagsViewStore = defineStore({
                         return true
                     }
 
-                    const cacheIndex = this.cachedViews.indexOf(item.name)
+                    const cacheIndex = this.cachedViews.indexOf(item.name as  string)
                     if (cacheIndex > -1) {
                         this.cachedViews.splice(cacheIndex, 1)
                     }
@@ -135,7 +135,7 @@ const tagsViewStore = defineStore({
                         return true
                     }
 
-                    const cacheIndex = this.cachedViews.indexOf(item.name)
+                    const cacheIndex = this.cachedViews.indexOf(item.name as string)
                     if (cacheIndex > -1) {
                         this.cachedViews.splice(cacheIndex, 1)
                     }

src/store/modules/user.ts

@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
-import {UserState} from "@store/interface";
-import {Local} from "@utils/storage";
-import {getUserInfo, login, logout} from "@api/login";
-import {resetRouter} from "@router";
+import {UserState} from "@/store/interface";
+import {Local} from "@/utils/storage";
+import {getUserInfo, login, logout} from "@/api/login";
+import {resetRouter} from "@/router";
 
 const getDefaultState = () => {
     return {

src/utils/request.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import {ElMessage, ElMessageBox} from "element-plus";
-import {Local} from "@utils/storage";
+import {Local} from "@/utils/storage";
 import { useUserStoreHook } from "@/store/modules/user";
 
 // 创建 axios 实例