Market-Front/src/layouts/ManageLayout.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>