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