feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,105 @@
+import React, { useState, useRef, useCallback } from 'react';
+import './CodeInput.css';
+
+function buildCells(v, length) {
+  const arr = (v || '').split('').slice(0, length);
+  while (arr.length < length) arr.push('');
+  return arr;
+}
+
+export default function CodeInput({
+  value = '',
+  length = 6,
+  masked = false,
+  tip = '',
+  hasError = false,
+  onChange
+}) {
+  const inputsRef = useRef([]);
+  const [cells, setCells] = useState(() => buildCells(value, length));
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+
+  const emit = useCallback(
+    (next) => {
+      const code = next.join('');
+      if (onChange) onChange(code);
+    },
+    [onChange]
+  );
+
+  const focus = (i) => {
+    const el = inputsRef.current[i];
+    if (el) el.focus();
+  };
+
+  const onInput = (e, i) => {
+    const ch = (e.target.value || '').slice(-1);
+    const next = cells.slice();
+    next[i] = ch;
+    e.target.value = ch;
+    setCells(next);
+    if (ch && i < length - 1) focus(i + 1);
+    emit(next);
+  };
+
+  const onKeydown = (e, i) => {
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      const next = cells.slice();
+      if (next[i]) {
+        next[i] = '';
+      } else if (i > 0) {
+        next[i - 1] = '';
+        focus(i - 1);
+      }
+      setCells(next);
+      emit(next);
+    } else if (e.key === 'ArrowLeft' && i > 0) {
+      focus(i - 1);
+    } else if (e.key === 'ArrowRight' && i < length - 1) {
+      focus(i + 1);
+    }
+  };
+
+  const onPaste = (e) => {
+    e.preventDefault();
+    const text = (e.clipboardData || window.clipboardData).getData('text') || '';
+    const digits = text.replace(/\D/g, '').slice(0, length).split('');
+    const next = cells.slice();
+    for (let k = 0; k < length; k++) next[k] = digits[k] || '';
+    setCells(next);
+    focus(Math.min(digits.length, length - 1));
+    emit(next);
+  };
+
+  return (
+    <div>
+      <div className="aa-code" onPaste={onPaste}>
+        {cells.map((c, i) => (
+          <div
+            key={i}
+            className={
+              'aa-code-cell' +
+              (focusedIndex === i ? ' is-focus' : '') +
+              (c ? ' is-filled' : '') +
+              (masked ? ' is-masked' : '')
+            }
+          >
+            <input
+              ref={(el) => (inputsRef.current[i] = el)}
+              className="aa-code-input"
+              value={c}
+              maxLength={1}
+              inputMode="numeric"
+              aria-label={'验证码第 ' + (i + 1) + ' 位'}
+              onFocus={() => setFocusedIndex(i)}
+              onInput={(e) => onInput(e, i)}
+              onKeyDown={(e) => onKeydown(e, i)}
+            />
+          </div>
+        ))}
+      </div>
+      <div className={'aa-code-tip' + (hasError ? ' error' : '')}>{tip}</div>
+    </div>
+  );
+}