109 lines
1.9 KiB
Vue
109 lines
1.9 KiB
Vue
<template>
|
|
<a-layout-content class="main-content">
|
|
<div class="content-container">
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="Component" />
|
|
</transition>
|
|
</router-view>
|
|
</div>
|
|
</a-layout-content>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
interface BreadcrumbItem {
|
|
title: string
|
|
path?: string
|
|
}
|
|
|
|
const breadcrumbs = ref<BreadcrumbItem[]>([])
|
|
const pageTitle = ref('')
|
|
|
|
// 更新面包屑和页面标题
|
|
const updatePageInfo = () => {
|
|
const { matched, meta } = route
|
|
|
|
// 更新面包屑
|
|
breadcrumbs.value = matched
|
|
.filter(item => item.meta?.title) // 只显示有标题的路由
|
|
.map(item => ({
|
|
title: item.meta?.title as string,
|
|
path: item.path
|
|
}))
|
|
|
|
// 如果面包屑为空，至少显示首页
|
|
if (breadcrumbs.value.length === 0) {
|
|
breadcrumbs.value = [{ title: '首页', path: '/dashboard' }]
|
|
}
|
|
|
|
// 更新页面标题
|
|
pageTitle.value = meta?.title as string || '未命名页面'
|
|
}
|
|
|
|
// 监听路由变化
|
|
watch(
|
|
() => route.path,
|
|
() => {
|
|
updatePageInfo()
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main-content {
|
|
flex: 1 1 0;
|
|
overflow: auto;
|
|
min-height: 0;
|
|
margin: 16px;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.main-content {
|
|
margin: 12px;
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
.content-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.content-title {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.content-title h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
|
|
.content-container {
|
|
min-height: 500px;
|
|
}
|
|
|
|
/* 过渡动画 */
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|