guoziwei_ui/src/components/layout/PageHeader.vue

<template>
  <div class="header-wrapper">
    <div class="title">青浦区国资委国有资产管理系统</div>
    <div class="header-actions">
      <div v-if="isManageActive" class="manage-context">
        <BaseSelect
          class="manage-context__group"
          text="当前集团"
          :selected-text="filterStore.selectManageGroup"
          :options="manageGroupOptions"
          :select-width="128"
          :max-options-height="320"
          @selected="filterStore.setManageGroup"
        />
        <span class="manage-context__user">{{ reporterDisplay }}</span>
      </div>
      <button
        type="button"
        class="notify-bell"
        title="消息通知"
        @click="showNotify = true"
      >
        通知
        <span v-if="unreadCount > 0" class="notify-bell__badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
      </button>
      <div class="nav-tabs">
        <BaseButton
          :class="{ 'nav-tab-item--active': isStatsActive }"
          text="数据统计"
          @click="goStats"
        />
        <BaseButton
          :class="{ 'nav-tab-item--active': isManageActive }"
          text="数据管理"
          @click="goManage"
        />
      </div>
    </div>

    <NotificationModal
      v-model:visible="showNotify"
      @unread-change="unreadCount = $event"
    />
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import BaseButton from '@/components/base/BaseButton.vue';
import BaseSelect from '@/components/base/BaseSelect.vue';
import NotificationModal from '@/components/layout/NotificationModal.vue';
import { useFilterStore } from '@/store/filter';
import { useNotificationStore } from '@/store/notification';
import { useUserStore } from '@/store/user';
import { GROUP_ORDER } from '@/utils/aggregateReportRecords';

const route = useRoute();
const router = useRouter();
const filterStore = useFilterStore();
const notificationStore = useNotificationStore();
const userStore = useUserStore();

const showNotify = ref(false);
const unreadCount = ref(0);

const isStatsActive = computed(() =>
  ['home', 'topic1', 'topic2', 'topic3'].includes(route.name)
);

const isManageActive = computed(() => route.path.startsWith('/manage'));

const manageGroupOptions = GROUP_ORDER.map((group) => ({ text: group, value: group }));

const reporterName = computed(
  () => userStore.userInfo?.username || userStore.userInfo?.name || '—'
);

const reporterRole = computed(
  () => userStore.userInfo?.roleName || userStore.userInfo?.role || '填报员'
);

const reporterDisplay = computed(() => `${reporterName.value} · ${reporterRole.value}`);

const goStats = () => {
  router.push('/home');
};

const goManage = () => {
  router.push('/manage/dashboard');
};

onMounted(() => {
  notificationStore.refresh().catch(() => {});
});
</script>

<style scoped>
.header-wrapper {
  width: 100%;
  max-width: var(--page-max-width);
  height: 64px;
  padding: 10px 24px;
  background: var(--color-surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.title {
  width: 448px;
  height: 40px;
  font-family: var(--font-semibold);
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.manage-context {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.manage-context__group {
  flex-shrink: 0;
}

.manage-context__group :deep(.filter-label) {
  color: var(--color-text-body);
}

.manage-context__group :deep(.filter-select) {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border-strong);
}

.manage-context__user {
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-body);
  white-space: nowrap;
}

.nav-tabs {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.notify-bell {
  position: relative;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-accent-border-strong);
  background: var(--color-accent-bg);
  cursor: pointer;
  font-family: var(--font-regular);
  font-size: 14px;
  color: var(--color-text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notify-bell__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-danger);
  color: #fff;
  font-family: var(--font-medium);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

@media screen and (max-width: 1440px) {
  .header-wrapper {
    width: 100%;
  }

  .manage-context {
    gap: 10px;
  }
}
</style>