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,108 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Aurora Admin · CodeInput</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./CodeInput.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">CodeInput 验证码输入</h2>
+    <p class="aa-desc">用于短信验证码、一次性口令（OTP）输入，支持自动跳转、退格回退与粘贴填充。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">基础用法（6 位）</div>
+      <div class="aa-code" id="code1" data-length="6"></div>
+      <div class="aa-code-tip" id="code1-tip"></div>
+    </div>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">掩码模式 + 4 位</div>
+      <div class="aa-code" id="code2" data-length="4" data-masked="1"></div>
+      <div class="aa-code-tip" id="code2-tip"></div>
+    </div>
+  </div>
+
+  <script>
+    function initCode(root, tip) {
+      var length = parseInt(root.dataset.length || '6', 10);
+      var masked = root.dataset.masked === '1';
+      var cells = [];
+      var vals = new Array(length).fill('');
+
+      for (var i = 0; i < length; i++) {
+        var cell = document.createElement('div');
+        cell.className = 'aa-code-cell' + (masked ? ' is-masked' : '');
+        var input = document.createElement('input');
+        input.className = 'aa-code-input';
+        input.maxLength = 1;
+        input.inputMode = 'numeric';
+        input.setAttribute('aria-label', '验证码第 ' + (i + 1) + ' 位');
+        cell.appendChild(input);
+        root.appendChild(cell);
+        cells.push(input);
+
+        input.addEventListener('focus', function () { this.parentElement.classList.add('is-focus'); });
+        input.addEventListener('blur', function () { this.parentElement.classList.remove('is-focus'); });
+
+        input.addEventListener('input', function (e) {
+          var idx = cells.indexOf(this);
+          var ch = (e.target.value || '').slice(-1);
+          vals[idx] = ch;
+          this.value = ch;
+          this.parentElement.classList.toggle('is-filled', !!ch);
+          if (ch && idx < length - 1) cells[idx + 1].focus();
+          emit();
+        });
+
+        input.addEventListener('keydown', function (e) {
+          var idx = cells.indexOf(this);
+          if (e.key === 'Backspace') {
+            e.preventDefault();
+            if (vals[idx]) {
+              vals[idx] = '';
+              this.value = '';
+              this.parentElement.classList.remove('is-filled');
+            } else if (idx > 0) {
+              vals[idx - 1] = '';
+              cells[idx - 1].value = '';
+              cells[idx - 1].parentElement.classList.remove('is-filled');
+              cells[idx - 1].focus();
+            }
+            emit();
+          } else if (e.key === 'ArrowLeft' && idx > 0) {
+            cells[idx - 1].focus();
+          } else if (e.key === 'ArrowRight' && idx < length - 1) {
+            cells[idx + 1].focus();
+          }
+        });
+
+        input.addEventListener('paste', function (e) {
+          e.preventDefault();
+          var text = (e.clipboardData || window.clipboardData).getData('text') || '';
+          var digits = text.replace(/\D/g, '').slice(0, length);
+          for (var k = 0; k < length; k++) {
+            vals[k] = digits[k] || '';
+            cells[k].value = digits[k] || '';
+            cells[k].parentElement.classList.toggle('is-filled', !!digits[k]);
+          }
+          var next = Math.min(digits.length, length - 1);
+          cells[next].focus();
+          emit();
+        });
+      }
+
+      function emit() {
+        var code = vals.join('');
+        tip.textContent = code.length === length ? '已输入完成：' + code : '';
+        root.dispatchEvent(new CustomEvent('change', { detail: code }));
+      }
+    }
+
+    initCode(document.getElementById('code1'), document.getElementById('code1-tip'));
+    initCode(document.getElementById('code2'), document.getElementById('code2-tip'));
+  </script>
+</body>
+</html>
@@ -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>
+  );
+}
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <div class="aa-code" @paste="onPaste">
+      <div
+        v-for="(c, i) in cells"
+        :key="i"
+        class="aa-code-cell"
+        :class="{ 'is-focus': focusedIndex === i, 'is-filled': !!cells[i], 'is-masked': masked }"
+      >
+        <input
+          ref="inputs"
+          class="aa-code-input"
+          :value="cells[i]"
+          maxlength="1"
+          inputmode="numeric"
+          :aria-label="'验证码第 ' + (i + 1) + ' 位'"
+          @focus="focusedIndex = i"
+          @input="onInput($event, i)"
+          @keydown="onKeydown($event, i)"
+        />
+      </div>
+    </div>
+    <div class="aa-code-tip" :class="{ error: hasError }">{{ tip }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaCodeInput',
+  props: {
+    value: { type: String, default: '' },
+    length: { type: Number, default: 6 },
+    masked: { type: Boolean, default: false },
+    tip: { type: String, default: '' },
+    hasError: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      cells: this.value.split('').slice(0, this.length).concat(Array(Math.max(0, this.length - this.value.length)).fill('')).slice(0, this.length),
+      focusedIndex: -1
+    };
+  },
+  watch: {
+    value(v) {
+      const arr = v.split('').slice(0, this.length);
+      while (arr.length < this.length) arr.push('');
+      this.cells = arr;
+    },
+    length() {
+      const arr = this.cells.slice(0, this.length);
+      while (arr.length < this.length) arr.push('');
+      this.cells = arr;
+    }
+  },
+  methods: {
+    emit() {
+      const code = this.cells.join('');
+      this.$emit('input', code);
+      this.$emit('change', code);
+    },
+    onInput(e, i) {
+      const ch = (e.target.value || '').slice(-1);
+      this.$set(this.cells, i, ch);
+      e.target.value = ch;
+      if (ch && i < this.length - 1) this.focus(i + 1);
+      this.emit();
+    },
+    onKeydown(e, i) {
+      if (e.key === 'Backspace') {
+        e.preventDefault();
+        if (this.cells[i]) {
+          this.$set(this.cells, i, '');
+        } else if (i > 0) {
+          this.$set(this.cells, i - 1, '');
+          this.focus(i - 1);
+        }
+        this.emit();
+      } else if (e.key === 'ArrowLeft' && i > 0) {
+        this.focus(i - 1);
+      } else if (e.key === 'ArrowRight' && i < this.length - 1) {
+        this.focus(i + 1);
+      }
+    },
+    onPaste(e) {
+      e.preventDefault();
+      const text = (e.clipboardData || window.clipboardData).getData('text') || '';
+      const digits = text.replace(/\D/g, '').slice(0, this.length).split('');
+      const arr = this.cells.slice();
+      for (let k = 0; k < this.length; k++) arr[k] = digits[k] || '';
+      this.cells = arr;
+      this.focus(Math.min(digits.length, this.length - 1));
+      this.emit();
+    },
+    focus(i) {
+      this.$nextTick(() => {
+        const el = this.$refs.inputs && this.$refs.inputs[i];
+        if (el) el.focus();
+      });
+    }
+  }
+};
+</script>
+
+<style src="./CodeInput.css"></style>
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="aa-code" @paste="onPaste">
+      <div
+        v-for="(c, i) in cells"
+        :key="i"
+        class="aa-code-cell"
+        :class="{ 'is-focus': focusedIndex === i, 'is-filled': !!cells[i], 'is-masked': masked }"
+      >
+        <input
+          ref="inputs"
+          class="aa-code-input"
+          :value="cells[i]"
+          maxlength="1"
+          inputmode="numeric"
+          :aria-label="'验证码第 ' + (i + 1) + ' 位'"
+          @focus="focusedIndex = i"
+          @input="onInput($event, i)"
+          @keydown="onKeydown($event, i)"
+        />
+      </div>
+    </div>
+    <div class="aa-code-tip" :class="{ error: hasError }">{{ tip }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  length: { type: Number, default: 6 },
+  masked: { type: Boolean, default: false },
+  tip: { type: String, default: '' },
+  hasError: { type: Boolean, default: false }
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const inputs = ref([]);
+const focusedIndex = ref(-1);
+
+function buildCells(v) {
+  const arr = (v || '').split('').slice(0, props.length);
+  while (arr.length < props.length) arr.push('');
+  return arr;
+}
+const cells = ref(buildCells(props.modelValue));
+
+watch(
+  () => props.modelValue,
+  (v) => { cells.value = buildCells(v); }
+);
+watch(
+  () => props.length,
+  () => { cells.value = buildCells(cells.value.join('')); }
+);
+
+function emit() {
+  const code = cells.value.join('');
+  emit('update:modelValue', code);
+  emit('change', code);
+}
+function focus(i) {
+  inputs.value[i] && inputs.value[i].focus();
+}
+function onInput(e, i) {
+  const ch = (e.target.value || '').slice(-1);
+  cells.value[i] = ch;
+  e.target.value = ch;
+  if (ch && i < props.length - 1) focus(i + 1);
+  emit();
+}
+function onKeydown(e, i) {
+  if (e.key === 'Backspace') {
+    e.preventDefault();
+    if (cells.value[i]) {
+      cells.value[i] = '';
+    } else if (i > 0) {
+      cells.value[i - 1] = '';
+      focus(i - 1);
+    }
+    emit();
+  } else if (e.key === 'ArrowLeft' && i > 0) {
+    focus(i - 1);
+  } else if (e.key === 'ArrowRight' && i < props.length - 1) {
+    focus(i + 1);
+  }
+}
+function onPaste(e) {
+  e.preventDefault();
+  const text = (e.clipboardData || window.clipboardData).getData('text') || '';
+  const digits = text.replace(/\D/g, '').slice(0, props.length).split('');
+  const arr = cells.value.slice();
+  for (let k = 0; k < props.length; k++) arr[k] = digits[k] || '';
+  cells.value = arr;
+  focus(Math.min(digits.length, props.length - 1));
+  emit();
+}
+</script>
+
+<style src="./CodeInput.css"></style>