[Mod 0000]AI智能助手下载提示条组件封装

src/views/ventAI/manageAssistent/components/AiAssistantModal.vue

@@ -74,13 +74,12 @@
         />
 
         <!-- 下载确认条 -->
-        <div v-if="downloadConfirm && downloadConfirmTaskId === currentTaskId" class="download-confirm-bar">
-          <span class="download-confirm-text">是否下载 {{ downloadConfirm.filename }} 到本地？</span>
-          <div class="download-confirm-actions">
-            <button class="download-confirm-btn download-btn" @click="doDownload">下载</button>
-            <button class="download-confirm-btn cancel-btn" @click="clearDownloadConfirm">取消</button>
-          </div>
-        </div>
+        <DownloadConfirmBar
+          v-if="downloadConfirm && downloadConfirmTaskId === currentTaskId"
+          :filename="downloadConfirm.filename"
+          @confirm="doDownload"
+          @cancel="clearDownloadConfirm"
+        />
 
         <!-- 任务进度条 -->
         <TodoListBar v-if="showTodoBar" :todos="currentTodos" />
@@ -145,6 +144,7 @@
   import ChatInputArea from './chatModal/ChatInputArea.vue';
   import FilePreviewPanel from './chatModal/FilePreviewPanel.vue';
   import TodoListBar from './chatModal/TodoListBar.vue';
+  import DownloadConfirmBar from './chatModal/DownloadConfirmBar.vue';
   import type { AttachedFile, Message, Task } from './chatModal/types';
   import { isTextFile } from './chatModal/utils';
 
@@ -1649,61 +1649,6 @@
     overflow: hidden;
     min-width: 0;
 
-    .download-confirm-bar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px 16px;
-      margin: 0 16px;
-      background: #0a2a3f;
-      border: 1px solid #1a4a6f;
-      border-radius: 8px;
-      flex-shrink: 0;
-
-      .download-confirm-text {
-        font-size: 13px;
-        color: #e0e6ed;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-right: 12px;
-      }
-
-      .download-confirm-actions {
-        display: flex;
-        gap: 8px;
-        flex-shrink: 0;
-      }
-
-      .download-confirm-btn {
-        padding: 4px 14px;
-        border-radius: 4px;
-        font-size: 12px;
-        cursor: pointer;
-        border: none;
-        transition: all 0.2s;
-
-        &.download-btn {
-          background: #0a84ff;
-          color: #fff;
-
-          &:hover {
-            background: #3a9bfd;
-          }
-        }
-
-        &.cancel-btn {
-          background: rgba(255, 255, 255, 0.08);
-          color: #e0e6ed;
-          border: 1px solid rgba(63, 80, 106, 0.5);
-
-          &:hover {
-            background: rgba(255, 255, 255, 0.15);
-          }
-        }
-      }
-    }
-
     :deep(.chat-header) {
       display: flex;
       padding: 12px 20px;

src/views/ventAI/manageAssistent/components/chatModal/DownloadConfirmBar.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="download-confirm-bar">
+    <span class="download-confirm-text">是否下载 {{ filename }} 到本地？</span>
+    <div class="download-confirm-actions">
+      <button class="download-confirm-btn download-btn" @click="emit('confirm')">下载</button>
+      <button class="download-confirm-btn cancel-btn" @click="emit('cancel')">取消</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    filename: string;
+  }
+
+  defineProps<Props>();
+  const emit = defineEmits<{
+    (e: 'confirm'): void;
+    (e: 'cancel'): void;
+  }>();
+</script>
+
+<style scoped lang="less">
+  .download-confirm-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    margin: 0 16px;
+    background: #0a2a3f;
+    border: 1px solid #1a4a6f;
+    border-radius: 8px;
+    flex-shrink: 0;
+
+    .download-confirm-text {
+      font-size: 13px;
+      color: #e0e6ed;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 12px;
+    }
+
+    .download-confirm-actions {
+      display: flex;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .download-confirm-btn {
+      padding: 4px 14px;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s;
+
+      &.download-btn {
+        background: #0a84ff;
+        color: #fff;
+
+        &:hover {
+          background: #3a9bfd;
+        }
+      }
+
+      &.cancel-btn {
+        background: rgba(255, 255, 255, 0.08);
+        color: #e0e6ed;
+        border: 1px solid rgba(63, 80, 106, 0.5);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.15);
+        }
+      }
+    }
+  }
+</style>