实现了管理员用户登录校验，完成了用户管理界面和商品管理界面

src/layouts/ManageLayout.vue

@@ -0,0 +1,135 @@
+<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>