<template>
    <div class="author-center-container">
        <div class="author-center-wrapper">
            <!-- 左侧菜单 -->
            <div class="author-sidebar">
                <ul class="author-nav">
                    <li 
                        v-for="(item, index) in menuItems" 
                        :key="index"
                        :class="{ active: isMenuActive(item.path) }"
                        @click="switchMenu(item.path)"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </div>

            <!-- 右侧内容区 - 通过路由渲染 -->
            <router-view />
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

export default defineComponent({
    name: 'AuthorCenter',
    setup() {
        const router = useRouter();
        const route = useRoute();
        
        // 菜单项定义
        const menuItems = [
            { name: '作品管理', path: 'works' },
            { name: '读者管理', path: 'readers' }
        ];
        
        // 判断菜单是否激活
        const isMenuActive = (path) => {
            return route.path.includes(`/author/${path}`);
        };
        
        // 切换菜单
        const switchMenu = (path) => {
            router.push({ name: `author${path.charAt(0).toUpperCase() + path.slice(1)}` });
        };

        return {
            menuItems,
            isMenuActive,
            switchMenu
        };
    }
});
</script>

<style lang="scss" scoped>
.author-center-container {
    min-height: calc(100vh - 60px);
    padding: 20px 0;

    .author-center-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        gap: 20px;

        // 左侧菜单区
        .author-sidebar {
            width: 160px;
            flex-shrink: 0;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            overflow: hidden;

            .author-nav {
                list-style: none;
                padding: 0;
                margin: 0;

                li {
                    height: 50px;
                    line-height: 50px;
                    padding: 0 20px;
                    font-size: 15px;
                    color: #333;
                    cursor: pointer;
                    transition: all 0.3s;
                    position: relative;
                    
                    &:hover {
                        color: #0A2463;
                        background-color: #f6f8ff;
                    }
                    
                    &.active {
                        color: #0A2463;
                        font-weight: bold;
                        background-color: #f0f3ff;
                        
                        &::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 4px;
                            height: 20px;
                            background-color: #0A2463;
                            border-radius: 0 2px 2px 0;
                        }
                    }
                }
            }
        }
    }
}
</style> 