first

admin-web/src/layouts/AdminLayout.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { House, Tickets, CollectionTag, DocumentChecked, DataAnalysis, Bell, ChatLineRound, User, Lock, Setting, OfficeBuilding, Connection, Box } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import { adminApi } from "../api/admin";
+import { clearAdminSession, getAdminInfo, hasPermission } from "../utils/auth";
+import { goToAdminLogin } from "../utils/navigation";
+
+const route = useRoute();
+const router = useRouter();
+
+const title = computed(() => (route.meta.title as string) || "安心验管理后台");
+const desc = computed(() => (route.meta.desc as string) || "管理后台");
+
+const active = computed(() => (route.meta.menuIndex as string) || (route.name as string));
+const adminInfo = computed(() => getAdminInfo());
+
+const menus = [
+  { index: "dashboard", label: "工作台", icon: House, permission: "dashboard.view" },
+  { index: "orders", label: "订单中心", icon: Tickets, permission: "orders.manage" },
+  { index: "appraisal-tasks", label: "鉴定作业台", icon: DataAnalysis, permission: "appraisal_tasks.manage" },
+  { index: "catalog", label: "商品资料中心", icon: CollectionTag, permission: "catalog.manage" },
+  { index: "reports", label: "报告中心", icon: DocumentChecked, permission: "reports.manage" },
+  { index: "messages", label: "消息中心", icon: Bell, permission: "messages.manage" },
+  { index: "tickets", label: "客服与售后", icon: ChatLineRound, permission: "tickets.manage" },
+  { index: "users", label: "用户管理", icon: User, permission: "users.manage" },
+  { index: "customers", label: "客户管理", icon: Connection, permission: "customers.manage" },
+  { index: "warehouses", label: "仓库中心", icon: OfficeBuilding, permission: "warehouses.manage" },
+  { index: "materials", label: "物料管理", icon: Box, permission: "materials.manage" },
+  { index: "access", label: "权限中心", icon: Lock, permission: "access.manage" },
+  { index: "content", label: "内容中心", icon: DocumentChecked, permission: "system.manage" },
+  { index: "system-config", label: "系统配置", icon: Setting, permission: "system.manage" },
+];
+
+const visibleMenus = computed(() => menus.filter((item) => hasPermission(item.permission)));
+
+function handleSelect(index: string) {
+  router.push({ name: index });
+}
+
+async function logout() {
+  try {
+    await adminApi.logout();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    clearAdminSession();
+    ElMessage.success("已退出登录");
+    goToAdminLogin();
+  }
+}
+</script>
+
+<template>
+  <el-container class="admin-layout">
+    <el-aside width="250px" class="admin-aside">
+      <div class="admin-brand">
+        <div class="admin-brand__name">安心验</div>
+        <div class="admin-brand__desc">独立第三方鉴定服务管理后台</div>
+      </div>
+
+      <el-menu :default-active="active" @select="handleSelect">
+        <el-menu-item v-for="item in visibleMenus" :key="item.index" :index="item.index">
+          <el-icon><component :is="item.icon" /></el-icon>
+          <span>{{ item.label }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <el-container>
+      <el-main class="admin-main">
+        <div class="admin-topbar">
+          <div>
+            <div class="admin-topbar__title">{{ title }}</div>
+            <div class="admin-topbar__desc">{{ desc }}</div>
+          </div>
+          <div class="admin-topbar__meta">
+            <span v-if="adminInfo" class="admin-chip">{{ adminInfo.name }}</span>
+            <span v-if="adminInfo" class="admin-chip">{{ adminInfo.role_names.join(" / ") || "未分配角色" }}</span>
+            <span class="admin-chip">MVP 阶段</span>
+            <span class="admin-chip">订单履约系统</span>
+            <span class="admin-chip" style="cursor: pointer" @click="logout">退出登录</span>
+          </div>
+        </div>
+
+        <div class="admin-content">
+          <router-view />
+        </div>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>