use pinia store

src/App.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { watch, watchEffect } from "vue";
-import { store } from "./store/store";
+import { store } from "@/store/store";
 
 let spinning = $ref(false);
 

src/features/arbitrate/Arbitrate.vue

@@ -30,7 +30,7 @@
 <script setup lang="ts">
 import { computed, onMounted, watch } from "vue";
 // 要共用UI就要共用store
-import { isScanImage, store } from "@/store/store";
+import { store } from "@/store/store";
 import MarkHeader from "./MarkHeader.vue";
 import { useRoute } from "vue-router";
 import MarkBody from "./MarkBody.vue";
@@ -99,7 +99,7 @@ async function updateSetting() {
     store.setting.subject.paperUrl =
       store.setting.fileServer + store.setting.subject?.paperUrl;
 
-    if (!isScanImage()) {
+    if (!store.isScanImage) {
       await getPaper(store);
     }
   }

src/features/arbitrate/MarkHeader.vue

@@ -56,9 +56,9 @@
         }}</span>
       </span>
     </div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+    <ZoomPaper v-if="store.isScanImage" :store="store" />
     <a-popover
-      v-if="isScanImage()"
+      v-if="store.isScanImage"
       title="小助手"
       trigger="hover"
       class="tw-cursor-pointer tw-flex tw-gap-2 tw-items-center tw-flex-1"
@@ -145,9 +145,8 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { store, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import {
-  SnippetsOutlined,
   UserOutlined,
   PoweroffOutlined,
   DownOutlined,

src/features/library/inspect/LibraryInspect.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, watch } from "vue";
-import { isScanImage, store } from "@/store/store";
+import { store } from "@/store/store";
 import MarkHeader from "./MarkHeader.vue";
 import { useRoute } from "vue-router";
 import MarkBody from "./MarkBody.vue";
@@ -63,7 +63,7 @@ async function updateSetting() {
     store.setting.subject.paperUrl =
       store.setting.fileServer + store.setting.subject?.paperUrl;
 
-    if (!isScanImage()) {
+    if (!store.isScanImage) {
       await getPaper(store);
     }
   }

src/features/library/inspect/MarkHeader.vue

@@ -53,7 +53,7 @@
         }}</span>
       </span>
     </div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+    <ZoomPaper v-if="store.isScanImage" :store="store" />
     <div class="tw-flex tw-place-items-center tw-justify-end tw-ml-auto">
       {{ store.setting.userName }}
     </div>
@@ -98,7 +98,7 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { store, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import { PoweroffOutlined } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
 import { clearInspectedTask } from "@/api/libraryInspectPage";

src/features/library/libraryTrack/LibraryTrack.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { isScanImage, store } from "@/store/store";
+import { store } from "@/store/store";
 import MarkHeader from "./MarkHeader.vue";
 import { useRoute } from "vue-router";
 import MarkBody from "./MarkBody.vue";
@@ -41,7 +41,7 @@ async function updateSetting() {
     store.setting.subject.paperUrl =
       store.setting.fileServer + store.setting.subject?.paperUrl;
 
-    if (!isScanImage()) {
+    if (!store.isScanImage) {
       await getPaper(store);
     }
   }

src/features/library/libraryTrack/MarkHeader.vue

@@ -29,7 +29,7 @@
       </div>
     </div>
     <div class="tw-flex tw-gap-2 tw-items-center tw-flex-1"></div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+    <ZoomPaper v-if="store.isScanImage" :store="store" />
     <div class="tw-flex tw-cursor-pointer tw-items-center tw-flex-1">
       <div
         class="
@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-import { store, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import { UserOutlined, PoweroffOutlined } from "@ant-design/icons-vue";
 import ZoomPaper from "@/components/ZoomPaper.vue";
 

src/features/library/quality/MarkHeader.vue

@@ -29,9 +29,9 @@
       </div>
     </div>
     <div class="tw-flex tw-gap-2 tw-items-center tw-flex-1"></div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+    <ZoomPaper v-if="store.isScanImage" :store="store" />
     <a-popover
-      v-if="isScanImage()"
+      v-if="store.isScanImage"
       title="小助手"
       trigger="hover"
       class="tw-cursor-pointer tw-flex tw-gap-2 tw-items-center tw-flex-1"
@@ -86,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { store, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import {
   UserOutlined,
   PoweroffOutlined,

src/features/library/quality/Quality.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { isScanImage, store } from "@/store/store";
+import { store } from "@/store/store";
 import MarkHeader from "./MarkHeader.vue";
 import { useRoute } from "vue-router";
 import MarkBody from "./MarkBody.vue";
@@ -59,7 +59,7 @@ async function updateSetting() {
     store.setting.subject.paperUrl =
       store.setting.fileServer + store.setting.subject?.paperUrl;
 
-    if (!isScanImage()) {
+    if (!store.isScanImage) {
       await getPaper(store);
     }
   }

src/features/mark/CommonMarkBody.vue

@@ -49,7 +49,7 @@
       {{ markStatus }}
       <div class="double-triangle"></div>
     </div>
-    <ZoomPaper v-if="isScanImage() && store.currentTask" :store="store" />
+    <ZoomPaper v-if="store.isScanImage && store.currentTask" :store="store" />
   </div>
   <slot name="slot-cursor" />
 </template>
@@ -63,7 +63,7 @@ import {
   watch,
   watchEffect,
 } from "vue";
-import { getMarkStatus, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import MarkDrawTrack from "./MarkDrawTrack.vue";
 import type {
   MarkResult,
@@ -87,12 +87,12 @@ import ZoomPaper from "@/components/ZoomPaper.vue";
 const props = defineProps<{
   useMarkResult?: boolean;
   makeTrack: Function;
-  store: MarkStore; // 实际上不是同一个store!!! 最新的统一成一个相同的store了
+  store: MarkStore; // 实际上不是同一个store!!! 最新的统一成一个相同的store了. 停止使用，看是否无影响。
 }>();
 
 const emit = defineEmits(["error"]);
 
-const { useMarkResult = false, makeTrack, store } = props;
+const { useMarkResult = false, makeTrack } = props;
 
 // start: 图片拖动。在轨迹模式下，仅当没有选择分数时可用。
 const { dragContainer } = dragImage();
@@ -412,7 +412,7 @@ async function processSplitConfig() {
 let renderLock = false;
 const renderPaperAndMark = async () => {
   if (!store) return;
-  if (!isScanImage()) return;
+  if (!store.isScanImage) return;
   if (renderLock) {
     console.log("上个任务还未渲染完毕，稍等一秒再尝试渲染");
     await new Promise((res) => setTimeout(res, 1000));
@@ -507,7 +507,7 @@ if (useMarkResult) {
   watch(
     () => store.currentTask,
     () => {
-      markStatus = getMarkStatus();
+      markStatus = store.getMarkStatus;
     }
   );
 

src/features/mark/Mark.vue

@@ -45,7 +45,7 @@ import {
   updateUISetting,
   doUnselectiveType,
 } from "@/api/markPage";
-import { isScanImage, store } from "@/store/store";
+import { store } from "@/store/store";
 import MarkHeader from "./MarkHeader.vue";
 import MarkBody from "./MarkBody.vue";
 import { useTimers } from "@/setups/useTimers";
@@ -94,7 +94,7 @@ async function updateSetting() {
     store.setting.subject.paperUrl =
       store.setting.fileServer + store.setting.subject?.paperUrl;
 
-    if (!isScanImage()) {
+    if (!store.isScanImage) {
       await getPaper(store);
     }
   }
@@ -147,7 +147,7 @@ async function updateTask() {
     // }
     try {
       preDrawing = true;
-      if (isScanImage()) {
+      if (store.isScanImage) {
         await preDrawImage(res.data);
       }
     } finally {

src/features/mark/MarkHeader.vue

@@ -145,7 +145,7 @@
       </a-dropdown>
     </div>
     <a-popover
-      v-if="!isScanImage()"
+      v-if="!store.isScanImage"
       title="小助手"
       trigger="hover"
       class="tw-cursor-pointer"
@@ -167,7 +167,11 @@
         <div class="dropdown-triangle"></div>
       </div>
     </a-popover>
-    <a-popover v-if="isScanImage()" trigger="hover" class="tw-cursor-pointer">
+    <a-popover
+      v-if="store.isScanImage"
+      trigger="hover"
+      class="tw-cursor-pointer"
+    >
       <template #title>
         <span
           style="
@@ -238,7 +242,7 @@
               </a-button>
             </td>
           </tr>
-          <tr v-if="isScanImage()">
+          <tr v-if="store.isScanImage">
             <td>分数/标记大小</td>
             <td>
               <a-slider
@@ -329,7 +333,7 @@
 <script setup lang="ts">
 import { doLogout, updateUISetting } from "@/api/markPage";
 import { computed, watch, watchEffect } from "vue";
-import { store, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import { ModeEnum } from "@/types";
 import MarkChangeProfile from "./MarkChangeProfile.vue";
 import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";

src/features/student/importInspect/MarkHeader.vue

@@ -45,7 +45,7 @@
         }}</span>
       </span>
     </div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+    <ZoomPaper v-if="store.isScanImage" :store="store" />
     <div
       class="tw-flex tw-place-items-center tw-cursor-pointer tw-ml-auto"
       @click="closeWindow"
@@ -88,7 +88,7 @@
 <script setup lang="ts">
 import { clearInspectedTask } from "@/api/inspectPage";
 import { onMounted } from "vue";
-import { store, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import { PoweroffOutlined } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
 import ZoomPaper from "@/components/ZoomPaper.vue";

src/features/student/inspect/Inspect.vue

@@ -25,7 +25,7 @@ import {
   rejectInspectedTask,
   saveInspectedTask,
 } from "@/api/inspectPage";
-import { isScanImage, store } from "@/store/store";
+import { store } from "@/store/store";
 import MarkHeader from "./MarkHeader.vue";
 import { useRoute } from "vue-router";
 import MarkBody from "./MarkBody.vue";
@@ -81,7 +81,7 @@ async function updateSetting() {
     store.setting.subject.paperUrl =
       store.setting.fileServer + store.setting.subject?.paperUrl;
 
-    if (!isScanImage()) {
+    if (!store.isScanImage) {
       await getPaper(store);
     }
   }

src/features/student/inspect/MarkHeader.vue

@@ -51,7 +51,7 @@
         <span class="highlight-text">{{ store.status.totalCount ?? "-" }}</span>
       </span>
     </div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+    <ZoomPaper v-if="store.isScanImage" :store="store" />
     <div class="tw-flex tw-place-items-center tw-justify-end tw-ml-auto">
       {{ store.setting.userName }}
     </div>
@@ -97,7 +97,7 @@
 <script setup lang="ts">
 import { clearInspectedTask } from "@/api/inspectPage";
 import { onMounted } from "vue";
-import { store, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import { PoweroffOutlined } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
 import ZoomPaper from "@/components/ZoomPaper.vue";

src/features/student/studentTrack/MarkHeader.vue

@@ -29,7 +29,7 @@
       </div>
     </div>
     <div class="tw-flex tw-gap-2 tw-items-center tw-flex-1"></div>
-    <ZoomPaper v-if="isScanImage()" :store="store" />
+    <ZoomPaper v-if="store.isScanImage" :store="store" />
     <div class="tw-flex tw-place-items-center tw-justify-end">
       {{ store.setting.userName }}
     </div>
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { store, isScanImage } from "@/store/store";
+import { store } from "@/store/store";
 import { PoweroffOutlined } from "@ant-design/icons-vue";
 import ZoomPaper from "@/components/ZoomPaper.vue";
 

src/features/student/studentTrack/StudentTrack.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { isScanImage, store } from "@/store/store";
+import { store } from "@/store/store";
 import MarkHeader from "./MarkHeader.vue";
 import { useRoute } from "vue-router";
 import MarkBody from "../inspect/MarkBody.vue";
@@ -54,7 +54,7 @@ async function updateSetting() {
     store.setting.subject.paperUrl =
       store.setting.fileServer + store.setting.subject?.paperUrl;
 
-    if (!isScanImage()) {
+    if (!store.isScanImage) {
       await getPaper(store);
     }
   }

src/plugins/axiosApp.ts

@@ -1,9 +1,6 @@
-import Vue from "vue";
-// import Store from "@/store";
 import axios from "axios";
 // @ts-ignore
 import { loadProgressBar } from "axios-progress-bar";
-import cachingGet from "./axiosCache";
 import { notifyInvalidTokenThrottled } from "./axiosNotice";
 import axiosRetry from "axios-retry";
 import { message } from "ant-design-vue";
@@ -14,7 +11,6 @@ const config = {
   timeout: 1 * 60 * 1000, // Timeout
   withCredentials: true, // Check cross-site Access-Control
 };
-const cacheGetUrls: [RegExp] | [] = [];
 
 const _axiosApp = axios.create(config);
 axiosRetry(_axiosApp);
@@ -97,7 +93,6 @@ _axiosApp.interceptors.response.use(
   }
 );
 
-// _axiosApp.get = cachingGet(_axiosApp, cacheGetUrls);
 loadProgressBar(null, _axiosApp);
 
 export const httpApp = _axiosApp;

src/store/store.ts

@@ -1,137 +1,141 @@
 import { Setting, MarkStore, Track } from "@/types";
-import { reactive, watch } from "vue";
+import { watch } from "vue";
+import { defineStore } from "pinia";
 
-const obj = {
-  setting: {
-    mode: "TRACK",
-    examType: "SCAN_IMAGE",
-    forceMode: false,
-    sheetView: false,
-    sheetConfig: [],
-    enableAllZero: false,
-    fileServer: "",
-    userName: "",
-    subject: <Setting["subject"]>{},
-    forceSpecialTag: false,
-    uiSetting: {
-      "answer.paper.scale": 1,
-      "score.board.collapse": false,
-      "normal.mode": "keyboard",
-      "paper.modal": false,
-      "answer.modal": false,
-      "minimap.modal": false,
-      "specialTag.modal": false,
-      "score.fontSize.scale": 1,
-    },
-    statusValue: "FORMAL",
-    problemTypes: [],
-    groupNumber: 0,
-    groupTitle: "",
-    topCount: 0,
-    splitConfig: [],
-    prefetchCount: 3,
-    startTime: 0,
-    endTime: 0,
-    selective: false,
+export const useMarkStore = defineStore("mark", {
+  state: () => {
+    return {
+      setting: {
+        mode: "TRACK",
+        examType: "SCAN_IMAGE",
+        forceMode: false,
+        sheetView: false,
+        sheetConfig: [],
+        enableAllZero: false,
+        fileServer: "",
+        userName: "",
+        subject: <Setting["subject"]>{},
+        forceSpecialTag: false,
+        uiSetting: {
+          "answer.paper.scale": 1,
+          "score.board.collapse": false,
+          "normal.mode": "keyboard",
+          "paper.modal": false,
+          "answer.modal": false,
+          "minimap.modal": false,
+          "specialTag.modal": false,
+          "score.fontSize.scale": 1,
+        },
+        statusValue: "FORMAL",
+        problemTypes: [],
+        groupNumber: 0,
+        groupTitle: "",
+        topCount: 0,
+        splitConfig: [],
+        prefetchCount: 3,
+        startTime: 0,
+        endTime: 0,
+        selective: false,
+      },
+      status: <MarkStore["status"]>{},
+      groups: [],
+      tasks: [],
+      message: null,
+      currentTask: undefined,
+      currentQuestion: undefined,
+      currentScore: undefined,
+      currentSpecialTag: undefined,
+      historyOpen: false,
+      historyTasks: [],
+      removeScoreTracks: [],
+      focusTracks: [],
+      maxModalZIndex: 1020,
+      minimapScrollTo: 0,
+      allPaperModal: false,
+      sheetViewModal: false,
+      globalMask: false,
+    } as MarkStore;
   },
-  status: <MarkStore["status"]>{},
-  groups: [],
-  tasks: [],
-  message: null,
-  currentTask: undefined,
-  currentQuestion: undefined,
-  currentScore: undefined,
-  currentSpecialTag: undefined,
-  historyOpen: false,
-  historyTasks: [],
-  removeScoreTracks: [],
-  focusTracks: [],
-  maxModalZIndex: 1020,
-  minimapScrollTo: 0,
-  allPaperModal: false,
-  sheetViewModal: false,
-  globalMask: false,
-} as MarkStore;
-
-/**
- * 返回正在评卷的状态 '' | 回评 | 打回
- */
-export function getMarkStatus() {
-  if (!store.currentTask) return "";
-
-  if (store.currentTask.previous) return "回评";
-  if (store.currentTask.rejected) return "打回";
+  getters: {
+    /* 是否是扫描阅卷 */
+    isScanImage(): boolean {
+      return this.setting.examType === "SCAN_IMAGE";
+    },
+    /* 返回正在评卷的状态 '' | 回评 | 打回 */
+    getMarkStatus(): string {
+      if (!this.currentTask) return "";
+      if (this.currentTask.previous) return "回评";
+      if (this.currentTask.rejected) return "打回";
 
-  return "";
-}
+      return "";
+    },
+  },
+  actions: {},
+});
 
-/**
- * 是否是扫描阅卷
- * @returns boolean
- */
-export function isScanImage() {
-  return store.setting.examType === "SCAN_IMAGE";
-}
+export let store = null as unknown as ReturnType<typeof useMarkStore>;
 
-export const store = reactive(obj);
+setTimeout(() => {
+  store = useMarkStore();
 
-watch(
-  () => store.currentTask,
-  () => {
-    // 初始化 task.markResult ，始终保证 task 下有 markResult
-    // 1. 评卷时，如果没有 markResult ，则初始化一个 markResult 给它
-    // 1. 回评时，先清空它的 markResult ，然后初始化一个 markResult 给它
-    if (!store.currentTask) return;
+  watch(
+    () => store.currentTask,
+    () => {
+      // 初始化 task.markResult ，始终保证 task 下有 markResult
+      // 1. 评卷时，如果没有 markResult ，则初始化一个 markResult 给它
+      // 1. 回评时，先清空它的 markResult ，然后初始化一个 markResult 给它
+      if (!store.currentTask) return;
 
-    const task = store.currentTask;
-    if (task.previous && task.markResult) {
-      // @ts-ignore 将其强制置空
-      task.markResult = undefined;
-    }
-    if (!task.markResult) {
-      // 初始化 __index
-      task.questionList.forEach((q, i, ar) => (ar[i].__index = i));
+      const task = store.currentTask;
+      if (task.previous && task.markResult) {
+        // @ts-ignore 将其强制置空
+        task.markResult = undefined;
+      }
+      if (!task.markResult) {
+        // 初始化 __index
+        task.questionList.forEach((q, i, ar) => (ar[i].__index = i));
 
-      task.__markStartTime = Date.now();
-      const statusValue = store.setting.statusValue;
-      const { libraryId, studentId } = task;
-      task.markResult = {
-        statusValue: statusValue,
-        libraryId: libraryId,
-        studentId: studentId,
-        spent: 0,
+        task.__markStartTime = Date.now();
+        const statusValue = store.setting.statusValue;
+        const { libraryId, studentId } = task;
+        task.markResult = {
+          statusValue: statusValue,
+          libraryId: libraryId,
+          studentId: studentId,
+          spent: 0,
 
-        trackList: task.questionList.reduce(
-          (all, c) => all.concat(c.trackList),
-          [] as Array<Track>
-        ),
-        specialTagList: [...(task.specialTagList ?? [])],
-        scoreList: task.questionList.map((q) => q.score),
-        markerScore: null, // 后期通过 scoreList 自动更新
+          trackList: task.questionList.reduce(
+            (all, c) => all.concat(c.trackList),
+            [] as Array<Track>
+          ),
+          specialTagList: [...(task.specialTagList ?? [])],
+          scoreList: task.questionList.map((q) => q.score),
+          markerScore: null, // 后期通过 scoreList 自动更新
 
-        problem: false,
-        problemTypeId: 0,
-        unselective: false,
-      };
+          problem: false,
+          problemTypeId: 0,
+          unselective: false,
+        };
+      }
     }
-  }
-);
+  );
 
-// 唯一根据 scoreList 自动更新 markerScore
-watch(
-  () => store.currentTask?.markResult.scoreList,
-  () => {
-    if (!store.currentTask) return;
-    const scoreList = store.currentTask.markResult.scoreList.filter(
-      (v) => v !== null
-    ) as number[];
-    const result =
-      scoreList.length === 0
-        ? null
-        : scoreList.reduce((acc, v) => (acc += Math.round(v * 100)), 0) / 100;
-    store.currentTask.markResult.markerScore = result;
-  },
-  { deep: true }
-);
+  // 唯一根据 scoreList 自动更新 markerScore
+  watch(
+    () => store.currentTask?.markResult.scoreList,
+    () => {
+      if (!store.currentTask) return;
+      const scoreList = store.currentTask.markResult.scoreList.filter(
+        (v) => v !== null
+      ) as number[];
+      const result =
+        scoreList.length === 0
+          ? null
+          : scoreList.reduce((acc, v) => (acc += Math.round(v * 100)), 0) / 100;
+      store.currentTask.markResult.markerScore = result;
+    },
+    { deep: true }
+  );
 
-// scoreList 被 trackList 和用户手动更新
+  // scoreList 被 trackList 和用户手动更新
+}, 0);