级联框-带搜索功能版本

1.子组件CascaderSelect.vue

<template>
  <div class="cascader-select">
    <!-- 输入框 -->
    <div 
      class="input-wrapper"
      @click="toggleDropdown"
    >
      <input
        v-model="displayValue"
        :placeholder="placeholder"
        class="cascader-input"
        readonly
      />
      <div class="input-icons">
        <span 
          v-if="selectedPath.length > 0"
          class="clear-icon"
          @click.stop="handleClear"
          title="清空选择"
        >
          ×
        </span>
        <span 
          class="arrow-icon"
          :class="{ 'arrow-up': showDropdown }"
        >
          ▼
        </span>
      </div>
    </div>

    <!-- 级联下拉框 -->
    <div 
      v-show="showDropdown" 
      class="cascader-dropdown"
    >
      <div class="cascader-content">
        <!-- 搜索输入框 -->
        <div class="cascader-search">
          <div class="search-input-wrapper">
            <input
              ref="searchInput"
              v-model="searchKeyword"
              @input="handleSearchInput"
              @focus="handleSearchFocus"
              @blur="handleSearchBlur"
              @keydown.enter="handleSearchEnter"
              @keydown.esc="handleSearchEsc"
              placeholder="输入关键词搜索..."
              class="search-input"
            />
            <span class="search-input-icon">🔍</span>
          </div>
        </div>

        <!-- 搜索结果面板 -->
        <div v-if="showSearchResults" class="search-results-panel">
          <div v-if="searchResults.length === 0" class="no-search-results">
            <div class="no-results-text">未找到匹配结果</div>
            <div class="no-results-hint">请尝试其他关键词</div>
          </div>
          
          <div v-else class="search-results-content">
            <!-- Country 分类 -->
            <div v-if="countryResults.length > 0" class="search-category">
              <div class="category-header">
                <span class="category-title">国家 (Country)</span>
                <span class="category-count">{
   
   {
   
    countryResults.length }}</span>
              </div>
              <div class="category-items">
                <div 
                  v-for="item in countryResults" 
                  :key="item.fullPath.join('-')" 
                  class="search-result-item"
                  @click="handleSearchResultClick(item)"
                >
                  <div class="result-content">
                    <div class="result-label" v-html="highlightSearchKeyword(item.label, searchKeyword)"></div>
                    <div class="result-path">{
   
   {
   
    item.path.join(' → ') }}</div>
                  </div>
                  <div class="result-badge country">Country</div>
                </div>
              </div>
            </div>

            <!-- Region 分类 -->
            <div v-if="regionResults.length > 0" class="search-category">
              <div class="category-header">
                <span class="category-title">区域 (Region)</span>
                <span class="category-count">{
   
   {
   
    regionResults.length }}</span>
              </div>
              <div class="category-items">
                <div 
                  v-for="item in regionResults" 
                  :key="item.fullPath.join('-')" 
                  class="search-result-item"
                  @click="handleSearchResultClick(item)"
                >
                  <div class="result-content">
                    <div class="result-label" v-html="highlightSearchKeyword(item.label, searchKeyword)"></div>
                    <div class="result-path">{
   
   {
   
    item.path.join(' → ') }}</div>
                  </div>
                  <div class="result-badge region">Region</div>
                </div>
              </div>
            </div>

            <!-- Zone 分类 -->
            <div v-if="zoneResults.length > 0" class="search-category">
              <div class="category-header">
                <span class="category-icon">🏢</span>
                <span class="category-title">区域 (Zone)</span>
                <span class="category-count">{
   
   {
   
    zoneResults.length }}</span>
              </div>
              <div class="category-items">
                <div 
                  v-for="item in zoneResults" 
                  :key="item.fullPath.join('-')" 
                  class="search-result-item"
                  @click="handleSearchResultClick(item)"
                >
                  <div class="result-content">
                    <div class="result-label" v-html="highlightSearchKeyword(item.label, searchKeyword)"></div>
                    <div class="result-path">{
   
   {
   
    item.path.join(' → ') }}</div>
                  </div>
                  <div class="result-badge zone">Zone</div>
                </div>
              </div>
            </div>

            <!-- AZ 分类 -->
            <div v-if="azResults.length > 0" class="search-category">
              <div class="category-header">
                <span class="category-icon">📍</span>
                <span class="category-title">可用区 (AZ)</span>
                <span class="category-count">{
   
   {
   
    azResults.length }}</span>
              </div>
              <div class="category-items">
                <div 
                  v-for="item in azResults" 
                  :key="item.fullPath.join('-')" 
                  class="search-result-item"
                  @click="handleSearchResultClick(item)"
                >
                  <div class="result-content">
                    <div class="result-label" v-html="highlightSearchKeyword(item.label, searchKeyword)"></div>
                    <div class="result-path">{
   
   {
   
    item.path.join(' → ') }}</div>
                  </div>
                  <div class="result-badge az">AZ</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 级联头部标注 -->
        <div v-