mark-web/src/features/mark/MarkTool.vue

<template>
  <div class="mark-tool">
    <div>
      <div class="mark-tool-item" @click="toAllPage">
        <img src="@/assets/icons/icon-all-page.svg" />
        <p>全卷</p>
      </div>
      <div
        :class="[
          'mark-tool-item',
          { 'is-active': store.setting.uiSetting['minimap.modal'] },
        ]"
        @click="toThumbnail"
      >
        <img src="@/assets/icons/icon-thumbnail.svg" />
        <p>缩略图</p>
      </div>
      <div class="mark-tool-item" @click="toIssuePaper">
        <img src="@/assets/icons/icon-issue-paper.svg" />
        <p>问题试卷</p>
      </div>
      <div class="mark-tool-item tool-scale">
        <div>
          <span>Aa</span>
          <a-slider
            v-model:value="store.setting.uiSetting['score.fontSize.scale']"
            :min="0.5"
            :step="0.1"
            :max="2"
          />
        </div>
        <p>分数/标记大小</p>
      </div>
      <div
        :class="[
          'mark-tool-item',
          { 'is-active': store.setting.uiSetting['shortCut.modal'] },
        ]"
        @click="toShortcut"
      >
        <img src="@/assets/icons/icon-shortcut.svg" />
        <p>快捷键</p>
      </div>
      <div
        :class="[
          'mark-tool-item',
          { 'is-active': store.setting.uiSetting['specialTag.modal'] },
        ]"
        @click="toSpecialTag"
      >
        <img src="@/assets/icons/icon-special-tag.svg" />
        <p>特殊标记</p>
      </div>
    </div>
    <div>
      <div class="mark-tool-item" @click="toAllZero">
        <img src="@/assets/icons/icon-all-zero.svg" />
        <p>全部零分</p>
      </div>
      <div
        :class="['mark-tool-item', { 'is-active': greaterThanOneScale }]"
        @click="toMagnify"
      >
        <img src="@/assets/icons/icon-magnify.svg" />
        <p>放大</p>
      </div>
      <div
        :class="['mark-tool-item', { 'is-active': lessThanOneScale }]"
        @click="toMinify"
      >
        <img src="@/assets/icons/icon-minify.svg" />
        <p>缩小</p>
      </div>
      <div class="mark-tool-item" @click="toOrigin">
        <img src="@/assets/icons/icon-origin-size.svg" />
        <p>实际大小</p>
      </div>
    </div>
  </div>
  <MarkProblemDialog ref="problemRef" />
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted } from "vue";
import { store } from "@/store/store";
import { Modal } from "ant-design-vue";
import MarkProblemDialog from "./MarkProblemDialog.vue";

type ShowModalFunc = () => void;

const emit = defineEmits(["allZeroSubmit"]);
let problemRef = $ref<InstanceType<typeof MarkProblemDialog>>();

const toAllPage = () => {
  store.allPaperModal = !store.allPaperModal;
};
const toThumbnail = () => {
  store.setting.uiSetting["minimap.modal"] =
    !store.setting.uiSetting["minimap.modal"];
};
const toIssuePaper = () => {
  (problemRef.showModal as ShowModalFunc)();
};

const toShortcut = () => {
  store.setting.uiSetting["shortCut.modal"] =
    !store.setting.uiSetting["shortCut.modal"];
};
const toSpecialTag = () => {
  store.setting.uiSetting["specialTag.modal"] =
    !store.setting.uiSetting["specialTag.modal"];
};

const toAllZero = () => {
  Modal.confirm({
    title: "操作警告",
    content: "确定给全零分？",
    onOk() {
      emit("allZeroSubmit");
    },
  });
};
const toMagnify = () => {
  const s = store.setting.uiSetting["answer.paper.scale"];
  if (s < 3)
    store.setting.uiSetting["answer.paper.scale"] = +(s + 0.2).toFixed(1);
};
const toMinify = () => {
  const s = store.setting.uiSetting["answer.paper.scale"];
  if (s > 0.2)
    store.setting.uiSetting["answer.paper.scale"] = +(s - 0.2).toFixed(1);
};
const toOrigin = () => {
  store.setting.uiSetting["answer.paper.scale"] = 1;
};
const greaterThanOneScale = computed(() => {
  return store.setting.uiSetting["answer.paper.scale"] > 1;
});
const lessThanOneScale = computed(() => {
  return store.setting.uiSetting["answer.paper.scale"] < 1;
});
function keyListener(event: KeyboardEvent) {
  if (event.key === "+") {
    toMagnify();
  } else if (event.key === "-") {
    toMinify();
  }
}
onMounted(() => {
  document.addEventListener("keydown", keyListener);
});
onUnmounted(() => {
  document.removeEventListener("keydown", keyListener);
});
</script>