回评样式

src/App.vue

@@ -57,8 +57,9 @@ export default defineComponent({
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  background-color: var(--app-main-bg-color);
   width: 100%;
+  color: var(--app-main-text-color);
 }
 
 .global-mask {

src/api/arbitratePage.ts

@@ -70,7 +70,7 @@ export async function getArbitrateHistory({
   subjectCode,
   groupNumber,
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
   order = "markerTime",
   sort = "DESC",
   secretNumber = null,

src/api/inspectPage.ts

@@ -83,7 +83,7 @@ export async function getInspectedSetting(subjectCode?: string) {
 export async function getInspectedHistory({
   subjectCode,
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
 }: {
   subjectCode: string;
   pageNumber?: number; // 从1开始

src/api/markPage.ts

@@ -47,7 +47,7 @@ export async function updateUISetting(
 /** 获取评卷历史任务 */
 export async function getHistoryTask({
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
   order = "markerTime",
   sort = "DESC",
   secretNumber = null,

src/api/qualityPage.ts

@@ -6,7 +6,7 @@ export async function getQualityHistory({
   markerId,
   markerScore,
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
 }: {
   markerId: string;
   markerScore: string;

src/features/arbitrate/MarkHistory.vue

@@ -188,7 +188,7 @@ watch(
 
 async function updateHistoryTask({
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
   order = "markerTime",
   sort = "DESC",
   secretNumber = null,
@@ -234,7 +234,7 @@ function previousPage() {
   }
 }
 function nextPage() {
-  if (store.historyTasks.length >= 10) {
+  if (store.historyTasks.length >= 20) {
     currentPage.value += 1;
   }
 }

src/features/library/inspect/MarkBoardInspect.vue

@@ -223,7 +223,7 @@ function inspect() {
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
-  max-height: calc(100vh - 41px);
+  max-height: calc(100vh - 56px);
   overflow: auto;
 }
 .question {

src/features/library/inspect/MarkHistory.vue

@@ -92,7 +92,7 @@ const currentPage = ref(1);
 
 async function updateHistoryTask({
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
 }: {
   pageNumber?: number; // 从1开始
   pageSize?: number;
@@ -129,7 +129,7 @@ function previousPage() {
   }
 }
 function nextPage() {
-  if (store.historyTasks.length >= 10) {
+  if (store.historyTasks.length >= 20) {
     currentPage.value += 1;
     updateHistoryTask({ pageNumber: currentPage.value });
   }

src/features/library/quality/MarkHistory.vue

@@ -72,7 +72,7 @@ const currentPage = ref(1);
 
 async function updateHistoryTask({
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
 }: {
   pageNumber?: number; // 从1开始
   pageSize?: number;
@@ -110,7 +110,7 @@ function previousPage() {
   }
 }
 function nextPage() {
-  if (store.historyTasks.length >= 10) {
+  if (store.historyTasks.length >= 20) {
     currentPage.value += 1;
     updateHistoryTask({ pageNumber: currentPage.value });
   }

src/features/mark/CommonMarkBody.vue

@@ -516,11 +516,12 @@ const showBigImage = (event: MouseEvent) => {
 
 <style scoped>
 .mark-body-container {
-  height: calc(100vh - 41px);
+  height: calc(100vh - 56px);
   overflow: auto;
   /* background-size: 8px 8px;
   background-image: linear-gradient(to right, #e7e7e7 4px, transparent 4px),
     linear-gradient(to bottom, transparent 4px, #e7e7e7 4px); */
+  background-color: white;
   background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
     linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #e0e0e0 75%),

src/features/mark/MarkBoardKeyBoard.vue

@@ -326,7 +326,7 @@ function submit() {
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
-  max-height: calc(100vh - 41px);
+  max-height: calc(100vh - 56px);
   overflow: auto;
   z-index: 1001;
 }

src/features/mark/MarkBoardMouse.vue

@@ -188,7 +188,7 @@ function submit() {
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
-  max-height: calc(100vh - 41px);
+  max-height: calc(100vh - 56px);
   overflow: auto;
   z-index: 1001;
 }

src/features/mark/MarkBoardTrack.vue

@@ -39,7 +39,7 @@
 
     <div
       style="
-        height: calc(100vh - 41px - 160px);
+        height: calc(100vh - 56px - 160px);
         overflow: hidden;
         user-select: none;
       "
@@ -353,7 +353,7 @@ function submit() {
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
-  max-height: calc(100vh - 41px);
+  max-height: calc(100vh - 56px);
   overflow: auto;
   z-index: 1001;
 }

src/features/mark/MarkHeader.vue

@@ -8,7 +8,7 @@
     v-if="store.setting && store.setting.subject.name"
   >
     <div
-      class="tw-flex tw-place-content-center tw-cursor-pointer"
+      class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative"
       style="width: 56px; padding: 20px"
       @click="toggleHistory"
     >
@@ -18,6 +18,7 @@
           :class="[store.historyOpen && 'svg-red']"
         />
       </span>
+      <div v-if="store.historyOpen" class="triangle"></div>
     </div>
     <div style="max-width: 10%">
       <a
@@ -255,7 +256,10 @@
       style="width: 56px; padding: 20px"
       @click="toggleScoreBoard"
     >
-      <span title="给分板" class="tw-inline-flex tw-place-content-center">
+      <span
+        title="给分板"
+        class="tw-inline-flex tw-place-content-center tw-relative"
+      >
         <img
           src="./images/right-menu.svg"
           :class="[
@@ -263,6 +267,10 @@
           ]"
         />
       </span>
+      <div
+        v-if="!store.setting.uiSetting['score.board.collapse']"
+        class="triangle"
+      ></div>
     </div>
   </div>
   <MarkChangeProfile ref="changeProfileRef" />
@@ -421,4 +429,13 @@ watchEffect(() => {
   filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
     brightness(104%) contrast(97%);
 }
+.triangle {
+  background-color: white;
+  width: 10px;
+  height: 10px;
+  clip-path: polygon(0 100%, 100% 100%, 50% 0);
+
+  position: absolute;
+  bottom: -2px;
+}
 </style>

src/features/mark/MarkHistory.vue

@@ -3,8 +3,8 @@
     :style="{ display: store.historyOpen ? 'block' : 'none' }"
     class="history-container tw-px-1"
   >
-    <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
-      <div class="tw-text-xl">回评</div>
+    <!-- <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
+      <div class="tw-text-lg main-text-color">回评</div>
       <a-button
         class="tw-content-end"
         shape="circle"
@@ -12,34 +12,26 @@
       >
         <template #icon><CloseOutlined /></template>
       </a-button>
-    </div>
+    </div> -->
     <!-- :value="secretNumberInput"
         @change="updateSecretNumber" -->
-    <div class="tw-mt-1 tw-mb-1 tw-flex">
+    <div class="tw-mt-1 tw-mb-1 tw-flex tw-place-items-center">
+      <div class="tw-text-lg main-text-color tw-mr-4 tw-font-bold">回评</div>
       <input
         v-model="secretNumberInput"
         @keydown.stop="() => {}"
         @keypress.stop="() => {}"
         type="text"
         placeholder="查找试卷"
-        class="
-          tw-w-full
-          tw-rounded
-          tw-h-8
-          tw-border-solid
-          tw-border-gray-400
-          tw-border-2
-          tw-pl-1
-          tw-pr-8
-        "
+        class="tw-flex-1 tw-rounded tw-h-8 tw-pl-1 tw-pr-8"
         @keyup.enter="searchHistoryTask"
       />
       <SearchOutlined
-        style="margin-left: -30px; font-size: 24px; padding: 3px"
+        style="margin-left: -24px; font-size: 18px; padding: 3px"
         @click="searchHistoryTask"
       />
     </div>
-    <div class="tw-flex tw-justify-between">
+    <div class="tw-flex tw-justify-between tw-mt-5">
       <div class="tw-cursor-pointer tw-flex">编号</div>
       <div
         @click="toggleOrderBy('markerTime')"
@@ -47,11 +39,11 @@
       >
         时间
         <CaretUpOutlined
-          style="font-size: 20px"
+          style="font-size: 16px"
           v-if="order === 'markerTime' && sort === 'ASC'"
         />
         <CaretDownOutlined
-          style="font-size: 20px"
+          style="font-size: 16px"
           v-if="order === 'markerTime' && sort === 'DESC'"
         />
       </div>
@@ -61,42 +53,69 @@
       >
         分数
         <CaretUpOutlined
-          style="font-size: 20px"
+          style="font-size: 16px"
           v-if="order === 'markerScore' && sort === 'ASC'"
         />
         <CaretDownOutlined
-          style="font-size: 20px"
+          style="font-size: 16px"
           v-if="order === 'markerScore' && sort === 'DESC'"
         />
       </div>
     </div>
     <a-spin :spinning="loading" size="large" tip="Loading...">
-      <div v-for="(task, index) of store.historyTasks" :key="index">
-        <div
-          @click="replaceCurrentTask(task)"
-          class="
-            tw-flex
-            tw-justify-between
-            tw-place-items-center
-            tw-rounded
-            tw-cursor-pointer
-          "
-          :class="store.currentTask === task && 'current-task'"
-        >
-          <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
-          <div>
-            {{ $filters.datetimeFilter(task.markTime) }}
-          </div>
-          <div style="width: 30px; text-align: center">
-            {{ task.markerScore }}
+      <div style="margin-bottom: -40px; padding-bottom: 40px">
+        <div v-for="(task, index) of store.historyTasks" :key="index">
+          <div
+            @click="replaceCurrentTask(task)"
+            class="
+              tw-flex
+              tw-justify-between
+              tw-place-items-center
+              tw-rounded
+              tw-cursor-pointer
+              tw-font-bold
+              tw-py-2
+            "
+            :class="store.currentTask === task && 'current-task'"
+          >
+            <div class="tw-break-words tw-w-1/3">{{ task.secretNumber }}</div>
+            <div>
+              {{ $filters.datetimeFilter(task.markTime) }}
+            </div>
+            <div style="width: 30px; text-align: right">
+              {{ task.markerScore }}
+            </div>
           </div>
         </div>
       </div>
     </a-spin>
-    <div class="tw-flex tw-justify-between tw-place-content-center tw-mt-2">
-      <a-button @click="previousPage">上一页</a-button>
-      <div style="line-height: 30px">第{{ currentPage }}页</div>
-      <a-button @click="nextPage">下一页</a-button>
+    <div
+      class="
+        tw-flex tw-justify-between tw-place-content-center tw-mt-2
+        pager-container
+      "
+    >
+      <div class="tw-font-bold" style="line-height: 30px">
+        第{{ currentPage }}页
+      </div>
+      <div class="tw-flex tw-gap-2">
+        <a-button
+          shape="circle"
+          @click="previousPage"
+          type="primary"
+          title="上一页"
+        >
+          <div class="left-triangle"></div>
+        </a-button>
+        <a-button
+          shape="circle"
+          @click="nextPage"
+          type="primary"
+          title="下一页"
+        >
+          <div class="right-triangle"></div>
+        </a-button>
+      </div>
     </div>
   </div>
 </template>
@@ -193,7 +212,7 @@ watch(
 
 async function updateHistoryTask({
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
   order = "markerTime",
   sort = "DESC",
   secretNumber = null,
@@ -250,7 +269,7 @@ function previousPage() {
   }
 }
 function nextPage() {
-  if (store.historyTasks.length >= 10) {
+  if (store.historyTasks.length >= 20) {
     currentPage.value += 1;
   }
 }
@@ -274,10 +293,40 @@ function searchHistoryTask() {
 
 <style scoped>
 .history-container {
-  min-width: 250px;
-  border-right: 1px solid grey;
+  min-width: 290px;
+  padding: 20px;
+  font-size: 12px;
+  overflow-y: auto;
+  height: calc(100vh - 56px);
 }
 .current-task {
-  background-color: aqua;
+  background-color: white;
+  padding-left: 5px;
+  margin-left: -5px;
+  padding-right: 5px;
+  margin-right: -5px;
+}
+
+.left-triangle {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+  translate: 60%;
+}
+
+.right-triangle {
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  clip-path: polygon(100% 50%, 0 100%, 0 0);
+  translate: 90%;
+}
+.pager-container {
+  position: absolute;
+  bottom: 0px;
+  padding-bottom: 20px;
+  width: 250px;
+  background-color: var(--app-main-bg-color);
 }
 </style>

src/features/student/inspect/MarkBoardInspect.vue

@@ -223,7 +223,7 @@ function inspect() {
   border-left: 1px solid grey;
   padding-left: 6px;
   padding-right: 6px;
-  max-height: calc(100vh - 41px);
+  max-height: calc(100vh - 56px);
   overflow: auto;
 }
 .question {

src/features/student/inspect/MarkBody.vue

@@ -154,7 +154,7 @@ const answerPaperScale = computed(() => {
 
 <style scoped>
 .mark-body-container {
-  height: calc(100vh - 41px);
+  height: calc(100vh - 56px);
   overflow: auto;
   background-size: 8px 8px;
   background-image: linear-gradient(to right, #e7e7e7 4px, transparent 4px),

src/features/student/inspect/MarkHistory.vue

@@ -91,7 +91,7 @@ const currentPage = ref(1);
 
 async function updateHistoryTask({
   pageNumber = 1,
-  pageSize = 10,
+  pageSize = 20,
 }: {
   pageNumber?: number; // 从1开始
   pageSize?: number;
@@ -128,7 +128,7 @@ function previousPage() {
   }
 }
 function nextPage() {
-  if (store.historyTasks.length >= 10) {
+  if (store.historyTasks.length >= 20) {
     currentPage.value += 1;
     updateHistoryTask({ pageNumber: currentPage.value });
   }

src/styles/global.css

@@ -3,6 +3,8 @@
 
 :root {
   --header-bg-color: #191b37;
+  --app-main-bg-color: #edf2fa;
+  --app-main-text-color: #283e76;
 }
 
 body {
@@ -13,6 +15,10 @@ body {
   user-select: none;
 }
 
+.main-text-color {
+  color: var(--app-main-text-color);
+}
+
 .ant-message {
   z-index: 6001 !important;
 }