stmms-web/src/features/library/quality/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>
    <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>
</template>

<script setup lang="ts">
import { store, isScanImage } from "@/features/mark/store";
import {
  UserOutlined,
  PoweroffOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import ZoomPaper from "@/components/ZoomPaper.vue";

const closeWindow = async () => {
  window.close();
};
</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-with-text {
  font-size: 18px;
  line-height: 18px;
}
</style>