抽象放大缩小的组件

src/components/ZoomPaper.vue

@@ -0,0 +1,67 @@
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+import type { UnionStore } from "@/types";
+import {
+  ZoomInOutlined,
+  ZoomOutOutlined,
+  FullscreenOutlined,
+} from "@ant-design/icons-vue";
+import { defineProps, computed } from "vue";
+
+const props = defineProps<{ store: UnionStore }>();
+const { store } = props;
+
+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 greaterThanOneScale = computed(() => {
+  return store.setting.uiSetting["answer.paper.scale"] > 1;
+});
+const lessThanOneScale = computed(() => {
+  return store.setting.uiSetting["answer.paper.scale"] < 1;
+});
+</script>
+
+<style scoped>
+.icon-font {
+  display: block;
+}
+.icon-font-size-20 {
+  font-size: 20px;
+}
+</style>

src/features/arbitrate/MarkHeader.vue

@@ -33,29 +33,7 @@
         }}</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>
+    <ZoomPaper :store="store" />
     <div @click="toggleHistory" v-if="!isSingleStudent" title="回看">
       <SnippetsOutlined
         class="icon-font icon-font-size-20 tw-cursor-pointer"
@@ -116,12 +94,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
+import { onMounted } from "vue";
 import { store } from "@/features/mark/store";
 import {
-  ZoomInOutlined,
-  ZoomOutOutlined,
-  FullscreenOutlined,
   SnippetsOutlined,
   UserOutlined,
   PoweroffOutlined,
@@ -129,6 +104,7 @@ import {
 } 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;
@@ -142,29 +118,9 @@ const {
   historyId: 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 updateClearTask() {
   await clearArbitrateTask(libraryId, subjectCode, groupNumber);
 }

src/features/library/inspect/MarkHeader.vue

@@ -26,29 +26,7 @@
         待复核<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>
+    <ZoomPaper :store="store" />
     <div class="tw-flex tw-place-items-center">
       <UserOutlined class="icon-font icon-with-text" />{{
         store.setting.userName
@@ -64,17 +42,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { store } from "@/features/mark/store";
-import {
-  ZoomInOutlined,
-  ZoomOutOutlined,
-  FullscreenOutlined,
-  UserOutlined,
-  PoweroffOutlined,
-} from "@ant-design/icons-vue";
+import { UserOutlined, PoweroffOutlined } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
 import { clearInspectedTask } from "@/api/libraryInspectPage";
+import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const route = useRoute();
 let isSingleStudent = ref(false);
@@ -84,26 +57,6 @@ const { subjectCode, groupNumber } = route.query as {
   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 greaterThanOneScale = computed(() => {
-  return store.setting.uiSetting["answer.paper.scale"] > 1;
-});
-const lessThanOneScale = computed(() => {
-  return store.setting.uiSetting["answer.paper.scale"] < 1;
-});
-
 async function updateClearTask() {
   await clearInspectedTask(subjectCode, groupNumber);
 }
@@ -136,9 +89,6 @@ onMounted(() => {
 .icon-font {
   display: block;
 }
-.icon-font-size-20 {
-  font-size: 20px;
-}
 .icon-with-text {
   font-size: 18px;
   line-height: 18px;

src/features/library/libraryTrack/MarkHeader.vue

@@ -14,29 +14,7 @@
         }}</span>
       </div>
     </div>
-    <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>
+    <ZoomPaper :store="store" />
     <div
       class="tw-flex tw-place-content-center tw-cursor-pointer"
       style="max-width: 8%"
@@ -59,34 +37,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import { store } from "@/features/mark/store";
-import {
-  ZoomInOutlined,
-  ZoomOutOutlined,
-  FullscreenOutlined,
-  PoweroffOutlined,
-} from "@ant-design/icons-vue";
-
-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 greaterThanOneScale = computed(() => {
-  return store.setting.uiSetting["answer.paper.scale"] > 1;
-});
-const lessThanOneScale = computed(() => {
-  return store.setting.uiSetting["answer.paper.scale"] < 1;
-});
+import { PoweroffOutlined } from "@ant-design/icons-vue";
+import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const closeWindow = async () => {
   window.close();
@@ -108,9 +61,6 @@ const closeWindow = async () => {
 .icon-font {
   display: block;
 }
-.icon-font-size-20 {
-  font-size: 20px;
-}
 .icon-with-text {
   font-size: 18px;
   line-height: 18px;

src/features/library/quality/MarkHeader.vue

@@ -21,29 +21,7 @@
         }}</span>
       </div>
     </div>
-    <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>
+    <ZoomPaper :store="store" />
     <a-popover title="小助手" trigger="hover" class="tw-cursor-pointer">
       <template #content>
         <table class="assistant-table">
@@ -96,36 +74,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
 import { store } from "@/features/mark/store";
 import {
-  ZoomInOutlined,
-  ZoomOutOutlined,
-  FullscreenOutlined,
   UserOutlined,
   PoweroffOutlined,
   DownOutlined,
 } from "@ant-design/icons-vue";
-
-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 greaterThanOneScale = computed(() => {
-  return store.setting.uiSetting["answer.paper.scale"] > 1;
-});
-const lessThanOneScale = computed(() => {
-  return store.setting.uiSetting["answer.paper.scale"] < 1;
-});
+import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const closeWindow = async () => {
   window.close();
@@ -147,9 +102,7 @@ const closeWindow = async () => {
 .icon-font {
   display: block;
 }
-.icon-font-size-20 {
-  font-size: 20px;
-}
+
 .icon-with-text {
   font-size: 18px;
   line-height: 18px;

src/features/mark/MarkHeader.vue

@@ -66,29 +66,7 @@
         进度<span class="highlight-text">{{ progress ?? "-" }}%</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>
+    <ZoomPaper :store="store" />
     <div>
       <a-dropdown class="header-bg-color">
         <template #overlay v-if="!store.setting.forceMode">
@@ -243,9 +221,6 @@ import { doLogout } from "@/api/markPage";
 import { computed, defineEmit, ref, watchEffect } from "vue";
 import { store } from "./store";
 import {
-  ZoomInOutlined,
-  ZoomOutOutlined,
-  FullscreenOutlined,
   SnippetsOutlined,
   UserOutlined,
   PoweroffOutlined,
@@ -259,8 +234,9 @@ import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";
 import MarkProblemDialog from "./MarkProblemDialog.vue";
 import { isNumber } from "lodash";
 import { Modal } from "ant-design-vue";
+import ZoomPaper from "@/components/ZoomPaper.vue";
 
-const emit = defineEmit(["should-reload-history"]);
+defineEmit(["should-reload-history"]);
 
 const modeName = computed(() =>
   store.setting.mode === ModeEnum.TRACK ? "轨迹模式" : "普通模式"
@@ -293,29 +269,9 @@ const progress = computed(() => {
   return p;
 });
 
-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;
-});
-
 const logout = () => {
   doLogout();
 };

src/features/student/inspect/MarkHeader.vue

@@ -26,29 +26,7 @@
         待复核<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>
+    <ZoomPaper :store="store" />
     <div @click="toggleHistory" v-if="!isSingleStudent" title="回看">
       <SnippetsOutlined
         class="icon-font icon-font-size-20 tw-cursor-pointer"
@@ -73,17 +51,15 @@
 
 <script setup lang="ts">
 import { clearInspectedTask } from "@/api/inspectPage";
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { store } from "../store";
 import {
-  ZoomInOutlined,
-  ZoomOutOutlined,
-  FullscreenOutlined,
   SnippetsOutlined,
   UserOutlined,
   PoweroffOutlined,
 } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
+import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const route = useRoute();
 let isSingleStudent = ref(false);
@@ -93,29 +69,9 @@ const { studentId, subjectCode } = route.query as {
   subjectCode: 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 updateClearTask() {
   await clearInspectedTask(studentId, subjectCode);
 }

src/features/student/store.ts

@@ -1,4 +1,4 @@
-import { InspectStore, Task } from "@/types";
+import { InspectStore } from "@/types";
 import { reactive } from "vue";
 
 const obj = {

src/features/student/studentTrack/MarkHeader.vue

@@ -14,29 +14,7 @@
         }}</span>
       </div>
     </div>
-    <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>
+    <ZoomPaper :store="store" />
     <div
       class="tw-flex tw-place-items-center tw-cursor-pointer"
       @click="closeWindow"
@@ -47,34 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import { store } from "../store";
-import {
-  ZoomInOutlined,
-  ZoomOutOutlined,
-  FullscreenOutlined,
-  PoweroffOutlined,
-} from "@ant-design/icons-vue";
-
-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 greaterThanOneScale = computed(() => {
-  return store.setting.uiSetting["answer.paper.scale"] > 1;
-});
-const lessThanOneScale = computed(() => {
-  return store.setting.uiSetting["answer.paper.scale"] < 1;
-});
+import { PoweroffOutlined } from "@ant-design/icons-vue";
+import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const closeWindow = async () => {
   window.close();
@@ -96,9 +49,7 @@ const closeWindow = async () => {
 .icon-font {
   display: block;
 }
-.icon-font-size-20 {
-  font-size: 20px;
-}
+
 .icon-with-text {
   font-size: 18px;
   line-height: 18px;

src/types/index.ts

@@ -221,3 +221,5 @@ export type MarkHistoryOrderBy =
   | "seceretNumber"
   | undefined;
 export type MarkHistorySortField = "ASC" | "DESC" | undefined;
+
+export type UnionStore = MarkStore | InspectStore;