left & right menu

src/features/mark/MarkBoardKeyBoard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <!-- <div
     v-if="store.setting.uiSetting['score.board.collapse']"
     @mouseover="handleMouseOverWithBoard"
     style="border-left: 1px solid grey"
@@ -12,22 +12,13 @@
         v-model:checked="store.setting.uiSetting['score.board.collapse']"
       />
     </div>
-  </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>

src/features/mark/MarkBoardMouse.vue

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <!-- <div
     v-if="store.setting.uiSetting['score.board.collapse']"
     @mouseover="handleMouseOverWithBoard"
     style="border-left: 1px solid grey"
@@ -12,22 +12,20 @@
         v-model:checked="store.setting.uiSetting['score.board.collapse']"
       />
     </div>
-  </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
+      <!-- <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>
+      </div> -->
       <a-dropdown class="tw-self-end">
         <template #overlay>
           <a-menu>

src/features/mark/MarkBoardTrack.vue

@@ -1,31 +1,15 @@
 <template>
-  <div
-    v-if="store.setting.uiSetting['score.board.collapse']"
-    @mouseover="handleMouseOverWithBoard"
-    style="border-left: 1px solid grey"
-  >
-    <div
-      class="tw-self-start tw-cursor-pointer tw-pb-10"
-      @mouseover.stop="() => true"
-    >
-      <a-switch
-        v-model:checked="store.setting.uiSetting['score.board.collapse']"
-      />
-    </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-flex">
-      <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
+      <!-- <div class="tw-self-start tw-cursor-pointer hover:tw-bg-gray-200">
         <a-switch
           v-model:checked="store.setting.uiSetting['score.board.collapse']"
         />
-      </div>
+      </div> -->
       <h1 class="tw-text-3xl tw-text-center tw-flex-grow">
         总分：{{ store.currentMarkResult?.markerScore }}
       </h1>

src/features/mark/MarkHeader.vue

@@ -7,6 +7,18 @@
     "
     v-if="store.setting && store.setting.subject.name"
   >
+    <div
+      class="tw-flex tw-place-content-center tw-cursor-pointer"
+      style="width: 56px; padding: 20px"
+      @click="toggleHistory"
+    >
+      <span title="回看" class="tw-inline-flex tw-place-content-center">
+        <img
+          src="./images/left-menu.svg"
+          :class="[store.historyOpen && 'svg-red']"
+        />
+      </span>
+    </div>
     <div style="max-width: 10%">
       <a
         class="
@@ -26,6 +38,14 @@
         }}</a
       >
     </div>
+    <div class="tw-flex" style="margin: 0 -20px 0 -40px">
+      <span
+        :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
+        class="tw-inline-flex tw-place-content-center"
+      >
+        <img src="./images/problems.svg" />
+      </span>
+    </div>
     <div v-if="store.setting.statusValue === 'TRIAL'">试评</div>
     <div class="tw-flex tw-gap-1">
       <div>
@@ -60,19 +80,13 @@
           store.status.totalCount - store.status.markedCount ?? "-"
         }}</span>
       </span>
-      <span
-        :title="`问题卷${store.status.problemCount}\n待仲裁${store.status.arbitrateCount}`"
-        class="tw-inline-flex tw-place-content-center"
-      >
-        <QuestionCircleOutlined style="display: inline-flex" />
-      </span>
       <span>
         <span class="header-small-text">进度</span
         ><span class="highlight-text">{{ progress ?? "-" }}%</span>
       </span>
     </div>
     <ZoomPaper v-if="isScanImage()" :store="store" />
-    <div>
+    <div class="tw-flex">
       <a-dropdown class="header-bg-color">
         <template #overlay v-if="!store.setting.forceMode">
           <a-menu>
@@ -82,7 +96,7 @@
           </a-menu>
         </template>
         <a-button
-          style="font-size: 16px; color: white !important; border: none"
+          style="font-size: 16px; color: rgba(255, 255, 255, 0.5); border: none"
         >
           {{ modeName }}
           <DownOutlined
@@ -92,14 +106,6 @@
         </a-button>
       </a-dropdown>
     </div>
-    <div @click="toggleHistory" class="tw-flex" title="回看">
-      <SnippetsOutlined
-        class="tw-cursor-pointer"
-        :style="{
-          color: store.historyOpen ? 'red' : 'white',
-        }"
-      />
-    </div>
     <div
       class="tw-flex tw-place-items-center"
       :title="
@@ -244,6 +250,20 @@
       <PoweroffOutlined />
       退出
     </div>
+    <div
+      class="tw-flex tw-place-content-center tw-cursor-pointer"
+      style="width: 56px; padding: 20px"
+      @click="toggleScoreBoard"
+    >
+      <span title="给分板" class="tw-inline-flex tw-place-content-center">
+        <img
+          src="./images/right-menu.svg"
+          :class="[
+            !store.setting.uiSetting['score.board.collapse'] && 'svg-red',
+          ]"
+        />
+      </span>
+    </div>
   </div>
   <MarkChangeProfile ref="changeProfileRef" />
   <MarkSwitchGroupDialog ref="switchGroupRef" />
@@ -262,7 +282,6 @@ import {
   UserOutlined,
   PoweroffOutlined,
   ClockCircleOutlined,
-  QuestionCircleOutlined,
   DownOutlined,
 } from "@ant-design/icons-vue";
 import { ModeEnum } from "@/types";
@@ -310,6 +329,11 @@ const progress = computed(() => {
 const toggleHistory = () => {
   store.historyOpen = !store.historyOpen;
 };
+
+const toggleScoreBoard = () => {
+  store.setting.uiSetting["score.board.collapse"] =
+    !store.setting.uiSetting["score.board.collapse"];
+};
 const logout = () => {
   doLogout();
 };
@@ -393,4 +417,8 @@ watchEffect(() => {
   border-collapse: separate;
   border-spacing: 0 0.5em;
 }
+.svg-red {
+  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg)
+    brightness(104%) contrast(97%);
+}
 </style>

src/features/mark/images/assitant.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>小助手-默认</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
+        <g id="评卷-示例3" transform="translate(-1058.000000, -22.000000)" fill="#FFFFFF">
+            <g id="小助手" transform="translate(1058.000000, 22.000000)">
+                <path d="M1.72075922,-2.42359712e-14 L2,-2.49800181e-14 C2.55228475,-2.65530533e-14 3,0.44771525 3,1 L3,1 C3,1.55228475 3.44771525,2 4,2 L6,2 C6.55228475,2 7,1.55228475 7,1 L7,1 C7,0.44771525 7.44771525,-2.78761672e-14 8,-2.79776202e-14 L8.27924078,-2.68673972e-14 C8.70967119,-2.6946466e-14 9.09181003,0.275430095 9.22792408,0.683772234 L9.9486833,2.84604989 C9.98267212,2.94801636 10,3.05479556 10,3.16227766 L10,6.46481624 C10,6.79916943 9.83289886,7.11140076 9.5547002,7.29686654 L7.4452998,8.70313346 C7.16710114,8.88859924 7,9.20083057 7,9.53518376 L7,11 C7,11.5522847 6.55228475,12 6,12 L4,12 C3.44771525,12 3,11.5522847 3,11 L3,9.53518376 C3,9.20083057 2.83289886,8.88859924 2.5547002,8.70313346 L0.445299804,7.29686654 C0.167101135,7.11140076 5.21137287e-16,6.79916943 7.77156117e-16,6.46481624 L0,3.16227766 C3.45688785e-17,3.05479556 0.017327879,2.94801636 0.0513167019,2.84604989 L0.772075922,0.683772234 C0.908189968,0.275430095 1.29032881,-2.29768962e-14 1.72075922,-2.42028619e-14 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/features/mark/images/left-menu.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>左侧</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评卷-示例3" transform="translate(-21.000000, -22.000000)" fill="#FFFFFF">
+            <g id="左侧" transform="translate(21.000000, 22.000000)">
+                <path d="M1,0 L7,0 C7.55228475,-1.01453063e-16 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 L1,2 C0.44771525,2 6.76353751e-17,1.55228475 0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,5 L13,5 C13.5522847,5 14,5.44771525 14,6 C14,6.55228475 13.5522847,7 13,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 Z M1,10 L7,10 C7.55228475,10 8,10.4477153 8,11 C8,11.5522847 7.55228475,12 7,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 C-6.76353751e-17,10.4477153 0.44771525,10 1,10 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/features/mark/images/problems.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>问题卷</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评卷-示例3" transform="translate(-232.000000, -20.000000)">
+            <g id="问题卷" transform="translate(232.000000, 20.000000)">
+                <rect id="Combined-Shape" fill="#FE646A" x="0" y="0" width="16" height="16" rx="8"></rect>
+                <polygon id="Path-3" fill="#FE646A" points="6 12 0 16 8 16"></polygon>
+                <path d="M5,6.55717415 C5.03828087,5.03054034 6.12647287,4 8.0344143,4 C9.82762307,4 11,4.96173786 11,6.37398686 C11,7.27482658 10.5556194,7.90839723 9.674298,8.412249 C8.83908229,8.88545089 8.60908552,9.17561154 8.60908552,9.74813801 L8.60908552,10.0687477 L6.93865409,10.0687477 L6.93106755,9.75569551 C6.84673602,8.7709383 7.19161205,8.24432275 8.04222074,7.74047097 C8.84674212,7.26712304 9.0843071,6.98466594 9.0843071,6.42747353 C9.0843071,5.87789339 8.61689196,5.4884812 7.92719487,5.4884812 C7.22217811,5.4884812 6.75474464,5.90834246 6.72417858,6.55724717 L5,6.55724717 L5,6.55717415 Z M7.84293664,13 C7.1379382,13 6.69355755,12.6030303 6.69355755,11.9541256 C6.69355755,11.2975904 7.1379382,10.9083242 7.84293664,10.9083242 C8.54795341,10.9083242 8.98482081,11.2975904 8.98482081,11.9541986 C8.98482081,12.6030303 8.54795341,13 7.84293664,13 Z" id="Fill-1" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/features/mark/images/right-menu.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>右侧</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评卷-示例1" transform="translate(-1403.000000, -22.000000)" fill="#FFFFFF">
+            <g id="Group-2" transform="translate(1403.000000, 22.000000)">
+                <path d="M1,0 L7,0 C7.55228475,-1.01453063e-16 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 L1,2 C0.44771525,2 6.76353751e-17,1.55228475 0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,5 L13,5 C13.5522847,5 14,5.44771525 14,6 C14,6.55228475 13.5522847,7 13,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 Z M1,10 L7,10 C7.55228475,10 8,10.4477153 8,11 C8,11.5522847 7.55228475,12 7,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 C-6.76353751e-17,10.4477153 0.44771525,10 1,10 Z" id="右侧" transform="translate(7.000000, 6.000000) scale(-1, 1) translate(-7.000000, -6.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/features/mark/images/track-mode.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>轨迹模式-默认</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
+        <g id="评卷-示例3" transform="translate(-935.000000, -22.000000)" fill="#FFFFFF">
+            <g id="轨迹模式" transform="translate(935.000000, 22.000000)">
+                <path d="M1,0 L3,0 C3.55228475,-1.01453063e-16 4,0.44771525 4,1 L4,3 C4,3.55228475 3.55228475,4 3,4 L1,4 C0.44771525,4 6.76353751e-17,3.55228475 0,3 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M6,0 L10,0 C10.5522847,-1.01453063e-16 11,0.44771525 11,1 L11,11 C11,11.5522847 10.5522847,12 10,12 L6,12 C5.44771525,12 5,11.5522847 5,11 L5,1 C5,0.44771525 5.44771525,1.01453063e-16 6,0 Z M1,5 L3,5 C3.55228475,5 4,5.44771525 4,6 L4,11 C4,11.5522847 3.55228475,12 3,12 L1,12 C0.44771525,12 6.76353751e-17,11.5522847 0,11 L0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>