From 8f36744a1895eacc38125eab0bbe2b20eac16006 Mon Sep 17 00:00:00 2001
From: lbw_9527443 <780139497@qq.com>
Date: Mon, 26 Jan 2026 18:18:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=9B=B4=E6=96=B0=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E7=95=8C=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=93=81?=
 =?UTF-8?q?=E7=89=8C=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将品牌名称从 "NEXUS AI" 更新为 "247控制中台"
- 重构聊天消息组件布局，移除 DaisyUI 的 chat 类，使用自定义 flex 布局
- 改进消息气泡、头像和思维链的视觉样式，增强交互反馈（如悬停效果）
- 优化响应式设计，调整不同屏幕尺寸下的内边距和最大宽度
---
 247_Contry/src/views/index/index.vue | 70 ++++++++++++++++------------
 1 file changed, 41 insertions(+), 29 deletions(-)

diff --git a/247_Contry/src/views/index/index.vue b/247_Contry/src/views/index/index.vue
index 4b3b28f..70ac630 100644
--- a/247_Contry/src/views/index/index.vue
+++ b/247_Contry/src/views/index/index.vue
@@ -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>