feat: 添加选择填空题和多选题组件，增强学习互动性

- 在 quiz 组件中引入 SelectFillQuizPanel 和 MultipleChoiceQuizPanel，丰富用户的学习体验。 - 更新 Maozedong 相关页面，增加新的选择填空题和多选题，提升互动性。 - 优化状态管理，确保题目完成后的反馈逻辑流畅。 - 更新 README 文档，详细说明新组件的功能和使用示例。
2026-02-27 17:50:47 +08:00
1 parent 2c8bc73e57
commit b91f2430c6
@@ -6,8 +6,85 @@

 - **SingleChoiceQuizPanel** - 单选题面板
 - **MultipleChoiceQuizPanel** - 多选题面板
+- **SelectFillQuizPanel** - 选择填空题面板
 - **QuizPanel** - 旧版组件（已废弃，保留以保持向后兼容）

+## SelectFillQuizPanel - 选择填空题面板
+
+### 功能特性
+
+- ✅ 支持多个空依次填写
+- ✅ 下方提供一组可点击选项（如数字 0-9）
+- ✅ 内部管理答题状态与当前激活空
+- ✅ 支持正确答案校验与错误提示
+- ✅ 关闭面板时自动重置内部状态
+
+### 使用示例
+
+```tsx
+import { SelectFillQuizPanel } from "@/components";
+
+function MyComponent() {
+  const [showQuiz, setShowQuiz] = useState(false);
+
+  return (
+    <SelectFillQuizPanel
+      visible={showQuiz}
+      titlePrefix="【填空】毛泽东主席认为，到了"
+      titleSuffix="年夏天，在理论上，而且在某种程度的行动上，他已成为一个马克思主义者。"
+      blanks={[
+        { id: "year", prefix: "____" },
+      ]}
+      options={[
+        { value: "1919", label: "1919" },
+        { value: "1920", label: "1920" },
+        { value: "1921", label: "1921" },
+      ]}
+      correctAnswers={{ year: "1920" }}
+      errorMessage="回想一下 1920 年 5 月到 7 月在上海居住的这段经历～"
+      onSubmit={(results, isCorrect) => {
+        console.log("选择结果:", results, "是否正确:", isCorrect);
+        if (isCorrect) {
+          setShowQuiz(false);
+        }
+      }}
+      onError={(error) => {
+        console.log("错误信息:", error);
+      }}
+      submitText="确定"
+    />
+  );
+}
+```
+
+### API
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| visible | boolean | - | 是否可见（必填） |
+| zIndex | number | 10000 | z-index 层级 |
+| titlePrefix | string | - | 整体题干前缀文本（可选） |
+| titleSuffix | string | - | 整体题干后缀文本（可选） |
+| blanks | SelectFillBlank[] | - | 每个填空位的配置（必填，包含 id / prefix / suffix） |
+| options | { value: string; label: string }[] | - | 候选项列表（必填） |
+| correctAnswers | Record<string, string> | - | 正确答案映射（可选，不传则不做校验，直接判定为正确） |
+| errorMessage | string | `"还不太对，再仔细对照题干和提示想一想吧～"` | 自定义错误提示信息（答案错误时显示） |
+| onSubmit | (results: SelectFillResult[], isCorrect: boolean) => void | - | 提交回调 |
+| onError | (error: string) => void | - | 错误回调 |
+| disabled | boolean | false | 是否禁用 |
+| submitText | string | "提交" | 提交按钮文本 |
+
+### 行为说明
+
+1. **点击空格**：切换当前激活的填空位。
+2. **点击下方选项**：将选项填入当前激活的空中，并自动跳转到下一个未填写的空。
+3. **点击空中的 ×**：清除该空的内容，并把当前激活位置移动到该空。
+4. **点击提交**：如果有空未填，给出“请先把所有空都填完再提交哦～”提示；如果提供了 `correctAnswers`，会逐空校验是否全部正确。
+5. **答案正确**：调用 `onSubmit(results, true)`，同时清除错误提示。
+6. **答案错误**：显示错误提示，仅调用 `onError(error)`，不调用 `onSubmit(false)`。
+7. **未提供正确答案**：直接调用 `onSubmit(results, true)`，不进行校验。
+8. **关闭面板**（`visible` 从 `true` 变为 `false`）：内部会自动重置所有填空和错误提示。
+
 ## SingleChoiceQuizPanel - 单选题面板

 ### 功能特性
@@ -16,7 +93,7 @@
 - ✅ 点击选项后自动提交
 - ✅ 支持答案验证（可选）
 - ✅ 自动显示错误提示
- ✅ 提交后禁用交互
+- ✅ 关闭面板时自动重置内部状态

 ### 使用方法

@@ -72,9 +149,10 @@ function MyComponent() {
 ### 行为说明

 1. **点击选项**：立即触发提交，如果提供了 `correctAnswer`，会自动验证
-2. **答案正确**：调用 `onSubmit(value, true)`，面板进入已提交状态
-3. **答案错误**：显示错误提示，调用 `onError(error)` 和 `onSubmit(value, false)`
+2. **答案正确**：调用 `onSubmit(value, true)`，并清空内部选择与错误状态
+3. **答案错误**：显示错误提示，仅调用 `onError(error)`，并清空内部选择状态
 4. **未提供正确答案**：直接调用 `onSubmit(value, true)`，不进行验证
+5. **关闭面板**（`visible` 从 `true` 变为 `false`）：内部会自动重置已选择的值和错误提示

 ## MultipleChoiceQuizPanel - 多选题面板

@@ -205,7 +283,7 @@ function MyComponent() {
 ## 注意事项

 1. 两个组件都使用内部状态管理，不需要外部传入 `value`
-2. 提交后组件会进入禁用状态，防止重复提交
-3. 如果提供了 `correctAnswer`，组件会自动验证并显示错误信息
+2. 如果提供了 `correctAnswer`，组件会自动验证并显示错误信息
+3. 当 `visible` 从 `true` 变为 `false` 时，单选题和多选题面板都会自动重置内部选择与错误状态，便于下次重新答题
 4. 多选题的答案比较不考虑顺序，只要选择的选项和正确答案一致即可
 5. 旧版 `QuizPanel` 仍然可用，但建议迁移到新组件