splitpane增加快捷按钮

src/features/mark/MarkBoardTrack.vue

@@ -81,7 +81,6 @@
       <div
         v-if="store.currentTask && store.currentTask.questionList"
         class="tw-flex tw-gap-2 tw-flex-wrap tw-justify-between tw-overflow-auto tw-content-start"
-        style="min-height: 20% !important; max-height: 80% !important"
         :style="{ height: `${topPercent}%` }"
       >
         <template
@@ -133,8 +132,33 @@
           background-color: grey;
           cursor: row-resize;
         "
-        class="split-pane"
-      ></div>
+        class="split-pane tw-flex tw-justify-evenly"
+      >
+        <div
+          style="
+            margin-top: -14px;
+            width: 20px;
+            height: 16px;
+            text-align: center;
+            clip-path: polygon(0 100%, 100% 100%, 50% 0);
+            background-color: lightskyblue;
+            cursor: pointer;
+          "
+          @click="topPercent = 20"
+        ></div>
+        <div
+          style="
+            margin-top: -3px;
+            width: 20px;
+            height: 16px;
+            text-align: center;
+            clip-path: polygon(0 0, 100% 0, 50% 100%);
+            background-color: lightskyblue;
+            cursor: pointer;
+          "
+          @click="topPercent = 90"
+        ></div>
+      </div>
       <div
         class="tw-flex tw-flex-wrap tw-mt-5 tw-overflow-auto tw-content-start"
         style="padding-bottom: 40px; gap: 8px"
@@ -194,6 +218,15 @@ import { addFocusTrack, removeFocusTrack } from "./use/focusTracks";
 const emit = defineEmits(["submit", "allZeroSubmit", "unselectiveSubmit"]);
 const { dragSpliter, topPercent } = dragSplitPane();
 
+watch(topPercent, () => {
+  if (topPercent.value <= 10) {
+    topPercent.value = 10;
+  }
+  if (topPercent.value >= 90) {
+    topPercent.value = 90;
+  }
+});
+
 const { chooseQuestion } = autoChooseFirstQuestion();
 
 // 切换题目是清空上一题的分数
@@ -423,26 +456,4 @@ const buttonHeightForSelective = $computed(() =>
   background-color: #4db9ff;
   border: none;
 }
-.split-pane::before {
-  content: "";
-  display: block;
-  margin: 0 auto;
-  margin-top: -7px;
-  width: 20px;
-  height: 4px;
-  text-align: center;
-  clip-path: polygon(0 100%, 100% 100%, 50% 0);
-  background-color: lightskyblue;
-}
-.split-pane::after {
-  content: "";
-  display: block;
-  margin: 0 auto;
-  margin-top: 6px;
-  width: 20px;
-  height: 4px;
-  text-align: center;
-  clip-path: polygon(0 0, 100% 0, 50% 100%);
-  background-color: lightskyblue;
-}
 </style>

src/features/mark/use/splitPane.ts

@@ -57,10 +57,14 @@ export function dragSplitPane() {
     // dragSpliter.style.marginTop = dy + "px";
     // console.log(dragSpliter.style.marginTop);
     const target = e.target as HTMLElement;
-    const parent = target.parentElement;
+    let parent = target.parentElement;
     // console.log(getComputedStyle(e.target.parentElement).height);
     // console.log("offsetTop", target.offsetTop);
-    // TODO: 暂时不知道为啥有 140
+    // console.log(target.offsetTop, parent);
+    // 鼠标超出了分隔条的parent，则撤销拖动效果
+    if (parent !== dragSpliter.parentElement) {
+      parent = null;
+    }
     if (parent)
       topPercent =
         (100 * target.offsetTop) / parseFloat(getComputedStyle(parent).height);