fix some issue and add func

Author: jzfai

README-zh_CN.md

@@ -10,8 +10,13 @@
 
 ## 更新日志
 ```javascript
-//11-01
-add demo of electron
+//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
 ```
 ## 线上体验(下载安装包并安装体验)
 github 地址：  https://github.com/jzfai/vue3-admin-electron.git

README.md

@@ -12,8 +12,13 @@ Use eslint+prettier+gitHooks format and verification code to improve code standa
 ## Update log
 
 ```javascript
-//11-01
-add demo of electron
+//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(Download the installation package, unzip and install the experience)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue3-admin-electron",
-    "version": "1.2.1",
+    "version": "1.2.3",
     "author": "kuanghua(869653722@qq.com)",
     "scripts": {
         "dev": "vite --mode serve-dev --host",

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
@@ -71,6 +92,7 @@ const activeMenu = computed(() => {
     padding-bottom: 8vh;
   }
 }
+
 .el-menu-vertical {
   width: $sideBarWidth;
 }