322 lines
13 KiB
Vue
322 lines
13 KiB
Vue
<template>
|
|
<div class="flex h-screen bg-art-admin-bg text-white overflow-hidden font-sans">
|
|
<!-- Sidebar Navigation -->
|
|
<aside
|
|
class="flex flex-col bg-art-admin-card border-r border-white/5 transition-all duration-300 z-20"
|
|
:class="[isSidebarOpen ? 'w-64' : 'w-20']"
|
|
>
|
|
<!-- Logo Area -->
|
|
<div class="h-16 flex items-center px-6 border-b border-white/5 shrink-0">
|
|
<h1 class="font-serif italic text-xl tracking-wide truncate transition-all duration-300" :class="{ 'opacity-0': !isSidebarOpen }">
|
|
Niangao<span class="text-art-accent">.Admin</span>
|
|
</h1>
|
|
<span v-if="!isSidebarOpen" class="absolute left-1/2 -translate-x-1/2 text-art-accent font-serif text-xl italic">N</span>
|
|
</div>
|
|
|
|
<!-- Nav Menu -->
|
|
<nav class="flex-1 overflow-y-auto py-6 px-3 space-y-1 custom-scrollbar">
|
|
<template v-for="(item, index) in menuItems" :key="index">
|
|
<!-- Parent Menu Item -->
|
|
<div v-if="item.children">
|
|
<div
|
|
class="flex items-center justify-between px-3 py-2.5 rounded-md cursor-pointer transition-colors duration-200 group mb-1"
|
|
:class="[isParentActive(item) ? 'text-white' : 'text-art-muted hover:text-white hover:bg-white/5']"
|
|
@click="toggleMenu(index)"
|
|
>
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<span class="text-lg shrink-0 group-hover:text-art-accent transition-colors" :class="isParentActive(item) ? 'text-art-accent' : ''">{{ item.icon }}</span>
|
|
<span class="text-sm font-medium truncate transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">{{ item.title }}</span>
|
|
</div>
|
|
<span
|
|
v-if="isSidebarOpen"
|
|
class="text-[10px] transition-transform duration-200 opacity-50 group-hover:opacity-100"
|
|
:class="{ 'rotate-180': item.isOpen }"
|
|
>▼</span>
|
|
</div>
|
|
|
|
<!-- Submenu -->
|
|
<div
|
|
v-show="isSidebarOpen && item.isOpen"
|
|
class="ml-4 pl-4 border-l border-white/5 space-y-1 mb-2 overflow-hidden transition-all duration-300"
|
|
>
|
|
<router-link
|
|
v-for="(child, childIndex) in item.children"
|
|
:key="childIndex"
|
|
:to="child.path"
|
|
class="flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-all duration-200 relative group"
|
|
active-class="text-art-accent bg-art-accent/5 font-medium"
|
|
:class="!isActive(child.path) ? 'text-art-muted hover:text-white hover:bg-white/5' : ''"
|
|
>
|
|
<!-- Active Indicator Line -->
|
|
<div v-if="isActive(child.path)" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-art-accent rounded-full"></div>
|
|
|
|
<span class="truncate">{{ child.title }}</span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Single Menu Item -->
|
|
<router-link
|
|
v-else
|
|
:to="item.path || ''"
|
|
class="flex items-center gap-3 px-3 py-2.5 rounded-md mb-1 transition-all duration-200 relative group"
|
|
active-class="text-art-accent bg-art-accent/5"
|
|
:class="!isActive(item.path || '') ? 'text-art-muted hover:text-white hover:bg-white/5' : ''"
|
|
>
|
|
<div v-if="isActive(item.path || '')" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-art-accent rounded-full"></div>
|
|
<span class="text-lg shrink-0 group-hover:text-art-accent transition-colors">{{ item.icon }}</span>
|
|
<span class="text-sm font-medium truncate transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">{{ item.title }}</span>
|
|
</router-link>
|
|
</template>
|
|
</nav>
|
|
|
|
<!-- User Footer -->
|
|
<div class="p-4 border-t border-white/5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent font-bold text-xs shrink-0">
|
|
{{ currentUser.username?.charAt(0).toUpperCase() || 'A' }}
|
|
</div>
|
|
<div class="min-w-0 transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">
|
|
<p class="text-sm font-medium text-white truncate">{{ currentUser.username }}</p>
|
|
<p class="text-xs text-art-muted truncate">Administrator</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col min-w-0 bg-art-admin-bg relative">
|
|
<!-- Top Header -->
|
|
<header class="h-16 bg-art-admin-bg border-b border-white/5 flex items-center justify-between px-6 shrink-0 z-10">
|
|
<!-- Left: Toggle & Breadcrumb (Optional) -->
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
@click="toggleSidebar"
|
|
class="p-2 -ml-2 text-art-muted hover:text-white hover:bg-white/5 rounded-md transition-colors"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
|
</button>
|
|
<h2 class="text-sm font-medium text-white/80 hidden sm:block">{{ currentRouteTitle }}</h2>
|
|
</div>
|
|
|
|
<!-- Right: Actions -->
|
|
<div class="flex items-center gap-3">
|
|
<button class="p-2 text-art-muted hover:text-white hover:bg-white/5 rounded-full transition-colors relative">
|
|
<span class="absolute top-2 right-2 w-2 h-2 bg-art-accent rounded-full border-2 border-art-admin-bg"></span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
|
</button>
|
|
|
|
<div class="relative" ref="dropdownRef">
|
|
<button
|
|
@click="toggleUserDropdown"
|
|
class="flex items-center gap-2 text-sm font-medium text-art-muted hover:text-white transition-colors"
|
|
>
|
|
<span>设置</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200" :class="{ 'rotate-180': isUserDropdownOpen }"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
</button>
|
|
|
|
<!-- Dropdown -->
|
|
<div
|
|
v-if="isUserDropdownOpen"
|
|
class="absolute right-0 mt-2 w-48 bg-art-admin-card border border-white/10 rounded-lg shadow-xl py-1 z-50 origin-top-right animate-reveal"
|
|
>
|
|
<button @click="handleChangePassword" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-art-muted hover:text-white hover:bg-white/5 text-left transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
|
|
修改密码
|
|
</button>
|
|
<div class="h-px bg-white/5 my-1"></div>
|
|
<button @click="handleLogout" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-red-400 hover:bg-red-500/10 text-left transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content Scroll Area -->
|
|
<div class="flex-1 overflow-auto p-6 scroll-smooth custom-scrollbar">
|
|
<div class="max-w-full mx-auto animate-reveal">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useToast } from '../../composables/useToast'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const toast = useToast()
|
|
const isSidebarOpen = ref(true)
|
|
const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))
|
|
|
|
// Dropdown logic
|
|
const isUserDropdownOpen = ref(false)
|
|
const dropdownRef = ref<HTMLElement | null>(null)
|
|
|
|
const toggleUserDropdown = () => {
|
|
isUserDropdownOpen.value = !isUserDropdownOpen.value
|
|
}
|
|
|
|
const closeDropdown = (e: MouseEvent) => {
|
|
if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
|
|
isUserDropdownOpen.value = false
|
|
}
|
|
}
|
|
|
|
const handleChangePassword = () => {
|
|
toast.showToast('功能开发中...', 'info')
|
|
isUserDropdownOpen.value = false
|
|
}
|
|
|
|
interface MenuItem {
|
|
title: string
|
|
icon: string
|
|
path?: string
|
|
children?: { title: string; path: string; icon: string }[]
|
|
isOpen?: boolean
|
|
}
|
|
|
|
const menuItems = ref<MenuItem[]>([
|
|
{
|
|
title: '概览',
|
|
icon: '📊',
|
|
path: '/admin/dashboard'
|
|
},
|
|
{
|
|
title: '数据分析',
|
|
icon: '📈',
|
|
path: '/admin/analytics'
|
|
},
|
|
{
|
|
title: '内容管理',
|
|
icon: '📚',
|
|
isOpen: true,
|
|
children: [
|
|
{ title: '文章管理', path: '/admin/posts', icon: '📝' },
|
|
{ title: '分类管理', path: '/admin/categories', icon: '📂' },
|
|
{ title: '专栏管理', path: '/admin/columns', icon: '📚' },
|
|
{ title: '作品管理', path: '/admin/works', icon: '🎨' },
|
|
{ title: '代码片段', path: '/admin/snippets', icon: '💻' },
|
|
{ title: '标签管理', path: '/admin/tags', icon: '🏷️' }
|
|
]
|
|
},
|
|
{
|
|
title: '页面配置',
|
|
icon: '🔧',
|
|
isOpen: false,
|
|
children: [
|
|
{ title: '关于页面', path: '/admin/about', icon: '👤' },
|
|
{ title: '客户评价', path: '/admin/testimonials', icon: '💬' },
|
|
{ title: '合作伙伴', path: '/admin/partners', icon: '🤝' }
|
|
]
|
|
},
|
|
{
|
|
title: '业务中心',
|
|
icon: '💼',
|
|
isOpen: false,
|
|
children: [
|
|
{ title: '合作咨询', path: '/admin/inquiries', icon: '📩' },
|
|
{ title: '邮箱配置', path: '/admin/email-suffixes', icon: '📧' }
|
|
]
|
|
},
|
|
{
|
|
title: '用户权限',
|
|
icon: '🛡️',
|
|
isOpen: false,
|
|
children: [
|
|
{ title: '用户管理', path: '/admin/users', icon: '👥' },
|
|
{ title: '角色管理', path: '/admin/roles', icon: '🔒' }
|
|
]
|
|
},
|
|
{
|
|
title: '系统设置',
|
|
icon: '⚙️',
|
|
isOpen: false,
|
|
children: [
|
|
{ title: '全局配置', path: '/admin/settings', icon: '🛠️' },
|
|
{ title: '附件管理', path: '/admin/attachments', icon: '📎' },
|
|
{ title: '操作日志', path: '/admin/logs', icon: '📋' }
|
|
]
|
|
}
|
|
])
|
|
|
|
const toggleMenu = (index: number) => {
|
|
if (!isSidebarOpen.value) {
|
|
isSidebarOpen.value = true
|
|
// Wait for transition
|
|
setTimeout(() => {
|
|
menuItems.value[index].isOpen = !menuItems.value[index].isOpen
|
|
}, 100)
|
|
} else {
|
|
menuItems.value[index].isOpen = !menuItems.value[index].isOpen
|
|
}
|
|
}
|
|
|
|
const toggleSidebar = () => {
|
|
isSidebarOpen.value = !isSidebarOpen.value
|
|
}
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('token')
|
|
localStorage.removeItem('user')
|
|
toast.showToast('退出登录成功', 'success')
|
|
router.push('/login')
|
|
}
|
|
|
|
// Helper to determine active state
|
|
const isActive = (path: string) => {
|
|
return route.path === path || route.path.startsWith(path + '/')
|
|
}
|
|
|
|
const isParentActive = (item: MenuItem) => {
|
|
if (item.path && isActive(item.path)) return true
|
|
if (item.children) {
|
|
return item.children.some(child => isActive(child.path))
|
|
}
|
|
return false
|
|
}
|
|
|
|
// Get current route title for header
|
|
const currentRouteTitle = computed(() => {
|
|
// Simple logic: find matching menu item title
|
|
for (const item of menuItems.value) {
|
|
if (item.path === route.path) return item.title
|
|
if (item.children) {
|
|
const child = item.children.find(c => c.path === route.path)
|
|
if (child) return `${item.title} / ${child.title}`
|
|
}
|
|
}
|
|
return '管理控制台'
|
|
})
|
|
|
|
// Check if user is authenticated
|
|
onMounted(() => {
|
|
const token = localStorage.getItem('token')
|
|
if (!token) {
|
|
router.push('/login')
|
|
}
|
|
document.addEventListener('click', closeDropdown)
|
|
|
|
// Auto open menu based on current route
|
|
menuItems.value.forEach(item => {
|
|
if (item.children && item.children.some(child => isActive(child.path))) {
|
|
item.isOpen = true
|
|
}
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', closeDropdown)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Scoped styles replaced by Tailwind classes */
|
|
</style>
|