KCGL/inventory-web/src/App.vue

<script setup lang="ts">
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>
  <div class="app-wrapper">
    <header class="app-header">
      <div class="logo-container">
        <router-link to="/" class="home-link">
          <img src="@/assets/iris.png" class="logo" alt="Logo" />
          <span class="system-title">IRIS 库存管理系统</span>
        </router-link>
      </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>

    <main class="app-content">
      <router-view />
    </main>

    <footer class="app-footer">
      <span class="version-tag">
        <el-icon style="vertical-align: middle; margin-right: 4px"><InfoFilled /></el-icon>
        当前版本: 1.0 Beta (测试版)
      </span>
    </footer>
  </div>
</template>

<style>
/* 保持原有的样式，不需要改动 */
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #f5f7fa;
}

.app-header {
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  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: 12px;
  text-decoration: none;
  cursor: pointer;
  height: 100%;
  user-select: none;
}

.logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  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;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.app-footer {
  height: 30px;
  background-color: #f0f2f5;
  border-top: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  color: #909399;
  z-index: 1000;
}

.version-tag {
  display: flex;
  align-items: center;
}
</style>