修改登录退出逻辑

inventory-web/src/App.vue

@@ -1,6 +1,43 @@
 <script setup lang="ts">
-// 1. 引入需要的图标组件
-import { InfoFilled } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { InfoFilled, SwitchButton, UserFilled } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/user'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+// --- 退出登录逻辑 Start ---
+const handleLogout = () => {
+  ElMessageBox.confirm(
+      '确定要退出系统吗？',
+      '提示',
+      {
+        confirmButtonText: '确定退出',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(async () => {
+        // 1. 调用 Store 的 logout 清除状态
+        userStore.logout()
+
+        // 2. 提示消息
+        ElMessage({
+          type: 'success',
+          message: '已安全退出',
+        })
+
+        // 3. [关键修改] 强制跳转回登录页
+        // 使用 replace，这样用户点浏览器“返回”按钮不会又回到系统里
+        // 此时 store.token 已为空，路由守卫会放行 /login
+        await router.replace('/login')
+      })
+      .catch(() => {
+        // 取消操作
+      })
+}
+// --- 退出登录逻辑 End ---
 </script>
 
 <template>
@@ -14,6 +51,22 @@ import { InfoFilled } from '@element-plus/icons-vue'
       </div>
 
       <div class="header-right">
+        <div class="user-profile">
+          <el-avatar :size="32" :icon="UserFilled" class="user-avatar" />
+          <span class="user-name">{{ userStore.username || '管理员' }}</span>
+        </div>
+
+        <el-divider direction="vertical" />
+
+        <el-button
+            type="danger"
+            link
+            @click="handleLogout"
+            class="logout-btn"
+        >
+          <el-icon style="margin-right: 4px; font-size: 16px"><SwitchButton /></el-icon>
+          退出
+        </el-button>
       </div>
     </header>
 
@@ -31,35 +84,16 @@ import { InfoFilled } from '@element-plus/icons-vue'
 </template>
 
 <style>
-/* 注意：App.vue 中的 style 标签通常不加 scoped，
-  或者将全局样式(html, body)单独放在一个 style 标签中，
-  以确保 html, body 的高度设置能生效
-*/
-
-/* --- 全局重置样式 Start --- */
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  background-color: #f5f7fa; /* 整体背景色 */
-  overflow: hidden; /* 防止最外层出现双滚动条 */
-}
-
-#app {
-  height: 100%;
-}
-/* --- 全局重置样式 End --- */
-
+/* 保持原有的样式，不需要改动 */
 .app-wrapper {
   display: flex;
   flex-direction: column;
-  height: 100vh; /* 强制占满视口高度 */
+  height: 100vh;
+  width: 100vw;
   overflow: hidden;
+  background-color: #f5f7fa;
 }
 
-/* 顶部栏样式 */
 .app-header {
   height: 60px;
   background-color: #ffffff;
@@ -68,56 +102,88 @@ html, body {
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  flex-shrink: 0; /* 禁止被压缩 */
-  z-index: 1000; /* 确保头部在最上层 */
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  flex-shrink: 0;
+  z-index: 1000;
 }
 
 .logo-container {
   display: flex;
   align-items: center;
+  height: 100%;
 }
 
 .home-link {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 12px;
   text-decoration: none;
   cursor: pointer;
+  height: 100%;
   user-select: none;
 }
 
 .logo {
-  height: 36px; /* 稍微调整高度适配 */
+  height: 32px;
   width: auto;
+  object-fit: contain;
 }
 
 .system-title {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 600;
   color: #303133;
-  letter-spacing: 1px;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: default;
+}
+
+.user-avatar {
+  background-color: #409eff;
+}
+
+.user-name {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.logout-btn {
+  font-weight: 400;
+  padding: 4px 8px;
+}
+.logout-btn:hover {
+  color: #f56c6c !important;
 }
 
-/* 内容区样式 */
 .app-content {
-  flex: 1; /* 自动占据剩余空间 */
-  overflow: hidden; /* 这里设为 hidden，让内部的 Layout 组件去处理滚动 */
+  flex: 1;
+  min-height: 0;
+  width: 100%;
   position: relative;
-  /* 如果您希望整个页面有内边距，可以加 padding；
-     但通常建议 padding 加在具体的业务页面里，保持 Layout 铺满 */
-  padding: 0;
+  overflow: hidden;
 }
 
-/* 底部栏样式 */
 .app-footer {
-  height: 36px;
+  height: 30px;
   background-color: #f0f2f5;
   border-top: 1px solid #e4e7ed;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0; /* 禁止被压缩 */
+  flex-shrink: 0;
   font-size: 12px;
   color: #909399;
   z-index: 1000;
@@ -126,10 +192,5 @@ html, body {
 .version-tag {
   display: flex;
   align-items: center;
-  font-weight: 500;
-  color: #e6a23c; /* 橙色警告色 */
-  background: rgba(230, 162, 60, 0.1); /* 淡橙色背景 */
-  padding: 2px 8px;
-  border-radius: 4px;
 }
 </style>