改写 withDefaults

src/components/CommonMarkHeader.vue

@@ -164,26 +164,24 @@ import {
   DownOutlined,
 } from "@ant-design/icons-vue";
 import ZoomPaper from "@/components/ZoomPaper.vue";
+import { AxiosResponse } from "axios";
 
-const props = withDefaults(
-  defineProps<{
-    isSingleStudent?: boolean;
-    // eslint-disable-next-line
-    clearTasks?: Function;
-    showPaperAndAnswer?: boolean;
-    showScoreBoard?: boolean;
-  }>(),
-  {
-    isSingleStudent: true,
-    // eslint-disable-next-line
-    clearTasks: () => {},
-    showPaperAndAnswer: false,
-    showScoreBoard: false,
-  }
-);
+// TODO: https://github.com/vuejs/rfcs/discussions/369  defineProps deconstructure retain reactivity
+// eslint-disable-next-line vue/no-setup-props-destructure
+const {
+  isSingleStudent = true,
+  clearTasks,
+  showPaperAndAnswer = false,
+  showScoreBoard = false,
+} = defineProps<{
+  isSingleStudent?: boolean;
+  clearTasks?: () => Promise<AxiosResponse<void, any>>;
+  showPaperAndAnswer?: boolean;
+  showScoreBoard?: boolean;
+}>();
 
 async function updateClearTask() {
-  await props.clearTasks();
+  clearTasks && (await clearTasks());
 }
 
 const closeWindow = async () => {

src/components/QmDialog.vue

@@ -44,6 +44,7 @@ import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/store/store";
 
 // 因为要更改props取得的值，所以不需要reactivity
+// TODO: https://github.com/vuejs/rfcs/discussions/369  defineProps deconstructure retain reactivity
 // eslint-disable-next-line vue/no-setup-props-destructure
 const {
   top = "10%",

src/features/mark/CommonMarkBody.vue

@@ -72,18 +72,18 @@ type MakeTrack = (
   maxSliceWidth: number,
   theFinalHeight: number
 ) => void | (() => void);
-const props = withDefaults(
-  defineProps<{
-    useMarkResult?: boolean;
-    makeTrack?: MakeTrack;
-  }>(),
-  {
-    useMarkResult: false,
-    makeTrack: () => {
-      console.debug("非评卷界面makeTrack没有意义");
-    },
-  }
-);
+
+// TODO: https://github.com/vuejs/rfcs/discussions/369  defineProps deconstructure retain reactivity
+// eslint-disable-next-line vue/no-setup-props-destructure
+const {
+  useMarkResult = false,
+  makeTrack = () => {
+    console.debug("非评卷界面makeTrack没有意义");
+  },
+} = defineProps<{
+  useMarkResult?: boolean;
+  makeTrack?: MakeTrack;
+}>();
 
 const emit = defineEmits(["error"]);
 
@@ -149,7 +149,7 @@ let theFinalHeight = 0; // 最终宽度，用来定位轨迹在第几张图片
 
 async function processSliceConfig() {
   let markResult = store.currentTask?.markResult as MarkResult;
-  if (props.useMarkResult) {
+  if (useMarkResult) {
     // check if have MarkResult for currentTask
     if (!markResult) return;
   }
@@ -192,7 +192,7 @@ async function processSliceConfig() {
     );
 
     let trackLists = [] as Array<Track>;
-    if (props.useMarkResult) {
+    if (useMarkResult) {
       trackLists = markResult.trackList;
     } else {
       trackLists = store.currentTask.questionList
@@ -207,7 +207,7 @@ async function processSliceConfig() {
     );
 
     let tagLists = [] as Array<SpecialTag>;
-    if (props.useMarkResult) {
+    if (useMarkResult) {
       tagLists = markResult.specialTagList ?? [];
     } else {
       tagLists = store.currentTask.specialTagList ?? [];
@@ -260,7 +260,7 @@ async function processSliceConfig() {
 
 async function processSplitConfig() {
   let markResult = store.currentTask?.markResult as MarkResult;
-  if (props.useMarkResult) {
+  if (useMarkResult) {
     // check if have MarkResult for currentTask
     if (!markResult) return;
   }
@@ -329,7 +329,7 @@ async function processSplitConfig() {
       );
 
       let trackLists = [] as Array<Track>;
-      if (props.useMarkResult) {
+      if (useMarkResult) {
         trackLists = markResult.trackList;
       } else {
         // 成绩查询 questionList 可能为空
@@ -345,7 +345,7 @@ async function processSplitConfig() {
       );
 
       let tagLists = [] as Array<SpecialTag>;
-      if (props.useMarkResult) {
+      if (useMarkResult) {
         tagLists = markResult.specialTagList ?? [];
       } else {
         tagLists = store.currentTask.specialTagList ?? [];
@@ -409,7 +409,7 @@ const renderPaperAndMark = async () => {
   // check if have MarkResult for currentTask
   let markResult = store.currentTask?.markResult;
 
-  if ((props.useMarkResult && !markResult) || !store.currentTask) {
+  if ((useMarkResult && !markResult) || !store.currentTask) {
     renderLock = false;
     return;
   }
@@ -485,7 +485,7 @@ let answerPaperScale = $computed(() => {
 
 //#region : 显示评分状态和清除轨迹
 let markStatus = $ref("");
-if (props.useMarkResult) {
+if (useMarkResult) {
   watch(
     () => store.currentTask,
     () => {
@@ -534,7 +534,7 @@ if (props.useMarkResult) {
 
 //#region : 评分
 const innerMakeTrack = (event: MouseEvent, item: SliceImage) => {
-  props.makeTrack(event, item, maxSliceWidth, theFinalHeight);
+  makeTrack(event, item, maxSliceWidth, theFinalHeight);
 };
 //#endregion : 评分
 

src/features/mark/MarkHistory.vue

@@ -5,10 +5,10 @@
   >
     <div class="tw-mt-1 tw-mb-1 tw-flex tw-place-items-center">
       <div class="tw-text-lg main-text-color tw-mr-3 tw-font-bold">
-        {{ props.title }}
+        {{ title }}
       </div>
       <input
-        v-if="props.showSearch"
+        v-if="showSearch"
         v-model="secretNumberInput"
         type="text"
         placeholder="查找试卷"
@@ -18,7 +18,7 @@
         @keyup.enter="searchHistoryTask"
       />
       <SearchOutlined
-        v-if="props.showSearch"
+        v-if="showSearch"
         style="margin-left: -24px; font-size: 18px; padding: 3px"
         @click="searchHistoryTask"
       />
@@ -27,18 +27,14 @@
       <div class="tw-cursor-pointer tw-flex">编号</div>
       <div
         class="tw-cursor-pointer tw-flex tw-items-center"
-        @click="toggleOrderBy(props.orderTimeField)"
+        @click="toggleOrderBy(orderTimeField)"
       >
         时间
         <CaretUpOutlined
-          v-if="
-            props.showOrder && order === props.orderTimeField && sort === 'ASC'
-          "
+          v-if="showOrder && order === orderTimeField && sort === 'ASC'"
         />
         <CaretDownOutlined
-          v-if="
-            props.showOrder && order === props.orderTimeField && sort === 'DESC'
-          "
+          v-if="showOrder && order === orderTimeField && sort === 'DESC'"
         />
       </div>
       <div
@@ -47,10 +43,10 @@
       >
         分数
         <CaretUpOutlined
-          v-if="props.showOrder && order === 'markerScore' && sort === 'ASC'"
+          v-if="showOrder && order === 'markerScore' && sort === 'ASC'"
         />
         <CaretDownOutlined
-          v-if="props.showOrder && order === 'markerScore' && sort === 'DESC'"
+          v-if="showOrder && order === 'markerScore' && sort === 'DESC'"
         />
       </div>
     </div>
@@ -58,15 +54,7 @@
       <div style="margin-bottom: -40px; padding-bottom: 40px">
         <div v-for="(task, index) of store.historyTasks" :key="index">
           <div
-            class="
-              tw-flex
-              tw-justify-between
-              tw-place-items-center
-              tw-rounded
-              tw-cursor-pointer
-              tw-font-bold
-              tw-py-2
-            "
+            class="tw-flex tw-justify-between tw-place-items-center tw-rounded tw-cursor-pointer tw-font-bold tw-py-2"
             :class="store.currentTask === task && 'current-task'"
             @click="replaceCurrentTask(task)"
           >
@@ -84,10 +72,7 @@
       </div>
     </a-spin>
     <div
-      class="
-        tw-flex tw-justify-between tw-place-content-center tw-mt-2
-        pager-container
-      "
+      class="tw-flex tw-justify-between tw-place-content-center tw-mt-2 pager-container"
     >
       <div class="tw-font-bold" style="line-height: 30px">
         第{{ currentPage }}页
@@ -116,7 +101,7 @@
 
 <script setup lang="ts">
 import type {
-  getHistory,
+  GetHistory,
   HistoryQueryParams,
   MarkHistoryOrderBy,
   MarkHistorySortField,
@@ -133,37 +118,37 @@ import { cloneDeep } from "lodash-es";
 import EventBus from "@/plugins/eventBus";
 import { addFileServerPrefixToTask } from "@/utils/utils";
 
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    showOrder?: boolean;
-    showSearch?: boolean;
-    orderTimeField?: "markerTime" | "inspectTime";
-    subjectCode?: string;
-    groupNumber?: string;
-    markerId?: string;
-    markerScore?: string;
-    getHistory: getHistory;
-  }>(),
-  {
-    title: "回评",
-    showOrder: false,
-    showSearch: false,
-    orderTimeField: "markerTime",
-    subjectCode: undefined,
-    groupNumber: undefined,
-    markerId: undefined,
-    markerScore: undefined,
-  }
-);
+// TODO: https://github.com/vuejs/rfcs/discussions/369  defineProps deconstructure retain reactivity
+// eslint-disable-next-line vue/no-setup-props-destructure
+const {
+  title = "回评",
+  showOrder = false,
+  showSearch = false,
+  orderTimeField = "markerTime",
+  subjectCode = undefined,
+  groupNumber = undefined,
+  markerId = undefined,
+  markerScore = undefined,
+  getHistory,
+} = defineProps<{
+  title?: string;
+  showOrder?: boolean;
+  showSearch?: boolean;
+  orderTimeField?: "markerTime" | "inspectTime";
+  subjectCode?: string;
+  groupNumber?: string;
+  markerId?: string;
+  markerScore?: string;
+  getHistory: GetHistory;
+}>();
 
 let secretNumberInput = $ref("");
 let loading = $ref(false);
 let currentPage = $ref(1);
 let order: MarkHistoryOrderBy = $ref("markerTime");
-if (props.orderTimeField) {
+if (orderTimeField) {
   // eslint-disable-next-line vue/no-setup-props-destructure
-  order = props.orderTimeField;
+  order = orderTimeField;
 }
 let sort: MarkHistorySortField = $ref("DESC");
 
@@ -210,15 +195,15 @@ EventBus.on("should-reload-history", () => {
   (async () => {
     store.globalMask = true;
     try {
-      const res = await props.getHistory({
+      const res = await getHistory({
         secretNumber: store.currentTask?.secretNumber,
-        order: order,
-        sort: sort,
+        order,
+        sort,
         pageNumber: currentPage,
-        subjectCode: props.subjectCode,
-        groupNumber: props.groupNumber,
-        markerId: props.markerId,
-        markerScore: props.markerScore,
+        subjectCode,
+        groupNumber,
+        markerId,
+        markerScore,
       });
       if (res.data) {
         let data = cloneDeep(res.data) as Array<Task>;
@@ -255,16 +240,16 @@ async function updateHistoryTask({
   secretNumber = null,
 }: HistoryQueryParams) {
   loading = true;
-  const res = await props.getHistory({
+  const res = await getHistory({
     pageNumber,
     pageSize,
     order,
     sort,
     secretNumber,
-    subjectCode: props.subjectCode,
-    groupNumber: props.groupNumber,
-    markerId: props.markerId,
-    markerScore: props.markerScore,
+    subjectCode,
+    groupNumber,
+    markerId,
+    markerScore,
   });
   loading = false;
   if (res.data) {
@@ -291,7 +276,7 @@ function nextPage() {
 }
 
 function toggleOrderBy(toOrder: MarkHistoryOrderBy) {
-  if (props.showOrder) {
+  if (showOrder) {
     if (toOrder === order) {
       sort = sort === "DESC" ? "ASC" : "DESC";
     } else {

src/features/student/studentInspect/MarkBody.vue

@@ -43,14 +43,11 @@ interface SliceImage {
   width: string; // 图片在整个图片列表里面的宽度比例
 }
 
-const props = withDefaults(
-  defineProps<{
-    usingImage?: "sheetUrls" | "sliceUrls";
-  }>(),
-  {
-    usingImage: "sliceUrls",
-  }
-);
+// TODO: https://github.com/vuejs/rfcs/discussions/369  defineProps deconstructure retain reactivity
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { usingImage = "sliceUrls" } = defineProps<{
+  usingImage?: "sheetUrls" | "sliceUrls";
+}>();
 const emit = defineEmits(["error"]);
 
 const { dragContainer } = dragImage();
@@ -64,7 +61,7 @@ async function processImage() {
   if (!store.currentTask) return;
 
   const images = [];
-  const urls = store.currentTask[props.usingImage] || [];
+  const urls = store.currentTask[usingImage] || [];
   for (const url of urls) {
     const image = await loadImage(url);
     images.push(image);

src/types/index.ts

@@ -251,7 +251,7 @@ export interface HistoryQueryParams {
   markerScore?: string;
 }
 
-export interface getHistory {
+export interface GetHistory {
   (historyQuery: HistoryQueryParams): any;
 }