Skip to content

Commit a96a81d

Browse files
committed
fix issue and add some func
1 parent ed8795d commit a96a81d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+622
-487
lines changed

README.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,16 @@ Use eslint+prettier+gitHooks format and verification code to improve code standa
1212
## Update log
1313

1414
```javascript
15-
//10-14
16-
add permission of role and code
1715
//11-11
1816
update element-plus vite2 vue3 version ,add func of element-svg icon for side menu
1917
add domo of 'import export download template' in CRUD
18+
//11-26
19+
update vue3 version and so on;
20+
add keep-alive use demo and router using demo ,look for "http://8.135.1.141/vue3-admin-template/#/writing-demo/keep-alive"
21+
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
22+
add collection the error log of img loading fail look for "http://8.135.1.141/vue3-admin-template/#/error-log/log"
23+
in router page you need add root element,such as div, but is not necessary for children component
24+
fix some issue
2025
```
2126

2227
## Online experience

package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-admin-template",
3-
"version": "1.2.2",
3+
"version": "1.2.3",
44
"license": "ISC",
55
"author": "kuanghua([email protected])",
66
"scripts": {
@@ -24,7 +24,7 @@
2424
"path": "^0.12.7",
2525
"path-to-regexp": "^6.2.0",
2626
"tinymce": "^4.9.11",
27-
"vue": "3.2.21",
27+
"vue": "3.2.23",
2828
"vue-router": "4.0.12",
2929
"vuex": "4.0.2"
3030
},
@@ -44,10 +44,10 @@
4444
"@types/vuedraggable": "^2.24.0",
4545
"@typescript-eslint/eslint-plugin": "^4.22.0",
4646
"@typescript-eslint/parser": "^4.22.0",
47-
"@vitejs/plugin-legacy": "^1.6.2",
48-
"@vitejs/plugin-vue": "^1.9.4",
49-
"@vitejs/plugin-vue-jsx": "^1.2.0",
50-
"@vue/compiler-sfc": "^3.2.21",
47+
"@vitejs/plugin-legacy": "^1.6.3",
48+
"@vitejs/plugin-vue": "^1.10.1",
49+
"@vitejs/plugin-vue-jsx": "^1.3.0",
50+
"@vue/compiler-sfc": "^3.2.23",
5151
"@vue/eslint-config-prettier": "^6.0.0",
5252
"@vue/eslint-config-typescript": "^5.0.2",
5353
"babel-eslint": "^10.1.0",

src/hooks/errorLogHook.js

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,24 @@
22
import request from '@/utils/axiosReq'
33
import setting from '@/settings'
44
import bus from '@/utils/bus'
5+
import pack from '../../package.json'
6+
let errorLogReq = (errLog) => {
7+
request({
8+
url: '/ty-user/errorCollection/insert',
9+
data: {
10+
pageUrl: window.location.href,
11+
errorLog: errLog,
12+
browserType: navigator.userAgent,
13+
version: pack.version
14+
},
15+
method: 'post',
16+
bfLoading: false,
17+
isAlertErrorMsg: true
18+
}).then(() => {
19+
bus.emit('reloadErrorPage', {})
20+
})
21+
}
22+
523
export default function (app) {
624
//type judge
725
// base type using 'type of'
@@ -19,20 +37,21 @@ export default function (app) {
1937
return false
2038
}
2139
if (checkNeed()) {
40+
//error log white
41+
let whiteList = ['cancel']
42+
//add img load error log listen
43+
document.addEventListener(
44+
'error',
45+
(err) => {
46+
let errLog = `${JSON.stringify(err.target.outerHTML)}`
47+
errorLogReq(errLog)
48+
},
49+
true
50+
)
2251
app.config.errorHandler = (err) => {
23-
request({
24-
url: '/ty-user/errorCollection/insert',
25-
data: {
26-
pageUrl: window.location.href,
27-
errorLog: `${err.message}---${err.stack.substr(0, 300)}`,
28-
browserType: navigator.userAgent
29-
},
30-
method: 'post',
31-
bfLoading: false,
32-
isAlertErrorMsg: true
33-
}).then(() => {
34-
bus.emit('reloadErrorPage', { a: 111 })
35-
})
52+
if (whiteList.includes(err)) return
53+
let errLog = `${err.message}---${err.stack.substr(0, 300)}`
54+
errorLogReq(errLog)
3655
}
3756
}
3857
}

src/layout/Layout.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,6 @@ ResizeHook()
3838
</script>
3939

4040
<style lang="scss" scoped>
41-
.layout-wrapper {
42-
overflow: hidden;
43-
}
4441
.main-container {
4542
min-height: 100%;
4643
transition: margin-left 0.28s;

src/layout/components/AppMain.vue

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,54 @@
11
<template>
2-
<router-view v-slot="{ Component }">
3-
<transition name="fade-transform" mode="out-in">
4-
<div class="app-main" :class="{ 'show-tag-view': setting.showTagsView }" :key="key">
2+
<div class="app-main" :class="{ 'show-tag-view': setting.showTagsView }">
3+
<router-view v-slot="{ Component }">
4+
<transition name="fade-transform" mode="out-in">
55
<keep-alive :include="cachedViews">
66
<component :is="Component" :key="key" />
77
</keep-alive>
8-
</div>
9-
</transition>
10-
</router-view>
8+
</transition>
9+
</router-view>
10+
</div>
1111
</template>
1212

1313
<script setup>
1414
import setting from '@/settings'
1515
import { computed } from 'vue'
1616
import { useRoute } from 'vue-router'
1717
import { useStore } from 'vuex'
18+
let store = useStore()
19+
let route = useRoute()
1820
19-
const key = computed(() => {
20-
return useRoute().path
21+
// cachePage: is true, keep-alive this Page
22+
// leaveRmCachePage: is true, keep-alive remote when page leave
23+
let oldRoute = null
24+
const key = computed({
25+
get() {
26+
if (oldRoute?.name) {
27+
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
28+
store.commit('app/M_DEL_CACHED_VIEW', oldRoute.name)
29+
}
30+
}
31+
if (route.name) {
32+
if (route.meta?.cachePage) {
33+
store.commit('app/M_ADD_CACHED_VIEW', route.name)
34+
}
35+
}
36+
oldRoute = JSON.parse(JSON.stringify({ name: route.name, meta: route.meta }))
37+
return route.path
38+
}
2139
})
22-
let store = useStore()
40+
2341
const cachedViews = computed(() => {
24-
//TagsView is open: open using cachedViews of TagsView, otherwise using app
25-
if (setting.showTagsView) {
26-
return store.state.app.cachedViews
27-
} else {
28-
return store.state.app.cachedViews
29-
}
42+
return store.state.app.cachedViews
3043
})
3144
</script>
3245
3346
<style scoped lang="scss">
3447
.app-main {
35-
padding: 10px;
48+
padding: $appMainPadding;
3649
/*50 = navbar */
37-
height: calc(100vh - #{$navBarHeight});
38-
width: 100%;
3950
position: relative;
40-
overflow: auto;
51+
overflow: hidden;
4152
}
4253
.show-tag-view {
4354
height: calc(100vh - #{$navBarHeight} - #{$tagViewHeight}) !important;

src/layout/components/Breadcrumb/index.vue

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</template>
1313

1414
<script setup>
15-
import { onMounted, onBeforeMount, getCurrentInstance, watch, ref } from 'vue'
15+
import { onBeforeMount, getCurrentInstance, watch, ref } from 'vue'
1616
import { compile } from 'path-to-regexp'
1717
let levelList = ref(null)
1818
let { proxy } = getCurrentInstance()
@@ -54,9 +54,6 @@ watch(
5454
},
5555
{ immediate: true }
5656
)
57-
onMounted(() => {
58-
console.log(proxy.$route)
59-
})
6057
onBeforeMount(() => {
6158
getBreadcrumb()
6259
})

src/layout/components/Sidebar/Item.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default defineComponent({
2929
// view https://element-plus.org/zh-CN/component/icon.html
3030
return <ElSvgItem elSvgName={props.meta.elSvgIcon} />
3131
} else if (props.meta?.icon) {
32-
console.log('我进入渲染了')
3332
return <svg-icon icon-class={props.meta?.icon} className="nav-icon" />
3433
}
3534
}

src/layout/components/Sidebar/Link.vue

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66

77
<script setup>
88
import { isExternal } from '@/utils/validate'
9-
import { onMounted, computed, getCurrentInstance, reactive } from 'vue'
9+
import { computed, getCurrentInstance } from 'vue'
1010
let { proxy } = getCurrentInstance()
11-
const props = defineProps({
11+
defineProps({
1212
to: {
1313
type: String,
1414
required: true
@@ -35,13 +35,6 @@ const linkProps = (to) => {
3535
to: to
3636
}
3737
}
38-
const state = reactive({
39-
levelList: null
40-
})
41-
onMounted(() => {
42-
console.log(state.levelList)
43-
console.log(props.to)
44-
})
4538
</script>
4639

4740
<style scoped lang="scss"></style>

src/layout/components/Sidebar/Sidebar.vue

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
:collapse="!isCollapse"
1111
:unique-opened="false"
1212
:collapse-transition="false"
13-
:background-color="variables.menuBg"
14-
:text-color="variables.menuText"
15-
:active-text-color="variables.menuActiveText"
13+
:background-color="scssJson.menuBg"
14+
:text-color="scssJson.menuText"
15+
:active-text-color="scssJson.menuActiveText"
1616
mode="vertical"
1717
>
1818
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
@@ -37,21 +37,42 @@ let routes = computed(() => {
3737
const isCollapse = computed(() => {
3838
return store.state.app.sidebar.opened
3939
})
40-
const variables = computed(() => {
41-
// let data = JSON.parse(scssVariables.replace(/:export\s*/, ''))
42-
// console.log('scssVariables')
43-
// console.log(typeof data)
44-
return {
45-
menuText: '#bfcbd9',
46-
menuActiveText: '#409EFF',
47-
subMenuActiveText: '#f4f4f5',
48-
menuBg: '#304156',
49-
menuHover: '#263445',
50-
subMenuBg: '#1f2d3d',
51-
subMenuHover: '#001528',
52-
sideBarWidth: '210px'
53-
}
54-
})
40+
41+
//change scss variable to js
42+
const dillScssExportToJson = (scssExportJson) => {
43+
let jsonString = scssExportJson.replace(/:export\s*/, '').replace(/[\s+\r\n]/g, '')
44+
let scssJson = {}
45+
jsonString
46+
.slice(1, jsonString.length - 2)
47+
.split(';')
48+
.forEach((fItem) => {
49+
let arr = fItem.split(':')
50+
scssJson[arr[0]] = arr[1]
51+
})
52+
return scssJson
53+
}
54+
55+
//get scss variable
56+
import scssExportJson from '@/styles/variables-to-js.scss'
57+
let scssJson = dillScssExportToJson(scssExportJson)
58+
// onMounted(() => {
59+
// // console.log('scssExportJson', scssExportJson)
60+
// })
61+
// const variables = computed(() => {
62+
// // let data = JSON.parse(scssExportJson.replace(/:export\s*/, ''))
63+
// // console.log('scssExportJson')
64+
// // console.log(typeof data)
65+
// return {
66+
// menuText: '#bfcbd9',
67+
// menuActiveText: '#409EFF',
68+
// subMenuActiveText: '#f4f4f5',
69+
// menuBg: '#304156',
70+
// menuHover: '#263445',
71+
// subMenuBg: '#1f2d3d',
72+
// subMenuHover: '#001528',
73+
// sideBarWidth: '210px'
74+
// }
75+
// })
5576
const activeMenu = computed(() => {
5677
const { meta, fullPath } = route
5778
// if set path, the sidebar will highlight the path you set

src/layout/components/Sidebar/SidebarItem.vue

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
<script setup>
2828
/*初始化参数比如引入组件,proxy,state等*/
29-
import { getCurrentInstance, onMounted } from 'vue'
29+
import { getCurrentInstance } from 'vue'
3030
import Link from './Link'
3131
import Item from './Item.jsx'
3232
import { isExternal } from '@/utils/validate'
@@ -49,10 +49,6 @@ defineProps({
4949
default: ''
5050
}
5151
})
52-
onMounted(() => {
53-
// console.log("我挂载了");
54-
// console.log(proxy.item);
55-
})
5652
//显示sidebarItem 的情况
5753
proxy.onlyOneChild = null
5854
let showSidebarItem = (children = [], parent) => {
@@ -84,17 +80,3 @@ let resolvePath = (routePath) => {
8480
return path.resolve(proxy.basePath, routePath)
8581
}
8682
</script>
87-
88-
<style lang="scss">
89-
// menu hover
90-
/* .submenu-title-noDropdown,
91-
.el-submenu__title {
92-
&:hover {
93-
background-color: $menuHover !important;
94-
}
95-
}
96-
97-
.is-active>.el-submenu__title {
98-
color: $subMenuActiveText !important;
99-
}*/
100-
</style>

0 commit comments

Comments
 (0)