apply defineExpose

src/components/QmDialog.vue

@@ -40,150 +40,138 @@
   </teleport>
 </template>
 
-<script lang="ts">
-// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
-import { defineComponent, onMounted, onUpdated, reactive, ref } from "vue";
+<script setup lang="ts">
+import { onMounted, onUpdated, reactive, ref } from "vue";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/features/mark/store";
 
-export default defineComponent({
-  name: "QmDialog",
-  components: { CloseOutlined },
-  props: {
-    title: { type: String, default: "" },
-    top: { type: String, default: "10%" },
-    width: { type: String, default: "30%" },
-    height: { type: String, default: "30%" },
-    zIndex: { type: Number, default: 1020 },
-  },
-  emits: ["close"],
-  setup({ top, width, height, title, zIndex }) {
-    const positionStyle = reactive({
-      top,
-      left: "10%",
-      width,
-      height,
-      zIndex,
-    });
+const { top, width, height, title, zIndex } = withDefaults(
+  defineProps<{
+    title: string;
+    top?: string;
+    width?: string;
+    height?: string;
+    zIndex?: number;
+  }>(),
+  {
+    title: "无标题",
+    top: "10%",
+    width: "30%",
+    height: "30%",
+    zIndex: 1020,
+  }
+);
 
-    const savedStyle = JSON.parse(
-      sessionStorage.getItem("dialog-" + title) ?? "{}"
-    );
-    if (savedStyle?.top) positionStyle.top = savedStyle?.top;
-    if (savedStyle?.left) positionStyle.left = savedStyle?.left;
-    if (savedStyle?.width) positionStyle.width = savedStyle?.width;
-    if (savedStyle?.height) positionStyle.height = savedStyle?.height;
-    const mouseHandler = ref(null as unknown as HTMLHeadElement);
-    const resizeHandler = ref(null as unknown as HTMLDivElement);
+defineEmits(["close"]);
+const positionStyle = reactive({
+  top,
+  left: "10%",
+  width,
+  height,
+  zIndex,
+});
 
-    const mousePosition = {
-      offsetX: 0,
-      offsetY: 0,
-    };
+const savedStyle = JSON.parse(
+  sessionStorage.getItem("dialog-" + title) ?? "{}"
+);
+if (savedStyle?.top) positionStyle.top = savedStyle?.top;
+if (savedStyle?.left) positionStyle.left = savedStyle?.left;
+if (savedStyle?.width) positionStyle.width = savedStyle?.width;
+if (savedStyle?.height) positionStyle.height = savedStyle?.height;
+const mouseHandler = ref(null as unknown as HTMLHeadElement);
+const resizeHandler = ref(null as unknown as HTMLDivElement);
 
-    const handleDragMouseDown = (e: MouseEvent) => {
-      document.addEventListener("mousemove", handleDragMouseMove);
-      document.addEventListener("mouseup", handleDragMouseUp);
-      // console.log(e);
-      const { clientX, clientY } = e;
-      mousePosition.offsetX = clientX;
-      mousePosition.offsetY = clientY;
-    };
-    const handleDragMouseMove = (e: MouseEvent) => {
-      const { clientX, clientY } = e;
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
-      const newXRatio =
-        parseFloat(positionStyle.left) / 100 +
-        (clientX - mousePosition.offsetX) / windowWidth;
-      const newYRatio =
-        parseFloat(positionStyle.top) / 100 +
-        (clientY - mousePosition.offsetY) / windowHeight;
-      // console.log({
-      //   offsetX: mousePosition.offsetX,
-      //   offsetY: mousePosition.offsetY,
-      //   newYRatio,
-      //   newXRatio,
-      // });
-      if (newYRatio > 0 && newYRatio < 0.95) {
-        positionStyle.top = newYRatio * 100 + "%";
-      }
-      if (newXRatio > 0 && newXRatio < 0.95) {
-        positionStyle.left = newXRatio * 100 + "%";
-      }
+const mousePosition = {
+  offsetX: 0,
+  offsetY: 0,
+};
 
-      mousePosition.offsetX = clientX;
-      mousePosition.offsetY = clientY;
-    };
-    const handleDragMouseUp = (e: MouseEvent) => {
-      mousePosition.offsetX = 0;
-      mousePosition.offsetY = 0;
-      mouseHandler.value.removeEventListener("mousedown", handleDragMouseDown);
-      document.removeEventListener("mousemove", handleDragMouseMove);
-      document.removeEventListener("mouseup", handleDragMouseUp);
-    };
+const handleDragMouseDown = (e: MouseEvent) => {
+  document.addEventListener("mousemove", handleDragMouseMove);
+  document.addEventListener("mouseup", handleDragMouseUp);
+  // console.log(e);
+  const { clientX, clientY } = e;
+  mousePosition.offsetX = clientX;
+  mousePosition.offsetY = clientY;
+};
+const handleDragMouseMove = (e: MouseEvent) => {
+  const { clientX, clientY } = e;
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+  const newXRatio =
+    parseFloat(positionStyle.left) / 100 +
+    (clientX - mousePosition.offsetX) / windowWidth;
+  const newYRatio =
+    parseFloat(positionStyle.top) / 100 +
+    (clientY - mousePosition.offsetY) / windowHeight;
+  // console.log({
+  //   offsetX: mousePosition.offsetX,
+  //   offsetY: mousePosition.offsetY,
+  //   newYRatio,
+  //   newXRatio,
+  // });
+  if (newYRatio > 0 && newYRatio < 0.95) {
+    positionStyle.top = newYRatio * 100 + "%";
+  }
+  if (newXRatio > 0 && newXRatio < 0.95) {
+    positionStyle.left = newXRatio * 100 + "%";
+  }
 
-    const handleResizeMouseDown = (e: MouseEvent) => {
-      document.addEventListener("mousemove", handleResizeMouseMove);
-      document.addEventListener("mouseup", handleResizeMouseUp);
-      const { clientX, clientY } = e;
-      mousePosition.offsetX = clientX;
-      mousePosition.offsetY = clientY;
-    };
-    const handleResizeMouseMove = (e: MouseEvent) => {
-      // console.log(e);
-      // console.log("mouse move");
-      const { clientX, clientY } = e;
-      // @ts-ignore
-      const newXRatio = clientX - mousePosition.offsetX;
-      const newYRatio = clientY - mousePosition.offsetY;
-      positionStyle.width = parseFloat(positionStyle.width) + newXRatio + "px";
-      positionStyle.height =
-        parseFloat(positionStyle.height) + newYRatio + "px";
+  mousePosition.offsetX = clientX;
+  mousePosition.offsetY = clientY;
+};
+const handleDragMouseUp = (e: MouseEvent) => {
+  mousePosition.offsetX = 0;
+  mousePosition.offsetY = 0;
+  mouseHandler.value.removeEventListener("mousedown", handleDragMouseDown);
+  document.removeEventListener("mousemove", handleDragMouseMove);
+  document.removeEventListener("mouseup", handleDragMouseUp);
+};
 
-      mousePosition.offsetX = clientX;
-      mousePosition.offsetY = clientY;
-    };
-    const handleResizeMouseUp = (e: MouseEvent) => {
-      mousePosition.offsetX = 0;
-      mousePosition.offsetY = 0;
-      resizeHandler.value.removeEventListener(
-        "mousedown",
-        handleResizeMouseDown
-      );
-      document.removeEventListener("mousemove", handleResizeMouseMove);
-      document.removeEventListener("mouseup", handleResizeMouseUp);
-    };
+const handleResizeMouseDown = (e: MouseEvent) => {
+  document.addEventListener("mousemove", handleResizeMouseMove);
+  document.addEventListener("mouseup", handleResizeMouseUp);
+  const { clientX, clientY } = e;
+  mousePosition.offsetX = clientX;
+  mousePosition.offsetY = clientY;
+};
+const handleResizeMouseMove = (e: MouseEvent) => {
+  // console.log(e);
+  // console.log("mouse move");
+  const { clientX, clientY } = e;
+  // @ts-ignore
+  const newXRatio = clientX - mousePosition.offsetX;
+  const newYRatio = clientY - mousePosition.offsetY;
+  positionStyle.width = parseFloat(positionStyle.width) + newXRatio + "px";
+  positionStyle.height = parseFloat(positionStyle.height) + newYRatio + "px";
 
-    onMounted(() => {
-      increaseZIndex();
-    });
+  mousePosition.offsetX = clientX;
+  mousePosition.offsetY = clientY;
+};
+const handleResizeMouseUp = (e: MouseEvent) => {
+  mousePosition.offsetX = 0;
+  mousePosition.offsetY = 0;
+  resizeHandler.value.removeEventListener("mousedown", handleResizeMouseDown);
+  document.removeEventListener("mousemove", handleResizeMouseMove);
+  document.removeEventListener("mouseup", handleResizeMouseUp);
+};
 
-    onUpdated(() => {
-      if (title) {
-        sessionStorage.setItem(
-          "dialog-" + title,
-          JSON.stringify(positionStyle)
-        );
-      }
-    });
+onMounted(() => {
+  increaseZIndex();
+});
 
-    const increaseZIndex = () => {
-      positionStyle.zIndex = store.maxModalZIndex++;
-      if (store.maxModalZIndex === 5000) {
-        store.maxModalZIndex = 1020;
-      }
-    };
-    return {
-      positionStyle,
-      mouseHandler,
-      resizeHandler,
-      handleDragMouseDown,
-      handleResizeMouseDown,
-      increaseZIndex,
-    };
-  },
+onUpdated(() => {
+  if (title) {
+    sessionStorage.setItem("dialog-" + title, JSON.stringify(positionStyle));
+  }
 });
+
+const increaseZIndex = () => {
+  positionStyle.zIndex = store.maxModalZIndex++;
+  if (store.maxModalZIndex === 5000) {
+    store.maxModalZIndex = 1020;
+  }
+};
 </script>
 
 <style scoped>

src/features/mark/MarkChangeProfile.vue

@@ -38,11 +38,10 @@
   </a-modal>
 </template>
 
-<script lang="ts">
-// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
+<script setup lang="ts">
 import { changeUserInfo, doLogout } from "@/api/markPage";
 import { message } from "ant-design-vue";
-import { ref, defineComponent, reactive, watchEffect } from "vue";
+import { ref, reactive, watchEffect } from "vue";
 import { store } from "./store";
 
 interface User {
@@ -50,64 +49,52 @@ interface User {
   password: string;
   confirmPassword: string;
 }
-export default defineComponent({
-  name: "MarkChangeProfile",
-  setup() {
-    const user = reactive<User>({
-      name: "",
-      password: "",
-      confirmPassword: "",
-    });
-    watchEffect(() => {
-      user.name = store.setting.userName;
-    });
-    const visible = ref<boolean>(false);
-    const confirmLoading = ref<boolean>(false);
+const user = reactive<User>({
+  name: "",
+  password: "",
+  confirmPassword: "",
+});
+watchEffect(() => {
+  user.name = store.setting.userName;
+});
+const visible = ref(false);
+const confirmLoading = ref(false);
 
-    const showModal = () => {
-      visible.value = true;
-    };
+const showModal = () => {
+  visible.value = true;
+};
 
-    const handleOk = () => {
-      if (user.name.length === 0 || user.name.length >= 30) {
-        message.error({ content: "姓名长度必须在1到30之间" });
-        return;
-      }
-      if (user.password.length !== 0 || user.confirmPassword.length !== 0) {
-        if (user.password.length === 0 || user.password.length >= 16) {
-          message.error({ content: "密码长度必须在1到16之间" });
-          return;
-        }
-        if (user.password !== user.confirmPassword) {
-          message.error({ content: "两次输入的密码不一致" });
-          return;
-        }
-      }
-      confirmLoading.value = true;
-      changeUserInfo(user.name, user.password)
-        .then(() => doLogout())
-        .finally(() => {
-          visible.value = false;
-          confirmLoading.value = false;
-        });
-    };
+const handleOk = () => {
+  if (user.name.length === 0 || user.name.length >= 30) {
+    message.error({ content: "姓名长度必须在1到30之间" });
+    return;
+  }
+  if (user.password.length !== 0 || user.confirmPassword.length !== 0) {
+    if (user.password.length === 0 || user.password.length >= 16) {
+      message.error({ content: "密码长度必须在1到16之间" });
+      return;
+    }
+    if (user.password !== user.confirmPassword) {
+      message.error({ content: "两次输入的密码不一致" });
+      return;
+    }
+  }
+  confirmLoading.value = true;
+  changeUserInfo(user.name, user.password)
+    .then(() => doLogout())
+    .finally(() => {
+      visible.value = false;
+      confirmLoading.value = false;
+    });
+};
 
-    const handleCancel = () => {
-      user.name = store.setting.userName;
-      user.password = "";
-      user.confirmPassword = "";
-    };
+const handleCancel = () => {
+  user.name = store.setting.userName;
+  user.password = "";
+  user.confirmPassword = "";
+};
 
-    return {
-      user,
-      visible,
-      confirmLoading,
-      showModal,
-      handleOk,
-      handleCancel,
-    };
-  },
-});
+defineExpose({ showModal });
 </script>
 <style>
 .profile-wrapper .ant-modal-title {

src/features/mark/MarkHeader.vue

@@ -330,13 +330,6 @@
 import { doLogout, updateUISetting } from "@/api/markPage";
 import { computed, ref, watch, watchEffect } from "vue";
 import { store, isScanImage } from "./store";
-import {
-  SnippetsOutlined,
-  UserOutlined,
-  PoweroffOutlined,
-  ClockCircleOutlined,
-  DownOutlined,
-} from "@ant-design/icons-vue";
 import { ModeEnum } from "@/types";
 import MarkChangeProfile from "./MarkChangeProfile.vue";
 import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";

src/features/mark/MarkProblemDialog.vue

@@ -27,85 +27,73 @@
   </a-modal>
 </template>
 
-<script lang="ts">
-// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
+<script setup lang="ts">
 import { doProblemType, getStatus } from "@/api/markPage";
 import { message } from "ant-design-vue";
-import { ref, defineComponent } from "vue";
+import { ref } from "vue";
 import { removeCurrentMarkResult, store } from "./store";
 import EventBus from "@/plugins/eventBus";
 
-export default defineComponent({
-  name: "MarkProblemDialog",
-  setup(props, { emit }) {
-    const visible = ref(false);
+const visible = ref(false);
 
-    const showModal = () => {
-      visible.value = true;
-    };
+const showModal = () => {
+  visible.value = true;
+};
 
-    const removeSubmitedTask = () => {
-      removeCurrentMarkResult();
+const removeSubmitedTask = () => {
+  removeCurrentMarkResult();
 
-      if (!store.historyOpen) {
-        store.currentTask = undefined;
-        store.tasks.shift();
-        store.currentTask = store.tasks[0];
-      }
-      // 回评时，在MarkHistory中处理
-      // else {
-      // if (store.currentTask === store.historyTasks[0]) {
-      //   store.currentTask = store.historyTasks[1];
-      // } else {
-      //   store.currentTask = store.historyTasks[0];
-      // }
-      // }
-    };
+  if (!store.historyOpen) {
+    store.currentTask = undefined;
+    store.tasks.shift();
+    store.currentTask = store.tasks[0];
+  }
+  // 回评时，在MarkHistory中处理
+  // else {
+  // if (store.currentTask === store.historyTasks[0]) {
+  //   store.currentTask = store.historyTasks[1];
+  // } else {
+  //   store.currentTask = store.historyTasks[0];
+  // }
+  // }
+};
 
-    async function updateStatus() {
-      const res = await getStatus();
-      store.status = res.data;
-    }
+async function updateStatus() {
+  const res = await getStatus();
+  store.status = res.data;
+}
 
-    const chooseProblemType = async (problemId: number) => {
-      if (!store.currentTask) {
-        message.warn({ content: "没有可以标记的任务", duration: 5 });
-        return;
-      }
-      try {
-        const res = await doProblemType(problemId);
-        if (res?.data.success) {
-          message.success({ content: "问题卷处理成功", duration: 3 });
-          visible.value = false;
-          removeSubmitedTask();
-          if (store.historyOpen) {
-            EventBus.emit("should-reload-history");
-          }
-          updateStatus();
-        } else {
-          message.error({ content: res?.data.message || "错误", duration: 5 });
-        }
-      } catch (error) {
-        console.log("问题卷处理失败", error);
-        message.error({ content: "网络异常", duration: 5 });
-        await new Promise((res) => setTimeout(res, 1500));
-        window.location.reload();
+const chooseProblemType = async (problemId: number) => {
+  if (!store.currentTask) {
+    message.warn({ content: "没有可以标记的任务", duration: 5 });
+    return;
+  }
+  try {
+    const res = await doProblemType(problemId);
+    if (res?.data.success) {
+      message.success({ content: "问题卷处理成功", duration: 3 });
+      visible.value = false;
+      removeSubmitedTask();
+      if (store.historyOpen) {
+        EventBus.emit("should-reload-history");
       }
-    };
+      updateStatus();
+    } else {
+      message.error({ content: res?.data.message || "错误", duration: 5 });
+    }
+  } catch (error) {
+    console.log("问题卷处理失败", error);
+    message.error({ content: "网络异常", duration: 5 });
+    await new Promise((res) => setTimeout(res, 1500));
+    window.location.reload();
+  }
+};
 
-    const handleCancel = () => {
-      visible.value = false;
-    };
+const handleCancel = () => {
+  visible.value = false;
+};
 
-    return {
-      store,
-      visible,
-      showModal,
-      chooseProblemType,
-      handleCancel,
-    };
-  },
-});
+defineExpose({ showModal });
 </script>
 
 <style scoped>

src/features/mark/MarkSwitchGroupDialog.vue

@@ -32,78 +32,62 @@
     </template>
   </a-modal>
 </template>
-<script lang="ts">
-// 不能用 <script setup lang="ts"> ，因为被上层用ref了，暂时没有解决方案
+<script setup lang="ts">
 import { doSwitchGroup, getGroups } from "@/api/markPage";
 import { message } from "ant-design-vue";
-import { ref, defineComponent, onUpdated } from "vue";
+import { ref, onUpdated } from "vue";
 import { store } from "./store";
 
-export default defineComponent({
-  name: "MarkSwitchGroupDialog",
-  setup() {
-    const visible = ref<boolean>(false);
+const visible = ref(false);
 
-    onUpdated(async () => {
-      if (visible.value) {
-        const groups = await getGroups();
-        store.groups = groups.data;
-      }
-    });
+onUpdated(async () => {
+  if (visible.value) {
+    const groups = await getGroups();
+    store.groups = groups.data;
+  }
+});
 
-    const showModal = () => {
-      visible.value = true;
-    };
+const showModal = () => {
+  visible.value = true;
+};
 
-    const progress = (totalCount: number, markedCount: number) => {
-      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 progress = (totalCount: number, markedCount: number) => {
+  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 isCurrentGroup = (groupNumber: number) => {
-      return groupNumber === store.setting.groupNumber;
-    };
+const isCurrentGroup = (groupNumber: number) => {
+  return groupNumber === store.setting.groupNumber;
+};
 
-    const chooseGroup = async (markerId: number) => {
-      const res = await doSwitchGroup(markerId)
-        .then((res) => {
-          // 切换分组相当于刷新页面，此时之前的所有的状态消失，即task/markResult不存在了
-          if (res.data.success) {
-            const body = document.querySelector("body");
-            if (body) body.innerHTML = "重新加载中...";
-            return new Promise((resolve) =>
-              setTimeout(() => resolve(true), 300)
-            );
-          } else {
-            message.error({ content: res.data.message || "错误", duration: 5 });
-            return false;
-          }
-        })
-        .then((res) => {
-          if (res) {
-            window.location.reload();
-          }
-        });
-    };
+const chooseGroup = async (markerId: number) => {
+  const res = await doSwitchGroup(markerId)
+    .then((res) => {
+      // 切换分组相当于刷新页面，此时之前的所有的状态消失，即task/markResult不存在了
+      if (res.data.success) {
+        const body = document.querySelector("body");
+        if (body) body.innerHTML = "重新加载中...";
+        return new Promise((resolve) => setTimeout(() => resolve(true), 300));
+      } else {
+        message.error({ content: res.data.message || "错误", duration: 5 });
+        return false;
+      }
+    })
+    .then((res) => {
+      if (res) {
+        window.location.reload();
+      }
+    });
+};
 
-    const handleCancel = () => {
-      visible.value = false;
-    };
+const handleCancel = () => {
+  visible.value = false;
+};
 
-    return {
-      store,
-      visible,
-      showModal,
-      progress,
-      isCurrentGroup,
-      chooseGroup,
-      handleCancel,
-    };
-  },
-});
+defineExpose({ showModal });
 </script>
 
 <style scoped>