mirror of
https://github.com/jumpserver/lina.git
synced 2025-08-01 23:18:17 +00:00
perf: 添加组件缓存
This commit is contained in:
parent
2e961e7875
commit
cea843bcbc
@ -73,7 +73,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
handleMoveMouseDown(event) {
|
||||
console.log('Event: ', event)
|
||||
this.$refs.drawer.handleHeaderMoveDown(event)
|
||||
},
|
||||
handleMouseMoveUp(event) {
|
||||
|
@ -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) {
|
||||
|
@ -28,7 +28,6 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
iUnit() {
|
||||
console.log('Unit is:', this.unit)
|
||||
return this.displayMapper[this.unit] || this.unit
|
||||
}
|
||||
}
|
||||
|
@ -165,6 +165,11 @@ export default {
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
setTimeout(() => {
|
||||
this.reloadTable()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(val) {
|
||||
this.selectedRows = val
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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)
|
||||
|
@ -13,6 +13,7 @@ export default {
|
||||
components: {
|
||||
Page, GenericListTable
|
||||
},
|
||||
|
||||
methods: {
|
||||
reloadTable() {
|
||||
this.$refs.ListTable.reloadTable()
|
||||
|
@ -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 {
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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) => {
|
||||
|
@ -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
|
||||
|
@ -511,3 +511,7 @@ $tooltip-arrow-color: #c2d1e1;
|
||||
.el-upload--text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
li.rmenu i.fa {
|
||||
width: 20px;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -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() {
|
||||
|
@ -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: {
|
||||
|
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user