- 将 PointsTag.vue 从 Less 迁移至 Tailwind CSS,移除冗余样式和 showIcon 属性 - 优化 ChatDrawer 组件视觉设计,包括背景、间距和渐变效果 - 统一 ChatDrawer 子组件(Header、Footer、Empty、Result)的样式和交互细节 - 使用 Skeleton 组件改进加载状态,增强视觉一致性 - 调整按钮尺寸、图标大小和文本样式以符合设计系统规范
42 lines
1.3 KiB
Vue
42 lines
1.3 KiB
Vue
<script setup>
|
|
import { Icon } from '@iconify/vue'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
defineProps({
|
|
agent: { type: Object, default: null }
|
|
})
|
|
|
|
const emit = defineEmits(['history'])
|
|
|
|
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 bg-gradient-to-br from-primary to-violet-500 flex items-center justify-center overflow-hidden shadow-sm 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="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">{{ agent?.categoryName || '通用' }}</div>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
class="size-9"
|
|
@click="openHistory"
|
|
title="历史记录"
|
|
>
|
|
<Icon icon="lucide:history" class="size-4" />
|
|
</Button>
|
|
</div>
|
|
</template>
|