sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): 重构 PointsTag 组件并优化 AI 聊天抽屉样式

Browse Source 
- 将 PointsTag.vue 从 Less 迁移至 Tailwind CSS，移除冗余样式和 showIcon 属性
- 优化 ChatDrawer 组件视觉设计，包括背景、间距和渐变效果
- 统一 ChatDrawer 子组件（Header、Footer、Empty、Result）的样式和交互细节
- 使用 Skeleton 组件改进加载状态，增强视觉一致性
- 调整按钮尺寸、图标大小和文本样式以符合设计系统规范
This commit is contained in:
sion123
2026-03-20 18:21:26 +08:00
parent 9ff10e6769
commit 4e26c248a6
6 changed files with 94 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/app/web-gold/src/components/agents/ChatDrawerEmpty.vue
View File

@@ -4,25 +4,24 @@ import { Icon } from '@iconify/vue'
<template>
<div class="flex-1 flex flex-col items-center justify-center p-8 text-center">
<div class="relative w-24 h-24 mb-6">
<div class="absolute inset-0 rounded-full border-2 border-primary/20 animate-pulse"></div>
<div class="absolute inset-1 rounded-full border-2 border-primary/15 animate-pulse" style="animation-delay: 0.5s"></div>
<div class="absolute inset-2 rounded-full border-2 border-primary/10 animate-pulse" style="animation-delay: 1s"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-gradient-to-br from-primary to-violet-500 flex items-center justify-center shadow-lg shadow-primary/30">
<Icon icon="lucide:bot" class="text-white text-xl" />
<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-lg font-semibold text-foreground mb-2">准备好为你生成内容</h3>
<p class="text-sm text-muted-foreground mb-6 max-w-[280px]">
<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-3">
<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="text-primary" />
<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="text-primary" />
<Icon icon="lucide:pencil" class="size-4 text-primary" />
<span>可随时重新生成调整</span>
</div>
</div>