同步6/16

2026-06-01 18:12:58 +08:00
parent 38274ab612
commit 50e7b14fd6
183 changed files with 8956 additions and 4803 deletions
--- a/src/components/LicensePlateInput/index.vue
+++ b/src/components/LicensePlateInput/index.vue
@@ -22,17 +22,24 @@
          @paste="onPaste"
          @focus="activeIndex = index"
          @blur="onBlur"
+          @compositionend="onCompositionEnd(index)"
        />
      </div>
    </div>
-    <!-- 错误提示（和 Element Plus 原生完全一致） -->
+    <!-- 错误提示 -->
+    <transition name="el-fade-in-linear">
+      <div v-if="hasError && errorMessage" class="plate-error">
+        {{ errorMessage }}
+      </div>
+    </transition>
  </div>
 </template>

 <script setup lang="ts">
-import { LicensePlateValidator } from '@/utils/Reg';
 import { ref, watch, nextTick } from 'vue';
+import { LicensePlateValidator } from '@/utils/Reg';

+// 省份简称
 const PROVINCES = [
  '京',
  '津',
@@ -66,7 +73,12 @@ const PROVINCES = [
  '宁',
  '琼'
 ];
-const VALID_CHARS = /^[A-HJ-NP-Z0-9]$/i;
+
+// 合法基础字符：字母 (排除I,O) 和 数字
+const VALID_CHAR_REGEX = /^[A-HJ-NP-Z0-9]$/i;
+
+// 车牌特殊结尾字符
+const SPECIAL_CHARS = ['警', '学', '挂', '临', '超', '港', '澳'];

 const props = defineProps<{
  modelValue: string;
@@ -85,22 +97,23 @@ const chars = ref<string[]>(Array(8).fill(''));
 const hasError = ref(false);
 const errorMessage = ref('');

-// 外部值同步
+// 外部值同步到内部
 watch(
  () => props.modelValue,
  (val) => {
-    const currentValue = chars.value.join('').trim();
-    if (val !== currentValue) {
+    const cleanVal = (val || '').toUpperCase().trim();
+    const currentJoined = chars.value.join('').trim();
+
+    if (cleanVal !== currentJoined) {
      const newChars = Array(8).fill('');
-      if (val) {
-        val
-          .toUpperCase()
-          .split('')
-          .forEach((c, i) => {
-            if (i < 8) newChars[i] = c;
-          });
+      if (cleanVal) {
+        const arr = cleanVal.split('');
+        for (let i = 0; i < Math.min(arr.length, 8); i++) {
+          newChars[i] = arr[i];
+        }
      }
      chars.value = newChars;
+      if (cleanVal) clearError();
    }
  },
  { immediate: true }
@@ -109,43 +122,76 @@ watch(
 // 内部值同步到外部
 watch(
  chars,
-  () => {
-    const value = chars.value.join('').trim();
+  (newChars) => {
+    const value = newChars.join('').trim();
    emit('update:modelValue', value);
    emit('change', value);
-    // 输入时清除错误
-    clearError();
+
+    if (hasError.value) {
+      clearError();
+    }
  },
  { deep: true }
 );

 function onInput(index: number) {
-  const char = chars.value[index].toUpperCase();
+  let char = chars.value[index];

-  if (index === 0 && !PROVINCES.includes(char)) {
-    chars.value[index] = '';
-    return;
+  if (!char) return;
+
+  // 统一转大写 (汉字不受影响)
+  char = char.toUpperCase();
+
+  let isValid = false;
+
+  // 1. 第一位：必须是省份
+  if (index === 0) {
+    if (PROVINCES.includes(char)) {
+      isValid = true;
+    }
+  }
+  // 2. 特殊字符处理 (警/学/挂/临/超/港/澳)
+  else if (SPECIAL_CHARS.includes(char)) {
+    // 特殊字符通常出现在最后一位，或者倒数第二位(如临时车牌的"临"可能在最后，也可能在倒数第二？不，通常是最后)
+    // 为了用户体验，允许在任何非第一位的位置输入，但最终校验会判断位置是否正确
+    isValid = true;
+  }
+  // 3. 常规字符：字母或数字
+  else {
+    if (VALID_CHAR_REGEX.test(char)) {
+      isValid = true;
+    }
  }

-  if (index > 0 && !VALID_CHARS.test(char)) {
+  if (!isValid) {
    chars.value[index] = '';
    return;
-  }
+  } else {
+    chars.value[index] = char;

-  chars.value[index] = char;
-
-  if (char && index < 7) {
-    nextTick(() => inputRefs.value[index + 1]?.focus());
+    // 如果输入的是特殊字符，通常意味着车牌结束，不再自动跳转
+    // 如果输入的是常规字符，且不是最后一格，则跳转
+    if (!SPECIAL_CHARS.includes(char) && char && index < 7) {
+      nextTick(() => {
+        inputRefs.value[index + 1]?.focus();
+      });
+    }
  }
 }

+function onCompositionEnd(index: number) {
+  onInput(index);
+}
+
 function onKeydown(e: KeyboardEvent, index: number) {
-  if (e.key === 'Backspace' && !chars.value[index] && index > 0) {
-    e.preventDefault();
-    nextTick(() => {
-      inputRefs.value[index - 1]?.focus();
-      inputRefs.value[index - 1]?.select();
-    });
+  if (e.key === 'Backspace') {
+    if (!chars.value[index] && index > 0) {
+      e.preventDefault();
+      nextTick(() => {
+        inputRefs.value[index - 1]?.focus();
+      });
+    }
+    return;
  }

  if (e.key === 'ArrowLeft' && index > 0) {
@@ -160,20 +206,37 @@ function onKeydown(e: KeyboardEvent, index: number) {

 function onPaste(e: ClipboardEvent) {
  e.preventDefault();
-  const text = e.clipboardData?.getData('text')?.trim().toUpperCase() || '';
+  const text = e.clipboardData?.getData('text')?.toUpperCase().trim() || '';
  if (!text) return;

-  const newChars = Array(8).fill('');
-  text.split('').forEach((c, i) => {
-    if (i >= 8) return;
-    if (i === 0 && PROVINCES.includes(c)) newChars[i] = c;
-    if (i > 0 && VALID_CHARS.test(c)) newChars[i] = c;
+  const filledChars = [...chars.value];
+  let insertPos = activeIndex.value >= 0 ? activeIndex.value : 0;
+
+  for (let i = 0; i < text.length; i++) {
+    if (insertPos >= 8) break;
+    const char = text[i];
+
+    let canInsert = false;
+    if (insertPos === 0) {
+      if (PROVINCES.includes(char)) canInsert = true;
+    } else if (SPECIAL_CHARS.includes(char)) {
+      canInsert = true;
+    } else {
+      if (VALID_CHAR_REGEX.test(char)) canInsert = true;
+    }
+
+    if (canInsert) {
+      filledChars[insertPos] = char;
+      insertPos++;
+    }
+  }
+
+  chars.value = filledChars;
+
+  nextTick(() => {
+    const focusIdx = Math.min(insertPos, 7);
+    inputRefs.value[focusIdx]?.focus();
  });
-
-  chars.value = newChars;
-
-  const lastIndex = Math.min(text.length - 1, 6);
-  nextTick(() => inputRefs.value[lastIndex + 1]?.focus());
 }

 function onBlur() {
@@ -181,49 +244,50 @@ function onBlur() {
    const hasFocus = inputRefs.value.some((input) => document.activeElement === input);
    if (!hasFocus) {
      activeIndex.value = -1;
+      validate();
    }
-  }, 10);
+  }, 200);
 }

-// ✅ 手动验证方法（核心）
 function validate(): { valid: boolean; message?: string } {
  const value = chars.value.join('').trim();

-  // 必填验证
  if (props.required && !value) {
-    hasError.value = true;
-    errorMessage.value = '请输入车牌号';
-    return { valid: false, message: errorMessage.value };
+    setError('请输入车牌号');
+    return { valid: false, message: '请输入车牌号' };
  }

-  // 格式验证
-  if (value && !isValidPlate(value)) {
-    hasError.value = true;
-    errorMessage.value = '请输入正确的车牌号格式';
-    return { valid: false, message: errorMessage.value };
+  if (!value) {
+    clearError();
+    return { valid: true };
+  }
+
+  if (!LicensePlateValidator.isValidPlate(value)) {
+    setError('车牌号格式不正确');
+    return { valid: false, message: '车牌号格式不正确' };
  }

-  // 验证通过
  clearError();
  return { valid: true };
 }

-// 车牌格式验证（内置，不依赖外部工具）
-function isValidPlate(plate: string): boolean {
-  return LicensePlateValidator.isValidPlate(plate);
+function setError(msg: string) {
+  hasError.value = true;
+  errorMessage.value = msg;
 }

-// 清除错误
 function clearError() {
  hasError.value = false;
  errorMessage.value = '';
 }

-// 暴露方法
 defineExpose({
  focus: () => nextTick(() => inputRefs.value[0]?.focus()),
  clear: () => {
    chars.value = Array(8).fill('');
+    clearError();
+    emit('update:modelValue', '');
+    emit('change', '');
  },
  validate,
  clearError
@@ -235,6 +299,7 @@ defineExpose({
  display: flex;
  flex-direction: column;
  gap: 4px;
+  width: fit-content;
 }

 .plate_line {
@@ -242,15 +307,17 @@ defineExpose({
  align-items: center;
  gap: 6px;
 }
+
 .plate-item {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
+  width: 32px;
+  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
+  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
+  background-color: #fff;
 }

 .plate-item.active {
@@ -265,6 +332,7 @@ defineExpose({
 .plate-item.disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
+  color: #a8abb2;
 }

 .plate-item input {
@@ -272,10 +340,13 @@ defineExpose({
  height: 100%;
  border: none;
  text-align: center;
-  font-size: 15px;
+  font-size: 16px;
  font-weight: 500;
  background: transparent;
  outline: none;
+  padding: 0;
+  margin: 0;
+  color: inherit;
 }

 .plate-error {
@@ -283,5 +354,6 @@ defineExpose({
  font-size: 12px;
  line-height: 1.5;
  margin-top: 2px;
+  min-height: 18px;
 }
 </style>