From 762401777b1f31d0db1b8bf721d00f077c461ebf Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 28 Sep 2026 11:30:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(ai-chat):=20=E5=A2=9E=E5=BC=BA=E5=A4=9A?=
 =?UTF-8?q?=E5=AA=92=E4=BD=93=E6=B6=88=E6=81=AF=E5=A4=84=E7=90=86=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=9A=E6=9D=A1=E8=AF=AD=E9=9F=B3=E5=92=8C?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E5=90=8C=E6=97=B6=E5=8F=91=E9=80=81=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF=E6=B0=94=E6=B3=A1=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages_tool/ai-chat/ai-chat-message.vue | 198 +++++++++++++++++--------
 1 file changed, 139 insertions(+), 59 deletions(-)

diff --git a/pages_tool/ai-chat/ai-chat-message.vue b/pages_tool/ai-chat/ai-chat-message.vue
index 0c697f2..a47a268 100644
--- a/pages_tool/ai-chat/ai-chat-message.vue
+++ b/pages_tool/ai-chat/ai-chat-message.vue
@@ -39,10 +39,10 @@
       </view>
       
       <!-- 消息列表 -->
-      <!-- PR-USER-MULTI-VOICE-FILTER (2026-09-28): 补 voiceList / attachments 字段检查
+      <!-- PR-USER-MULTI-VOICE-FILTER (2026-09-28): 补 voiceList / videoList / attachments 字段检查
            原过滤只识别顶层 fileName / audioUrl / imageUrl / videoUrl,
-           多条语音消息顶层无这些字段 (在 voiceList 里嵌套), 会被误过滤掉不渲染
-           修复: 显式判断 voiceList 非空 + attachments 非空 -->
+           多条语音/视频消息顶层无这些字段 (在 voiceList/videoList 里嵌套), 会被误过滤掉不渲染
+           修复: 显式判断 voiceList / videoList 非空 + attachments 非空 -->
       <view
         v-for="(message, index) in messages.filter(msg =>
           msg.type === 'loading'
@@ -51,6 +51,7 @@
           || msg.audioUrl
           || msg.videoUrl
           || (msg.voiceList && msg.voiceList.length)
+          || (msg.videoList && msg.videoList.length)
           || (msg.attachments && msg.attachments.length)
           || (msg.content && msg.content.trim() !== '')
         )"
@@ -86,29 +87,46 @@
             </view>
             <!-- PR-FRONTEND-MEDIA-UPLOAD (2026-09-16): 用户文件气泡
                  tools-panel _uploadOneFile 选 kind='file'/'video'/'audio' 时,
-                 m.type + m.fileName/size + m.imageUrl=本地预览(若有) / m.uploaded.url 上传后 URL -->
-            <view v-else-if="message.type === 'file'" class="message-bubble user-file-bubble" @click="previewUserFile(message)">
-              <view class="file-item">
-                <view class="file-icon"><text class="iconfont icon-file"></text></view>
-                <view class="file-info">
-                  <text class="file-name">{{ message.fileName || '文件' }}</text>
-                  <text class="file-size">{{ formatFileSize(message.fileSize) }}</text>
+                 m.type + m.fileName/size + m.imageUrl=本地预览(若有) / m.uploaded.url 上传后 URL
+                 PR-USER-MEDIA-TYPE-BUBBLE (2026-09-28): 文件 + 文字混合时, 配文显示在文件下方 -->
+            <view v-else-if="message.type === 'file'" class="user-media-group">
+              <view class="message-bubble user-file-bubble" @click="previewUserFile(message)">
+                <view class="file-item">
+                  <view class="file-icon"><text class="iconfont icon-file"></text></view>
+                  <view class="file-info">
+                    <text class="file-name">{{ message.fileName || '文件' }}</text>
+                    <text class="file-size">{{ formatFileSize(message.fileSize) }}</text>
+                  </view>
+                  <view v-if="message.uploading" class="upload-mask"><text class="upload-tip">上传中...</text></view>
+                  <view v-if="message.uploadError" class="upload-mask upload-error"><text class="upload-tip">{{ message.uploadError }}</text></view>
                 </view>
-                <view v-if="message.uploading" class="upload-mask"><text class="upload-tip">上传中...</text></view>
-                <view v-if="message.uploadError" class="upload-mask upload-error"><text class="upload-tip">{{ message.uploadError }}</text></view>
+              </view>
+              <!-- 文件配文: 独立气泡, 显示在文件下方 -->
+              <view v-if="message.content" class="message-bubble image-caption-bubble">
+                <text class="message-text" selectable>{{ message.content }}</text>
               </view>
             </view>
-            <!-- 用户视频消息气泡 (视频上传): 内嵌播放器 -->
-            <view v-else-if="message.type === 'video'" class="message-bubble user-video-bubble">
-              <view class="video-item">
-                <video
-                  class="user-video"
-                  :src="message.url || message.imageUrl"
-                  :controls="true"
-                  :autoplay="false"
-                  object-fit="contain"></video>
-                <view v-if="message.uploading" class="upload-mask"><text class="upload-tip">上传中...</text></view>
-                <view v-if="message.uploadError" class="upload-mask upload-error"><text class="upload-tip">{{ message.uploadError }}</text></view>
+            <!-- 用户视频消息气泡 (视频上传): 内嵌播放器
+                 PR-USER-MEDIA-TYPE-BUBBLE (2026-09-28): 视频 + 文字混合时, 配文显示在视频下方
+                 (与图片的 image-caption-bubble 风格一致)
+                 PR-USER-MULTI-VIDEO (2026-09-28): 支持多条视频同时发送,
+                 每条视频独占一个 user-video-bubble, v-for 渲染多个 <video> 播放器
+                 (与 voiceList 的多语音渲染方式一致) -->
+            <view v-else-if="message.type === 'video'" class="user-media-group">
+              <view v-for="(v, idx) in (message.videoList || [])" :key="idx" class="message-bubble user-video-bubble">
+                <view class="video-item">
+                  <video
+                    class="user-video"
+                    :src="v.url"
+                    controls
+                    :autoplay="false"
+                    preload="none"
+                    object-fit="contain"></video>
+                </view>
+              </view>
+              <!-- 视频配文: 独立气泡, 显示在视频下方 -->
+              <view v-if="message.content" class="message-bubble image-caption-bubble">
+                <text class="message-text" selectable>{{ message.content }}</text>
               </view>
             </view>
             <!-- PR-USER-VOICE-BUBBLE (2026-09-28): 用户语音消息气泡
@@ -126,7 +144,7 @@
                   <text class="icondiy" :class="v.playing ? 'icon-system-pause-circle-fill' : 'icon-system-play-circle-fill'"></text>
                 </view>
                 <view class="voice-info">
-                  <text class="voice-label">{{ v.fileName || $lang('ai-chat.index.audioMessage') || '语音' }}</text>
+                  <text class="voice-label">{{ $lang('ai-chat.index.audioMessage') || '语音' }}</text>
                   <view class="voice-progress-track">
                     <view class="voice-progress-bar" :style="{ width: getVoiceProgress(v) + '%' }"></view>
                   </view>
@@ -1752,14 +1770,22 @@ async loadChatHistoryIfExist() {
       // PR-USER-VOICE-MESSAGE-TYPE (2026-09-28): 识别"语音"场景
       //   原代码对所有非图片消息都设 type='text', 把音频当成普通附件 (📎文件名) 渲染,
       //   用户根本看不到自己发的语音. 改为:
-      //     - 有图片        → type='image'  (图片气泡为主, 语音走 attachments 由后端接收)
+      //     - 有图片        → type='image'  (图片气泡为主, 其他走 attachments)
+      //     - 有视频        → type='video'  (视频气泡为主, 内嵌播放器)
       //     - 有语音(可多条)→ type='audio'  (语音气泡为主, 复用 voice-msg 样式)
-      //     - 其他          → type='text'   (文字/普通附件)
+      //     - 有文件        → type='file'   (文件气泡为主, 带文件名/大小)
+      //     - 其他          → type='text'   (纯文字)
       //   PR-USER-MULTI-VOICE (2026-09-28): 支持多条语音同时发送,
       //   把 pendingFilesList 里的音频拆出来 → voiceList 数组, 每条独立可播放.
-      //   优先级: 图片 > 语音 > 文字/附件 (图片永远独占气泡)
+      //   PR-USER-MEDIA-TYPE-BUBBLE (2026-09-28): 修复视频/文件被错误归到 type='text'
+      //   渲染成空文字气泡 + 🎬/📎 卡片的 bug. 现在每种 kind 都有专属气泡.
+      //   优先级: 图片 > 视频 > 语音 > 文件 > 文字 (高优先级类型独占气泡, 其余挂到 attachments)
       const voiceFiles = pendingFilesList.filter(p => p.uploaded && p.uploaded.kind === 'audio')
+      const videoFiles = pendingFilesList.filter(p => p.uploaded && p.uploaded.kind === 'video')
+      const fileFiles = pendingFilesList.filter(p => p.uploaded && p.uploaded.kind === 'file')
       const hasVoice = voiceFiles.length > 0
+      const hasVideo = videoFiles.length > 0
+      const hasFile = fileFiles.length > 0
 
       const userMessage = firstPendingImage
         ? {
@@ -1774,48 +1800,96 @@ async loadChatHistoryIfExist() {
             content: hasContent ? this.inputText.trim() : '',
             timestamp: Date.now()
           }
-        : hasVoice
+        : hasVideo
           ? (() => {
-              // PR-USER-MULTI-VOICE: 每条 voice 一个独立播放对象, 不再共用 message.url
-              //   模板 v-for 渲染多行 voice-msg, 每行点击 openVoiceOverlay(v)
+              // PR-USER-MULTI-VIDEO (2026-09-28): 支持多条视频同时发送
+              //   视频全部走 videoList 数组, 模板 v-for 渲染多个 <video> 播放器,
+              //   每条视频独占一个气泡, 跟 voiceList 类似.
+              //   修复了之前只取首个视频、其他被 filter 掉丢失的 bug.
               return {
                 id: ++this.messageId,
                 role: 'user',
-                type: 'audio',
-                // 用户文本(若有)挂到 content, 模板里渲染在语音列表下方
+                type: 'video',
+                // 用户文本(若有)挂到 content
                 content: userText,
-                // 多条语音逐条渲染, 每条独立可播放
-                voiceList: voiceFiles.map(a => ({
-                  url: (a.uploaded && a.uploaded.url) || a.url || '',
-                  fileName: a.fileName || '',
-                  fileSize: a.fileSize || 0,
-                  mime: (a.uploaded && a.uploaded.mime) || a.fileType || '',
-                  // duration 保持录音器原始单位 (ms), 模板里 /1000 转换显示
-                  duration: a.duration || 0,
-                  playing: false,
-                  currentTime: 0
+                // 多条视频逐条渲染, 每条独立内嵌播放器
+                videoList: videoFiles.map(v => ({
+                  url: (v.uploaded && v.uploaded.url) || v.url || '',
+                  fileName: v.fileName || '',
+                  fileSize: v.fileSize || 0,
+                  duration: v.duration || 0,
+                  mime: (v.uploaded && v.uploaded.mime) || v.fileType || ''
                 })),
-                // 纯语音时 attachments 留空; 语音+其他文件时把非音频文件挂到 attachments
-                //   (voiceList 已覆盖音频, 避免重复渲染 voice-msg + 📎)
-                //   音频的 base64 数据已通过 fileAttachments → readyAttachments 传给后端,
-                //   这里 attachments 不放音频不影响后端通信.
-                attachments: voiceFiles.length === pendingFilesList.length
+                // 非视频文件(语音/普通文件)挂到 attachments 由下方文件卡渲染
+                //   注意: videoList 已覆盖所有视频, 这里 attachments 不放视频, 避免重复渲染
+                attachments: videoFiles.length === pendingFilesList.length
                   ? []
-                  : displayAttachments.filter(a => a.kind !== 'audio'),
+                  : displayAttachments.filter(a => a.kind !== 'video' && a.kind !== 'image'),
                 timestamp: Date.now()
               }
             })()
-          : {
-              id: ++this.messageId,
-              role: 'user',
-              type: 'text',
-              // PR-FRONTEND-VOICE-INPUT (2026-09-24): 用户气泡只显示用户自己输入的文字
-              //   给 AI 的指令 hint 在 queryText 里, 这里不要污染用户气泡
-              content: userText,
-              // 纯文件(无图)时把文件挂到 attachments, 用户消息气泡下方展示文件卡片
-              attachments: displayAttachments,
-              timestamp: Date.now()
-            }
+          : hasVoice
+            ? (() => {
+                // PR-USER-MULTI-VOICE: 每条 voice 一个独立播放对象, 不再共用 message.url
+                //   模板 v-for 渲染多行 voice-msg, 每行点击 openVoiceOverlay(v)
+                return {
+                  id: ++this.messageId,
+                  role: 'user',
+                  type: 'audio',
+                  // 用户文本(若有)挂到 content, 模板里渲染在语音列表下方
+                  content: userText,
+                  // 多条语音逐条渲染, 每条独立可播放
+                  voiceList: voiceFiles.map(a => ({
+                    url: (a.uploaded && a.uploaded.url) || a.url || '',
+                    fileName: a.fileName || '',
+                    fileSize: a.fileSize || 0,
+                    mime: (a.uploaded && a.uploaded.mime) || a.fileType || '',
+                    // duration 保持录音器原始单位 (ms), 模板里 /1000 转换显示
+                    duration: a.duration || 0,
+                    playing: false,
+                    currentTime: 0
+                  })),
+                  // 纯语音时 attachments 留空; 语音+其他文件时把非音频文件挂到 attachments
+                  //   (voiceList 已覆盖音频, 避免重复渲染 voice-msg + 📎)
+                  //   音频的 base64 数据已通过 fileAttachments → readyAttachments 传给后端,
+                  //   这里 attachments 不放音频不影响后端通信.
+                  attachments: voiceFiles.length === pendingFilesList.length
+                    ? []
+                    : displayAttachments.filter(a => a.kind !== 'audio' && a.kind !== 'image'),
+                  timestamp: Date.now()
+                }
+              })()
+            : hasFile
+              ? (() => {
+                  // PR-USER-MEDIA-TYPE-BUBBLE: 文件气泡, 带文件名 + 大小
+                  //   取首个文件为主 (一个气泡放不下多文件, 其余走 attachments 文件卡)
+                  const file = fileFiles[0]
+                  return {
+                    id: ++this.messageId,
+                    role: 'user',
+                    type: 'file',
+                    // 用户文本(若有)挂到 content
+                    content: userText,
+                    url: (file.uploaded && file.uploaded.url) || file.url || '',
+                    fileName: file.fileName || '',
+                    fileSize: file.fileSize || 0,
+                    mime: file.fileType || '',
+                    // 非文件项挂到 attachments (但图片已在第一分支,实际只可能视频/音频混入)
+                    attachments: displayAttachments.filter(a => a.kind !== 'file' && a.kind !== 'image'),
+                    timestamp: Date.now()
+                  }
+                })()
+              : {
+                  id: ++this.messageId,
+                  role: 'user',
+                  type: 'text',
+                  // PR-FRONTEND-VOICE-INPUT (2026-09-24): 用户气泡只显示用户自己输入的文字
+                  //   给 AI 的指令 hint 在 queryText 里, 这里不要污染用户气泡
+                  content: userText,
+                  // 纯文字(无任何附件)时 attachments 留空
+                  attachments: [],
+                  timestamp: Date.now()
+                }
       this.shouldScrollToBottom = true
       this.messages.push(userMessage)
       this.inputText = ''
@@ -6448,6 +6522,12 @@ _handleStreamError(msg) {
         font-size: 24rpx;
         color: rgba(255, 255, 255, 0.92);
         line-height: 1;
+        /* PR-CROSS-PLATFORM-VOICE-LABEL (2026-09-28): 异常长 i18n 文案或
+           user-agent 自带文本时, 不撑破气泡宽度, 跨平台一致 */
+        max-width: 240rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .voice-progress-track {