From 17cbe2787dc3c20b26b31cb7383fca248290cf60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sat, 1 Jan 2022 16:17:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20Vite2=E7=9A=84=E5=88=AB=E5=90=8D?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F=E4=BF=AE=E6=94=B9=E5=90=8E=E5=AF=B9=E5=BA=94?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8=E8=B7=AF=E5=BE=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                       |   8 +-
 src/api/login/index.ts          |   2 +-
 src/api/pms/category.ts         |   2 +-
 src/api/system/dict.ts          |   2 +-
 src/api/system/user.ts          |   2 +-
 src/layout/components/index.ts  |   1 -
 src/layout/index.vue            | 145 +++++++++-----------------------
 src/permission.ts               |   2 +-
 src/router/index.ts             |   2 +-
 src/store/modules/app.ts        |   4 +-
 src/store/modules/permission.ts |   2 +-
 src/store/modules/settings.ts   |   2 +-
 src/store/modules/tagsView.ts   |   6 +-
 src/store/modules/user.ts       |   8 +-
 src/utils/request.ts            |   2 +-
 15 files changed, 61 insertions(+), 129 deletions(-)

diff --git a/README.md b/README.md
index 4d3fd261..08bfcb41 100644
--- a/README.md
+++ b/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 实例
diff --git a/src/api/login/index.ts b/src/api/login/index.ts
index 93d7a993..92e4029d 100644
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@@ -1,4 +1,4 @@
-import request from "@utils/request";
+import request from "@/utils/request";
 
 /**
  * 登录
diff --git a/src/api/pms/category.ts b/src/api/pms/category.ts
index 1cecce2c..0bdb6b9e 100644
--- a/src/api/pms/category.ts
+++ b/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({
diff --git a/src/api/system/dict.ts b/src/api/system/dict.ts
index 69ce0b5f..a3b08056 100644
--- a/src/api/system/dict.ts
+++ b/src/api/system/dict.ts
@@ -1,4 +1,4 @@
-import request from "@utils/request";
+import request from "@/utils/request";
 
 /**
  * 获取字典分页列表
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 309a51bd..d7a6bb15 100644
--- a/src/api/system/user.ts
+++ b/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',
diff --git a/src/layout/components/index.ts b/src/layout/components/index.ts
index 46ed1634..6fea3b87 100644
--- a/src/layout/components/index.ts
+++ b/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'
diff --git a/src/layout/index.vue b/src/layout/index.vue
index f2e95b12..64bd76ba 100644
--- a/src/layout/index.vue
+++ b/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";
diff --git a/src/permission.ts b/src/permission.ts
index 3605504e..7b674772 100644
--- a/src/permission.ts
+++ b/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";
diff --git a/src/router/index.ts b/src/router/index.ts
index bd38c103..9f263043 100644
--- a/src/router/index.ts
+++ b/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}
             }
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index aaeb6212..83be8d53 100644
--- a/src/store/modules/app.ts
+++ b/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";
 
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 5864a8a5..d68b14e0 100644
--- a/src/store/modules/permission.ts
+++ b/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";
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 0964f048..73cf4044 100644
--- a/src/store/modules/settings.ts
+++ b/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
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index 9a51d1d1..8aa264dc 100644
--- a/src/store/modules/tagsView.ts
+++ b/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)
                     }
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index b9b1e6a5..c5bba965 100644
--- a/src/store/modules/user.ts
+++ b/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 {
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 67a871aa..63eb4534 100644
--- a/src/utils/request.ts
+++ b/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 实例