顶部调整完成

src/components/layout/AppHeader.vue

@@ -2,15 +2,72 @@
   <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">苏</span>
+        <span class="app-header-username">苏小苏</span>
+      </div>
+      <button type="button" class="app-header-logout" @click="handleLogout">
+        退出
+      </button>
     </div>
   </header>
 </template>
 
 <script setup>
+import { 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 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">
@@ -38,6 +95,89 @@ defineOptions({
 }
 
 .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>