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,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>