client-wms-board/src/common/PageHeader.vue

<!-- 顶部信息栏 -->
<template>
  <header class="page-header">
    <div class="header-left">
      <button v-if="showBack" class="action-btn back-btn" @click="handleBack">
        <i class="fas fa-arrow-left mr-1" /> 返回
      </button>
      <div class="user-info">
        <i class="fas fa-user text-blue-500 mr-2" />
        <span class="font-medium">{{ operatorName }}</span>
        <!-- <span class="font-medium">操作员：{{ operatorName }} (ID: {{ operatorId }})</span> -->
      </div>
    </div>
    <div v-if="title" class="header-center">
      <h1 class="page-header-title">{{ title }}</h1>
    </div>
    <div class="header-right">
      <!-- 自定义插槽，用于插入额外按钮（如领料车） -->
      <slot name="actions" />

      <!-- 设置下拉菜单 -->
      <div ref="settingsDropdown" class="settings-dropdown">
        <button class="action-btn settings-btn" @click="toggleSettings">
          <i class="fas fa-cog" />
        </button>
        <div v-if="showSettings" class="dropdown-menu">
          <div class="dropdown-item" @click="goToFingerprintEnroll">
            <i class="fas fa-fingerprint mr-2" />
            <span>指纹录入</span>
          </div>
        </div>
      </div>

      <button class="action-btn logout-btn" @click="handleLogout">
        <i class="fas fa-sign-out-alt mr-1" /> 登出
      </button>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, defineProps, defineEmits, onMounted, onUnmounted } from 'vue';

const props = defineProps({
    showBack: {
        type: Boolean,
        default: true,
    },
    isGoHome: {
        type: Boolean,
        default: true,
    },
    isCustomBack: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '',
    },
});

const emit = defineEmits(['back', 'logout']);
const router = useRouter();

const operatorName = ref('管理员');
const operatorId = ref('lw001');
const showSettings = ref(false);
const settingsDropdown = ref(null);

onMounted(() => {
    const loginInfo = JSON.parse(localStorage.getItem('#LoginInfo'));
    if (loginInfo) {
        operatorName.value = loginInfo.userName;
        operatorId.value = loginInfo.userId;
    }
    // 添加点击外部关闭下拉菜单的事件监听
    document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
    // 移除事件监听
    document.removeEventListener('click', handleClickOutside);
});

const handleBack = () => {
    if (props.isCustomBack) {
        emit('back');
        return;
    }
    if (props.isGoHome) {
        router.push('/home');
    } else {
        router.back();
    }
    emit('back');
};

const handleLogout = () => {
    emit('logout');
    localStorage.removeItem('#LoginInfo');
    localStorage.removeItem('#token');
    localStorage.removeItem('#accountId');

    // 检查localStorage中的isOut值，如果为true则在登录页面添加isOut参数
    const isOut = localStorage.getItem('isOut') === 'true';
    if (isOut) {
        router.push({ path: '/fingerprint-login', query: { isOut: 'true' } });
    } else {
        router.push('/fingerprint-login');
    }
};

// 切换设置下拉菜单
const toggleSettings = event => {
    event.stopPropagation();
    showSettings.value = !showSettings.value;
};

// 点击外部关闭下拉菜单
const handleClickOutside = event => {
    if (settingsDropdown.value && !settingsDropdown.value.contains(event.target)) {
        showSettings.value = false;
    }
};

// 跳转到指纹录入页面
const goToFingerprintEnroll = () => {
    showSettings.value = false;
    router.push('/fingerprint-enroll');
};
</script>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.header-left > * {
  margin-right: 1rem;
}

.header-left > *:last-child {
  margin-right: 0;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.page-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.header-right > * {
  margin-left: 0.75rem;
}

.header-right > *:first-child {
  margin-left: 0;
}

.user-info {
  display: flex;
  align-items: center;
}

.action-btn {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.back-btn {
  background-color: #f3f4f6;
  color: #374151;
}

.back-btn:hover {
  background-color: #e5e7eb;
}

.logout-btn {
  background-color: #fee2e2;
  color: #dc2626;
}

.logout-btn:hover {
  background-color: #fecaca;
}

/* 设置下拉菜单样式 */
.settings-dropdown {
  position: relative;
}

.settings-btn {
  background-color: #f3f4f6;
  color: #374151;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  /* margin-right: 0.75rem; */
}

.settings-btn:hover {
  background-color: #e5e7eb;
}

.settings-btn i {
  font-size: 24px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 200px;
  z-index: 1000;
  overflow: hidden;
  animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #374151;
  font-size: 1.3rem;
  font-weight: 600;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
}

.dropdown-item i {
  color: #3b82f6;
  font-size: 1.2rem;
  margin-right: 0.75rem;
}
</style>