From 3d862ec5b9a3b7f7db1908e69857f4fc9e466d7d Mon Sep 17 00:00:00 2001
From: Lan <hhxk666@gmail.com>
Date: Fri, 9 Jan 2026 10:13:00 +0800
Subject: [PATCH] feat: https://github.com/vastsa/FileCodeBox/issues/450

---
 src/components/common/PageFooter.vue   |  35 +++++---
 src/i18n/locales/en-US.ts              |   1 +
 src/i18n/locales/zh-CN.ts              |   1 +
 src/layout/AdminLayout/AdminLayout.vue | 107 +++++++++++++++++++------
 4 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/src/components/common/PageFooter.vue b/src/components/common/PageFooter.vue
index d134d19..8846e6e 100644
--- a/src/components/common/PageFooter.vue
+++ b/src/components/common/PageFooter.vue
@@ -8,7 +8,7 @@
         {{ linkText }}
       </router-link>
     </div>
-    
+
     <div
       class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
       :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
@@ -20,21 +20,34 @@
         <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
         {{ t('send.secureEncryption') }}
       </span>
-      <button
-        @click="$emit('toggle-drawer')"
-        class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-        :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-      >
-        {{ drawerText }}
-        <ClipboardListIcon class="w-4 h-4 ml-1" />
-      </button>
+      <div class="flex items-center space-x-4">
+        <router-link
+          to="/login"
+          class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
+          :class="[
+            isDarkMode
+              ? 'text-gray-400 hover:text-indigo-400'
+              : 'text-gray-500 hover:text-indigo-600'
+          ]"
+        >
+          <UserIcon class="w-4 h-4" />
+        </router-link>
+        <button
+          @click="$emit('toggle-drawer')"
+          class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
+          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+        >
+          {{ drawerText }}
+          <ClipboardListIcon class="w-4 h-4 ml-1" />
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { inject } from 'vue'
-import { ShieldCheckIcon, ClipboardListIcon } from 'lucide-vue-next'
+import { ShieldCheckIcon, ClipboardListIcon, UserIcon } from 'lucide-vue-next'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -53,4 +66,4 @@ defineProps<Props>()
 defineEmits<Emits>()
 
 const isDarkMode = inject('isDarkMode')
-</script>
\ No newline at end of file
+</script>
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index e5ff285..aa4cf60 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -53,6 +53,7 @@ export default {
 
   // Admin module
   admin: {
+    logout: 'Logout',
     dashboard: {
       title: 'Dashboard',
       totalFiles: 'Total Files',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 157aecd..b9c7c47 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -52,6 +52,7 @@ export default {
 
   // 管理员模块
   admin: {
+    logout: '退出登录',
     dashboard: {
       title: '仪表盘',
       totalFiles: '总文件数',
diff --git a/src/layout/AdminLayout/AdminLayout.vue b/src/layout/AdminLayout/AdminLayout.vue
index 4637527..fc6dfda 100644
--- a/src/layout/AdminLayout/AdminLayout.vue
+++ b/src/layout/AdminLayout/AdminLayout.vue
@@ -1,25 +1,37 @@
 <template>
-  <div class="h-screen flex flex-col lg:flex-row transition-colors duration-300"
-    :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']">
+  <div
+    class="h-screen flex flex-col lg:flex-row transition-colors duration-300"
+    :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
+  >
     <!-- Sidebar -->
     <aside
       class="fixed inset-y-0 border-transparent left-0 z-50 w-64 transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 border-r flex flex-col h-full lg:h-screen"
       :class="[
-        isDarkMode
-          ? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl '
-          : 'bg-white ',
+        isDarkMode ? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl ' : 'bg-white ',
         { '-translate-x-full': !isSidebarOpen }
-      ]">
+      ]"
+    >
       <!-- Logo区域 -->
-      <div class="flex items-center justify-between h-16 px-4 border-b"
-        :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
+      <div
+        class="flex items-center justify-between h-16 px-4 border-b"
+        :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+      >
         <div class="flex items-center">
-          <div class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow">
+          <div
+            class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
+          >
             <div class="rounded-full p-1" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
-              <BoxIcon class="w-6 h-6" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+              <BoxIcon
+                class="w-6 h-6"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
             </div>
           </div>
-          <h1 @click="router.push('/')" class="ml-2 text-xl font-semibold cursor-pointer" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+          <h1
+            @click="router.push('/')"
+            class="ml-2 text-xl font-semibold cursor-pointer"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+          >
             {{ t('common.appName') }}
           </h1>
         </div>
@@ -32,8 +44,10 @@
       <nav class="flex-1 overflow-y-auto custom-scrollbar">
         <ul class="p-4 space-y-2">
           <li v-for="item in menuItems" :key="item.id">
-            <a @click="router.push(item.redirect)"
-              class="flex items-center p-2 rounded-lg transition-colors duration-200" :class="[
+            <a
+              @click="router.push(item.redirect)"
+              class="flex items-center p-2 rounded-lg transition-colors duration-200"
+              :class="[
                 router.currentRoute.value.name === item.id
                   ? isDarkMode
                     ? 'bg-indigo-900 text-indigo-400'
@@ -41,20 +55,39 @@
                   : isDarkMode
                     ? 'text-gray-400 hover:bg-gray-700'
                     : 'text-gray-600 hover:bg-gray-100'
-              ]">
+              ]"
+            >
               <component :is="item.icon" class="w-5 h-5 mr-3" />
               {{ item.name }}
             </a>
           </li>
         </ul>
       </nav>
+
+      <!-- 退出登录按钮 -->
+      <div class="p-4 border-t" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
+        <button
+          @click="handleLogout"
+          class="flex items-center w-full p-2 rounded-lg transition-colors duration-200"
+          :class="[
+            isDarkMode
+              ? 'text-gray-400 hover:bg-gray-700 hover:text-white'
+              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+          ]"
+        >
+          <LogOutIcon class="w-5 h-5 mr-3" />
+          {{ t('admin.logout') }}
+        </button>
+      </div>
     </aside>
 
     <!-- Main Content -->
     <div class="flex-1 flex flex-col h-full">
       <!-- Header -->
-      <header class="shadow-md border-b transition-colors duration-300 h-16"
-        :class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']">
+      <header
+        class="shadow-md border-b transition-colors duration-300 h-16"
+        :class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']"
+      >
         <div class="flex items-center justify-between h-16 px-4">
           <button @click="toggleSidebar" class="lg:hidden">
             <MenuIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
@@ -63,8 +96,10 @@
       </header>
 
       <!-- Content -->
-      <main class="overflow-y-auto transition-colors duration-300 custom-scrollbar"
-        :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']">
+      <main
+        class="overflow-y-auto transition-colors duration-300 custom-scrollbar"
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
+      >
         <router-view />
       </main>
     </div>
@@ -73,9 +108,18 @@
 
 <script setup lang="ts">
 import { ref, inject, onMounted, onUnmounted } from 'vue'
-import { BoxIcon, MenuIcon, XIcon, FolderIcon, CogIcon, LayoutDashboardIcon } from 'lucide-vue-next'
+import {
+  BoxIcon,
+  MenuIcon,
+  XIcon,
+  FolderIcon,
+  CogIcon,
+  LayoutDashboardIcon,
+  LogOutIcon
+} from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { useAdminStore } from '@/stores/adminStore'
 
 interface MenuItem {
   id: string
@@ -87,9 +131,20 @@ interface MenuItem {
 const router = useRouter()
 const { t } = useI18n()
 const isDarkMode = inject('isDarkMode')
+const adminStore = useAdminStore()
 const menuItems: MenuItem[] = [
-  { id: 'Dashboard', name: t('admin.dashboard.title'), icon: LayoutDashboardIcon, redirect: '/admin/dashboard' },
-  { id: 'FileManage', name: t('admin.fileManage.title'), icon: FolderIcon, redirect: '/admin/files' },
+  {
+    id: 'Dashboard',
+    name: t('admin.dashboard.title'),
+    icon: LayoutDashboardIcon,
+    redirect: '/admin/dashboard'
+  },
+  {
+    id: 'FileManage',
+    name: t('admin.fileManage.title'),
+    icon: FolderIcon,
+    redirect: '/admin/files'
+  },
   { id: 'Settings', name: t('admin.settings.title'), icon: CogIcon, redirect: '/admin/settings' }
 ]
 
@@ -138,6 +193,12 @@ const loadFiles = async () => {
 onMounted(() => {
   loadFiles()
 })
+
+// 登出处理
+const handleLogout = () => {
+  adminStore.logout()
+  router.push('/login')
+}
 </script>
 
 <style>
@@ -169,11 +230,11 @@ onMounted(() => {
   background-color: #4b5563;
 }
 
-input:checked+.slider {
+input:checked + .slider {
   background-color: #4f46e5;
 }
 
-.dark input:checked+.slider {
+.dark input:checked + .slider {
   background-color: #4f46e5;
 }