feat: 更新拖拽题功能和图像资源，提升学习体验

- 在 DragQuizPanel 组件中添加空白分隔符功能，增强用户交互性。
- 更新多个场景中的图像资源，确保视觉内容的准确性和一致性。
- 调整引导对话文本，提升信息传达的清晰度。
- 引入新的拖拽题逻辑，优化用户填写体验。

src/components/layout/quiz/DragQuizPanel.tsx

@@ -1,4 +1,5 @@
-import { DragFill, type DragFillResult } from "@/components";
+import { useEffect, useRef } from "react";
+import { DragFill } from "@/components";
 import { cn } from "@/lib/utils";
 import type { DragQuizPanelProps } from "./types";
 
@@ -11,10 +12,24 @@ const DragQuizPanel = ({
   questionSuffix,
   options,
   blanks,
+  blankSeparators,
   value,
   error,
   onChange,
 }: DragQuizPanelProps) => {
+  // 跟踪之前的 visible 状态
+  const prevVisibleRef = useRef(visible);
+
+  // 当窗口关闭时，清除拖拽状态
+  useEffect(() => {
+    // 如果从可见变为不可见，清除拖拽状态
+    if (prevVisibleRef.current && !visible && value.length > 0) {
+      onChange([]);
+    }
+    prevVisibleRef.current = visible;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+
   if (!visible) return null;
 
   return (
@@ -27,6 +42,7 @@ const DragQuizPanel = ({
         <div className="w-[1700px] rounded-[32px] bg-black/90 px-20 py-12 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
           <div className="text-[32px] leading-relaxed text-white">
             {title && <div className="mb-4">{title}</div>}
+
             <div>
               {questionPrefix && <span>{questionPrefix}</span>}
               {blanks.map((blank, index) => {
@@ -67,12 +83,22 @@ const DragQuizPanel = ({
                       )}
                     </span>
                     {index < blanks.length - 1 && (
-                      <span className="text-white/80 mx-1">、</span>
+                      <span className="text-white/80 mx-1">
+                        {blankSeparators && blankSeparators[index]
+                          ? blankSeparators[index]
+                          : "、"}
+                      </span>
                     )}
                   </span>
                 );
               })}
               {questionSuffix && <span>{questionSuffix}</span>}
+              {/* 答案反馈 */}
+              {error && (
+                <div className="mt-5 text-center text-[26px] text-[#fcbe53]">
+                  {error}
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -114,10 +140,6 @@ const DragQuizPanel = ({
             }}
           />
         </div>
-
-        {error && (
-          <div className="text-center text-[26px] text-[#ff4d4f]">{error}</div>
-        )}
       </div>
     </div>
   );

src/components/layout/quiz/MultipleChoiceQuizPanel.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { MultipleChoice } from "@/components";
 import type { MultipleChoiceQuizPanelProps } from "./types";
 
@@ -49,6 +49,14 @@ const MultipleChoiceQuizPanel = ({
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   const [error, setError] = useState<string>("");
 
+  // 当窗口关闭时，清除选中状态和错误状态
+  useEffect(() => {
+    if (!visible) {
+      setSelectedValues([]);
+      setError("");
+    }
+  }, [visible]);
+
   if (!visible) return null;
 
   // 处理选项点击

src/components/layout/quiz/types.ts

@@ -21,6 +21,8 @@ export interface DragQuizPanelProps {
   options: { value: string; label: string }[];
   /** 空白区域列表 */
   blanks: DragFillBlank[];
+  /** 空白之间的分隔符数组（可选，如果不提供则使用默认的"、"） */
+  blankSeparators?: string[];
   /** 当前值 */
   value: DragFillResult[];
   /** 错误提示信息 */