mark-web/src/features/arbitrate/MarkHeader.vue

<template>
  <div v-if="store.setting && store.setting.subject.name" class="mark-header">
    <div class="mark-header-part">
      <div
        v-if="!isSingleStudent"
        :class="['header-menu', { 'is-toggled': store.historyOpen }]"
        @click="store.toggleHistory"
      >
        <img class="header-icon" src="@/assets/icons/icon-left-menu.svg" />回评
      </div>
      <div class="header-subject" :title="store.setting.subject.name">
        <div>
          {{
            `${store.setting.subject.code ?? ""}-${
              store.setting.subject.name ?? ""
            }`
          }}
        </div>
      </div>
      <div class="header-secret">
        <div class="header-noun">
          <span>编号：</span>
          <span>
            {{ store.currentTask?.secretNumber ?? "-" }}
          </span>
        </div>
      </div>
      <div v-if="!isSingleStudent" class="header-total">
        <span class="header-noun">
          <span>待处理：</span>
          <transition-group name="count-animation" tag="span">
            <span :key="store.status.totalCount || 0">
              {{ store.status.totalCount }}
            </span>
          </transition-group>
        </span>
        <span class="header-noun">
          <span>已处理：</span>
          <transition-group name="count-animation" tag="span">
            <span :key="store.status.markedCount || 0">
              {{ store.status.markedCount }}
            </span>
          </transition-group>
        </span>
      </div>
    </div>

    <div class="mark-header-part">
      <div class="header-text-btn">
        <img src="@/assets/icons/icon-track-mode.svg" class="header-icon" />
        {{ modeName }}
      </div>
      <div class="header-text-btn header-logout" @click="logout">
        <img class="header-icon" src="@/assets/icons/icon-return.svg" />返回
      </div>
      <a-tooltip v-if="store.isTrackMode" placement="bottomRight">
        <template #title>弹出给分板</template>
        <div
          :class="[
            'header-menu',
            { 'is-toggled': store.isScoreBoardVisible && store.currentTask },
          ]"
          @click="store.toggleScoreBoard"
        >
          <img src="@/assets/icons/icon-right-menu.svg" class="header-icon" />
        </div>
      </a-tooltip>
      <div v-else class="header-menu is-toggled">
        <img src="@/assets/icons/icon-right-menu.svg" class="header-icon" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { store } from "@/store/app";
import { doLogout } from "@/api/markPage";

const { isSingleStudent = false } = defineProps<{
  isSingleStudent?: boolean;
}>();

const modeName = $computed(() =>
  store.setting.mode === "TRACK" ? "轨迹模式" : "普通模式"
);

const logout = () => {
  doLogout();
};
</script>