添加退出及样式

src/api/markPage.ts

@@ -92,3 +92,8 @@ export async function changeUserInfo(name: string, password?: string) {
   password && form.append("password", password);
   return httpApp.post("/mark/changeName", form);
 }
+
+/** 评卷用户退出 */
+export async function doLogout() {
+  return httpApp.post("/mark/logout");
+}

src/features/inspect/MarkHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-flex tw-gap-4 tw-justify-between tw-items-center header-container"
+    class="tw-flex tw-gap-4 tw-justify-between tw-items-center header-container tw-px-1"
     v-if="store.setting"
   >
     <div>
@@ -20,7 +20,7 @@
     </ul>
     <ul class="tw-flex tw-gap-2 tw-mb-0">
       <li @click="upScale" title="放大">
-        <PlusCircleOutlined
+        <ZoomInOutlined
           class="icon-font icon-font-size-20"
           :style="{
             color: greaterThanOneScale ? 'red' : 'white',
@@ -28,7 +28,7 @@
         />
       </li>
       <li @click="downScale" title="缩小">
-        <MinusCircleOutlined
+        <ZoomOutOutlined
           class="icon-font icon-font-size-20"
           :style="{
             color: lessThanOneScale ? 'red' : 'white',
@@ -58,13 +58,13 @@ import { getInspectedHistory } from "@/api/inspectPage";
 import { computed, defineComponent, reactive, ref } from "vue";
 import { store } from "./store";
 import {
-  PlusCircleOutlined,
-  MinusCircleOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
   FullscreenOutlined,
   HistoryOutlined,
   UserOutlined,
   PoweroffOutlined,
-  ClockCircleOutlined,
+  AlertOutlined,
   QuestionCircleOutlined,
 } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
@@ -72,13 +72,13 @@ import { useRoute } from "vue-router";
 export default defineComponent({
   name: "MarkHeader",
   components: {
-    PlusCircleOutlined,
-    MinusCircleOutlined,
+    ZoomInOutlined,
+    ZoomOutOutlined,
     FullscreenOutlined,
     HistoryOutlined,
     UserOutlined,
     PoweroffOutlined,
-    ClockCircleOutlined,
+    AlertOutlined,
     QuestionCircleOutlined,
   },
   setup() {

src/features/mark/MarkBoardTrack.vue

@@ -28,12 +28,12 @@
           class="question tw-rounded tw-p-1"
           :class="isCurrentQuestion(question) && 'current-question'"
         >
-          <div>
+          <div style="border-bottom: 1px solid grey">
             {{ question.title }} {{ question.mainNumber }}-{{
               question.subNumber
             }}
           </div>
-          <div class="tw-text-center">
+          <div class="tw-text-center tw-font-medium tw-text-2xl">
             {{ question.score || 0 }}
           </div>
         </div>

src/features/mark/MarkBody.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mark-body-container tw-flex-auto" ref="dragContainer">
+  <div class="mark-body-container tw-flex-auto tw-p-2" ref="dragContainer">
     <div v-if="!store.currentTask" class="tw-text-center">暂无评卷任务</div>
     <div v-else :style="{ width: answerPaperScale }">
       <div

src/features/mark/MarkHeader.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="tw-flex tw-gap-4 tw-justify-between tw-items-center header-container"
+    class="tw-flex tw-gap-2 tw-justify-between tw-items-center header-container tw-px-1"
     v-if="store.setting"
   >
-    <div>
+    <div style="max-width: 10%">
       <a
-        class="tw-text-white tw-underline tw-block tw-overflow-ellipsis tw-w-32 tw-overflow-hidden tw-whitespace-nowrap"
+        class="tw-text-white tw-underline tw-block tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap"
         :title="store.setting.subject.name"
         href="/mark/subject-select"
         >{{ store.setting.subject.code + "-" + store.setting.subject.name }}</a
@@ -49,7 +49,7 @@
     </ul>
     <ul class="tw-flex tw-gap-2 tw-mb-0">
       <li @click="upScale" title="放大">
-        <PlusCircleOutlined
+        <ZoomInOutlined
           class="icon-font icon-font-size-20"
           :style="{
             color: greaterThanOneScale ? 'red' : 'white',
@@ -57,7 +57,7 @@
         />
       </li>
       <li @click="downScale" title="缩小">
-        <MinusCircleOutlined
+        <ZoomOutOutlined
           class="icon-font icon-font-size-20"
           :style="{
             color: lessThanOneScale ? 'red' : 'white',
@@ -72,12 +72,18 @@
       <a-dropdown class="header-bg-color">
         <template #overlay v-if="!store.setting.forceMode">
           <a-menu>
-            <a-menu-item key="1" @click="toggleSettingMode">
+            <a-menu-item
+              key="1"
+              @click="toggleSettingMode"
+              style="font-size: 16px"
+            >
               {{ exchangeModeName }}
             </a-menu-item>
           </a-menu>
         </template>
-        <a-button style="color: white !important; border: none">
+        <a-button
+          style="font-size: 16px; color: white !important; border: none"
+        >
           {{ modeName }}
           <DownOutlined
             v-if="!store.setting.forceMode"
@@ -93,43 +99,56 @@
       class="tw-flex tw-place-items-center"
       :title="
         '评卷时间段：' +
-        $filters.datetimeFilter(store.setting.startTime) +
+        (store.setting.startTime > 0
+          ? $filters.datetimeFilter(store.setting.startTime)
+          : '-') +
         ' ~ ' +
-        $filters.datetimeFilter(store.setting.startTime)
+        (store.setting.endTime > 0
+          ? $filters.datetimeFilter(store.setting.endTime)
+          : '-')
       "
     >
-      <ClockCircleOutlined class="icon-font icon-font-size-20" />
+      <AlertOutlined class="icon-font icon-font-size-20" />
     </div>
     <div
       @click="switchGroupDialog"
-      class="tw-overflow-ellipsis tw-w-20 tw-overflow-hidden tw-whitespace-nowrap"
+      class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap"
+      style="max-width: 8%"
       :title="group?.title"
     >
-      {{ group?.title }}(切换)
+      {{ group?.title }}
+      <DownOutlined
+        v-if="!store.setting.forceMode"
+        style="font-size: 12px; display: inline-flex"
+      />
     </div>
     <div class="tw-flex tw-place-items-center">
       <UserOutlined class="icon-font icon-with-text" />{{
         store.setting.userName
       }}
     </div>
-    <div class="tw-flex tw-place-items-center">
-      <PoweroffOutlined class="icon-font icon-with-text" />退出
+    <div
+      class="tw-flex tw-place-items-center tw-cursor-pointer"
+      @click="logout"
+    >
+      <PoweroffOutlined class="icon-font icon-with-text" />
+      退出
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { getGroups, getHistoryTask } from "@/api/markPage";
+import { doLogout, getGroups, getHistoryTask } from "@/api/markPage";
 import { computed, defineComponent } from "vue";
 import { store } from "./store";
 import {
-  PlusCircleOutlined,
-  MinusCircleOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
   FullscreenOutlined,
   HistoryOutlined,
   UserOutlined,
   PoweroffOutlined,
-  ClockCircleOutlined,
+  AlertOutlined,
   QuestionCircleOutlined,
   DownOutlined,
 } from "@ant-design/icons-vue";
@@ -138,14 +157,14 @@ import { ModeEnum } from "@/types";
 export default defineComponent({
   name: "MarkHeader",
   components: {
-    PlusCircleOutlined,
-    MinusCircleOutlined,
+    ZoomInOutlined,
+    ZoomOutOutlined,
     FullscreenOutlined,
     HistoryOutlined,
     UserOutlined,
     DownOutlined,
     PoweroffOutlined,
-    ClockCircleOutlined,
+    AlertOutlined,
     QuestionCircleOutlined,
   },
   setup() {
@@ -236,6 +255,10 @@ export default defineComponent({
       }
     }
 
+    const logout = () => {
+      doLogout();
+    };
+
     return {
       store,
       modeName,
@@ -251,6 +274,7 @@ export default defineComponent({
       updateHistoryTask,
       toggleHistory,
       switchGroupDialog,
+      logout,
     };
   },
 });