Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

2026-09-10 19:21:56 +08:00
commit 51ce3a28f7
654 changed files with 49082 additions and 0 deletions
@@ -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>
+  );
+}