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,71 @@
+<!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 · IDCardInput</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./IDCardInput.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">IDCardInput 身份证输入</h2>
+    <p class="aa-desc">18 位校验（含校验位）、自动提取出生日期与性别。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">基础用法</div>
+      <div class="aa-idcard" id="idcard">
+        <div class="aa-idcard-field" id="field">
+          <input class="aa-idcard-input" role="group" id="input" placeholder="请输入 18 位身份证号" maxlength="18" />
+        </div>
+        <div class="aa-idcard-info" id="info" style="display:none"></div>
+        <div class="aa-idcard-tip" id="tip">示例：11010119900307657X</div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    var WEIGHTS = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
+    var CHECK = '10X98765432';
+    function validate(v) {
+      if (!/^\d{17}[\dX]$/.test(v)) return { ok: false };
+      var sum = 0;
+      for (var i = 0; i < 17; i++) sum += parseInt(v[i], 10) * WEIGHTS[i];
+      if (CHECK[sum % 11] !== v[17].toUpperCase()) return { ok: false };
+      var birth = v.slice(6, 14);
+      var birthStr = birth.slice(0,4) + '-' + birth.slice(4,6) + '-' + birth.slice(6,8);
+      var gender = parseInt(v[16], 10) % 2 === 1 ? '男' : '女';
+      return { ok: true, birth: birthStr, gender: gender };
+    }
+
+    var field = document.getElementById('field');
+    var input = document.getElementById('input');
+    var info = document.getElementById('info');
+    var tip = document.getElementById('tip');
+
+    input.addEventListener('input', function () {
+      var v = input.value.replace(/[^0-9Xx]/g, '').toUpperCase().slice(0, 18);
+      input.value = v;
+      field.classList.remove('is-valid', 'is-invalid');
+      tip.className = 'aa-idcard-tip';
+      if (!v) { info.style.display = 'none'; tip.textContent = '示例：11010119900307657X'; return; }
+      var r = validate(v);
+      if (v.length < 18) { tip.textContent = '已输入 ' + v.length + ' 位，继续…'; return; }
+      if (r.ok) {
+        field.classList.add('is-valid');
+        tip.className = 'aa-idcard-tip valid';
+        tip.textContent = '校验通过';
+        info.style.display = 'flex';
+        info.innerHTML = '<span>出生日期：<b>' + r.birth + '</b></span><span>性别：<b>' + r.gender + '</b></span>';
+      } else {
+        field.classList.add('is-invalid');
+        tip.className = 'aa-idcard-tip invalid';
+        tip.textContent = '身份证号校验失败，请检查';
+        info.style.display = 'none';
+      }
+    });
+    input.addEventListener('focus', function () { field.classList.add('is-focus'); });
+    input.addEventListener('blur', function () { field.classList.remove('is-focus'); });
+  </script>
+</body>
+</html>
@@ -0,0 +1,59 @@
+import React, { useState, useMemo } from 'react';
+import './IDCardInput.css';
+
+const WEIGHTS = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+const CHECK = '10X98765432';
+function validate(v) {
+  if (!/^\d{17}[\dX]$/.test(v)) return null;
+  let sum = 0;
+  for (let i = 0; i < 17; i++) sum += parseInt(v[i], 10) * WEIGHTS[i];
+  if (CHECK[sum % 11] !== v[17]) return null;
+  const birth = v.slice(6, 14);
+  return { birth: birth.slice(0, 4) + '-' + birth.slice(4, 6) + '-' + birth.slice(6, 8), gender: parseInt(v[16], 10) % 2 === 1 ? '男' : '女' };
+}
+
+export default function IDCardInput({ modelValue = '', placeholder = '请输入 18 位身份证号', onChange }) {
+  const [focused, setFocused] = useState(false);
+  const result = useMemo(() => validate(modelValue.toUpperCase()) || {}, [modelValue]);
+  const valid = !!result.birth;
+  const invalid = modelValue.length === 18 && !result.birth;
+  const tipClass = !modelValue ? '' : valid ? 'valid' : invalid ? 'invalid' : '';
+  const tipText = !modelValue
+    ? '示例：11010119900307657X'
+    : modelValue.length < 18
+    ? '已输入 ' + modelValue.length + ' 位，继续…'
+    : valid
+    ? '校验通过'
+    : '身份证号校验失败，请检查';
+
+  const onInput = (e) => {
+    const v = e.target.value.replace(/[^0-9Xx]/g, '').toUpperCase().slice(0, 18);
+    e.target.value = v;
+    if (onChange) onChange(v);
+  };
+
+  return (
+    <div className="aa-idcard">
+      <div
+        className={'aa-idcard-field' + (focused ? ' is-focus' : '') + (valid ? ' is-valid' : '') + (invalid ? ' is-invalid' : '')}
+      >
+        <input
+          className="aa-idcard-input"
+          value={modelValue}
+          maxLength={18}
+          placeholder={placeholder}
+          onInput={onInput}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+        />
+      </div>
+      {result.birth && (
+        <div className="aa-idcard-info">
+          <span>出生日期：<b>{result.birth}</b></span>
+          <span>性别：<b>{result.gender}</b></span>
+        </div>
+      )}
+      <div className={'aa-idcard-tip ' + tipClass}>{tipText}</div>
+    </div>
+  );
+}
@@ -0,0 +1,73 @@
+<template>
+  <div class="aa-idcard">
+    <div class="aa-idcard-field" :class="{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }">
+      <input
+        class="aa-idcard-input"
+        :value="value"
+        maxlength="18"
+        :placeholder="placeholder"
+        @input="onInput"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+    </div>
+    <div v-if="result.birth" class="aa-idcard-info">
+      <span>出生日期：<b>{{ result.birth }}</b></span>
+      <span>性别：<b>{{ result.gender }}</b></span>
+    </div>
+    <div class="aa-idcard-tip" :class="tipClass">{{ tipText }}</div>
+  </div>
+</template>
+
+<script>
+var WEIGHTS = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+var CHECK = '10X98765432';
+function validate(v) {
+  if (!/^\d{17}[\dX]$/.test(v)) return null;
+  var sum = 0;
+  for (var i = 0; i < 17; i++) sum += parseInt(v[i], 10) * WEIGHTS[i];
+  if (CHECK[sum % 11] !== v[17]) return null;
+  var birth = v.slice(6, 14);
+  return { birth: birth.slice(0, 4) + '-' + birth.slice(4, 6) + '-' + birth.slice(6, 8), gender: parseInt(v[16], 10) % 2 === 1 ? '男' : '女' };
+}
+
+export default {
+  name: 'AaIDCardInput',
+  props: {
+    value: { type: String, default: '' },
+    placeholder: { type: String, default: '请输入 18 位身份证号' }
+  },
+  data() {
+    return { focused: false };
+  },
+  computed: {
+    result() {
+      return validate(this.value.toUpperCase()) || {};
+    },
+    valid() {
+      return !!this.result.birth;
+    },
+    invalid() {
+      return this.value.length === 18 && !this.result.birth;
+    },
+    tipClass() {
+      if (!this.value) return '';
+      return this.valid ? 'valid' : this.invalid ? 'invalid' : '';
+    },
+    tipText() {
+      if (!this.value) return '示例：11010119900307657X';
+      if (this.value.length < 18) return '已输入 ' + this.value.length + ' 位，继续…';
+      return this.valid ? '校验通过' : '身份证号校验失败，请检查';
+    }
+  },
+  methods: {
+    onInput(e) {
+      var v = e.target.value.replace(/[^0-9Xx]/g, '').toUpperCase().slice(0, 18);
+      e.target.value = v;
+      this.$emit('input', v);
+    }
+  }
+};
+</script>
+
+<style src="./IDCardInput.css"></style>
@@ -0,0 +1,60 @@
+<template>
+  <div class="aa-idcard">
+    <div class="aa-idcard-field" :class="{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }">
+      <input
+        class="aa-idcard-input"
+        :value="modelValue"
+        maxlength="18"
+        :placeholder="placeholder"
+        @input="onInput"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+    </div>
+    <div v-if="result.birth" class="aa-idcard-info">
+      <span>出生日期：<b>{{ result.birth }}</b></span>
+      <span>性别：<b>{{ result.gender }}</b></span>
+    </div>
+    <div class="aa-idcard-tip" :class="tipClass">{{ tipText }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const WEIGHTS = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+const CHECK = '10X98765432';
+function validate(v) {
+  if (!/^\d{17}[\dX]$/.test(v)) return null;
+  let sum = 0;
+  for (let i = 0; i < 17; i++) sum += parseInt(v[i], 10) * WEIGHTS[i];
+  if (CHECK[sum % 11] !== v[17]) return null;
+  const birth = v.slice(6, 14);
+  return { birth: birth.slice(0, 4) + '-' + birth.slice(4, 6) + '-' + birth.slice(6, 8), gender: parseInt(v[16], 10) % 2 === 1 ? '男' : '女' };
+}
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '请输入 18 位身份证号' }
+});
+const emit = defineEmits(['update:modelValue']);
+const focused = ref(false);
+
+const result = computed(() => validate(props.modelValue.toUpperCase()) || {});
+const valid = computed(() => !!result.value.birth);
+const invalid = computed(() => props.modelValue.length === 18 && !result.value.birth);
+const tipClass = computed(() => (!props.modelValue ? '' : valid.value ? 'valid' : invalid.value ? 'invalid' : ''));
+const tipText = computed(() => {
+  if (!props.modelValue) return '示例：11010119900307657X';
+  if (props.modelValue.length < 18) return '已输入 ' + props.modelValue.length + ' 位，继续…';
+  return valid.value ? '校验通过' : '身份证号校验失败，请检查';
+});
+
+function onInput(e) {
+  const v = e.target.value.replace(/[^0-9Xx]/g, '').toUpperCase().slice(0, 18);
+  e.target.value = v;
+  emit('update:modelValue', v);
+}
+</script>
+
+<style src="./IDCardInput.css"></style>