mky-vent-base/src/views/ventAI/manageAssistent/components/chatModal/SkillPanel.vue

<template>
  <div class="skill-panel">
    <div class="skill-panel-header">
      <div class="skill-panel-header-left">
        <span class="skill-panel-title">技能</span>
        <span class="skill-panel-desc">管理模型技能，启用后可在聊天里通过$skill-name使用</span>
      </div>
      <div class="skill-panel-close" @click="emit('close')">
        <div class="close-icon"></div>
      </div>
    </div>
    <div class="skill-filter-bar">
      <a-input v-model:value="searchKeyword" placeholder="搜索技能..." allow-clear size="small" class="skill-search-input" />
      <a-select v-model:value="filterStatus" size="small" class="skill-filter-select">
        <a-select-option value="all">全部</a-select-option>
        <a-select-option value="enabled">已启用</a-select-option>
        <a-select-option value="disabled">未启用</a-select-option>
      </a-select>
    </div>
    <div class="skill-summary">
      <span class="skill-summary-label">技能</span>
      <span class="skill-summary-count">{{ filteredSkills.length }}项</span>
    </div>
    <div class="skill-list" v-if="!loading">
      <div v-for="skill in filteredSkills" :key="skill.name" class="skill-item" @click="handleSkillClick(skill)">
        <div class="skill-header">
          <div class="skill-name-wrapper">
            <div class="skill-item-icon"></div>
            <span class="skill-name">{{ skill.display_name }}</span>
          </div>
          <a-switch :checked="skill.enabled" size="small" class="skill-switch" @change="handleToggleSkill(skill)" />
        </div>
        <div class="skill-desc">{{ skill.description }}</div>
        <div v-if="skill.agents && skill.agents.length > 0" class="skill-agents">
          <div class="agents-label">
            <div class="agents-label-icon"></div>
            <span>关联智能体</span>
          </div>
          <div class="agents-tags">
            <span v-for="agent in skill.agents" :key="agent" class="agent-tag">{{ agent }}</span>
          </div>
        </div>
        <div v-if="skillDetailMap[skill.name]" class="skill-detail">
          <div class="skill-detail-content" v-html="renderMarkdown(skillDetailMap[skill.name])"></div>
        </div>
        <div v-else-if="detailLoadingMap[skill.name]" class="skill-detail-loading">
          <a-spin size="small" />
        </div>
      </div>
      <a-empty v-if="filteredSkills.length === 0" description="暂无技能" />
    </div>
    <div class="skill-loading" v-else>
      <a-spin />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue';
  import { getSkills, toggleSkill, getSkillDetails } from '../../api';
  import { renderMarkdown } from './utils';
  import { message } from 'ant-design-vue';

  interface Skill {
    name: string;
    display_name: string;
    path: string;
    description: string;
    enabled: boolean;
    agents: string[];
    has_skill_md: boolean;
  }

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

  const skills = ref<Skill[]>([]);
  const loading = ref(false);
  const skillDetailMap = reactive<Record<string, string>>({});
  const detailLoadingMap = reactive<Record<string, boolean>>({});
  const searchKeyword = ref('');
  const filterStatus = ref<'all' | 'enabled' | 'disabled'>('all');

  const filteredSkills = computed(() => {
    return skills.value.filter((skill) => {
      const keyword = searchKeyword.value.trim();
      const matchKeyword = !keyword || skill.display_name.includes(keyword) || skill.name.includes(keyword);
      const matchStatus = filterStatus.value === 'all' || (filterStatus.value === 'enabled' ? skill.enabled : !skill.enabled);
      return matchKeyword && matchStatus;
    });
  });

  const fetchSkills = async () => {
    loading.value = true;
    try {
      const res = await getSkills();
      skills.value = res?.skills || [];
    } catch {
      skills.value = [];
    } finally {
      loading.value = false;
    }
  };

  const handleToggleSkill = async (skill: Skill) => {
    try {
      await toggleSkill(skill.name);
      skill.enabled = !skill.enabled;
      message.success(`${skill.display_name} 已${skill.enabled ? '启用' : '禁用'}`);
    } catch {
      message.error('操作失败，请重试');
    }
  };

  const handleSkillClick = async (skill: Skill) => {
    return;
    if (skillDetailMap[skill.name]) {
      delete skillDetailMap[skill.name];
      return;
    }
    detailLoadingMap[skill.name] = true;
    try {
      const res = await getSkillDetails(skill.name);
      skillDetailMap[skill.name] = res?.content || '';
    } catch {
      message.error('获取技能详情失败');
    } finally {
      detailLoadingMap[skill.name] = false;
    }
  };

  fetchSkills();
</script>

<style scoped lang="less">
  .skill-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-image: var(--img-chat-panel-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
  }

  .skill-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(63, 80, 106, 0.25);
    flex-shrink: 0;

    .skill-panel-header-left {
      display: flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }

    .skill-panel-title {
      font-size: 16px;
      font-weight: 600;
      color: #e8edf3;
      letter-spacing: 1px;
      flex-shrink: 0;
    }

    .skill-panel-desc {
      font-size: 12px;
      color: #6a7a8a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .skill-panel-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.2s;

      &:hover {
        background: rgba(255, 77, 79, 0.15);
      }

      .close-icon {
        width: 16px;
        height: 16px;
        background-image: var(--img-chat-close-icon-btn);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .skill-filter-bar {
    display: flex;
    gap: 12px;
    margin: 16px 20px 0;
    flex-shrink: 0;

    .skill-search-input {
      flex: 1;
      height: 36px;
      background: rgba(10, 132, 255, 0.08);
      border: 1px solid rgba(63, 80, 106, 0.4);
      border-radius: 6px;
      color: #e0e6ed;
      transition: all 0.3s;

      &:hover,
      &:focus {
        border-color: rgba(10, 132, 255, 0.5);
        background: rgba(10, 132, 255, 0.12);
      }

      :deep(.zxm-input) {
        background: transparent;
        color: #e0e6ed;
        font-size: 13px;
      }
    }

    .skill-filter-select {
      width: 130px;
      height: 36px;

      :deep(.zxm-select-selector) {
        background: rgba(10, 132, 255, 0.08) !important;
        border: 1px solid rgba(63, 80, 106, 0.4) !important;
        border-radius: 6px !important;
        color: #e0e6ed;
        height: 36px;
      }
      :deep(.zxm-select-selection-item) {
        line-height: 34px !important;
      }
    }
  }

  .skill-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px 0;
    flex-shrink: 0;
    font-size: 13px;

    .skill-summary-label {
      color: #e8edf3;
      font-weight: 500;
    }

    .skill-summary-count {
      color: #6a7a8a;
    }
  }

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

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(63, 80, 106, 0.4);
      border-radius: 3px;

      &:hover {
        background: rgba(63, 80, 106, 0.6);
      }
    }
  }

  .skill-loading {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
  }

  .skill-item {
    padding: 16px 18px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid rgba(63, 80, 106, 0.15);
    background: rgba(10, 132, 255, 0.03);
    cursor: pointer;
    transition: all 0.25s ease;

    &:hover {
      background: rgba(10, 132, 255, 0.08);
      border-color: rgba(10, 132, 255, 0.25);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .skill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .skill-name-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .skill-item-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: var(--img-chat-skill-item-icon);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    filter: drop-shadow(0 0 4px rgba(10, 132, 255, 0.3));
  }

  .skill-name {
    font-size: 15px;
    font-weight: 600;
    color: #e8edf3;
    letter-spacing: 0.3px;
  }

  .skill-switch {
    :deep(.zxm-switch) {
      min-width: 36px;
      height: 20px;
      background: rgba(63, 80, 106, 0.5);

      &::after {
        width: 16px;
        height: 16px;
        top: 2px;
        left: 2px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }

      &.zxm-switch-checked {
        background: rgba(10, 132, 255, 0.6);

        &::after {
          left: calc(100% - 18px);
        }
      }
    }
  }

  .skill-desc {
    font-size: 13px;
    color: #8b949e;
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 34px;
  }

  .skill-agents {
    margin-top: 10px;
    margin-left: 34px;
    padding: 10px 14px;
    background: rgba(10, 132, 255, 0.04);
    border: 1px solid rgba(63, 80, 106, 0.18);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;

    .agents-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #6a7a8a;
      white-space: nowrap;
      flex-shrink: 0;

      .agents-label-icon {
        width: 14px;
        height: 14px;
        background-image: var(--img-chat-agent-icon);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        opacity: 0.6;
      }
    }

    .agents-tags {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;

      .agent-tag {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        font-size: 12px;
        color: #5cb8ff;
        background: rgba(10, 132, 255, 0.1);
        border: 1px solid rgba(10, 132, 255, 0.2);
        border-radius: 4px;
        letter-spacing: 0.3px;
        transition: all 0.2s;

        &:hover {
          background: rgba(10, 132, 255, 0.18);
          border-color: rgba(10, 132, 255, 0.35);
        }
      }
    }
  }

  .skill-detail {
    margin-top: 14px;
    margin-left: 34px;
    padding: 14px 16px;
    background: rgba(10, 132, 255, 0.05);
    border: 1px solid rgba(10, 132, 255, 0.15);
    border-radius: 6px;
    position: relative;
    overflow: hidden;

    .skill-detail-content {
      font-size: 13px;
      color: #c9d1d9;
      line-height: 1.8;
      word-break: break-word;

      :deep(h1),
      :deep(h2),
      :deep(h3),
      :deep(h4) {
        color: #e8edf3;
        margin: 12px 0 8px;
        font-weight: 600;
      }
      :deep(h1) {
        font-size: 18px;
      }
      :deep(h2) {
        font-size: 16px;
      }
      :deep(h3) {
        font-size: 14px;
      }

      :deep(p) {
        margin: 6px 0;
      }

      :deep(ul),
      :deep(ol) {
        padding-left: 20px;
        margin: 6px 0;
      }

      :deep(code) {
        background: rgba(10, 132, 255, 0.12);
        padding: 1px 5px;
        border-radius: 3px;
        font-size: 12px;
        color: #79c0ff;
      }

      :deep(pre) {
        background: rgba(0, 0, 0, 0.25);
        padding: 12px;
        border-radius: 6px;
        overflow-x: auto;
        margin: 8px 0;
      }

      :deep(pre code) {
        background: transparent;
        padding: 0;
        color: #c9d1d9;
      }

      :deep(blockquote) {
        border-left: 3px solid rgba(10, 132, 255, 0.4);
        padding-left: 12px;
        margin: 8px 0;
        color: #8b949e;
      }

      :deep(table) {
        border-collapse: collapse;
        margin: 8px 0;
        width: 100%;
      }

      :deep(th),
      :deep(td) {
        border: 1px solid rgba(63, 80, 106, 0.4);
        padding: 6px 10px;
        text-align: left;
      }

      :deep(th) {
        background: rgba(10, 132, 255, 0.1);
        font-weight: 600;
      }

      :deep(strong) {
        font-weight: 600;
        color: #e8edf3;
      }

      :deep(a) {
        color: #58a6ff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .skill-detail-loading {
    margin-top: 14px;
    margin-left: 34px;
    display: flex;
    justify-content: center;
    padding: 16px 0;
  }
</style>