eiacloud-mcp-ui/src/components/layout/AppHeader.vue

<template>
  <header class="app-header">
    <h1 class="app-header-title">前期研究前置报告计划管理系统</h1>
    <div class="app-header-right">
      <div class="app-header-datetime">
        <div class="app-header-time">{{ currentTime }}</div>
        <div class="app-header-date">{{ currentDate }}</div>
      </div>
      <div class="app-header-divider"></div>
      <div class="app-header-user">
        <span class="app-header-avatar">{{ avatarText }}</span>
        <span class="app-header-username">{{ displayName }}</span>
      </div>
      <button type="button" class="app-header-logout" @click="handleLogout">
        退出
      </button>
    </div>
  </header>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { loginout } from "@/api/login";
import globalStore from "@/store/modules/global";

defineOptions({
  name: "AppHeader",
});

const router = useRouter();
const global = globalStore();
const currentTime = ref("");
const currentDate = ref("");
let timer = null;

/** 暂写死，后续接登录用户信息 */
const displayName = "苏小苏";
const avatarText = computed(() => displayName.slice(0, 1) || "");

const WEEKDAYS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

const padZero = (num) => String(num).padStart(2, "0");

const updateDateTime = () => {
  const now = new Date();
  currentTime.value = `${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
  currentDate.value = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日   ${WEEKDAYS[now.getDay()]}`;
};

const handleLogout = async () => {
  try {
    await loginout();
  } catch (error) {
    console.error(error);
  } finally {
    global.logout();
    ElMessage.success("已退出登录");
    router.replace({ name: "login" });
  }
};

onMounted(() => {
  updateDateTime();
  timer = window.setInterval(updateDateTime, 1000);
});

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<style scoped lang="scss">
.app-header {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 40px;
  background: linear-gradient(135deg, #238be5 60%);
  box-shadow: 0px 4px 12px 0px rgba(34, 125, 205, 0.1);
  border-radius: 0;
}

.app-header-title {
  margin: 0;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 28px;
  color: #ffffff;
  line-height: 39px;
  letter-spacing: 2px;
  text-align: left;
}

.app-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 40px;
}

.app-header-datetime {
  display: flex;
  flex-direction: column;
}

.app-header-time {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 15px;
  color: #ffffff;
  line-height: 21px;
  text-align: right;
}

.app-header-date {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 20px;
  text-align: right;
  font-style: normal;
}

.app-header-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.6);
}

.app-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header-avatar {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #e6f8ff;
  border-radius: 18px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  color: #238be5;
}

.app-header-username {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 21px;
  text-align: left;
  font-style: normal;
}

.app-header-logout {
  margin: 0;
  padding: 6px 16px;
  border-radius: 2px;
  border: 1px solid #ffffff;
  background: transparent;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
</style>