@wiajs/ui/dist/autocomplete/index.less

wia ui packages

/* === AutoComplete === */
.autocomplete {
  --autocomplete-font-size: 14px;
  --autocomplete-status-font-size: 12px;
  --autocomplete-clear-font-size: 10px;
  --autocomplete-search-font-size: 12px;
  --add-button-offset: 0px; /* 新增按钮偏移量，默认为0 */

  // 当有新增按钮时修改变量
  &.has-add {
    --add-button-offset: 25px;
  }

  position: relative;
  // max-width: 600px;
  margin: 0 auto;

  font-size: var(--autocomplete-font-size); // 17

  /* 输入框容器样式（确保输入框本身样式正常） */
  .ac-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;

    .ac-input {
      width: 100%;
      // padding: 16px 20px;
      padding: 0px 10px 0px 5px;
      border: 1px solid #ddd;
      border-radius: 6px;
      outline: none;
      transition: all 0.3s ease;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
      background: #fff;
      box-sizing: border-box;

      height: 31px;
      min-width: 120px;

      &:focus {
        border-color: #3498db;
        box-shadow: 0 3px 15px rgba(52, 152, 219, 0.3);
      }

      &.composing {
        background-color: #f8fdff;
        border-color: #4fc3f7;
      }
    }

    /* 按钮样式（避免遮挡输入框） */
    .ac-status,
    .ac-clear,
    .ac-search,
    .ac-add {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);

      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 16px;
      color: #999;
    }

    .ac-status {
      // right: 20px;
      right: calc(30px + var(--add-button-offset)); /* 动态计算位置 */
      // font-size: 0.9rem;
      font-size: var(--autocomplete-status-font-size);
      color: #7f8c8d;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 50;

      &.show {
        opacity: 1;
      }
    }

    .ac-clear {
      // right: 15px;
      right: calc(30px + var(--add-button-offset)); /* 动态计算位置 */
      background: none;
      color: #aaa;
      font-size: var(--autocomplete-clear-font-size);
      opacity: 0;
      transition: all 0.3s ease;
      width: 20px !important;
      height: 20px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      z-index: 100;

      .icon.wiaicon {
        font-size: var(--autocomplete-clear-font-size);
      }

      &.show {
        opacity: 1;
      }

      &:hover {
        color: #ff6b6b;
        background-color: #ffeeee;
      }
    }

    .ac-search {
      right: calc(5px + var(--add-button-offset)); /* 动态计算位置 */
      background: linear-gradient(135deg, #3498db, #2980b9);
      color: white;
      font-size: var(--autocomplete-search-font-size);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
      transition: all 0.3s ease;
      width: 25px;
      height: 25px;
      z-index: 10;

      &:hover {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.6);
      }

      &:active {
        transform: translateY(-50%) scale(0.95);
      }
    }

    .ac-add {
      right: 5px; /* 最右侧位置 */
      background: linear-gradient(135deg, #27ae60, #219a52);
      color: white;
      font-size: var(--autocomplete-search-font-size);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
      transition: all 0.3s ease;
      width: 25px;
      height: 25px;
      z-index: 10;

      &:hover {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 6px 20px rgba(39, 174, 96, 0.6);
        background: linear-gradient(135deg, #219a52, #1e8449);
      }

      &:active {
        transform: translateY(-50%) scale(0.95);
      }
    }
  }

  .ac-list {
    position: absolute;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    margin-top: 8px;
    z-index: 1000;
    display: none;

    .ac-item {
      padding: 6px 15px;
      cursor: pointer;
      border-bottom: 1px solid #f0f0f0;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background-color: #f5f9ff;
      }

      &.highlighted {
        background-color: #e3f2fd;
      }

      .ac-highlight {
        width: fit-content;
        background-color: #fff9c4;
        font-weight: 600;
        padding: 0 2px;
        border-radius: 3px;
      }
    }
  }

  .loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    min-height: 14px;
    border: 2px solid rgba(52, 152, 219, 0.3);
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  // @media (max-width: 768px) {
  //   .ac-input {
  //     padding: 14px 50px 14px 20px;
  //     font-size: 1.1rem;
  //     height: 55px;
  //   }

  //   .ac-clear {
  //     right: 50px;
  //     font-size: 1.1rem;
  //     width: 26px;
  //     height: 26px;
  //   }

  //   .ac-search {
  //     width: 36px;
  //     height: 36px;
  //     font-size: 1.2rem;
  //   }

  //   .ac-status {
  //     right: 95px;
  //     font-size: 0.85rem;
  //   }
  // }
}

/* 下拉列表基础样式 */
.ac-list {
  position: absolute;
  display: block;
  background: #fff; // 避免继承透明背景
  border: 1px solid #eee;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto; // 超出部分滚动
  min-width: 100px; // 最小宽度兜底
  max-height: 300px; // 限制最大高度，避免超出视口
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 9999; // 最高层级（确保在page.view内部最上层）

  /* 列表项样式 */
  .ac-item {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:hover,
    &.highlighted {
      background: #f5f7fa;
    }

    .ac-highlight {
      color: #1890ff;
      font-weight: bold;
    }
  }
}

/* 加载动画 */
.loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border: 2px solid #ccc;
  border-top-color: #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}