<template>
    <aside class="w-64 bg-white shadow-md z-10 hidden md:block transition-all duration-300 ease-in-out">
        <div class="p-5 border-b">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                    <i class="fa fa-pencil text-white text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-dark">智撰</h1>
            </div>
            <p class="text-gray-500 text-sm mt-1">AI软文自动生成与发布平台</p>
        </div>

        <nav class="p-4">
            <p class="text-xs uppercase text-gray-500 font-semibold mb-2 px-3">主功能</p>
            <ul class="space-y-1">
                <li>
                    <a href="dashboard.html"
                        class="flex items-center space-x-3 px-3 py-3 rounded-lg sidebar-item-active">
                        <i class="fa fa-dashboard w-5 text-center"></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="knowledge-base.html"
                        class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fa fa-book w-5 text-center"></i>
                        <span>知识库管理</span>
                    </a>
                </li>
                <li>
                    <a href="article-generation.html"
                        class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fa fa-file-text w-5 text-center"></i>
                        <span>软文生成</span>
                    </a>
                </li>
                <li>
                    <a href="publishing-schedule.html"
                        class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fa fa-calendar w-5 text-center"></i>
                        <span>发布计划</span>
                    </a>
                </li>
                <li>
                    <a href="analytics.html"
                        class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fa fa-bar-chart w-5 text-center"></i>
                        <span>数据分析</span>
                    </a>
                </li>
            </ul>

            <p class="text-xs uppercase text-gray-500 font-semibold mb-2 px-3 mt-6">系统</p>
            <ul class="space-y-1">
                <li>
                    <a href="settings.html"
                        class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fa fa-cog w-5 text-center"></i>
                        <span>设置</span>
                    </a>
                </li>
                <li>
                    <a href="help-center.html"
                        class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
                        <i class="fa fa-question-circle w-5 text-center"></i>
                        <span>帮助中心</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="absolute bottom-0 left-0 right-0 p-4 border-t">
            <div class="flex items-center space-x-3">
                <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                <div>
                    <p class="font-medium text-sm">张经理</p>
                    <p class="text-gray-500 text-xs">高级会员</p>
                </div>
                <button class="ml-auto text-gray-500 hover:text-dark" title="退出登录">
                    <i class="fa fa-sign-out"></i>
                </button>
            </div>
        </div>
    </aside>
</template>
<script setup>

</script>
<style scoped></style>