隐藏给分板

src/features/mark/MarkBoardKeyBoard.vue

@@ -1,7 +1,31 @@
 <template>
-  <div v-if="store.currentTask" class="mark-board-track-container">
-    <div class="tw-my-2 tw-flex tw-place-content-center">
-      <a-dropdown>
+  <div
+    v-if="store.setting.uiSetting['score.board.collapse']"
+    @mouseover="handleMouseOverWithBoard"
+  >
+    <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
+      <a-switch
+        v-model:checked="store.setting.uiSetting['score.board.collapse']"
+        @mouseover="(e) => e.stopPropagation()"
+      />
+    </div>
+  </div>
+  <div
+    v-if="store.currentTask"
+    class="mark-board-track-container"
+    :class="store.setting.uiSetting['score.board.collapse'] && 'hide-board'"
+    @mouseover="handleMouseOverWithBoard"
+    @mouseout="handleMouseOutWithBoard"
+  >
+    <div class="tw-my-2 tw-flex">
+      <div
+        class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200 tw-mr-20"
+      >
+        <a-switch
+          v-model:checked="store.setting.uiSetting['score.board.collapse']"
+        />
+      </div>
+      <a-dropdown class="tw-self-end">
         <template #overlay>
           <a-menu>
             <a-menu-item key="1" @click="toggleKeyMouse">
@@ -250,6 +274,29 @@ export default defineComponent({
       document.removeEventListener("keydown", numberKeyListener);
     });
 
+    const collapseSideBar = () => {
+      store.setting.uiSetting["score.board.collapse"] = !!!store.setting
+        .uiSetting["score.board.collapse"];
+    };
+
+    const handleMouseOverWithBoard = () => {
+      if (store.setting.uiSetting["score.board.collapse"]) {
+        const container = document.querySelector(".mark-board-track-container");
+        if (container) {
+          container.classList.add("show-board");
+        }
+      }
+    };
+
+    const handleMouseOutWithBoard = () => {
+      if (store.setting.uiSetting["score.board.collapse"]) {
+        const container = document.querySelector(".mark-board-track-container");
+        if (container) {
+          container.classList.remove("show-board");
+        }
+      }
+    };
+
     function submit() {
       const errors: any = [];
       store.currentTask?.questionList.forEach((question, index) => {
@@ -274,6 +321,9 @@ export default defineComponent({
 
     return {
       store,
+      collapseSideBar,
+      handleMouseOverWithBoard,
+      handleMouseOutWithBoard,
       toggleKeyMouse,
       isCurrentQuestion,
       chooseQuestion,
@@ -295,6 +345,14 @@ export default defineComponent({
   max-height: calc(100vh - 41px);
   overflow: scroll;
 }
+.hide-board {
+  margin-right: -250px;
+}
+.show-board {
+  position: absolute;
+  background-color: white;
+  right: 250px;
+}
 .question {
   min-width: 80px;
   border: 1px solid grey;

src/features/mark/MarkBoardMouse.vue

@@ -1,7 +1,31 @@
 <template>
-  <div v-if="store.currentTask" class="mark-board-track-container">
-    <div class="tw-my-2 tw-flex tw-place-content-center">
-      <a-dropdown>
+  <div
+    v-if="store.setting.uiSetting['score.board.collapse']"
+    @mouseover="handleMouseOverWithBoard"
+  >
+    <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
+      <a-switch
+        v-model:checked="store.setting.uiSetting['score.board.collapse']"
+        @mouseover="(e) => e.stopPropagation()"
+      />
+    </div>
+  </div>
+  <div
+    v-if="store.currentTask"
+    class="mark-board-track-container"
+    :class="store.setting.uiSetting['score.board.collapse'] && 'hide-board'"
+    @mouseover="handleMouseOverWithBoard"
+    @mouseout="handleMouseOutWithBoard"
+  >
+    <div class="tw-my-2 tw-flex">
+      <div
+        class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200 tw-mr-20"
+      >
+        <a-switch
+          v-model:checked="store.setting.uiSetting['score.board.collapse']"
+        />
+      </div>
+      <a-dropdown class="tw-self-end">
         <template #overlay>
           <a-menu>
             <a-menu-item key="1" @click="toggleKeyMouse">
@@ -114,6 +138,29 @@ export default defineComponent({
       return steps;
     }
 
+    const collapseSideBar = () => {
+      store.setting.uiSetting["score.board.collapse"] = !!!store.setting
+        .uiSetting["score.board.collapse"];
+    };
+
+    const handleMouseOverWithBoard = () => {
+      if (store.setting.uiSetting["score.board.collapse"]) {
+        const container = document.querySelector(".mark-board-track-container");
+        if (container) {
+          container.classList.add("show-board");
+        }
+      }
+    };
+
+    const handleMouseOutWithBoard = () => {
+      if (store.setting.uiSetting["score.board.collapse"]) {
+        const container = document.querySelector(".mark-board-track-container");
+        if (container) {
+          container.classList.remove("show-board");
+        }
+      }
+    };
+
     function submit() {
       const errors: any = [];
       store.currentTask?.questionList.forEach((question, index) => {
@@ -138,6 +185,9 @@ export default defineComponent({
 
     return {
       store,
+      collapseSideBar,
+      handleMouseOverWithBoard,
+      handleMouseOutWithBoard,
       toggleKeyMouse,
       questionScoreSteps,
       chooseScore,
@@ -158,6 +208,14 @@ export default defineComponent({
   max-height: calc(100vh - 41px);
   overflow: scroll;
 }
+.hide-board {
+  margin-right: -250px;
+}
+.show-board {
+  position: absolute;
+  background-color: white;
+  right: 250px;
+}
 .question {
   min-width: 80px;
   border: 1px solid grey;

src/features/mark/MarkBoardTrack.vue

@@ -1,11 +1,35 @@
 <template>
+  <div
+    v-if="store.setting.uiSetting['score.board.collapse']"
+    @mouseover="handleMouseOverWithBoard"
+  >
+    <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
+      <!-- <ArrowLeftOutlined
+        style="font-size: 30px"
+        @click="collapseSideBar"
+        @mouseover="(e) => e.stopPropagation()"
+      /> -->
+      <a-switch
+        v-model:checked="store.setting.uiSetting['score.board.collapse']"
+        @mouseover="(e) => e.stopPropagation()"
+      />
+    </div>
+  </div>
   <div
     v-if="store.currentTask"
-    :style="{ display: store.MarkBoardTrackCollapse ? 'none' : 'block' }"
     class="mark-board-track-container"
+    :class="store.setting.uiSetting['score.board.collapse'] && 'hide-board'"
+    @mouseover="handleMouseOverWithBoard"
+    @mouseout="handleMouseOutWithBoard"
   >
-    <div>
-      <h1 class="tw-text-3xl tw-text-center">
+    <div class="tw-flex">
+      <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
+        <!-- <ArrowRightOutlined style="font-size: 30px" @click="collapseSideBar" /> -->
+        <a-switch
+          v-model:checked="store.setting.uiSetting['score.board.collapse']"
+        />
+      </div>
+      <h1 class="tw-text-3xl tw-text-center tw-flex-grow">
         总分：{{ store.currentMarkResult?.markerScore || 0 }}
       </h1>
     </div>
@@ -89,8 +113,7 @@
     </div>
     <div
       class="tw-flex tw-justify-between tw-mt-4"
-      draggable
-      style="position: absolute; bottom: 10px; right: 10px; width: 230px"
+      style="position: relative; bottom: 10px; right: 0px; width: 230px"
     >
       <qm-button
         type="primary"
@@ -123,10 +146,12 @@ import { store } from "./store";
 import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
 import { message } from "ant-design-vue";
 import { dragSplitPane } from "./use/splitPane";
+import { ArrowRightOutlined, ArrowLeftOutlined } from "@ant-design/icons-vue";
 
 export default defineComponent({
   name: "MarkBoardTrack",
   emits: ["submit", "allZeroSubmit"],
+  components: { ArrowRightOutlined, ArrowLeftOutlined },
   setup(props, { emit }) {
     const { dragSpliter, topPercent } = dragSplitPane();
 
@@ -226,6 +251,29 @@ export default defineComponent({
       document.removeEventListener("keydown", numberKeyListener);
     });
 
+    const collapseSideBar = () => {
+      store.setting.uiSetting["score.board.collapse"] = !!!store.setting
+        .uiSetting["score.board.collapse"];
+    };
+
+    const handleMouseOverWithBoard = () => {
+      if (store.setting.uiSetting["score.board.collapse"]) {
+        const container = document.querySelector(".mark-board-track-container");
+        if (container) {
+          container.classList.add("show-board");
+        }
+      }
+    };
+
+    const handleMouseOutWithBoard = () => {
+      if (store.setting.uiSetting["score.board.collapse"]) {
+        const container = document.querySelector(".mark-board-track-container");
+        if (container) {
+          container.classList.remove("show-board");
+        }
+      }
+    };
+
     function clearLatestMarkOfCurrentQuetion() {
       if (!store.currentMarkResult || !store.currentQuestion) return;
 
@@ -299,6 +347,9 @@ export default defineComponent({
       clearAllMarksOfCurrentQuetion,
       dragSpliter,
       topPercent,
+      collapseSideBar,
+      handleMouseOverWithBoard,
+      handleMouseOutWithBoard,
       submit,
     };
   },
@@ -315,6 +366,14 @@ export default defineComponent({
   max-height: calc(100vh - 41px);
   overflow: scroll;
 }
+.hide-board {
+  margin-right: -250px;
+}
+.show-board {
+  position: absolute;
+  background-color: white;
+  right: 250px;
+}
 .question {
   min-width: 100px;
   border: 1px solid grey;