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

package/src/widgets/NumberInput.tsx

@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+
+export interface NumberInputProps {
+  label?: string;
+  /** 最小值 */
+  min?: number;
+  /** 最大值 */
+  max?: number;
+  /** 步长（点击上下按钮/方向键的增减量），默认 1 */
+  step?: number;
+  /** 数值精度（小数位数） */
+  precision?: number;
+  default?: number;
+  placeholder?: string;
+  hint?: string;
+  /** 是否必填：空值提交校验不通过 */
+  required?: boolean;
+  /** 校验失败提示文案 */
+  message?: string;
+  /** 外部（form 提交时）传入的错误信息，优先于组件内部即时校验 */
+  error?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: number | null) => void;
+}
+
+/** 文本 → 数字：空串或输入中途态返回 null，非法文本返回 null */
+function parseNum(v: string): number | null {
+  const s = v.trim();
+  if (!s || s === '-' || s === '.' || s === '-.' || s === '+' || s === '+.') return null;
+  const n = Number(s);
+  return isNaN(n) ? null : n;
+}
+
+export const NumberInput: React.FC<NumberInputProps> = ({
+  label = '',
+  min,
+  max,
+  step = 1,
+  precision,
+  default: initial,
+  placeholder = '',
+  hint = '',
+  required = false,
+  message = '',
+  error = '',
+  disabled = false,
+  onchange
+}) => {
+  // 输入框显示的原始文本：允许输入中途的临时态（如 "-" / "1."），失焦/回车时规范化
+  const [text, setText] = useState(initial !== undefined && initial !== null ? formatNum(initial, precision) : '');
+  const [localError, setLocalError] = useState('');
+
+  /** 显示格式化：设置精度时固定位数小数（如 18 → "18.00"，antd 行为） */
+  function formatNum(v: number, p?: number): string {
+    if (p !== undefined && p >= 0) return v.toFixed(p);
+    return String(v);
+  }
+
+  /** 应用精度四舍五入 + min/max 钳制 */
+  const normalize = (n: number): number => {
+    if (precision !== undefined && precision >= 0) n = Number(n.toFixed(precision));
+    if (min !== undefined && n < min) n = min;
+    if (max !== undefined && n > max) n = max;
+    return n;
+  };
+
+  /** 校验当前值：返回错误文案或空串 */
+  const validate = (v: number | null): string => {
+    if (required && v === null) return message || (label ? `请填写${label}` : '该项为必填项');
+    return '';
+  };
+
+  /** 提交：规范化显示文本并对外发值（空/非法 → null） */
+  const commit = () => {
+    const n = parseNum(text);
+    if (n === null) {
+      setText('');
+      setLocalError(validate(null));
+      onchange(null);
+      return;
+    }
+    const v = normalize(n);
+    setText(formatNum(v, precision));
+    setLocalError('');
+    onchange(v);
+  };
+
+  /** 步进：direction 为 1（加）/ -1（减）；空值从 0（或 min/max）起步 */
+  const stepBy = (direction: 1 | -1) => {
+    const base = parseNum(text);
+    const start = base ?? 0;
+    const v = normalize(start + step * direction);
+    setText(formatNum(v, precision));
+    setLocalError('');
+    onchange(v);
+  };
+
+  const handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      stepBy(1);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      stepBy(-1);
+    } else if (e.key === 'Enter') {
+      commit();
+    }
+  };
+
+  const current = parseNum(text);
+  const atMax = max !== undefined && current !== null && current >= max;
+  const atMin = min !== undefined && current !== null && current <= min;
+  const shownError = error || localError;
+
+  return (
+    <div className={`widget-number-input${shownError ? ' widget-field-error' : ''}`}>
+      {label || hint || required ? (
+        <div className="widget-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <label>{label}</label>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      ) : null}
+      <div className="widget-field-content">
+        <div className="ni-wrap">
+          <input
+            type="text"
+            inputMode="decimal"
+            autoComplete="off"
+            className={shownError ? 'widget-input-error' : undefined}
+            value={text}
+            placeholder={placeholder}
+            onKeyDown={handleKeydown}
+            onBlur={commit}
+            disabled={disabled}
+            onChange={(e) => {
+              setText(e.target.value);
+              if (localError) setLocalError(validate(parseNum(e.target.value)));
+            }}
+          />
+          <span className="ni-steps" aria-hidden="true">
+            <button
+              type="button"
+              className="ni-step-up"
+              onClick={() => stepBy(1)}
+              disabled={disabled || atMax}
+              aria-label="增加"
+              tabIndex={-1}
+            >
+              <svg viewBox="0 0 10 6" width="10" height="6"><path d="M5 0 L10 6 H0 Z" fill="currentColor" /></svg>
+            </button>
+            <button
+              type="button"
+              className="ni-step-down"
+              onClick={() => stepBy(-1)}
+              disabled={disabled || atMin}
+              aria-label="减少"
+              tabIndex={-1}
+            >
+              <svg viewBox="0 0 10 6" width="10" height="6"><path d="M5 6 L0 0 H10 Z" fill="currentColor" /></svg>
+            </button>
+          </span>
+        </div>
+        {shownError ? <div className="widget-error-text" role="alert">{shownError}</div> : null}
+      </div>
+    </div>
+  );
+};

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,177 @@
+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;
+  hint?: string;
+  /** 是否必填 */
+  required?: boolean;
+  /** 校验失败提示文案 */
+  message?: string;
+  /** 外部（form 提交时）传入的错误信息，优先于组件内部即时校验 */
+  error?: string;
+  /** 是否禁用 */
+  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,
+  hint = '',
+  required = false,
+  message = '',
+  error = '',
+  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 ?? '';
+  });
+  const [localError, setLocalError] = useState('');
+
+  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);
+    setLocalError(validate(value));
+    onchange(value);
+  };
+
+  /** 校验当前值：返回错误文案或空串 */
+  const validate = (v: string): string => {
+    if (required && v === '') return message || (label ? `请填写${label}` : '请至少选择一项');
+    return '';
+  };
+
+  const shownError = error || localError;
+
+  // ---------- 按钮样式（antd RadioButton）：复用 widget-button-group 视觉 ----------
+  if (button) {
+    return (
+      <div className={`widget-button-group${shownError ? ' widget-field-error' : ''}`}>
+        {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: 'rgba(0, 0, 0, 0.45)', 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>
+        {shownError ? <div className="widget-error-text" role="alert">{shownError}</div> : null}
+      </div>
+    );
+  }
+
+  // ---------- 默认圆点单选样式（antd Radio） ----------
+  return (
+    <div className={`selector-multi${shownError ? ' widget-field-error' : ''}`}>
+      {label || hint || required ? (
+        <div className="widget-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <div className="selector-multi-label">{label}</div>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      ) : null}
+      <div className="widget-field-content">
+        <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: 'rgba(0, 0, 0, 0.45)', 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>
+        {shownError ? <div className="widget-error-text" role="alert">{shownError}</div> : null}
+      </div>
+    </div>
+  );
+};