feat: 多题目评分支持

src/components/RubricEditor.vue

@@ -1,34 +1,38 @@
 <template>
-  <el-dialog v-model="visible" title="评分标准" width="520px" :modal="false" @close="handleClose">
-    <el-form :model="form" size="small">
-      <el-form-item label="题目">
-        <el-input
-          v-model="form.questionTitle"
-          type="textarea"
-          :rows="2"
-          placeholder="输入题目内容"
-        />
-      </el-form-item>
-      <el-form-item label="满分">
-        <el-input-number v-model="form.maxScore" :min="1" :max="1000" />
-      </el-form-item>
-      <el-form-item label="参考答案">
-        <el-input
-          v-model="form.referenceAnswer"
-          type="textarea"
-          :rows="3"
-          placeholder="输入参考答案（可选）"
-        />
-      </el-form-item>
-      <el-form-item label="评分标准">
-        <el-input
-          v-model="form.rubric"
-          type="textarea"
-          :rows="8"
-          placeholder="输入评分标准，如：&#10;实体识别完整（3分）&#10;联系类型正确（4分）&#10;图形规范（2分）"
-        />
-      </el-form-item>
-    </el-form>
+  <el-dialog v-model="visible" title="评分标准" width="600px" :modal="false" @close="handleClose">
+    <div class="question-tabs">
+      <div class="tab-list">
+        <div
+          v-for="(q, idx) in questions"
+          :key="idx"
+          class="tab-item"
+          :class="{ active: idx === activeIndex }"
+          @click="activeIndex = idx"
+        >
+          <span>题目 {{ idx + 1 }}</span>
+          <el-button text size="small" @click.stop="removeQuestion(idx)" v-if="questions.length > 1">✕</el-button>
+        </div>
+        <el-button size="small" @click="addQuestion">+ 添加题目</el-button>
+      </div>
+
+      <div class="tab-content" v-if="questions[activeIndex]">
+        <el-form :model="questions[activeIndex]" size="small" label-width="80px">
+          <el-form-item label="题目">
+            <el-input v-model="questions[activeIndex].questionTitle" type="textarea" :rows="2" placeholder="输入题目内容" />
+          </el-form-item>
+          <el-form-item label="满分">
+            <el-input-number v-model="questions[activeIndex].maxScore" :min="1" :max="1000" />
+          </el-form-item>
+          <el-form-item label="参考答案">
+            <el-input v-model="questions[activeIndex].referenceAnswer" type="textarea" :rows="3" placeholder="输入参考答案（可选）" />
+          </el-form-item>
+          <el-form-item label="评分标准">
+            <el-input v-model="questions[activeIndex].rubric" type="textarea" :rows="6" placeholder="输入评分标准" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
     <template #footer>
       <el-button size="small" @click="handleClose">取消</el-button>
       <el-button type="primary" size="small" @click="handleSave">应用</el-button>
@@ -41,40 +45,49 @@ import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useAppStore } from '@/stores/app'
 import { useGradingStore } from '@/stores/grading'
+import type { QuestionItem } from '@/types'
 
 const appStore = useAppStore()
 const gradingStore = useGradingStore()
 const visible = ref(false)
-const form = ref({ questionTitle: '', maxScore: 100, referenceAnswer: '', rubric: '' })
+const activeIndex = ref(0)
+const questions = ref<QuestionItem[]>([])
+
+function emptyQuestion(): QuestionItem {
+  return { questionTitle: '', maxScore: 100, referenceAnswer: '', rubric: '' }
+}
 
 watch(() => appStore.isRubricEditorOpen, async (val) => {
   visible.value = val
   if (val) {
-    // load rubric data from main process (set by toolbar window before opening)
     const data = await window.electronAPI?.rubric.getData()
-    if (data) {
-      form.value = {
-        questionTitle: data.questionTitle || '',
-        maxScore: data.maxScore ?? 100,
-        referenceAnswer: data.referenceAnswer || '',
-        rubric: data.rubric || ''
-      }
+    if (data?.questions?.length) {
+      questions.value = JSON.parse(JSON.stringify(data.questions))
+      activeIndex.value = data.currentIndex ?? 0
+    } else {
+      questions.value = [emptyQuestion()]
+      activeIndex.value = 0
     }
   }
 })
 
+function addQuestion() {
+  questions.value.push(emptyQuestion())
+  activeIndex.value = questions.value.length - 1
+}
+
+function removeQuestion(idx: number) {
+  questions.value.splice(idx, 1)
+  if (activeIndex.value >= questions.value.length) {
+    activeIndex.value = questions.value.length - 1
+  }
+}
+
 async function handleSave() {
-  // update local store
-  gradingStore.setQuestionTitle(form.value.questionTitle)
-  gradingStore.setRubric(form.value.rubric)
-  gradingStore.setMaxScore(form.value.maxScore)
-  gradingStore.setReferenceAnswer(form.value.referenceAnswer)
-  // persist to main process so toolbar window can read it
+  gradingStore.setQuestions(JSON.parse(JSON.stringify(questions.value)))
   await window.electronAPI?.rubric.storeData({
-    questionTitle: form.value.questionTitle,
-    maxScore: form.value.maxScore,
-    referenceAnswer: form.value.referenceAnswer,
-    rubric: form.value.rubric
+    questions: questions.value,
+    currentIndex: 0
   })
   ElMessage.success('评分标准已应用')
   handleClose()
@@ -84,3 +97,38 @@ function handleClose() {
   window.electronAPI?.dialog.close()
 }
 </script>
+
+<style scoped>
+.question-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.tab-list {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+}
+.tab-item.active {
+  background: #409EFF;
+  color: #fff;
+  border-color: #409EFF;
+}
+.tab-content {
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  padding: 16px;
+}
+</style>