动画显示已评和未评的数字

package.json

@@ -16,6 +16,7 @@
     "axios-progress-bar": "^1.2.0",
     "axios-retry": "^3.1.9",
     "custom-cursor.js": "^1.3.6",
+    "gsap": "^3.7.1",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.1",
     "tailwindcss": "^2.2.7",

src/features/mark/Mark.vue

@@ -102,7 +102,7 @@ async function updateSetting() {
 
 async function updateStatus() {
   const res = await getStatus();
-  if (res.data.valid) store.status = res.data;
+  if (res.data.valid) Object.assign(store.status, res.data);
 }
 async function updateGroups() {
   const res = await getGroup();

src/features/mark/MarkHeader.vue

@@ -48,7 +48,7 @@
       <div>
         <span class="header-small-text">编号</span>
         <span class="highlight-text">{{
-          store.currentTask?.secretNumber
+          store.currentTask?.secretNumber ?? "-"
         }}</span>
       </div>
       <div
@@ -63,9 +63,7 @@
     <div v-show="store.status.totalCount" class="tw-flex tw-gap-2">
       <span>
         <span class="header-small-text">已评</span
-        ><span class="highlight-text">{{
-          store.status.personCount ?? "-"
-        }}</span>
+        ><span class="highlight-text">{{ personCountAnimated }}</span>
       </span>
       <span v-if="store.setting.topCount">
         <span class="header-small-text">分配</span
@@ -73,9 +71,7 @@
       </span>
       <span>
         <span class="header-small-text">未评</span
-        ><span class="highlight-text">{{
-          store.status.totalCount - store.status.markedCount ?? "-"
-        }}</span>
+        ><span class="highlight-text">{{ todoMarkCountAnimated }}</span>
       </span>
       <span>
         <span class="header-small-text">进度</span
@@ -281,7 +277,7 @@
 
 <script setup lang="ts">
 import { doLogout, updateUISetting } from "@/api/markPage";
-import { computed, ref, watchEffect } from "vue";
+import { computed, ref, watch, watchEffect } from "vue";
 import { store, isScanImage } from "./store";
 import {
   SnippetsOutlined,
@@ -296,6 +292,7 @@ import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";
 import MarkProblemDialog from "./MarkProblemDialog.vue";
 import { isNumber } from "lodash";
 import { Modal } from "ant-design-vue";
+import gsap from "gsap";
 
 defineEmits(["should-reload-history"]);
 
@@ -385,6 +382,33 @@ watchEffect(() => {
     });
   }
 });
+
+const personCountAnimated = computed(() => {
+  if (store.status.personCountTweenedNumber === undefined) return "-";
+  return Number(store.status.personCountTweenedNumber).toFixed(0);
+});
+const todoMarkCountAnimated = computed(() => {
+  if (store.status.totalCount === undefined) return "-";
+  return Number(store.status.todoMarkCountTweenedNumber).toFixed(0);
+});
+watch(
+  () => [
+    store.status.personCount,
+    store.status.totalCount,
+    store.status.markedCount,
+  ],
+  ([personCount, totalCount, markedCount]) => {
+    if (store.status.personCountTweenedNumber === undefined) {
+      store.status.personCountTweenedNumber = 0;
+      store.status.todoMarkCountTweenedNumber = 0;
+    }
+    gsap.to(store.status, {
+      duration: 1.5,
+      personCountTweenedNumber: personCount,
+      todoMarkCountTweenedNumber: totalCount - markedCount,
+    });
+  }
+);
 </script>
 
 <style scoped>

src/styles/global.css

@@ -10,7 +10,7 @@
 body {
   margin: 0;
   font-size: 14px;
-  min-width: 1440px;
+  min-width: 1280px;
   min-height: 600px;
   user-select: none;
 }

src/types/index.ts

@@ -7,6 +7,9 @@ export interface MarkStore {
     totalCount: number; //总数量
     problemCount: number; //问题卷数量
     arbitrateCount: number; //待仲裁卷数量
+
+    personCountTweenedNumber: number; // 已评数量（动画用）
+    todoMarkCountTweenedNumber: number; // 待评数量（动画用）
   };
   tasks: Array<Task>; // 保持数量为3
   currentTask?: Task; // 用来切换task，还有回看

yarn.lock

@@ -955,6 +955,11 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   resolved "https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.6.tgz?cache=0&sync_timestamp=1618846820463&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha1-/wQLKwhTsjw9MQJ1I3BvGIXXa+4=
 
+gsap@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.nlark.com/gsap/download/gsap-3.7.1.tgz?cache=0&sync_timestamp=1626381309302&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fgsap%2Fdownload%2Fgsap-3.7.1.tgz#1c5857f4fbcbd3f5ca0b513ef7abf828fbaa20a8"
+  integrity sha1-HFhX9PvL0/XKC1E+96v4KPuqIKg=
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz?cache=0&sync_timestamp=1618559697170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"