<template>
    <div class="h-full p-2">
        <div class="h-full panel-shell">
            <el-menu router :default-active="activePath" class="h-full rounded-xl bg-transparent" :collapse="false">
                <el-menu-item index="/">
                    <span>班级列表</span>
                </el-menu-item>
                <el-menu-item index="/learningplan">
                    <span>学案</span>
                </el-menu-item>
                <el-menu-item index="/uploadpng">
                    <span>上传图片</span>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router'
const route = useRoute()
const activePath = computed(() => route.path)
const allRoutes = router.getRoutes()
const menuItems = computed(() => {
    return allRoutes
        .filter(r => r.meta && r.meta.title)
        .filter(r => !r.path.includes(':'))
        .filter(r => r.path !== '/login')
        .map(r => ({ path: r.path, title: r.meta.title }))
        .sort((a, b) => a.title.localeCompare(b.title, 'zh-CN'))
})
</script>

<style scoped>
/* Fluent 2 气质的轻盈质感：柔和玻璃、圆角、细描边 */
.el-menu {
    --el-menu-bg-color: transparent;
    --el-menu-hover-bg-color: rgba(255, 255, 255, 0.35);
    --el-menu-active-color: #2563eb;
}
.el-menu-item {
    border-radius: 10px;
    transition: all 0.2s ease;
}
.el-menu-item:hover {
    backdrop-filter: saturate(1.2);
}
</style>
