mark-web/src/components/CommonMarkHeader.vue

<template>
  <div
    v-if="store.setting"
    class="tw-flex tw-gap-4 tw-justify-start tw-items-center header-container"
  >
    <div
      v-if="!isSingleStudent"
      class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
      style="margin-right: -16px"
      :class="[store.historyOpen && 'menu-toggled']"
      @click="store.toggleHistory"
    >
      <span title="回看" class="tw-inline-flex tw-place-content-center">
        <img
          src="../features/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">
      <slot name="taskInfo">
        <div>
          <span class="header-small-text">编号</span>
          <span class="highlight-text">
            {{ store.currentTask?.secretNumber ?? "-" }}
          </span>
        </div>
      </slot>
    </div>

    <div
      v-if="!isSingleStudent"
      class="tw-flex tw-gap-2 tw-items-center tw-flex-1"
    >
      <slot />
    </div>

    <div class="tw-flex-1"></div>
    <a-popover
      v-if="store.isScanImage"
      title="小助手"
      trigger="hover"
      class="tw-cursor-pointer tw-flex tw-gap-2 tw-items-center"
    >
      <template #content>
        <table class="assistant-table">
          <tr v-if="store.setting.subject.paperUrl && showPaperAndAnswer">
            <td>试卷</td>
            <td>
              <a-switch
                v-model:checked="store.setting.uiSetting['paper.modal']"
              />
            </td>
          </tr>
          <tr v-if="store.setting.subject.answerUrl && showPaperAndAnswer">
            <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>
          <tr v-if="store.isScanImage">
            <td>分数/标记大小</td>
            <td>
              <a-slider
                v-model:value="store.setting.uiSetting['score.fontSize.scale']"
                :min="0.5"
                :step="0.1"
                :max="2"
                style="margin: 0"
              />
            </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-cursor-pointer tw-items-center tw-flex-1">
      <div
        v-if="store.setting.groupNumber !== -987654"
        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-mr-1"
      >
        <span class="header-small-text">分组</span>
        <span class="highlight-text">
          {{ store.setting.groupNumber }}
        </span>
      </div>
    </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 tw-pr-4"
      @click="closeWindow"
    >
      <PoweroffOutlined class="icon-font icon-with-text" />关闭
    </div>

    <div
      v-if="showScoreBoard"
      class="tw-flex tw-place-content-center tw-cursor-pointer tw-justify-self-end menu"
      :class="[
        store.isScoreBoardVisible && store.currentTask && 'menu-toggled',
      ]"
      style="margin-left: -16px"
      @click="store.toggleScoreBoard"
    >
      <span
        title="给分板"
        class="tw-inline-flex tw-place-content-center tw-relative"
      >
        <img
          src="../features/mark/images/right-menu.svg"
          :class="[store.isScoreBoardVisible && 'svg-red']"
        />
      </span>
      <div
        v-if="store.isScoreBoardVisible && store.currentTask"
        class="triangle"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { store } from "@/store/store";
import {
  UserOutlined,
  PoweroffOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import { AxiosResponse } from "axios";

const {
  isSingleStudent = true,
  clearTasks,
  showPaperAndAnswer = false,
  showScoreBoard = false,
} = defineProps<{
  isSingleStudent?: boolean;
  clearTasks?: () => Promise<AxiosResponse<void, any>>;
  showPaperAndAnswer?: boolean;
  showScoreBoard?: boolean;
}>();

async function updateClearTask() {
  clearTasks && (await clearTasks());
}

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

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

<style scoped>
.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 :deep(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);
}

.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;
}
</style>