From 3ba5779f12258de8cc09e51f4d6ff469f5fc91c2 Mon Sep 17 00:00:00 2001
From: Ethan-Zhang <ethanzhang55@outlook.com>
Date: Mon, 20 Oct 2025 08:19:41 +0800
Subject: [PATCH] =?UTF-8?q?Fix:=20=E5=A4=9A=E7=BB=84=E4=BB=B6=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/appCenter/appCenterService.ts        |   1 +
 src/apis/paths/mcp.ts                         |   1 +
 src/components/dialoguePanel/DialogueFlow.vue |   4 +-
 .../dialoguePanel/DialoguePanel.scss          |   5 +-
 .../dialoguePanel/DialoguePanel.vue           |  41 ++-
 src/views/api/index.vue                       |  64 +++-
 src/views/app/index.vue                       |  23 +-
 src/views/createapp/components/McpDrawer.vue  |  29 +-
 .../workFlowConfig/PluginListPanel.vue        |  24 +-
 .../components/workFlowConfig/PluginNode.vue  |  24 +-
 .../dialogue/components/AppInitalPreview.vue  |   8 +-
 .../dialogue/components/DialogueSession.vue   | 285 +++++++++++++++---
 src/views/dialogue/components/MessageItem.vue |  20 +-
 13 files changed, 437 insertions(+), 92 deletions(-)

diff --git a/src/apis/appCenter/appCenterService.ts b/src/apis/appCenter/appCenterService.ts
index b5553932..c4cac03f 100644
--- a/src/apis/appCenter/appCenterService.ts
+++ b/src/apis/appCenter/appCenterService.ts
@@ -22,6 +22,7 @@ export const queryAppList = (
           applications: {
             appId: string;
             author: string;
+            authorName: string;
             description: string;
             favorited: boolean;
             appType: 'flow' | 'agent';
diff --git a/src/apis/paths/mcp.ts b/src/apis/paths/mcp.ts
index 19313797..b4bd9851 100644
--- a/src/apis/paths/mcp.ts
+++ b/src/apis/paths/mcp.ts
@@ -23,6 +23,7 @@ const getMcpList = (params: {
         description: string;
         icon: string;
         author: string;
+        authorName: string;
         isActive: boolean;
         status: 'installing' | 'ready' | 'failed';
       },
diff --git a/src/components/dialoguePanel/DialogueFlow.vue b/src/components/dialoguePanel/DialogueFlow.vue
index cfd18a8d..ba127f4d 100644
--- a/src/components/dialoguePanel/DialogueFlow.vue
+++ b/src/components/dialoguePanel/DialogueFlow.vue
@@ -264,7 +264,7 @@ watch(
                     />
                     <div class="loading-icon-box">
                       <el-icon
-                        class="loading-icon"
+                        class="loading-title-icon"
                         v-if="secItem.status === 'success'"
                       >
                         <IconSuccess />
@@ -272,7 +272,7 @@ watch(
                     </div>
                     <div class="loading-icon-box">
                       <el-icon
-                        class="loading-icon"
+                        class="loading-title-icon"
                         v-if="secItem.status === 'error'"
                       >
                         <IconError />
diff --git a/src/components/dialoguePanel/DialoguePanel.scss b/src/components/dialoguePanel/DialoguePanel.scss
index 242b11d5..0fc93aee 100644
--- a/src/components/dialoguePanel/DialoguePanel.scss
+++ b/src/components/dialoguePanel/DialoguePanel.scss
@@ -333,7 +333,9 @@
 
     &-content {
       padding: 24px 24px 16px 24px;
-      border-top-right-radius: 8px;
+      border-radius: 8px;
+      border-top-left-radius: 0px;
+      background-color: var(--o-bg-color-base);
       overflow-wrap: break-word;
       text-align: justify;
       line-height: 24px;
@@ -354,6 +356,7 @@
     &-bottom {
       padding: 0px 24px;
       border-radius: 0 0 8px 8px;
+      background-color: var(--o-bg-color-light);
 
       .action-buttons {
         border-top: 1px dashed var(--o-border-color-light);
diff --git a/src/components/dialoguePanel/DialoguePanel.vue b/src/components/dialoguePanel/DialoguePanel.vue
index dee3b066..138fae2f 100644
--- a/src/components/dialoguePanel/DialoguePanel.vue
+++ b/src/components/dialoguePanel/DialoguePanel.vue
@@ -643,6 +643,7 @@ watch(
   },
 );
 
+
 onBeforeUnmount(() => {
   isComment.value = 'none';
   index.value = 0;
@@ -756,7 +757,6 @@ const chatWithParams = async () => {
             !thoughtContent,
         }"
       >
-        <!-- 🔑 目标分支：文件显示区域 -->
         <div v-if="props.fileList?.length" class="dialogue-panel__robot-file" @click="handleFileClick">
           <div class="file-title">
             <img src="@/assets/svgs/files.svg" alt="">
@@ -774,7 +774,6 @@ const chatWithParams = async () => {
           :flowdata="props.flowdata"
         />
         
-        <!-- 🔑 目标分支：Tooltip容器 -->
         <Teleport to="body">
           <div ref="tooltipRef"></div>
         </Teleport>
@@ -1083,30 +1082,52 @@ const chatWithParams = async () => {
   transition: 200ms;
 }
 
+/* 🔑 loading-icon旋转动画 */
+.loading-icon {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* 🔑 目标分支：文件显示区域样式 */
 .dialogue-panel__robot-file{
   display: inline-block;
-  background-color: var(--o-bg-color-light);
-  border-radius: 4px;
-  padding: 5px 8px;
-  margin-bottom: 8px;
+  background-color: var(--o-bg-color-base);
+  border: 1px solid var(--o-border-color-lighter);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin-bottom: 12px;
   font-size: 14px;
-  line-height: 22px;
-  color: var(--o-text-color-secondary);
+  line-height: 20px;
+  color: var(--o-text-color-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   
   .file-title{
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: 4px;
     cursor: pointer !important;
     &:hover{
       color: #7AA5FF;
     }
     img{
-      margin-right: 2px;
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+    }
+    span{
+      font-weight: 500;
     }
     .el-icon{
       color: var(--o-text-color-tertiary);
+      margin-left: auto;
     }
   }
 }
diff --git a/src/views/api/index.vue b/src/views/api/index.vue
index 13b5e8e6..95207c0a 100644
--- a/src/views/api/index.vue
+++ b/src/views/api/index.vue
@@ -200,7 +200,17 @@
                   <template #footer>
                     <div class="apiCenterCardBottom">
                       <div class="apiCenterCardFooter">
-                        <div class="apiCenterCardUser">@{{ item.author }}</div>
+                        <div class="apiCenterCardUser">
+                          <el-tooltip
+                            v-if="(item.authorName || item.author).length > 20"
+                            effect="dark"
+                            :content="`@${item.authorName || item.author}`"
+                            placement="top"
+                          >
+                            <span class="author-text">@{{ (item.authorName || item.author).slice(0, 20) }}...</span>
+                          </el-tooltip>
+                          <span v-else class="author-text">@{{ item.authorName || item.author }}</span>
+                        </div>
                         <div
                           class="apiCenterCardId"
                           v-if="pluginType === 'mcp'"
@@ -434,6 +444,7 @@ const pluginLists = ref<
     favorited?: boolean;
     icon: string;
     author: string;
+    authorName?: string;
     name: string;
     published?: boolean;
     isActive?: boolean;
@@ -567,8 +578,13 @@ const queryList = async (type: 'semantic_interface' | 'mcp') => {
       loading.value = false;
     }
   } else if (type === 'mcp') {
-    polling = true;
-    serialMcpPolling();
+    await queryMcpServices();
+    // 只有当有安装中的服务时才开始轮询
+    const hasInstallingServices = pluginLists.value.some(item => item.status === 'installing');
+    if (hasInstallingServices) {
+      polling = true;
+      serialMcpPolling();
+    }
   }
 };
 
@@ -602,6 +618,7 @@ async function queryMcpServices() {
         description: item.description,
         icon: item.icon,
         author: item.author,
+        authorName: item.authorName,
         name: item.name,
         isActive: item.isActive,
         status: item.status,
@@ -611,9 +628,13 @@ async function queryMcpServices() {
     currentPage.value = res.result.currentPage || currentPage.value;
     totalCount.value = res.result.totalCount || 0;
     
-    if (installingCount === 0 && timer) {
-      clearInterval(timer);
-      timer = null;
+    // 如果没有安装中的服务，停止轮询
+    if (installingCount === 0) {
+      polling = false;
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
     }
     loading.value = false;
   }
@@ -724,7 +745,12 @@ async function onInstallService(serviceId: string) {
   const [, res] = await api.installMcpService(serviceId);
   if (res) {
     successMsg(t('plugin_center.mcp.install_success'));
-    queryList(pluginType.value);
+    // 安装开始后，启动轮询监控安装状态
+    await queryMcpServices();
+    if (!polling) {
+      polling = true;
+      serialMcpPolling();
+    }
   }
 }
 
@@ -734,6 +760,19 @@ function onPluginTypeClick(type: 'semantic_interface' | 'mcp') {
   }
   pluginType.value = type;
   currentPage.value = 1;
+  
+  // 切换到MCP标签时，根据当前选中的子标签设置正确的查询参数
+  if (type === 'mcp') {
+    if (mcpType.value === 'all_select') {
+      mcpIsActive.value = null;
+      mcpIsInstall.value = null;
+    } else if (mcpType.value === 'installed') {
+      mcpIsInstall.value = true;
+    } else if (mcpType.value === 'not_installed') {
+      mcpIsInstall.value = false;
+    }
+  }
+  
   queryList(pluginType.value);
 }
 
@@ -864,6 +903,17 @@ onBeforeUnmount(() => {
   }
 }
 
+.apiCenterCardUser {
+  .author-text {
+    display: inline-block;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+}
+
 img {
   width: 100%;
   max-width: 430px;
diff --git a/src/views/app/index.vue b/src/views/app/index.vue
index 2b933f95..155528cc 100644
--- a/src/views/app/index.vue
+++ b/src/views/app/index.vue
@@ -109,7 +109,17 @@
               </div>
             </div>
             <div class="appCenterCardBottom">
-              <div class="appCenterCardUser">@{{ appItem.author }}</div>
+              <div class="appCenterCardUser">
+                <el-tooltip
+                  v-if="(appItem.authorName || appItem.author).length > 20"
+                  effect="dark"
+                  :content="`@${appItem.authorName || appItem.author}`"
+                  placement="top"
+                >
+                  <span class="author-text">@{{ (appItem.authorName || appItem.author).slice(0, 20) }}...</span>
+                </el-tooltip>
+                <span v-else class="author-text">@{{ appItem.authorName || appItem.author }}</span>
+              </div>
               <div
                 class="appCenterCardOps"
                 v-if="appItem.author === userinfo.user_sub"
@@ -396,6 +406,17 @@ watch(
   }
 }
 
+.appCenterCardUser {
+  .author-text {
+    display: inline-block;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+}
+
 img {
   width: 100%;
   max-width: 430px;
diff --git a/src/views/createapp/components/McpDrawer.vue b/src/views/createapp/components/McpDrawer.vue
index 36694e8f..4420802a 100644
--- a/src/views/createapp/components/McpDrawer.vue
+++ b/src/views/createapp/components/McpDrawer.vue
@@ -13,7 +13,7 @@ import ActiveModel from '@/views/api/components/ActiveModel.vue';
 
 const { t } = i18n.global;
 const activeModelVisible = ref(false);
-const activeModelItem = ref({});
+const activeModelItem = ref<any>({});
 const loading = ref(false);
 
 export interface Mcp {
@@ -22,6 +22,7 @@ export interface Mcp {
   name: string;
   author: string;
   description: string;
+  isActive: boolean;
 }
 
 interface McpWithChecked extends Mcp {
@@ -76,6 +77,11 @@ async function queryMcpList() {
 }
 
 function onMcpItemClick(item: McpWithChecked) {
+  // 未激活的App不可以被选中
+  if (!item.isActive) {
+    console.log('MCP服务未激活，无法选中:', item.name);
+    return;
+  }
   item.isChecked = !item.isChecked;
 }
 
@@ -191,7 +197,11 @@ async function onActiveService(
         </el-tabs>
         <div class="mcp-list" v-if="mcpList.length">
           <template v-for="item in mcpList" :key="item.id">
-            <div class="mcp-item" @click="onMcpItemClick(item)">
+            <div 
+              class="mcp-item" 
+              :class="{ disabled: !item.isActive }" 
+              @click="item.isActive ? onMcpItemClick(item) : null"
+            >
               <el-checkbox
                 v-model="item.isChecked"
                 :disabled="!item.isActive"
@@ -238,6 +248,7 @@ async function onActiveService(
     v-model:visible="activeModelVisible"
     :item="activeModelItem"
     :title="$t('plugin_center.mcp.active_mcp_service')"
+    type="add"
     @do-active="doActive"
   />
 </template>
@@ -304,6 +315,20 @@ async function onActiveService(
         border-radius: 4px;
         cursor: pointer;
 
+        &.disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+          
+          &:hover {
+            background-color: var(--el-collapse-header-bg);
+          }
+          
+          .mcp-item-status {
+            pointer-events: auto;
+            opacity: 1;
+          }
+        }
+
         p {
           max-width: 550px;
           white-space: nowrap;
diff --git a/src/views/createapp/components/workFlowConfig/PluginListPanel.vue b/src/views/createapp/components/workFlowConfig/PluginListPanel.vue
index 0d2cd452..f9fb02f9 100644
--- a/src/views/createapp/components/workFlowConfig/PluginListPanel.vue
+++ b/src/views/createapp/components/workFlowConfig/PluginListPanel.vue
@@ -105,7 +105,17 @@
               </div>
               <div class="plugin-desc">{{ plugin.description }}</div>
               <div class="plugin-footer">
-                <div class="plugin-author">@{{ plugin.author }}</div>
+                <div class="plugin-author">
+                  <el-tooltip
+                    v-if="(plugin.authorName || plugin.author).length > 20"
+                    effect="dark"
+                    :content="`@${plugin.authorName || plugin.author}`"
+                    placement="top"
+                  >
+                    <span class="author-text">@{{ (plugin.authorName || plugin.author).slice(0, 20) }}...</span>
+                  </el-tooltip>
+                  <span v-else class="author-text">@{{ plugin.authorName || plugin.author }}</span>
+                </div>
                 <div v-if="plugin.published !== undefined && plugin.type === 'semantic_interface'" class="plugin-meta">
                   {{ formatDate(plugin.published) }}
                 </div>
@@ -384,6 +394,7 @@ const loadMcpServices = async () => {
       description: item.description,
       icon: item.icon,
       author: item.author,
+      authorName: item.authorName,
       name: item.name,
       isActive: item.isActive,
       status: item.status,
@@ -988,4 +999,15 @@ defineExpose({
     }
   }
 }
+
+.plugin-author {
+  .author-text {
+    display: inline-block;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+}
 </style>
diff --git a/src/views/createapp/components/workFlowConfig/PluginNode.vue b/src/views/createapp/components/workFlowConfig/PluginNode.vue
index d99ddf25..15cc6591 100644
--- a/src/views/createapp/components/workFlowConfig/PluginNode.vue
+++ b/src/views/createapp/components/workFlowConfig/PluginNode.vue
@@ -37,7 +37,17 @@
           </div>
           <div class="plugin-info">
             <div class="plugin-name">{{ data.name }}</div>
-            <div class="plugin-author">@{{ data.author }}</div>
+            <div class="plugin-author">
+              <el-tooltip
+                v-if="(data.authorName || data.author).length > 15"
+                effect="dark"
+                :content="`@${data.authorName || data.author}`"
+                placement="top"
+              >
+                <span class="author-text">@{{ (data.authorName || data.author).slice(0, 15) }}...</span>
+              </el-tooltip>
+              <span v-else class="author-text">@{{ data.authorName || data.author }}</span>
+            </div>
           </div>
         </div>
         
@@ -120,6 +130,7 @@ interface PluginNodeData {
   description: string;
   icon?: string;
   author: string;
+  authorName?: string;
   pluginType: 'semantic_interface' | 'mcp';
   type: string;
   isActive?: boolean;
@@ -724,4 +735,15 @@ const handleSourceHandleLeave = () => {
     background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
   }
 }
+
+.plugin-author {
+  .author-text {
+    display: inline-block;
+    max-width: 120px; // 节点空间较小，使用更小的最大宽度
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/dialogue/components/AppInitalPreview.vue b/src/views/dialogue/components/AppInitalPreview.vue
index 3358e8fb..25f609f4 100644
--- a/src/views/dialogue/components/AppInitalPreview.vue
+++ b/src/views/dialogue/components/AppInitalPreview.vue
@@ -11,12 +11,6 @@
       </div>
       <div class="dialogue-conversation-bottom-sendbox__upload">
         <div class="upload-wrapper">
-          <input
-            ref="uploadButton"
-            type="file"
-            multiple
-            src="@/assets/svgs/upload_light.svg"
-          />
           <el-icon :size="20" class="upload-icon">
             <img
               v-if="themeStore.theme === 'dark'"
@@ -104,7 +98,7 @@ watch(
   }
 
   &__textarea {
-    height: 60%;
+    height: 80%;
     position: relative;
 
     textarea {
diff --git a/src/views/dialogue/components/DialogueSession.vue b/src/views/dialogue/components/DialogueSession.vue
index 4fd71733..f8419e7e 100644
--- a/src/views/dialogue/components/DialogueSession.vue
+++ b/src/views/dialogue/components/DialogueSession.vue
@@ -7,7 +7,7 @@ import InitalPanel from 'src/views/dialogue/components/InitalPanel.vue';
 import InterPreview from 'src/views/dialogue/components/InterPreview.vue';
 import MultiSelectTags from 'src/views/dialogue/components/MultiSelectTags.vue';
 import { storeToRefs } from 'pinia';
-import { IconCaretRight } from '@computing/opendesign-icons';
+import { IconCaretRight, IconX } from '@computing/opendesign-icons';
 import { useSessionStore, useChangeThemeStore } from 'src/store';
 import type { ConversationItem, RobotConversationItem } from '../types';
 import type { UploadFileCard } from 'src/components/uploadFile/type.ts';
@@ -21,11 +21,42 @@ import { successMsg, errorMsg } from 'src/components/Message';
 import i18n from 'src/i18n';
 import DialogueVariablePanel from './DialogueVariablePanel.vue';
 import { listVariables } from '@/api/variable';
+// 🔑 文件类型图标导入
+import docSvg from '@/assets/svgs/doc.svg';
+import docxSvg from '@/assets/svgs/docx.svg';
+import mdSvg from '@/assets/svgs/md.svg';
+import pdfSvg from '@/assets/svgs/pdf.svg';
+import txtSvg from '@/assets/svgs/txt_green.svg';
+import xlsxSvg from '@/assets/svgs/xlsx.svg';
+import htmlSvg from '@/assets/svgs/html.svg';
+import jpegSvg from '@/assets/svgs/jpeg.svg';
+import pngSvg from '@/assets/svgs/png.svg';
+import jsonSvg from '@/assets/svgs/json.svg';
+import pptxSvg from '@/assets/svgs/pptx.svg';
+import yamlSvg from '@/assets/svgs/yaml.svg';
+import zipSvg from '@/assets/svgs/zip.svg';
 const isDropdownOpen = ref(false);
 const { appList } = storeToRefs(useSessionStore());
 const { user_selected_app, selectLLM, historySession } = storeToRefs(useHistorySessionStore());
 const { getHistorySession } = useHistorySessionStore();
 
+// 🔑 文件类型图标映射
+const typeSvgMap = {
+  doc: docSvg,
+  docx: docxSvg,
+  md: mdSvg,
+  pdf: pdfSvg,
+  txt: txtSvg,
+  xlsx: xlsxSvg,
+  html: htmlSvg,
+  jpeg: jpegSvg,
+  png: pngSvg,
+  json: jsonSvg,
+  pptx: pptxSvg,
+  yaml: yamlSvg,
+  zip: zipSvg,
+};
+
 export interface DialogueSession {
   isCreateApp?: any;
   createAppForm: any;
@@ -1105,7 +1136,10 @@ const formatDate = (timestamp: number) => {
  */
 const getFormatFileList = (ConversationItem, str) => {
   let fileList: any = getItem(ConversationItem, str);
-  if (!fileList || fileList?.length === 0) return;
+  if (!fileList || fileList?.length === 0) {
+    return []; // 返回空数组而不是undefined
+  }
+  
   let newFileList: any = [];
   fileList?.forEach((file) => {
     if (file.associated === 'answer') {
@@ -1122,6 +1156,7 @@ const getFormatFileList = (ConversationItem, str) => {
       });
     }
   });
+  
   return newFileList;
 };
 
@@ -1235,7 +1270,7 @@ const getFormatFileList = (ConversationItem, str) => {
           :test="getItem(item, 'test')"
           :metadata="getItem(item, 'metadata')"
           :flowdata="getItem(item, 'flowdata')"
-          :files="getItem(item, 'files')"
+          :fileList="getItem(item, 'files')"
           :created-at="item.createdAt"
           :current-selected="item.currentInd"
           :need-regernerate="item.cid === conversationList.slice(-1)[0].cid"
@@ -1458,53 +1493,62 @@ const getFormatFileList = (ConversationItem, str) => {
         <CommonFooter />
       </footer>
     </div>
-    <div v-if="showFileSource" class="dialogue-rightContainer__file-source">
-      <div class="file-source__header">
-        <div class="file-source__title">
-          <span>{{ $t('upload.reference_source') }}</span>
-          <span>{{ curFileList.length || 0 }}</span>
+    <!-- 🔑 使用el-drawer替代固定右侧面板 -->
+    <el-drawer
+      v-model="showFileSource"
+      title=""
+      direction="rtl"
+      size="500px"
+      :show-close="false"
+      class="file-source-drawer"
+    >
+      <template #header>
+        <div class="file-source__header">
+          <div class="file-source__title">
+            <span>{{ $t('upload.reference_source') }}</span>
+            <span>{{ curFileList.length || 0 }}</span>
+          </div>
+          <el-icon @click="closeShowFileSource">
+            <IconX />
+          </el-icon>
         </div>
-        <el-icon @click="closeShowFileSource">
-          <IconX />
-        </el-icon>
-      </div>
-      <div class="file-source__content-container">
-        <div class="file-source__content">
-          <div
-            v-for="(file, index) in curFileList"
-            :key="index"
-            class="file-source__item"
-          >
-            <div class="file-source__item-header">
-              <div class="file-source__item-header-left">
-                <span class="file-source__order">
-                  {{ file?.documentorder ?? index + 1 }}
-                </span>
-                <div class="file-source__type-icon">
-                  <el-icon :size="16" class="file-type-icon">
-                    <img :src="typeSvgMap[file?.documentType]" alt="" />
-                  </el-icon>
-                </div>
-                <span class="file-source__name">{{ file?.documentName }}</span>
+      </template>
+      
+      <div class="file-source__content">
+        <div
+          v-for="(file, index) in curFileList"
+          :key="index"
+          class="file-source__item"
+        >
+          <div class="file-source__item-header">
+            <div class="file-source__item-header-left">
+              <span class="file-source__order">
+                {{ file?.documentorder ?? index + 1 }}
+              </span>
+              <div class="file-source__type-icon">
+                <el-icon :size="16" class="file-type-icon">
+                  <img :src="typeSvgMap[file?.documentType] || typeSvgMap['pdf']" alt="" />
+                </el-icon>
               </div>
-              <el-tooltip content="下载" placement="top">
-                <span
-                  class="file-source__download"
-                  @click="downLoadSourceFile(file)"
-                ></span>
-              </el-tooltip>
-            </div>
-            <span class="file-source__desc">
-              {{ file?.documentAbstract ?? '' }}
-            </span>
-            <div class="file-source__footer">
-              <span>@{{ file?.documentAuthor }}</span>
-              <span>{{ formatDate(file?.createdAt) }}</span>
+              <span class="file-source__name">{{ file?.documentName }}</span>
             </div>
+            <el-tooltip content="下载" placement="top">
+              <span
+                class="file-source__download"
+                @click="downLoadSourceFile(file)"
+              ></span>
+            </el-tooltip>
+          </div>
+          <span class="file-source__desc">
+            {{ file?.documentAbstract ?? '' }}
+          </span>
+          <div class="file-source__footer">
+            <span>@{{ file?.documentAuthor }}</span>
+            <span>{{ formatDate(file?.createdAt) }}</span>
           </div>
         </div>
       </div>
-    </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -2096,4 +2140,157 @@ button[disabled]:hover {
   }
 }
 
+// 🔑 el-drawer文件源样式
+:deep(.file-source-drawer) {
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0;
+    border-bottom: 1px solid var(--o-border-color-lighter);
+  }
+  
+  .el-drawer__body {
+    padding: 0;
+  }
+}
+
+.file-source__header {
+  padding: 16px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  .file-source__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--o-text-color-primary);
+    
+    span:last-child {
+      background: var(--o-color-primary);
+      color: white;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
+  
+  .el-icon {
+    cursor: pointer;
+    color: var(--o-text-color-tertiary);
+    
+    &:hover {
+      color: var(--o-text-color-primary);
+    }
+  }
+}
+
+.file-source__content {
+  padding: 0;
+  
+  .file-source__item {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--o-border-color-extralight);
+    
+    &:hover {
+      background: var(--o-bg-color-light);
+    }
+    
+    .file-source__item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 8px;
+      
+      .file-source__item-header-left {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        flex: 1;
+        
+        .file-source__order {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 20px;
+          height: 20px;
+          background: var(--o-color-primary);
+          color: white;
+          border-radius: 50%;
+          font-size: 12px;
+          font-weight: 600;
+          flex-shrink: 0;
+        }
+        
+        .file-source__type-icon {
+          flex-shrink: 0;
+          
+          .el-icon {
+            width: 20px;
+            height: 20px;
+            
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+        }
+        
+        .file-source__name {
+          font-size: 14px;
+          font-weight: 500;
+          color: var(--o-text-color-primary);
+          line-height: 20px;
+          word-break: break-all;
+        }
+      }
+      
+      .file-source__download {
+        width: 20px;
+        height: 20px;
+        background: url('@/assets/svgs/file_download.svg') no-repeat center;
+        background-size: 16px 16px;
+        cursor: pointer;
+        opacity: 0.6;
+        flex-shrink: 0;
+        
+        &:hover {
+          background-image: url('@/assets/svgs/file_download_hover.svg');
+          opacity: 1;
+        }
+        
+        &:active {
+          background-image: url('@/assets/svgs/file_download_active.svg');
+        }
+      }
+    }
+    
+    .file-source__desc {
+      font-size: 12px;
+      color: var(--o-text-color-secondary);
+      line-height: 18px;
+      margin-bottom: 8px;
+      display: block;
+      word-break: break-all;
+    }
+    
+    .file-source__footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      color: var(--o-text-color-tertiary);
+      
+      span {
+        &:first-child {
+          color: var(--o-text-color-secondary);
+        }
+      }
+    }
+  }
+}
+
 </style>
diff --git a/src/views/dialogue/components/MessageItem.vue b/src/views/dialogue/components/MessageItem.vue
index 8a2497a6..1c396ab4 100644
--- a/src/views/dialogue/components/MessageItem.vue
+++ b/src/views/dialogue/components/MessageItem.vue
@@ -62,7 +62,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import { api } from '@/apis';
 import { UserMessageStatus } from '@/apis/paths/userMessage';
 
@@ -163,16 +163,6 @@ const handleReject = async () => {
 
 const handleDelete = async () => {
   try {
-    await ElMessageBox.confirm(
-      '确定要删除这条消息吗？',
-      '删除确认',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-    );
-
     deleteLoading.value = true;
     const [error, response] = await api.deleteUserMessage(props.message.msgId);
     
@@ -189,11 +179,8 @@ const handleDelete = async () => {
       ElMessage.error(response?.message || '删除消息失败');
     }
   } catch (error) {
-    // 用户取消删除
-    if (error !== 'cancel') {
-      console.error('删除消息异常:', error);
-      ElMessage.error('删除消息异常');
-    }
+    console.error('删除消息异常:', error);
+    ElMessage.error('删除消息异常');
   } finally {
     deleteLoading.value = false;
   }
@@ -251,6 +238,7 @@ const handleDelete = async () => {
   line-height: 1.5;
   word-break: break-word;
   margin-bottom: 8px;
+  width: 90%;
 }
 
 .message-footer {
-- 
Gitee