后台界面独立

frontend/src/layouts/AdminLayout.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { DataLine, DocumentChecked, Operation, ScaleToOriginal, SwitchButton } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { logoutAdmin } from '@/api/adminAuth'
+import { useAdminSessionStore } from '@/stores/adminSession'
+
+const router = useRouter()
+const adminSession = useAdminSessionStore()
+
+const navItems = [
+  { label: '仪表盘', to: '/admin/dashboard', icon: DataLine },
+  { label: '商品审核', to: '/admin/listings/review', icon: DocumentChecked },
+  { label: '仲裁中心', to: '/admin/disputes', icon: ScaleToOriginal },
+  { label: '系统配置', to: '/admin/system-configs', icon: Operation },
+]
+
+const adminName = computed(() => adminSession.nickname || adminSession.username || '管理员')
+
+async function handleLogout() {
+  try {
+    await logoutAdmin()
+  } catch {
+    // Local logout should still happen if the development API is unavailable.
+  }
+  adminSession.logout()
+  ElMessage.success('已退出后台')
+  await router.push('/admin/login')
+}
+</script>
+
+<template>
+  <div class="admin-shell">
+    <aside class="admin-sidebar">
+      <RouterLink class="admin-brand" to="/admin/dashboard">
+        <span class="brand-mark">H</span>
+        <span>哈夫币后台</span>
+      </RouterLink>
+
+      <nav class="admin-nav">
+        <RouterLink v-for="item in navItems" :key="item.to" class="admin-nav-link" :to="item.to">
+          <el-icon><component :is="item.icon" /></el-icon>
+          <span>{{ item.label }}</span>
+        </RouterLink>
+      </nav>
+    </aside>
+
+    <section class="admin-workspace">
+      <header class="admin-topbar">
+        <div>
+          <span>管理系统</span>
+          <strong>{{ adminName }}</strong>
+        </div>
+        <el-button :icon="SwitchButton" @click="handleLogout">退出</el-button>
+      </header>
+      <main class="admin-main">
+        <slot />
+      </main>
+    </section>
+  </div>
+</template>

frontend/src/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Bell, House, Key, Operation, Phone, ScaleToOriginal, Shop, Tickets, UserFilled, Wallet, View } from '@element-plus/icons-vue'
+import { Bell, House, Key, Phone, Shop, Tickets, UserFilled, Wallet } from '@element-plus/icons-vue'
 
 const navItems = [
   { label: '首页', to: '/', icon: House },
@@ -8,10 +8,7 @@ const navItems = [
   { label: '钱包', to: '/wallet', icon: Wallet },
   { label: '通知', to: '/notifications', icon: Bell },
   { label: '实名', to: '/realname', icon: UserFilled },
-  { label: '后台登录', to: '/admin/login', icon: Key },
-  { label: '审核', to: '/admin/listings/review', icon: View },
-  { label: '仲裁', to: '/admin/disputes', icon: ScaleToOriginal },
-  { label: '配置', to: '/admin/system-configs', icon: Operation },
+  { label: '后台', to: '/admin/login', icon: Key },
   { label: '登录', to: '/login', icon: Phone },
 ]
 </script>