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

<script setup>
import { computed } from 'vue'
import { Icon } from '@iconify/vue'
import { Button } from '@/components/ui/button'

const props = defineProps({
  agent: { type: Object, default: null }
})

const emit = defineEmits(['history'])

const isPromptScene = computed(() => props.agent?.source === 'prompt')

const openHistory = () => emit('history')
</script>

<template>
  <div class="flex items-center justify-between px-4 py-3 border-b border-border/50 shrink-0 bg-gradient-to-r from-background to-muted/30">
    <div class="flex items-center gap-3">
      <div
        class="size-10 rounded-xl flex items-center justify-center overflow-hidden shadow-sm"
        :class="isPromptScene
          ? 'bg-gradient-to-br from-amber-400 to-orange-500 shadow-amber-200/30'
          : 'bg-gradient-to-br from-primary to-violet-500 shadow-primary/20'"
      >
        <img
          v-if="agent?.avatar"
          :src="agent.avatar"
          :alt="agent.name"
          class="w-full h-full object-cover"
        />
        <Icon v-else :icon="isPromptScene ? 'lucide:sparkles' : 'lucide:bot'" class="text-white text-xl" />
      </div>
      <div>
        <div class="font-semibold text-foreground text-sm">{{ agent?.name || 'AI 助手' }}</div>
        <div class="text-xs text-muted-foreground">
          <span v-if="isPromptScene" class="inline-flex items-center gap-1">
            <Icon icon="lucide:pencil" class="size-3" />
            {{ agent?.categoryName || '我的风格' }}
          </span>
          <span v-else>{{ agent?.categoryName || '通用' }}</span>
        </div>
      </div>
    </div>
    <Button
      variant="ghost"
      size="icon"
      class="size-9"
      @click="openHistory"
      title="历史记录"
    >
      <Icon icon="lucide:history" class="size-4" />
    </Button>
  </div>
</template>