refactor types & resolve alias

src/App.vue

@@ -32,6 +32,9 @@ export default defineComponent({
   // mounted() {
   //   console.log("App.vue mounted");
   // },
+  updated() {
+    console.log("App.vue updated");
+  },
 });
 </script>
 

src/api/markPage.ts

@@ -1,12 +1,33 @@
-import { httpApp } from "../plugins/axiosApp";
+import { httpApp } from "@/plugins/axiosApp";
+import { Setting, UISetting } from "@/types";
 
+/** 获取评卷设置 */
 export async function getSetting() {
   return httpApp.post("/mark/getSetting");
 }
 
-export async function updateUISetting() {
+/** 获取评卷状态 */
+export async function getStatus() {
+  return httpApp.post("/mark/getStatus");
+}
+
+/** 获取评卷分组 */
+export async function getGroup() {
+  return httpApp.post("/mark/getGroup");
+}
+
+/** 获取评卷任务 */
+export async function getTask() {
+  return httpApp.post("/mark/getTask");
+}
+
+/** 更新评卷UI */
+export async function updateUISetting(
+  mode?: Setting["mode"],
+  uiSetting?: UISetting
+) {
   const form = new FormData();
-  form.append("uiSetting", JSON.stringify({}));
-  form.append("mode", JSON.stringify("TRACK"));
+  uiSetting && form.append("uiSetting", JSON.stringify(uiSetting));
+  mode && form.append("mode", JSON.stringify(mode));
   return httpApp.post("/mark/updateSetting", form);
 }

src/components/TestSetting.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import { reactive, defineComponent, onMounted, toRefs } from "vue";
-import { getSetting, updateUISetting } from "../api/markPage";
+import { getSetting } from "../api/markPage";
 import { store } from "../store";
 
 export default defineComponent({
@@ -24,10 +24,12 @@ export default defineComponent({
     }
     onMounted(() => {
       updateSetting();
-      updateUISetting();
     });
     return { store };
   },
+  updated() {
+    console.log("TestSetting updated");
+  },
 });
 </script>
 

src/components/TestStatus.vue

@@ -44,12 +44,17 @@ export default defineComponent({
       state.markedCount = statusRes.markedCount;
       state.problemCount = statusRes.problemCount;
       state.arbitrateCount = statusRes.arbitrateCount;
+      // test re-render
+      store.setting.mode = "COMMON";
     }
     onMounted(() => {
       updateCount();
     });
     return { ...toRefs(state), store };
   },
+  updated() {
+    console.log("TestStatus updated");
+  },
 });
 </script>
 

src/components/TestStore.vue

@@ -13,5 +13,8 @@ export default defineComponent({
 
     return { state: store, toggleMode };
   },
+  updated() {
+    console.log("TestStore updated");
+  },
 });
 </script>

src/store/index.ts

@@ -1,152 +1,11 @@
+import { Setting, Store } from "@/types";
 import { reactive } from "vue";
 
-export interface Store {
-  setting: Setting;
-  groups: Array<Group>;
-  status: {
-    personCount: number; //个人评卷数量
-    markedCount: number; //总评卷数量
-    totalCount: number; //总数量
-    problemCount: number; //问题卷数量
-    arbitrateCount: number; //待仲裁卷数量
-  };
-  tasks: Array<Task>; // 保持数量为3
-  currentTask: Task; // 用来切换task，还有回看
-  markResults: Array<MarkResult>;
-}
-
-interface Setting {
-  examType: "SCAN_IMAGE" | "MULTI_MEDIA"; // 扫描图片或者多媒体，多媒体只允许 common mode
-  mode: "TRACK" | "COMMON"; //模式 TRACK/COMMON
-  forceMode: boolean; //强制模式切换
-  sheetView: boolean; //是否显示原图功能
-  sheetConfig: [SingleSheetConfig]; //原图遮盖规则
-  fileServer: string; //图片服务地址
-  marker: { id: number; name: string }; //评卷员信息
-  subject: {
-    //科目信息（试卷和答案功能）
-    name: string;
-    code: string;
-    answerUrl: string;
-    paperUrl: string;
-  };
-  forceSpecialTag: boolean; //强制标记是否开启 forceTag
-  uiSetting: {
-    "score.board.collapse": boolean;
-  };
-  statusValue: "TRIAL" | "FORMAL" | "FINISH"; //只显示试评名称  TRIAL("试评"), FORMAL("正评"), FINISH("结束")
-  problemTypes: [{ id: number; name: string }]; //问题卷类型
-  groupNumber: number; //评卷分组
-  topCount: number; //限制提示数量
-  splitConfig: Array<number>; //使用裁切整图时的裁切配置 [0,1]|[0,0.3,0.25,0.55],
-  prefetchCount: number; //预加载任务数量
-  startTime: number; //评卷开始时间
-  endTime: number; //评卷结束时间
-}
-
-interface SingleSheetConfig {
-  i: number; // index of sheets
-  w: number; // width
-  h: number; // height
-  x: number; // x 左上角为 (0, 0)
-  y: number; // y 左上角为 (0, 0)
-}
-
-interface Group {
-  markerId: number;
-  number: number;
-  title: string;
-  markedCount: number; //总评卷数量
-  totalCount: number; //总数量
-}
-
-interface Task {
-  libraryId: number;
-  studentId: number;
-  secretNumber: string;
-  studentName: string; //后端处理是否显示
-  studentCode: string;
-  examNumber: string;
-  subject: { name: string; code: string };
-  sliceUrls: Array<string>; //裁切图url
-  sliceConfig: Array<PictureSlice>; //最高显示优先级
-  jsonUrl: string; // sliceUrls为空，则是多媒体阅卷，显示JSON
-  questionList: Array<Question>;
-  currentQuestion: number; // 前端添加和使用的属性； 通过index去questionList去定位question，然后找到大题号、小题号
-  specialTagList: Array<SpecialTag>;
-
-  sheetUrls: Array<string>; //原图url
-  objectiveScore: number; //客观分 复核也用到
-
-  markerScore: number; // 评卷总分
-  markTime: number; //评卷时间
-  self: boolean; // 是否自评，暂时用不着
-  previous: boolean; // 是否回评
-  rejected: boolean; // 是否是打回
-}
-
-interface Question {
-  groupNumber: number; // 分组序号
-  mainNumber: number; // 大题号
-  subNumber: string; // 小题号
-  intervalScore: number; // 分数间隔
-  defaultScore: number;
-  minScore: number;
-  maxScore: number;
-  title: string; // 题目名称
-  trackList: Array<Track>; // 轨迹列表
-  score: number; //得分；null的值时是为打回时可以被修改的；null也是从未评分过的情况，要通过rejected来判断
-}
-
-interface Track {
-  mainNumber: number; // 大题号
-  subNumber: string; // 小题号，当前api中只有number // 特殊标记中没有
-  offsetIndex: number; // 第几张图
-  offsetX: number; // 左上角为原点
-  offsetY: number;
-  positionX: number; // 相对slice的位置比例
-  positionY: number;
-  score: number;
-}
-
-interface SpecialTag {
-  offsetIndex: number; // 第几张图
-  offsetX: number; // 左上角为原点
-  offsetY: number;
-  positionX: number; // 相对slice的位置比例
-  positionY: number;
-  tagName: string; // 特殊标记的字符串，勾叉
-}
-
-interface PictureSlice {
-  i: number;
-  w: number;
-  h: number;
-  x: number;
-  y: number;
-}
-
-interface MarkResult {
-  libraryId: number;
-  studentId: number;
-  statusValue: string;
-  spent: number; // 毫秒单位
-
-  // 轨迹 or 键盘
-  markerScore: number;
-  trackList: Array<Track>;
-  scoreList: Array<number>;
-  specialTagList: Array<SpecialTag>; // 轨迹和键盘都需要
-
-  // 问题卷
-  problem: boolean;
-  problemTypeId: number;
-}
-
 const obj = {
   setting: {
     mode: "TRACK",
   },
+  status: {},
 } as Store;
 
 /** 保存setting和task */

src/types/index.ts

@@ -0,0 +1,144 @@
+export interface Store {
+  setting: Setting;
+  groups: Array<Group>;
+  status: {
+    personCount: number; //个人评卷数量
+    markedCount: number; //总评卷数量
+    totalCount: number; //总数量
+    problemCount: number; //问题卷数量
+    arbitrateCount: number; //待仲裁卷数量
+  };
+  tasks: Array<Task>; // 保持数量为3
+  currentTask: Task; // 用来切换task，还有回看
+  markResults: Array<MarkResult>;
+}
+
+export interface Setting {
+  examType: "SCAN_IMAGE" | "MULTI_MEDIA"; // 扫描图片或者多媒体，多媒体只允许 common mode
+  mode: "TRACK" | "COMMON"; //模式 TRACK/COMMON
+  forceMode: boolean; //强制模式切换
+  sheetView: boolean; //是否显示原图功能
+  sheetConfig: [SingleSheetConfig]; //原图遮盖规则
+  fileServer: string; //图片服务地址
+  marker: { id: number; name: string }; //评卷员信息
+  subject: {
+    //科目信息（试卷和答案功能）
+    name: string;
+    code: string;
+    answerUrl: string;
+    paperUrl: string;
+  };
+  forceSpecialTag: boolean; //强制标记是否开启 forceTag
+  uiSetting: UISetting;
+  statusValue: "TRIAL" | "FORMAL" | "FINISH"; //只显示试评名称  TRIAL("试评"), FORMAL("正评"), FINISH("结束")
+  problemTypes: [{ id: number; name: string }]; //问题卷类型
+  groupNumber: number; //评卷分组
+  topCount: number; //限制提示数量
+  splitConfig: Array<number>; //使用裁切整图时的裁切配置 [0,1]|[0,0.3,0.25,0.55],
+  prefetchCount: number; //预加载任务数量
+  startTime: number; //评卷开始时间
+  endTime: number; //评卷结束时间
+}
+
+interface SingleSheetConfig {
+  i: number; // index of sheets
+  w: number; // width
+  h: number; // height
+  x: number; // x 左上角为 (0, 0)
+  y: number; // y 左上角为 (0, 0)
+}
+
+interface Group {
+  markerId: number;
+  number: number;
+  title: string;
+  markedCount: number; //总评卷数量
+  totalCount: number; //总数量
+}
+
+interface Task {
+  libraryId: number;
+  studentId: number;
+  secretNumber: string;
+  studentName: string; //后端处理是否显示
+  studentCode: string;
+  examNumber: string;
+  subject: { name: string; code: string };
+  sliceUrls: Array<string>; //裁切图url
+  sliceConfig: Array<PictureSlice>; //最高显示优先级
+  jsonUrl: string; // sliceUrls为空，则是多媒体阅卷，显示JSON
+  questionList: Array<Question>;
+  currentQuestion: number; // 前端添加和使用的属性； 通过index去questionList去定位question，然后找到大题号、小题号
+  specialTagList: Array<SpecialTag>;
+
+  sheetUrls: Array<string>; //原图url
+  objectiveScore: number; //客观分 复核也用到
+
+  markerScore: number; // 评卷总分
+  markTime: number; //评卷时间
+  self: boolean; // 是否自评，暂时用不着
+  previous: boolean; // 是否回评
+  rejected: boolean; // 是否是打回
+}
+
+interface Question {
+  groupNumber: number; // 分组序号
+  mainNumber: number; // 大题号
+  subNumber: string; // 小题号
+  intervalScore: number; // 分数间隔
+  defaultScore: number;
+  minScore: number;
+  maxScore: number;
+  title: string; // 题目名称
+  trackList: Array<Track>; // 轨迹列表
+  score: number; //得分；null的值时是为打回时可以被修改的；null也是从未评分过的情况，要通过rejected来判断
+}
+
+interface Track {
+  mainNumber: number; // 大题号
+  subNumber: string; // 小题号，当前api中只有number // 特殊标记中没有
+  offsetIndex: number; // 第几张图
+  offsetX: number; // 左上角为原点
+  offsetY: number;
+  positionX: number; // 相对slice的位置比例
+  positionY: number;
+  score: number;
+}
+
+interface SpecialTag {
+  offsetIndex: number; // 第几张图
+  offsetX: number; // 左上角为原点
+  offsetY: number;
+  positionX: number; // 相对slice的位置比例
+  positionY: number;
+  tagName: string; // 特殊标记的字符串，勾叉
+}
+
+interface PictureSlice {
+  i: number;
+  w: number;
+  h: number;
+  x: number;
+  y: number;
+}
+
+export interface UISetting {
+  "score.board.collapse": boolean;
+}
+
+interface MarkResult {
+  libraryId: number;
+  studentId: number;
+  statusValue: string;
+  spent: number; // 毫秒单位
+
+  // 轨迹 or 键盘
+  markerScore: number;
+  trackList: Array<Track>;
+  scoreList: Array<number>;
+  specialTagList: Array<SpecialTag>; // 轨迹和键盘都需要
+
+  // 问题卷
+  problem: boolean;
+  problemTypeId: number;
+}

tsconfig.json

@@ -9,7 +9,11 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "types": ["vite/client"]
+    "types": ["vite/client"],
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

vite.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
+const path = require("path");
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
@@ -22,4 +24,8 @@ export default defineConfig({
       },
     },
   },
+  resolve: {
+    alias: [{ find: "@", replacement: path.resolve(__dirname, "./src") }],
+    extensions: [".js", ".ts", ".vue", ".json", ".scss", ".css"],
+  },
 });