perf: 添加组件缓存

This commit is contained in:
ibuler 2024-05-14 16:29:08 +08:00
parent 2e961e7875
commit cea843bcbc
20 changed files with 83 additions and 72 deletions

View File

@ -73,7 +73,6 @@ export default {
},
methods: {
handleMoveMouseDown(event) {
console.log('Event: ', event)
this.$refs.drawer.handleHeaderMoveDown(event)
},
handleMouseMoveUp(event) {

View File

@ -106,7 +106,7 @@ export default {
const generator = new FormFieldGenerator(this.$emit)
this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
this.groups = generator.groups
this.$log.debug('Total fields: ', JSON.stringify(this.totalFields))
this.$log.debug('Total fields: ', this.totalFields)
},
_cleanFormValue(form, remoteMeta) {
if (!form) {

View File

@ -28,7 +28,6 @@ export default {
},
computed: {
iUnit() {
console.log('Unit is:', this.unit)
return this.displayMapper[this.unit] || this.unit
}
}

View File

@ -165,6 +165,11 @@ export default {
deep: true
}
},
activated() {
setTimeout(() => {
this.reloadTable()
})
},
methods: {
handleSelectionChange(val) {
this.selectedRows = val

View File

@ -438,6 +438,7 @@ div.rMenu li {
padding: 3px 20px;
clear: both;
white-space: nowrap;
width: 20px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

View File

@ -1,7 +1,7 @@
<template>
<section class="app-main">
<transition mode="out-in" name="fade-transform">
<keep-alive :include="cachedViews">
<keep-alive :max="10">
<router-view :key="key" />
</keep-alive>
</transition>
@ -22,9 +22,6 @@ export default {
...mapGetters([
'publicSettings'
]),
chatAiEnabled() {
return this.publicSettings?.CHAT_AI_ENABLED
},
key() {
return this.$route.path
},
@ -33,7 +30,6 @@ export default {
}
},
methods: {
}
}
</script>

View File

@ -206,10 +206,9 @@ export default {
default(res, method, vm, addContinue) {
const route = this.getNextRoute(res, method)
if (!(route.params && route.params.id)) {
route['params'] = deepmerge(route['params'] || {}, { 'id': res.id, order: this.extraQueryOrder })
} else {
route['params'] = deepmerge(route['params'], { order: this.extraQueryOrder })
route['params'] = deepmerge(route['params'] || {}, { 'id': res.id })
}
route['query'] = deepmerge(route['query'], { 'order': this.extraQueryOrder, 'updated': new Date().getTime() })
this.$emit('submitSuccess', res)
this.emitPerformSuccessMsg(method, res, addContinue)

View File

@ -13,6 +13,7 @@ export default {
components: {
Page, GenericListTable
},
methods: {
reloadTable() {
this.$refs.ListTable.reloadTable()

View File

@ -128,7 +128,7 @@ export default {
::v-deep .el-submenu .el-submenu__title {
height: 40px;
line-height: 40px;
line-height: 32px;
border-bottom: none;
}
@ -142,8 +142,9 @@ export default {
}
.el-menu-item {
height: 40px;
line-height: 36px;
height: 36px;
width: 160px;
line-height: 26px;
padding: 4px 24px;
&:hover {
@ -192,7 +193,6 @@ export default {
.el-menu-item {
&.is-active {
font-weight: bold;
color: var(--menu-text-active);
&:before {

View File

@ -1,7 +1,16 @@
<template>
<div class="page">
<TagsView :show.sync="showHistory" />
<PageHeading v-if="iTitle || helpMessage" :help-msg="helpMessage" class="disabled-when-print">
<el-button :disabled="gobackDisabled" class="go-back" icon="el-icon-back" @click="handleGoBack" />
<el-button
:disabled="gobackDisabled"
class="go-back"
icon="el-icon-back"
@click="handleGoBack"
@mouseleave="endLongPress"
@mouseup="endLongPress"
@mousedown.native="startLongPress"
/>
<slot name="title">
<span style="padding-left: 10px">
{{ iTitle }}
@ -33,6 +42,7 @@
import PageHeading from './PageHeading'
import PageContent from './PageContent'
import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
import TagsView from '../TagsView/index.vue'
import { toSentenceCase } from '@/utils/common'
export default {
@ -40,7 +50,8 @@ export default {
components: {
UserConfirmDialog,
PageHeading,
PageContent
PageContent,
TagsView
},
props: {
title: {
@ -62,6 +73,11 @@ export default {
}
}
},
data() {
return {
showHistory: false
}
},
computed: {
iTitle() {
let title = this.title || this.$route.meta.title
@ -81,6 +97,15 @@ export default {
methods: {
handleGoBack() {
this.goBack.bind(this)()
},
startLongPress() {
this.longPressTimer = setTimeout(() => {
this.showHistory = !this.showHistory
//
}, 1000) //
},
endLongPress() {
clearTimeout(this.longPressTimer)
}
}
}

View File

@ -10,7 +10,6 @@
</template>
<script>
const tagAndTagSpacing = 4 // tagAndTagSpacing
export default {
name: 'ScrollPane',
data() {
@ -29,43 +28,7 @@ export default {
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
},
moveToTarget(currentTag) {
const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = this.scrollWrapper
const tagList = this.$parent.$refs.tag
let firstTag = null
let lastTag = null
// find first tag and last tag
if (tagList.length > 0) {
firstTag = tagList[0]
lastTag = tagList[tagList.length - 1]
}
if (firstTag === currentTag) {
$scrollWrapper.scrollLeft = 0
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft =
$scrollWrapper.scrollWidth - $containerWidth
} else {
// find preTag and nextTag
const currentIndex = tagList.findIndex(item => item === currentTag)
const prevTag = tagList[currentIndex - 1]
const nextTag = tagList[currentIndex + 1]
// the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft =
nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
// the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft =
prevTag.$el.offsetLeft - tagAndTagSpacing
if (
afterNextTagOffsetLeft >
$scrollWrapper.scrollLeft + $containerWidth
) {
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
}
}
moveToTarget() {
}
}
}

View File

@ -1,14 +1,14 @@
<template>
<div id="tags-view-container" class="tags-view-container">
<el-alert v-show="show" id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper">
<router-link
v-for="tag in visitedViews"
ref="tag"
:key="tag.path"
:class="isActive(tag)?'active':''"
ref="tag"
:class="isActive(tag) ? 'active' : '' "
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span"
class="tags-view-item"
tag="span"
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)"
>
@ -26,14 +26,21 @@
<li @click="closeOthersTags">Close Others</li>
<li @click="closeAllTags(selectedTag)">Close All</li>
</ul>
</div>
</el-alert>
</template>
<script>
import ScrollPane from './ScrollPane'
import path from 'path'
export default {
components: { ScrollPane },
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {
visible: false,
@ -52,7 +59,7 @@ export default {
}
},
watch: {
$route() {
$route(iNew, iOld) {
this.addTags()
this.moveToCurrentTag()
},
@ -202,12 +209,14 @@ export default {
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.tags-view-container {
background-color: #f3f3f4 !important;
border: none !important;
height: 34px;
width: 100%;
margin-top: 5px;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
margin-top: 2px !important;
margin-bottom: 2px !important;
padding: 0;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;

View File

@ -3,6 +3,8 @@ const state = {
cachedViews: []
}
const maxCacheViews = 10
const mutations = {
ADD_VISITED_VIEW: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return
@ -11,12 +13,18 @@ const mutations = {
title: view.meta.title || 'no-name'
})
)
if (state.visitedViews?.length > maxCacheViews) {
state.visitedViews.shift()
}
},
ADD_CACHED_VIEW: (state, view) => {
if (state.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
}
if (state.cachedViews.length > maxCacheViews) {
state.cachedViews.shift()
}
},
DEL_VISITED_VIEW: (state, view) => {

View File

@ -71,7 +71,6 @@ const mutations = {
state.consoleOrgs = state.consoleOrgs.filter(i => i.id !== org.id)
},
SET_CURRENT_ORG(state, org) {
console.log('Set current org: ', org)
// 系统组织和全局组织不设置成 Pre org
if (!state.currentOrg?.autoEnter) {
state.preOrg = state.currentOrg

View File

@ -511,3 +511,7 @@ $tooltip-arrow-color: #c2d1e1;
.el-upload--text {
font-size: 0.9em;
}
li.rmenu i.fa {
width: 20px;
}

View File

@ -60,7 +60,6 @@ website: http://code.google.com/p/jquerytree/
*border: 0px;
}
.ztree li a:hover {
background: #e7f4f9;
border-radius: 2px;
box-shadow: inset 0 0 1px #cccccc;
}

View File

@ -33,7 +33,6 @@ export function saveCurrentRoleLocal(username, role) {
export function getCurrentOrgLocal(username) {
const key = CURRENT_ORG_KEY + '_' + username
const value = localStorage.getItem(key)
console.log('Local org: ', value)
try {
return JSON.parse(value)
} catch (e) {

View File

@ -12,9 +12,7 @@ function getPropOrg() {
if (defaultOrg) {
return defaultOrg
}
console.log('Orgs: ', orgs)
const org = orgs.filter(item => !item['is_root'] && item.id !== SYSTEM_ORG_ID)[0]
console.log('Prop org: ', org)
return orgs.filter(item => !item['is_root'] && item.id !== SYSTEM_ORG_ID)[0]
}
async function change2PropOrg() {

View File

@ -306,6 +306,14 @@ export default {
watch: {
optionInfo(iNew) {
this.$set(this.defaultConfig.columnsMeta.gathered_info.formatterArgs, 'info', iNew)
},
$route(iNew, old) {
const tab = iNew.query.tab
const oldTab = old.query.tab
if (tab !== oldTab && tab !== 'all') {
iNew.query.node_id = ''
this.$router.push(iNew)
}
}
},
methods: {

View File

@ -142,7 +142,6 @@ export default {
this.headerActions.moreCreates.dropdown = this.$store.state.assets.assetCategoriesDropdown.filter(item => {
return item.category === this.tab.activeMenu
})
console.log('Category: ', this.headerActions.moreCreates.dropdown)
},
async setCategoriesTab() {
const categoryIcon = {