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,55 @@
+<!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 · PhoneInput</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./PhoneInput.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">PhoneInput 手机号输入</h2>
+    <p class="aa-desc">国际区号选择 + 自动格式化 + 校验，适用于注册、登录。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">基础用法</div>
+      <div class="aa-phone" id="phone">
+        <select class="aa-phone-code" id="code">
+          <option value="+86">+86</option>
+          <option value="+852">+852</option>
+          <option value="+1">+1</option>
+          <option value="+81">+81</option>
+        </select>
+        <input class="aa-phone-input" role="group" id="num" placeholder="请输入手机号" inputmode="numeric" />
+      </div>
+      <div class="aa-phone-tip" id="tip">支持中国大陆、香港、美、日等区号</div>
+    </div>
+  </div>
+
+  <script>
+    var root = document.getElementById('phone');
+    var code = document.getElementById('code');
+    var num = document.getElementById('num');
+    var tip = document.getElementById('tip');
+
+    function format(v) {
+      return v.replace(/\D/g, '').slice(0, 11);
+    }
+    function validate() {
+      var c = code.value, v = num.value;
+      var ok;
+      if (c === '+86') ok = /^1[3-9]\d{9}$/.test(v);
+      else ok = v.length >= 6 && v.length <= 15;
+      root.classList.remove('is-error');
+      if (!v) { tip.className = 'aa-phone-tip'; tip.textContent = '支持中国大陆、香港、美、日等区号'; }
+      else if (ok) { tip.className = 'aa-phone-tip ok'; tip.textContent = '格式正确：' + c + ' ' + v; }
+      else { tip.className = 'aa-phone-tip error'; tip.textContent = '手机号格式不正确'; root.classList.add('is-error'); }
+    }
+    num.addEventListener('input', function () { num.value = format(num.value); validate(); });
+    code.addEventListener('change', validate);
+    num.addEventListener('focus', function () { root.classList.add('is-focus'); });
+    num.addEventListener('blur', function () { root.classList.remove('is-focus'); });
+  </script>
+</body>
+</html>
@@ -0,0 +1,53 @@
+import React, { useState, useMemo } from 'react';
+import './PhoneInput.css';
+
+const CODES = [
+  { value: '+86', label: '中国大陆' },
+  { value: '+852', label: '香港' },
+  { value: '+1', label: '美国' },
+  { value: '+81', label: '日本' }
+];
+
+export default function PhoneInput({ modelValue = '', placeholder = '请输入手机号', onChange }) {
+  const [code, setCode] = useState('+86');
+  const [number, setNumber] = useState(modelValue);
+  const [focused, setFocused] = useState(false);
+
+  const valid = useMemo(
+    () => (code === '+86' ? /^1[3-9]\d{9}$/.test(number) : number.length >= 6 && number.length <= 15),
+    [code, number]
+  );
+  const tipClass = !number ? '' : valid ? 'ok' : 'error';
+  const tipText = !number ? '支持中国大陆、香港、美、日等区号' : valid ? '格式正确：' + code + ' ' + number : '手机号格式不正确';
+
+  const onInput = (e) => {
+    const v = e.target.value.replace(/\D/g, '').slice(0, 11);
+    e.target.value = v;
+    setNumber(v);
+    if (onChange) onChange(code + ' ' + v);
+  };
+
+  return (
+    <div>
+      <div className={'aa-phone' + (focused ? ' is-focus' : '') + (!valid && number ? ' is-error' : '')}>
+        <select className="aa-phone-code" value={code} onChange={(e) => setCode(e.target.value)}>
+          {CODES.map((c) => (
+            <option key={c.value} value={c.value}>
+              {c.value} {c.label}
+            </option>
+          ))}
+        </select>
+        <input
+          className="aa-phone-input"
+          value={number}
+          inputMode="numeric"
+          placeholder={placeholder}
+          onInput={onInput}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+        />
+      </div>
+      <div className={'aa-phone-tip ' + tipClass}>{tipText}</div>
+    </div>
+  );
+}
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="aa-phone" :class="{ 'is-focus': focused, 'is-error': !valid && !!number }">
+      <select class="aa-phone-code" v-model="code">
+        <option v-for="c in codes" :key="c.value" :value="c.value">{{ c.value }} {{ c.label }}</option>
+      </select>
+      <input
+        class="aa-phone-input"
+        :value="number"
+        inputmode="numeric"
+        :placeholder="placeholder"
+        @input="onInput"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+    </div>
+    <div class="aa-phone-tip" :class="tipClass">{{ tipText }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaPhoneInput',
+  props: {
+    value: { type: String, default: '' },
+    placeholder: { type: String, default: '请输入手机号' },
+    codes: {
+      type: Array,
+      default: () => [
+        { value: '+86', label: '中国大陆' },
+        { value: '+852', label: '香港' },
+        { value: '+1', label: '美国' },
+        { value: '+81', label: '日本' }
+      ]
+    }
+  },
+  data() {
+    return { code: '+86', number: this.value, focused: false };
+  },
+  computed: {
+    valid() {
+      if (this.code === '+86') return /^1[3-9]\d{9}$/.test(this.number);
+      return this.number.length >= 6 && this.number.length <= 15;
+    },
+    tipClass() {
+      if (!this.number) return '';
+      return this.valid ? 'ok' : 'error';
+    },
+    tipText() {
+      if (!this.number) return '支持中国大陆、香港、美、日等区号';
+      return this.valid ? '格式正确：' + this.code + ' ' + this.number : '手机号格式不正确';
+    }
+  },
+  methods: {
+    onInput(e) {
+      this.number = e.target.value.replace(/\D/g, '').slice(0, 11);
+      e.target.value = this.number;
+      this.$emit('input', this.code + ' ' + this.number);
+    }
+  }
+};
+</script>
+
+<style src="./PhoneInput.css"></style>
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div class="aa-phone" :class="{ 'is-focus': focused, 'is-error': !valid && !!number }">
+      <select class="aa-phone-code" v-model="code">
+        <option v-for="c in codes" :key="c.value" :value="c.value">{{ c.value }} {{ c.label }}</option>
+      </select>
+      <input
+        class="aa-phone-input"
+        :value="number"
+        inputmode="numeric"
+        :placeholder="placeholder"
+        @input="onInput"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+    </div>
+    <div class="aa-phone-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: '请输入手机号' },
+  codes: {
+    type: Array,
+    default: () => [
+      { value: '+86', label: '中国大陆' },
+      { value: '+852', label: '香港' },
+      { value: '+1', label: '美国' },
+      { value: '+81', label: '日本' }
+    ]
+  }
+});
+const emit = defineEmits(['update:modelValue']);
+const code = ref('+86');
+const number = ref(props.modelValue);
+const focused = ref(false);
+
+const valid = computed(() =>
+  code.value === '+86' ? /^1[3-9]\d{9}$/.test(number.value) : number.value.length >= 6 && number.value.length <= 15
+);
+const tipClass = computed(() => (!number.value ? '' : valid.value ? 'ok' : 'error'));
+const tipText = computed(() =>
+  !number.value ? '支持中国大陆、香港、美、日等区号' : valid.value ? '格式正确：' + code.value + ' ' + number.value : '手机号格式不正确'
+);
+
+function onInput(e) {
+  number.value = e.target.value.replace(/\D/g, '').slice(0, 11);
+  e.target.value = number.value;
+  emit('update:modelValue', code.value + ' ' + number.value);
+}
+</script>
+
+<style src="./PhoneInput.css"></style>