优化pagetype列表页Link类型字段加载逻辑,增加防抖机制
This commit is contained in:
parent
69f1c36bfd
commit
e57ee5189d
@ -291,6 +291,47 @@ const cardBadges = computed(() => {
|
|||||||
const metaFields = ref<any[]>([])
|
const metaFields = ref<any[]>([])
|
||||||
const linkTitleCache = ref<Record<string, string>>({})
|
const linkTitleCache = ref<Record<string, string>>({})
|
||||||
const pageTypeConfigCache = ref<Record<string, any>>({})
|
const pageTypeConfigCache = ref<Record<string, any>>({})
|
||||||
|
let saveCacheTimer: ReturnType<typeof setTimeout> | null = null
|
||||||
|
|
||||||
|
// 从localStorage恢复缓存(避免刷新时抖动)
|
||||||
|
function loadCacheFromStorage() {
|
||||||
|
try {
|
||||||
|
const cached = localStorage.getItem(`linkTitleCache:${entity.value}`)
|
||||||
|
if (cached) {
|
||||||
|
const parsed = JSON.parse(cached)
|
||||||
|
// 合并到当前缓存,但不覆盖已有值
|
||||||
|
Object.keys(parsed).forEach(key => {
|
||||||
|
if (!linkTitleCache.value[key]) {
|
||||||
|
linkTitleCache.value[key] = parsed[key]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载缓存失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存缓存到localStorage(带防抖,避免频繁写入)
|
||||||
|
function saveCacheToStorage() {
|
||||||
|
if (saveCacheTimer) {
|
||||||
|
clearTimeout(saveCacheTimer)
|
||||||
|
}
|
||||||
|
saveCacheTimer = setTimeout(() => {
|
||||||
|
try {
|
||||||
|
// 限制缓存大小,只保存最近1000个条目
|
||||||
|
const cacheEntries = Object.entries(linkTitleCache.value)
|
||||||
|
if (cacheEntries.length > 1000) {
|
||||||
|
// 只保留最新的1000个
|
||||||
|
const recentEntries = cacheEntries.slice(-1000)
|
||||||
|
linkTitleCache.value = Object.fromEntries(recentEntries)
|
||||||
|
}
|
||||||
|
localStorage.setItem(`linkTitleCache:${entity.value}`, JSON.stringify(linkTitleCache.value))
|
||||||
|
} catch (error) {
|
||||||
|
console.error('保存缓存失败:', error)
|
||||||
|
}
|
||||||
|
saveCacheTimer = null
|
||||||
|
}, 1000) // 1秒防抖
|
||||||
|
}
|
||||||
|
|
||||||
async function loadMeta() {
|
async function loadMeta() {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
@ -301,6 +342,9 @@ async function loadMeta() {
|
|||||||
|
|
||||||
// 检查是否为单页模式
|
// 检查是否为单页模式
|
||||||
isSinglePage.value = await isSinglePageType(entity.value)
|
isSinglePage.value = await isSinglePageType(entity.value)
|
||||||
|
|
||||||
|
// 加载缓存的Link标题(刷新时减少抖动)
|
||||||
|
loadCacheFromStorage()
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
@ -410,6 +454,9 @@ async function preloadLinkTitles() {
|
|||||||
linkTitleCache.value[cacheKey] = name
|
linkTitleCache.value[cacheKey] = name
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 保存到localStorage(防抖,避免频繁写入)
|
||||||
|
saveCacheToStorage()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(`批量加载${pagetype}的标题失败:`, error)
|
console.error(`批量加载${pagetype}的标题失败:`, error)
|
||||||
// 失败时缓存原值
|
// 失败时缓存原值
|
||||||
@ -477,10 +524,8 @@ async function loadData() {
|
|||||||
total.value = res.data.total
|
total.value = res.data.total
|
||||||
}
|
}
|
||||||
|
|
||||||
// 预加载Link字段的title_field值(后台执行,不阻塞UI)
|
// 预加载Link字段的title_field值(在loading期间同步执行,避免抖动)
|
||||||
preloadLinkTitles().catch(err => {
|
await preloadLinkTitles()
|
||||||
console.error('预加载Link标题失败:', err)
|
|
||||||
})
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Load data error:', error)
|
console.error('Load data error:', error)
|
||||||
message.error(t('Load failed'))
|
message.error(t('Load failed'))
|
||||||
@ -510,8 +555,10 @@ watch(() => route.params.entity, async (newEntity, oldEntity) => {
|
|||||||
searchQuery.value = ''
|
searchQuery.value = ''
|
||||||
selectedKeys.value = []
|
selectedKeys.value = []
|
||||||
filters.value = {} // 重置过滤条件
|
filters.value = {} // 重置过滤条件
|
||||||
|
// 清空缓存(新entity使用新的缓存)
|
||||||
|
linkTitleCache.value = {}
|
||||||
// 重新加载元数据和数据
|
// 重新加载元数据和数据
|
||||||
await loadMeta()
|
await loadMeta() // loadMeta中会加载新entity的缓存
|
||||||
// 只有在非单页模式下才加载列表数据
|
// 只有在非单页模式下才加载列表数据
|
||||||
if (!isSinglePage.value) {
|
if (!isSinglePage.value) {
|
||||||
await loadData()
|
await loadData()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user