41 lines
1.9 KiB
Vue
41 lines
1.9 KiB
Vue
<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>
|