feat:标记问题按钮调整

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stmms-web",
-  "version": "3.4.4.",
+  "version": "3.4.5",
   "private": "true",
   "scripts": {
     "start": "vite --host 0.0.0.0",

src/features/mark/Mark.vue

@@ -31,6 +31,8 @@
   <modal-all-paper />
   <modal-sheet-view />
   <modal-short-cut />
+  <modal-mark-problem />
+
   <!-- other -->
   <mark-board-track-dialog
     v-if="markStore.isTrackMode"
@@ -80,6 +82,7 @@ import ModalMinimap from "./modals/ModalMinimap.vue";
 import ModalAllPaper from "./modals/ModalAllPaper.vue";
 import ModalSheetView from "./modals/ModalSheetView.vue";
 import ModalShortCut from "./modals/ModalShortCut.vue";
+import ModalMarkProblem from "./modals/ModalMarkProblem.vue";
 
 // composables
 import useTaskWatch from "./composables/useTaskWatch";

src/features/mark/composables/useQuestion.ts

@@ -1,8 +1,8 @@
 import { Question } from "@/types";
-// import { useMarkStore } from "@/store";
+import { useMarkStore } from "@/store";
 
 export default function useQuestion() {
-  // const markStore = useMarkStore();
+  const markStore = useMarkStore();
 
   // 是否处于仲裁阶段
   function isArbitrated(question: Question) {
@@ -22,9 +22,27 @@ export default function useQuestion() {
     return !question.selfMark || isArbitrated(question);
   }
 
+  // 问题卷
+  // 取消问题卷
+  function cancelProblemQuestion() {
+    if (!markStore.currentQuestion) return;
+
+    markStore.currentQuestion.problem = false;
+    markStore.currentQuestion.problemType = null;
+    markStore.currentQuestion.problemRemark = "";
+  }
+  // 去标记问题卷
+  function toMarkProblemQuestion() {
+    if (!markStore.currentQuestion) return;
+
+    markStore.problemModalVisible = true;
+  }
+
   return {
     isDisabledQuestion,
     isArbitrated,
     getArbitratedStatusName,
+    cancelProblemQuestion,
+    toMarkProblemQuestion,
   };
 }

src/features/mark/toolbar/MarkProblemDialog.vue → src/features/mark/modals/ModalMarkProblem.vue

@@ -42,15 +42,18 @@
 <script setup lang="ts">
 import { message } from "ant-design-vue";
 import { useMarkStore } from "@/store";
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 
 const markStore = useMarkStore();
 
-let visible = $ref(false);
+let visible = $ref(markStore.problemModalVisible);
 
-const showModal = () => {
-  visible = true;
-};
+watch(
+  () => markStore.problemModalVisible,
+  (val) => {
+    visible = val;
+  }
+);
 
 interface FormModel {
   problemType: string;
@@ -101,12 +104,11 @@ const handleOk = () => {
   markResult.scoreList[__index] = null;
   markStore.currentScore = null;
 
-  visible = false;
+  handleCancel();
 };
 
 const handleCancel = () => {
   visible = false;
+  markStore.problemModalVisible = false;
 };
-
-defineExpose({ showModal });
 </script>

src/features/mark/scoring/MarkBoardKeyBoard.vue

@@ -124,17 +124,17 @@
         </div>
       </template>
     </div>
-    <div
-      v-if="
-        markStore.currentQuestion?.problem &&
-        markStore.currentQuestion?.selfMark
-      "
-      class="board-footer"
-    >
-      <!-- 非回评下自己标记的问题卷才能取消 -->
-      <qm-button class="board-clear" @click="cancelProblem">
+    <div v-if="markStore.currentQuestion?.selfMark" class="board-footer">
+      <qm-button
+        v-if="markStore.currentQuestion?.problem"
+        class="board-clear"
+        @click="cancelProblemQuestion"
+      >
         取消问题卷
       </qm-button>
+      <qm-button v-else class="board-clear" @click="toMarkProblemQuestion">
+        标记问题卷
+      </qm-button>
     </div>
   </div>
 </template>
@@ -157,8 +157,13 @@ const emit = defineEmits([
 ]);
 const props = defineProps<{ isCheckAnswer?: boolean }>();
 
-const { isDisabledQuestion, isArbitrated, getArbitratedStatusName } =
-  useQuestion();
+const {
+  isDisabledQuestion,
+  isArbitrated,
+  getArbitratedStatusName,
+  cancelProblemQuestion,
+  toMarkProblemQuestion,
+} = useQuestion();
 const { chooseQuestion } = useAutoChooseFirstQuestion();
 const { makeCommonTrack } = useMakeTrack();
 const hasModifyScore = ref(false);
@@ -364,14 +369,6 @@ onUnmounted(() => {
 //   }
 // );
 
-function cancelProblem() {
-  if (!markStore.currentQuestion) return;
-
-  markStore.currentQuestion.problem = false;
-  markStore.currentQuestion.problemType = null;
-  markStore.currentQuestion.problemRemark = "";
-}
-
 function submit() {
   emit("submit");
 }

src/features/mark/scoring/MarkBoardMouse.vue

@@ -112,17 +112,17 @@
       </template>
     </div>
 
-    <div
-      v-if="
-        markStore.currentQuestion?.problem &&
-        markStore.currentQuestion?.selfMark
-      "
-      class="board-footer"
-    >
-      <!-- 非回评下自己标记的问题卷才能取消 -->
-      <qm-button class="board-clear" @click="cancelProblem">
+    <div v-if="markStore.currentQuestion?.selfMark" class="board-footer">
+      <qm-button
+        v-if="markStore.currentQuestion?.problem"
+        class="board-clear"
+        @click="cancelProblemQuestion"
+      >
         取消问题卷
       </qm-button>
+      <qm-button v-else class="board-clear" @click="toMarkProblemQuestion">
+        标记问题卷
+      </qm-button>
     </div>
   </div>
 </template>
@@ -136,8 +136,13 @@ import useQuestion from "../composables/useQuestion";
 import useMakeTrack from "../composables/useMakeTrack";
 
 const markStore = useMarkStore();
-const { isDisabledQuestion, isArbitrated, getArbitratedStatusName } =
-  useQuestion();
+const {
+  isDisabledQuestion,
+  isArbitrated,
+  getArbitratedStatusName,
+  cancelProblemQuestion,
+  toMarkProblemQuestion,
+} = useQuestion();
 const { chooseQuestion } = useAutoChooseFirstQuestion();
 const { makeCommonTrack } = useMakeTrack();
 
@@ -200,14 +205,6 @@ function questionScoreSteps(question: Question) {
   return steps;
 }
 
-function cancelProblem() {
-  if (!markStore.currentQuestion) return;
-
-  markStore.currentQuestion.problem = false;
-  markStore.currentQuestion.problemType = null;
-  markStore.currentQuestion.problemRemark = "";
-}
-
 function submit() {
   emit("submit");
 }

src/features/mark/scoring/MarkBoardTrack.vue

@@ -172,16 +172,18 @@
         回退
       </qm-button>
 
-      <qm-button
-        v-if="
-          markStore.currentQuestion?.problem &&
-          markStore.currentQuestion?.selfMark
-        "
-        class="board-clear"
-        @click="cancelProblem"
-      >
-        取消问题卷
-      </qm-button>
+      <template v-if="markStore.currentQuestion?.selfMark">
+        <qm-button
+          v-if="markStore.currentQuestion?.problem"
+          class="board-clear"
+          @click="cancelProblemQuestion"
+        >
+          取消问题卷
+        </qm-button>
+        <qm-button v-else class="board-clear" @click="toMarkProblemQuestion">
+          标记问题卷
+        </qm-button>
+      </template>
 
       <qm-button
         class="board-clear"
@@ -214,8 +216,13 @@ const emit = defineEmits(["submit", "unselectiveSubmit", "checkSubmit"]);
 
 const { addFocusTrack, removeFocusTrack } = useFocusTracks();
 const { dragSpliter, areaHeight } = useDragSplitPane();
-const { isDisabledQuestion, isArbitrated, getArbitratedStatusName } =
-  useQuestion();
+const {
+  isDisabledQuestion,
+  isArbitrated,
+  getArbitratedStatusName,
+  toMarkProblemQuestion,
+  cancelProblemQuestion,
+} = useQuestion();
 const { chooseQuestion } = useAutoChooseFirstQuestion();
 
 const activeRightMenuItem = ref<any>(null);
@@ -348,14 +355,6 @@ function chooseScore(score: number) {
   markStore.currentSpecialTagType = undefined;
 }
 
-function cancelProblem() {
-  if (!markStore.currentQuestion) return;
-
-  markStore.currentQuestion.problem = false;
-  markStore.currentQuestion.problemType = null;
-  markStore.currentQuestion.problemRemark = "";
-}
-
 let keyPressTimestamp = 0;
 let keys: string[] = [];
 function numberKeyListener(event: KeyboardEvent) {

src/features/mark/stores/mark.ts

@@ -44,6 +44,8 @@ const useMarkStore = defineStore("mark", {
     currentTask: undefined,
     currentTaskSliceImages: undefined,
     sliceImagesWithTrackList: [],
+    // 问题卷
+    problemModalVisible: false,
     // 主观题检查时，缓存已经修改过的试题
     currentTaskModifyQuestion: {},
     currentQuestion: undefined,

src/features/mark/toolbar/MarkTool.vue

@@ -42,14 +42,6 @@
         <img src="@/assets/icons/icon-thumbnail.svg" />
         <p>缩略图</p>
       </div>
-      <div
-        v-if="checkValid('issuePaper')"
-        class="mark-tool-item"
-        @click="toIssuePaper"
-      >
-        <img src="@/assets/icons/icon-issue-paper.svg" />
-        <p>问题试卷</p>
-      </div>
       <div v-if="checkValid('sizeScale')" class="mark-tool-item tool-scale">
         <div>
           <span>Aa</span>
@@ -199,7 +191,6 @@
       </template>
     </div>
   </div>
-  <MarkProblemDialog v-if="checkValid('issuePaper')" ref="problemRef" />
 </template>
 
 <script setup lang="ts">
@@ -208,8 +199,6 @@ import { useMarkStore } from "@/store";
 import { Modal } from "ant-design-vue";
 import { updateUISetting } from "@/api/markPage";
 
-import MarkProblemDialog from "./MarkProblemDialog.vue";
-
 const markStore = useMarkStore();
 
 /**
@@ -217,7 +206,6 @@ const markStore = useMarkStore();
  * paper:试卷
  * answer:答案
  * minimap:缩略图
- * issuePaper:问题试卷
  * sizeScale:标记大小
  * shortCut:快捷键
  * specialTag:特殊标记
@@ -228,15 +216,12 @@ const { actions = [] } = defineProps<{
   actions?: string[];
 }>();
 
-type ShowModalFunc = () => void;
-
 const checkValid = (name: string) => {
   if (!actions.length) return true;
   return actions.includes(name);
 };
 
 const emit = defineEmits(["allZeroSubmit"]);
-let problemRef = $ref<InstanceType<typeof MarkProblemDialog>>();
 
 const toAllPage = () => {
   markStore.allPaperModal = !markStore.allPaperModal;
@@ -253,9 +238,6 @@ const toPaper = () => {
   markStore.setting.uiSetting["paper.modal"] =
     !markStore.setting.uiSetting["paper.modal"];
 };
-const toIssuePaper = () => {
-  (problemRef.showModal as ShowModalFunc)();
-};
 
 const toShortcut = () => {
   markStore.setting.uiSetting["shortCut.modal"] =

src/styles/page.less

@@ -900,6 +900,9 @@
         .flex-static;
         margin-left: 10px;
       }
+      .question-score.is-problem {
+        margin: 0;
+      }
     }
     .board-score {
       margin-bottom: 8px;

src/types/index.ts

@@ -55,6 +55,8 @@ export interface MarkStore {
   currentScore?: number;
   currentSpecialTag?: string;
   currentSpecialTagType?: SpecialTag.tagType;
+  // 是否打开问题卷弹窗
+  problemModalVisible: boolean;
   /** 是否打开回评侧边栏 */
   historyOpen: boolean;
   historyTasks: Array<Task>;