评卷界面ui调整完毕

src/features/mark/CommonMarkBody.vue

@@ -432,7 +432,7 @@ async function processSplitConfig() {
 // should not render twice at the same time
 let renderLock = false;
 const renderPaperAndMark = async () => {
-  console.log("renderPagerAndMark=>store.curTask:", store.currentTask);
+  // console.log("renderPagerAndMark=>store.curTask:", store.currentTask);
 
   if (!store.currentTask) return;
   if (!store.isScanImage) return;

src/features/mark/MarkBoardTrack.vue

@@ -6,7 +6,6 @@
       {
         hide: store.isScoreBoardCollapsed && !props.modal,
         'in-dialog': store.isScoreBoardCollapsed && props.modal,
-        show: !store.isScoreBoardCollapsed,
       },
     ]"
     :style="{
@@ -33,49 +32,13 @@
     >
       提交
     </qm-button>
-    <!-- 暂时隐藏
-    <div
-      class="tw-flex tw-rounded tw-justify-between tw-p-2 tw-pl-5 top-container tw-mb-4"
-    >
-      <div class="tw-flex tw-place-content-center tw-items-center tw-gap-2">
-        <div class="tw-flex tw-flex-col tw-gap-1">
-          <a-popconfirm
-            v-if="store.setting.enableAllZero && !store.setting.forceSpecialTag"
-            title="确定给全零分？"
-            :overlayStyle="{ width: '200px' }"
-            @confirm="$emit('allZeroSubmit')"
-          >
-            <a-button
-              type="primary"
-              size="middle"
-              class="all-zero-unselective-button"
-            >
-              <span>全零分</span>
-            </a-button>
-          </a-popconfirm>
-          <a-popconfirm
-            v-if="store.setting.selective"
-            title="确定是未选做？"
-            :overlayStyle="{ width: '200px' }"
-            @confirm="$emit('unselectiveSubmit')"
-          >
-            <a-button
-              type="primary"
-              size="middle"
-              class="all-zero-unselective-button"
-            >
-              <span>未选做</span>
-            </a-button>
-          </a-popconfirm>
-        </div>
-      </div>
-    </div>
-    -->
-
     <div
       v-if="store.currentTask && store.currentTask.questionList"
       class="board-questions"
-      :style="{ height: `${topPercent}%` }"
+      :style="{
+        height: areaHeight ? `${areaHeight}px` : 'auto',
+        flexGrow: areaHeight ? 0 : 2,
+      }"
     >
       <template
         v-for="(question, index) in store.currentTask.questionList"
@@ -141,14 +104,12 @@
         </div>
       </template>
     </div>
-    <div ref="dragSpliter" class="board-spliter">
-      <div class="board-spliter-up" @click="topPercent = 20">
+    <div class="board-spliter">
+      <div class="board-spliter-up" @click="areaHeight = 74">
         <img src="@/assets/icons/icon-up.svg" />
       </div>
-      <div class="board-spliter-bar">
-        <img src="@/assets/icons/icon-drag.svg" />
-      </div>
-      <div class="board-spliter-down" @click="topPercent = 90">
+      <div ref="dragSpliter" class="board-spliter-bar"></div>
+      <div class="board-spliter-down" @click="areaHeight = 0">
         <img src="@/assets/icons/icon-down.svg" />
       </div>
     </div>
@@ -253,7 +214,7 @@ import { cloneDeep } from "lodash-es";
 
 const props = defineProps<{ modal?: boolean }>();
 const emit = defineEmits(["submit", "unselectiveSubmit"]);
-const { dragSpliter, topPercent } = dragSplitPane();
+const { dragSpliter, areaHeight } = dragSplitPane();
 const activeRightMenuItem = ref<any>(null);
 const tmpStyle = reactive<any>({
   left: 0,
@@ -309,14 +270,6 @@ const positioning = (question: Question) => {
   );
   activeRightMenuItem.value = null;
 };
-watch(topPercent, () => {
-  if (topPercent.value < 10) {
-    topPercent.value = 10;
-  }
-  if (topPercent.value > 90) {
-    topPercent.value = 90;
-  }
-});
 
 const { chooseQuestion } = autoChooseFirstQuestion();
 let sliceImagesWithTrackListCopy = ref([]);

src/features/mark/MarkBoardTrackDialog.vue

@@ -5,7 +5,7 @@
     top="10%"
     fixedWidth
     width="362px"
-    height="400px"
+    height="600px"
     customClass="board-track-dialog"
     @close="close"
   >

src/features/mark/MarkHistory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mark-history" :class="[store.historyOpen ? 'show' : 'hide']">
+  <div :class="['mark-history', { hide: store.historyOpen }]">
     <div class="mark-history-title">
       {{ title }}
     </div>
@@ -298,7 +298,7 @@ async function updateHistoryTask({
 }
 
 async function replaceCurrentTask(task: Task | undefined) {
-  console.log("replaceCurrentTask:", task);
+  // console.log("replaceCurrentTask:", task);
 
   if (store.isScanImage && !!task) {
     await preDrawImageHistory(task);

src/features/mark/use/splitPane.ts

@@ -3,21 +3,35 @@ import { onMounted, onUnmounted, watchEffect } from "vue";
 export function dragSplitPane() {
   let pos = { y: 0 };
   const dragSpliter = $ref<HTMLDivElement>();
-  let topPercent = $ref(40);
+  let areaHeight = $ref(0);
+  let initAreaHeight = 0;
+  const minAreaHeight = 74;
+  let maxAreaHeight = null;
 
   const mouseDownHandler = function (e: MouseEvent) {
     // console.log(e);
     if (e.target !== dragSpliter) return;
     e.preventDefault();
     pos = {
-      // Get the current mouse position
       y: e.clientY,
     };
-    // topPercent = 100 * e.offsetTop / e.target.parentElement.style.height;
-    if (dragSpliter) {
-      // dragSpliter.style.cursor = "row-resize";
-      // console.log("add");
 
+    const parentDom = dragSpliter.parentElement.parentElement;
+    let sumHeight = 0;
+    for (let i = 0; i < parentDom.childNodes.length; i++) {
+      const dom = parentDom.childNodes[i];
+      if (
+        dom.className &&
+        !dom.className.includes("board-questions") &&
+        !dom.className.includes("board-footer")
+      ) {
+        sumHeight += dom.offsetHeight;
+      }
+    }
+    maxAreaHeight = parentDom.offsetHeight - sumHeight - 16 * 4 - 68;
+    initAreaHeight =
+      dragSpliter.parentElement.previousElementSibling.offsetHeight;
+    if (dragSpliter) {
       document.addEventListener("mousemove", mouseMoveHandler);
       document.addEventListener("mouseup", mouseUpHandler);
     }
@@ -27,68 +41,22 @@ export function dragSplitPane() {
   const mouseMoveHandler = function (e: MouseEvent) {
     e.preventDefault();
     const dy = e.clientY - pos.y;
+    const curHeight = initAreaHeight + dy;
+    areaHeight = Math.min(maxAreaHeight, Math.max(curHeight, minAreaHeight));
 
-    // // Scroll the element
-    // // dragSpliter.style.marginTop =
-    // //   (parseFloat(dragSpliter.style.marginTop) || 0) + dy + "px";
-    dragSpliter.style.marginTop = `${dy}px`;
-    // console.log(dragSpliter.style.marginTop);
-    // const target = e.target as HTMLElement;
-    // const parent = target.parentElement;
-    // console.log(getComputedStyle(e.target.parentElement).height);
-    // console.log({
-    //   offsetTop: target.offsetTop,
-    //   dy: dy,
-    //   movementY: e.movementY,
-    // });
-    // if (parent)
-    //   topPercent =
-    //     (100 * target.offsetTop) / parseFloat(getComputedStyle(parent).height);
-    // console.log("topPercent", topPercent);
     return false;
   };
 
-  const mouseUpHandler = function (e: MouseEvent) {
-    // const dy = e.clientY - pos.y;
-
-    // Scroll the element
-    // dragSpliter.style.marginTop =
-    //   (parseFloat(dragSpliter.style.marginTop) || 0) + dy + "px";
-    // dragSpliter.style.marginTop = dy + "px";
-    // console.log(dragSpliter.style.marginTop);
-    const target = e.target as HTMLElement;
-    let parent = target.parentElement;
-    // console.log(getComputedStyle(e.target.parentElement).height);
-    // console.log("offsetTop", target.offsetTop);
-    // console.log(target.offsetTop, parent);
-    // 鼠标超出了分隔条的parent，则撤销拖动效果
-    if (parent !== dragSpliter.parentElement) {
-      parent = null;
-    }
-    if (parent)
-      topPercent =
-        (100 * target.offsetTop) / parseFloat(getComputedStyle(parent).height);
-    // console.log({
-    //   topPercent: topPercent,
-    //   "parseFloat(getComputedStyle(parent).height)": parseFloat(
-    //     getComputedStyle(parent).height
-    //   ),
-    //   "target.offsetTop": target.offsetTop,
-    // });
-
-    // console.log("removed");
+  const mouseUpHandler = function () {
     if (dragSpliter) {
       document.removeEventListener("mousemove", mouseMoveHandler);
       document.removeEventListener("mouseup", mouseUpHandler);
-      // dragSpliter.style.cursor = "auto";
-      dragSpliter.style.marginTop = "0";
     }
   };
 
   onMounted(() => {
     watchEffect(() => {
       if (dragSpliter) {
-        // console.log("watchEffect");
         document.addEventListener("mousedown", mouseDownHandler);
       }
     });
@@ -101,5 +69,5 @@ export function dragSplitPane() {
     }
   });
 
-  return $$({ dragSpliter, topPercent });
+  return $$({ dragSpliter, areaHeight });
 }

src/styles/page.less

@@ -234,7 +234,6 @@
   width: 360px;
   padding: 16px;
   overflow-y: auto;
-  transition: margin-left 0.5s;
   background-color: #fff;
   border-right: 1px solid #e5e5e5;
 
@@ -249,11 +248,8 @@
   .ant-input-affix-wrapper {
     padding: 4px 6px;
   }
-  &.show {
-    margin-left: 0;
-  }
   &.hide {
-    margin-left: -100%;
+    display: none;
   }
 
   &-title {
@@ -390,15 +386,14 @@
 // mark-board-track
 .mark-board-track {
   width: 360px;
-  padding: 16px;
+  padding: 16px 16px 52px;
   overflow-y: auto;
-  transition: margin-left 0.5s;
   background-color: #fff;
 
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   border-left: 1px solid #e5e5e5;
+  position: relative;
   .flex-static;
 
   &.in-dialog {
@@ -407,11 +402,9 @@
     height: 100%;
     border: none;
   }
-  &.show {
-    margin-right: 0;
-  }
+
   &.hide {
-    margin-right: -100%;
+    display: none;
   }
 
   .board-header {
@@ -463,7 +456,7 @@
   }
 
   .board-questions {
-    flex-grow: 2;
+    // flex-grow: 2;
     margin: 0 -8px;
     font-size: 0;
     overflow-x: hidden;
@@ -541,9 +534,21 @@
     &-bar {
       .flex-static;
       width: 66px;
+      height: 18px;
       margin: 0 2px;
+
       .board-spliter-item;
       cursor: row-resize;
+
+      &::after {
+        content: "";
+        display: block;
+        margin: 2px auto;
+        background-image: url(../assets/icons/icon-drag.svg);
+        background-size: 100% 100%;
+        height: 14px;
+        width: 14px;
+      }
     }
     &-down {
       flex-grow: 2;
@@ -591,11 +596,15 @@
   }
 
   .board-footer {
+    position: absolute;
+    bottom: 16px;
+    left: 16px;
+    right: 16px;
     height: 36px;
+    z-index: 8;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .flex-static;
 
     .ant-btn {
       width: 156px;

src/utils/utils.ts

@@ -168,7 +168,7 @@ export async function getDataUrlForSplitConfig(
 }
 
 export async function preDrawImage(_currentTask: Task | undefined) {
-  console.log("preDrawImage=>curTask:", _currentTask);
+  // console.log("preDrawImage=>curTask:", _currentTask);
 
   if (!_currentTask?.libraryId) return;