agent-management/frontend/src/views/SkillManagement.vue

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NIcon, NSpin, NEmpty, NDialog, useDialog, useMessage } from 'naive-ui'
import { AddOutline, ReloadOutline } from '@vicons/ionicons5'
import { useSkillStore } from '../stores/skill'
import SkillCard from '../components/skill/SkillCard.vue'
import SkillUpload from '../components/skill/SkillUpload.vue'

const router = useRouter()
const skillStore = useSkillStore()
const dialog = useDialog()
const message = useMessage()

const showUpload = ref(false)

onMounted(() => {
  skillStore.init()
})

onUnmounted(() => {
  skillStore.destroy()
})

function handleRefresh() {
  skillStore.fetchSkills()
}

async function handleUpload(file) {
  try {
    await skillStore.createSkill(file)
    showUpload.value = false
    message.success('技能上传成功')
  } catch (err) {
    message.error(err.message || '上传失败')
  }
}

function handleEdit(skill) {
  router.push(`/skill/edit/${skill.folderName}`)
}

function handleDelete(skill) {
  dialog.warning({
    title: '确认删除',
    content: `确定要删除技能「${skill.translatedName || skill.name}」吗？此操作不可恢复。`,
    positiveText: '确认删除',
    negativeText: '取消',
    onPositiveClick: async () => {
      try {
        await skillStore.removeSkill(skill.folderName)
        message.success('删除成功')
      } catch (err) {
        message.error(err.message || '删除失败')
      }
    }
  })
}
</script>

<template>
  <div class="skill-management">
    <!-- 操作栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <span class="skill-count">
          共 <span class="count-num">{{ skillStore.skills.length }}</span> 个技能
        </span>
      </div>
      <div class="toolbar-right">
        <n-button quaternary @click="handleRefresh" :loading="skillStore.loading">
          <template #icon>
            <n-icon><ReloadOutline /></n-icon>
          </template>
          刷新
        </n-button>
        <n-button type="primary" @click="showUpload = true">
          <template #icon>
            <n-icon><AddOutline /></n-icon>
          </template>
          新增技能
        </n-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="skillStore.loading && skillStore.skills.length === 0" class="loading-area">
      <n-spin size="large" />
      <p class="loading-text">正在加载技能列表...</p>
    </div>

    <!-- 空状态 -->
    <div v-else-if="skillStore.skills.length === 0" class="empty-area">
      <div class="empty-illustration">
        <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="20" y="30" width="80" height="60" rx="8" stroke="rgba(56, 189, 248, 0.15)" stroke-width="2" fill="none"/>
          <path d="M45 55H75" stroke="rgba(56, 189, 248, 0.2)" stroke-width="2" stroke-linecap="round"/>
          <path d="M45 65H65" stroke="rgba(56, 189, 248, 0.15)" stroke-width="2" stroke-linecap="round"/>
          <circle cx="60" cy="60" r="30" stroke="rgba(37, 99, 235, 0.1)" stroke-width="1" fill="none"/>
        </svg>
      </div>
      <p class="empty-title">暂无技能</p>
      <p class="empty-desc">点击「新增技能」上传您的第一个 Skill</p>
      <n-button type="primary" @click="showUpload = true" style="margin-top: 16px">
        <template #icon>
          <n-icon><AddOutline /></n-icon>
        </template>
        新增技能
      </n-button>
    </div>

    <!-- 卡片网格 -->
    <div v-else class="skill-grid">
      <SkillCard
        v-for="(skill, index) in skillStore.skills"
        :key="skill.folderName"
        :skill="skill"
        :style="{ animationDelay: `${index * 60}ms` }"
        class="fade-in"
        @edit="handleEdit"
        @delete="handleDelete"
      />
    </div>

    <!-- 上传弹窗 -->
    <SkillUpload
      v-model:show="showUpload"
      :uploading="skillStore.uploading"
      :progress="skillStore.uploadProgress"
      @upload="handleUpload"
    />
  </div>
</template>

<style scoped>
.skill-management {
  min-height: 100%;
}

/* 操作栏 */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.skill-count {
  font-size: 14px;
  color: var(--text-secondary);
}

.count-num {
  color: var(--color-accent);
  font-weight: 600;
}

.toolbar-right {
  display: flex;
  gap: 8px;
}

/* 加载状态 */
.loading-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 16px;
}

.loading-text {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* 空状态 */
.empty-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

.empty-illustration {
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* 卡片网格 */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
</style>