<!-- src/components/Layout.vue -->
<template>
    <div class="layout">
        <!-- 侧边栏 -->
        <div class="sidebar-container custom-sidebar">
            <Sidebar />
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <div class="content">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Sidebar from './sidebar.vue'
</script>

<style scoped>
.layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.sidebar-container {
    width: 240px;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
}

.main-content {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    background: #f5f5f5;
}

.content {
    padding: 20px;
    background: #fff;
    min-height: calc(100vh - 40px);
}
</style>