mark-web/src/features/student/inspect/MarkHeader.vue

<template>
  <div
    class="tw-flex tw-gap-4 tw-justify-start tw-items-center header-container"
    v-if="store.setting"
  >
    <div
      v-if="!isSingleStudent"
      class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
      :class="[store.historyOpen && 'menu-toggled']"
      @click="store.toggleHistory"
    >
      <span title="回看" class="tw-inline-flex tw-place-content-center">
        <img
          src="../../mark/images/left-menu.svg"
          :class="[store.historyOpen && 'svg-red']"
        />
      </span>
      <div v-if="store.historyOpen" class="triangle"></div>
    </div>
    <div
      class="
        tw-text-white
        tw-block
        tw-overflow-ellipsis
        tw-overflow-hidden
        tw-whitespace-nowrap
        header-big-text
        tw-ml-4
      "
    >
      {{
        `${store.setting.subject?.code ?? ""}-${
          store.setting.subject?.name ?? ""
        }`
      }}
    </div>
    <div class="tw-flex tw-gap-1">
      <div>
        <span class="header-small-text">编号</span>
        <span class="highlight-text">
          {{ store.currentTask?.secretNumber ?? "-" }}
        </span>
      </div>
    </div>
    <div
      v-if="!isSingleStudent"
      class="tw-flex tw-gap-2 tw-items-center tw-flex-1"
    >
      <span>
        <span class="header-small-text">待复核</span>
        <span class="highlight-text">{{ store.status.totalCount ?? "-" }}</span>
      </span>
    </div>
    <ZoomPaper v-if="store.isScanImage" :store="store" />
    <div class="tw-flex tw-place-items-center tw-justify-end tw-ml-auto">
      {{ store.setting.userName }}
    </div>
    <div
      class="tw-flex tw-place-items-center tw-cursor-pointer"
      @click="closeWindow"
    >
      <PoweroffOutlined class="icon-font icon-with-text" />关闭
    </div>
    <div
      class="
        tw-flex tw-place-content-center tw-cursor-pointer tw-justify-self-end
        menu
      "
      :class="[
        !store.setting.uiSetting['score.board.collapse'] &&
          store.currentTask &&
          'menu-toggled',
      ]"
      @click="toggleScoreBoard"
    >
      <span
        title="给分板"
        class="tw-inline-flex tw-place-content-center tw-relative"
      >
        <img
          src="../../mark/images/right-menu.svg"
          :class="[
            !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
          ]"
        />
      </span>
      <div
        v-if="
          !store.setting.uiSetting['score.board.collapse'] && store.currentTask
        "
        class="triangle"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { clearInspectedTask } from "@/api/inspectPage";
import { onMounted } from "vue";
import { store } from "@/store/store";
import { PoweroffOutlined } from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import ZoomPaper from "@/components/ZoomPaper.vue";

const route = useRoute();
let isSingleStudent = $ref(false);
isSingleStudent = !!route.query.studentId;
const { studentId, subjectCode } = route.query as {
  studentId: string;
  subjectCode: string;
};

async function updateClearTask() {
  await clearInspectedTask(studentId, subjectCode);
}

const closeWindow = async () => {
  await updateClearTask();
  window.close();
};

onMounted(() => {
  // 不确定是否一定能在关闭页面时调用
  window.addEventListener("beforeunload", () => {
    updateClearTask();
  });
});

const toggleScoreBoard = () => {
  store.setting.uiSetting["score.board.collapse"] =
    !store.setting.uiSetting["score.board.collapse"];
};
</script>

<style scoped>
.header-bg-color {
  background-color: var(--header-bg-color);
}
.header-container {
  position: relative;
  height: 56px;
  line-height: 16px;

  background-color: var(--header-bg-color);
  color: rgba(255, 255, 255, 0.5);
}
.menu {
  width: 56px;
  height: 56px;
  padding: 20px;
}
.menu:hover,
.menu-toggled {
  background-color: rgba(255, 255, 255, 0.2);
}

.header-container span {
  vertical-align: middle;
}
.header-big-text {
  font-size: 20px;
  line-height: 30px;
}
.header-small-text {
  font-size: var(--app-secondary-font-size);
}
.highlight-text {
  color: white;
  font-size: var(--app-title-font-size);
}
.header-bg-color.ant-btn:hover {
  background-color: var(--app-ant-select-bg-override-color) !important;
}

.assistant-table {
  z-index: 5500;
  border-collapse: separate;
  border-spacing: 0 1em;
  color: var(--app-bold-text-color);
  width: 240px;
}
.assistant-table tr td:nth-child(2) {
  text-align: right;
}
.svg-red {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
    brightness(104%) contrast(97%);
}
.triangle {
  background-color: white;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);

  position: absolute;
  bottom: -2px;
}
.dropdown-triangle {
  background-color: #8c8d9b;
  width: 7px;
  height: 5px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin-left: 4px;
}
.markcount-animation {
  animation: change-color 3s ease-in-out;
}
@keyframes change-color {
  0% {
    color: red;
  }
  100% {
    color: white;
  }
}
</style>