mark-web/src/features/arbitrate/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="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
      "
    >
      {{
        `${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>
      <span>
        <span class="header-small-text">已处理</span>
        <span class="highlight-text">{{
          store.status.markedCount ?? "-"
        }}</span>
      </span>
    </div>
    <ZoomPaper v-if="isScanImage()" :store="store" />
    <a-popover
      v-if="isScanImage()"
      title="小助手"
      trigger="hover"
      class="tw-cursor-pointer"
    >
      <template #content>
        <table class="assistant-table">
          <tr v-if="store.setting.subject.paperUrl">
            <td>试卷</td>
            <td>
              <a-switch
                v-model:checked="store.setting.uiSetting['paper.modal']"
              />
            </td>
          </tr>
          <tr v-if="store.setting.subject.answerUrl">
            <td>答案</td>
            <td>
              <a-switch
                v-model:checked="store.setting.uiSetting['answer.modal']"
              />
            </td>
          </tr>
          <tr>
            <td>缩略图</td>
            <td>
              <a-switch
                v-model:checked="store.setting.uiSetting['minimap.modal']"
              />
            </td>
          </tr>
        </table>
      </template>
      <div class="tw-flex">
        小助手
        <DownOutlined
          style="font-size: 12px; display: inline-block"
          class="tw-self-center tw-ml-1"
        />
      </div>
    </a-popover>
    <div class="tw-flex tw-place-items-center">
      <UserOutlined class="icon-font icon-with-text" />{{
        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 { onMounted } from "vue";
import { store, isScanImage } from "@/features/mark/store";
import {
  SnippetsOutlined,
  UserOutlined,
  PoweroffOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import { clearArbitrateTask } from "@/api/arbitratePage";
import ZoomPaper from "@/components/ZoomPaper.vue";

const route = useRoute();
let isSingleStudent = !!route.query.historyId;
const {
  subjectCode,
  groupNumber,
  historyId: libraryId,
} = route.query as {
  subjectCode: string;
  groupNumber: string;
  historyId: string;
};

const toggleHistory = () => {
  store.historyOpen = !store.historyOpen;
};
async function updateClearTask() {
  await clearArbitrateTask(libraryId, subjectCode, groupNumber);
}

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>