@c2-markdown-ui/react 0.0.0-stage → 0.4.4

package/src/widgets/Quiz.tsx

@@ -0,0 +1,320 @@
+import React, { useState, useMemo } from 'react';
+import { parseChoices } from './choiceUtils';
+
+export interface QuizProps {
+  title: string;
+  questions: QuizQuestion[];
+  showScore?: boolean;
+  showProgress?: boolean;
+  passingScore?: number;
+  /** 是否禁用：级联禁用所有题目 */
+  disabled?: boolean;
+  onchange: (value: QuizState) => void;
+}
+
+interface QuizQuestion {
+  id: string;
+  type: "mcq" | "short-answer";
+  question: string;
+  points: number;
+  // MCQ specific
+  choices?: string[];
+  correctAnswer?: string;
+  // Short answer specific  
+  placeholder?: string;
+  correctAnswers?: string[];
+}
+
+interface QuizAnswer {
+  answer: string;
+  isCorrect: boolean;
+  points: number;
+  submitted: boolean;
+}
+
+interface QuizState {
+  answers: Record<string, QuizAnswer>;
+  totalScore: number;
+  maxScore: number;
+  questionsAnswered: number;
+  isCompleted: boolean;
+}
+
+export const Quiz: React.FC<QuizProps> = ({
+  title,
+  questions,
+  showScore = true,
+  showProgress = true,
+  passingScore,
+  disabled = false,
+  onchange
+}) => {
+  const [answers, setAnswers] = useState<Record<string, QuizAnswer>>({});
+  const [draftInputs, setDraftInputs] = useState<Record<string, string>>({});
+
+  const quizState = useMemo<QuizState>(() => {
+    const maxScore = questions.reduce((sum, q) => sum + q.points, 0);
+    const totalScore = Object.values(answers).reduce((sum, a) => sum + a.points, 0);
+    const questionsAnswered = Object.keys(answers).length;
+    const isCompleted = questionsAnswered === questions.length;
+
+    return {
+      answers,
+      totalScore,
+      maxScore,
+      questionsAnswered,
+      isCompleted
+    };
+  }, [answers, questions]);
+
+  const handleQuestionAnswer = (questionId: string, userAnswer: string) => {
+    if (disabled) return;
+    const question = questions.find(q => q.id === questionId);
+    if (!question || answers[questionId]?.submitted) return;
+
+    let isCorrect = false;
+    
+    if (question.type === "mcq") {
+      isCorrect = question.correctAnswer === userAnswer;
+    } else if (question.type === "short-answer") {
+      if (question.correctAnswers) {
+        isCorrect = question.correctAnswers.some(
+          correct => correct.toLowerCase() === userAnswer.toLowerCase()
+        );
+      }
+    }
+
+    const newAnswer: QuizAnswer = {
+      answer: userAnswer,
+      isCorrect,
+      points: isCorrect ? question.points : 0,
+      submitted: true
+    };
+
+    const newAnswers = { ...answers, [questionId]: newAnswer };
+    setAnswers(newAnswers);
+
+    // Trigger onChange with updated state
+    const updatedState = {
+      answers: newAnswers,
+      totalScore: Object.values(newAnswers).reduce((sum, a) => sum + a.points, 0),
+      maxScore: quizState.maxScore,
+      questionsAnswered: Object.keys(newAnswers).length,
+      isCompleted: Object.keys(newAnswers).length === questions.length
+    };
+
+    onchange(updatedState);
+  };
+
+  const getProgressPercentage = () => {
+    return Math.round((quizState.questionsAnswered / questions.length) * 100);
+  };
+
+  const getScorePercentage = () => {
+    return quizState.maxScore > 0 ? Math.round((quizState.totalScore / quizState.maxScore) * 100) : 0;
+  };
+
+  const isPassing = () => {
+    return passingScore ? getScorePercentage() >= passingScore : null;
+  };
+
+  const renderMCQQuestion = (question: QuizQuestion) => {
+    const answer = answers[question.id];
+    const isAnswered = answer?.submitted;
+    const hasCorrect = typeof question.correctAnswer !== 'undefined';
+    // mcq choices 支持 key:label 格式：value(key) 是取值，label 是展示文案
+    const items = parseChoices(question.choices ?? []);
+    // 反馈文案：correctAnswer 是 key，展示时映射回 label
+    const correctLabel = hasCorrect
+      ? (items.find(i => i.value === question.correctAnswer)?.label ?? question.correctAnswer as string)
+      : '';
+
+    return (
+      <div key={question.id} className="quiz-question">
+        <div className="quiz-question-header">
+          <h3 className="quiz-question-text">{question.question}</h3>
+          <span className="quiz-question-points">{question.points} pts</span>
+        </div>
+
+        <div className="quiz-choices">
+          {items.map((item, index) => {
+            let choiceClass = 'quiz-choice';
+
+            if (isAnswered && hasCorrect) {
+              if (item.value === question.correctAnswer) {
+                choiceClass += ' quiz-choice-correct';
+              } else if (item.value === answer.answer && item.value !== question.correctAnswer) {
+                choiceClass += ' quiz-choice-incorrect';
+              }
+            } else if (item.value === answer?.answer) {
+              choiceClass += ' quiz-choice-selected';
+            }
+
+            return (
+              <button
+                key={index}
+                className={choiceClass}
+                onClick={() => handleQuestionAnswer(question.id, item.value)}
+                disabled={disabled || isAnswered}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {isAnswered && (
+          hasCorrect ? (
+            <div className={`quiz-feedback ${answer.isCorrect ? 'correct' : 'incorrect'}`}>
+              {answer.isCorrect
+                ? `✓ Correct! (+${answer.points} pts)`
+                : `✗ Incorrect. The correct answer is: ${correctLabel}`}
+            </div>
+          ) : (
+            <div className="quiz-feedback">
+              {`You selected: ${answer.answer}`}
+            </div>
+          )
+        )}
+      </div>
+    );
+  };
+
+  const renderShortAnswerQuestion = (question: QuizQuestion) => {
+    const answer = answers[question.id];
+    const isAnswered = answer?.submitted;
+    const hasAnswers = (question.correctAnswers && question.correctAnswers.length > 0) || false;
+    const inputValue = draftInputs[question.id] ?? '';
+
+    const handleSubmit = () => {
+      if (disabled) return;
+      if (!inputValue.trim() || isAnswered) return;
+      handleQuestionAnswer(question.id, inputValue.trim());
+      // Clear draft after submission
+      setDraftInputs(prev => {
+        const next = { ...prev };
+        delete next[question.id];
+        return next;
+      });
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !isAnswered && !disabled) {
+        handleSubmit();
+      }
+    };
+
+    return (
+      <div key={question.id} className="quiz-question">
+        <div className="quiz-question-header">
+          <h3 className="quiz-question-text">{question.question}</h3>
+          <span className="quiz-question-points">{question.points} pts</span>
+        </div>
+        
+        <div className="quiz-input-container">
+          <input
+            type="text"
+            value={isAnswered ? answer.answer : inputValue}
+            onChange={(e) => {
+              if (!isAnswered && !disabled) {
+                const val = e.target.value;
+                setDraftInputs(prev => ({ ...prev, [question.id]: val }));
+              }
+            }}
+            onKeyDown={handleKeyDown}
+            placeholder={question.placeholder || "Type your answer here..."}
+            disabled={disabled || isAnswered}
+            className={`quiz-input ${
+              isAnswered
+                ? hasAnswers
+                  ? (answer.isCorrect ? 'quiz-input-correct' : 'quiz-input-incorrect')
+                  : ''
+                : ''
+            }`}
+          />
+          {!isAnswered && (
+            <button
+              onClick={handleSubmit}
+              disabled={disabled || !inputValue.trim()}
+              className="quiz-submit"
+            >
+              Submit
+            </button>
+          )}
+        </div>
+
+        {isAnswered && (
+          hasAnswers ? (
+            <div className={`quiz-feedback ${answer.isCorrect ? 'correct' : 'incorrect'}`}>
+              {answer.isCorrect 
+                ? `✓ Correct! (+${answer.points} pts)` 
+                : `✗ Incorrect. Accepted answers: ${question.correctAnswers?.join(', ') || 'N/A'}`}
+            </div>
+          ) : (
+            <div className="quiz-feedback">
+              {`Your answer: ${answer.answer}`}
+            </div>
+          )
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="widget-quiz">
+      {/* Quiz Header */}
+      <div className="quiz-header">
+        <h2 className="quiz-title">{title}</h2>
+        
+        <div className="quiz-stats">
+          {showProgress && (
+            <div className="quiz-progress">
+              <span className="quiz-progress-text">
+                Progress: {quizState.questionsAnswered}/{questions.length} questions
+              </span>
+              <div className="quiz-progress-bar">
+                <div 
+                  className="quiz-progress-fill"
+                  style={{ width: `${getProgressPercentage()}%` }}
+                />
+              </div>
+            </div>
+          )}
+          
+          {showScore && (
+            <div className="quiz-score">
+              <span className="quiz-score-text">
+                Score: {quizState.totalScore}/{quizState.maxScore} ({getScorePercentage()}%)
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Questions */}
+      <div className="quiz-questions">
+        {questions.map((question) => 
+          question.type === "mcq" 
+            ? renderMCQQuestion(question)
+            : renderShortAnswerQuestion(question)
+        )}
+      </div>
+
+      {/* Quiz Summary */}
+      {quizState.isCompleted && (
+        <div className="quiz-summary">
+          <h3>Quiz Complete!</h3>
+          <div className="quiz-final-score">
+            Final Score: {quizState.totalScore}/{quizState.maxScore} points ({getScorePercentage()}%)
+          </div>
+          {passingScore && (
+            <div className={`quiz-result ${isPassing() ? 'passed' : 'failed'}`}>
+              {isPassing() ? '🎉 Passed!' : '❌ Failed'} 
+              (Passing: {passingScore}%)
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/widgets/Radio.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react';
+import { parseChoice, parseChoices, type ChoiceItem } from './choiceUtils';
+
+export interface RadioGroupProps {
+  /** 选项：字符串数组（每项支持 key:label 格式）或对象数组（{key|value,label}，取值为 key/value，展示 label） */
+  choices: string[] | Array<{ value?: string; key?: string; label?: string }>;
+  label?: string;
+  default?: string;
+  /** 按钮样式（参考 antd Radio optionType:button）：渲染为按钮组而非圆点单选 */
+  button?: boolean;
+  /** 远端数据源 URL：设置后运行时 fetch 拉取选项，choices 作为后备/初始选项 */
+  url?: string;
+  /** 选项排列方向：vertical 纵向（默认）/ horizontal 横向 */
+  direction?: 'vertical' | 'horizontal';
+  /** 自定义布局：每行列数（设置后按 N 列网格排列，优先于 direction） */
+  columns?: number;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string) => void;
+}
+
+/** 远端响应归一化为选项数组：兼容裸数组与 {data|options|choices|items} 包裹 */
+function normalizeRemoteChoices(json: any): Array<{ value?: string; key?: string; label?: string }> {
+  let list = json;
+  if (!Array.isArray(json)) {
+    list = Array.isArray(json?.data) ? json.data
+      : Array.isArray(json?.options) ? json.options
+      : Array.isArray(json?.choices) ? json.choices
+      : Array.isArray(json?.items) ? json.items
+      : [];
+  }
+  return (list || []).filter((it: any) => it !== null && it !== undefined);
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  choices,
+  label = '',
+  default: initial,
+  button = false,
+  url,
+  direction,
+  columns,
+  disabled = false,
+  onchange
+}) => {
+  const localItems = parseChoices(choices);
+  // url 远端模式：拉取成功前用本地 choices 兜底；加载失败静默回落，均无数据时显示灰色"暂无数据"
+  const [remoteItems, setRemoteItems] = useState<ChoiceItem[] | null>(null);
+  const items = remoteItems ?? localItems;
+
+  // 初始选中：default 可能是 key、label 或 key:label 原文；无 default 时选中第一项（与 button-group 一致）
+  const mapInitial = (v: string): string => {
+    const hit = items.find(it => it.value === v || it.label === v);
+    return hit ? hit.value : parseChoice(v).value;
+  };
+  const [selected, setSelected] = useState<string>(() => {
+    if (initial !== undefined && initial !== null && initial !== '') return mapInitial(String(initial));
+    return items[0]?.value ?? '';
+  });
+
+  useEffect(() => {
+    if (!url) { setRemoteItems(null); return; }
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json: any = await res.json();
+        if (cancelled) return;
+        const list = parseChoices(normalizeRemoteChoices(json));
+        if (list.length === 0) throw new Error('响应中没有可用选项');
+        setRemoteItems(list);
+      } catch {
+        // 加载失败：静默回落本地 choices
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [url]);
+
+  const handleChange = (value: string) => {
+    if (disabled) return;
+    setSelected(value);
+    onchange(value);
+  };
+
+  // ---------- 按钮样式（antd RadioButton）：复用 widget-button-group 视觉 ----------
+  if (button) {
+    return (
+      <div className="widget-button-group">
+        {label && <label>{label}</label>}
+        <div
+          role="group"
+          aria-label={label}
+          className="radio-button-group"
+          data-direction={columns ? 'grid' : (direction || 'horizontal')}
+          style={columns && columns >= 1 ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined}
+        >
+          {items.length === 0 && (
+            <div style={{ color: '#9ca3af', fontSize: 13 }}>暂无数据</div>
+          )}
+          {items.map((item) => (
+            <button
+              key={item.value}
+              type="button"
+              aria-pressed={selected === item.value}
+              onClick={() => handleChange(item.value)}
+              disabled={disabled}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // ---------- 默认圆点单选样式（antd Radio） ----------
+  return (
+    <div className="selector">
+      {label && <div className="selector-multi-label">{label}</div>}
+      <div
+        className="radio-group"
+        role="radiogroup"
+        aria-label={label}
+        data-direction={columns ? 'grid' : (direction || 'vertical')}
+        style={columns && columns >= 1 ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined}
+      >
+        {items.length === 0 && (
+          <div style={{ color: '#9ca3af', fontSize: 13 }}>暂无数据</div>
+        )}
+        {items.map((item) => (
+          <label key={item.value} className="radio-item">
+            <input
+              type="radio"
+              value={item.value}
+              checked={selected === item.value}
+              onChange={() => handleChange(item.value)}
+              disabled={disabled}
+            />
+            <span>{item.label}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/widgets/Select.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { parseChoices } from './choiceUtils';
+
+export interface SelectProps {
+  choices: string[];
+  label?: string;
+  default?: string;
+  /** 是否可搜索：开启后下拉面板内置搜索框，按 key/value 与 label 过滤选项 */
+  searchable?: boolean;
+  /** 搜索框占位文案 */
+  placeholder?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string | string[]) => void;
+}
+
+export const Select: React.FC<SelectProps> = ({
+  choices,
+  label = '',
+  default: initial,
+  searchable = false,
+  placeholder = '',
+  disabled = false,
+  onchange
+}) => {
+  const items = parseChoices(choices);
+  const [value, setValue] = useState(initial ?? items[0]?.value ?? '');
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    onchange(newValue);
+  };
+
+  // ---------- searchable 模式：自定义下拉（触发按钮 + 搜索框 + 滚动选项列表） ----------
+  const rootRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  /** 搜索关键字（按 value/key 与 label 过滤，大小写不敏感） */
+  const [query, setQuery] = useState('');
+  /** 当前选中项展示文案（value 与 label 不同时优先 label） */
+  const display = useMemo(() => {
+    const hit = items.find(it => it.value === value);
+    return hit ? hit.label : '';
+  }, [items, value]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter(it => it.value.toLowerCase().includes(q) || it.label.toLowerCase().includes(q));
+  }, [items, query]);
+
+  // 外部点击关闭面板
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
+
+  // 打开面板时聚焦搜索框并清空关键字
+  useEffect(() => {
+    if (open && searchInputRef.current) {
+      setQuery('');
+      searchInputRef.current.focus();
+    }
+  }, [open]);
+
+  function toggleOpen() {
+    if (disabled) return;
+    setOpen(prev => !prev);
+  }
+
+  /** 选中某选项：回填 value 并关闭面板 */
+  function pick(v: string) {
+    if (disabled) return;
+    setValue(v);
+    setOpen(false);
+    onchange(v);
+  }
+
+  if (searchable) {
+    return (
+      <div className="selector" ref={rootRef}>
+        {label && <label>{label}</label>}
+        <div className="widget-field-content widget-select-content">
+          <button
+            type="button"
+            className="cas-input"
+            onClick={toggleOpen}
+            aria-expanded={open}
+            disabled={disabled}
+          >
+            <span className={`cas-input-text${display ? '' : ' cas-placeholder'}`}>{display || placeholder || '请选择'}</span>
+            <span className={`cas-arrow${open ? ' cas-arrow-open' : ''}`} aria-hidden="true">▾</span>
+          </button>
+          {open && (
+            <div className="cas-panel cas-panel-single">
+              <div className="cas-search">
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  className="cas-search-input"
+                  value={query}
+                  placeholder="搜索选项…"
+                  onChange={e => setQuery(e.target.value)}
+                />
+              </div>
+              <div className="cas-menu cas-menu-full" role="menu">
+                {filtered.map(it => (
+                  <button
+                    type="button"
+                    key={it.value}
+                    className={`cas-option${value === it.value ? ' cas-option-active' : ''}`}
+                    onClick={() => pick(it.value)}
+                  >
+                    <span className="cas-option-label">{it.label}</span>
+                  </button>
+                ))}
+                {filtered.length === 0 && <div className="cas-empty">无匹配选项</div>}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="selector">
+      {label && <label>{label}</label>}
+      <select value={value} onChange={handleChange} disabled={disabled}>
+        {items.map((item) => (
+          <option key={item.value} value={item.value}>
+            {item.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};

package/src/widgets/SelectMulti.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { parseChoice, parseChoices } from './choiceUtils';
+
+export interface SelectMultiProps {
+  /** 选项：字符串数组（每项支持 key:label 格式）或对象数组（{key|value,label}，取值为 key/value，展示 label） */
+  choices: string[] | Array<{ value?: string; key?: string; label?: string }>;
+  label?: string;
+  default?: string | string[];
+  /** 选项排列方向：vertical 纵向（默认）/ horizontal 横向 */
+  direction?: 'vertical' | 'horizontal';
+  /** 自定义布局：每行列数（设置后按 N 列网格排列，优先于 direction） */
+  columns?: number;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string | string[]) => void;
+}
+
+export const SelectMulti: React.FC<SelectMultiProps> = ({
+  choices,
+  label = '',
+  default: initial,
+  direction,
+  columns,
+  disabled = false,
+  onchange
+}) => {
+  const items = parseChoices(choices);
+  // 初始勾选值：default 可能是 key、label 或 key:label 原文，统一解析为 key 体系
+  const [value, setValue] = useState<string[]>(
+    Array.isArray(initial)
+      ? initial.map(v => parseChoice(String(v)).value)
+      : (initial ? [parseChoice(String(initial)).value] : [])
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const choice = e.target.value;
+    let newValue: string[];
+
+    if (e.target.checked) {
+      newValue = [...value, choice];
+    } else {
+      newValue = value.filter(v => v !== choice);
+    }
+
+    setValue(newValue);
+    onchange(newValue);
+  };
+
+  return (
+    <div className="selector-multi">
+      {label && <div className="selector-multi-label">{label}</div>}
+      <div
+        className="checkbox-group"
+        data-direction={columns ? 'grid' : (direction || 'vertical')}
+        style={columns && columns >= 1 ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined}
+      >
+        {items.map((item) => (
+          <label key={item.value} className="checkbox-item">
+            <input
+              type="checkbox"
+              value={item.value}
+              checked={value.includes(item.value)}
+              onChange={handleChange}
+              disabled={disabled}
+            />
+            <span>{item.label}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};