script setup refactor step 3

src/features/mark/CommonMarkBody.vue

@@ -33,7 +33,6 @@
         <MarkDrawTrack
           :track-list="item.trackList"
           :special-tag-list="item.tagList"
-          :original-image="item.originalImage"
           :slice-image="item.sliceImage"
           :dx="item.dx"
           :dy="item.dy"

src/features/mark/MarkDrawTrack.vue

@@ -23,76 +23,62 @@
   </template>
 </template>
 
-<script lang="ts">
-import { ModeEnum, SpecialTag, Track } from "@/types";
-import { computed, defineComponent, PropType, watch } from "vue";
+<script setup lang="ts">
+import { ModeEnum } from "@/types";
+import type { SpecialTag, Track } from "@/types";
+import { computed, defineProps, watch } from "vue";
 import { store } from "./store";
 
-export default defineComponent({
-  name: "MarkDrawTrack",
-  props: {
-    trackList: {
-      type: Array as PropType<Array<Track>>,
-    },
-    specialTagList: {
-      type: Array as PropType<Array<SpecialTag>>,
-    },
-    originalImage: {
-      type: Object as PropType<HTMLImageElement>,
-    },
-    sliceImage: {
-      type: Object as PropType<HTMLImageElement>,
-      required: true,
-    },
-    dx: { type: Number, required: true },
-    dy: { type: Number, required: true },
-  },
-  setup({ trackList, originalImage, sliceImage, dx, dy }) {
-    const isTrackMode = computed(() => store.setting.mode === ModeEnum.TRACK);
+const props =
+  defineProps<{
+    trackList: Array<Track>;
+    specialTagList: Array<SpecialTag>;
+    sliceImage: HTMLImageElement;
+    dx: number;
+    dy: number;
+  }>();
+const { trackList, sliceImage, dx, dy } = props;
 
-    const computeTopAndLeft = (track: Track | SpecialTag) => {
-      const topInsideSlice = track.offsetY - dy;
-      const leftInsideSlice = track.offsetX - dx;
-      return {
-        top: (topInsideSlice / sliceImage.naturalHeight) * 100 + "%",
-        left: (leftInsideSlice / sliceImage.naturalWidth) * 100 + "%",
-        "font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
-      };
-    };
+const isTrackMode = computed(() => store.setting.mode === ModeEnum.TRACK);
 
-    const focusedTrack = (track: Track) => {
-      return store.focusTracks.includes(track);
-    };
+const computeTopAndLeft = (track: Track | SpecialTag) => {
+  const topInsideSlice = track.offsetY - dy;
+  const leftInsideSlice = track.offsetX - dx;
+  return {
+    top: (topInsideSlice / sliceImage.naturalHeight) * 100 + "%",
+    left: (leftInsideSlice / sliceImage.naturalWidth) * 100 + "%",
+    "font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
+  };
+};
 
-    watch(
-      () => store.focusTracks.length,
-      () => {
-        if (store.focusTracks.length === 0) return;
-        const minImageIndex = Math.min(
-          ...store.focusTracks.map((t) => t.offsetIndex)
-        );
-        const minImageOffsetY = Math.min(
-          ...store.focusTracks
-            .filter((t) => t.offsetIndex === minImageIndex)
-            .map((t) => t.offsetY)
-        );
-        const topTrack = store.focusTracks.find(
-          (t) =>
-            t.offsetIndex === minImageIndex && t.offsetY === minImageOffsetY
-        );
-        if (topTrack) {
-          document
-            .querySelector(
-              `#a${topTrack.mainNumber + topTrack.subNumber + topTrack.offsetY}`
-            )
-            ?.scrollIntoView({ behavior: "smooth" });
-        }
-      }
-    );
+const focusedTrack = (track: Track) => {
+  return store.focusTracks.includes(track);
+};
 
-    return { store, focusedTrack, isTrackMode, computeTopAndLeft };
-  },
-});
+watch(
+  () => store.focusTracks.length,
+  () => {
+    if (store.focusTracks.length === 0) return;
+    const minImageIndex = Math.min(
+      ...store.focusTracks.map((t) => t.offsetIndex)
+    );
+    const minImageOffsetY = Math.min(
+      ...store.focusTracks
+        .filter((t) => t.offsetIndex === minImageIndex)
+        .map((t) => t.offsetY)
+    );
+    const topTrack = store.focusTracks.find(
+      (t) => t.offsetIndex === minImageIndex && t.offsetY === minImageOffsetY
+    );
+    if (topTrack) {
+      document
+        .querySelector(
+          `#a${topTrack.mainNumber + topTrack.subNumber + topTrack.offsetY}`
+        )
+        ?.scrollIntoView({ behavior: "smooth" });
+    }
+  }
+);
 </script>
 
 <style scoped>

src/features/mark/MarkHeader.vue

@@ -238,9 +238,9 @@
   />
 </template>
 
-<script lang="ts">
-import { doLogout, getHistoryTask } from "@/api/markPage";
-import { computed, defineComponent, ref, watchEffect } from "vue";
+<script setup lang="ts">
+import { doLogout } from "@/api/markPage";
+import { computed, defineEmit, ref, watchEffect } from "vue";
 import { store } from "./store";
 import {
   ZoomInOutlined,
@@ -260,178 +260,107 @@ import MarkProblemDialog from "./MarkProblemDialog.vue";
 import { isNumber } from "lodash";
 import { Modal } from "ant-design-vue";
 
-export default defineComponent({
-  name: "MarkHeader",
-  components: {
-    ZoomInOutlined,
-    ZoomOutOutlined,
-    FullscreenOutlined,
-    SnippetsOutlined,
-    UserOutlined,
-    DownOutlined,
-    PoweroffOutlined,
-    ClockCircleOutlined,
-    QuestionCircleOutlined,
-    MarkChangeProfile,
-    MarkSwitchGroupDialog,
-    MarkProblemDialog,
-  },
-  emits: ["should-reload-history"],
-  setup() {
-    const modeName = computed(() =>
-      store.setting.mode === ModeEnum.TRACK ? "轨迹模式" : "普通模式"
-    );
-    const exchangeModeName = computed(() =>
-      store.setting.mode === ModeEnum.TRACK ? "普通模式" : "轨迹模式"
-    );
-    async function toggleSettingMode() {
-      if (store.setting.mode === ModeEnum.TRACK) {
-        store.setting.mode = ModeEnum.COMMON;
-      } else {
-        store.setting.mode = ModeEnum.TRACK;
-      }
-      // if (store.currentMarkResult) {
-      //   store.currentMarkResult.scoreList = [];
-      //   store.currentMarkResult.trackList = [];
-      // }
-      // if (store.currentTask) {
-      //   store.currentTask.questionList.forEach((q) => (q.score = null));
-      // }
-      // store.currentQuestion = undefined;
-      // store.currentScore = undefined;
+const emit = defineEmit(["should-reload-history"]);
 
-      const body = document.querySelector("body");
-      if (body) body.innerHTML = "重新加载中...";
-      // 等待一秒后，重新加载页面
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      window.location.reload();
-    }
-    const progress = computed(() => {
-      const { totalCount, markedCount } = store.status;
-      if (totalCount <= 0) return 0;
-      let p = markedCount / totalCount;
-      if (p < 0.01 && markedCount >= 1) p = 0.01;
-      p = Math.floor(p * 100);
-      return p;
-    });
+const modeName = computed(() =>
+  store.setting.mode === ModeEnum.TRACK ? "轨迹模式" : "普通模式"
+);
 
-    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 exchangeModeName = computed(() =>
+  store.setting.mode === ModeEnum.TRACK ? "普通模式" : "轨迹模式"
+);
+
+async function toggleSettingMode() {
+  if (store.setting.mode === ModeEnum.TRACK) {
+    store.setting.mode = ModeEnum.COMMON;
+  } else {
+    store.setting.mode = ModeEnum.TRACK;
+  }
+
+  const body = document.querySelector("body");
+  if (body) body.innerHTML = "重新加载中...";
+  // 等待一秒后，重新加载页面
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  window.location.reload();
+}
 
-    async function updateHistoryTask({
-      pageNumber = 1,
-      pageSize = 10,
-      order = "markerTime",
-      sort = "DESC",
-      secretNumber = null,
-    }: {
-      pageNumber: number; // 从1开始
-      pageSize: number;
-      order: "markerTime" | "markerScore";
-      sort: "ASC" | "DESC";
-      secretNumber: string | null;
-    }) {
-      const res = await getHistoryTask({
-        pageNumber,
-        pageSize,
-        order,
-        sort,
-        secretNumber,
-      });
-      if (res.data) {
-        store.historyTasks.push(res.data);
-      }
-    }
+const progress = computed(() => {
+  const { totalCount, markedCount } = store.status;
+  if (totalCount <= 0) return 0;
+  let p = markedCount / totalCount;
+  if (p < 0.01 && markedCount >= 1) p = 0.01;
+  p = Math.floor(p * 100);
+  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();
-    };
+const logout = () => {
+  doLogout();
+};
 
-    const changeProfileRef = ref(null);
+const changeProfileRef = ref(null);
 
-    const openProfileModal = () => {
-      // @ts-ignore
-      changeProfileRef.value?.showModal();
-    };
+const openProfileModal = () => {
+  // @ts-ignore
+  changeProfileRef.value?.showModal();
+};
 
-    const switchGroupRef = ref(null);
+const switchGroupRef = ref(null);
 
-    const openSwitchGroupModal = () => {
-      // @ts-ignore
-      switchGroupRef.value?.showModal();
-    };
+const openSwitchGroupModal = () => {
+  // @ts-ignore
+  switchGroupRef.value?.showModal();
+};
 
-    const problemRef = ref(null);
+const problemRef = ref(null);
 
-    const openProblemModal = () => {
-      // @ts-ignore
-      problemRef.value?.showModal();
-    };
+const openProblemModal = () => {
+  // @ts-ignore
+  problemRef.value?.showModal();
+};
 
-    watchEffect(() => {
-      if (
-        isNumber(store.setting.topCount) &&
-        store.setting.topCount > 0 &&
-        store.setting.topCount === store.status.personCount
-      ) {
-        Modal.confirm({
-          centered: true,
-          mask: true,
-          zIndex: 6000,
-          maskStyle: { opacity: 0.97 },
-          content: `分配任务份已完成，是否继续？`,
-          okText: "继续",
-          cancelText: "退出",
-          onCancel: () => {
-            logout();
-          },
-          onOk: () => {},
-        });
-      }
+watchEffect(() => {
+  if (
+    isNumber(store.setting.topCount) &&
+    store.setting.topCount > 0 &&
+    store.setting.topCount === store.status.personCount
+  ) {
+    Modal.confirm({
+      centered: true,
+      mask: true,
+      zIndex: 6000,
+      maskStyle: { opacity: 0.97 },
+      content: `分配任务份已完成，是否继续？`,
+      okText: "继续",
+      cancelText: "退出",
+      onCancel: () => {
+        logout();
+      },
+      onOk: () => {},
     });
-
-    return {
-      store,
-      modeName,
-      exchangeModeName,
-      toggleSettingMode,
-      progress,
-      upScale,
-      downScale,
-      normalScale,
-      greaterThanOneScale,
-      lessThanOneScale,
-      updateHistoryTask,
-      toggleHistory,
-      logout,
-      changeProfileRef,
-      openProfileModal,
-      switchGroupRef,
-      openSwitchGroupModal,
-      problemRef,
-      openProblemModal,
-    };
-  },
+  }
 });
 </script>
 
@@ -456,9 +385,6 @@ export default defineComponent({
 .icon-font-size-20 {
   font-size: 20px;
 }
-.line-height-20 {
-  line-height: 20px;
-}
 .icon-with-text {
   font-size: 18px;
   line-height: 18px;

src/features/mark/MarkHistory.vue

@@ -101,10 +101,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { getHistoryTask } from "@/api/markPage";
-import { MarkHistoryOrderBy, MarkHistorySortField, Task } from "@/types";
-import { defineComponent, ref, watch } from "vue";
+import type { MarkHistoryOrderBy, MarkHistorySortField, Task } from "@/types";
+import { defineProps, ref, watch } from "vue";
 import { store } from "./store";
 import {
   CloseOutlined,
@@ -112,123 +112,54 @@ import {
   CaretDownOutlined,
   CaretUpOutlined,
 } from "@ant-design/icons-vue";
-import { cloneDeep, throttle } from "lodash";
+import { cloneDeep } from "lodash";
 
-export default defineComponent({
-  name: "MarkHistory",
-  components: {
-    CloseOutlined,
-    SearchOutlined,
-    CaretDownOutlined,
-    CaretUpOutlined,
-  },
-  props: {
-    shouldReload: { type: Number, required: true },
-  },
-  setup(props) {
-    const secretNumberInput = ref("");
-    const loading = ref(false);
-    const currentPage = ref(1);
-    const order = ref("markerTime" as MarkHistoryOrderBy);
-    const sort = ref("DESC" as MarkHistorySortField);
+const props = defineProps<{ shouldReload: number }>();
 
-    const currentTaskChange = async () => {
-      if (store.historyOpen) {
-        replaceCurrentTask(undefined);
-        await updateHistoryTask({
-          secretNumber: secretNumberInput.value,
-          order: order.value,
-          sort: sort.value,
-          pageNumber: currentPage.value,
-        });
-        replaceCurrentTask(store.historyTasks[0]);
-      } else {
-        replaceCurrentTask(store.tasks[0]);
-        store.historyTasks.splice(0);
-        secretNumberInput.value = "";
-        currentPage.value = 1;
-        order.value = "markerTime";
-        sort.value = "DESC";
-      }
-    };
-    watch(() => store.historyOpen, currentTaskChange);
-    watch([order, sort, currentPage], currentTaskChange);
-
-    watch(
-      () => props.shouldReload,
-      async () => {
-        // await updateHistoryTask({
-        //   secretNumber: secretNumberInput.value,
-        //   order: order.value,
-        //   sort: sort.value,
-        //   pageNumber: currentPage.value,
-        // });
-        // // 提交后，渲染第一条
-        // replaceCurrentTask(store.historyTasks[0]);
-        store.globalMask = true;
-        try {
-          const res = await getHistoryTask({
-            secretNumber: store.currentTask?.secretNumber,
-          });
-          if (res.data) {
-            let data = cloneDeep(res.data) as Array<Task>;
-            data = data.map((t) => {
-              t.questionList.map((q) => {
-                q.__origScore = q.score;
-                return q;
-              });
-              t.sliceUrls = t.sliceUrls.map(
-                (s) => store.setting.fileServer + s
-              );
-              t.sheetUrls = t.sheetUrls?.map(
-                (s) => store.setting.fileServer + s
-              );
-              t.jsonUrl = store.setting.fileServer + t.jsonUrl;
+const secretNumberInput = ref("");
+const loading = ref(false);
+const currentPage = ref(1);
+const order = ref("markerTime" as MarkHistoryOrderBy);
+const sort = ref("DESC" as MarkHistorySortField);
 
-              return t;
-            });
-            if (store.currentTask) {
-              const indexOfTasks = store.historyTasks.indexOf(
-                store.currentTask
-              );
-              if (data[0]) {
-                store.historyTasks.splice(indexOfTasks, 1, data[0]);
-                replaceCurrentTask(store.historyTasks[indexOfTasks]);
-              } else {
-                // 问题卷会查找不到，这里直接删除此任务
-                store.historyTasks.splice(indexOfTasks, 1);
-                replaceCurrentTask(store.historyTasks[indexOfTasks]);
-              }
-            }
-          }
-        } finally {
-          store.globalMask = false;
-        }
-      }
-    );
+const currentTaskChange = async () => {
+  if (store.historyOpen) {
+    replaceCurrentTask(undefined);
+    await updateHistoryTask({
+      secretNumber: secretNumberInput.value,
+      order: order.value,
+      sort: sort.value,
+      pageNumber: currentPage.value,
+    });
+    replaceCurrentTask(store.historyTasks[0]);
+  } else {
+    replaceCurrentTask(store.tasks[0]);
+    store.historyTasks.splice(0);
+    secretNumberInput.value = "";
+    currentPage.value = 1;
+    order.value = "markerTime";
+    sort.value = "DESC";
+  }
+};
+watch(() => store.historyOpen, currentTaskChange);
+watch([order, sort, currentPage], currentTaskChange);
 
-    async function updateHistoryTask({
-      pageNumber = 1,
-      pageSize = 10,
-      order = "markerTime",
-      sort = "DESC",
-      secretNumber = null,
-    }: {
-      pageNumber?: number; // 从1开始
-      pageSize?: number;
-      order?: MarkHistoryOrderBy;
-      sort?: MarkHistorySortField;
-      secretNumber?: string | null;
-    }) {
-      loading.value = true;
+watch(
+  () => props.shouldReload,
+  async () => {
+    // await updateHistoryTask({
+    //   secretNumber: secretNumberInput.value,
+    //   order: order.value,
+    //   sort: sort.value,
+    //   pageNumber: currentPage.value,
+    // });
+    // // 提交后，渲染第一条
+    // replaceCurrentTask(store.historyTasks[0]);
+    store.globalMask = true;
+    try {
       const res = await getHistoryTask({
-        pageNumber,
-        pageSize,
-        order,
-        sort,
-        secretNumber,
+        secretNumber: store.currentTask?.secretNumber,
       });
-      loading.value = false;
       if (res.data) {
         let data = cloneDeep(res.data) as Array<Task>;
         data = data.map((t) => {
@@ -242,74 +173,103 @@ export default defineComponent({
 
           return t;
         });
-        store.historyTasks = data;
-        replaceCurrentTask(store.historyTasks[0]);
-      }
-    }
-
-    function replaceCurrentTask(task: Task | undefined) {
-      if (task) {
-        task.questionList = task.questionList.map((q) => {
-          if (typeof q.__origScore !== "undefined") {
-            // 如果是回评的任务，则将旧分数还原
-            q.score = q.__origScore;
+        if (store.currentTask) {
+          const indexOfTasks = store.historyTasks.indexOf(store.currentTask);
+          if (data[0]) {
+            store.historyTasks.splice(indexOfTasks, 1, data[0]);
+            replaceCurrentTask(store.historyTasks[indexOfTasks]);
+          } else {
+            // 问题卷会查找不到，这里直接删除此任务
+            store.historyTasks.splice(indexOfTasks, 1);
+            replaceCurrentTask(store.historyTasks[indexOfTasks]);
           }
-          return q;
-        });
+        }
       }
-      store.currentTask = task;
+    } finally {
+      store.globalMask = false;
     }
+  }
+);
 
-    function previousPage() {
-      if (currentPage.value > 1) {
-        currentPage.value -= 1;
-      }
-    }
-    function nextPage() {
-      if (store.historyTasks.length >= 10) {
-        currentPage.value += 1;
-      }
-    }
+async function updateHistoryTask({
+  pageNumber = 1,
+  pageSize = 10,
+  order = "markerTime",
+  sort = "DESC",
+  secretNumber = null,
+}: {
+  pageNumber?: number; // 从1开始
+  pageSize?: number;
+  order?: MarkHistoryOrderBy;
+  sort?: MarkHistorySortField;
+  secretNumber?: string | null;
+}) {
+  loading.value = true;
+  const res = await getHistoryTask({
+    pageNumber,
+    pageSize,
+    order,
+    sort,
+    secretNumber,
+  });
+  loading.value = false;
+  if (res.data) {
+    let data = cloneDeep(res.data) as Array<Task>;
+    data = data.map((t) => {
+      t.questionList.map((q) => {
+        q.__origScore = q.score;
+        return q;
+      });
+      t.sliceUrls = t.sliceUrls.map((s) => store.setting.fileServer + s);
+      t.sheetUrls = t.sheetUrls?.map((s) => store.setting.fileServer + s);
+      t.jsonUrl = store.setting.fileServer + t.jsonUrl;
 
-    function toggleOrderBy(toOrder: MarkHistoryOrderBy) {
-      if (toOrder === order.value) {
-        sort.value = sort.value === "DESC" ? "ASC" : "DESC";
-      } else {
-        order.value = toOrder;
-      }
-    }
+      return t;
+    });
+    store.historyTasks = data;
+    replaceCurrentTask(store.historyTasks[0]);
+  }
+}
 
-    function searchHistoryTask() {
-      if (currentPage.value !== 1) {
-        currentPage.value = 1;
-      } else {
-        currentTaskChange();
+function replaceCurrentTask(task: Task | undefined) {
+  if (task) {
+    task.questionList = task.questionList.map((q) => {
+      if (typeof q.__origScore !== "undefined") {
+        // 如果是回评的任务，则将旧分数还原
+        q.score = q.__origScore;
       }
-    }
+      return q;
+    });
+  }
+  store.currentTask = task;
+}
+
+function previousPage() {
+  if (currentPage.value > 1) {
+    currentPage.value -= 1;
+  }
+}
+function nextPage() {
+  if (store.historyTasks.length >= 10) {
+    currentPage.value += 1;
+  }
+}
 
-    // function _updateSecretNumber(event: Event) {
-    //   const inputEle = event.target as HTMLInputElement;
-    //   secretNumberInput.value = inputEle.value ?? "";
-    // }
-    // const updateSecretNumber = throttle(_updateSecretNumber, 100);
+function toggleOrderBy(toOrder: MarkHistoryOrderBy) {
+  if (toOrder === order.value) {
+    sort.value = sort.value === "DESC" ? "ASC" : "DESC";
+  } else {
+    order.value = toOrder;
+  }
+}
 
-    return {
-      store,
-      loading,
-      secretNumberInput,
-      updateHistoryTask,
-      replaceCurrentTask,
-      currentPage,
-      previousPage,
-      nextPage,
-      sort,
-      order,
-      toggleOrderBy,
-      searchHistoryTask,
-      // updateSecretNumber,
-    };
-  },
-});
+function searchHistoryTask() {
+  if (currentPage.value !== 1) {
+    currentPage.value = 1;
+  } else {
+    currentTaskChange();
+  }
+}
 </script>
 
 <style scoped>

src/features/mark/MinimapModal.vue

@@ -16,57 +16,51 @@
   </qm-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, onBeforeUpdate, ref, watch } from "vue";
+<script setup lang="ts">
+import { onBeforeUpdate, ref, watch } from "vue";
 import { store } from "./store";
 
-export default defineComponent({
-  name: "MinimapModal",
-  setup() {
-    // 切换任务后，关闭缩略图
-    watch(
-      () => store.currentTask,
-      () => {
-        close();
-      }
-    );
+// 切换任务后，关闭缩略图
+watch(
+  () => store.currentTask,
+  () => {
+    close();
+  }
+);
 
-    const imagesHtml = ref("");
+const imagesHtml = ref("");
 
-    onBeforeUpdate(() => {
-      imagesHtml.value =
-        document.querySelector(".mark-body-container")?.innerHTML ??
-        "请关闭或重新打开";
-      // 没取到图片，提示
-      // if (imagesHtml.value.length <= 500) {
-      //   imagesHtml.value = "请关闭或重新打开";
-      // }
+onBeforeUpdate(() => {
+  imagesHtml.value =
+    document.querySelector(".mark-body-container")?.innerHTML ??
+    "请关闭或重新打开";
+  // 没取到图片，提示
+  // if (imagesHtml.value.length <= 500) {
+  //   imagesHtml.value = "请关闭或重新打开";
+  // }
 
-      // console.log(imagesHtml);
-    });
-
-    const setScrollTo = (e: MouseEvent) => {
-      // console.log(e);
-      const target = e.target as HTMLElement;
-      const container = target.parentElement?.parentElement as HTMLDivElement;
-      const containerPos = container.getBoundingClientRect();
-      const parent = target.parentElement as HTMLDivElement;
-      const parentPos = parent.getBoundingClientRect();
-      // console.log(containerPos, parentPos);
-      // 试验出来的... 大概就是2个顶部距离相减，得到相对距离
-      const scrollTo =
-        (e.offsetY + parentPos.y - containerPos.y) /
-        parseFloat(getComputedStyle(container).height);
-      if (typeof scrollTo === "number") {
-        store.minimapScrollTo = scrollTo;
-      }
-    };
-    const close = () => {
-      store.setting.uiSetting["minimap.modal"] = false;
-    };
-    return { store, imagesHtml, setScrollTo, close };
-  },
+  // console.log(imagesHtml);
 });
+
+const setScrollTo = (e: MouseEvent) => {
+  // console.log(e);
+  const target = e.target as HTMLElement;
+  const container = target.parentElement?.parentElement as HTMLDivElement;
+  const containerPos = container.getBoundingClientRect();
+  const parent = target.parentElement as HTMLDivElement;
+  const parentPos = parent.getBoundingClientRect();
+  // console.log(containerPos, parentPos);
+  // 试验出来的... 大概就是2个顶部距离相减，得到相对距离
+  const scrollTo =
+    (e.offsetY + parentPos.y - containerPos.y) /
+    parseFloat(getComputedStyle(container).height);
+  if (typeof scrollTo === "number") {
+    store.minimapScrollTo = scrollTo;
+  }
+};
+const close = () => {
+  store.setting.uiSetting["minimap.modal"] = false;
+};
 </script>
 
 <style>

src/features/mark/PaperModal.vue

@@ -20,20 +20,14 @@
   </qm-dialog>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from "vue";
+<script setup lang="ts">
+import { computed, ref } from "vue";
 import { store } from "./store";
 
-export default defineComponent({
-  name: "PaperModal",
-  setup() {
-    const paperPDFUrl = computed(() => {
-      return store.setting.subject.paperUrl;
-    });
-    const close = () => {
-      store.setting.uiSetting["paper.modal"] = false;
-    };
-    return { store, paperPDFUrl, close };
-  },
+const paperPDFUrl = computed(() => {
+  return store.setting.subject.paperUrl;
 });
+const close = () => {
+  store.setting.uiSetting["paper.modal"] = false;
+};
 </script>

src/features/mark/SheetViewModal.vue

@@ -32,59 +32,49 @@
   </teleport>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, ref, watch } from "vue";
+<script setup lang="ts">
+import { reactive, ref, watch } from "vue";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/features/mark/store";
 import { loadImage } from "@/utils/utils";
-import { PictureSlice } from "@/types";
+import type { PictureSlice } from "@/types";
 
-export default defineComponent({
-  name: "SheetViewModal",
-  components: { CloseOutlined },
-  props: {},
-  emits: ["close"],
-  setup() {
-    const dataUrls: Array<string> = reactive([]);
-    watch(
-      () => store.sheetViewModal,
-      async () => {
-        if (!store.sheetViewModal) return;
-        dataUrls.splice(0);
-        const urls = store.currentTask?.sheetUrls ?? [];
-        const images = [];
-        for (const url of urls) {
-          images.push(await loadImage(url));
-        }
+const dataUrls: Array<string> = reactive([]);
+watch(
+  () => store.sheetViewModal,
+  async () => {
+    if (!store.sheetViewModal) return;
+    dataUrls.splice(0);
+    const urls = store.currentTask?.sheetUrls ?? [];
+    const images = [];
+    for (const url of urls) {
+      images.push(await loadImage(url));
+    }
 
-        const sheetConfig = store.setting.sheetConfig;
+    const sheetConfig = store.setting.sheetConfig;
 
-        for (let i = 0; i < images.length; i++) {
-          if (sheetConfig.length === 0) {
-            dataUrls.push(
-              getDataUrlForSheetConfig(
-                images[i],
-                i % 2 === 0
-                  ? [
-                      // 通过-1来标记该用默认遮盖规则
-                      { i: -1, x: 0, y: 0, w: 0, h: 0 },
-                    ]
-                  : []
-              )
-            );
-          } else {
-            const scs = sheetConfig.filter((s) => s.i - 1 === i);
-            dataUrls.push(getDataUrlForSheetConfig(images[i], scs));
-          }
-        }
+    for (let i = 0; i < images.length; i++) {
+      if (sheetConfig.length === 0) {
+        dataUrls.push(
+          getDataUrlForSheetConfig(
+            images[i],
+            i % 2 === 0
+              ? [
+                  // 通过-1来标记该用默认遮盖规则
+                  { i: -1, x: 0, y: 0, w: 0, h: 0 },
+                ]
+              : []
+          )
+        );
+      } else {
+        const scs = sheetConfig.filter((s) => s.i - 1 === i);
+        dataUrls.push(getDataUrlForSheetConfig(images[i], scs));
       }
-    );
-
-    const checkedIndex = ref(0);
+    }
+  }
+);
 
-    return { store, dataUrls, checkedIndex };
-  },
-});
+const checkedIndex = ref(0);
 
 function getDataUrlForSheetConfig(
   image: HTMLImageElement,

src/features/mark/SpecialTagModal.vue

@@ -64,45 +64,32 @@
   </qm-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
 import { store } from "./store";
 
-export default defineComponent({
-  name: "SpecialTagModal",
-  setup() {
-    function clearLatestTagOfCurrentTask() {
-      if (!store.currentMarkResult) return;
-      store.currentMarkResult.specialTagList.splice(-1);
-    }
+function clearLatestTagOfCurrentTask() {
+  if (!store.currentMarkResult) return;
+  store.currentMarkResult.specialTagList.splice(-1);
+}
 
-    function clearAllTagsOfCurrentTask() {
-      if (!store.currentMarkResult) return;
-      store.currentMarkResult.specialTagList = [];
-    }
+function clearAllTagsOfCurrentTask() {
+  if (!store.currentMarkResult) return;
+  store.currentMarkResult.specialTagList = [];
+}
 
-    const toggleTag = (tagName: string) => {
-      if (store.currentSpecialTag === tagName) {
-        store.currentSpecialTag = undefined;
-      } else {
-        store.currentSpecialTag = tagName;
-        store.currentScore = undefined;
-      }
-    };
+const toggleTag = (tagName: string) => {
+  if (store.currentSpecialTag === tagName) {
+    store.currentSpecialTag = undefined;
+  } else {
+    store.currentSpecialTag = tagName;
+    store.currentScore = undefined;
+  }
+};
 
-    const close = () => {
-      store.currentSpecialTag = undefined;
-      store.setting.uiSetting["specialTag.modal"] = false;
-    };
-    return {
-      store,
-      toggleTag,
-      close,
-      clearLatestTagOfCurrentTask,
-      clearAllTagsOfCurrentTask,
-    };
-  },
-});
+const close = () => {
+  store.currentSpecialTag = undefined;
+  store.setting.uiSetting["specialTag.modal"] = false;
+};
 </script>
 
 <style>

src/types/index.ts

@@ -207,7 +207,7 @@ export interface SliceImage {
   indexInSliceUrls: number;
   trackList: Array<Track>;
   tagList: Array<SpecialTag>;
-  originalImage: HTMLImageElement;
+  originalImage: HTMLImageElement; // TODO: 为了兼容原图还原轨迹而添加的属性，当前CommonMarkBody用不到
   sliceImage: HTMLImageElement;
   dx: number;
   dy: number;