给分版弹出框

src/features/mark/Mark.vue

@@ -32,6 +32,7 @@
   <SheetViewModal />
   <SpecialTagModal />
   <ShortCutModal />
+  <MarkBoardTrackDialog v-if="store.isTrackMode" />
   <a-spin
     v-if="statusSpinning"
     wrapperClassName="status-spin"
@@ -81,6 +82,7 @@ import { addFileServerPrefixToTask, preDrawImage } from "@/utils/utils";
 import { getPaper } from "@/api/jsonMark";
 import EventBus from "@/plugins/eventBus";
 import { getHistoryTask } from "@/api/markPage";
+import MarkBoardTrackDialog from "./MarkBoardTrackDialog.vue";
 
 const { addInterval, addTimeout } = useTimers();
 

src/features/mark/MarkBoardTrack.vue

@@ -1,8 +1,12 @@
 <template>
   <div
     v-if="store.currentTask"
-    class="mark-board-track-container"
-    :class="[store.isScoreBoardCollapsed ? 'hide' : 'show']"
+    class="mark-board-track-container tw-flex tw-flex-col"
+    :class="[
+      store.isScoreBoardCollapsed
+        ? 'hide mark-board-track-container-in-dialog'
+        : 'show',
+    ]"
   >
     <div
       class="tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5 top-container tw-mb-4"
@@ -72,7 +76,7 @@
 
     <div
       style="
-        height: calc(100vh - 56px - 210px);
+        height: calc(100% - 56px);
         overflow: hidden;
         user-select: none;
         position: relative;
@@ -408,12 +412,19 @@ const buttonHeightForSelective = $computed(() =>
   z-index: 1001;
   transition: margin-right 0.5s;
   color: var(--app-small-header-text-color);
+  background-color: var(--app-main-bg-color);
+}
+
+.mark-board-track-container-in-dialog {
+  max-width: 100%;
+  min-width: 100%;
+  height: 100%;
 }
 .mark-board-track-container.show {
   margin-right: 0;
 }
 .mark-board-track-container.hide {
-  margin-right: -290px;
+  margin-right: -100%;
 }
 
 .top-container {

src/features/mark/MarkBoardTrackDialog.vue

@@ -0,0 +1,24 @@
+<template>
+  <qm-dialog
+    v-if="store.isScoreBoardCollapsed"
+    title="给分板"
+    top="10%"
+    width="700px"
+    height="400px"
+    @close="close"
+  >
+    <mark-board-track />
+  </qm-dialog>
+</template>
+
+<script setup lang="ts">
+import QmDialog from "@/components/QmDialog.vue";
+import { store } from "@/store/store";
+import MarkBoardTrack from "./MarkBoardTrack.vue";
+
+const close = () => {
+  store.toggleScoreBoard();
+};
+</script>
+
+<style scoped></style>