@c2-markdown-ui/react 0.4.3 → 0.4.4

package/src/widgets/Incomplete.tsx

@@ -15,12 +15,12 @@ const styles = `
   display: flex;
   align-items: center;
   padding: 8px 12px;
-  background-color: rgba(0, 0, 0, 0.04);
-  border: 1px solid #f0f0f0;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
   border-radius: 4px;
   font-family: system-ui, -apple-system, sans-serif;
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.65);
+  color: #666;
 }
 
 .loading-indicator {

package/src/widgets/MultipleChoiceQuestion.tsx

@@ -1,82 +1,82 @@
-import React, { useState } from 'react';
-import { parseChoices } from './choiceUtils';
-
-export interface MultipleChoiceQuestionProps {
-  question: string;
-  choices: string[];
-  correctAnswer?: string;
-  showFeedback?: boolean;
-  /** 是否禁用：禁用后选项不可点击 */
-  disabled?: boolean;
-  onchange: (value: { answer: string; isCorrect?: boolean }) => void;
-}
-
-export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
-  question,
-  choices,
-  correctAnswer,
-  showFeedback = false,
-  disabled = false,
-  onchange
-}) => {
-  // choices 支持 key:label 格式：value(key) 是取值，label 是展示文案
-  const items = parseChoices(choices);
-  const [selectedAnswer, setSelectedAnswer] = useState<string>('');
-  const [hasAnswered, setHasAnswered] = useState(false);
-
-  const handleAnswerSelect = (answer: string) => {
-    if (disabled) return;
-    setSelectedAnswer(answer);
-    setHasAnswered(true);
-
-    const isCorrect = correctAnswer ? answer === correctAnswer : undefined;
-    onchange({ answer, isCorrect });
-  };
-
-  const getChoiceClassName = (value: string) => {
-    let className = 'mcq-choice';
-
-    if (hasAnswered && showFeedback && correctAnswer) {
-      if (value === correctAnswer) {
-        className += ' mcq-choice-correct';
-      } else if (value === selectedAnswer && value !== correctAnswer) {
-        className += ' mcq-choice-incorrect';
-      }
-    } else if (value === selectedAnswer) {
-      className += ' mcq-choice-selected';
-    }
-
-    return className;
-  };
-
-  // 反馈文案：correctAnswer 是 key，展示时映射回 label
-  const correctLabel = correctAnswer
-    ? (items.find(i => i.value === correctAnswer)?.label ?? correctAnswer)
-    : '';
-
-  return (
-    <div className="widget-mcq">
-      <div className="mcq-question">{question}</div>
-      <div className="mcq-choices">
-        {items.map((item, index) => (
-          <button
-            key={index}
-            className={getChoiceClassName(item.value)}
-            onClick={() => handleAnswerSelect(item.value)}
-            disabled={disabled || (hasAnswered && showFeedback)}
-          >
-            {item.label}
-          </button>
-        ))}
-      </div>
-      {hasAnswered && showFeedback && selectedAnswer && (
-        <div className={`mcq-feedback ${selectedAnswer === correctAnswer ? 'correct' : 'incorrect'}`}>
-          {correctAnswer ?
-            (selectedAnswer === correctAnswer ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${correctLabel}`) :
-            `You selected: ${selectedAnswer}`
-          }
-        </div>
-      )}
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import { parseChoices } from './choiceUtils';
+
+export interface MultipleChoiceQuestionProps {
+  question: string;
+  choices: string[];
+  correctAnswer?: string;
+  showFeedback?: boolean;
+  /** 是否禁用：禁用后选项不可点击 */
+  disabled?: boolean;
+  onchange: (value: { answer: string; isCorrect?: boolean }) => void;
+}
+
+export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
+  question,
+  choices,
+  correctAnswer,
+  showFeedback = false,
+  disabled = false,
+  onchange
+}) => {
+  // choices 支持 key:label 格式：value(key) 是取值，label 是展示文案
+  const items = parseChoices(choices);
+  const [selectedAnswer, setSelectedAnswer] = useState<string>('');
+  const [hasAnswered, setHasAnswered] = useState(false);
+
+  const handleAnswerSelect = (answer: string) => {
+    if (disabled) return;
+    setSelectedAnswer(answer);
+    setHasAnswered(true);
+
+    const isCorrect = correctAnswer ? answer === correctAnswer : undefined;
+    onchange({ answer, isCorrect });
+  };
+
+  const getChoiceClassName = (value: string) => {
+    let className = 'mcq-choice';
+
+    if (hasAnswered && showFeedback && correctAnswer) {
+      if (value === correctAnswer) {
+        className += ' mcq-choice-correct';
+      } else if (value === selectedAnswer && value !== correctAnswer) {
+        className += ' mcq-choice-incorrect';
+      }
+    } else if (value === selectedAnswer) {
+      className += ' mcq-choice-selected';
+    }
+
+    return className;
+  };
+
+  // 反馈文案：correctAnswer 是 key，展示时映射回 label
+  const correctLabel = correctAnswer
+    ? (items.find(i => i.value === correctAnswer)?.label ?? correctAnswer)
+    : '';
+
+  return (
+    <div className="widget-mcq">
+      <div className="mcq-question">{question}</div>
+      <div className="mcq-choices">
+        {items.map((item, index) => (
+          <button
+            key={index}
+            className={getChoiceClassName(item.value)}
+            onClick={() => handleAnswerSelect(item.value)}
+            disabled={disabled || (hasAnswered && showFeedback)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      {hasAnswered && showFeedback && selectedAnswer && (
+        <div className={`mcq-feedback ${selectedAnswer === correctAnswer ? 'correct' : 'incorrect'}`}>
+          {correctAnswer ?
+            (selectedAnswer === correctAnswer ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${correctLabel}`) :
+            `You selected: ${selectedAnswer}`
+          }
+        </div>
+      )}
+    </div>
+  );
+};