sionrui/frontend/app/web-gold/src/components/agents/ChatDrawerEmpty.vue

<script setup>
import { Icon } from '@iconify/vue'
</script>

<template>
  <div class="flex-1 flex flex-col items-center justify-center p-8 text-center">
    <div class="relative w-20 h-20 mb-5">
      <div class="absolute inset-0 rounded-full bg-gradient-to-br from-primary/20 to-violet-500/20 animate-pulse"></div>
      <div class="absolute inset-2 rounded-full bg-gradient-to-br from-primary/30 to-violet-500/30 animate-pulse" style="animation-delay: 0.3s"></div>
      <div class="absolute inset-4 rounded-full bg-gradient-to-br from-primary to-violet-500 flex items-center justify-center shadow-lg shadow-primary/25">
        <Icon icon="lucide:sparkles" class="text-white text-2xl" />
      </div>
    </div>
    <h3 class="text-base font-semibold text-foreground mb-1.5">准备好为你生成内容</h3>
    <p class="text-sm text-muted-foreground mb-5 max-w-[260px] leading-relaxed">
      在下方输入框描述你的需求，AI 将立即开始创作
    </p>
    <div class="flex flex-col gap-2.5">
      <div class="flex items-center gap-2 text-sm text-muted-foreground">
        <Icon icon="lucide:zap" class="size-4 text-primary" />
        <span>深度模式支持复杂任务</span>
      </div>
      <div class="flex items-center gap-2 text-sm text-muted-foreground">
        <Icon icon="lucide:pencil" class="size-4 text-primary" />
        <span>可随时重新生成调整</span>
      </div>
    </div>
  </div>
</template>