From e8a6d634c128d308f302f2ece34aa3c0b9ccaf7e Mon Sep 17 00:00:00 2001
From: bakaECC <1064071566@qq.com>
Date: Wed, 10 Dec 2025 16:27:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=8E=E4=BA=A4=E4=BA=92=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/chat_layout.vue | 4260 +++++++++++++++++++++++++++---------
 1 file changed, 3257 insertions(+), 1003 deletions(-)

diff --git a/src/layout/chat_layout.vue b/src/layout/chat_layout.vue
index 2555974..34d8b96 100644
--- a/src/layout/chat_layout.vue
+++ b/src/layout/chat_layout.vue
@@ -1,992 +1,1566 @@
 <template>
-  <div class="chat-root">
-    <!-- 顶部导航栏（保持不变） -->
-    <div class="right" :class="{ flex: isTopbarFixed }">
-      <div class="top">
-        <topbar />
-        <menus mode="horizontal" v-if="isMenusShow && isHorizontalMenu" />
-        <tagsbar />
-        <breadcrumbs
-          v-if="isBreadcrumbsShow"
-          @on-breadcrumbs-change="handleBreadcrumbsChange"
-        />
-      </div>
+  <div
+    class="chat-shell relative flex h-screen text-foreground overflow-hidden"
+  >
+    <div class="absolute inset-0 pointer-events-none">
+      <div
+        class="absolute rounded-full blur-3xl animate-blob-float bg-gradient-to-bl from-cyan-400/20 via-blue-400/15 to-violet-400/20"
+        style="width: 900px; height: 900px; top: -250px; right: -250px; filter: blur(100px)"
+      ></div>
+      <div
+        class="absolute rounded-full blur-3xl animate-blob-float-2 bg-gradient-to-tr from-violet-400/15 via-purple-400/20 to-cyan-400/15"
+        style="width: 950px; height: 950px; bottom: -320px; left: -320px; filter: blur(110px)"
+      ></div>
+      <div
+        class="absolute rounded-full blur-3xl animate-blob-float-3 bg-gradient-to-br from-blue-400/15 via-indigo-400/18 to-purple-400/15"
+        style="width: 820px; height: 820px; top: 10%; left: -220px; filter: blur(95px)"
+      ></div>
     </div>
 
-    <!-- 主容器（内部左右分栏） -->
-    <div class="chat-container">
-      <!-- ✅ 左侧边栏（历史对话） -->
-      <aside class="left-sidebar">
-        <div class="sidebar-header">
-          <div class="sidebar-title">
-            <el-icon class="robot-icon"><ChatDotRound /></el-icon>
-            <span class="title-text">凌空天行AI助手</span>
-          </div>
-          <el-button
-            type="primary"
-            size="small"
-            @click="newConversation"
-            style="width: 100%;"
-          >
-            <el-icon><Plus /></el-icon>
-            新建对话
-          </el-button>
-          <el-button
-            v-if="historyList.length > 0"
-            type="danger"
-            size="small"
-            style="width: 100%; margin-top: 8px;"
-            @click="deleteAllHistory"
-          >
-            <el-icon><Delete /></el-icon>
-            清空全部
-          </el-button>
-        </div>
+    <aside
+      v-if="!isSidebarCollapsed"
+      class="chat-sidebar relative z-20 w-[360px] h-full bg-white/70 backdrop-blur-xl border-r border-white/60 flex flex-col overflow-hidden"
+    >
+      <div
+        class="absolute -top-8 -left-8 w-32 h-32 bg-white/20 rounded-full blur-3xl opacity-60"
+      ></div>
+      <div
+        class="absolute -top-6 -right-6 w-24 h-24 bg-white/15 rounded-full blur-2xl opacity-50"
+      ></div>
+      <div
+        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-white/10 rounded-full blur-3xl opacity-40"
+      ></div>
 
-        <div class="history-list">
+      <div class="p-6 border-b border-white/30 relative z-10">
+        <div class="flex items-center gap-3">
           <div
-            v-for="item in historyList"
-            :key="item.id"
-            class="history-item"
-            @mouseenter="hoveredId = item.id"
-            @mouseleave="hoveredId = null"
+            class="w-10 h-10 rounded-2xl bg-gradient-primary flex items-center justify-center shadow-liquid overflow-hidden p-1.5"
           >
-            <div class="history-content" @click="loadFromHistory(item.id)">
-              <div class="history-title">{{ item.title }}</div>
-              <div class="history-time">{{ formatTime(item.timestamp) }}</div>
-            </div>
-
-            <el-button
-              v-show="hoveredId === item.id"
-              class="delete-btn"
-              size="small"
-              type="danger"
-              circle
-              @click.stop="deleteHistory(item.id)"
-            >
-              <el-icon><Delete /></el-icon>
-            </el-button>
+            <img :src="logo" alt="Logo" class="h-full w-full object-contain" />
           </div>
-
-          <div v-if="historyList.length === 0" class="empty-history">
-            暂无历史对话
+          <div>
+            <p
+              class="text-base font-bold bg-gradient-primary bg-clip-text text-transparent"
+            >
+              凌能空间
+            </p>
+            <p class="text-xs text-muted-foreground">凌空智能体交互中心</p>
           </div>
         </div>
-      </aside>
+      </div>
 
-      <!-- ✅ 右侧主聊天区域 -->
-      <div class="chat-main-content">
-        <!-- 聊天主区域 -->
-        <main ref="chatMain" class="chat-main">
-          <TransitionGroup name="msg" tag="div" class="message-list">
-            <!-- 遍历消息列表 -->
+      <div class="p-4 space-y-3 relative z-10">
+        <div
+          class="rounded-2xl border border-white/60 bg-white/75 backdrop-blur-xl p-4 shadow-glass"
+        >
+          <p class="text-xs font-semibold text-muted-foreground mb-1">
+            当前模型
+          </p>
+          <p class="text-base font-bold text-foreground">Qwen</p>
+        </div>
+      </div>
 
-            <div
-              v-for="(msg, idx) in messages"
-              :key="idx"
-              :class="['message-wrapper', msg.role]"
+      <div class="flex-1 flex flex-col min-h-0 px-4 pt-4 pb-4 relative z-10">
+        <div class="flex items-end justify-between mb-2">
+          <div
+            class="flex items-end gap-1 overflow-x-auto scrollbar-custom flex-1"
+          >
+            <button
+              class="px-4 py-2 text-xs font-medium bg-white/30 text-foreground rounded-t-2xl shadow-sm -mb-[1px]"
             >
-              <!-- ✅ 加载中消息（新增） -->
-              <div
-                v-if="msg.isLoadingMessage"
-                class="loading-message-container"
-              >
-                <el-progress
-                  :percentage="msg.progressPercentage"
-                  :status="msg.loadingStatus"
-                  stroke-width="20"
-                  striped
-                  striped-flow
-                  :duration="40"
-                  class="loading-progress"
-                />
-                <div class="loading-text-wrapper">
-                  <el-icon class="loading-icon"><Loading /></el-icon>
-                  <span class="loading-main-text">
-                    {{ msg.loadingTexts[msg.currentTextIndex] }}
-                  </span>
-                </div>
-                <div class="loading-sub-text">正在为您生成答案，请稍候...</div>
-              </div>
+              项目一
+            </button>
+            <button
+              class="px-4 py-2 text-xs font-medium text-muted-foreground hover:text-foreground"
+            >
+              项目二
+            </button>
+          </div>
+          <button
+            class="w-6 h-6 rounded-md bg-white/40 border border-white/40 flex items-center justify-center text-xs"
+            @click="newConversation"
+          >
+            +
+          </button>
+        </div>
 
-              <!-- 机器人头像 -->
-              <template v-else>
-                <el-avatar :size="36" :class="['avatar', msg.role]">
-                  <el-icon v-if="msg.role === 'user'"><User /></el-icon>
-                  <el-icon v-else><ChatDotRound /></el-icon>
-                </el-avatar>
-
-                <!-- 消息气泡 -->
-                <!-- ✅ 修改：让气泡整体更宽 -->
-                <div
-                  class="bubble-float"
-                  :class="{
-                    'image-bubble': msg.isImage,
-                    'wide-bubble': msg.isHeatResult || msg.isStrengthResult, // ✅ 新增：让防隔热和强度计算气泡更宽
-                  }"
+        <div
+          class="flex-1 flex flex-col min-h-0 bg-white/30 backdrop-blur-xl rounded-3xl border border-white/40 shadow-lg shadow-black/5 overflow-hidden"
+        >
+          <div
+            class="flex items-center justify-between px-4 py-3 border-b border-white/40"
+          >
+            <div>
+              <p class="text-xs font-semibold text-muted-foreground">
+                历史会话
+              </p>
+              <p class="text-[10px] text-muted-foreground/70">
+                {{ historyList.length }} 条记录
+              </p>
+            </div>
+            <div class="flex items-center gap-1">
+              <el-tooltip content="刷新第一页" effect="light">
+                <button
+                  class="text-xs text-muted-foreground/70 hover:text-primary"
                 >
-                  <!-- 普通文本消息 -->
-                  <div
-                    class="content"
-                    v-if="
-                      !msg.isImage &&
-                        !msg.isSearchBox &&
-                        !msg.isUploadBox &&
-                        !msg.isFileUploadBox &&
-                        !msg.isHeatResult &&
-                        !msg.isStrengthResult
-                    "
-                  >
-                    {{ msg.content }}
-                  </div>
+                  ↺
+                </button>
+              </el-tooltip>
+              <el-tooltip
+                v-if="historyList.length"
+                content="清空历史"
+                effect="light"
+              >
+                <button
+                  class="text-xs text-muted-foreground/70 hover:text-destructive"
+                  @click="deleteAllHistory"
+                >
+                  清空
+                </button>
+              </el-tooltip>
+            </div>
+          </div>
+          <div class="flex-1 overflow-y-auto scrollbar-custom p-3 space-y-2">
+            <div
+              v-for="item in historyList"
+              :key="item.id"
+              class="flex items-start gap-2 py-2 px-3 rounded-2xl border border-transparent hover:border-white/60 transition-all duration-300 bg-white/50"
+              :class="{ 'shadow-sm': hoveredId === item.id }"
+              @mouseenter="hoveredId = item.id"
+              @mouseleave="hoveredId = null"
+              @click="loadFromHistory(item.id)"
+            >
+              <div class="flex-1 min-w-0">
+                <p class="text-xs font-semibold text-foreground truncate mb-1">
+                  {{ item.title }}
+                </p>
+                <p class="text-[11px] text-muted-foreground">
+                  {{ formatTime(item.timestamp) }}
+                </p>
+              </div>
+              <button
+                v-if="hoveredId === item.id"
+                class="text-[11px] text-muted-foreground hover:text-destructive"
+                @click.stop="deleteHistory(item.id)"
+              >
+                删除
+              </button>
+            </div>
+            <div
+              v-if="historyList.length === 0"
+              class="text-center text-xs text-muted-foreground py-6"
+            >
+              暂无历史对话
+            </div>
+          </div>
+        </div>
+      </div>
 
-                  <!-- 知识库文档链接 -->
-                  <div
-                    v-if="msg.sourceFiles && msg.sourceFiles.length > 0"
-                    class="source-files"
-                  >
-                    <div class="source-files-title">📎 相关文档：</div>
+      <div class="p-4 border-t border-white/30 relative z-10">
+        <div
+          class="relative bg-white/60 backdrop-blur-xl rounded-xl p-4 border border-white/70 overflow-hidden shadow-glass"
+        >
+          <div
+            class="absolute -top-10 -right-10 w-32 h-32 bg-blue-400/10 rounded-full blur-2xl"
+          ></div>
+          <div class="relative flex items-center gap-3">
+            <div
+              class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white text-sm font-semibold"
+            >
+              {{ userInitials }}
+            </div>
+            <div class="flex-1 min-w-0">
+              <p class="text-sm font-semibold text-foreground truncate mb-0.5">
+                {{ username || '未登录' }}
+              </p>
+              <p class="text-xs text-muted-foreground truncate">
+                软件工程部 · {{ currentDepartmentName }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 min-w-0 flex relative z-10">
+      <div
+        class="chat-main flex-1 min-w-0 flex flex-col transition-all duration-300"
+      >
+        <header
+          class="h-16 border-b border-border/30 bg-[hsl(220_25%_99%)]/80 backdrop-blur-xl shadow-sm flex items-center justify-between px-6 shrink-0"
+        >
+          <div class="flex items-center gap-3">
+            <button
+              class="h-10 w-10 rounded-xl grid place-items-center bg-white/70 border border-border/40"
+              @click="isSidebarCollapsed = !isSidebarCollapsed"
+            >
+              <el-icon><Menu /></el-icon>
+            </button>
+            <div class="flex items-center gap-3">
+              <div
+                class="w-10 h-10 rounded-2xl bg-gradient-primary flex items-center justify-center overflow-hidden p-1.5 shadow-liquid"
+              >
+                <img
+                  :src="logo"
+                  alt="Logo"
+                  class="h-full w-full object-contain"
+                />
+              </div>
+              <div>
+                <p
+                  class="text-base font-bold bg-gradient-primary bg-clip-text text-transparent"
+                >
+                  凌能助手
+                </p>
+                <p class="text-xs text-muted-foreground">
+                  智能体交互 · {{ currentDepartmentName }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <div
+              class="flex items-center gap-2 h-9 px-3 rounded-xl bg-white/70 border border-border/40 text-xs font-medium"
+            >
+              <span>知识库</span>
+              <el-switch v-model="useKnowledgeBase" size="small" />
+            </div>
+            <button
+              class="h-9 px-3 rounded-xl bg-[hsl(220_25%_99%)] border border-border/40 text-sm flex items-center gap-2 shadow-sm hover:shadow-md transition"
+              @click="newConversation"
+            >
+              <el-icon><Plus /></el-icon>
+              新建会话
+            </button>
+          <el-dropdown trigger="click">
+            <div
+              class="h-10 w-10 rounded-full bg-gradient-primary text-white grid place-items-center font-semibold cursor-pointer select-none"
+            >
+              {{ userInitials }}
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="goSettings">系统设置</el-dropdown-item>
+                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          </div>
+        </header>
+
+        <div class="flex-1 flex flex-col min-h-0 relative">
+          <div
+            ref="messagesScrollArea"
+            class="flex-1 overflow-y-auto px-8 pt-10 pb-40"
+            style="scrollbar-width: none; -ms-overflow-style: none;"
+          >
+            <div class="max-w-5xl mx-auto space-y-6">
+              <div
+                v-if="messages.length === 0"
+                class="flex items-center justify-center py-16"
+              >
+                <div class="text-center space-y-6 max-w-2xl">
+                  <div class="relative w-24 h-24 mx-auto">
                     <div
-                      v-for="(file, fileIdx) in msg.sourceFiles"
-                      :key="fileIdx"
-                      class="source-file-item"
+                      class="absolute inset-0 bg-gradient-primary rounded-3xl blur-2xl opacity-40"
+                    ></div>
+                    <div
+                      class="relative w-24 h-24 rounded-3xl bg-gradient-primary flex items-center justify-center shadow-liquid overflow-hidden p-3"
                     >
-                      <el-link
-                        :href="file.url"
-                        target="_blank"
-                        type="primary"
-                        :underline="false"
-                        @click="handleFileLinkClick(file)"
+                      <img
+                        :src="logo"
+                        alt="Logo"
+                        class="h-full w-full object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div class="space-y-3">
+                    <p class="text-2xl font-bold">欢迎使用凌能AI智能助手</p>
+                    <p class="text-sm text-muted-foreground leading-relaxed">
+                      专注航天工程：结构建模、热防护分析、控制系统验证等。可直接输入需求或选择下方引导问题。
+                    </p>
+                  </div>
+                  <div
+                    class="pt-4 grid grid-cols-1 md:grid-cols-2 gap-5 text-left"
+                  >
+                    <div
+                      v-for="prompt in guidePrompts"
+                      :key="prompt.id"
+                      class="p-5 rounded-xl bg-white/85 border border-white/70 shadow-card hover:shadow-md transition"
+                    >
+                      <div class="flex items-start justify-between gap-2">
+                        <p
+                          class="text-[13px] font-semibold text-foreground leading-snug whitespace-nowrap truncate flex-1"
+                        >
+                          {{ prompt.question }}
+                        </p>
+                        <button
+                          type="button"
+                          class="text-[11px] font-medium text-primary hover:text-primary/80 whitespace-nowrap"
+                          @click="fillQuestion(prompt.question)"
+                        >
+                          试一试
+                        </button>
+                      </div>
+                      <p
+                        class="guide-answer text-xs text-muted-foreground mt-3"
                       >
-                        <el-icon><Document /></el-icon>
-                        {{ file.fileName }}
-                      </el-link>
+                        {{ prompt.answer }}
+                      </p>
                     </div>
                   </div>
 
-                  <!-- 搜索框消息 -->
-                  <!-- ✅ 文档检索模式（加大版） -->
-                  <!-- 搜索框消息 -->
-                  <div
-                    v-if="msg.isSearchBox"
-                    class="search-box-container large-search-box"
-                  >
-                    <div class="search-header">🔍 文档检索模式</div>
-                    <el-input
-                      v-model="msg.searchKeyword"
-                      placeholder="输入关键词搜索文档..."
-                      class="search-input"
-                      @keyup.enter="performSearch(msg)"
-                      clearable
-                    >
-                      <template #suffix>
-                        <el-icon
-                          class="search-icon"
-                          @click="performSearch(msg)"
+                  <div class="pt-6 w-full space-y-3">
+                    <div v-if="showAttachmentList" class="attachment-preview">
+                      <div class="preview-header">
+                        <span>
+                          待上传文件（{{ attachmentFiles.length }}个）
+                        </span>
+                        <el-button
+                          link
+                          type="danger"
+                          size="small"
+                          @click="clearAttachments"
                         >
-                          <Search />
-                        </el-icon>
-                      </template>
-                    </el-input>
-
-                    <!-- 搜索结果表格 -->
-                    <div
-                      class="search-results"
-                      v-if="msg.searchResults && msg.searchResults.length > 0"
-                    >
-                      <!-- ✅ 修改：前9个核心字段的表头 -->
-                      <div class="search-header-row">
-                        <span class="header-item">产品图号及规格</span>
-                        <span class="header-item">产品名称</span>
-                        <span class="header-item">个数</span>
-                        <span class="header-item">示意图</span>
-                        <span class="header-item">材料牌号</span>
-                        <span class="header-item">抗拉强度</span>
-                        <span class="header-item">热处理/表面处理</span>
-                        <span class="header-item">工况</span>
-                        <span class="header-item">仿真强度</span>
-                        <span class="header-item">操作</span>
+                          清空
+                        </el-button>
                       </div>
-
-                      <div
-                        v-for="doc in msg.searchResults"
-                        :key="doc.id"
-                        class="result-item"
-                      >
-                        <!-- 摘要视图 -->
-                        <div class="result-summary" v-if="!doc.showDetail">
-                          <span
-                            class="summary-item"
-                            :title="doc.productCodeSpec"
-                          >
-                            {{ doc.productCodeSpec }}
-                          </span>
-                          <span class="summary-item" :title="doc.productName">
-                            {{ doc.productName }}
-                          </span>
-                          <span class="summary-item">{{ doc.quantity }}</span>
-                          <img
-                            v-if="doc.schematicDiagram"
-                            :src="doc.schematicDiagram"
-                            class="thumb-img"
-                            @click.stop="
-                              openEnlargedImage(doc.schematicDiagram)
-                            "
-                          />
-                          <span v-else class="summary-item">-</span>
-                          <span class="summary-item" :title="doc.materialGrade">
-                            {{ doc.materialGrade }}
-                          </span>
-                          <span class="summary-item">
-                            {{ doc.tensileStrength }}
-                          </span>
-                          <span class="summary-item">
-                            {{ doc.heatTreatmentSurface }}
-                          </span>
-                          <span class="summary-item">
-                            {{ doc.workingCondition }}
-                          </span>
-                          <span class="summary-item">
-                            {{ doc.simulationStrength }}
-                          </span>
+                      <div class="preview-list horizontal-list">
+                        <div
+                          v-for="(file, idx) in attachmentFiles"
+                          :key="idx"
+                          class="preview-item horizontal-item"
+                        >
+                          <div class="file-icon">
+                            <el-icon v-if="file.type.includes('image')">
+                              <Picture />
+                            </el-icon>
+                            <el-icon v-else><Document /></el-icon>
+                          </div>
+                          <div class="file-info">
+                            <div class="file-name" :title="file.name">
+                              {{ file.name }}
+                            </div>
+                            <div class="file-size">
+                              {{ formatFileSize(file.size) }}
+                            </div>
+                          </div>
                           <el-button
-                            class="toggle-detail-btn"
-                            size="small"
-                            type="primary"
-                            plain
-                            @click.stop="showDetailDoc(doc, msg)"
-                          >
-                            <el-icon><ArrowDown /></el-icon>
-                            展开详情
-                          </el-button>
-                        </div>
-
-                        <!-- 详情视图 -->
-                        <div class="result-detail" v-if="doc.showDetail">
-                          <el-button
-                            class="close-detail-btn"
-                            size="small"
+                            link
                             type="danger"
-                            plain
-                            circle
-                            @click.stop="hideDetailDoc(doc)"
-                            title="收起详情"
+                            size="small"
+                            @click="removeAttachment(idx)"
+                            class="remove-btn"
                           >
                             <el-icon><Close /></el-icon>
                           </el-button>
-
-                          <div class="detail-content">
-                            <div v-if="doc.loadingDetail" class="loading">
-                              加载详细数据中...
-                            </div>
-                            <div v-else>
-                              <!-- ✅ 修改：展示所有17个字段 -->
-                              <div class="detail-actions">
-                                <el-button
-                                  type="primary"
-                                  size="small"
-                                  :loading="doc.downloading"
-                                  @click.stop="downloadFile(doc)"
-                                >
-                                  <el-icon><Download /></el-icon>
-                                  下载模型原文件
-                                </el-button>
-                              </div>
-
-                              <p>
-                                <strong>产品图号及规格:</strong>
-                                {{ doc.productCodeSpec }}
-                              </p>
-                              <p>
-                                <strong>产品名称:</strong>
-                                {{ doc.productName }}
-                              </p>
-                              <p>
-                                <strong>个数:</strong>
-                                {{ doc.quantity }}
-                              </p>
-                              <p><strong>示意图:</strong></p>
-                              <img
-                                v-if="doc.schematicDiagram"
-                                :src="doc.schematicDiagram"
-                                class="detail-img"
-                                @click.stop="
-                                  openEnlargedImage(doc.schematicDiagram)
-                                "
-                              />
-                              <p v-else>暂无示意图</p>
-
-                              <p>
-                                <strong>材料牌号:</strong>
-                                {{ doc.materialGrade }}
-                              </p>
-                              <p>
-                                <strong>抗拉强度:</strong>
-                                {{ doc.tensileStrength }}
-                              </p>
-                              <p>
-                                <strong>热处理/表面处理:</strong>
-                                {{ doc.heatTreatmentSurface }}
-                              </p>
-                              <p>
-                                <strong>工况:</strong>
-                                {{ doc.workingCondition }}
-                              </p>
-                              <p>
-                                <strong>仿真强度:</strong>
-                                {{ doc.simulationStrength }}
-                              </p>
-
-                              <p><strong>强度仿真云图:</strong></p>
-                              <img
-                                v-if="doc.strengthSimulationImage"
-                                :src="doc.strengthSimulationImage"
-                                class="detail-img"
-                                @click.stop="
-                                  openEnlargedImage(doc.strengthSimulationImage)
-                                "
-                              />
-                              <p v-else>暂无云图</p>
-
-                              <p>
-                                <strong>制造工艺:</strong>
-                                {{ doc.manufacturingProcess || '-' }}
-                              </p>
-                              <p>
-                                <strong>DX(mm):</strong>
-                                {{ doc.dimensionDx || '-' }}
-                              </p>
-                              <p>
-                                <strong>DY(mm):</strong>
-                                {{ doc.dimensionDy || '-' }}
-                              </p>
-                              <p>
-                                <strong>DZ(mm):</strong>
-                                {{ doc.dimensionDz || '-' }}
-                              </p>
-                              <p>
-                                <strong>质量(kg):</strong>
-                                {{ doc.weightKg || '-' }}
-                              </p>
-                              <p>
-                                <strong>成本(元):</strong>
-                                {{ doc.cost || '-' }}
-                              </p>
-                              <p>
-                                <strong>备注:</strong>
-                                {{ doc.remarks || '-' }}
-                              </p>
-
-                              <p class="meta-info" v-if="doc.createdAt">
-                                创建时间: {{ formatTime(doc.createdAt) }}
-                              </p>
-                            </div>
-                          </div>
                         </div>
                       </div>
-
-                      <div class="pagination" v-if="msg.totalPages > 1">
-                        <button
-                          @click="changePage(msg, -1)"
-                          :disabled="msg.page === 1"
-                        >
-                          上一页
-                        </button>
-                        <span>{{ msg.page }} / {{ msg.totalPages }}</span>
-                        <button
-                          @click="changePage(msg, 1)"
-                          :disabled="msg.page === msg.totalPages"
-                        >
-                          下一页
-                        </button>
-                      </div>
                     </div>
 
-                    <div v-if="msg.searchLoading" class="loading">
-                      搜索中...
-                    </div>
-                    <div v-if="msg.searchError" class="error">
-                      {{ msg.searchError }}
-                    </div>
-                  </div>
-
-                  <!-- 将两个完整的 isHeatResult 和 isStrengthResult 代码块替换为以下内容 -->
-
-                  <!-- ✅ 防隔热处理结果（完整版，含终止功能） -->
-                  <div v-if="msg.isHeatResult" class="result-box-container">
-                    <div class="result-header">
-                      📁 防隔热信息处理结果
-                      <!-- ✅ 终止按钮（仅在处理中显示） -->
-                      <el-button
-                        v-if="
-                          msg.progress &&
-                            msg.progress.visible &&
-                            msg.uploadStatus === 'uploading'
-                        "
-                        class="terminate-btn"
-                        size="small"
-                        type="danger"
-                        plain
-                        circle
-                        @click.stop="terminateProcess(msg, idx)"
-                        title="终止流程"
-                      >
-                        <el-icon><Close /></el-icon>
-                      </el-button>
-                    </div>
-
-                    <div class="result-content">
-                      <!-- ✅ 进度条区域 -->
-                      <div
-                        v-if="msg.progress && msg.progress.visible"
-                        class="inline-progress"
-                      >
-                        <el-progress
-                          :percentage="msg.progress.percentage"
-                          :status="msg.progress.status"
-                          stroke-width="12"
-                          striped
-                          striped-flow
-                          :duration="20"
+                    <form
+                      @submit.prevent="sendMessage"
+                      class="chat-composer-card"
+                      :class="{ 'is-capsule': isSingleLine }"
+                    >
+                      <div class="composer-inner">
+                        <div class="composer-actions">
+                          <el-button
+                            circle
+                            plain
+                            class="attach-btn"
+                            title="上传附件"
+                            @click="triggerAttachmentInput"
+                            :disabled="loading"
+                          >
+                            <el-icon><Paperclip /></el-icon>
+                          </el-button>
+                        </div>
+                        <el-input
+                          v-model="inputText"
+                          type="textarea"
+                          :autosize="{ minRows: 1, maxRows: 6 }"
+                          resize="none"
+                          :placeholder="
+                            isImageSearchMode
+                              ? '输入关键词搜索图片（实时搜索）...'
+                              : '请输入工程参数、需求或问题...'
+                          "
+                          class="composer-textarea"
+                          @keydown="handleKeydown"
+                          :disabled="loading"
                         />
-                        <p class="progress-text">{{ msg.progress.text }}</p>
-
-                        <!-- ✅ 滚动文字窗口（仅在正常处理时显示） -->
-                        <div
-                          v-if="msg.uploadStatus === 'uploading'"
-                          class="scrolling-text-container"
-                        >
-                          <div class="scrolling-text-header">
-                            <el-icon class="pulse-icon"><Operation /></el-icon>
-                            <span>
-                              {{ scrollingHeaders[msg.progress.currentStep] }}
-                            </span>
-                          </div>
-                          <div class="scrolling-text-window">
-                            <div
-                              class="scrolling-text-list"
-                              :style="{
-                                animation: `scrollText${msg.progress.currentStep} 3s ease-in-out infinite`,
-                              }"
-                            >
-                              <div
-                                v-for="(text, taskIdx) in scrollingTextsHeat[
-                                  msg.progress.currentStep
-                                ]"
-                                :key="taskIdx"
-                                class="scrolling-text-item"
-                              >
-                                {{ text }}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-
-                        <!-- ✅ 步骤显示 -->
-                        <!-- ✅ 修改图标显示逻辑（增加terminated状态） -->
-                        <div class="progress-steps">
-                          <div
-                            v-for="(step, stepIdx) in msg.progress.steps"
-                            :key="stepIdx"
-                            class="step-item"
-                            :class="{
-                              active: stepIdx === msg.progress.currentStep,
-                              completed:
-                                msg.progress.stepStatus?.[stepIdx] ===
-                                'success',
-                              terminated:
-                                msg.progress.stepStatus?.[stepIdx] ===
-                                'terminated', // ✅ 新增类名
-                            }"
+                        <div class="composer-actions">
+                          <el-button
+                            type="primary"
+                            circle
+                            class="send-btn-premium"
+                            :loading="loading"
+                            :disabled="!inputText.trim() || loading"
+                            native-type="submit"
                           >
-                            <!-- ✅ 成功图标 -->
-                            <el-icon
-                              v-if="
-                                msg.progress.stepStatus?.[stepIdx] === 'success'
-                              "
-                            >
-                              <Check />
-                            </el-icon>
-                            <!-- ✅ 加载中图标（转圈） -->
-                            <el-icon
-                              v-else-if="
-                                msg.progress.stepStatus?.[stepIdx] === 'loading'
-                              "
-                              class="is-loading"
-                            >
-                              <Loading />
-                            </el-icon>
-                            <!-- ✅ 终止图标（红色叉） -->
-                            <el-icon
-                              v-else-if="
-                                msg.progress.stepStatus?.[stepIdx] ===
-                                  'terminated'
-                              "
-                            >
-                              <CircleClose />
-                            </el-icon>
-                            <!-- ✅ 等待图标 -->
-                            <el-icon v-else>
-                              <Clock />
-                            </el-icon>
-                            <span>{{ step }}</span>
-                          </div>
+                            <el-icon v-if="!loading"><Position /></el-icon>
+                          </el-button>
                         </div>
                       </div>
-
-                      <!-- ✅ 被终止的状态显示 -->
-                      <div
-                        v-if="msg.uploadStatus === 'terminated'"
-                        class="upload-status terminated"
-                      >
-                        <el-icon><CircleClose /></el-icon>
-                        <span style="color: #e6a23c; font-weight: 500;">
-                          ⏹️ 处理已终止
-                        </span>
-                        <p
-                          style="margin-top: 8px; font-size: 12px; color: #909399;"
-                        >
-                          {{ msg.errorMessage }}
-                        </p>
-                      </div>
-
-                      <!-- ✅ 成功状态 -->
-                      <div v-if="msg.uploadStatus === 'success'">
-                        <el-icon><SuccessFilled /></el-icon>
-                        <span style="font-weight: 500; color: #67c23a;">
-                          ✅ 文件已处理成功！
-                        </span>
-                        <details style="margin-top: 10px;">
-                          <summary
-                            style="cursor: pointer; color: #909399; font-size: 13px;"
-                          >
-                            查看原始路径
-                          </summary>
-                          <p
-                            style="font-size: 12px; word-break: break-all; color: #666; margin-top: 8px;"
-                          >
-                            {{ msg.originalData?.minioUrl || '路径未保存' }}
-                          </p>
-                        </details>
-                        <div
-                          class="minio-info"
-                          style="margin-top: 15px; background: #e8f5e9; border: 1px solid #4caf50; padding: 12px; border-radius: 6px;"
-                        >
-                          <p
-                            style="margin: 0 0 8px 0; font-size: 14px; color: #303133;"
-                          >
-                            <strong>
-                              📥 结果文档已生成，点击下载按钮即可下载本地 :
-                            </strong>
-                          </p>
-                          <a
-                            :href="msg.convertedUrl"
-                            target="_blank"
-                            style="color: #4caf50; font-weight: bold; word-break: break-all; font-size: 13px;"
-                          >
-                            {{ msg.convertedUrl }}
-                          </a>
-                          <div style="margin-top: 12px;">
-                            <el-button
-                              type="success"
-                              size="small"
-                              @click="copyToClipboard(msg.convertedUrl)"
-                            >
-                              <el-icon><DocumentCopy /></el-icon>
-                              复制链接
-                            </el-button>
-                            <el-button
-                              type="warning"
-                              size="small"
-                              @click="
-                                downloadConvertedFile(
-                                  msg.convertedUrl,
-                                  '防隔热文件'
-                                )
-                              "
-                            >
-                              <el-icon><Download /></el-icon>
-                              直接下载
-                            </el-button>
-                          </div>
-                        </div>
-                      </div>
-
-                      <!-- ✅ 错误状态 -->
-                      <div
-                        v-if="msg.uploadStatus === 'error'"
-                        class="upload-status error"
-                        style="margin-top: 15px;"
-                      >
-                        <el-icon><CircleCloseFilled /></el-icon>
-                        <span style="color: #f56c6c; font-weight: 500;">
-                          ❌ 处理失败: {{ msg.errorMessage }}
-                        </span>
-                        <p
-                          style="margin-top: 8px; font-size: 12px; color: #909399;"
-                        >
-                          请检查文件格式或联系管理员
-                        </p>
-                      </div>
-                    </div>
+                    </form>
                   </div>
+                </div>
+              </div>
 
-                  <!-- ✅ 强度计算处理结果（完整版，含终止功能） -->
-                  <div v-if="msg.isStrengthResult" class="result-box-container">
-                    <div class="result-header">
-                      📄 强度计算处理结果
-                      <!-- ✅ 终止按钮（仅在处理中显示） -->
-                      <el-button
-                        v-if="
-                          msg.progress &&
-                            msg.progress.visible &&
-                            msg.uploadStatus === 'uploading'
-                        "
-                        class="terminate-btn"
-                        size="small"
-                        type="danger"
-                        plain
-                        circle
-                        @click.stop="terminateProcess(msg, idx)"
-                        title="终止流程"
-                      >
-                        <el-icon><Close /></el-icon>
-                      </el-button>
-                    </div>
-
-                    <div class="result-content">
-                      <!-- ✅ 进度条区域 -->
-                      <div
-                        v-if="msg.progress && msg.progress.visible"
-                        class="inline-progress"
-                      >
-                        <el-progress
-                          :percentage="msg.progress.percentage"
-                          :status="msg.progress.status"
-                          stroke-width="12"
-                          striped
-                          striped-flow
-                          :duration="20"
-                        />
-                        <p class="progress-text">{{ msg.progress.text }}</p>
-
-                        <!-- ✅ 滚动文字窗口（仅在正常处理时显示） -->
-                        <div
-                          v-if="msg.uploadStatus === 'uploading'"
-                          class="scrolling-text-container"
-                        >
-                          <div class="scrolling-text-header">
-                            <el-icon class="pulse-icon"><Operation /></el-icon>
-                            <span>
-                              {{ scrollingHeaders[msg.progress.currentStep] }}
-                            </span>
-                          </div>
-                          <div class="scrolling-text-window">
-                            <div
-                              class="scrolling-text-list"
-                              :style="{
-                                animation: `scrollText${msg.progress.currentStep} 3s ease-in-out infinite`,
-                              }"
-                            >
-                              <div
-                                v-for="(text,
-                                taskIdx) in scrollingTextsStrength[
-                                  msg.progress.currentStep
-                                ]"
-                                :key="taskIdx"
-                                class="scrolling-text-item"
-                              >
-                                {{ text }}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-
-                        <!-- ✅ 步骤显示 -->
-                        <div class="progress-steps">
-                          <div
-                            v-for="(step, stepIdx) in msg.progress.steps"
-                            :key="stepIdx"
-                            class="step-item"
-                            :class="{
-                              active: stepIdx === msg.progress.currentStep,
-                              completed:
-                                msg.progress.stepStatus?.[stepIdx] ===
-                                'success',
-                            }"
-                          >
-                            <el-icon
-                              v-if="
-                                msg.progress.stepStatus?.[stepIdx] === 'success'
-                              "
-                            >
-                              <Check />
-                            </el-icon>
-                            <el-icon
-                              v-else-if="
-                                msg.progress.stepStatus?.[stepIdx] === 'loading'
-                              "
-                              class="is-loading"
-                            >
-                              <Loading />
-                            </el-icon>
-                            <el-icon v-else>
-                              <Clock />
-                            </el-icon>
-                            <span>{{ step }}</span>
-                          </div>
-                        </div>
-                      </div>
-
-                      <!-- ✅ 被终止的状态显示 -->
-                      <div
-                        v-if="msg.uploadStatus === 'terminated'"
-                        class="upload-status terminated"
-                      >
-                        <el-icon><CircleClose /></el-icon>
-                        <span style="color: #e6a23c; font-weight: 500;">
-                          ⏹️ 处理已终止
-                        </span>
-                        <p
-                          style="margin-top: 8px; font-size: 12px; color: #909399;"
-                        >
-                          {{ msg.errorMessage }}
-                        </p>
-                      </div>
-
-                      <!-- ✅ 成功状态 -->
-                      <div v-if="msg.uploadStatus === 'success'">
-                        <el-icon><SuccessFilled /></el-icon>
-                        <span style="font-weight: 500; color: #67c23a;">
-                          ✅ 文件已处理成功！
-                        </span>
-                        <details style="margin-top: 10px;">
-                          <summary
-                            style="cursor: pointer; color: #909399; font-size: 13px;"
-                          >
-                            查看原始路径
-                          </summary>
-                          <p
-                            style="font-size: 12px; word-break: break-all; color: #666; margin-top: 8px;"
-                          >
-                            {{ msg.originalData?.minioUrl || '路径未保存' }}
-                          </p>
-                        </details>
-                        <div
-                          class="minio-info"
-                          style="margin-top: 15px; background: #e8f5e9; border: 1px solid #4caf50; padding: 12px; border-radius: 6px;"
-                        >
-                          <p
-                            style="margin: 0 0 8px 0; font-size: 14px; color: #303133;"
-                          >
-                            <strong>
-                              📥 计算结果文档已生成！点击下载按钮即可下载至本地:
-                            </strong>
-                          </p>
-                          <a
-                            :href="msg.convertedUrl"
-                            target="_blank"
-                            style="color: #4caf50; font-weight: bold; word-break: break-all; font-size: 13px;"
-                          >
-                            {{ msg.convertedUrl }}
-                          </a>
-                          <div style="margin-top: 12px;">
-                            <el-button
-                              type="success"
-                              size="small"
-                              @click="copyToClipboard(msg.convertedUrl)"
-                            >
-                              <el-icon><DocumentCopy /></el-icon>
-                              复制链接
-                            </el-button>
-                            <el-button
-                              type="warning"
-                              size="small"
-                              @click="
-                                downloadConvertedFile(
-                                  msg.convertedUrl,
-                                  '强度计算文件'
-                                )
-                              "
-                            >
-                              <el-icon><Download /></el-icon>
-                              直接下载
-                            </el-button>
-                          </div>
-                        </div>
-                      </div>
-
-                      <!-- ✅ 错误状态 -->
-                      <div
-                        v-if="msg.uploadStatus === 'error'"
-                        class="upload-status error"
-                        style="margin-top: 15px;"
-                      >
-                        <el-icon><CircleCloseFilled /></el-icon>
-                        <span style="color: #f56c6c; font-weight: 500;">
-                          ❌ 处理失败: {{ msg.errorMessage }}
-                        </span>
-                        <p
-                          style="margin-top: 8px; font-size: 12px; color: #909399;"
-                        >
-                          请检查文件格式或联系管理员
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="time">{{ formatTime(msg.time) }}</div>
-
-                  <!-- 快捷问题 -->
+              <TransitionGroup name="fade-up" tag="div" class="space-y-6">
+                <div
+                  v-for="(msg, idx) in messages"
+                  :key="idx"
+                  :id="getMessageDomId(msg)"
+                  class="space-y-3"
+                >
                   <div
-                    v-if="
-                      idx === 0 &&
-                        msg.role === 'assistant' &&
-                        !isImageSearchMode
-                    "
-                    class="quick-questions-vertical"
+                    v-if="msg.isLoadingMessage"
+                    class="rounded-2xl bg-white/70 backdrop-blur-xl border border-white/60 p-6 shadow-glass animate-fade-in"
                   >
-                    <div class="quick-questions-content">
-                      <div class="quick-title">💡 试试问我这些问题：</div>
-                      <div class="quick-list">
-                        <el-button
-                          v-for="(question, qIdx) in quickQuestions"
-                          :key="qIdx"
-                          size="small"
-                          type="info"
-                          plain
-                          @click="fillQuestion(question)"
-                          class="quick-btn-row"
+                    <el-progress
+                      :percentage="msg.progressPercentage"
+                      :status="msg.loadingStatus"
+                      stroke-width="18"
+                      striped
+                      striped-flow
+                      :duration="40"
+                    />
+                    <div
+                      class="flex items-center gap-2 mt-4 text-sm text-muted-foreground"
+                    >
+                      <el-icon><Loading /></el-icon>
+                      <span>{{ msg.loadingTexts[msg.currentTextIndex] }}</span>
+                    </div>
+                  </div>
+                  <div
+                    v-else
+                    class="flex gap-5 py-5 animate-fade-in"
+                    :class="{
+                      'flex-row-reverse text-right': msg.role === 'user',
+                    }"
+                  >
+                    <div
+                      class="h-11 w-11 rounded-full grid place-items-center font-semibold shadow-glow"
+                      :class="
+                        msg.role === 'user'
+                          ? 'bg-gradient-primary text-white'
+                          : 'bg-[hsl(220_25%_99%)] text-primary border border-border'
+                      "
+                    >
+                      {{ msg.role === 'user' ? '您' : 'AI' }}
+                    </div>
+                    <div
+                      class="flex-1 space-y-4"
+                      :class="{
+                        'flex flex-col items-end': msg.role === 'user',
+                      }"
+                    >
+                      <div
+                        class="flex items-center gap-2 text-xs text-muted-foreground"
+                        :class="{ 'flex-row-reverse': msg.role === 'user' }"
+                      >
+                        <span
+                          class="text-sm font-semibold"
+                          :class="
+                            msg.role === 'user'
+                              ? 'text-primary'
+                              : 'text-foreground'
+                          "
                         >
-                          <el-icon><EditPen /></el-icon>
-                          <span>{{ question }}</span>
-                        </el-button>
+                          {{ msg.role === 'user' ? '您' : '凌能助手' }}
+                        </span>
+                        <span
+                          v-if="msg.role !== 'user'"
+                          class="px-2 py-0.5 rounded-full bg-primary/10 text-primary"
+                        >
+                          在线
+                        </span>
+                        <span>{{ formatTime(msg.time) }}</span>
+                      </div>
+
+                      <div
+                        v-if="
+                          msg.uploadStatus === 'success' &&
+                            (msg.isHeatResult || msg.isStrengthResult)
+                        "
+                      >
+                        <div class="report-card">
+                          <div class="report-card__top">
+                            <div class="report-card__icon">
+                              <el-icon><SuccessFilled /></el-icon>
+                            </div>
+                            <div class="report-card__title">
+                              <p class="label">
+                                {{
+                                  msg.isStrengthResult
+                                    ? '强度计算处理结果'
+                                    : '防隔热处理结果'
+                                }}
+                              </p>
+                              <p class="sub">
+                                已完成 · {{ formatTime(msg.timestamp) || '刚刚' }}
+                              </p>
+                            </div>
+                            <el-tag type="success" effect="dark" size="small">
+                              成功
+                            </el-tag>
+                          </div>
+
+                          <div class="report-card__body">
+                            <div class="report-row">
+                              <span class="row-label">输出文件</span>
+                              <a
+                                :href="msg.convertedUrl"
+                                target="_blank"
+                                class="row-link"
+                              >
+                                {{ getFileNameFromUrl(msg.convertedUrl) }}
+                              </a>
+                            </div>
+                            <div class="report-row">
+                              <span class="row-label">原始路径</span>
+                              <span class="row-mono">
+                                {{ msg.originalData?.minioUrl || '路径未保存' }}
+                              </span>
+                            </div>
+                          </div>
+
+                          <div class="report-card__actions">
+                            <el-button
+                              type="primary"
+                              size="small"
+                              plain
+                              @click="copyToClipboard(msg.convertedUrl)"
+                            >
+                              <el-icon><DocumentCopy /></el-icon>
+                              复制链接
+                            </el-button>
+                            <el-button
+                              type="success"
+                              size="small"
+                              @click="
+                                downloadConvertedFile(
+                                  msg.convertedUrl,
+                                  msg.isStrengthResult ? '强度计算文件' : '防隔热文件'
+                                )
+                              "
+                            >
+                              <el-icon><Download /></el-icon>
+                              立即下载
+                            </el-button>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        v-else
+                        class="rounded-2xl px-7 py-5 max-w-3xl relative overflow-hidden transition-shadow duration-500"
+                        :class="
+                          msg.role === 'user'
+                            ? 'bg-gradient-primary text-white shadow-neumorphic text-left'
+                            : 'bg-white/70 backdrop-blur-xl border border-white/60 shadow-glass text-left'
+                        "
+                      >
+                        <template v-if="msg.role !== 'user'">
+                          <div
+                            class="absolute -top-8 -left-8 w-32 h-32 bg-white/30 rounded-full blur-3xl opacity-60"
+                          ></div>
+                          <div
+                            class="absolute -top-6 -right-6 w-24 h-24 bg-white/20 rounded-full blur-2xl opacity-50"
+                          ></div>
+                          <div
+                            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-white/20 rounded-full blur-3xl opacity-30"
+                          ></div>
+                        </template>
+                        <div class="relative space-y-4">
+                          <p
+                            class="text-sm leading-relaxed"
+                            v-if="
+                              !msg.isImage &&
+                                !msg.isSearchBox &&
+                                !msg.isUploadBox &&
+                                !msg.isFileUploadBox &&
+                                !msg.isHeatResult &&
+                                !msg.isStrengthResult
+                            "
+                            :class="
+                              msg.role === 'user'
+                                ? 'text-white'
+                                : 'text-foreground/90'
+                            "
+                          >
+                            {{ msg.content }}
+                          </p>
+
+                          <div
+                            v-if="msg.sourceFiles && msg.sourceFiles.length"
+                            class="source-files-card"
+                          >
+                            <p
+                              class="text-xs font-semibold text-muted-foreground mb-2"
+                            >
+                              📎 相关文档
+                            </p>
+                            <div class="flex flex-wrap gap-2">
+                              <el-link
+                                v-for="(file, fIdx) in msg.sourceFiles"
+                                :key="fIdx"
+                                :href="file.url"
+                                target="_blank"
+                                type="primary"
+                                :underline="false"
+                                class="text-xs flex items-center gap-1 px-2 py-1 rounded-full bg-primary/5"
+                                @click="handleFileLinkClick(file)"
+                              >
+                                <el-icon><Document /></el-icon>
+                                {{ file.fileName }}
+                              </el-link>
+                            </div>
+                          </div>
+
+                          <div v-if="msg.isSearchBox" class="search-card">
+                            <div class="search-head">
+                              <div class="search-head__left">
+                                <span class="mode-pill">🔍 文档检索模式</span>
+                                <div>
+                                  <p class="head-title">工程档案 · 精准检索</p>
+                                  <p class="head-desc">
+                                    按图号 / 工况 / 材料快速定位，并一键查看仿真与工艺
+                                  </p>
+                                </div>
+                              </div>
+                              <div class="head-stats">
+                                <div class="stat-chip">
+                                  <span class="label">结果</span>
+                                  <span class="value">
+                                    {{ msg.total || msg.searchResults?.length || 0 }}
+                                  </span>
+                                </div>
+                                <div class="stat-chip">
+                                  <span class="label">关键词</span>
+                                  <span class="value">
+                                    {{ msg.searchKeyword || '未填写' }}
+                                  </span>
+                                </div>
+                                <div class="stat-chip">
+                                  <span class="label">分页</span>
+                                  <span class="value">
+                                    {{ msg.page }}/{{ msg.totalPages || 1 }}
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+
+                            <div class="search-bar">
+                              <el-input
+                                v-model="msg.searchKeyword"
+                                placeholder="输入产品图号、材料或工况关键词"
+                                class="search-input"
+                                @keyup.enter="performSearch(msg)"
+                                clearable
+                              >
+                                <template #suffix>
+                                  <el-icon
+                                    class="search-icon"
+                                    @click="performSearch(msg)"
+                                  >
+                                    <Search />
+                                  </el-icon>
+                                </template>
+                              </el-input>
+                              <div class="quick-filters">
+                                <span class="filter-chip">图号/规格</span>
+                                <span class="filter-chip">材料牌号</span>
+                                <span class="filter-chip">仿真强度</span>
+                                <span class="filter-chip">热处理/表面处理</span>
+                              </div>
+                            </div>
+
+                            <div
+                              class="search-results"
+                              v-if="msg.searchResults && msg.searchResults.length > 0"
+                            >
+                              <div
+                                v-for="doc in msg.searchResults"
+                                :key="doc.id"
+                                class="result-card"
+                              >
+                                <div class="result-top">
+                                  <div class="result-title">
+                                    <span class="title-main">{{ doc.productName }}</span>
+                                    <span class="title-sub">{{ doc.productCodeSpec }}</span>
+                                  </div>
+                                  <div class="pill-group">
+                                    <span class="pill pill-primary">数量 {{ doc.quantity }}</span>
+                                    <span class="pill pill-soft">
+                                      {{ doc.materialGrade || '未标注材料' }}
+                                    </span>
+                                    <span class="pill pill-soft">
+                                      {{ doc.tensileStrength || '—' }}
+                                    </span>
+                                  </div>
+                                </div>
+
+                                <div class="result-body">
+                                  <div class="result-meta">
+                                    <div class="meta-item">
+                                      <span class="meta-label">工况</span>
+                                      <span class="meta-value">
+                                        {{ doc.workingCondition || '-' }}
+                                      </span>
+                                    </div>
+                                    <div class="meta-item">
+                                      <span class="meta-label">仿真强度</span>
+                                      <span class="meta-value">
+                                        {{ doc.simulationStrength || '-' }}
+                                      </span>
+                                    </div>
+                                    <div class="meta-item">
+                                      <span class="meta-label">热/表处理</span>
+                                      <span class="meta-value">
+                                        {{ doc.heatTreatmentSurface || '-' }}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  <div class="result-preview">
+                                    <img
+                                      v-if="doc.schematicDiagram"
+                                      :src="doc.schematicDiagram"
+                                      class="thumb-img"
+                                      @click.stop="openEnlargedImage(doc.schematicDiagram)"
+                                    />
+                                    <div v-else class="thumb-placeholder">暂无示意图</div>
+                                  </div>
+                                </div>
+
+                                <div class="result-actions">
+                                  <div class="action-meta">
+                                    <span>DX {{ doc.dimensionDx || '-' }} mm</span>
+                                    <span>DY {{ doc.dimensionDy || '-' }} mm</span>
+                                    <span>DZ {{ doc.dimensionDz || '-' }} mm</span>
+                                    <span>质量 {{ doc.weightKg || '-' }} kg</span>
+                                  </div>
+                                  <div class="action-buttons">
+                                    <el-button
+                                      text
+                                      type="primary"
+                                      size="small"
+                                      @click.stop="showDetailDoc(doc, msg)"
+                                    >
+                                      <el-icon><ArrowDown /></el-icon>
+                                      展开详情
+                                    </el-button>
+                                    <el-button
+                                      text
+                                      type="default"
+                                      size="small"
+                                      @click.stop="downloadFile(doc)"
+                                      :loading="doc.downloading"
+                                    >
+                                      <el-icon><Download /></el-icon>
+                                      下载模型
+                                    </el-button>
+                                  </div>
+                                </div>
+
+                                <div class="result-detail" v-if="doc.showDetail">
+                                  <el-button
+                                    size="small"
+                                    type="danger"
+                                    plain
+                                    circle
+                                    class="close-detail-btn"
+                                    @click.stop="hideDetailDoc(doc)"
+                                  >
+                                    <el-icon><Close /></el-icon>
+                                  </el-button>
+                                  <div class="detail-content">
+                                    <div v-if="doc.loadingDetail">
+                                      加载详细数据中...
+                                    </div>
+                                    <div v-else class="detail-grid">
+                                      <div class="detail-block">
+                                        <p class="detail-label">材料牌号</p>
+                                        <p class="detail-value">
+                                          {{ doc.materialGrade || '-' }}
+                                        </p>
+                                      </div>
+                                      <div class="detail-block">
+                                        <p class="detail-label">抗拉强度</p>
+                                        <p class="detail-value">
+                                          {{ doc.tensileStrength || '-' }}
+                                        </p>
+                                      </div>
+                                      <div class="detail-block">
+                                        <p class="detail-label">制造工艺</p>
+                                        <p class="detail-value">
+                                          {{ doc.manufacturingProcess || '-' }}
+                                        </p>
+                                      </div>
+                                      <div class="detail-block">
+                                        <p class="detail-label">成本(元)</p>
+                                        <p class="detail-value">{{ doc.cost || '-' }}</p>
+                                      </div>
+                                      <div class="detail-block">
+                                        <p class="detail-label">备注</p>
+                                        <p class="detail-value">{{ doc.remarks || '-' }}</p>
+                                      </div>
+                                      <div class="detail-block" v-if="doc.createdAt">
+                                        <p class="detail-label">创建时间</p>
+                                        <p class="detail-value">
+                                          {{ formatTime(doc.createdAt) }}
+                                        </p>
+                                      </div>
+                                      <div class="detail-block thumb-wide">
+                                        <p class="detail-label">强度仿真云图</p>
+                                        <img
+                                          v-if="doc.strengthSimulationImage"
+                                          :src="doc.strengthSimulationImage"
+                                          class="detail-img"
+                                          @click.stop="
+                                            openEnlargedImage(doc.strengthSimulationImage)
+                                          "
+                                        />
+                                        <p v-else class="detail-value">暂无云图</p>
+                                      </div>
+                                      <div class="detail-block thumb-wide">
+                                        <p class="detail-label">示意图</p>
+                                        <img
+                                          v-if="doc.schematicDiagram"
+                                          :src="doc.schematicDiagram"
+                                          class="detail-img"
+                                          @click.stop="
+                                            openEnlargedImage(doc.schematicDiagram)
+                                          "
+                                        />
+                                        <p v-else class="detail-value">暂无示意图</p>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="pagination" v-if="msg.totalPages > 1">
+                                <button
+                                  @click="changePage(msg, -1)"
+                                  :disabled="msg.page === 1"
+                                >
+                                  上一页
+                                </button>
+                                <span>
+                                  {{ msg.page }} / {{ msg.totalPages }}
+                                </span>
+                                <button
+                                  @click="changePage(msg, 1)"
+                                  :disabled="msg.page === msg.totalPages"
+                                >
+                                  下一页
+                                </button>
+                              </div>
+                            </div>
+
+                            <div v-if="msg.searchLoading" class="loading">
+                              搜索中...
+                            </div>
+                            <div v-if="msg.searchError" class="error">
+                              {{ msg.searchError }}
+                            </div>
+                          </div>
+
+                          <div v-if="msg.isHeatResult" class="result-box">
+                            <div class="result-body">
+                              <div
+                                v-if="msg.progress && msg.progress.visible"
+                                class="inline-progress"
+                              >
+                                <el-progress
+                                  :percentage="msg.progress.percentage"
+                                  :status="msg.progress.status"
+                                  stroke-width="12"
+                                  striped
+                                  striped-flow
+                                  :duration="20"
+                                />
+                                <p class="progress-text">
+                                  {{ msg.progress.text }}
+                                </p>
+                                <div
+                                  v-if="msg.uploadStatus === 'uploading'"
+                                  class="scrolling-text-container"
+                                >
+                                  <div class="scrolling-text-header">
+                                    <el-icon class="pulse-icon">
+                                      <Operation />
+                                    </el-icon>
+                                    <span>
+                                      {{
+                                        scrollingHeaders[
+                                          msg.progress.currentStep
+                                        ]
+                                      }}
+                                    </span>
+                                  </div>
+                                  <div class="scrolling-text-window">
+                                    <transition name="fade-slide" mode="out-in">
+                                      <div
+                                        :key="
+                                          `${msg.progress.currentStep}-${msg.progress.subTaskIndex}`
+                                        "
+                                        class="scrolling-text-item active"
+                                      >
+                                        <span class="text-dot"></span>
+                                        {{
+                                          scrollingTextsHeat[
+                                            msg.progress.currentStep
+                                          ]?.[msg.progress.subTaskIndex] ||
+                                            msg.progress.text
+                                        }}
+                                      </div>
+                                    </transition>
+                                  </div>
+                                </div>
+                                <div class="progress-steps">
+                                  <div
+                                    v-for="(step, stepIdx) in msg.progress
+                                      .steps"
+                                    :key="stepIdx"
+                                    class="step-item"
+                                    :class="{
+                                      active:
+                                        stepIdx === msg.progress.currentStep,
+                                      completed:
+                                        msg.progress.stepStatus?.[stepIdx] ===
+                                        'success',
+                                      terminated:
+                                        msg.progress.stepStatus?.[stepIdx] ===
+                                        'terminated',
+                                    }"
+                                  >
+                                    <el-icon
+                                      v-if="
+                                        msg.progress.stepStatus?.[stepIdx] ===
+                                          'success'
+                                      "
+                                    >
+                                      <Check />
+                                    </el-icon>
+                                    <el-icon
+                                      v-else-if="
+                                        msg.progress.stepStatus?.[stepIdx] ===
+                                          'loading'
+                                      "
+                                      class="is-loading"
+                                    >
+                                      <Loading />
+                                    </el-icon>
+                                    <el-icon
+                                      v-else-if="
+                                        msg.progress.stepStatus?.[stepIdx] ===
+                                          'terminated'
+                                      "
+                                    >
+                                      <CircleClose />
+                                    </el-icon>
+                                    <el-icon v-else><Clock /></el-icon>
+                                    <span>{{ step }}</span>
+                                  </div>
+                                </div>
+                              </div>
+
+                              <div
+                                v-if="msg.uploadStatus === 'terminated'"
+                                class="upload-status terminated"
+                              >
+                                <el-icon><CircleClose /></el-icon>
+                                <span>⏹️ 处理已终止</span>
+                                <p>{{ msg.errorMessage }}</p>
+                              </div>
+
+
+                              <div
+                                v-if="msg.uploadStatus === 'error'"
+                                class="upload-status error"
+                              >
+                                <el-icon><CircleCloseFilled /></el-icon>
+                                <span>处理失败: {{ msg.errorMessage }}</span>
+                                <p>请检查文件格式或联系管理员</p>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div v-if="msg.isStrengthResult" class="result-box">
+                            <div class="result-body">
+                              <div
+                                v-if="msg.progress && msg.progress.visible"
+                                class="inline-progress"
+                              >
+                                <el-progress
+                                  :percentage="msg.progress.percentage"
+                                  :status="msg.progress.status"
+                                  stroke-width="12"
+                                  striped
+                                  striped-flow
+                                  :duration="20"
+                                />
+                                <p class="progress-text">
+                                  {{ msg.progress.text }}
+                                </p>
+                                <div
+                                  v-if="msg.uploadStatus === 'uploading'"
+                                  class="scrolling-text-container"
+                                >
+                                  <div class="scrolling-text-header">
+                                    <el-icon class="pulse-icon">
+                                      <Operation />
+                                    </el-icon>
+                                    <span>
+                                      {{
+                                        scrollingHeaders[
+                                          msg.progress.currentStep
+                                        ]
+                                      }}
+                                    </span>
+                                  </div>
+                                  <div class="scrolling-text-window">
+                                    <transition name="fade-slide" mode="out-in">
+                                      <div
+                                        :key="
+                                          `${msg.progress.currentStep}-${msg.progress.subTaskIndex}`
+                                        "
+                                        class="scrolling-text-item active"
+                                      >
+                                        <span class="text-dot"></span>
+                                        {{
+                                          scrollingTextsStrength[
+                                            msg.progress.currentStep
+                                          ]?.[msg.progress.subTaskIndex] ||
+                                            msg.progress.text
+                                        }}
+                                      </div>
+                                    </transition>
+                                  </div>
+                                </div>
+                                <div class="progress-steps">
+                                  <div
+                                    v-for="(step, stepIdx) in msg.progress
+                                      .steps"
+                                    :key="stepIdx"
+                                    class="step-item"
+                                    :class="{
+                                      active:
+                                        stepIdx === msg.progress.currentStep,
+                                      completed:
+                                        msg.progress.stepStatus?.[stepIdx] ===
+                                        'success',
+                                    }"
+                                  >
+                                    <el-icon
+                                      v-if="
+                                        msg.progress.stepStatus?.[stepIdx] ===
+                                          'success'
+                                      "
+                                    >
+                                      <Check />
+                                    </el-icon>
+                                    <el-icon
+                                      v-else-if="
+                                        msg.progress.stepStatus?.[stepIdx] ===
+                                          'loading'
+                                      "
+                                      class="is-loading"
+                                    >
+                                      <Loading />
+                                    </el-icon>
+                                    <el-icon v-else><Clock /></el-icon>
+                                    <span>{{ step }}</span>
+                                  </div>
+                                </div>
+                              </div>
+
+                              <div
+                                v-if="msg.uploadStatus === 'terminated'"
+                                class="upload-status terminated"
+                              >
+                                <el-icon><CircleClose /></el-icon>
+                                <span>⏹️ 处理已终止</span>
+                                <p>{{ msg.errorMessage }}</p>
+                              </div>
+
+
+                              <div
+                                v-if="msg.uploadStatus === 'error'"
+                                class="upload-status error"
+                              >
+                                <el-icon><CircleCloseFilled /></el-icon>
+                                <span>处理失败: {{ msg.errorMessage }}</span>
+                                <p>请检查文件格式或联系管理员</p>
+                              </div>
+                            </div>
+                          </div>
+
+                          <div
+                            v-if="
+                              idx === 0 &&
+                                msg.role === 'assistant' &&
+                                !isImageSearchMode
+                            "
+                            class="quick-questions-inline"
+                          >
+                            <div class="quick-inline-title">
+                              💡 试试问我这些问题：
+                            </div>
+                            <div class="quick-inline-list">
+                              <button
+                                v-for="(question, qIdx) in quickQuestions"
+                                :key="qIdx"
+                                class="px-3 py-1.5 rounded-full text-xs bg-white/80 border border-white hover:shadow-sm transition"
+                                @click="fillQuestion(question)"
+                              >
+                                {{ question }}
+                              </button>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
+                </div>
+              </TransitionGroup>
+            </div>
+          </div>
 
-                  <!-- 复制按钮 -->
+          <div
+            v-if="messages.length > 0"
+            class="chat-composer sticky bottom-0 z-20 pb-6 pt-4 px-8 bg-gradient-to-t from-background via-background/80 to-transparent"
+          >
+            <div class="max-w-5xl mx-auto space-y-3">
+              <div v-if="showAttachmentList" class="attachment-preview">
+                <div class="preview-header">
+                  <span>待上传文件（{{ attachmentFiles.length }}个）</span>
                   <el-button
-                    class="copy-btn"
+                    link
+                    type="danger"
                     size="small"
-                    circle
-                    title="复制消息"
-                    @click="copyMessage(msg.content || '消息内容')"
+                    @click="clearAttachments"
                   >
-                    <el-icon><DocumentCopy /></el-icon>
+                    清空
                   </el-button>
                 </div>
-              </template>
-            </div>
-          </TransitionGroup>
-        </main>
-
-        <footer class="chat-footer">
-          <!-- ✅ 附件预览区域 -->
-          <div v-if="showAttachmentList" class="attachment-preview">
-            <div class="preview-header">
-              <span>待上传文件（{{ attachmentFiles.length }}个）</span>
-              <el-button
-                link
-                type="danger"
-                size="small"
-                @click="clearAttachments"
-              >
-                清空
-              </el-button>
-            </div>
-            <div class="preview-list horizontal-list">
-              <div
-                v-for="(file, idx) in attachmentFiles"
-                :key="idx"
-                class="preview-item horizontal-item"
-              >
-                <div class="file-icon">
-                  <el-icon v-if="file.type.includes('image')">
-                    <Picture />
-                  </el-icon>
-                  <el-icon v-else><Document /></el-icon>
-                </div>
-                <div class="file-info">
-                  <div class="file-name" :title="file.name">
-                    {{ file.name }}
+                <div class="preview-list horizontal-list">
+                  <div
+                    v-for="(file, idx) in attachmentFiles"
+                    :key="idx"
+                    class="preview-item horizontal-item"
+                  >
+                    <div class="file-icon">
+                      <el-icon v-if="file.type.includes('image')">
+                        <Picture />
+                      </el-icon>
+                      <el-icon v-else><Document /></el-icon>
+                    </div>
+                    <div class="file-info">
+                      <div class="file-name" :title="file.name">
+                        {{ file.name }}
+                      </div>
+                      <div class="file-size">
+                        {{ formatFileSize(file.size) }}
+                      </div>
+                    </div>
+                    <el-button
+                      link
+                      type="danger"
+                      size="small"
+                      @click="removeAttachment(idx)"
+                      class="remove-btn"
+                    >
+                      <el-icon><Close /></el-icon>
+                    </el-button>
                   </div>
-                  <div class="file-size">{{ formatFileSize(file.size) }}</div>
                 </div>
-                <el-button
-                  link
-                  type="danger"
-                  size="small"
-                  @click="removeAttachment(idx)"
-                  class="remove-btn"
+              </div>
+
+              <form
+                @submit.prevent="sendMessage"
+                class="chat-composer-card"
+                :class="{ 'is-capsule': isSingleLine }"
+              >
+                <div class="composer-inner">
+                  <div class="composer-actions">
+                    <el-button
+                      circle
+                      plain
+                      class="attach-btn"
+                      title="上传附件"
+                      @click="triggerAttachmentInput"
+                      :disabled="loading"
+                    >
+                      <el-icon><Paperclip /></el-icon>
+                    </el-button>
+                  </div>
+                  <el-input
+                    v-model="inputText"
+                    type="textarea"
+                    :autosize="{ minRows: 1, maxRows: 6 }"
+                    resize="none"
+                    :placeholder="
+                      isImageSearchMode
+                        ? '输入关键词搜索图片（实时搜索）...'
+                        : '请输入工程参数、需求或问题...'
+                    "
+                    class="composer-textarea"
+                    @keydown="handleKeydown"
+                    :disabled="loading"
+                  />
+                  <div class="composer-actions">
+                    <el-button
+                      type="primary"
+                      circle
+                      class="send-btn-premium"
+                      :loading="loading"
+                      :disabled="!inputText.trim() || loading"
+                      native-type="submit"
+                    >
+                      <el-icon v-if="!loading"><Position /></el-icon>
+                    </el-button>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧栏容器 -->
+      <div
+        v-if="hasDrawerContent"
+        class="chat-drawer-wrapper hidden xl:block relative"
+        :class="{ 'drawer-collapsed': !drawerVisible }"
+      >
+        <!-- 收起时的hover打开按钮 -->
+        <div
+          v-if="!drawerVisible"
+          class="drawer-open-btn absolute right-0 top-1/2 -translate-y-1/2  w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 text-white shadow-xl flex items-center justify-center cursor-pointer opacity-0 hover:opacity-100 transition-all duration-300 z-50 hover:scale-110 hover:shadow-2xl"
+          @click="toggleDrawer"
+        >
+          <el-icon class="text-lg transform rotate-[-90deg]">
+            <ArrowUpBold />
+          </el-icon>
+        </div>
+
+        <!-- 右侧栏内容 -->
+        <div
+          class="chat-drawer w-[520px] h-full bg-card border-l border-border shadow-2xl z-40 flex-shrink-0 transition-all duration-300"
+          :class="{ 'translate-x-full': !drawerVisible }"
+        >
+          <div class="h-full overflow-y-auto bg-gradient-glow scrollbar-custom">
+            <div
+              class="p-6 border-b border-border/30 bg-[hsl(220_25%_99%)]/60 backdrop-blur-sm relative"
+            >
+              <button
+                class="absolute top-4 left-4 w-8 h-8 rounded-full bg-white/80 hover:bg-white border border-border/30 flex items-center justify-center cursor-pointer transition-all hover:scale-110"
+                @click="toggleDrawer"
+                title="收起"
+              >
+                <el-icon class="text-muted-foreground">
+                  <Close />
+                </el-icon>
+              </button>
+              <p class="text-lg font-bold pl-10">
+                {{ currentSearchMessage ? '搜索结果详情' : '报告展示' }}
+              </p>
+              <p class="text-sm text-muted-foreground pl-10">
+                {{
+                  currentSearchMessage
+                    ? '查看文档详细信息'
+                    : '凌能助手生成的工程分析结果'
+                }}
+              </p>
+            </div>
+            <div class="p-6 space-y-5">
+              <!-- 结果高光卡片（完成后展示在右侧栏） -->
+              <div
+                v-if="latestProcessedResult"
+                class="relative overflow-hidden rounded-2xl border border-white/50 bg-white/85 backdrop-blur-2xl shadow-glass p-5 space-y-4"
+              >
+                <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-indigo-500/10 to-cyan-400/10"></div>
+                <div class="absolute -top-16 -right-10 w-36 h-36 bg-gradient-to-br from-blue-500/20 to-cyan-400/10 blur-3xl"></div>
+                <div class="relative flex items-start gap-3">
+                  <div
+                    class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-400 to-blue-500 text-white grid place-items-center shadow-lg"
+                  >
+                    <el-icon><SuccessFilled /></el-icon>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2 mb-1">
+                      <span
+                        class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-semibold bg-gradient-to-r from-blue-500/15 to-cyan-400/15 text-blue-700"
+                      >
+                        <el-icon class="text-blue-500"><Document /></el-icon>
+                        {{
+                          latestProcessedResult.isStrengthResult
+                            ? '强度计算结果'
+                            : '防隔热处理结果'
+                        }}
+                      </span>
+                      <span class="text-[11px] text-muted-foreground whitespace-nowrap">
+                        已完成 · {{ formatTime(latestProcessedResult.time) }}
+                      </span>
+                    </div>
+                    <p
+                      class="text-lg font-semibold text-foreground leading-snug whitespace-nowrap truncate max-w-[300px]"
+                      :title="latestProcessedResult.content || '文件处理完成'"
+                    >
+                      {{ latestProcessedResult.content || '文件处理完成' }}
+                    </p>
+                    <p class="text-sm text-muted-foreground">
+                      文件已处理成功，报告已生成，可立即下载与分享。
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="rounded-xl border border-white/60 bg-white/75 backdrop-blur p-4 space-y-3 shadow-inner"
                 >
-                  <el-icon><Close /></el-icon>
-                </el-button>
+                  <div class="flex flex-wrap items-center gap-2 text-sm">
+                    <el-icon class="text-emerald-500"><CircleCheck /></el-icon>
+                    <span class="font-medium text-foreground">处理状态：</span>
+                    <span class="text-emerald-600 font-semibold">成功</span>
+                  </div>
+                  <div class="text-xs text-muted-foreground break-all space-y-1">
+                    <p class="font-semibold text-foreground/80">原始路径</p>
+                    <p class="rounded-lg bg-white/80 px-3 py-2 border border-white/60">
+                      {{
+                        latestProcessedResult.originalData?.minioUrl ||
+                          '路径未保存'
+                      }}
+                    </p>
+                  </div>
+                  <div class="space-y-2 text-sm">
+                    <div class="flex items-center justify-between gap-2">
+                      <p class="font-semibold text-foreground/80 whitespace-nowrap">
+                        📥 结果文档
+                      </p>
+                      <span
+                        class="text-[11px] text-primary/80 bg-primary/5 rounded-full px-2 py-0.5"
+                      >
+                        下载即用
+                      </span>
+                    </div>
+                    <a
+                      class="block w-full truncate text-primary hover:text-primary/80 font-medium"
+                      :href="latestProcessedResult.convertedUrl"
+                      target="_blank"
+                    >
+                      {{ latestProcessedResult.convertedUrl }}
+                    </a>
+                  </div>
+                  <div class="flex flex-wrap gap-2">
+                    <el-button
+                      type="primary"
+                      round
+                      size="small"
+                      class="!px-4 shadow-sm"
+                      @click="jumpToLatestProcessedMessage"
+                    >
+                      <el-icon><Position /></el-icon>
+                      回到对话
+                    </el-button>
+                    <el-button
+                      type="default"
+                      plain
+                      round
+                      size="small"
+                      class="!px-3 bg-white/80 backdrop-blur"
+                      @click="
+                        copyToClipboard(latestProcessedResult.convertedUrl || '')
+                      "
+                    >
+                      <el-icon><DocumentCopy /></el-icon>
+                      复制链接
+                    </el-button>
+                    <el-button
+                      type="success"
+                      round
+                      size="small"
+                      class="!px-3 shadow-sm"
+                      @click="
+                        downloadConvertedFile(
+                          latestProcessedResult.convertedUrl,
+                          latestProcessedResult.isStrengthResult
+                            ? '强度计算文件'
+                            : '防隔热文件'
+                        )
+                      "
+                    >
+                      <el-icon><Download /></el-icon>
+                      下载报告
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 搜索结果详情（侧边栏视角：更侧重摘要指标） -->
+              <div v-if="selectedSearchResult" class="insight-card">
+                <div class="insight-hero">
+                  <div>
+                    <p class="insight-label">检索摘要</p>
+                    <p class="insight-title">
+                      {{ selectedSearchResult.productName || selectedSearchResult.name }}
+                    </p>
+                    <p class="insight-sub">{{ selectedSearchResult.productCodeSpec }}</p>
+                  </div>
+                  <div class="insight-badge" v-if="selectedSearchResult.simulationStrength">
+                    仿真 {{ selectedSearchResult.simulationStrength }}
+                  </div>
+                </div>
+
+                <div class="insight-metrics">
+                  <div class="metric-block">
+                    <p class="metric-label">数量</p>
+                    <p class="metric-value">{{ selectedSearchResult.quantity || '-' }}</p>
+                  </div>
+                  <div class="metric-block">
+                    <p class="metric-label">工况</p>
+                    <p class="metric-value">
+                      {{ selectedSearchResult.workingCondition || '-' }}
+                    </p>
+                  </div>
+                  <div class="metric-block">
+                    <p class="metric-label">材料/热处理</p>
+                    <p class="metric-value">
+                      {{ selectedSearchResult.materialGrade || '-' }}
+                      ·
+                      {{ selectedSearchResult.heatTreatmentSurface || '-' }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="insight-tags">
+                  <span class="tag-chip">
+                    抗拉 {{ selectedSearchResult.tensileStrength || '-' }}
+                  </span>
+                  <span class="tag-chip">
+                    {{ selectedSearchResult.manufacturingProcess || '制造工艺待补充' }}
+                  </span>
+                  <span class="tag-chip">
+                    {{ selectedSearchResult.remarks || '备注未填写' }}
+                  </span>
+                </div>
+
+                <div class="insight-dimensions">
+                  <div class="dim-item">
+                    <p class="dim-label">DX</p>
+                    <p class="dim-value">{{ selectedSearchResult.dimensionDx || '-' }} mm</p>
+                  </div>
+                  <div class="dim-item">
+                    <p class="dim-label">DY</p>
+                    <p class="dim-value">{{ selectedSearchResult.dimensionDy || '-' }} mm</p>
+                  </div>
+                  <div class="dim-item">
+                    <p class="dim-label">DZ</p>
+                    <p class="dim-value">{{ selectedSearchResult.dimensionDz || '-' }} mm</p>
+                  </div>
+                  <div class="dim-item">
+                    <p class="dim-label">质量</p>
+                    <p class="dim-value">{{ selectedSearchResult.weightKg || '-' }} kg</p>
+                  </div>
+                </div>
+
+                <div class="insight-actions">
+                  <el-button
+                    size="small"
+                    type="primary"
+                    @click="downloadFile(selectedSearchResult)"
+                    :loading="selectedSearchResult.downloading"
+                  >
+                    <el-icon><Download /></el-icon>
+                    下载文档
+                  </el-button>
+                  <el-button
+                    size="small"
+                    plain
+                    type="default"
+                    @click="jumpToLatestProcessedMessage"
+                  >
+                    <el-icon><Position /></el-icon>
+                    回到对话
+                  </el-button>
+                </div>
+              </div>
+
+              <!-- 进度显示 -->
+              <div
+                v-if="currentProgress"
+                class="p-5 rounded-xl bg-gradient-to-br from-blue-50/90 to-cyan-50/90 backdrop-blur-xl border-2 border-blue-200/50 shadow-lg"
+              >
+                <div class="flex items-center justify-between mb-3">
+                  <p class="text-sm font-semibold text-foreground">处理进度</p>
+                  <span class="text-xs text-muted-foreground">
+                    {{ Math.round(currentProgress.percentage) }}%
+                  </span>
+                </div>
+                <el-progress
+                  :percentage="currentProgress.percentage"
+                  :status="currentProgress.status"
+                  :stroke-width="12"
+                  striped
+                  striped-flow
+                  :duration="20"
+                />
+                <p class="text-xs text-muted-foreground mt-3 text-center">
+                  {{ currentProgress.text }}
+                </p>
+                <div class="mt-4 space-y-2">
+                  <div
+                    v-for="(step, idx) in currentProgress.steps"
+                    :key="idx"
+                    class="flex items-center gap-2 text-xs"
+                  >
+                    <el-icon
+                      v-if="currentProgress.stepStatus?.[idx] === 'success'"
+                      class="text-green-500"
+                    >
+                      <Check />
+                    </el-icon>
+                    <el-icon
+                      v-else-if="idx === currentProgress.currentStep"
+                      class="text-blue-500 animate-spin"
+                    >
+                      <Loading />
+                    </el-icon>
+                    <div
+                      v-else
+                      class="w-4 h-4 rounded-full border-2 border-gray-300"
+                    ></div>
+                    <span
+                      :class="{
+                        'text-green-600 font-medium':
+                          currentProgress.stepStatus?.[idx] === 'success',
+                        'text-blue-600 font-medium':
+                          idx === currentProgress.currentStep,
+                        'text-muted-foreground':
+                          idx > currentProgress.currentStep,
+                      }"
+                    >
+                      {{ step }}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-
-          <div class="input-box-wrapper">
-            <!-- ✅ 文件上传按钮 -->
-            <el-button
-              class="attach-btn"
-              type="info"
-              plain
-              circle
-              size="small"
-              @click="triggerAttachmentInput"
-              title="上传附件"
-              :disabled="loading"
-            >
-              <el-icon><Paperclip /></el-icon>
-            </el-button>
-
-            <!-- ✅ 知识库切换按钮 -->
-            <el-checkbox
-              v-model="useKnowledgeBase"
-              class="knowledge-base-toggle"
-              label="知识库"
-            />
-
-            <el-input
-              v-model="inputText"
-              type="textarea"
-              :autosize="{ minRows: 2, maxRows: 6 }"
-              resize="none"
-              :placeholder="
-                isImageSearchMode
-                  ? '输入关键词搜索图片（实时搜索）...'
-                  : '输入消息...'
-              "
-              class="input-box"
-              @keydown="handleKeydown"
-              :disabled="loading"
-            />
-            <el-button
-              type="primary"
-              :loading="loading"
-              :disabled="!inputText.trim() || loading"
-              class="send-btn"
-              @click="sendMessage"
-            >
-              <el-icon><Position /></el-icon>
-            </el-button>
-          </div>
-        </footer>
+        </div>
       </div>
     </div>
 
-    <!-- ✅ 通用附件上传输入框 -->
     <input
       type="file"
       multiple
       ref="attachmentInput"
       @change="handleAttachmentSelection"
-      style="display: none"
+      class="hidden"
       accept="*"
     />
 
-    <!-- ✅ 图片查看器 -->
     <div
       v-if="showImageViewer"
       class="image-viewer-overlay"
@@ -1003,32 +1577,32 @@
 </template>
 
 <script setup>
-import { ref, nextTick, onMounted, computed, onUnmounted } from 'vue'
+import { ref, nextTick, onMounted, computed, onUnmounted, watch } from 'vue'
 import {
   Search,
   Position,
-  User,
-  ChatDotRound,
   Folder,
   Document,
-  Upload,
   Loading,
   SuccessFilled,
+  CircleClose,
   CircleCloseFilled,
   DocumentCopy,
-  View,
   Download,
   Paperclip,
   Picture,
   Close,
   Plus,
-  Delete,
   Clock,
-  EditPen,
   Check,
   ArrowDown,
   Operation,
+  Menu,
+  CircleCheck,
+  ArrowUp,
+  ArrowUpBold,
 } from '@element-plus/icons-vue'
+import logo from '@/assets/logo.png'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { GetUserinfo } from '@/api/login'
 import { sendToAI } from '@/api/rasa'
@@ -1039,10 +1613,39 @@ import {
 } from '@/api/document'
 import { uploadToMinIO } from '@/api/heat'
 import { convertToDownloadUrl } from '@/api/convert'
-import Breadcrumbs from '@/layout/components/Topbar/Breadcrumbs.vue'
-import Topbar from '@/layout/components/Topbar/index.vue'
-import Tagsbar from '@/layout/components/Tagsbar/index.vue'
-import Menus from '@/layout/components/Sidebar/Menus.vue'
+import { useRouter } from 'vue-router'
+import { useApp } from '@/pinia/modules/app'
+// 移除不需要的导入
+// import Breadcrumbs from '@/layout/components/Topbar/Breadcrumbs.vue'
+// import Topbar from '@/layout/components/Topbar/index.vue'
+// import Tagsbar from '@/layout/components/Tagsbar/index.vue'
+// import Menus from '@/layout/components/Sidebar/Menus.vue'
+
+const router = useRouter()
+const app = useApp()
+
+const departmentTabs = [
+  {
+    id: 'all-in-one',
+    name: '统一模型',
+    nameEn: 'Claude-4-Sonnet',
+    desc: '普通聊天 · 知识库 · 模型搜索 · 防隔热检索 · 强度计算',
+    icon: Folder,
+    gradientVar: 'gradient-structure',
+    shadowVar: 'shadow-glow-structure',
+  },
+]
+
+const quickActionMap = {
+  'all-in-one': [
+    '帮我检索某个模型的参数',
+    '查找防隔热文件并计算',
+    '进行强度计算并输出报告',
+    '从知识库搜索资料',
+    '生成结构模型并分析载荷',
+    '解释代码并给出优化建议',
+  ],
+}
 
 const processedSender = computed(() => {
   if (username.value === 'admin') {
@@ -1052,6 +1655,8 @@ const processedSender = computed(() => {
   return username.value.split('_')[0] || username.value
 })
 
+const currentDepartmentName = computed(() => '开发工程师')
+
 // ✅ 打字机定时器管理
 const typewriterTimers = ref({})
 
@@ -1094,7 +1699,9 @@ function clearTypewriterTimers(msgIndex) {
   }
 }
 
-const useKnowledgeBase = ref(true)
+const useKnowledgeBase = ref(false)
+const isImageSearchMode = ref(false) // 图片搜索模式
+const activeDepartment = ref('all-in-one')
 
 // ✅ 加载状态管理
 const loadingTimers = ref({}) // 存储定时器
@@ -1182,6 +1789,9 @@ function handleFileLinkClick(file) {
   ElMessage.success(`正在下载 ${file.fileName}`)
 }
 
+// 侧边栏折叠状态
+const isSidebarCollapsed = ref(false)
+
 // 在 script setup 中添加响应式数据
 const scrollingHeaders = ref([
   '✈️ 正在加速上传中',
@@ -1191,10 +1801,37 @@ const scrollingHeaders = ref([
 ])
 
 const scrollingTextsHeat = ref([
-  ['正在分片上传文件...', '加速传输中...', '校验数据中...'],
-  ['读取Excel表格...', '解析单元格数据...', '构建数据模型...'],
-  ['AI分析中...', 'AI计算热传导系数...', 'AI合并计算中...', 'AI验证结果中...'],
-  ['生成PDF文档...', '添加图表数据...', '格式化排版中...'],
+  [
+    '正在分片上传文件...',
+    '加速传输中...',
+    '校验数据中...',
+    '正在预检文件完整性...',
+    '匹配最优传输通道...',
+    '上传速率稳定中...',
+  ],
+  [
+    '读取Excel表格...',
+    '解析单元格数据...',
+    '构建数据模型...',
+    '提取温度场数据...',
+    '检查异常值...',
+    '补全缺失参数...',
+  ],
+  [
+    'AI分析中...',
+    'AI计算热传导系数...',
+    'AI合并计算中...',
+    'AI验证结果中...',
+    'AI校准边界条件...',
+    'AI生成可视化数据...',
+  ],
+  [
+    '生成PDF文档...',
+    '添加图表数据...',
+    '格式化排版中...',
+    '整理参考文献...',
+    '压缩打包结果...',
+  ],
 ])
 
 const scrollingTextsStrength = ref([
@@ -1205,24 +1842,98 @@ const scrollingTextsStrength = ref([
 ])
 // 状态变量
 const username = ref('anonymous')
-const messages = ref([
-  {
-    role: 'assistant',
-    content: '你好，我是 lktx，有什么可以帮你的吗？',
-    time: Date.now(),
-  },
-])
+const messages = ref([])
 const inputText = ref('')
 const loading = ref(false)
-const chatMain = ref(null)
-const quickQuestions = ref([
-  '给我讲一个笑话吧',
-  '今天天气怎么样',
-  '文档搜索',
-  '用餐评价',
-  '防隔热信息检索',
-  '强度计算',
-])
+const messagesScrollArea = ref(null)
+const quickQuestions = computed(
+  () => quickActionMap[activeDepartment.value] || []
+)
+
+const isSingleLine = computed(() => {
+  return !inputText.value.includes('\n') && inputText.value.length < 50
+})
+
+const guidePrompts = [
+  {
+    id: 'knowledge-base',
+    question: '知识库查询一下某个模型参数',
+    answer:
+      '示例：我会从知识库中检索相关模型参数信息，并提供详细的参数说明和使用建议。',
+  },
+  {
+    id: 'search-model',
+    question: '搜索模型',
+    answer:
+      '示例：我会帮您搜索相关的模型文档和技术资料，快速定位您需要的信息。',
+  },
+  {
+    id: 'thermal-retrieval',
+    question: '检索防隔热',
+    answer:
+      '示例：我会检索防隔热相关的技术文档和计算报告，为您提供专业的分析结果。',
+  },
+  {
+    id: 'strength-calculation',
+    question: '计算强度',
+    answer: '示例：我会进行强度计算分析，生成应力分布图和结构优化建议。',
+  },
+]
+
+const userInitials = computed(() => {
+  const raw = username.value || ''
+  const latin = raw.replace(/[^a-zA-Z0-9]/g, '')
+  const source = latin || raw
+  return source.slice(0, 2).toUpperCase() || 'AI'
+})
+
+const deptHighlights = computed(() => {
+  const base = {
+    structure: [
+      {
+        title: '结构模型',
+        desc: '3D 建模已完成',
+        icon: Folder,
+        bg: 'linear-gradient(135deg,#3b82f6,#38bdf8)',
+      },
+      {
+        title: '载荷分析',
+        desc: '实时载荷分布',
+        icon: Operation,
+        bg: 'linear-gradient(135deg,#60a5fa,#a855f7)',
+      },
+    ],
+    thermal: [
+      {
+        title: '热防护报告',
+        desc: '温度场/热流密度',
+        icon: Operation,
+        bg: 'linear-gradient(135deg,#fb923c,#f97316)',
+      },
+      {
+        title: '材料温度裕度',
+        desc: '自动生成对比',
+        icon: Document,
+        bg: 'linear-gradient(135deg,#f59e0b,#f97316)',
+      },
+    ],
+    control: [
+      {
+        title: '控制算法验证',
+        desc: '稳定裕度 15dB',
+        icon: Operation,
+        bg: 'linear-gradient(135deg,#a855f7,#6366f1)',
+      },
+      {
+        title: '参数换算',
+        desc: '执行机构/传感器',
+        icon: Document,
+        bg: 'linear-gradient(135deg,#6366f1,#22d3ee)',
+      },
+    ],
+  }
+  return base[activeDepartment.value] || base.structure
+})
 
 // ✅ 新增：图片放大状态
 const enlargedImageUrl = ref(null)
@@ -1238,6 +1949,74 @@ const showAttachmentList = computed(() => {
   return attachmentFiles.value.length > 0
 })
 
+// 获取当前正在进行的进度
+const currentProgress = computed(() => {
+  const progressMsg = messages.value.find(
+    msg =>
+      msg.progress &&
+      msg.progress.visible &&
+      msg.progress.status !== 'success' &&
+      msg.progress.status !== 'exception'
+  )
+  return progressMsg?.progress || null
+})
+
+// 获取当前搜索消息
+const currentSearchMessage = computed(() => {
+  return messages.value.find(
+    msg => msg.isSearchBox && msg.searchResults?.length > 0
+  )
+})
+
+// 获取最新已完成的处理结果（强度/防隔热）
+const latestProcessedResult = computed(() => {
+  const reversed = [...messages.value].reverse()
+  return (
+    reversed.find(
+      msg =>
+        (msg.isStrengthResult || msg.isHeatResult) &&
+        msg.uploadStatus === 'success'
+    ) || null
+  )
+})
+
+// 获取当前选中的搜索结果
+const selectedSearchResult = ref(null)
+
+// 右侧栏显示状态
+const drawerVisible = ref(false)
+
+// 判断是否有内容显示右侧栏
+const hasDrawerContent = computed(() => {
+  return (
+    currentProgress.value !== null ||
+    currentSearchMessage.value !== null ||
+    latestProcessedResult.value !== null
+  )
+})
+
+// 监听内容变化，自动显示/隐藏右侧栏（默认关闭，只有在有内容时弹出）
+watch(
+  hasDrawerContent,
+  newVal => {
+    if (newVal) {
+      drawerVisible.value = true
+    } else {
+      drawerVisible.value = false
+    }
+  },
+  { immediate: false }
+)
+
+// 切换右侧栏显示状态
+function toggleDrawer() {
+  if (!hasDrawerContent.value) {
+    drawerVisible.value = false
+    return
+  }
+  drawerVisible.value = !drawerVisible.value
+}
+
 // 方法实现
 const fetchUsername = async () => {
   try {
@@ -1251,10 +2030,41 @@ const fetchUsername = async () => {
   }
 }
 
+function goSettings() {
+  router.push('/')
+}
+
+function logout() {
+  app.clearToken()
+  router.push('/login')
+}
+
 function formatTime(ts) {
   return new Date(ts).toLocaleString()
 }
 
+function getMessageDomId(msg) {
+  return msg?.time ? `message-${msg.time}` : ''
+}
+
+function scrollToMessageById(id) {
+  nextTick(() => {
+    const el = document.getElementById(id)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  })
+}
+
+function jumpToLatestProcessedMessage() {
+  if (!latestProcessedResult.value?.time) return
+  scrollToMessageById(getMessageDomId(latestProcessedResult.value))
+}
+
+function changeDepartment(dept) {
+  activeDepartment.value = dept
+}
+
 function formatFileSize(bytes) {
   if (bytes === 0) return '0 B'
   const k = 1024
@@ -1263,9 +2073,23 @@ function formatFileSize(bytes) {
   return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
 }
 
+function getFileNameFromUrl(url) {
+  if (!url) return '链接未生成'
+  try {
+    const decoded = decodeURIComponent(url)
+    const parts = decoded.split('/')
+    const name = parts[parts.length - 1]
+    return name || decoded
+  } catch (e) {
+    return url
+  }
+}
+
 function scrollToBottom() {
   nextTick(() => {
-    if (chatMain.value) chatMain.value.scrollTop = chatMain.value.scrollHeight
+    if (messagesScrollArea.value) {
+      messagesScrollArea.value.scrollTop = messagesScrollArea.value.scrollHeight
+    }
   })
 }
 
@@ -1417,19 +2241,13 @@ function newConversation() {
       saveToHistory()
     }
 
-    messages.value = [
-      {
-        role: 'assistant',
-        content: '你好，我是 lktx，有什么可以帮你的吗？',
-        time: Date.now(),
-      },
-    ]
+    messages.value = []
 
     localStorage.setItem('chat_is_blank_session', 'true')
 
     nextTick(() => {
-      if (chatMain.value) {
-        chatMain.value.scrollTop = 0
+      if (messagesScrollArea.value) {
+        messagesScrollArea.value.scrollTop = 0
       }
       ElMessage.success('已创建新对话')
     })
@@ -1442,7 +2260,7 @@ function newConversation() {
 function fillQuestion(question) {
   inputText.value = question
   nextTick(() => {
-    const textarea = document.querySelector('.input-box textarea')
+    const textarea = document.querySelector('.chat-composer textarea')
     if (textarea) {
       textarea.focus()
       textarea.setSelectionRange(textarea.value.length, textarea.value.length)
@@ -1512,11 +2330,25 @@ async function processHeatInsulation(files) {
       subTasks: [
         {
           title: '✈️ 正在加速上传中',
-          tasks: ['正在分片上传文件...', '加速传输中...', '校验数据中...'],
+          tasks: [
+            '正在分片上传文件...',
+            '加速传输中...',
+            '校验数据中...',
+            '正在预检文件完整性...',
+            '匹配最优传输通道...',
+            '上传速率稳定中...',
+          ],
         },
         {
           title: '📊 正在解析文件结构',
-          tasks: ['读取Excel表格...', '解析单元格数据...', '构建数据模型...'],
+          tasks: [
+            '读取Excel表格...',
+            '解析单元格数据...',
+            '构建数据模型...',
+            '提取温度场数据...',
+            '检查异常值...',
+            '补全缺失参数...',
+          ],
         },
         {
           title: '🤖 AI智能计算中',
@@ -1525,11 +2357,19 @@ async function processHeatInsulation(files) {
             'AI计算热传导系数...',
             'AI合并计算中...',
             'AI验证结果中...',
+            'AI校准边界条件...',
+            'AI生成可视化数据...',
           ],
         },
         {
           title: '📄 正在生成报告',
-          tasks: ['生成PDF文档...', '添加图表数据...', '格式化排版中...'],
+          tasks: [
+            '生成PDF文档...',
+            '添加图表数据...',
+            '格式化排版中...',
+            '整理参考文献...',
+            '压缩打包结果...',
+          ],
         },
       ],
       subTaskIndex: 0,
@@ -1545,7 +2385,10 @@ async function processHeatInsulation(files) {
 
   messages.value.push(progressMsg)
   const msgIndex = messages.value.length - 1
-  nextTick(() => scrollToBottom())
+  nextTick(() => {
+    scrollToBottom()
+    drawerVisible.value = true // 开始处理时自动弹出右侧栏
+  })
 
   // ✅ 关键：在后台异步处理，但前端立即返回
   ;(async () => {
@@ -1744,7 +2587,10 @@ async function processStrengthCalculation(files) {
 
   messages.value.push(progressMsg)
   const msgIndex = messages.value.length - 1
-  nextTick(() => scrollToBottom())
+  nextTick(() => {
+    scrollToBottom()
+    drawerVisible.value = true // 开始处理时自动弹出右侧栏
+  })
 
   try {
     const formData = new FormData()
@@ -1757,6 +2603,97 @@ async function processStrengthCalculation(files) {
 
     // ✅ 关键：在上传回调中频繁检查终止状态
     let uploadAborted = false
+    let subTaskTimer = null
+    let currentSubTaskIndex = 0
+
+    // 更新子任务显示（完全基于随机延时，不依赖实际上传进度）
+    const updateSubTask = () => {
+      const msg = messages.value[msgIndex]
+      if (!msg?.progress || msg.progress.isTerminated) return
+
+      const currentSubTasks =
+        msg.progress.subTasks[msg.progress.currentStep]?.tasks || []
+      if (currentSubTasks.length > 0) {
+        // 使用随机延时（1.5-3秒）
+        const nextDelay = 1500 + Math.random() * 1500
+
+        setTimeout(() => {
+          const currentMsg = messages.value[msgIndex]
+          if (!currentMsg?.progress || currentMsg.progress.isTerminated) return
+
+          currentMsg.progress.subTaskIndex =
+            currentSubTaskIndex % currentSubTasks.length
+          currentMsg.progress.text =
+            currentSubTasks[currentMsg.progress.subTaskIndex]
+          currentSubTaskIndex++
+          nextTick(() => scrollToBottom())
+
+          // 继续下一个切换
+          if (!currentMsg.progress.isTerminated) {
+            updateSubTask()
+          }
+        }, nextDelay)
+      }
+    }
+
+    // 启动子任务轮播（首次立即执行）
+    updateSubTask()
+
+    // 虚假进度更新（完全基于随机延时）
+    const updateFakeProgress = () => {
+      const msg = messages.value[msgIndex]
+      if (!msg?.progress || msg.progress.isTerminated) return
+
+      // 根据当前步骤更新进度
+      const stepProgressMap = {
+        0: { min: 0, max: 45 }, // 上传阶段
+        1: { min: 45, max: 60 }, // 解析阶段
+        2: { min: 60, max: 75 }, // 计算阶段
+        3: { min: 75, max: 90 }, // 验证阶段
+      }
+
+      const currentStepProgress = stepProgressMap[msg.progress.currentStep]
+      if (currentStepProgress) {
+        // 在当前步骤的进度范围内随机增加
+        const currentProgress = msg.progress.percentage
+        const targetProgress =
+          currentStepProgress.min +
+          Math.random() *
+            (currentStepProgress.max -
+              Math.max(currentProgress, currentStepProgress.min))
+
+        if (targetProgress > currentProgress) {
+          const animateProgress = () => {
+            if (!msg.progress || msg.progress.isTerminated) return
+            const diff = targetProgress - msg.progress.percentage
+            if (Math.abs(diff) > 0.5) {
+              msg.progress.percentage = Math.min(
+                msg.progress.percentage + diff * 0.1,
+                targetProgress
+              )
+              nextTick(() => scrollToBottom())
+              requestAnimationFrame(animateProgress)
+            } else {
+              msg.progress.percentage = targetProgress
+              nextTick(() => scrollToBottom())
+            }
+          }
+          requestAnimationFrame(animateProgress)
+        }
+      }
+
+      // 随机延时后继续更新
+      const nextDelay = 800 + Math.random() * 1200
+      setTimeout(() => {
+        if (!msg.progress?.isTerminated) {
+          updateFakeProgress()
+        }
+      }, nextDelay)
+    }
+
+    // 启动虚假进度更新
+    updateFakeProgress()
+
     const res = await uploadToMinIO(
       formData,
       progressEvent => {
@@ -1765,42 +2702,67 @@ async function processStrengthCalculation(files) {
           uploadAborted = true
           throw new Error('用户已终止流程')
         }
-
-        if (progressEvent.lengthComputable && !uploadAborted) {
-          const percent = Math.round(
-            (progressEvent.loaded * 100) / progressEvent.total
-          )
-          const msg = messages.value[msgIndex]
-          msg.progress.percentage = Math.max(
-            msg.progress.percentage,
-            percent * 0.5
-          )
-          nextTick(() => scrollToBottom())
-        }
+        // 不再基于实际上传进度更新，完全使用虚假进度
       },
       messages.value[msgIndex].progress.abortController.signal
     )
 
+    if (subTaskTimer) clearInterval(subTaskTimer)
+
     if (messages.value[msgIndex]?.progress?.isTerminated || uploadAborted) {
       throw new Error('用户已终止流程')
     }
 
     if (res.code === 200 && res.data) {
       const msg = messages.value[msgIndex]
+
+      // 平滑过渡到解析阶段 (45% -> 60%)
+      const animateToStep1 = (start, end, duration = 800) => {
+        const startTime = Date.now()
+        const animate = () => {
+          if (!msg.progress || msg.progress.isTerminated) return
+          const elapsed = Date.now() - startTime
+          const progress = Math.min(elapsed / duration, 1)
+          const easeOutCubic = 1 - Math.pow(1 - progress, 3)
+          msg.progress.percentage = start + (end - start) * easeOutCubic
+          nextTick(() => scrollToBottom())
+          if (progress < 1) {
+            requestAnimationFrame(animate)
+          }
+        }
+        requestAnimationFrame(animate)
+      }
+
       msg.progress.stepStatus[0] = 'success'
       msg.progress.currentStep = 1
       msg.progress.text = '文件正在解析...'
-      msg.progress.percentage = 55
-      nextTick(() => scrollToBottom())
+      animateToStep1(msg.progress.percentage, 60)
+      await new Promise(resolve => setTimeout(resolve, 1200))
 
       if (msg.progress.isTerminated) throw new Error('用户已终止流程')
 
-      await new Promise(resolve => setTimeout(resolve, 800))
+      // 平滑过渡到计算阶段 (60% -> 75%)
+      const animateToStep2 = (start, end, duration = 1000) => {
+        const startTime = Date.now()
+        const animate = () => {
+          if (!msg.progress || msg.progress.isTerminated) return
+          const elapsed = Date.now() - startTime
+          const progress = Math.min(elapsed / duration, 1)
+          const easeOutCubic = 1 - Math.pow(1 - progress, 3)
+          msg.progress.percentage = start + (end - start) * easeOutCubic
+          nextTick(() => scrollToBottom())
+          if (progress < 1) {
+            requestAnimationFrame(animate)
+          }
+        }
+        requestAnimationFrame(animate)
+      }
+
       msg.progress.stepStatus[1] = 'success'
       msg.progress.currentStep = 2
       msg.progress.text = '文件正在计算应力...'
-      msg.progress.percentage = 70
-      nextTick(() => scrollToBottom())
+      animateToStep2(msg.progress.percentage, 75)
+      await new Promise(resolve => setTimeout(resolve, 1500))
 
       if (msg.progress.isTerminated) throw new Error('用户已终止流程')
 
@@ -1815,20 +2777,55 @@ async function processStrengthCalculation(files) {
         msg.convertedUrl = convertRes.data.paths
         msg.originalData = res.data
 
+        // 平滑过渡到验证阶段 (75% -> 90%)
+        const animateToStep3 = (start, end, duration = 800) => {
+          const startTime = Date.now()
+          const animate = () => {
+            if (!msg.progress || msg.progress.isTerminated) return
+            const elapsed = Date.now() - startTime
+            const progress = Math.min(elapsed / duration, 1)
+            const easeOutCubic = 1 - Math.pow(1 - progress, 3)
+            msg.progress.percentage = start + (end - start) * easeOutCubic
+            nextTick(() => scrollToBottom())
+            if (progress < 1) {
+              requestAnimationFrame(animate)
+            }
+          }
+          requestAnimationFrame(animate)
+        }
+
         msg.progress.stepStatus[2] = 'success'
         msg.progress.currentStep = 3
         msg.progress.text = '文件正在验证结果...'
-        msg.progress.percentage = 85
-        nextTick(() => scrollToBottom())
+        animateToStep3(msg.progress.percentage, 90)
+        await new Promise(resolve => setTimeout(resolve, 1000))
 
         if (msg.progress.isTerminated) throw new Error('用户已终止流程')
 
-        await new Promise(resolve => setTimeout(resolve, 500))
-        msg.progress.stepStatus[3] = 'success'
-        msg.progress.percentage = 100
-        msg.progress.status = 'success'
-        msg.progress.text = '✅ 处理完成！'
+        // 平滑过渡到完成 (90% -> 100%)
+        const animateToComplete = (start, end, duration = 600) => {
+          const startTime = Date.now()
+          const animate = () => {
+            if (!msg.progress || msg.progress.isTerminated) return
+            const elapsed = Date.now() - startTime
+            const progress = Math.min(elapsed / duration, 1)
+            const easeOutCubic = 1 - Math.pow(1 - progress, 3)
+            msg.progress.percentage = start + (end - start) * easeOutCubic
+            nextTick(() => scrollToBottom())
+            if (progress < 1) {
+              requestAnimationFrame(animate)
+            } else {
+              msg.progress.stepStatus[3] = 'success'
+              msg.progress.status = 'success'
+              msg.progress.text = '✅ 处理完成！'
+            }
+          }
+          requestAnimationFrame(animate)
+        }
+
+        animateToComplete(msg.progress.percentage, 100)
         msg.content = '强度计算文件上传并转换成功！'
+        await new Promise(resolve => setTimeout(resolve, 700))
         nextTick(() => scrollToBottom())
 
         setTimeout(() => {
@@ -1901,9 +2898,16 @@ async function performSearch(msg) {
       msg.searchResults = results
       msg.total = res.data.total || 0
       msg.totalPages = res.data.totalPages || 0
-      if (results.length === 0) msg.searchError = '未找到匹配的文档'
+      if (results.length === 0) {
+        msg.searchError = '未找到匹配的文档'
+        selectedSearchResult.value = null
+      } else {
+        // 自动选中第一个结果并在右侧栏显示
+        showDetailDoc(results[0], msg)
+      }
     } else {
       msg.searchError = res.message || '搜索失败'
+      selectedSearchResult.value = null
     }
   } catch (error) {
     console.error('搜索失败:', error)
@@ -1937,11 +2941,16 @@ function showDetailDoc(doc, msg) {
 
   // 显示当前详情
   doc.showDetail = true
+  // 设置选中的搜索结果，用于右侧栏显示
+  selectedSearchResult.value = doc
   nextTick(() => scrollToBottom())
 }
 
 function hideDetailDoc(doc) {
   doc.showDetail = false
+  if (selectedSearchResult.value?.id === doc.id) {
+    selectedSearchResult.value = null
+  }
 }
 
 function changePage(msg, direction) {
@@ -2014,6 +3023,36 @@ async function sendMessage() {
 
   if (!rawMessage || loading.value) return
 
+  const lowerMessage = rawMessage.toLowerCase()
+
+  // ✅ 模型身份判断（必须优先处理）
+  const modelIdentityKeywords = [
+    '什么模型',
+    '哪个模型',
+    '谁的问题',
+    '你是谁',
+    '你是什么',
+    'model?',
+    '你是谁？',
+    '你是什么？',
+  ]
+  if (modelIdentityKeywords.some(k => lowerMessage.includes(k))) {
+    messages.value.push({
+      role: 'user',
+      content: rawMessage,
+      time: Date.now(),
+    })
+    messages.value.push({
+      role: 'assistant',
+      content:
+        '我是基于Qwen模型的AI助手，在凌能空间中为您提供支持。不论是疑难解答、技术知识讲解，还是日常工作中的各种任务，我都可以为您提供高效、专业的帮助。无论您遇到什么问题，都可以随时向我提问，我会尽力为您提供最优的解决方案，助力您的开发之路更加顺畅！',
+      time: Date.now(),
+    })
+    inputText.value = ''
+    scrollToBottom()
+    return
+  }
+
   // ✅ 如果勾选了知识库，在问题前加上"知识库"前缀
   if (useKnowledgeBase.value) {
     rawMessage = '知识库' + rawMessage
@@ -2045,10 +3084,14 @@ async function sendMessage() {
   scrollToBottom()
 
   try {
-    const lowerMessage = rawMessage.toLowerCase()
-
     // ✅ 保留：前端直接判断文档检索
-    const searchKeywords = ['打开文档检索', '文档检索', '搜索文档', '查找文档']
+    const searchKeywords = [
+      '打开文档检索',
+      '文档检索',
+      '搜索文档',
+      '查找文档',
+      '搜索模型',
+    ]
     if (searchKeywords.some(k => lowerMessage.includes(k))) {
       const searchMsg = {
         role: 'assistant',
@@ -2276,10 +3319,6 @@ onMounted(() => {
   const isBlankSession =
     localStorage.getItem('chat_is_blank_session') === 'true'
 
-  if (historyList.value.length > 0 && !isBlankSession) {
-    messages.value = historyList.value[0].messages
-  }
-
   if (isBlankSession) {
     localStorage.removeItem('chat_is_blank_session')
   }
@@ -2367,4 +3406,1219 @@ function terminateProcess(msg, msgIndex) {
 }
 </script>
 
-<style src="./chat-layout.css" scoped></style>
+<style scoped>
+.chat-shell {
+  font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Helvetica Neue', sans-serif;
+  background: radial-gradient(
+      circle at 20% 20%,
+      hsla(200, 90%, 85%, 0.8),
+      transparent 45%
+    ),
+    radial-gradient(circle at 80% 0%, hsla(260, 85%, 88%, 0.7), transparent 40%),
+    radial-gradient(
+      circle at 0% 80%,
+      hsla(190, 90%, 85%, 0.65),
+      transparent 40%
+    ),
+    linear-gradient(135deg, hsl(217 91% 96%), hsl(220 30% 99%));
+}
+
+.chat-sidebar {
+  background: hsla(0, 0%, 100%, 0.72);
+  box-shadow: var(--shadow-glass);
+}
+
+.chat-main {
+  background: linear-gradient(
+      150deg,
+      hsla(217, 92%, 98%, 0.95) 0%,
+      hsla(210, 92%, 97%, 0.9) 35%,
+      hsla(260, 85%, 96%, 0.85) 70%,
+      hsla(200, 92%, 95%, 0.9) 100%
+    ),
+    radial-gradient(
+      circle at 65% 15%,
+      hsla(210, 95%, 92%, 0.55),
+      transparent 50%
+    );
+  position: relative;
+}
+
+.chat-main::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    120deg,
+    hsla(210, 90%, 98%, 0.65),
+    hsla(260, 95%, 99%, 0.45)
+  );
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+
+.chat-main > * {
+  position: relative;
+  z-index: 1;
+}
+
+.guide-answer {
+  line-height: 1.6;
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fade-up-enter-from,
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+.animate-fade-in {
+  animation: fadeInUp 0.6s ease forwards;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.source-files-card {
+  padding: 12px;
+  border-radius: 14px;
+  background: hsla(220, 25%, 99%, 0.8);
+  border: 1px solid hsla(220, 25%, 90%, 0.7);
+  backdrop-filter: blur(10px);
+  position: relative;
+  z-index: 1;
+}
+
+.search-card {
+  background: linear-gradient(145deg, hsla(220, 25%, 99%, 0.95), #f7fbff);
+  border: 1px solid hsla(220, 25%, 90%, 0.8);
+  border-radius: 20px;
+  padding: 20px;
+  backdrop-filter: blur(14px);
+  box-shadow: var(--shadow-glass);
+}
+
+.search-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.search-head__left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mode-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: linear-gradient(120deg, #3b82f6, #6366f1);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
+}
+
+.head-title {
+  font-weight: 700;
+  font-size: 16px;
+  color: hsl(var(--foreground));
+  line-height: 1.2;
+}
+
+.head-desc {
+  margin-top: 2px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.head-stats {
+  display: flex;
+  gap: 8px;
+}
+
+.stat-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid hsla(220, 25%, 92%, 0.9);
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
+}
+
+.stat-chip .label {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.stat-chip .value {
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.search-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.search-card :deep(.el-input__wrapper) {
+  background: hsla(220, 25%, 98%, 0.9);
+  border-radius: 14px;
+  border: 1px solid hsla(220, 20%, 90%, 0.9);
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
+}
+
+.quick-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.filter-chip {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #eef2ff;
+  color: #4338ca;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.search-results {
+  display: grid;
+  gap: 12px;
+}
+
+.result-card {
+  padding: 16px;
+  border-radius: 16px;
+  background: #fff;
+  border: 1px solid hsla(220, 25%, 90%, 0.8);
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
+}
+
+.result-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.result-title {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title-main {
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.title-sub {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.pill-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.pill-primary {
+  background: #ebf2ff;
+  color: #1d4ed8;
+}
+
+.pill-soft {
+  background: #f3f4f6;
+  color: #4b5563;
+}
+
+.result-body {
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+  margin: 12px 0;
+}
+
+.result-meta {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+}
+
+.meta-item {
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px dashed hsla(220, 15%, 88%, 0.9);
+}
+
+.meta-label {
+  display: block;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+.meta-value {
+  display: block;
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.result-preview {
+  width: 160px;
+  min-width: 140px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px dashed hsla(220, 15%, 88%, 0.9);
+  display: grid;
+  place-items: center;
+  padding: 6px;
+}
+
+.thumb-img {
+  max-width: 100%;
+  max-height: 110px;
+  border-radius: 10px;
+  border: 1px solid hsla(220, 25%, 90%, 0.8);
+  cursor: zoom-in;
+}
+
+.thumb-placeholder {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.result-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.action-buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.result-detail {
+  position: relative;
+  margin-top: 12px;
+  padding: 14px;
+  border-radius: 14px;
+  background: linear-gradient(120deg, #f8fbff, #f1f5f9);
+  border: 1px solid hsla(220, 25%, 90%, 0.9);
+}
+
+.close-detail-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.detail-content {
+  padding-top: 8px;
+  color: hsl(var(--foreground));
+  line-height: 1.6;
+  font-size: 13px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.detail-block {
+  padding: 12px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid hsla(220, 25%, 92%, 0.9);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
+}
+
+.detail-label {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 4px;
+}
+
+.detail-value {
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.thumb-wide .detail-img {
+  max-width: 100%;
+  max-height: 180px;
+  border-radius: 12px;
+  border: 1px solid hsla(220, 25%, 90%, 0.8);
+}
+
+.insight-card {
+  margin-top: 12px;
+  padding: 16px;
+  border-radius: 16px;
+  background: linear-gradient(150deg, #f8fbff, #f3f6ff);
+  border: 1px solid hsla(220, 25%, 92%, 0.9);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
+}
+
+.insight-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.insight-label {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  letter-spacing: 0.4px;
+}
+
+.insight-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.insight-sub {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.insight-badge {
+  padding: 8px 12px;
+  border-radius: 12px;
+  background: #ecfeff;
+  color: #0ea5e9;
+  font-weight: 700;
+  border: 1px solid #cffafe;
+}
+
+.insight-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.metric-block {
+  padding: 12px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid hsla(220, 25%, 92%, 0.9);
+}
+
+.metric-label {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.metric-value {
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.insight-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.tag-chip {
+  padding: 6px 10px;
+  border-radius: 10px;
+  background: #eef2ff;
+  color: #4338ca;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.insight-dimensions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.dim-item {
+  padding: 10px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px dashed hsla(220, 15%, 88%, 0.9);
+}
+
+.dim-label {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+.dim-value {
+  font-weight: 700;
+  color: hsl(var(--foreground));
+}
+
+.insight-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.result-box {
+  border-radius: 18px;
+  border: 1px solid hsla(220, 25%, 90%, 0.8);
+  background: hsla(220, 25%, 99%, 0.9);
+  padding: 16px;
+  box-shadow: var(--shadow-card);
+}
+
+.inline-progress {
+  margin-top: 12px;
+}
+
+.progress-text {
+  margin-top: 8px;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+}
+
+.scrolling-text-container {
+  margin-top: 12px;
+  border-radius: 12px;
+  padding: 14px 16px;
+  background: linear-gradient(
+    135deg,
+    hsla(220, 25%, 99%, 0.95) 0%,
+    hsla(220, 25%, 98%, 0.9) 100%
+  );
+  border: 1px solid hsla(220, 25%, 90%, 0.6);
+  box-shadow: 0 2px 8px hsla(220, 20%, 20% / 0.04);
+  backdrop-filter: blur(8px);
+}
+
+.scrolling-text-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  margin-bottom: 4px;
+}
+
+.scrolling-text-header .pulse-icon {
+  animation: pulse-icon 2s ease-in-out infinite;
+  color: hsl(var(--primary));
+}
+
+@keyframes pulse-icon {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+
+.scrolling-text-window {
+  overflow: hidden;
+  min-height: 32px;
+  margin-top: 8px;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.scrolling-text-item {
+  color: hsl(var(--foreground));
+  padding: 8px 0;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  width: 100%;
+}
+
+.scrolling-text-item.active .text-dot {
+  width: 6px;
+  height: 6px;
+  background: linear-gradient(
+    135deg,
+    hsl(217 91% 60%) 0%,
+    hsl(189 94% 50%) 100%
+  );
+  border-radius: 50%;
+  display: inline-block;
+  animation: pulse-dot 1.5s ease-in-out infinite;
+  box-shadow: 0 0 8px hsla(217 91% 60% / 0.5);
+  flex-shrink: 0;
+}
+
+@keyframes pulse-dot {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-15px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(15px);
+}
+
+.fade-slide-enter-to,
+.fade-slide-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.progress-steps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.step-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: hsla(220, 25%, 95%, 0.8);
+  font-size: 12px;
+}
+
+.step-item.completed {
+  background: rgba(74, 222, 128, 0.2);
+  color: #15803d;
+}
+
+.step-item.terminated {
+  background: rgba(248, 113, 113, 0.18);
+  color: #b91c1c;
+}
+
+.upload-status {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 16px;
+  border: 1px dashed hsla(220, 25%, 85%, 0.8);
+  background: hsla(220, 25%, 98%, 0.8);
+  color: hsl(var(--muted-foreground));
+}
+
+.upload-status.error {
+  border-color: rgba(248, 113, 113, 0.6);
+}
+
+.upload-status.terminated {
+  border-color: rgba(251, 191, 36, 0.7);
+}
+
+.report-card {
+  margin-top: 12px;
+  max-width: 700px;
+  width: 100%;
+  padding: 16px;
+  border-radius: 18px;
+  background: radial-gradient(
+      circle at 20% 20%,
+      rgba(59, 130, 246, 0.12),
+      transparent 35%
+    ),
+    radial-gradient(
+      circle at 80% 0%,
+      rgba(16, 185, 129, 0.12),
+      transparent 35%
+    ),
+    rgba(255, 255, 255, 0.92);
+  border: 1px solid hsla(220, 25%, 90%, 0.9);
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
+  display: grid;
+  gap: 12px;
+}
+
+.report-card__top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.report-card__icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  box-shadow: 0 12px 30px rgba(22, 163, 74, 0.25);
+}
+
+.report-card__title .label {
+  font-weight: 700;
+  color: hsl(var(--foreground));
+  font-size: 16px;
+}
+
+.report-card__title .sub {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  margin-top: 2px;
+}
+
+.report-card__body {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 14px;
+  background: hsla(220, 25%, 98%, 0.85);
+  border: 1px dashed hsla(220, 25%, 88%, 0.8);
+}
+
+.report-row {
+  display: grid;
+  grid-template-columns: 88px 1fr;
+  gap: 10px;
+  align-items: center;
+}
+
+.report-row .row-label {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.report-row .row-link {
+  color: #1d4ed8;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.report-row .row-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  color: hsl(var(--foreground));
+  word-break: break-all;
+}
+
+.report-card__actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.quick-questions-inline {
+  border-top: 1px dashed hsla(220, 25%, 90%, 0.8);
+  padding-top: 12px;
+  display: grid;
+  gap: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+.copy-btn {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  border: 1px solid hsla(220, 25%, 85%, 0.9);
+  background: hsla(220, 25%, 99%, 0.9);
+  box-shadow: var(--shadow-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--muted-foreground));
+}
+
+.chat-composer {
+  position: sticky;
+  bottom: 0;
+  transition: all 0.3s ease;
+}
+
+.chat-composer-card {
+  border-radius: 32px;
+  background: hsla(220, 25%, 99%, 0.9);
+  border: 1px solid hsla(220, 25%, 90%, 0.8);
+  padding: 24px;
+  box-shadow: var(--shadow-glass);
+  backdrop-filter: blur(18px);
+  transition: all 0.3s ease;
+}
+
+.chat-composer-card.is-capsule {
+  border-radius: 999px;
+  padding: 12px 20px;
+  min-height: auto;
+}
+
+.chat-composer-card.is-capsule .composer-inner {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-composer-card.is-capsule .composer-actions:first-child {
+  order: -1;
+  flex-shrink: 0;
+}
+
+.chat-composer-card.is-capsule .composer-textarea {
+  flex: 1;
+}
+
+.chat-composer-card.is-capsule .composer-textarea :deep(.el-textarea__inner) {
+  text-align: left;
+  min-height: 24px !important;
+  height: 24px !important;
+}
+
+.chat-composer-card.is-capsule .composer-actions {
+  flex-shrink: 0;
+  gap: 8px;
+}
+
+.attachment-preview {
+  border: 1px solid hsla(220, 25%, 90%, 0.6);
+  border-radius: 16px;
+  padding: 16px;
+  background: hsla(220, 25%, 99%, 0.95);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 8px hsla(220, 20%, 20% / 0.05);
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.preview-list {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+  overflow-x: auto;
+  padding-bottom: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: hsla(217, 20%, 60%, 0.2) transparent;
+}
+
+.preview-list::-webkit-scrollbar {
+  height: 4px;
+}
+
+.preview-list::-webkit-scrollbar-thumb {
+  background: hsla(217, 20%, 60%, 0.2);
+  border-radius: 2px;
+}
+
+.preview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: hsla(220, 25%, 98%, 0.9);
+  border: 1px solid hsla(220, 25%, 90%, 0.5);
+  min-width: 120px;
+  max-width: 160px;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.preview-item:hover {
+  background: hsla(220, 25%, 99%, 1);
+  border-color: hsla(220, 25%, 85%, 0.8);
+  box-shadow: 0 2px 8px hsla(220, 20%, 20% / 0.08);
+  transform: translateY(-2px);
+}
+
+.file-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: linear-gradient(
+    135deg,
+    hsl(217 91% 95%) 0%,
+    hsl(189 94% 95%) 100%
+  );
+  display: grid;
+  place-items: center;
+  color: hsl(var(--primary));
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.file-info {
+  width: 100%;
+  text-align: center;
+  min-width: 0;
+}
+
+.file-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 4px;
+}
+
+.file-size {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+.remove-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 4px !important;
+  min-height: auto !important;
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.composer-inner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.composer-inner .composer-textarea {
+  flex: 1;
+}
+
+.composer-inner .composer-actions:first-child {
+  order: -1;
+  flex-shrink: 0;
+}
+
+.composer-inner .composer-actions:last-child {
+  flex-shrink: 0;
+}
+
+.composer-textarea :deep(.el-textarea__inner) {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  font-size: 16px;
+  color: hsl(var(--foreground));
+  padding: 0;
+  line-height: 1.6;
+  text-align: left;
+}
+
+.composer-textarea :deep(.el-textarea__inner):focus {
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.composer-textarea :deep(.el-textarea__inner):hover {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.composer-textarea :deep(.el-input__wrapper) {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+.composer-textarea :deep(.el-input__wrapper):hover {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.composer-textarea :deep(.el-input__wrapper.is-focus) {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.composer-textarea :deep(.el-textarea__inner)::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+.composer-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.attach-btn {
+  border-color: hsla(220, 25%, 85%, 0.9);
+  color: hsl(var(--muted-foreground));
+}
+
+.keyboard-hint {
+  margin-top: 10px;
+  text-align: right;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.image-viewer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(12, 15, 30, 0.85);
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+
+.image-viewer-container {
+  position: relative;
+  max-width: 80vw;
+  max-height: 80vh;
+}
+
+.enlarged-image {
+  max-width: 100%;
+  max-height: 80vh;
+  border-radius: 18px;
+  box-shadow: var(--shadow-xl);
+}
+
+.close-viewer-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  border: none;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  cursor: pointer;
+}
+
+.scrollbar-custom {
+  scrollbar-width: thin;
+  scrollbar-color: hsla(217, 20%, 60%, 0.3) transparent;
+}
+
+.scrollbar-custom::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb {
+  background: hsla(217, 20%, 60%, 0.3);
+  border-radius: 999px;
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb:hover {
+  background: hsla(217, 20%, 50%, 0.5);
+}
+
+/* 隐藏消息区域的滚动条 */
+.flex-1.overflow-y-auto.px-8::-webkit-scrollbar {
+  display: none;
+}
+
+.flex-1.overflow-y-auto.px-8 {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* 发送按钮高级样式 */
+.send-btn-premium {
+  width: 48px !important;
+  height: 48px !important;
+  background: linear-gradient(
+    135deg,
+    hsl(217 91% 60%) 0%,
+    hsl(189 94% 50%) 100%
+  ) !important;
+  border: none !important;
+  box-shadow: 0 0 20px hsla(217 91% 60% / 0.4),
+    0 4px 12px hsla(217 91% 60% / 0.3) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: relative;
+  overflow: visible;
+}
+
+.send-btn-premium::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  background: linear-gradient(
+    135deg,
+    hsl(217 91% 70%) 0%,
+    hsl(189 94% 60%) 100%
+  );
+  opacity: 0;
+  filter: blur(8px);
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.send-btn-premium:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 30px hsla(217 91% 60% / 0.6),
+    0 6px 16px hsla(217 91% 60% / 0.4) !important;
+}
+
+.send-btn-premium:hover::before {
+  opacity: 0.6;
+}
+
+.send-btn-premium:active {
+  transform: scale(0.98);
+}
+
+.send-btn-premium:disabled {
+  opacity: 0.5;
+  transform: scale(1);
+  box-shadow: 0 0 10px hsla(217 91% 60% / 0.2) !important;
+}
+
+.send-btn-premium .el-icon {
+  font-size: 20px;
+  color: white;
+}
+
+/* 发送按钮发光动画 */
+@keyframes send-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 20px hsla(217 91% 60% / 0.4),
+      0 4px 12px hsla(217 91% 60% / 0.3);
+  }
+  50% {
+    box-shadow: 0 0 30px hsla(217 91% 60% / 0.6),
+      0 6px 16px hsla(217 91% 60% / 0.5);
+  }
+}
+
+.send-btn-premium:not(:disabled) {
+  animation: send-glow 3s ease-in-out infinite;
+}
+
+.chat-drawer-wrapper {
+  position: relative;
+  width: 0;
+  transition: width 0.3s ease;
+  z-index: 40;
+}
+
+.chat-drawer-wrapper:not(.drawer-collapsed) {
+  width: 520px;
+}
+
+.chat-drawer {
+  position: relative;
+  overflow: hidden;
+}
+
+.chat-drawer.translate-x-full {
+  position: absolute;
+  right: 0;
+}
+
+.drawer-open-btn {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.chat-drawer-wrapper.drawer-collapsed {
+  width: 20px;
+}
+
+.chat-drawer-wrapper.drawer-collapsed:hover {
+  width: 20px;
+}
+
+.chat-drawer-wrapper.drawer-collapsed:hover .drawer-open-btn {
+  opacity: 1;
+}
+
+@media (max-width: 1280px) {
+  .chat-drawer-wrapper,
+  .chat-drawer {
+    display: none;
+  }
+}
+</style>