疑难杂症解决

Author: GAtomis

README.md

@@ -2,7 +2,7 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-05-01 00:48:47
- * @LastEditTime: 2021-11-18 14:28:21
+ * @LastEditTime: 2021-11-19 18:46:28
  * @LastEditors: Gavin
 -->
 
@@ -24,9 +24,14 @@ Artemis Admin英文不太好先写中文了。本项目基于vue3.2+ts+antd-vue+
 - 单点登录功能
 - 动态路由加载
 - 主题色替换
+- 个人主页已经权限配置
 
 
 
+## 疑难杂症日记
+* 热更新白页内存移除=>store配置初始化
+* 热更新还是无法使用内容白页=>keep-alive和router-view 需要加key保证他的唯一性
+
 ## Project setup
 
 ```

mock/Dao/User.ts

@@ -4,7 +4,7 @@ import { Interface } from "readline"
  * @Description: User Tao声明
  * @Author: Gavin
  * @Date: 2021-08-04 16:55:59
- * @LastEditTime: 2021-10-26 16:53:50
+ * @LastEditTime: 2021-11-19 15:27:08
  * @LastEditors: Gavin
  */
 export interface UserInfo {
@@ -16,12 +16,13 @@ export interface UserInfo {
   avatar?: string
   gender?: string
   token?: string,
+  catchPhrase?:string,
   roles?: Array<string>,
-  content?: string,
-  unlike?: number | string,
-  like?: number | string,
-  action?:number,
-  action1?:number,
+  // content?: string,
+  // unlike?: number | string,
+  // like?: number | string,
+  // action?:number,
+  // action1?:number,
   setName?(name: string | number)
 }
 // const userData:userInfo={
@@ -40,10 +41,11 @@ class User implements UserInfo {
   roles
   content
   level
+  catchPhrase
   setName(name: string | number) {
     this.name = name
   }
-  constructor({ age, jobType, avatar, name, token, roles, content,level }: UserInfo) {
+  constructor({ age, jobType, avatar, name, token, roles, content,level,catchPhrase }: UserInfo) {
     this.age = age
     this.jobType = jobType
     this.level=level
@@ -52,23 +54,30 @@ class User implements UserInfo {
     this.setName(name)
     this.roles = roles
     this.content = content
+    this.catchPhrase=catchPhrase
   }
 }
 export default User
 
+interface Comment extends UserInfo {
+  content?: string,
+  unlike?: number | string,
+  like?: number | string,
+  action?:number,
+  action1?:number,
+}
 
-
-export class CommentItem extends User {
+export class CommentItem extends User implements Comment {
   like
   unlike
   content
   action
   action1
-  constructor(obj: UserInfo) {
+  constructor({like,unlike,content,...obj}:Comment) {
     super(obj)
-    this.unlike = obj.like
-    this.like = obj.unlike
-    this.content=obj.content
+    this.unlike = like
+    this.like = unlike
+    this.content=content
     this.action=0
     this.action1=0
   }

mock/user.ts

@@ -2,7 +2,7 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-08-04 11:34:38
- * @LastEditTime: 2021-10-26 16:50:38
+ * @LastEditTime: 2021-11-19 15:41:05
  * @LastEditors: Gavin
  */
 import { MockMethod } from 'vite-plugin-mock'
@@ -27,12 +27,13 @@ export const userInfo: AccountList = {
         token: faker.datatype.uuid(),
         getUserInfo() {
             return new User({
-                name: faker.name.findName(),
+                name: faker.name.lastName() + faker.name.firstName(),
                 age: faker.random.number(),
                 jobType: faker.name.jobType(),
                 avatar: faker.image.avatar(),
                 level: "admin",
-                roles: ['admin']
+                roles: ['admin'],
+                catchPhrase: faker.company.catchPhrase()
 
             })
 
@@ -43,14 +44,15 @@ export const userInfo: AccountList = {
         token: faker.datatype.uuid(),
         getUserInfo() {
             return new User({
-                name: faker.name.findName(),
+                name: faker.name.lastName() + faker.name.firstName(),
                 age: faker.random.number(),
                 jobType: faker.name.jobType(),
                 avatar: faker.image.avatar(),
                 level: "user",
                 roles: ['user', "/account"
                     , "/account/center"
-                    , "/account/settings"]
+                    , "/account/settings"],
+                catchPhrase: faker.company.catchPhrase()
 
             })
 

src/components/transition/router-transition.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'RouterTransition',

src/hooks/router/index.ts

@@ -2,7 +2,7 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-08-06 10:00:31
- * @LastEditTime: 2021-10-27 11:03:02
+ * @LastEditTime: 2021-11-19 17:40:12
  * @LastEditors: Gavin
  */
 
@@ -95,7 +95,7 @@ export function filterAsyncRoutes(routes: Array<RouteRecordRaw>=asyncRoutes, rol
                 tmp.children = filterAsyncRoutes(tmp.children, roles,key);
             }
             // 如果有权限当前路由加入数组
-            console.error(tmp);
+            // console.error(tmp);
 
             res.push(tmp);
         }

src/layout/components/Navbar/Navbar.vue

@@ -65,7 +65,7 @@
   </div>
 </template>
 <script lang='ts' setup>
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import {
   GithubOutlined,

src/layout/components/Navbar/components/TagsView.vue

@@ -2,7 +2,7 @@
  * @Description: 标签层机翻勿6^Gavin^
  * @Author: Gavin
  * @Date: 2021-09-01 14:05:34
- * @LastEditTime: 2021-09-03 19:01:30
+ * @LastEditTime: 2021-11-19 17:40:21
  * @LastEditors: Gavin
 -->
 <template>
@@ -35,7 +35,7 @@
 
 import { watch, watchEffect, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { filterChildren as filterAffixTags } from "@/hooks/router"
 
 import {
@@ -85,7 +85,7 @@ const closeOtherLabels = (tag) => {
 
 }
 watch(() => visitedViews.value, () => {
-  console.error(visitedViews.value, "watchEffect");
+  // console.error(visitedViews.value, "watchEffect");
 
   if (visitedViews.value.some(item => {
     return item.name === $route.name

src/layout/components/Settings/Settings.vue

@@ -2,7 +2,7 @@
  * @Description: 配置选项
  * @Author: Gavin
  * @Date: 2021-09-08 17:29:16
- * @LastEditTime: 2021-11-18 14:11:13
+ * @LastEditTime: 2021-11-19 17:40:25
  * @LastEditors: Gavin
 -->
 <template>
@@ -45,7 +45,7 @@ import { useDark, useToggle } from '@vueuse/core'
 import { ref, reactive, watch } from 'vue'
 import type { UnwrapRef } from 'vue'
 import type { FormProp } from '@/components/Form/interface'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { SettingFilled} from '@ant-design/icons-vue'
 
 const visible = ref<boolean>(false)
@@ -57,7 +57,7 @@ const afterVisibleChange = (bool: boolean) => {
 const showDrawer = () => {
   visible.value = true
 }
-console.error($store.state.tagsView.isShow)
+// console.error($store.state.tagsView.isShow)
 interface FormState {
   tabViews: boolean
   color: string

src/layout/components/Sidebar/components/MenuList.vue

@@ -2,7 +2,7 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-08-08 22:07:59
- * @LastEditTime: 2021-11-17 17:13:04
+ * @LastEditTime: 2021-11-19 17:40:28
  * @LastEditors: Gavin
 -->
 
@@ -28,7 +28,7 @@ import { reactive, computed, watch, onMounted} from 'vue'
 
 
 
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { useRouter, useRoute } from 'vue-router'
 import { filterAsyncRoutes as isHidden } from '@/hooks/router'
 import MenuItem from '../components/MenuItem.vue'
@@ -82,7 +82,7 @@ watch(
   () => $route.fullPath,
   () => {
     if ($route.name == 'Login' || props.collapsed) return
-    console.error("OpenKey", getOpenKeys(), $route);
+    // console.error("OpenKey", getOpenKeys(), $route);
     state.openKeys = getOpenKeys()
     state.selectedKeys = [$route.name]
   }

src/layout/components/TagsView/TagsView.vue

@@ -2,7 +2,7 @@
  * @Description: 标签层机翻勿6^Gavin^
  * @Author: Gavin
  * @Date: 2021-09-01 14:05:34
- * @LastEditTime: 2021-10-22 15:32:41
+ * @LastEditTime: 2021-11-19 17:40:32
  * @LastEditors: Gavin
 -->
 <template>
@@ -37,7 +37,7 @@
 
 import { watch, watchEffect, onMounted, computed, unref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { filterChildren as filterAffixTags, filterAsyncRoutes as filterHidden } from "@/hooks/router"
 
 import {
@@ -90,7 +90,7 @@ const closeOtherLabels = (tag) => {
 
 }
 watch(() => visitedViews.value, () => {
-  console.error(visitedViews.value, "watchEffect");
+  // console.error(visitedViews.value, "watchEffect");
 
   if (visitedViews.value.some(item => {
     return item.name === $route.name

src/layout/index.vue

@@ -2,7 +2,7 @@
  * @Description: 主页框架布局
  * @Author: Gavin
  * @Date: 2021-07-31 17:06:32
- * @LastEditTime: 2021-11-04 14:07:43
+ * @LastEditTime: 2021-11-19 18:34:13
  * @LastEditors: Gavin
 -->
 <template>
@@ -50,9 +50,9 @@
         >
           <router-view v-slot="{ Component, route }">
             <transition name="fade" mode="out-in">
-            <keep-alive>
-              <component :is="Component" :key="route.full" />
-            </keep-alive>
+              <keep-alive :key="$route.full">
+                <component :is="Component" :key="$route.full" />
+              </keep-alive>
             </transition>
           </router-view>
         </section>
@@ -74,12 +74,12 @@ import {
 } from '@/layout/components/index'
 import { useRoute } from 'vue-router'
 import { ref, computed, provide, watch } from 'vue'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 //hook
 import { getPointerLocationByElement } from '@/hooks/global/common/index'
 import { useStorage } from '@vueuse/core'
 const collapsed = ref<boolean>(false)
-// const $route = useRoute()
+const $route = useRoute()
 const $store = useStore()
 const pointerLocation = getPointerLocationByElement()
 const offsetWidth = document.body.offsetWidth
@@ -88,6 +88,8 @@ const op = computed(() => {
   return offsetWidth - pointerLocation.x > offsetWidth * 0.08 ? 0 : 1
 })
 const storage = useStorage<boolean>('storg', true, sessionStorage)
+ 
+ 
 
 </script>
 <style lang="scss" scope>

src/router/permission.ts

@@ -2,7 +2,7 @@
  * @Description: 路由守卫
  * @Author: Gavin
  * @Date: 2021-07-21 09:53:05
- * @LastEditTime: 2021-11-10 15:35:50
+ * @LastEditTime: 2021-11-19 17:40:36
  * @LastEditors: Gavin
  */
 import { isNavigationFailure, Router, RouteRecordRaw, RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
@@ -90,7 +90,7 @@ export function createGuardHook(router: Router): void {
   router.afterEach((to: RouteLocationNormalized, from: RouteLocationNormalized) => {
     const htmlTitle = useTitle()
     htmlTitle.value = to.meta.title as string
-    console.error("导航完成", to);
+    // console.error("导航完成", to);
 
     NProgress.done()
   })

src/store/getters.ts

@@ -2,18 +2,17 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-07-20 16:33:10
- * @LastEditTime: 2021-09-17 18:42:56
+ * @LastEditTime: 2021-11-19 15:59:46
  * @LastEditors: Gavin
  */
 
 
+
 const getters = {
   sidebar: (state:any)=> state.app.name,
   userInfo:(state:any)=> state.user,
   visitedViews:(state:any)=>state.tagsView.visitedViews,
   themeBackgroundColor:(state:any)=>state.theme.themeBackgroundColor,
   isNavShow:(state:any)=>state.tagsView.isShow,
-  
-
 }
 export default getters