136 lines
4.0 KiB
Vue
136 lines
4.0 KiB
Vue
<template>
|
|
<div class="admin-layout flex h-screen bg-gray-100">
|
|
<!-- 侧边栏 -->
|
|
<aside class="w-64 bg-gray-800 text-white flex flex-col">
|
|
<div class="p-4 border-b border-gray-700">
|
|
<h1 class="text-xl font-bold">管理员面板</h1>
|
|
</div>
|
|
|
|
<nav class="flex-1 p-2">
|
|
<ul class="space-y-1">
|
|
<li>
|
|
<router-link
|
|
to="/admin/user"
|
|
class="flex items-center p-3 rounded-lg hover:bg-gray-700 transition-colors"
|
|
>
|
|
<i class="fa-solid fa-users mr-3"></i>
|
|
<span>用户管理</span>
|
|
</router-link>
|
|
</li>
|
|
|
|
<li>
|
|
<router-link
|
|
to="/admin/category"
|
|
class="flex items-center p-3 rounded-lg hover:bg-gray-700 transition-colors"
|
|
>
|
|
<i class="fa-solid fa-tags mr-3"></i>
|
|
<span>分类管理</span>
|
|
</router-link>
|
|
</li>
|
|
|
|
<li>
|
|
<router-link
|
|
to="/admin/product"
|
|
class="flex items-center p-3 rounded-lg hover:bg-gray-700 transition-colors"
|
|
>
|
|
<i class="fa-solid fa-box mr-3"></i>
|
|
<span>商品管理</span>
|
|
</router-link>
|
|
</li>
|
|
|
|
<li>
|
|
<router-link
|
|
to="/admin/orders"
|
|
class="flex items-center p-3 rounded-lg hover:bg-gray-700 transition-colors"
|
|
>
|
|
<i class="fa-solid fa-file-invoice mr-3"></i>
|
|
<span>订单管理</span>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="p-4 border-t border-gray-700">
|
|
<div class="flex items-center">
|
|
<div class="mr-3">
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center"
|
|
>
|
|
<i class="fa-solid fa-user-gear"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium">{{ userNickname }}</p>
|
|
<p class="text-xs text-gray-400">管理员</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 主内容区域 -->
|
|
<main class="flex-1 overflow-auto">
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center">
|
|
<h2 class="text-lg font-semibold text-gray-800">
|
|
{{ getCurrentPageTitle }}
|
|
</h2>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="p-2 rounded-full hover:bg-gray-100">
|
|
<i class="fa-solid fa-bell text-gray-600"></i>
|
|
</button>
|
|
<button
|
|
@click="handleLogout"
|
|
class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
|
|
>
|
|
退出登录
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="p-6">
|
|
<slot />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useUserStore } from "@/stores/UserStore";
|
|
import { ElMessage } from "element-plus";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const userStore = useUserStore();
|
|
|
|
// 计算属性：获取用户昵称
|
|
const userNickname = computed(() => {
|
|
return (
|
|
userStore.userInfo?.nickname || userStore.userInfo?.username || "管理员"
|
|
);
|
|
});
|
|
|
|
// 计算属性：获取当前页面标题
|
|
const getCurrentPageTitle = computed(() => {
|
|
const path = route.path;
|
|
if (path.includes("/admin/user")) return "用户管理";
|
|
if (path.includes("/admin/category")) return "分类管理";
|
|
if (path.includes("/admin/product")) return "商品管理";
|
|
if (path.includes("/admin/order")) return "订单管理";
|
|
return "管理员面板";
|
|
});
|
|
|
|
// 用户退出登录
|
|
const handleLogout = () => {
|
|
userStore.clearUserInfo();
|
|
ElMessage.success("退出登录成功");
|
|
router.push("/user/login");
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-layout {
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
</style>
|