mky-vent-base/src/views/ventAI/manageAssistent/components/chat/Input/SkillPopup.vue

<template>
  <!-- 技能引用选择弹层：由父组件用 $ 触发，单选；已选状态与高亮项都由父组件传入 -->
  <div ref="rootEl" class="skill-popup" @click.stop @pointerdown.stop>
    <div class="skill-popup-header">
      <span>选择技能</span>
      <span class="skill-count">0/1</span>
    </div>
    <div class="skill-list">
      <div
        v-for="(skill, index) in list"
        :key="skill.name"
        class="skill-item"
        :class="{
          active: index === activeIndex,
          selected: isSelected(skill.name),
        }"
        @click="emit('select', skill)"
      >
        <div class="skill-item-checkbox" :class="{ checked: isSelected(skill.name) }">
          <span v-if="isSelected(skill.name)" class="check-mark">✓</span>
        </div>
        <div class="skill-item-icon"></div>
        <span class="skill-item-name">{{ skill.display_name }}</span>
      </div>
      <div v-if="list.length === 0" class="skill-empty">{{ loadFailed ? '技能列表加载失败，请稍后重试' : '暂无匹配技能' }}</div>
    </div>
    <div class="skill-popup-footer">
      <span>点击选择技能（仅可选1个）</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { onClickOutside } from '@vueuse/core';

  interface SkillOption {
    name: string;
    display_name: string;
  }

  const props = defineProps<{
    list: SkillOption[];
    activeIndex: number;
    selectedName: string;
    /** 技能列表是否加载失败：失败时空态文案要与「确实没有技能」区分开 */
    loadFailed?: boolean;
  }>();

  const emit = defineEmits<{ (e: 'select', skill: SkillOption): void; (e: 'close'): void }>();

  const isSelected = (name: string) => props.selectedName === name;

  // 组件自己持有根元素，外部点击由这里判定后回调父组件
  const rootEl = ref<HTMLElement>();
  onClickOutside(rootEl, () => emit('close'));
</script>

<style scoped lang="less">
  .skill-popup {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 8px;
    background: #0a2a3f;
    border: 1px solid #1a4a6f;
    border-radius: 8px;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    .skill-popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px 8px;
      font-size: 13px;
      color: #e0e6ed;
      border-bottom: 1px solid rgba(63, 80, 106, 0.3);
      flex-shrink: 0;

      .skill-count {
        font-size: 12px;
        color: #3a8fd4;
        font-weight: 500;
      }
    }

    .skill-list {
      flex: 1;
      overflow-y: auto;
      padding: 6px;

      .skill-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.2s;

        &:hover {
          background: rgba(10, 132, 255, 0.15);
        }

        &.active {
          background: rgba(10, 132, 255, 0.2);
        }

        &.selected {
          background: rgba(10, 132, 255, 0.12);
        }

        .skill-item-checkbox {
          width: 16px;
          height: 16px;
          border: 1.5px solid rgba(255, 255, 255, 0.25);
          border-radius: 3px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s;

          &.checked {
            background: #3a8fd4;
            border-color: #3a8fd4;
          }

          .check-mark {
            font-size: 11px;
            color: #fff;
            line-height: 1;
          }
        }

        .skill-item-icon {
          width: 18px;
          height: 18px;
          background-image: var(--img-chat-options-skill-icon);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          flex-shrink: 0;
        }

        .skill-item-name {
          font-size: 13px;
          color: #e0e6ed;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .skill-empty {
        text-align: center;
        color: #8b949e;
        font-size: 13px;
        padding: 20px 0;
      }
    }

    .skill-popup-footer {
      padding: 8px 14px;
      font-size: 12px;
      color: #8b949e;
      text-align: center;
      border-top: 1px solid rgba(63, 80, 106, 0.3);
      flex-shrink: 0;
    }
  }
</style>