<!-- 自定义 SVG 图标组件库 - 替代 Element Plus Icons -->
<script setup lang="ts">
// 使用 CSS 实现简洁图标，避免 UI 框架依赖
</script>

<template>
  <!-- 搜索图标 -->
  <svg v-if="$attrs.type === 'search'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="7"/>
    <path d="m20 20-3.5-3.5"/>
  </svg>

  <!-- 通知/铃铛图标 -->
  <svg v-else-if="$attrs.type === 'bell'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 8a6 6 0 1 0-12 0c0 6-2.5 8-2.5 8h17s-2.5-2-2.5-8"/>
    <path d="M9.5 19a2.5 2.5 0 0 0 5 0"/>
  </svg>


  <!-- 设置/齿轮图标 -->
  <svg v-else-if="$attrs.type === 'settings'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="3.2"/>
    <path d="M19.4 15a1 1 0 0 0 .2 1.1l.1.1a2 2 0 0 1-2.8 2.8l-.1-.1a1 1 0 0 0-1.1-.2 1 1 0 0 0-.6.9V20a2 2 0 0 1-4 0v-.2a1 1 0 0 0-.6-.9 1 1 0 0 0-1.1.2l-.1.1a2 2 0 0 1-2.8-2.8l.1-.1a1 1 0 0 0 .2-1.1 1 1 0 0 0-.9-.6H4a2 2 0 0 1 0-4h.2a1 1 0 0 0 .9-.6 1 1 0 0 0-.2-1.1l-.1-.1a2 2 0 0 1 2.8-2.8l.1.1a1 1 0 0 0 1.1.2h.1a1 1 0 0 0 .5-.9V4a2 2 0 0 1 4 0v.2a1 1 0 0 0 .6.9 1 1 0 0 0 1.1-.2l.1-.1a2 2 0 0 1 2.8 2.8l-.1.1a1 1 0 0 0-.2 1.1v.1a1 1 0 0 0 .9.5H20a2 2 0 0 1 0 4h-.2a1 1 0 0 0-.9.6Z"/>
  </svg>

  <!-- 眼睛/观察图标 -->
  <svg v-else-if="$attrs.type === 'eye'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z"/>
    <circle cx="12" cy="12" r="3"/>
  </svg>

  <!-- 数据分析图标 -->
  <svg v-else-if="$attrs.type === 'analysis'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 19.5h16"/>
    <path d="M7 16V11"/>
    <path d="M12 16V7"/>
    <path d="M17 16v-3"/>
  </svg>

  <!-- 文档/报告图标 -->
  <svg v-else-if="$attrs.type === 'document'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/>
    <path d="M14 3v5h5"/>
    <path d="M9 13h6"/>
    <path d="M9 17h6"/>
  </svg>


  <!-- 箭头右图标 -->
  <svg v-else-if="$attrs.type === 'arrow-right'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M5 12h14"/>
    <path d="m13 6 6 6-6 6"/>
  </svg>

  <!-- 加号图标 -->
  <svg v-else-if="$attrs.type === 'plus'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 5v14"/>
    <path d="M5 12h14"/>
  </svg>

  <!-- 播放图标 -->
  <svg v-else-if="$attrs.type === 'play'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="9"/>
    <path d="m10 8 6 4-6 4Z"/>
  </svg>

  <!-- 关闭/删除图标 -->
  <svg v-else-if="$attrs.type === 'close'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18 6 6 18"/>
    <path d="m6 6 12 12"/>
  </svg>

  <!-- 刷新图标 -->
  <svg v-else-if="$attrs.type === 'refresh'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 11a8 8 0 0 0-14.9-3"/>
    <path d="M4 5v4h4"/>
    <path d="M4 13a8 8 0 0 0 14.9 3"/>
    <path d="M20 19v-4h-4"/>
  </svg>

  <!-- 警告图标 -->
  <svg v-else-if="$attrs.type === 'warning'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 4 3.5 19h17L12 4Z"/>
    <path d="M12 10v4"/>
    <path d="M12 17h.01"/>
  </svg>

  <!-- 成功/勾选图标 -->
  <svg v-else-if="$attrs.type === 'check'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="m20 6-11 11-5-5"/>
  </svg>


  <!-- 列表/任务图标 -->
  <svg v-else-if="$attrs.type === 'list'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="M9 6h11"/>
    <path d="M9 12h11"/>
    <path d="M9 18h11"/>
    <circle cx="5" cy="6" r="1" fill="currentColor" stroke="none"/>
    <circle cx="5" cy="12" r="1" fill="currentColor" stroke="none"/>
    <circle cx="5" cy="18" r="1" fill="currentColor" stroke="none"/>
  </svg>

  <!-- 空列表图标 -->
  <svg v-else-if="$attrs.type === 'list-empty'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <rect x="4" y="5" width="16" height="14" rx="2.5"/>
    <path d="M8 10h8"/>
    <path d="M8 14h4"/>
  </svg>

  <!-- 向下箭头 -->
  <svg v-else-if="$attrs.type === 'chevron-down'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="m6 9 6 6 6-6"/>
  </svg>

  <!-- 数据库图标 -->
  <svg v-else-if="$attrs.type === 'database'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <ellipse cx="12" cy="6" rx="7" ry="3"/>
    <path d="M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6"/>
    <path d="M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3"/>
  </svg>

  <!-- 网络连接图标 -->
  <svg v-else-if="$attrs.type === 'globe'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="9"/>
    <path d="M3 12h18"/>
    <path d="M12 3c2.5 2.6 4 5.7 4 9s-1.5 6.4-4 9c-2.5-2.6-4-5.7-4-9s1.5-6.4 4-9Z"/>
  </svg>

  <!-- 蜘蛛/爬虫图标 -->
  <svg v-else-if="$attrs.type === 'spider'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="2.5"/>
    <path d="M12 4v4"/>
    <path d="M7.5 7.5 10 9"/>
    <path d="M16.5 7.5 14 9"/>
    <path d="M6 12h3"/>
    <path d="M15 12h3"/>
    <path d="M7.5 16.5 10 15"/>
    <path d="M16.5 16.5 14 15"/>
    <path d="M12 14.5V20"/>
  </svg>

  <!-- 终端/命令行图标 -->
  <svg v-else-if="$attrs.type === 'terminal'" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <path d="m5 7 5 5-5 5"/>
    <path d="M13 17h6"/>
  </svg>

  <!-- 默认/备用图标 -->
  <svg v-else class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="9"/>
  </svg>
</template>

<style scoped>
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: none;
  flex-shrink: 0;
}
</style>