LiuRui/247_Contry
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 更新聊天界面样式和品牌名称

Browse Source 
- 将品牌名称从 "NEXUS AI" 更新为 "247控制中台"
- 重构聊天消息组件布局，移除 DaisyUI 的 chat 类，使用自定义 flex 布局
- 改进消息气泡、头像和思维链的视觉样式，增强交互反馈（如悬停效果）
- 优化响应式设计，调整不同屏幕尺寸下的内边距和最大宽度
This commit is contained in:
lbw_9527443
2026-01-26 18:18:39 +08:00
parent 56f8f9d363
commit 8f36744a18
1 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
247_Contry/src/views/index/index.vue
View File

@@ -8,7 +8,7 @@
<i class="ph-bold ph-brain text-white text-xl"></i>
</div>
<div>
<h1 class="font-bold text-lg tracking-wide leading-tight text-white">NEXUS <span class="text-primary">AI</span></h1>
<h1 class="font-bold text-lg tracking-wide leading-tight text-white">247<span class="text-primary">控制中台</span></h1>
<div class="text-[10px] text-slate-400 font-mono tracking-wider">SALES PILOT V1.0</div>
</div>
</div>
@@ -405,40 +405,52 @@
</div>
<!-- Chat Content -->
<div class="flex-1 p-6 overflow-y-auto space-y-6 bg-gradient-to-b from-slate-900/50 to-slate-950" ref="chatBox">
<div v-for="msg in chatHistory" :key="msg.id" class="chat" :class="msg.role === 'ai' ? 'chat-start' : 'chat-end'">
<div class="chat-image avatar">
<div class="w-10 h-10 rounded-full border border-slate-600/50 p-1 flex items-center justify-center shadow-lg"
:class="msg.role === 'ai' ? 'bg-indigo-600' : 'bg-slate-700'">
<i v-if="msg.role === 'ai'" class="ph-bold ph-robot text-xl text-white"></i>
<i v-else class="ph-bold ph-user text-xl text-white"></i>
<div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-8 bg-slate-950/50" ref="chatBox">
<div v-for="msg in chatHistory" :key="msg.id" class="flex gap-4 group" :class="msg.role === 'user' ? 'flex-row-reverse' : ''">
<!-- Avatar -->
<div class="flex-shrink-0 mt-1">
<div class="w-9 h-9 rounded-full border border-slate-700/50 p-1 flex items-center justify-center shadow-lg transition-transform group-hover:scale-105"
:class="msg.role === 'ai' ? 'bg-indigo-600' : 'bg-slate-800'">
<i v-if="msg.role === 'ai'" class="ph-bold ph-robot text-lg text-white"></i>
<i v-else class="ph-bold ph-user text-lg text-white"></i>
</div>
</div>
<div class="chat-header text-[10px] text-slate-500 mb-1 flex items-center gap-2">
{{ msg.role === 'ai' ? 'Nexus AI Agent' : '家长' }}
<time class="opacity-50">{{ msg.time }}</time>
</div>
<!-- 思维链展示 (黑盒可视化) -->
<div v-if="msg.role === 'ai' && msg.thought" class="mb-2 max-w-[90%]">
<div class="p-3 bg-yellow-900/10 border border-yellow-700/30 rounded-lg text-xs text-yellow-500/90 font-mono shadow-inner relative overflow-hidden">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-yellow-600/50"></div>
<div class="flex items-center gap-1.5 mb-1.5 opacity-80 font-bold uppercase tracking-wider text-[10px]">
<i class="ph-bold ph-cpu"></i> 决策链路: {{ msg.stage }}
<!-- Message Body -->
<div class="flex flex-col max-w-[85%] sm:max-w-[75%]" :class="msg.role === 'user' ? 'items-end' : 'items-start'">
<!-- Header -->
<div class="flex items-center gap-2 mb-1.5 text-[10px] text-slate-500">
<span class="font-bold text-slate-400">{{ msg.role === 'ai' ? 'Nexus AI Agent' : '家长' }}</span>
<time class="opacity-50 font-mono">{{ msg.time }}</time>
</div>
<!-- Thought Chain (AI Only) -->
<div v-if="msg.role === 'ai' && msg.thought" class="mb-3 w-full animate-in fade-in slide-in-from-top-2 duration-500">
<div class="p-3 bg-yellow-500/5 border border-yellow-700/20 rounded-lg text-xs text-yellow-500/80 font-mono shadow-sm relative overflow-hidden">
<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-yellow-600/40"></div>
<div class="flex items-center gap-1.5 mb-1.5 opacity-90 font-bold uppercase tracking-wider text-[9px]">
<i class="ph-bold ph-cpu"></i> 决策链路: {{ msg.stage }}
</div>
<div class="leading-relaxed opacity-80 break-words whitespace-pre-wrap">> {{ msg.thought }}</div>
</div>
<div class="leading-relaxed opacity-90">> {{ msg.thought }}</div>
</div>
</div>
<div class="chat-bubble shadow-xl text-sm leading-relaxed"
:class="msg.role === 'ai' ? 'chat-bubble-primary text-white' : 'chat-bubble-neutral bg-slate-800 text-slate-200'">
{{ msg.content }}
</div>
<div v-if="msg.role === 'ai'" class="chat-footer opacity-40 text-[10px] mt-1 flex gap-2 font-mono">
<span>Model: Claude-3</span>
<span>Latency: 420ms</span>
<!-- Bubble -->
<div class="p-3.5 rounded-2xl shadow-xl text-sm leading-relaxed break-words relative group-hover:shadow-2xl transition-shadow"
:class="msg.role === 'ai'
? 'bg-indigo-600 text-white rounded-tl-sm'
: 'bg-slate-800 text-slate-200 rounded-tr-sm'">
{{ msg.content }}
</div>
<!-- Footer (AI Only) -->
<div v-if="msg.role === 'ai'" class="mt-1.5 flex items-center gap-3 text-[9px] text-slate-600 font-mono opacity-0 group-hover:opacity-100 transition-opacity">
<span class="flex items-center gap-1"><i class="ph-bold ph-lightning"></i> Claude-3 Opus</span>
<span class="flex items-center gap-1"><i class="ph-bold ph-clock"></i> 420ms</span>
</div>
</div>
</div>
</div>