@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismLicensePlateInput/PrismLicensePlateInput.vue

@@ -1,1100 +1,1100 @@
-<template>
-  <view class="prism-license-plate-input" :class="{ 'dark-mode': appStore.isDarkMode }">
-    <!-- 车牌号输入框 -->
-    <view class="plate-boxes">
-      <!-- 第1位 -->
-      <view
-        class="plate-box province"
-        :class="{
-          'active': activeIndex === 0,
-          'filled': plateArray[0],
-          'special-white': getSpecialCharType(plateArray[0]) === 'white',
-          'special-black': getSpecialCharType(plateArray[0]) === 'black',
-          'special-yellow': getSpecialCharType(plateArray[0]) === 'yellow'
-        }"
-        @click="showKeyboardAt(0)"
-      >
-        <text class="plate-text">{{ plateArray[0] || '' }}</text>
-      </view>
-
-      <!-- 第2位 -->
-      <view
-        class="plate-box letter"
-        :class="{
-          'active': activeIndex === 1,
-          'filled': plateArray[1],
-          'special-white': getSpecialCharType(plateArray[1]) === 'white',
-          'special-black': getSpecialCharType(plateArray[1]) === 'black',
-          'special-yellow': getSpecialCharType(plateArray[1]) === 'yellow'
-        }"
-        @click="showKeyboardAt(1)"
-      >
-        <text class="plate-text">{{ plateArray[1] || '' }}</text>
-      </view>
-
-      <!-- 分隔点 -->
-      <view class="plate-dot"></view>
-
-      <!-- 后5位 -->
-      <view
-        v-for="i in 5"
-        :key="i"
-        class="plate-box"
-        :class="{
-          'active': activeIndex === i + 1,
-          'filled': plateArray[i + 1],
-          'special-white': getSpecialCharType(plateArray[i + 1]) === 'white',
-          'special-black': getSpecialCharType(plateArray[i + 1]) === 'black',
-          'special-yellow': getSpecialCharType(plateArray[i + 1]) === 'yellow'
-        }"
-        @click="showKeyboardAt(i + 1)"
-      >
-        <text class="plate-text">{{ plateArray[i + 1] || '' }}</text>
-      </view>
-
-      <!-- 新能源第8位（始终显示，可选） -->
-      <view class="plate-box-wrapper new-energy-wrapper">
-        <text class="new-energy-label" :class="{ 'hidden': getSpecialCharType(plateArray[7]) }">新能源</text>
-        <view
-          class="plate-box"
-          :class="{
-            'new-energy': isNewEnergy && !getSpecialCharType(plateArray[7]),
-            'new-energy-optional': !isNewEnergy,
-            'active': activeIndex === 7,
-            'filled': plateArray[7],
-            'special-white': getSpecialCharType(plateArray[7]) === 'white',
-            'special-black': getSpecialCharType(plateArray[7]) === 'black',
-            'special-yellow': getSpecialCharType(plateArray[7]) === 'yellow'
-          }"
-          @click="handleNewEnergyClick"
-        >
-          <text class="plate-text" v-if="isNewEnergy">{{ plateArray[7] || '' }}</text>
-          <text class="optional-icon fa fa-plus" v-else></text>
-        </view>
-      </view>
-    </view>
-
-    <!-- 新能源切换（隐藏，通过点击第8位框自动启用） -->
-    <!-- <view class="energy-switch" @click="isNewEnergy = !isNewEnergy">
-      <view class="prism-checkbox" :class="{ checked: isNewEnergy }">
-        <text v-if="isNewEnergy" class="check-icon fa fa-check"></text>
-      </view>
-      <text class="energy-text">新能源车牌</text>
-    </view> -->
-
-    <!-- 统一键盘（底部弹出，无遮罩） -->
-    <view class="keyboard-modal" v-if="showKeyboard">
-      <view class="keyboard-content">
-        <view class="keyboard-header">
-          <!-- 左侧：标题 + 切换按钮 -->
-          <view class="header-left">
-            <text class="keyboard-title">{{ keyboardTitle }}</text>
-            <view
-              v-if="activeIndex === 0"
-              class="switch-btn"
-              @click="toggleFirstKeyboard"
-            >
-              <text>{{ firstKeyboardMode === 'province' ? '切换字母' : '切换省份' }}</text>
-            </view>
-          </view>
-          <!-- 右侧：关闭按钮 -->
-          <text class="keyboard-close fa fa-times" @click="closeKeyboard"></text>
-        </view>
-
-        <scroll-view class="keyboard-body" scroll-y>
-          <!-- 省份区域 -->
-          <view class="keyboard-section" v-if="showProvinceSection && !showLetterInFirst">
-            <!-- 字母索引栏（支持滑动选择） -->
-            <view
-              class="keyboard-row letter-index-row"
-              @touchstart="onLetterIndexTouchStart"
-              @touchmove="onLetterIndexTouchMove"
-              @touchend="onLetterIndexTouchEnd"
-            >
-              <view
-                v-for="(group, idx) in letterGroups"
-                :key="idx"
-                class="key-item letter-index"
-                :class="{ 'active': isGroupSelected(group) }"
-                :data-index="idx"
-                @click="selectLetterGroup(group)"
-              >
-                {{ group.join('/') }}
-              </view>
-            </view>
-            <!-- 省份键盘（4行） -->
-            <view class="keyboard-qwerty province-qwerty">
-              <view class="keyboard-row">
-                <view
-                  v-for="p in provinces.slice(0, 8)"
-                  :key="p"
-                  class="key-item"
-                  :class="{ 'highlight': isProvinceHighlight(p) }"
-                  @click="inputChar(p)"
-                >
-                  {{ p }}
-                </view>
-              </view>
-              <view class="keyboard-row">
-                <view
-                  v-for="p in provinces.slice(8, 16)"
-                  :key="p"
-                  class="key-item"
-                  :class="{ 'highlight': isProvinceHighlight(p) }"
-                  @click="inputChar(p)"
-                >
-                  {{ p }}
-                </view>
-              </view>
-              <view class="keyboard-row">
-                <view
-                  v-for="p in provinces.slice(16, 24)"
-                  :key="p"
-                  class="key-item"
-                  :class="{ 'highlight': isProvinceHighlight(p) }"
-                  @click="inputChar(p)"
-                >
-                  {{ p }}
-                </view>
-              </view>
-              <view class="keyboard-row">
-                <view
-                  v-for="p in provinces.slice(24, 31)"
-                  :key="p"
-                  class="key-item"
-                  :class="{ 'highlight': isProvinceHighlight(p) }"
-                  @click="inputChar(p)"
-                >
-                  {{ p }}
-                </view>
-                <!-- 删除按钮 -->
-                <view class="key-item delete" @click="deleteChar">
-                  <text class="delete-text">删除</text>
-                </view>
-              </view>
-            </view>
-          </view>
-
-          <!-- 数字区域（放在字母上面） -->
-          <view class="keyboard-section" v-if="showNumberSection">
-            <view class="keyboard-row number-row">
-              <view
-                v-for="n in numberRow"
-                :key="n"
-                class="key-item"
-                @click="inputChar(n)"
-              >
-                {{ n }}
-              </view>
-            </view>
-          </view>
-
-          <!-- 字母区域 -->
-          <view class="keyboard-section" v-if="showLetterSection || showLetterInFirst">
-            <view class="keyboard-qwerty">
-              <view class="keyboard-row" v-for="(row, idx) in letterRows" :key="idx">
-                <view
-                  v-for="l in row"
-                  :key="l"
-                  class="key-item"
-                  :class="{ disabled: shouldDisableIO && (l === 'I' || l === 'O') }"
-                  @click="inputChar(l)"
-                >
-                  {{ l }}
-                </view>
-                <!-- 删除按钮放在最后一行 -->
-                <view v-if="idx === 2" class="key-item delete" @click="deleteChar">
-                  <text class="delete-text">删除</text>
-                </view>
-              </view>
-            </view>
-          </view>
-
-          <!-- 特殊字符区域 -->
-          <view class="keyboard-section" v-if="showSpecialSection">
-            <view class="keyboard-row special-row">
-              <view
-                v-for="item in specialChars"
-                :key="item.char"
-                class="key-item special"
-                :class="item.type"
-                @click="inputChar(item.char)"
-              >
-                {{ item.char }}
-              </view>
-              <!-- 最后一位显示完成按钮 -->
-              <view v-if="showDoneButton" class="key-item done" @click="closeKeyboard">
-                <text class="done-text">完成</text>
-              </view>
-            </view>
-          </view>
-        </scroll-view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { useAppStore } from '@/store/app';
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ''
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'complete']);
-
-const appStore = useAppStore();
-
-const isNewEnergy = ref(false);
-const showKeyboard = ref(false);
-const activeIndex = ref(-1);
-const firstKeyboardMode = ref('province'); // 'province' or 'letter'
-
-// 省份简称（31个）
-const provinces = [
-  '京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘',
-  '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋',
-  '蒙', '陕', '吉', '闽', '贵', '粤', '川', '青', '藏', '琼', '宁'
-];
-
-// 省份拼音首字母映射（用于字母检索高亮）
-const provincePinyinMap = {
-  '京': 'J', '津': 'J', '沪': 'H', '渝': 'Y', '冀': 'J',
-  '豫': 'Y', '云': 'Y', '辽': 'L', '黑': 'H', '湘': 'X',
-  '皖': 'W', '鲁': 'L', '新': 'X', '苏': 'S', '浙': 'Z',
-  '赣': 'G', '鄂': 'E', '桂': 'G', '甘': 'G', '晋': 'J',
-  '蒙': 'M', '陕': 'S', '吉': 'J', '闽': 'M', '贵': 'G',
-  '粤': 'Y', '川': 'C', '青': 'Q', '藏': 'Z', '琼': 'Q', '宁': 'N'
-};
-
-// 省份字母索引（两个字母一组，方便筛选）
-const letterGroups = [
-  ['C', 'E'],   // 川、鄂
-  ['G', 'H'],   // 赣桂甘贵、沪黑
-  ['J', 'L'],   // 京津冀晋吉、辽鲁
-  ['M', 'N'],   // 蒙闽、宁
-  ['Q', 'S'],   // 青琼、苏陕
-  ['W', 'X'],   // 皖、新湘
-  ['Y', 'Z'],   // 渝豫云粤、浙藏
-];
-
-// 当前选中的字母组
-const selectedLetters = ref([]);
-
-// 选择字母组（单选）
-function selectLetterGroup(group) {
-  // 如果是触摸事件刚选中的同一个组，跳过click处理
-  if (touchSelectedGroup && touchSelectedGroup.every(l => group.includes(l))) {
-    return;
-  }
-
-  // 检查是否已选中这个组
-  const isSelected = group.every(l => selectedLetters.value.includes(l));
-  if (isSelected) {
-    // 取消选中
-    selectedLetters.value = [];
-  } else {
-    // 选中（替换）
-    selectedLetters.value = [...group];
-  }
-}
-
-// 判断字母组是否选中
-function isGroupSelected(group) {
-  return group.every(l => selectedLetters.value.includes(l));
-}
-
-// 清除字母筛选
-function clearLetterFilter() {
-  selectedLetters.value = [];
-}
-
-// 判断省份是否应该高亮
-function isProvinceHighlight(province) {
-  if (selectedLetters.value.length === 0) return false;
-  return selectedLetters.value.includes(provincePinyinMap[province]);
-}
-
-// 字母索引滑动选择相关
-let isTouchingLetterIndex = false;
-let touchSelectedGroup = null; // 记录触摸选中的组，防止click重复处理
-
-function onLetterIndexTouchStart(e) {
-  isTouchingLetterIndex = true;
-  touchSelectedGroup = null;
-  const touch = e.touches[0];
-  updateLetterIndexByTouch(touch);
-}
-
-function onLetterIndexTouchMove(e) {
-  if (!isTouchingLetterIndex) return;
-  const touch = e.touches[0];
-  updateLetterIndexByTouch(touch);
-}
-
-function onLetterIndexTouchEnd() {
-  isTouchingLetterIndex = false;
-  // 延迟清除，让click事件能检测到
-  setTimeout(() => {
-    touchSelectedGroup = null;
-  }, 100);
-}
-
-function updateLetterIndexByTouch(touch) {
-  const x = touch.clientX;
-  const y = touch.clientY;
-
-  // #ifdef H5
-  // H5端使用 document.elementFromPoint
-  const element = document.elementFromPoint(x, y);
-  if (element && element.classList.contains('letter-index')) {
-    const index = element.dataset.index;
-    if (index !== undefined) {
-      const group = letterGroups[parseInt(index)];
-      if (group && !isGroupSelected(group)) {
-        selectedLetters.value = [...group];
-        touchSelectedGroup = group;
-      }
-    }
-  }
-  // #endif
-
-  // #ifdef APP-PLUS || MP-WEIXIN
-  // 小程序/APP端通过计算位置来判断
-  uni.createSelectorQuery()
-    .selectAll('.letter-index')
-    .boundingClientRect((rects) => {
-      if (!rects) return;
-      for (let i = 0; i < rects.length; i++) {
-        const rect = rects[i];
-        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
-          const group = letterGroups[i];
-          if (group && !isGroupSelected(group)) {
-            selectedLetters.value = [...group];
-            touchSelectedGroup = group;
-          }
-          break;
-        }
-      }
-    })
-    .exec();
-  // #endif
-}
-
-// 特殊字符（7个）
-const specialChars = [
-  { char: '警', type: 'white' },
-  { char: '领', type: 'black' },
-  { char: '港', type: 'black' },
-  { char: '澳', type: 'black' },
-  { char: '学', type: 'yellow' },
-  { char: '挂', type: 'yellow' },
-  { char: '使', type: 'black' },
-];
-
-// QWERTY键盘布局
-const letterRows = [
-  ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
-  ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
-  ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
-];
-
-// 数字行
-const numberRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
-
-const plateLength = computed(() => isNewEnergy.value ? 8 : 7);
-
-// 获取特殊字符类型
-function getSpecialCharType(char) {
-  if (!char) return null;
-  const found = specialChars.find(item => item.char === char);
-  return found ? found.type : null;
-}
-
-// 解析车牌号为数组
-const plateArray = computed(() => {
-  const value = props.modelValue;
-  if (!value) return [];
-  return value.split('').slice(0, plateLength.value);
-});
-
-// 判断前两位是否都是字母
-const isFirstTwoLetters = computed(() => {
-  const arr = plateArray.value;
-  if (arr.length < 2) return false;
-  const letterRegex = /^[A-Z]$/;
-  return letterRegex.test(arr[0]) && letterRegex.test(arr[1]);
-});
-
-// 键盘标题
-const keyboardTitle = computed(() => {
-  if (activeIndex.value === 0) {
-    return firstKeyboardMode.value === 'province' ? '选择省份' : '选择字母';
-  }
-  if (activeIndex.value === 1) return '选择字母';
-  if (activeIndex.value === 2 && isFirstTwoLetters.value) return '选择省份';
-  return '输入字符';
-});
-
-// 第一位是否显示字母（通过切换按钮控制）
-const showLetterInFirst = computed(() => {
-  return activeIndex.value === 0 && firstKeyboardMode.value === 'letter';
-});
-
-// 显示省份区域：第1位（省份模式），或前两位是字母时的第3位
-const showProvinceSection = computed(() => {
-  if (activeIndex.value === 0) return firstKeyboardMode.value === 'province';
-  if (activeIndex.value === 2 && isFirstTwoLetters.value) return true;
-  return false;
-});
-
-// 显示字母区域：第1位（字母模式）、第2位，或第3位及以后
-const showLetterSection = computed(() => {
-  if (activeIndex.value === 0 && firstKeyboardMode.value === 'letter') return true; // 第1位切换到字母
-  if (activeIndex.value === 1) return true; // 第2位
-  if (activeIndex.value === 2 && isFirstTwoLetters.value) return false; // 军牌第3位是省份
-  if (activeIndex.value >= 2) return true; // 后面位置
-  return false;
-});
-
-// 显示数字区域：第1位（字母模式）、第2位、第3位及以后
-const showNumberSection = computed(() => {
-  if (activeIndex.value === 0 && firstKeyboardMode.value === 'letter') return true; // 第1位切换到字母
-  if (activeIndex.value === 1) return true; // 第2位
-  if (activeIndex.value === 2 && isFirstTwoLetters.value) return false; // 军牌第3位是省份
-  return activeIndex.value >= 2;
-});
-
-// 显示特殊字符：第1位（字母模式）、第2位、第3位及以后
-const showSpecialSection = computed(() => {
-  if (activeIndex.value === 0 && firstKeyboardMode.value === 'letter') return true; // 第1位切换到字母
-  if (activeIndex.value === 1) return true; // 第2位
-  if (activeIndex.value === 2 && isFirstTwoLetters.value) return false; // 军牌第3位是省份
-  return activeIndex.value >= 2;
-});
-
-// 是否禁用 I 和 O（只有第3位及以后才禁用，前两位不禁用）
-const shouldDisableIO = computed(() => {
-  return activeIndex.value >= 2;
-});
-
-// 是否显示完成按钮（普通车牌第7位，或新能源第8位）
-const showDoneButton = computed(() => {
-  // 普通车牌：在第7位（索引6）时显示
-  if (!isNewEnergy.value && activeIndex.value === 6) return true;
-  // 新能源：在第8位（索引7）时显示
-  if (isNewEnergy.value && activeIndex.value === 7) return true;
-  return false;
-});
-
-function showKeyboardAt(index) {
-  activeIndex.value = index;
-  // 重置第一位键盘模式
-  if (index === 0) {
-    firstKeyboardMode.value = 'province';
-  }
-  showKeyboard.value = true;
-}
-
-function toggleFirstKeyboard() {
-  firstKeyboardMode.value = firstKeyboardMode.value === 'province' ? 'letter' : 'province';
-}
-
-function handleNewEnergyClick() {
-  if (!isNewEnergy.value) {
-    // 未启用新能源，点击时启用并打开键盘
-    isNewEnergy.value = true;
-  }
-  showKeyboardAt(7);
-}
-
-function closeKeyboard() {
-  showKeyboard.value = false;
-  activeIndex.value = -1;
-}
-
-function inputChar(c) {
-  // 第3位及以后禁用 I 和 O
-  if (shouldDisableIO.value && (c === 'I' || c === 'O')) return;
-
-  const currentValue = props.modelValue;
-  let arr = currentValue.split('');
-
-  // 填充空位
-  while (arr.length < activeIndex.value) {
-    arr.push('');
-  }
-
-  // 更新指定位置
-  arr[activeIndex.value] = c;
-
-  emit('update:modelValue', arr.join(''));
-
-  // 自动跳到下一位
-  if (activeIndex.value < 6) {
-    // 前6位，跳到下一位
-    activeIndex.value = activeIndex.value + 1;
-  } else if (activeIndex.value === 6) {
-    // 第7位输入完，自动启用新能源并跳到第8位
-    isNewEnergy.value = true;
-    activeIndex.value = 7;
-  } else if (activeIndex.value === 7) {
-    // 新能源第8位输入完成后自动关闭键盘
-    closeKeyboard();
-    if (arr.join('').length === 8) {
-      emit('complete', arr.join(''));
-    }
-  }
-}
-
-function deleteChar() {
-  const currentValue = props.modelValue;
-  let arr = currentValue.split('');
-
-  if (activeIndex.value >= 0 && arr[activeIndex.value]) {
-    // 当前位有内容，删除当前位
-    arr[activeIndex.value] = '';
-    // 移除末尾空字符
-    while (arr.length > 0 && arr[arr.length - 1] === '') {
-      arr.pop();
-    }
-    emit('update:modelValue', arr.join(''));
-  } else if (activeIndex.value > 0) {
-    // 当前位无内容，删除前一位并跳转
-    const prevIndex = activeIndex.value - 1;
-    arr[prevIndex] = '';
-    while (arr.length > 0 && arr[arr.length - 1] === '') {
-      arr.pop();
-    }
-    emit('update:modelValue', arr.join(''));
-    activeIndex.value = prevIndex;
-  } else if (activeIndex.value === 0 && arr[0]) {
-    emit('update:modelValue', '');
-  }
-}
-
-// 监听新能源切换，截断
-watch(isNewEnergy, (val) => {
-  if (!val && props.modelValue.length > 7) {
-    emit('update:modelValue', props.modelValue.slice(0, 7));
-  }
-});
-</script>
-
-<style lang="scss">
-// 业务固定色定义
-$plate-new-energy: #00B42A;      // 新能源车牌绿色
-$plate-new-energy-light: #00D68F;
-$plate-yellow: #FADC19;          // 黄牌
-$plate-yellow-dark: #E6C900;
-$plate-black: #1D2129;           // 黑牌
-$plate-white: #FFFFFF;           // 白牌
-
-.prism-license-plate-input {
-  .plate-boxes {
-    display: flex;
-    align-items: flex-end;
-    gap: 8rpx;
-  }
-
-  .plate-box {
-    width: 72rpx;
-    height: 88rpx;
-    background: var(--prism-input-bg, #EBEEF2);
-    border-radius: 12rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2rpx solid transparent;
-    transition: all 0.2s ease;
-
-    &.active {
-      border-color: var(--prism-primary-color, #3478F6);
-      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
-    }
-
-    &.filled {
-      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
-    }
-
-    &.province, &.letter {
-      width: 80rpx;
-    }
-
-    // 新能源车牌样式（业务固定色）
-    &.new-energy {
-      background: rgba($plate-new-energy, 0.15);
-      border: 2rpx solid $plate-new-energy;
-
-      &.active {
-        border-color: $plate-new-energy;
-        box-shadow: 0 0 0 4rpx rgba($plate-new-energy, 0.3);
-        background: rgba($plate-new-energy, 0.2);
-      }
-
-      &.filled {
-        background: linear-gradient(135deg, $plate-new-energy 0%, $plate-new-energy-light 100%);
-
-        .plate-text {
-          color: $plate-white;
-        }
-      }
-
-      .plate-text {
-        color: $plate-new-energy;
-      }
-    }
-
-    &.new-energy-optional {
-      background: transparent;
-      border: 2rpx dashed $plate-new-energy;
-
-      .optional-icon {
-        font-size: 28rpx;
-        color: $plate-new-energy;
-      }
-
-      &:active {
-        background: rgba($plate-new-energy, 0.1);
-      }
-    }
-
-    .plate-text {
-      font-size: 36rpx;
-      font-weight: 600;
-      color: var(--prism-text-primary, #1D2129);
-    }
-
-    // 特殊车牌字符输入框样式（业务固定色）
-    &.special-white {
-      background: $plate-white;
-      border: 2rpx solid var(--prism-border-color-light, #E5E6EB);
-
-      &.active {
-        border-color: var(--prism-primary-color, #3478F6);
-        box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.3);
-      }
-
-      .plate-text {
-        color: $plate-black;
-      }
-    }
-
-    &.special-black {
-      background: $plate-black;
-      border: 2rpx solid $plate-black;
-
-      &.active {
-        border-color: var(--prism-primary-color, #3478F6);
-        box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.3);
-      }
-
-      .plate-text {
-        color: $plate-white;
-      }
-    }
-
-    &.special-yellow {
-      background: $plate-yellow;
-      border: 2rpx solid $plate-yellow-dark;
-
-      &.active {
-        border-color: var(--prism-primary-color, #3478F6);
-        box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.3);
-      }
-
-      .plate-text {
-        color: $plate-black;
-      }
-    }
-  }
-
-  .plate-dot {
-    width: 12rpx;
-    height: 12rpx;
-    background: var(--prism-text-secondary, #86909C);
-    border-radius: 50%;
-    margin: 0 8rpx;
-    margin-bottom: 38rpx;
-  }
-
-  .plate-box-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    &.new-energy-wrapper {
-      .new-energy-label {
-        font-size: 18rpx;
-        color: $plate-new-energy;
-        font-weight: 500;
-        margin-bottom: 6rpx;
-        white-space: nowrap;
-
-        &.hidden {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-
-  .energy-switch {
-    display: flex;
-    align-items: center;
-    gap: 12rpx;
-    margin-top: 24rpx;
-
-    .energy-text {
-      font-size: 28rpx;
-      color: var(--prism-text-secondary, #86909C);
-    }
-  }
-
-  .keyboard-modal {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 9999;
-  }
-
-  .keyboard-content {
-    width: 100%;
-    max-height: 70vh;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-radius: 24rpx 24rpx 0 0;
-    padding: 24rpx;
-    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
-    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .keyboard-body {
-    flex: 1;
-    overflow-y: auto;
-    height: 480rpx; // 统一键盘高度：5行 * (80rpx高度 + 12rpx间距) + 余量
-    min-height: 480rpx;
-  }
-
-  .keyboard-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24rpx;
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 16rpx;
-    }
-
-    .keyboard-title {
-      font-size: 32rpx;
-      font-weight: 600;
-      color: var(--prism-text-primary, #1D2129);
-    }
-
-    .switch-btn {
-      padding: 6rpx 12rpx;
-      background: var(--prism-primary-color, #3478F6);
-      border-radius: 6rpx;
-
-      text {
-        font-size: 22rpx;
-        color: $plate-white;
-      }
-
-      &:active {
-        opacity: 0.8;
-      }
-    }
-
-    .keyboard-close {
-      font-size: 36rpx;
-      color: var(--prism-text-secondary, #86909C);
-      padding: 8rpx;
-    }
-  }
-
-  .keyboard-section {
-    margin-bottom: 20rpx;
-
-    .section-title {
-      font-size: 24rpx;
-      color: var(--prism-text-secondary, #86909C);
-      margin-bottom: 12rpx;
-    }
-  }
-
-  .keyboard-qwerty {
-    display: flex;
-    flex-direction: column;
-    gap: 12rpx;
-
-    // 省份键盘样式
-    &.province-qwerty .keyboard-row {
-      justify-content: flex-start;
-
-      .key-item {
-        flex: 1;
-        max-width: none;
-      }
-    }
-  }
-
-  .keyboard-row {
-    display: flex;
-    justify-content: center;
-    gap: 8rpx;
-
-    &.number-row {
-      justify-content: flex-start;
-    }
-
-    &.special-row {
-      justify-content: flex-start;
-      flex-wrap: wrap;
-    }
-
-    // 字母索引行
-    &.letter-index-row {
-      justify-content: flex-start;
-      width: 100%;
-      margin-bottom: 12rpx;
-
-      .key-item {
-        flex: 1;
-      }
-    }
-  }
-
-  .key-item {
-    min-width: 56rpx;
-    height: 80rpx;
-    padding: 0 12rpx;
-    background: var(--prism-input-bg, #EBEEF2);
-    border-radius: 12rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32rpx;
-    font-weight: 500;
-    color: var(--prism-text-primary, #1D2129);
-    transition: all 0.15s ease;
-    flex: 1;
-    max-width: 72rpx;
-
-    &:active {
-      background: var(--prism-primary-color, #3478F6);
-      color: $plate-white;
-    }
-
-    &.disabled {
-      opacity: 0.3;
-      pointer-events: none;
-    }
-
-    // 字母索引按钮样式
-    &.letter-index {
-      font-size: 24rpx;
-      background: var(--prism-bg-color, #F7F8FA);
-      color: var(--prism-text-secondary, #86909C);
-      max-width: none;
-      min-width: auto;
-      padding: 0 8rpx;
-
-      &.active {
-        background: var(--prism-primary-color, #3478F6);
-        color: $plate-white;
-      }
-    }
-
-    // 省份高亮样式（拼音首字母匹配）
-    &.highlight {
-      background: var(--prism-primary-color, #3478F6);
-      color: $plate-white;
-      box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.3);
-      transform: scale(1.05);
-    }
-
-    // 删除按钮样式
-    &.delete {
-      background: var(--prism-danger-color, #F53F3F);
-      color: $plate-white;
-      min-width: 120rpx;
-      max-width: 120rpx;
-      flex: none;
-
-      .delete-text {
-        font-size: 28rpx;
-        font-weight: 500;
-        color: $plate-white;
-      }
-
-      &:active {
-        background: var(--prism-danger-color-active, #D93636);
-      }
-    }
-
-    // 完成按钮样式
-    &.done {
-      background: var(--prism-primary-color, #3478F6);
-      color: $plate-white;
-      flex: 1;
-      min-width: 80rpx;
-      max-width: none;
-
-      .done-text {
-        font-size: 28rpx;
-        font-weight: 500;
-        color: $plate-white;
-      }
-
-      &:active {
-        background: var(--prism-primary-color-active, #2563EB);
-      }
-    }
-
-    // 特殊车牌字符样式（业务固定色）
-    &.special {
-      font-weight: 600;
-      flex: none;
-      min-width: 72rpx;
-      max-width: 72rpx;
-
-      &.black {
-        background: $plate-black;
-        color: $plate-white;
-
-        &:active {
-          background: #000000;
-        }
-      }
-
-      &.white {
-        background: $plate-white;
-        color: $plate-black;
-        border: 2rpx solid var(--prism-border-color-light, #E5E6EB);
-
-        &:active {
-          background: var(--prism-bg-color, #F2F3F5);
-        }
-      }
-
-      &.yellow {
-        background: $plate-yellow;
-        color: $plate-black;
-
-        &:active {
-          background: $plate-yellow-dark;
-        }
-      }
-    }
-  }
-}
-
-.dark-mode .prism-license-plate-input {
-  .plate-box {
-    background: var(--prism-input-bg, #2A2A2A);
-
-    &.active {
-      background: rgba(52, 120, 246, 0.15);
-    }
-
-    &.filled {
-      background: rgba(52, 120, 246, 0.15);
-    }
-
-    .plate-text {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-
-    // 深色模式特殊字符样式
-    &.special-white {
-      background: rgba(255, 255, 255, 0.9);
-      border: 2rpx solid rgba(255, 255, 255, 0.3);
-
-      .plate-text {
-        color: #1D2129;
-      }
-    }
-
-    &.special-black {
-      background: #000000;
-      border: 2rpx solid #333333;
-
-      .plate-text {
-        color: #FFFFFF;
-      }
-    }
-
-    &.special-yellow {
-      background: #FADC19;
-      border: 2rpx solid #E6C900;
-
-      .plate-text {
-        color: #1D2129;
-      }
-    }
-  }
-
-  .keyboard-content {
-    background: var(--prism-bg-color-card, #242424);
-  }
-
-  .keyboard-header .keyboard-title {
-    color: var(--prism-text-primary, #E5E6EB);
-  }
-
-  .section-title {
-    color: var(--prism-text-secondary, #6B7785);
-  }
-
-  .key-item {
-    background: var(--prism-input-bg, #2A2A2A);
-    color: var(--prism-text-primary, #E5E6EB);
-
-    // 字母索引按钮深色模式
-    &.letter-index {
-      background: rgba(255, 255, 255, 0.08);
-      color: var(--prism-text-secondary, #6B7785);
-
-      &.active {
-        background: var(--prism-primary-color, #3478F6);
-        color: #FFFFFF;
-      }
-    }
-
-    // 省份高亮保持蓝色
-    &.highlight {
-      background: var(--prism-primary-color, #3478F6);
-      color: #FFFFFF;
-    }
-
-    // 删除按钮保持红色
-    &.delete {
-      background: var(--prism-danger-color, #F53F3F);
-      color: #FFFFFF;
-
-      .delete-text {
-        color: #FFFFFF;
-      }
-    }
-
-    // 完成按钮保持蓝色
-    &.done {
-      background: var(--prism-primary-color, #3478F6);
-      color: #FFFFFF;
-
-      .done-text {
-        color: #FFFFFF;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <view class="prism-license-plate-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 车牌号输入框 -->
+    <view class="plate-boxes">
+      <!-- 第1位 -->
+      <view
+        class="plate-box province"
+        :class="{
+          'active': activeIndex === 0,
+          'filled': plateArray[0],
+          'special-white': getSpecialCharType(plateArray[0]) === 'white',
+          'special-black': getSpecialCharType(plateArray[0]) === 'black',
+          'special-yellow': getSpecialCharType(plateArray[0]) === 'yellow'
+        }"
+        @click="showKeyboardAt(0)"
+      >
+        <text class="plate-text">{{ plateArray[0] || '' }}</text>
+      </view>
+
+      <!-- 第2位 -->
+      <view
+        class="plate-box letter"
+        :class="{
+          'active': activeIndex === 1,
+          'filled': plateArray[1],
+          'special-white': getSpecialCharType(plateArray[1]) === 'white',
+          'special-black': getSpecialCharType(plateArray[1]) === 'black',
+          'special-yellow': getSpecialCharType(plateArray[1]) === 'yellow'
+        }"
+        @click="showKeyboardAt(1)"
+      >
+        <text class="plate-text">{{ plateArray[1] || '' }}</text>
+      </view>
+
+      <!-- 分隔点 -->
+      <view class="plate-dot"></view>
+
+      <!-- 后5位 -->
+      <view
+        v-for="i in 5"
+        :key="i"
+        class="plate-box"
+        :class="{
+          'active': activeIndex === i + 1,
+          'filled': plateArray[i + 1],
+          'special-white': getSpecialCharType(plateArray[i + 1]) === 'white',
+          'special-black': getSpecialCharType(plateArray[i + 1]) === 'black',
+          'special-yellow': getSpecialCharType(plateArray[i + 1]) === 'yellow'
+        }"
+        @click="showKeyboardAt(i + 1)"
+      >
+        <text class="plate-text">{{ plateArray[i + 1] || '' }}</text>
+      </view>
+
+      <!-- 新能源第8位（始终显示，可选） -->
+      <view class="plate-box-wrapper new-energy-wrapper">
+        <text class="new-energy-label" :class="{ 'hidden': getSpecialCharType(plateArray[7]) }">新能源</text>
+        <view
+          class="plate-box"
+          :class="{
+            'new-energy': isNewEnergy && !getSpecialCharType(plateArray[7]),
+            'new-energy-optional': !isNewEnergy,
+            'active': activeIndex === 7,
+            'filled': plateArray[7],
+            'special-white': getSpecialCharType(plateArray[7]) === 'white',
+            'special-black': getSpecialCharType(plateArray[7]) === 'black',
+            'special-yellow': getSpecialCharType(plateArray[7]) === 'yellow'
+          }"
+          @click="handleNewEnergyClick"
+        >
+          <text class="plate-text" v-if="isNewEnergy">{{ plateArray[7] || '' }}</text>
+          <text class="optional-icon fa fa-plus" v-else></text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 新能源切换（隐藏，通过点击第8位框自动启用） -->
+    <!-- <view class="energy-switch" @click="isNewEnergy = !isNewEnergy">
+      <view class="prism-checkbox" :class="{ checked: isNewEnergy }">
+        <text v-if="isNewEnergy" class="check-icon fa fa-check"></text>
+      </view>
+      <text class="energy-text">新能源车牌</text>
+    </view> -->
+
+    <!-- 统一键盘（底部弹出，无遮罩） -->
+    <view class="keyboard-modal" v-if="showKeyboard">
+      <view class="keyboard-content">
+        <view class="keyboard-header">
+          <!-- 左侧：标题 + 切换按钮 -->
+          <view class="header-left">
+            <text class="keyboard-title">{{ keyboardTitle }}</text>
+            <view
+              v-if="activeIndex === 0"
+              class="switch-btn"
+              @click="toggleFirstKeyboard"
+            >
+              <text>{{ firstKeyboardMode === 'province' ? '切换字母' : '切换省份' }}</text>
+            </view>
+          </view>
+          <!-- 右侧：关闭按钮 -->
+          <text class="keyboard-close fa fa-times" @click="closeKeyboard"></text>
+        </view>
+
+        <scroll-view class="keyboard-body" scroll-y>
+          <!-- 省份区域 -->
+          <view class="keyboard-section" v-if="showProvinceSection && !showLetterInFirst">
+            <!-- 字母索引栏（支持滑动选择） -->
+            <view
+              class="keyboard-row letter-index-row"
+              @touchstart="onLetterIndexTouchStart"
+              @touchmove="onLetterIndexTouchMove"
+              @touchend="onLetterIndexTouchEnd"
+            >
+              <view
+                v-for="(group, idx) in letterGroups"
+                :key="idx"
+                class="key-item letter-index"
+                :class="{ 'active': isGroupSelected(group) }"
+                :data-index="idx"
+                @click="selectLetterGroup(group)"
+              >
+                {{ group.join('/') }}
+              </view>
+            </view>
+            <!-- 省份键盘（4行） -->
+            <view class="keyboard-qwerty province-qwerty">
+              <view class="keyboard-row">
+                <view
+                  v-for="p in provinces.slice(0, 8)"
+                  :key="p"
+                  class="key-item"
+                  :class="{ 'highlight': isProvinceHighlight(p) }"
+                  @click="inputChar(p)"
+                >
+                  {{ p }}
+                </view>
+              </view>
+              <view class="keyboard-row">
+                <view
+                  v-for="p in provinces.slice(8, 16)"
+                  :key="p"
+                  class="key-item"
+                  :class="{ 'highlight': isProvinceHighlight(p) }"
+                  @click="inputChar(p)"
+                >
+                  {{ p }}
+                </view>
+              </view>
+              <view class="keyboard-row">
+                <view
+                  v-for="p in provinces.slice(16, 24)"
+                  :key="p"
+                  class="key-item"
+                  :class="{ 'highlight': isProvinceHighlight(p) }"
+                  @click="inputChar(p)"
+                >
+                  {{ p }}
+                </view>
+              </view>
+              <view class="keyboard-row">
+                <view
+                  v-for="p in provinces.slice(24, 31)"
+                  :key="p"
+                  class="key-item"
+                  :class="{ 'highlight': isProvinceHighlight(p) }"
+                  @click="inputChar(p)"
+                >
+                  {{ p }}
+                </view>
+                <!-- 删除按钮 -->
+                <view class="key-item delete" @click="deleteChar">
+                  <text class="delete-text">删除</text>
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <!-- 数字区域（放在字母上面） -->
+          <view class="keyboard-section" v-if="showNumberSection">
+            <view class="keyboard-row number-row">
+              <view
+                v-for="n in numberRow"
+                :key="n"
+                class="key-item"
+                @click="inputChar(n)"
+              >
+                {{ n }}
+              </view>
+            </view>
+          </view>
+
+          <!-- 字母区域 -->
+          <view class="keyboard-section" v-if="showLetterSection || showLetterInFirst">
+            <view class="keyboard-qwerty">
+              <view class="keyboard-row" v-for="(row, idx) in letterRows" :key="idx">
+                <view
+                  v-for="l in row"
+                  :key="l"
+                  class="key-item"
+                  :class="{ disabled: shouldDisableIO && (l === 'I' || l === 'O') }"
+                  @click="inputChar(l)"
+                >
+                  {{ l }}
+                </view>
+                <!-- 删除按钮放在最后一行 -->
+                <view v-if="idx === 2" class="key-item delete" @click="deleteChar">
+                  <text class="delete-text">删除</text>
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <!-- 特殊字符区域 -->
+          <view class="keyboard-section" v-if="showSpecialSection">
+            <view class="keyboard-row special-row">
+              <view
+                v-for="item in specialChars"
+                :key="item.char"
+                class="key-item special"
+                :class="item.type"
+                @click="inputChar(item.char)"
+              >
+                {{ item.char }}
+              </view>
+              <!-- 最后一位显示完成按钮 -->
+              <view v-if="showDoneButton" class="key-item done" @click="closeKeyboard">
+                <text class="done-text">完成</text>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'complete']);
+
+const appStore = useAppStore();
+
+const isNewEnergy = ref(false);
+const showKeyboard = ref(false);
+const activeIndex = ref(-1);
+const firstKeyboardMode = ref('province'); // 'province' or 'letter'
+
+// 省份简称（31个）
+const provinces = [
+  '京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘',
+  '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋',
+  '蒙', '陕', '吉', '闽', '贵', '粤', '川', '青', '藏', '琼', '宁'
+];
+
+// 省份拼音首字母映射（用于字母检索高亮）
+const provincePinyinMap = {
+  '京': 'J', '津': 'J', '沪': 'H', '渝': 'Y', '冀': 'J',
+  '豫': 'Y', '云': 'Y', '辽': 'L', '黑': 'H', '湘': 'X',
+  '皖': 'W', '鲁': 'L', '新': 'X', '苏': 'S', '浙': 'Z',
+  '赣': 'G', '鄂': 'E', '桂': 'G', '甘': 'G', '晋': 'J',
+  '蒙': 'M', '陕': 'S', '吉': 'J', '闽': 'M', '贵': 'G',
+  '粤': 'Y', '川': 'C', '青': 'Q', '藏': 'Z', '琼': 'Q', '宁': 'N'
+};
+
+// 省份字母索引（两个字母一组，方便筛选）
+const letterGroups = [
+  ['C', 'E'],   // 川、鄂
+  ['G', 'H'],   // 赣桂甘贵、沪黑
+  ['J', 'L'],   // 京津冀晋吉、辽鲁
+  ['M', 'N'],   // 蒙闽、宁
+  ['Q', 'S'],   // 青琼、苏陕
+  ['W', 'X'],   // 皖、新湘
+  ['Y', 'Z'],   // 渝豫云粤、浙藏
+];
+
+// 当前选中的字母组
+const selectedLetters = ref([]);
+
+// 选择字母组（单选）
+function selectLetterGroup(group) {
+  // 如果是触摸事件刚选中的同一个组，跳过click处理
+  if (touchSelectedGroup && touchSelectedGroup.every(l => group.includes(l))) {
+    return;
+  }
+
+  // 检查是否已选中这个组
+  const isSelected = group.every(l => selectedLetters.value.includes(l));
+  if (isSelected) {
+    // 取消选中
+    selectedLetters.value = [];
+  } else {
+    // 选中（替换）
+    selectedLetters.value = [...group];
+  }
+}
+
+// 判断字母组是否选中
+function isGroupSelected(group) {
+  return group.every(l => selectedLetters.value.includes(l));
+}
+
+// 清除字母筛选
+function clearLetterFilter() {
+  selectedLetters.value = [];
+}
+
+// 判断省份是否应该高亮
+function isProvinceHighlight(province) {
+  if (selectedLetters.value.length === 0) return false;
+  return selectedLetters.value.includes(provincePinyinMap[province]);
+}
+
+// 字母索引滑动选择相关
+let isTouchingLetterIndex = false;
+let touchSelectedGroup = null; // 记录触摸选中的组，防止click重复处理
+
+function onLetterIndexTouchStart(e) {
+  isTouchingLetterIndex = true;
+  touchSelectedGroup = null;
+  const touch = e.touches[0];
+  updateLetterIndexByTouch(touch);
+}
+
+function onLetterIndexTouchMove(e) {
+  if (!isTouchingLetterIndex) return;
+  const touch = e.touches[0];
+  updateLetterIndexByTouch(touch);
+}
+
+function onLetterIndexTouchEnd() {
+  isTouchingLetterIndex = false;
+  // 延迟清除，让click事件能检测到
+  setTimeout(() => {
+    touchSelectedGroup = null;
+  }, 100);
+}
+
+function updateLetterIndexByTouch(touch) {
+  const x = touch.clientX;
+  const y = touch.clientY;
+
+  // #ifdef H5
+  // H5端使用 document.elementFromPoint
+  const element = document.elementFromPoint(x, y);
+  if (element && element.classList.contains('letter-index')) {
+    const index = element.dataset.index;
+    if (index !== undefined) {
+      const group = letterGroups[parseInt(index)];
+      if (group && !isGroupSelected(group)) {
+        selectedLetters.value = [...group];
+        touchSelectedGroup = group;
+      }
+    }
+  }
+  // #endif
+
+  // #ifdef APP-PLUS || MP-WEIXIN
+  // 小程序/APP端通过计算位置来判断
+  uni.createSelectorQuery()
+    .selectAll('.letter-index')
+    .boundingClientRect((rects) => {
+      if (!rects) return;
+      for (let i = 0; i < rects.length; i++) {
+        const rect = rects[i];
+        if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+          const group = letterGroups[i];
+          if (group && !isGroupSelected(group)) {
+            selectedLetters.value = [...group];
+            touchSelectedGroup = group;
+          }
+          break;
+        }
+      }
+    })
+    .exec();
+  // #endif
+}
+
+// 特殊字符（7个）
+const specialChars = [
+  { char: '警', type: 'white' },
+  { char: '领', type: 'black' },
+  { char: '港', type: 'black' },
+  { char: '澳', type: 'black' },
+  { char: '学', type: 'yellow' },
+  { char: '挂', type: 'yellow' },
+  { char: '使', type: 'black' },
+];
+
+// QWERTY键盘布局
+const letterRows = [
+  ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+  ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+  ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
+];
+
+// 数字行
+const numberRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+
+const plateLength = computed(() => isNewEnergy.value ? 8 : 7);
+
+// 获取特殊字符类型
+function getSpecialCharType(char) {
+  if (!char) return null;
+  const found = specialChars.find(item => item.char === char);
+  return found ? found.type : null;
+}
+
+// 解析车牌号为数组
+const plateArray = computed(() => {
+  const value = props.modelValue;
+  if (!value) return [];
+  return value.split('').slice(0, plateLength.value);
+});
+
+// 判断前两位是否都是字母
+const isFirstTwoLetters = computed(() => {
+  const arr = plateArray.value;
+  if (arr.length < 2) return false;
+  const letterRegex = /^[A-Z]$/;
+  return letterRegex.test(arr[0]) && letterRegex.test(arr[1]);
+});
+
+// 键盘标题
+const keyboardTitle = computed(() => {
+  if (activeIndex.value === 0) {
+    return firstKeyboardMode.value === 'province' ? '选择省份' : '选择字母';
+  }
+  if (activeIndex.value === 1) return '选择字母';
+  if (activeIndex.value === 2 && isFirstTwoLetters.value) return '选择省份';
+  return '输入字符';
+});
+
+// 第一位是否显示字母（通过切换按钮控制）
+const showLetterInFirst = computed(() => {
+  return activeIndex.value === 0 && firstKeyboardMode.value === 'letter';
+});
+
+// 显示省份区域：第1位（省份模式），或前两位是字母时的第3位
+const showProvinceSection = computed(() => {
+  if (activeIndex.value === 0) return firstKeyboardMode.value === 'province';
+  if (activeIndex.value === 2 && isFirstTwoLetters.value) return true;
+  return false;
+});
+
+// 显示字母区域：第1位（字母模式）、第2位，或第3位及以后
+const showLetterSection = computed(() => {
+  if (activeIndex.value === 0 && firstKeyboardMode.value === 'letter') return true; // 第1位切换到字母
+  if (activeIndex.value === 1) return true; // 第2位
+  if (activeIndex.value === 2 && isFirstTwoLetters.value) return false; // 军牌第3位是省份
+  if (activeIndex.value >= 2) return true; // 后面位置
+  return false;
+});
+
+// 显示数字区域：第1位（字母模式）、第2位、第3位及以后
+const showNumberSection = computed(() => {
+  if (activeIndex.value === 0 && firstKeyboardMode.value === 'letter') return true; // 第1位切换到字母
+  if (activeIndex.value === 1) return true; // 第2位
+  if (activeIndex.value === 2 && isFirstTwoLetters.value) return false; // 军牌第3位是省份
+  return activeIndex.value >= 2;
+});
+
+// 显示特殊字符：第1位（字母模式）、第2位、第3位及以后
+const showSpecialSection = computed(() => {
+  if (activeIndex.value === 0 && firstKeyboardMode.value === 'letter') return true; // 第1位切换到字母
+  if (activeIndex.value === 1) return true; // 第2位
+  if (activeIndex.value === 2 && isFirstTwoLetters.value) return false; // 军牌第3位是省份
+  return activeIndex.value >= 2;
+});
+
+// 是否禁用 I 和 O（只有第3位及以后才禁用，前两位不禁用）
+const shouldDisableIO = computed(() => {
+  return activeIndex.value >= 2;
+});
+
+// 是否显示完成按钮（普通车牌第7位，或新能源第8位）
+const showDoneButton = computed(() => {
+  // 普通车牌：在第7位（索引6）时显示
+  if (!isNewEnergy.value && activeIndex.value === 6) return true;
+  // 新能源：在第8位（索引7）时显示
+  if (isNewEnergy.value && activeIndex.value === 7) return true;
+  return false;
+});
+
+function showKeyboardAt(index) {
+  activeIndex.value = index;
+  // 重置第一位键盘模式
+  if (index === 0) {
+    firstKeyboardMode.value = 'province';
+  }
+  showKeyboard.value = true;
+}
+
+function toggleFirstKeyboard() {
+  firstKeyboardMode.value = firstKeyboardMode.value === 'province' ? 'letter' : 'province';
+}
+
+function handleNewEnergyClick() {
+  if (!isNewEnergy.value) {
+    // 未启用新能源，点击时启用并打开键盘
+    isNewEnergy.value = true;
+  }
+  showKeyboardAt(7);
+}
+
+function closeKeyboard() {
+  showKeyboard.value = false;
+  activeIndex.value = -1;
+}
+
+function inputChar(c) {
+  // 第3位及以后禁用 I 和 O
+  if (shouldDisableIO.value && (c === 'I' || c === 'O')) return;
+
+  const currentValue = props.modelValue;
+  let arr = currentValue.split('');
+
+  // 填充空位
+  while (arr.length < activeIndex.value) {
+    arr.push('');
+  }
+
+  // 更新指定位置
+  arr[activeIndex.value] = c;
+
+  emit('update:modelValue', arr.join(''));
+
+  // 自动跳到下一位
+  if (activeIndex.value < 6) {
+    // 前6位，跳到下一位
+    activeIndex.value = activeIndex.value + 1;
+  } else if (activeIndex.value === 6) {
+    // 第7位输入完，自动启用新能源并跳到第8位
+    isNewEnergy.value = true;
+    activeIndex.value = 7;
+  } else if (activeIndex.value === 7) {
+    // 新能源第8位输入完成后自动关闭键盘
+    closeKeyboard();
+    if (arr.join('').length === 8) {
+      emit('complete', arr.join(''));
+    }
+  }
+}
+
+function deleteChar() {
+  const currentValue = props.modelValue;
+  let arr = currentValue.split('');
+
+  if (activeIndex.value >= 0 && arr[activeIndex.value]) {
+    // 当前位有内容，删除当前位
+    arr[activeIndex.value] = '';
+    // 移除末尾空字符
+    while (arr.length > 0 && arr[arr.length - 1] === '') {
+      arr.pop();
+    }
+    emit('update:modelValue', arr.join(''));
+  } else if (activeIndex.value > 0) {
+    // 当前位无内容，删除前一位并跳转
+    const prevIndex = activeIndex.value - 1;
+    arr[prevIndex] = '';
+    while (arr.length > 0 && arr[arr.length - 1] === '') {
+      arr.pop();
+    }
+    emit('update:modelValue', arr.join(''));
+    activeIndex.value = prevIndex;
+  } else if (activeIndex.value === 0 && arr[0]) {
+    emit('update:modelValue', '');
+  }
+}
+
+// 监听新能源切换，截断
+watch(isNewEnergy, (val) => {
+  if (!val && props.modelValue.length > 7) {
+    emit('update:modelValue', props.modelValue.slice(0, 7));
+  }
+});
+</script>
+
+<style lang="scss">
+// 业务固定色定义
+$plate-new-energy: #00B42A;      // 新能源车牌绿色
+$plate-new-energy-light: #00D68F;
+$plate-yellow: #FADC19;          // 黄牌
+$plate-yellow-dark: #E6C900;
+$plate-black: #1D2129;           // 黑牌
+$plate-white: #FFFFFF;           // 白牌
+
+.prism-license-plate-input {
+  .plate-boxes {
+    display: flex;
+    align-items: flex-end;
+    gap: 8rpx;
+  }
+
+  .plate-box {
+    width: 72rpx;
+    height: 88rpx;
+    background: var(--prism-input-bg, #EBEEF2);
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
+
+    &.active {
+      border-color: var(--prism-primary-color, #3478F6);
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+    }
+
+    &.filled {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+    }
+
+    &.province, &.letter {
+      width: 80rpx;
+    }
+
+    // 新能源车牌样式（业务固定色）
+    &.new-energy {
+      background: rgba($plate-new-energy, 0.15);
+      border: 2rpx solid $plate-new-energy;
+
+      &.active {
+        border-color: $plate-new-energy;
+        box-shadow: 0 0 0 4rpx rgba($plate-new-energy, 0.3);
+        background: rgba($plate-new-energy, 0.2);
+      }
+
+      &.filled {
+        background: linear-gradient(135deg, $plate-new-energy 0%, $plate-new-energy-light 100%);
+
+        .plate-text {
+          color: $plate-white;
+        }
+      }
+
+      .plate-text {
+        color: $plate-new-energy;
+      }
+    }
+
+    &.new-energy-optional {
+      background: transparent;
+      border: 2rpx dashed $plate-new-energy;
+
+      .optional-icon {
+        font-size: 28rpx;
+        color: $plate-new-energy;
+      }
+
+      &:active {
+        background: rgba($plate-new-energy, 0.1);
+      }
+    }
+
+    .plate-text {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    // 特殊车牌字符输入框样式（业务固定色）
+    &.special-white {
+      background: $plate-white;
+      border: 2rpx solid var(--prism-border-color-light, #E5E6EB);
+
+      &.active {
+        border-color: var(--prism-primary-color, #3478F6);
+        box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.3);
+      }
+
+      .plate-text {
+        color: $plate-black;
+      }
+    }
+
+    &.special-black {
+      background: $plate-black;
+      border: 2rpx solid $plate-black;
+
+      &.active {
+        border-color: var(--prism-primary-color, #3478F6);
+        box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.3);
+      }
+
+      .plate-text {
+        color: $plate-white;
+      }
+    }
+
+    &.special-yellow {
+      background: $plate-yellow;
+      border: 2rpx solid $plate-yellow-dark;
+
+      &.active {
+        border-color: var(--prism-primary-color, #3478F6);
+        box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.3);
+      }
+
+      .plate-text {
+        color: $plate-black;
+      }
+    }
+  }
+
+  .plate-dot {
+    width: 12rpx;
+    height: 12rpx;
+    background: var(--prism-text-secondary, #86909C);
+    border-radius: 50%;
+    margin: 0 8rpx;
+    margin-bottom: 38rpx;
+  }
+
+  .plate-box-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &.new-energy-wrapper {
+      .new-energy-label {
+        font-size: 18rpx;
+        color: $plate-new-energy;
+        font-weight: 500;
+        margin-bottom: 6rpx;
+        white-space: nowrap;
+
+        &.hidden {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+
+  .energy-switch {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    margin-top: 24rpx;
+
+    .energy-text {
+      font-size: 28rpx;
+      color: var(--prism-text-secondary, #86909C);
+    }
+  }
+
+  .keyboard-modal {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+  }
+
+  .keyboard-content {
+    width: 100%;
+    max-height: 70vh;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-radius: 24rpx 24rpx 0 0;
+    padding: 24rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .keyboard-body {
+    flex: 1;
+    overflow-y: auto;
+    height: 480rpx; // 统一键盘高度：5行 * (80rpx高度 + 12rpx间距) + 余量
+    min-height: 480rpx;
+  }
+
+  .keyboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24rpx;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+    }
+
+    .keyboard-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    .switch-btn {
+      padding: 6rpx 12rpx;
+      background: var(--prism-primary-color, #3478F6);
+      border-radius: 6rpx;
+
+      text {
+        font-size: 22rpx;
+        color: $plate-white;
+      }
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    .keyboard-close {
+      font-size: 36rpx;
+      color: var(--prism-text-secondary, #86909C);
+      padding: 8rpx;
+    }
+  }
+
+  .keyboard-section {
+    margin-bottom: 20rpx;
+
+    .section-title {
+      font-size: 24rpx;
+      color: var(--prism-text-secondary, #86909C);
+      margin-bottom: 12rpx;
+    }
+  }
+
+  .keyboard-qwerty {
+    display: flex;
+    flex-direction: column;
+    gap: 12rpx;
+
+    // 省份键盘样式
+    &.province-qwerty .keyboard-row {
+      justify-content: flex-start;
+
+      .key-item {
+        flex: 1;
+        max-width: none;
+      }
+    }
+  }
+
+  .keyboard-row {
+    display: flex;
+    justify-content: center;
+    gap: 8rpx;
+
+    &.number-row {
+      justify-content: flex-start;
+    }
+
+    &.special-row {
+      justify-content: flex-start;
+      flex-wrap: wrap;
+    }
+
+    // 字母索引行
+    &.letter-index-row {
+      justify-content: flex-start;
+      width: 100%;
+      margin-bottom: 12rpx;
+
+      .key-item {
+        flex: 1;
+      }
+    }
+  }
+
+  .key-item {
+    min-width: 56rpx;
+    height: 80rpx;
+    padding: 0 12rpx;
+    background: var(--prism-input-bg, #EBEEF2);
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    font-weight: 500;
+    color: var(--prism-text-primary, #1D2129);
+    transition: all 0.15s ease;
+    flex: 1;
+    max-width: 72rpx;
+
+    &:active {
+      background: var(--prism-primary-color, #3478F6);
+      color: $plate-white;
+    }
+
+    &.disabled {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
+    // 字母索引按钮样式
+    &.letter-index {
+      font-size: 24rpx;
+      background: var(--prism-bg-color, #F7F8FA);
+      color: var(--prism-text-secondary, #86909C);
+      max-width: none;
+      min-width: auto;
+      padding: 0 8rpx;
+
+      &.active {
+        background: var(--prism-primary-color, #3478F6);
+        color: $plate-white;
+      }
+    }
+
+    // 省份高亮样式（拼音首字母匹配）
+    &.highlight {
+      background: var(--prism-primary-color, #3478F6);
+      color: $plate-white;
+      box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.3);
+      transform: scale(1.05);
+    }
+
+    // 删除按钮样式
+    &.delete {
+      background: var(--prism-danger-color, #F53F3F);
+      color: $plate-white;
+      min-width: 120rpx;
+      max-width: 120rpx;
+      flex: none;
+
+      .delete-text {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: $plate-white;
+      }
+
+      &:active {
+        background: var(--prism-danger-color-active, #D93636);
+      }
+    }
+
+    // 完成按钮样式
+    &.done {
+      background: var(--prism-primary-color, #3478F6);
+      color: $plate-white;
+      flex: 1;
+      min-width: 80rpx;
+      max-width: none;
+
+      .done-text {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: $plate-white;
+      }
+
+      &:active {
+        background: var(--prism-primary-color-active, #2563EB);
+      }
+    }
+
+    // 特殊车牌字符样式（业务固定色）
+    &.special {
+      font-weight: 600;
+      flex: none;
+      min-width: 72rpx;
+      max-width: 72rpx;
+
+      &.black {
+        background: $plate-black;
+        color: $plate-white;
+
+        &:active {
+          background: #000000;
+        }
+      }
+
+      &.white {
+        background: $plate-white;
+        color: $plate-black;
+        border: 2rpx solid var(--prism-border-color-light, #E5E6EB);
+
+        &:active {
+          background: var(--prism-bg-color, #F2F3F5);
+        }
+      }
+
+      &.yellow {
+        background: $plate-yellow;
+        color: $plate-black;
+
+        &:active {
+          background: $plate-yellow-dark;
+        }
+      }
+    }
+  }
+}
+
+.dark-mode .prism-license-plate-input {
+  .plate-box {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &.active {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    &.filled {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    .plate-text {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+
+    // 深色模式特殊字符样式
+    &.special-white {
+      background: rgba(255, 255, 255, 0.9);
+      border: 2rpx solid rgba(255, 255, 255, 0.3);
+
+      .plate-text {
+        color: #1D2129;
+      }
+    }
+
+    &.special-black {
+      background: #000000;
+      border: 2rpx solid #333333;
+
+      .plate-text {
+        color: #FFFFFF;
+      }
+    }
+
+    &.special-yellow {
+      background: #FADC19;
+      border: 2rpx solid #E6C900;
+
+      .plate-text {
+        color: #1D2129;
+      }
+    }
+  }
+
+  .keyboard-content {
+    background: var(--prism-bg-color-card, #242424);
+  }
+
+  .keyboard-header .keyboard-title {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+
+  .section-title {
+    color: var(--prism-text-secondary, #6B7785);
+  }
+
+  .key-item {
+    background: var(--prism-input-bg, #2A2A2A);
+    color: var(--prism-text-primary, #E5E6EB);
+
+    // 字母索引按钮深色模式
+    &.letter-index {
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--prism-text-secondary, #6B7785);
+
+      &.active {
+        background: var(--prism-primary-color, #3478F6);
+        color: #FFFFFF;
+      }
+    }
+
+    // 省份高亮保持蓝色
+    &.highlight {
+      background: var(--prism-primary-color, #3478F6);
+      color: #FFFFFF;
+    }
+
+    // 删除按钮保持红色
+    &.delete {
+      background: var(--prism-danger-color, #F53F3F);
+      color: #FFFFFF;
+
+      .delete-text {
+        color: #FFFFFF;
+      }
+    }
+
+    // 完成按钮保持蓝色
+    &.done {
+      background: var(--prism-primary-color, #3478F6);
+      color: #FFFFFF;
+
+      .done-text {
+        color: #FFFFFF;
+      }
+    }
+  }
+}
+</style>