d90ccb248c
- 重构 AppMain 组件，引入 KeepCache 组件实现统一缓存 - 新增 DemoDetail 组件作为缓存测试页面 - 更新 TagsView 组件，优化缓存路由逻辑 - 修改 permission.store.ts，增加 allCacheRoutes 状态管理 - 更新 tags-view.store.ts，实现缓存路由的动态设置 - 调整多级菜单示例，支持缓存功能
42 lines
964 B
Vue
42 lines
964 B
Vue
<template>
|
|
<section class="app-main" :style="{ height: appMainHeight }">
|
|
<KeepCache />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSettingsStore } from "@/store";
|
|
import variables from "@/styles/variables.module.scss";
|
|
import KeepCache from "@/components/KeepCache/index.vue";
|
|
|
|
const appMainHeight = computed(() => {
|
|
if (useSettingsStore().showTagsView) {
|
|
return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;
|
|
} else {
|
|
return `calc(100vh - ${variables["navbar-height"]})`;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-main {
|
|
position: relative;
|
|
overflow-y: auto;
|
|
background-color: var(--el-bg-color-page);
|
|
|
|
/* 布局切换动画优化 */
|
|
&.animate__animated {
|
|
animation-duration: 0.4s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
&.animate__fadeOut {
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
&.animate__fadeIn {
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
</style>
|