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

<template>
  <div
    class="
      tw-flex tw-gap-4 tw-justify-between tw-items-center
      header-container
      tw-px-1
    "
    v-if="store.setting"
  >
    <div>
      {{
        `${store.setting.subject.code ?? ""}-${
          store.setting.subject.name ?? ""
        }`
      }}
    </div>
    <div class="tw-flex tw-gap-1">
      <div>
        编号<span class="highlight-text">{{
          store.currentTask?.secretNumber
        }}</span>
      </div>
    </div>
    <ul v-if="!isSingleStudent" class="tw-flex tw-gap-2 tw-mb-0">
      <li>
        待复核<span class="highlight-text">{{ store.status.totalCount }}</span>
      </li>
    </ul>
    <ul class="tw-flex tw-gap-2 tw-mb-0">
      <li @click="upScale" title="放大">
        <ZoomInOutlined
          class="icon-font icon-font-size-20 tw-cursor-pointer"
          :style="{
            color: greaterThanOneScale ? 'red' : 'white',
          }"
        />
      </li>
      <li @click="downScale" title="缩小">
        <ZoomOutOutlined
          class="icon-font icon-font-size-20 tw-cursor-pointer"
          :style="{
            color: lessThanOneScale ? 'red' : 'white',
          }"
        />
      </li>
      <li @click="normalScale" title="适应">
        <FullscreenOutlined
          class="icon-font icon-font-size-20 tw-cursor-pointer"
        />
      </li>
    </ul>
    <!-- <div @click="toggleHistory" v-if="!isSingleStudent" title="回看">
      <HistoryOutlined class="icon-font icon-font-size-20" />
    </div> -->
    <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>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { store } from "@/features/mark/store";
import {
  ZoomInOutlined,
  ZoomOutOutlined,
  FullscreenOutlined,
  HistoryOutlined,
  UserOutlined,
  PoweroffOutlined,
  AlertOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import { clearInspectedTask } from "@/api/libraryInspectPage";

export default defineComponent({
  name: "MarkHeader",
  components: {
    ZoomInOutlined,
    ZoomOutOutlined,
    FullscreenOutlined,
    HistoryOutlined,
    UserOutlined,
    PoweroffOutlined,
    AlertOutlined,
    QuestionCircleOutlined,
  },
  setup() {
    const route = useRoute();
    let isSingleStudent = ref(false);
    isSingleStudent.value = !!route.query.studentId;
    const { studentId, subjectCode, groupNumber } = route.query as {
      studentId: string;
      subjectCode: string;
      groupNumber: string;
    };

    const upScale = () => {
      const s = store.setting.uiSetting["answer.paper.scale"];
      if (s < 3)
        store.setting.uiSetting["answer.paper.scale"] = +(s + 0.2).toFixed(1);
    };
    const downScale = () => {
      const s = store.setting.uiSetting["answer.paper.scale"];
      if (s > 0.2)
        store.setting.uiSetting["answer.paper.scale"] = +(s - 0.2).toFixed(1);
    };
    const normalScale = () => {
      store.setting.uiSetting["answer.paper.scale"] = 1;
    };
    const toggleHistory = () => {
      store.historyOpen = !store.historyOpen;
    };
    const greaterThanOneScale = computed(() => {
      return store.setting.uiSetting["answer.paper.scale"] > 1;
    });
    const lessThanOneScale = computed(() => {
      return store.setting.uiSetting["answer.paper.scale"] < 1;
    });

    async function updateHistoryTask({
      pageNumber = 1,
      pageSize = 10,
    }: {
      pageNumber: number; // 从1开始
      pageSize: number;
    }) {
      // const res = await getInspectedHistory({
      //   pageNumber,
      //   pageSize,
      //   subjectCode,
      // });
      // if (res.data) {
      //   store.historyTasks.push(res.data);
      // }
    }

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

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

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

    return {
      store,
      isSingleStudent,
      upScale,
      downScale,
      normalScale,
      greaterThanOneScale,
      lessThanOneScale,
      updateHistoryTask,
      toggleHistory,
      closeWindow,
    };
  },
});
</script>

<style scoped>
.header-container {
  position: relative;
  font-size: 16px;
  height: 40px;

  background-color: #5d6d7d;
  color: white;
}
.highlight-text {
  color: #ffe400;
}
.icon-font {
  display: block;
}
.icon-font-size-20 {
  font-size: 20px;
}
.icon-with-text {
  font-size: 18px;
  line-height: 18px;
}
</style>