fix issue and add some func

Author: jzfai

README.md

@@ -12,11 +12,16 @@ Use eslint+prettier+gitHooks format and verification code to improve code standa
 ## Update log
 
 ```javascript
-//10-14
-add permission of role and code
 //11-11
 update element-plus vite2 vue3 version ,add func of element-svg icon for side menu
 add domo of 'import export download template' in CRUD
+//11-26
+update vue3 version and so on;
+add keep-alive use demo and router using  demo ，look for "http://8.135.1.141/vue3-admin-template/#/writing-demo/keep-alive"
+add the param cachePage and leaveRmCachePage to route for keep-alive look for https://github.com/jzfai/vue3-admin-template/blob/master/src/router/index.js
+add collection  the error log of img loading fail look for "http://8.135.1.141/vue3-admin-template/#/error-log/log"
+in router page you need add root element,such as div, but is not necessary for children component
+fix some issue
 ```
 
 ## Online experience

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue3-admin-template",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "license": "ISC",
     "author": "kuanghua([email protected])",
     "scripts": {
@@ -24,7 +24,7 @@
         "path": "^0.12.7",
         "path-to-regexp": "^6.2.0",
         "tinymce": "^4.9.11",
-        "vue": "3.2.21",
+        "vue": "3.2.23",
         "vue-router": "4.0.12",
         "vuex": "4.0.2"
     },
@@ -44,10 +44,10 @@
         "@types/vuedraggable": "^2.24.0",
         "@typescript-eslint/eslint-plugin": "^4.22.0",
         "@typescript-eslint/parser": "^4.22.0",
-        "@vitejs/plugin-legacy": "^1.6.2",
-        "@vitejs/plugin-vue": "^1.9.4",
-        "@vitejs/plugin-vue-jsx": "^1.2.0",
-        "@vue/compiler-sfc": "^3.2.21",
+        "@vitejs/plugin-legacy": "^1.6.3",
+        "@vitejs/plugin-vue": "^1.10.1",
+        "@vitejs/plugin-vue-jsx": "^1.3.0",
+        "@vue/compiler-sfc": "^3.2.23",
         "@vue/eslint-config-prettier": "^6.0.0",
         "@vue/eslint-config-typescript": "^5.0.2",
         "babel-eslint": "^10.1.0",

src/hooks/errorLogHook.js

@@ -2,6 +2,24 @@
 import request from '@/utils/axiosReq'
 import setting from '@/settings'
 import bus from '@/utils/bus'
+import pack from '../../package.json'
+let errorLogReq = (errLog) => {
+  request({
+    url: '/ty-user/errorCollection/insert',
+    data: {
+      pageUrl: window.location.href,
+      errorLog: errLog,
+      browserType: navigator.userAgent,
+      version: pack.version
+    },
+    method: 'post',
+    bfLoading: false,
+    isAlertErrorMsg: true
+  }).then(() => {
+    bus.emit('reloadErrorPage', {})
+  })
+}
+
 export default function (app) {
   //type judge
   // base type  using 'type of'
@@ -19,20 +37,21 @@ export default function (app) {
     return false
   }
   if (checkNeed()) {
+    //error log white
+    let whiteList = ['cancel']
+    //add img load error log listen
+    document.addEventListener(
+      'error',
+      (err) => {
+        let errLog = `${JSON.stringify(err.target.outerHTML)}`
+        errorLogReq(errLog)
+      },
+      true
+    )
     app.config.errorHandler = (err) => {
-      request({
-        url: '/ty-user/errorCollection/insert',
-        data: {
-          pageUrl: window.location.href,
-          errorLog: `${err.message}---${err.stack.substr(0, 300)}`,
-          browserType: navigator.userAgent
-        },
-        method: 'post',
-        bfLoading: false,
-        isAlertErrorMsg: true
-      }).then(() => {
-        bus.emit('reloadErrorPage', { a: 111 })
-      })
+      if (whiteList.includes(err)) return
+      let errLog = `${err.message}---${err.stack.substr(0, 300)}`
+      errorLogReq(errLog)
     }
   }
 }

src/layout/Layout.vue

@@ -38,9 +38,6 @@ ResizeHook()
 </script>
 
 <style lang="scss" scoped>
-.layout-wrapper {
-  overflow: hidden;
-}
 .main-container {
   min-height: 100%;
   transition: margin-left 0.28s;

src/layout/components/AppMain.vue

@@ -1,43 +1,54 @@
 <template>
-  <router-view v-slot="{ Component }">
-    <transition name="fade-transform" mode="out-in">
-      <div class="app-main" :class="{ 'show-tag-view': setting.showTagsView }" :key="key">
+  <div class="app-main" :class="{ 'show-tag-view': setting.showTagsView }">
+    <router-view v-slot="{ Component }">
+      <transition name="fade-transform" mode="out-in">
         <keep-alive :include="cachedViews">
           <component :is="Component" :key="key" />
         </keep-alive>
-      </div>
-    </transition>
-  </router-view>
+      </transition>
+    </router-view>
+  </div>
 </template>
 
 <script setup>
 import setting from '@/settings'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
+let store = useStore()
+let route = useRoute()
 
-const key = computed(() => {
-  return useRoute().path
+// cachePage: is true, keep-alive this Page
+// leaveRmCachePage: is true, keep-alive remote when page leave
+let oldRoute = null
+const key = computed({
+  get() {
+    if (oldRoute?.name) {
+      if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
+        store.commit('app/M_DEL_CACHED_VIEW', oldRoute.name)
+      }
+    }
+    if (route.name) {
+      if (route.meta?.cachePage) {
+        store.commit('app/M_ADD_CACHED_VIEW', route.name)
+      }
+    }
+    oldRoute = JSON.parse(JSON.stringify({ name: route.name, meta: route.meta }))
+    return route.path
+  }
 })
-let store = useStore()
+
 const cachedViews = computed(() => {
-  //TagsView is open: open using cachedViews of TagsView, otherwise using app
-  if (setting.showTagsView) {
-    return store.state.app.cachedViews
-  } else {
-    return store.state.app.cachedViews
-  }
+  return store.state.app.cachedViews
 })
 </script>
 
 <style scoped lang="scss">
 .app-main {
-  padding: 10px;
+  padding: $appMainPadding;
   /*50 = navbar  */
-  height: calc(100vh - #{$navBarHeight});
-  width: 100%;
   position: relative;
-  overflow: auto;
+  overflow: hidden;
 }
 .show-tag-view {
   height: calc(100vh - #{$navBarHeight} - #{$tagViewHeight}) !important;

src/layout/components/Breadcrumb/index.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { onMounted, onBeforeMount, getCurrentInstance, watch, ref } from 'vue'
+import { onBeforeMount, getCurrentInstance, watch, ref } from 'vue'
 import { compile } from 'path-to-regexp'
 let levelList = ref(null)
 let { proxy } = getCurrentInstance()
@@ -54,9 +54,6 @@ watch(
   },
   { immediate: true }
 )
-onMounted(() => {
-  console.log(proxy.$route)
-})
 onBeforeMount(() => {
   getBreadcrumb()
 })

src/layout/components/Sidebar/Item.jsx

@@ -29,7 +29,6 @@ export default defineComponent({
         // view https://element-plus.org/zh-CN/component/icon.html
         return <ElSvgItem elSvgName={props.meta.elSvgIcon} />
       } else if (props.meta?.icon) {
-        console.log('我进入渲染了')
         return <svg-icon icon-class={props.meta?.icon} className="nav-icon" />
       }
     }

src/layout/components/Sidebar/Link.vue

@@ -6,9 +6,9 @@
 
 <script setup>
 import { isExternal } from '@/utils/validate'
-import { onMounted, computed, getCurrentInstance, reactive } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
 let { proxy } = getCurrentInstance()
-const props = defineProps({
+defineProps({
   to: {
     type: String,
     required: true
@@ -35,13 +35,6 @@ const linkProps = (to) => {
     to: to
   }
 }
-const state = reactive({
-  levelList: null
-})
-onMounted(() => {
-  console.log(state.levelList)
-  console.log(props.to)
-})
 </script>
 
 <style scoped lang="scss"></style>

src/layout/components/Sidebar/Sidebar.vue

@@ -10,9 +10,9 @@
         :collapse="!isCollapse"
         :unique-opened="false"
         :collapse-transition="false"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :active-text-color="variables.menuActiveText"
+        :background-color="scssJson.menuBg"
+        :text-color="scssJson.menuText"
+        :active-text-color="scssJson.menuActiveText"
         mode="vertical"
       >
         <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
@@ -37,21 +37,42 @@ let routes = computed(() => {
 const isCollapse = computed(() => {
   return store.state.app.sidebar.opened
 })
-const variables = computed(() => {
-  // let data = JSON.parse(scssVariables.replace(/:export\s*/, ''))
-  // console.log('scssVariables')
-  // console.log(typeof data)
-  return {
-    menuText: '#bfcbd9',
-    menuActiveText: '#409EFF',
-    subMenuActiveText: '#f4f4f5',
-    menuBg: '#304156',
-    menuHover: '#263445',
-    subMenuBg: '#1f2d3d',
-    subMenuHover: '#001528',
-    sideBarWidth: '210px'
-  }
-})
+
+//change  scss variable to js
+const dillScssExportToJson = (scssExportJson) => {
+  let jsonString = scssExportJson.replace(/:export\s*/, '').replace(/[\s+\r\n]/g, '')
+  let scssJson = {}
+  jsonString
+    .slice(1, jsonString.length - 2)
+    .split(';')
+    .forEach((fItem) => {
+      let arr = fItem.split(':')
+      scssJson[arr[0]] = arr[1]
+    })
+  return scssJson
+}
+
+//get scss variable
+import scssExportJson from '@/styles/variables-to-js.scss'
+let scssJson = dillScssExportToJson(scssExportJson)
+// onMounted(() => {
+//   // console.log('scssExportJson', scssExportJson)
+// })
+// const variables = computed(() => {
+//   // let data = JSON.parse(scssExportJson.replace(/:export\s*/, ''))
+//   // console.log('scssExportJson')
+//   // console.log(typeof data)
+//   return {
+//     menuText: '#bfcbd9',
+//     menuActiveText: '#409EFF',
+//     subMenuActiveText: '#f4f4f5',
+//     menuBg: '#304156',
+//     menuHover: '#263445',
+//     subMenuBg: '#1f2d3d',
+//     subMenuHover: '#001528',
+//     sideBarWidth: '210px'
+//   }
+// })
 const activeMenu = computed(() => {
   const { meta, fullPath } = route
   // if set path, the sidebar will highlight the path you set

src/layout/components/Sidebar/SidebarItem.vue

@@ -26,7 +26,7 @@
 
 <script setup>
 /*初始化参数比如引入组件，proxy,state等*/
-import { getCurrentInstance, onMounted } from 'vue'
+import { getCurrentInstance } from 'vue'
 import Link from './Link'
 import Item from './Item.jsx'
 import { isExternal } from '@/utils/validate'
@@ -49,10 +49,6 @@ defineProps({
     default: ''
   }
 })
-onMounted(() => {
-  // console.log("我挂载了");
-  // console.log(proxy.item);
-})
 //显示sidebarItem 的情况
 proxy.onlyOneChild = null
 let showSidebarItem = (children = [], parent) => {
@@ -84,17 +80,3 @@ let resolvePath = (routePath) => {
   return path.resolve(proxy.basePath, routePath)
 }
 </script>
-
-<style lang="scss">
-// menu hover
-/* .submenu-title-noDropdown,
-  .el-submenu__title {
-    &:hover {
-      background-color: $menuHover !important;
-    }
-  }
-
-  .is-active>.el-submenu__title {
-    color: $subMenuActiveText !important;
-  }*/
-</style>