root/aurora-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json
Deploy to GitHub Pages / deploy (push) Failing after 16s
Details
Regression / regression (push) Failing after 15m2s
Details

Browse Source
This commit is contained in:
aurora-admin
2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/sources/bankcardinput/html.txt
+70
View File
@@ -0,0 +1,70 @@
<!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 · BankCardInput</title>
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
<link rel="stylesheet" href="./BankCardInput.css" />
</head>
<body>
<div class="aa-page">
<h2 class="aa-h2">BankCardInput 银行卡输入</h2>
<p class="aa-desc">自动每 4 位空格、识别卡组织、Luhn 校验。</p>
<div class="aa-demo">
<div class="aa-demo__title">基础用法</div>
<div class="aa-card" id="card">
<div class="aa-card-field" id="field">
<input class="aa-card-input" id="input" placeholder="请输入银行卡号" inputmode="numeric" maxlength="23" />
<span class="aa-card-type unknown" id="type">识别中</span>
</div>
<div class="aa-card-tip" id="tip">支持 Visa / MasterCard / 银联等</div>
</div>
</div>
</div>
<script>
function detectType(v) {
if (/^4/.test(v)) return 'Visa';
if (/^5[1-5]/.test(v)) return 'MasterCard';
if (/^62/.test(v)) return '银联';
if (/^3[47]/.test(v)) return 'AmEx';
if (/^35/.test(v)) return 'JCB';
return '';
}
function luhn(v) {
var sum = 0, alt = false;
for (var i = v.length - 1; i >= 0; i--) {
var n = parseInt(v[i], 10);
if (alt) { n *= 2; if (n > 9) n -= 9; }
sum += n; alt = !alt;
}
return sum % 10 === 0;
}
var field = document.getElementById('field');
var input = document.getElementById('input');
var typeEl = document.getElementById('type');
var tip = document.getElementById('tip');
input.addEventListener('input', function () {
var digits = input.value.replace(/\D/g, '').slice(0, 19);
var grouped = digits.replace(/(.{4})/g, '$1 ').trim();
input.value = grouped;
var t = detectType(digits);
typeEl.textContent = t || '未知';
typeEl.className = 'aa-card-type' + (t ? '' : ' unknown');
var len = digits.length;
field.classList.remove('is-valid', 'is-invalid');
tip.className = 'aa-card-tip';
if (!len) { tip.textContent = '支持 Visa / MasterCard / 银联等'; }
else if (len >= 13 && luhn(digits)) { field.classList.add('is-valid'); tip.className = 'aa-card-tip valid'; tip.textContent = '卡号校验通过'; }
else if (len >= 13) { field.classList.add('is-invalid'); tip.className = 'aa-card-tip invalid'; tip.textContent = '卡号未通过 Luhn 校验'; }
else { tip.textContent = '继续输入卡号…'; }
});
input.addEventListener('focus', function () { field.classList.add('is-focus'); });
input.addEventListener('blur', function () { field.classList.remove('is-focus'); });
</script>
</body>
</html>
site/sources/bankcardinput/jsx.txt
+68
View File
@@ -0,0 +1,68 @@
import React, { useState, useMemo } from 'react';
import './BankCardInput.css';
function detectType(v) {
if (/^4/.test(v)) return 'Visa';
if (/^5[1-5]/.test(v)) return 'MasterCard';
if (/^62/.test(v)) return '银联';
if (/^3[47]/.test(v)) return 'AmEx';
if (/^35/.test(v)) return 'JCB';
return '';
}
function luhn(v) {
let sum = 0, alt = false;
for (let i = v.length - 1; i >= 0; i--) {
let n = parseInt(v[i], 10);
if (alt) { n *= 2; if (n > 9) n -= 9; }
sum += n; alt = !alt;
}
return sum % 10 === 0;
}
export default function BankCardInput({ modelValue = '', placeholder = '请输入银行卡号', onChange }) {
const [digits, setDigits] = useState(modelValue.replace(/\D/g, ''));
const [focused, setFocused] = useState(false);
const display = digits.replace(/(.{4})/g, '$1 ').trim();
const cardType = detectType(digits);
const valid = digits.length >= 13 && luhn(digits);
const invalid = digits.length >= 13 && !luhn(digits);
const tipClass = valid ? 'valid' : invalid ? 'invalid' : '';
const tipText = !digits
? '支持 Visa / MasterCard / 银联等'
: valid
? '卡号校验通过'
: invalid
? '卡号未通过 Luhn 校验'
: '继续输入卡号…';
const onInput = (e) => {
const v = e.target.value.replace(/\D/g, '').slice(0, 19);
e.target.value = v.replace(/(.{4})/g, '$1 ').trim();
setDigits(v);
if (onChange) onChange(v);
};
return (
<div className="aa-card">
<div
className={
'aa-card-field' + (focused ? ' is-focus' : '') + (valid ? ' is-valid' : '') + (invalid ? ' is-invalid' : '')
}
>
<input
className="aa-card-input"
value={display}
inputMode="numeric"
maxLength={23}
placeholder={placeholder}
onInput={onInput}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
/>
<span className={'aa-card-type' + (cardType ? '' : ' unknown')}>{cardType || '未知'}</span>
</div>
<div className={'aa-card-tip ' + tipClass}>{tipText}</div>
</div>
);
}
site/sources/bankcardinput/vue2.txt
+78
View File
@@ -0,0 +1,78 @@
<template>
<div class="aa-card">
<div class="aa-card-field" :class="{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }">
<input
class="aa-card-input"
:value="display"
inputmode="numeric"
maxlength="23"
:placeholder="placeholder"
@input="onInput"
@focus="focused = true"
@blur="focused = false"
/>
<span class="aa-card-type" :class="{ unknown: !cardType }">{{ cardType || '未知' }}</span>
</div>
<div class="aa-card-tip" :class="tipClass">{{ tipText }}</div>
</div>
</template>
<script>
export default {
name: 'AaBankCardInput',
props: {
value: { type: String, default: '' },
placeholder: { type: String, default: '请输入银行卡号' }
},
data() {
return { digits: this.value.replace(/\D/g, ''), focused: false };
},
computed: {
display() {
return this.digits.replace(/(.{4})/g, '$1 ').trim();
},
cardType() {
var v = this.digits;
if (/^4/.test(v)) return 'Visa';
if (/^5[1-5]/.test(v)) return 'MasterCard';
if (/^62/.test(v)) return '银联';
if (/^3[47]/.test(v)) return 'AmEx';
if (/^35/.test(v)) return 'JCB';
return '';
},
luhn() {
var v = this.digits, sum = 0, alt = false;
for (var i = v.length - 1; i >= 0; i--) {
var n = parseInt(v[i], 10);
if (alt) { n *= 2; if (n > 9) n -= 9; }
sum += n; alt = !alt;
}
return sum % 10 === 0;
},
valid() {
return this.digits.length >= 13 && this.luhn;
},
invalid() {
return this.digits.length >= 13 && !this.luhn;
},
tipClass() {
return this.valid ? 'valid' : this.invalid ? 'invalid' : '';
},
tipText() {
if (this.digits.length === 0) return '支持 Visa / MasterCard / 银联等';
if (this.valid) return '卡号校验通过';
if (this.invalid) return '卡号未通过 Luhn 校验';
return '继续输入卡号…';
}
},
methods: {
onInput(e) {
this.digits = e.target.value.replace(/\D/g, '').slice(0, 19);
e.target.value = this.display;
this.$emit('input', this.digits);
}
}
};
</script>
<style src="./BankCardInput.css"></style>
site/sources/bankcardinput/vue3.txt
+68
View File
@@ -0,0 +1,68 @@
<template>
<div class="aa-card">
<div class="aa-card-field" :class="{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }">
<input
class="aa-card-input"
:value="display"
inputmode="numeric"
maxlength="23"
:placeholder="placeholder"
@input="onInput"
@focus="focused = true"
@blur="focused = false"
/>
<span class="aa-card-type" :class="{ unknown: !cardType }">{{ cardType || '未知' }}</span>
</div>
<div class="aa-card-tip" :class="tipClass">{{ tipText }}</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
modelValue: { type: String, default: '' },
placeholder: { type: String, default: '请输入银行卡号' }
});
const emit = defineEmits(['update:modelValue']);
const digits = ref(props.modelValue.replace(/\D/g, ''));
const focused = ref(false);
const display = computed(() => digits.value.replace(/(.{4})/g, '$1 ').trim());
const cardType = computed(() => {
const v = digits.value;
if (/^4/.test(v)) return 'Visa';
if (/^5[1-5]/.test(v)) return 'MasterCard';
if (/^62/.test(v)) return '银联';
if (/^3[47]/.test(v)) return 'AmEx';
if (/^35/.test(v)) return 'JCB';
return '';
});
const luhn = computed(() => {
const v = digits.value;
let sum = 0, alt = false;
for (let i = v.length - 1; i >= 0; i--) {
let n = parseInt(v[i], 10);
if (alt) { n *= 2; if (n > 9) n -= 9; }
sum += n; alt = !alt;
}
return sum % 10 === 0;
});
const valid = computed(() => digits.value.length >= 13 && luhn.value);
const invalid = computed(() => digits.value.length >= 13 && !luhn.value);
const tipClass = computed(() => (valid.value ? 'valid' : invalid.value ? 'invalid' : ''));
const tipText = computed(() => {
if (digits.value.length === 0) return '支持 Visa / MasterCard / 银联等';
if (valid.value) return '卡号校验通过';
if (invalid.value) return '卡号未通过 Luhn 校验';
return '继续输入卡号…';
});
function onInput(e) {
digits.value = e.target.value.replace(/\D/g, '').slice(0, 19);
e.target.value = display.value;
emit('update:modelValue', digits.value);
}
</script>
<style src="./BankCardInput.css"></style>