feat: enhance tenant management with status description and improved UI components

frontend/superadmin/src/App.vue

@@ -1,20 +1,31 @@
 <template>
   <Toast />
+  <ConfirmDialog />
   <div class="min-h-screen bg-slate-50 text-slate-900">
-    <header v-if="authed" class="border-b bg-white">
-      <div class="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3">
+    <header
+      v-if="authed"
+      class="sticky top-0 z-10 border-b bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/70"
+    >
+      <div class="mx-auto flex max-w-7xl items-center gap-4 px-4 py-3">
         <div class="flex items-center gap-2">
           <i class="pi pi-shield text-slate-700"></i>
           <span class="font-semibold">Super Admin</span>
         </div>
-        <nav class="flex items-center gap-3 text-sm">
-          <router-link class="hover:text-indigo-600" to="/tenants">租户列表</router-link>
+        <nav class="flex items-center gap-2 text-sm">
+          <router-link
+            class="rounded-lg px-3 py-2 text-slate-600 hover:bg-slate-50 hover:text-indigo-700"
+            active-class="bg-indigo-50 text-indigo-700"
+            to="/tenants"
+          >
+            <i class="pi pi-building mr-2"></i>租户
+          </router-link>
         </nav>
+        <div class="text-sm text-slate-500">{{ title }}</div>
         <div class="flex-1"></div>
-        <Button size="small" severity="secondary" label="退出" @click="logout" />
+        <Button size="small" severity="secondary" icon="pi pi-sign-out" label="退出" @click="logout" />
       </div>
     </header>
-    <main class="mx-auto max-w-6xl px-4 py-6">
+    <main class="mx-auto max-w-7xl px-4 py-6">
       <router-view />
     </main>
   </div>
@@ -22,16 +33,30 @@
 
 <script setup lang="ts">
 import Toast from 'primevue/toast'
+import ConfirmDialog from 'primevue/confirmdialog'
 import Button from 'primevue/button'
 import { computed } from 'vue'
 import { isAuthed, setToken } from './auth'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import { useConfirm } from 'primevue/useconfirm'
 
 const router = useRouter()
+const route = useRoute()
+const confirm = useConfirm()
 const authed = computed(() => isAuthed.value)
+const title = computed(() => String(route.meta?.title || ''))
 
 function logout() {
-  setToken('')
-  router.push('/login')
+  confirm.require({
+    header: '确认退出',
+    message: '将清除当前登录状态。',
+    icon: 'pi pi-exclamation-triangle',
+    acceptLabel: '退出',
+    rejectLabel: '取消',
+    accept: async () => {
+      setToken('')
+      await router.push('/login')
+    },
+  })
 }
 </script>