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

package/src/widgets/Form.tsx

@@ -0,0 +1,372 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button } from './Button';
+import { ButtonGroup } from './ButtonGroup';
+import { Cascader } from './Cascader';
+import { Select } from './Select';
+import { SelectMulti } from './SelectMulti';
+import { RadioGroup } from './Radio';
+import { Slider } from './Slider';
+import { Switch } from './Switch';
+import { TextInput } from './TextInput';
+import { DatePicker } from './DatePicker';
+import { NumberInput } from './NumberInput';
+import { Chart } from './Chart';
+import { parseChoice } from './choiceUtils';
+
+export interface FieldWhen {
+  /** 依赖的字段 id */
+  field: string;
+  /** 依赖字段命中这些值之一时才展示 */
+  values: string[];
+}
+
+/** 条件组合：all 且组（全部命中）、any 或组（任一命中），两组同时存在取交集 */
+export interface FieldWhenGroup {
+  all?: FieldWhen[];
+  any?: FieldWhen[];
+}
+
+export interface Field {
+  type: string;
+  id: string;
+  /** 在 row 内占据的栅格数（1-24，类似 antd Col 的 span） */
+  span?: number;
+  /** 条件显示：依赖字段的取值命中时才展示；
+   *  多条件时为数组（AND 组合：全部命中才显示）；
+   *  分组形态 { all, any }：且组全部命中 且 或组任一命中 */
+  when?: FieldWhen | FieldWhen[] | FieldWhenGroup;
+  [key: string]: any;
+}
+
+export interface FormRow {
+  /** 列间距（px），类似 antd Row 的 gutter */
+  gutter?: number;
+  fields: Field[];
+}
+
+export interface FormProps {
+  fields: Field[];
+  /** 行分组（对象形态 { gutter, fields }；兼容旧数组形态 Field[][]） */
+  rows?: (FormRow | Field[])[];
+  inline?: boolean;
+  columns?: number;
+  submitLabel?: string;
+  /** 取消按钮文案，未设置则不显示 */
+  cancelLabel?: string;
+  /** 清空/重置按钮文案，未设置则不显示 */
+  resetLabel?: string;
+  /** 按钮组对齐：left / center / right */
+  buttonsAlign?: 'left' | 'center' | 'right';
+  /** 是否禁用：级联禁用所有字段与按钮 */
+  disabled?: boolean;
+  onchange: (values: Record<string, unknown>) => void;
+}
+
+export const Form: React.FC<FormProps> = ({
+  fields,
+  rows,
+  inline,
+  columns,
+  submitLabel,
+  cancelLabel,
+  resetLabel,
+  buttonsAlign,
+  disabled = false,
+  onchange
+}) => {
+  const initialData = useMemo(() => {
+    const acc: Record<string, unknown> = {};
+    const seen = new Set<string>();
+    for (const f of fields) {
+      if (!f?.id || seen.has(f.id)) continue; // 重复 id 防护：默认值只取首次出现
+      seen.add(f.id);
+      if (f.type === 'button-group' || f.type === 'select') {
+        // choices[0] 可能是 key:label 格式，默认值取 key（表单值体系）
+        if (f.default !== undefined && f.default !== null && f.default !== '') {
+          acc[f.id] = parseChoice(String(f.default)).value;
+        } else {
+          acc[f.id] = Array.isArray(f.choices) && f.choices.length ? parseChoice(String(f.choices[0])).value : undefined;
+        }
+      } else if (f.type === 'select-multi') {
+        const d = f.default;
+        // choices 可能是对象数组（{value,key,label}）：default 写 label 时映射回 value 取值体系
+        const objChoices = (Array.isArray(f.choices) ? f.choices : [])
+          .filter((c: any) => c && typeof c === 'object') as Array<{ value?: string; key?: string; label?: string }>;
+        const mapDefault = (v: any): string => {
+          const s = String(v);
+          const hit = objChoices.find(c => String(c.value ?? c.key) === s || c.label === s);
+          return hit ? String(hit.value ?? hit.key) : parseChoice(s).value;
+        };
+        acc[f.id] = Array.isArray(d)
+          ? d.map(mapDefault)
+          : (d ? [mapDefault(d)] : []);
+      } else if (f.type === 'radio-group') {
+        // 单选：choices 可能是对象数组（{value,key,label}），default 写 label 时映射回 value
+        const d = f.default;
+        const objChoices = (Array.isArray(f.choices) ? f.choices : [])
+          .filter((c: any) => c && typeof c === 'object') as Array<{ value?: string; key?: string; label?: string }>;
+        const mapDefault = (v: any): string => {
+          const s = String(v);
+          const hit = objChoices.find(c => String(c.value ?? c.key) === s || c.label === s);
+          return hit ? String(hit.value ?? hit.key) : parseChoice(s).value;
+        };
+        if (d !== undefined && d !== null && d !== '') {
+          acc[f.id] = mapDefault(Array.isArray(d) ? d[0] : d);
+        } else {
+          acc[f.id] = Array.isArray(f.choices) && f.choices.length ? mapDefault(f.choices[0]) : '';
+        }
+      } else if (f.type === 'cascade') {
+        acc[f.id] = f.default ?? '';
+      } else if (f.type === 'slider') {
+        acc[f.id] = f.default ?? (typeof f.min === 'number' ? f.min : 0);
+      } else if (f.type === 'switch') {
+        acc[f.id] = f.default ?? false;
+      } else if (f.type === 'date-picker') {
+        // 范围模式默认 []（空数组），单选默认 null；default 已是时间戳/格式化字符串
+        acc[f.id] = f.range
+          ? (Array.isArray(f.default) ? f.default : (f.default !== undefined ? [f.default] : []))
+          : (f.default ?? null);
+      } else if (f.type === 'number-input') {
+        // 无 default 时为 null（空值），由组件内部处理显示
+        acc[f.id] = f.default ?? null;
+      } else if (f.type === 'text-input') {
+        acc[f.id] = f.default ?? '';
+      }
+    }
+    return acc;
+  }, [fields]);
+
+  const [data, setData] = useState<Record<string, unknown>>(initialData);
+
+  useEffect(() => {
+    setData(initialData);
+  }, [initialData]);
+
+  const setValue = (id: string, value: unknown) => {
+    setData(prev => ({ ...prev, [id]: value }));
+  };
+
+  /** 字段是否可见：无 when 时恒可见；
+   *  - 单条件：依赖字段值命中 values 任一
+   *  - 数组（FieldWhen[]）：AND 组合，全部命中才显示
+   *  - 分组（FieldWhenGroup）：且组 all 全部命中 且 或组 any 任一命中 */
+  const isVisible = (f: Field): boolean => {
+    if (!f.when) return true;
+    const matchCond = (c: any): boolean => {
+      if (!c?.field || !Array.isArray(c.values) || c.values.length === 0) return true; // 非法条件忽略
+      const dep = data[c.field];
+      const op = c.op || 'eq';
+      if (op === 'eq') return c.values.includes(String(dep ?? ''));
+      const left = Number(dep);
+      if (dep === undefined || dep === null || dep === '' || isNaN(left)) return false;
+      return c.values.some((v: string) => {
+        const right = Number(v);
+        if (isNaN(right)) return false;
+        if (op === 'gt') return left > right;
+        if (op === 'gte') return left >= right;
+        if (op === 'lt') return left < right;
+        if (op === 'lte') return left <= right;
+        return left !== right; // ne
+      });
+    };
+    const when = f.when as any;
+    if (!Array.isArray(when) && typeof when === 'object' && ('all' in when || 'any' in when)) {
+      const allOk = (when.all || []).every(matchCond);
+      const anyList = when.any || [];
+      const anyOk = anyList.length === 0 ? true : anyList.some(matchCond);
+      return allOk && anyOk;
+    }
+    const conds = Array.isArray(when) ? when : [when];
+    if (conds.length === 0) return true;
+    return conds.every(matchCond);
+  };
+
+  const handleSubmit = () => {
+    if (disabled) return;
+    onchange({ ...data });
+  };
+
+  const handleReset = () => {
+    if (disabled) return;
+    setData(initialData);
+  };
+
+  const handleCancel = () => {
+    if (disabled) return;
+    onchange({ ...initialData, _action: 'cancel' });
+  };
+
+  /** 按钮组：提交 + 可选的清空/取消，data-align 控制对齐；全部未设置则不渲染 */
+  const renderActions = () => {
+    if (!cancelLabel && !resetLabel && !submitLabel) return null;
+    return (
+      <div className="widget-form-actions" data-align={buttonsAlign || 'left'}>
+        {cancelLabel && <button type="button" className="widget-form-cancel" onClick={handleCancel} disabled={disabled}>{cancelLabel}</button>}
+        {resetLabel && <button type="button" className="widget-form-reset" onClick={handleReset} disabled={disabled}>{resetLabel}</button>}
+        {submitLabel && <button type="button" className="widget-form-submit" onClick={handleSubmit} disabled={disabled}>{submitLabel}</button>}
+      </div>
+    );
+  };
+
+  const renderField = (field: Field) => {
+    const commonProps = {
+      ...field,
+      disabled: disabled || !!field.disabled,
+      onchange: (value: any) => setValue(field.id, value)
+    };
+
+    switch (field.type) {
+      case 'button':
+        return <Button {...commonProps} />;
+      case 'button-group':
+        return <ButtonGroup {...commonProps} choices={field.choices ?? []} />;
+      case 'select':
+        return <Select {...commonProps} choices={field.choices ?? []} />;
+      case 'select-multi':
+        return <SelectMulti {...commonProps} choices={field.choices ?? []} />;
+      case 'radio-group':
+        return <RadioGroup {...commonProps} choices={field.choices ?? []} />;
+      case 'cascade':
+        return <Cascader {...commonProps} choices={field.choices ?? []} />;
+      case 'slider':
+        return (
+          <Slider 
+            {...commonProps} 
+            min={field.min ?? 0} 
+            max={field.max ?? 100} 
+          />
+        );
+      case 'switch':
+        return <Switch {...commonProps} />;
+      case 'text-input':
+        return <TextInput {...commonProps} />;
+      case 'date-picker':
+        return <DatePicker {...commonProps} />;
+      case 'number-input':
+        return <NumberInput {...commonProps} />;
+      case 'chart-line':
+      case 'chart-bar':
+      case 'chart-pie':
+      case 'chart-scatter':
+        return <Chart {...field} type={field.type} labels={field.labels ?? []} datasets={field.datasets ?? []} onchange={(value: any) => setValue(field.id, value)} />;
+      default:
+        return null;
+    }
+  };
+
+  const containerClass = inline ? 'widget-form widget-form-inline' : 'widget-form';
+  const containerStyle: React.CSSProperties | undefined = columns
+    ? ({ '--form-columns': columns } as React.CSSProperties)
+    : undefined;
+
+  // 字段模式（无 row 分组）：任一字段带显式 span 时切换为 24 栅格布局，让 span 生效
+  // （无 span 的字段保持整行显示，不配 span 的表单仍走原布局，完全向后兼容）
+  const fieldsGridMode = !inline && (!rows || rows.length === 0) &&
+    fields.some(f => typeof f.span === 'number' && f.span >= 1 && f.span <= 24);
+
+  /** 字段模式栅格样式：显式 span 占 N 列；无 span 占满整行（1/-1，保持传统一行一个） */
+  const fieldsSpanStyle = (field: Field): React.CSSProperties | undefined => {
+    if (!fieldsGridMode && !inline) return undefined;
+    const s = typeof field.span === 'number' && field.span >= 1 && field.span <= 24 ? Math.round(field.span) : 0;
+    if (inline) {
+      // inline 模式：显式 span 覆盖 flex-basis（占行宽 N/24，flex-shrink 保证与相邻字段同行收放）
+      return s >= 1 ? { flex: `0 1 calc(${s} / 24 * 100%)` } : undefined;
+    }
+    return { gridColumn: s >= 1 ? `span ${s}` : '1 / -1' };
+  };
+
+  // 规范化 row：兼容旧数组形态 Field[][]
+  const normalizeRow = (row: FormRow | Field[]): FormRow =>
+    Array.isArray(row) ? { fields: row } : row;
+
+  // ---------- 重复 id 防护：与 svelte 版一致，只保留每个 id 的首次出现 ----------
+  const dedupeFields = (list: Field[]): Field[] => {
+    const seen = new Set<string>();
+    return (list ?? []).filter(f => {
+      if (!f?.id || seen.has(f.id)) return false;
+      seen.add(f.id);
+      return true;
+    });
+  };
+  const uniqueFields = useMemo(() => dedupeFields(fields), [fields]);
+  const normRows = useMemo(
+    () => (Array.isArray(rows) ? rows.map(normalizeRow).map(r => ({ ...r, fields: dedupeFields(r.fields) })).filter(r => r.fields.length > 0) : []),
+    [rows]
+  );
+
+  // 计算行内每个字段的 grid span（24 栅格，类似 antd）
+  // 显式 span 优先；无 span 时若 form 设置了 columns，则每字段占 24/columns（跨行对齐），
+  // 否则均分剩余栅格；总 span 超 24 时自动换行（由 grid auto-flow 处理）
+  const computeSpans = (fields: Field[]): number[] => {
+    const spans = fields.map(f => (typeof f.span === 'number' && f.span >= 1 && f.span <= 24 ? Math.round(f.span) : undefined));
+    const fixedTotal = spans.reduce((acc, s) => acc + (s ?? 0), 0);
+    const autoCount = spans.filter(s => s === undefined).length;
+    let autoSpan = 0;
+    if (autoCount > 0) {
+      if (columns && columns >= 1) {
+        autoSpan = Math.max(Math.floor(24 / columns), 1);
+      } else {
+        const remaining = Math.max(24 - fixedTotal, 0);
+        autoSpan = Math.max(Math.floor(remaining / autoCount), 1);
+      }
+    }
+    return spans.map(s => s ?? autoSpan);
+  };
+
+  // Rows 分组模式（24 栅格）
+  if (rows && rows.length > 0) {
+    // 设置 columns 时：所有 row 的字段合并流动，每行自动 columns 列（覆盖 row 手动分组）
+    if (columns && columns >= 1) {
+      const allFields = normRows.flatMap(r => r.fields).filter(isVisible);
+      const spans = computeSpans(allFields);
+      const gutter = normRows.find(r => r.gutter !== undefined)?.gutter;
+      return (
+        <div className="widget-form">
+          <div
+            className="widget-form-row"
+            style={gutter !== undefined ? ({ '--row-gutter': `${gutter}px` } as React.CSSProperties) : undefined}
+          >
+            {allFields.map((field, fi) => (
+              <div className="widget-form-field" key={field.id} style={{ gridColumn: `span ${spans[fi]}` }}>
+                {renderField(field)}
+              </div>
+            ))}
+          </div>
+          {renderActions()}
+        </div>
+      );
+    }
+
+    return (
+      <div className="widget-form">
+        {normRows.map((row, ri) => {
+          const visibleFields = row.fields.filter(isVisible);
+          const spans = computeSpans(visibleFields);
+          return (
+            <div
+              className="widget-form-row"
+              key={ri}
+              style={row.gutter !== undefined ? ({ '--row-gutter': `${row.gutter}px` } as React.CSSProperties) : undefined}
+            >
+              {visibleFields.map((field, fi) => (
+                <div className="widget-form-field" key={field.id} style={{ gridColumn: `span ${spans[fi]}` }}>
+                  {renderField(field)}
+                </div>
+              ))}
+            </div>
+          );
+        })}
+        {renderActions()}
+      </div>
+    );
+  }
+
+  return (
+    <div className={fieldsGridMode ? `${containerClass} widget-form-fields-grid` : containerClass} style={containerStyle}>
+      {uniqueFields.filter(isVisible).map((field) => (
+        <div className="widget-form-field" key={field.id} data-field-type={field.type} style={fieldsSpanStyle(field)}>{renderField(field)}</div>
+      ))}
+      {renderActions()}
+    </div>
+  );
+};

package/src/widgets/Incomplete.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+export const Incomplete: React.FC = () => {
+  return (
+    <div className="incomplete-widget">
+      <div className="loading-indicator">
+        <span className="loading-text">Loading...</span>
+      </div>
+    </div>
+  );
+};
+
+const styles = `
+.incomplete-widget {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  color: #666;
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.loading-text {
+  opacity: 0.7;
+}
+
+.loading-text::after {
+  content: '';
+  animation: dots 1.5s infinite;
+}
+
+@keyframes dots {
+  0%, 20% { content: ''; }
+  40% { content: '.'; }
+  60% { content: '..'; }
+  80%, 100% { content: '...'; }
+}
+`;
+
+// Inject styles if not already present
+if (typeof document !== 'undefined' && !document.getElementById('incomplete-widget-styles')) {
+  const styleSheet = document.createElement('style');
+  styleSheet.id = 'incomplete-widget-styles';
+  styleSheet.textContent = styles;
+  document.head.appendChild(styleSheet);
+}

package/src/widgets/MultipleChoiceQuestion.tsx

@@ -0,0 +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>
+  );
+};

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>
+  );
+};