<template>
  <div class="admin-layout">
    <aside class="admin-sidebar">
      <div class="admin-logo">
        <span style="font-size: 24px">🌿</span>
        <span style="font-weight: 600; color: var(--color-primary-dark)">管理后台</span>
      </div>
      <nav class="admin-nav">
        <router-link to="/admin/dashboard" class="admin-nav-item" active-class="active">📊 仪表盘</router-link>
        <router-link to="/admin/users" class="admin-nav-item" active-class="active">👥 用户管理</router-link>
        <router-link to="/admin/messages" class="admin-nav-item" active-class="active">💬 消息审查</router-link>
        <router-link to="/admin/config" class="admin-nav-item" active-class="active">⚙️ 系统配置</router-link>
      </nav>
      <div style="margin-top: auto; padding: 16px">
        <n-button text @click="$router.push('/chat')">← 返回青叶</n-button>
      </div>
    </aside>
    <main class="admin-content">
      <router-view />
    </main>
  </div>
</template>

<style scoped>
.admin-layout { display: flex; height: 100vh; }
.admin-sidebar {
  width: 220px; background: var(--color-surface); border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; padding-top: 16px;
}
.admin-logo { display: flex; align-items: center; gap: 8px; padding: 16px 20px; margin-bottom: 16px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: 8px; text-decoration: none; color: var(--color-text-primary);
  font-size: 14px; transition: all 0.2s;
}
.admin-nav-item:hover { background: var(--color-primary-lightest); }
.admin-nav-item.active { background: var(--color-primary-lightest); color: var(--color-primary); font-weight: 500; }
.admin-content { flex: 1; overflow-y: auto; padding: 24px; background: var(--color-bg); }
</style>
