From e7ec3877350002cb023f3e0f3d79bd0df014dff1 Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Sun, 30 Mar 2025 16:22:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E6=96=87=E4=BB=B6=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E4=B8=AD=E5=8F=8B=E5=A5=BD=E6=8F=90=E7=A4=BA=EF=BC=9B?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E5=A4=B1?=
 =?UTF-8?q?=E8=B4=A5=E5=9C=BA=E6=99=AF=E5=9B=BE=E6=A0=87=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=9B=E8=A7=A3=E5=86=B3=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?loading=E9=97=AE=E9=A2=98=EF=BC=9B=E6=9B=BF=E6=8D=A2=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E8=BF=9B=E5=BA=A6=E6=9D=A1=E9=A2=9C=E8=89=B2=E6=9B=B4?=
 =?UTF-8?q?=E9=86=92=E7=9B=AE=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                              |   2 +
 src/components/async-error/index.vue         |  79 ++++++++
 src/components/async-loading/index.vue       |  78 ++++++++
 src/components/talk/message/FileMessage.vue  |  23 ++-
 src/components/talk/message/ImageMessage.vue |  61 +++++--
 src/components/talk/message/VideoMessage.vue | 123 +++++++++----
 src/main.js                                  |   4 +
 src/pages/dialog/components/filePanel.vue    | 179 ++++++++++++-------
 src/pages/dialog/index.vue                   |  28 ++-
 src/store/modules/uploads.ts                 |  41 ++++-
 10 files changed, 493 insertions(+), 125 deletions(-)
 create mode 100644 src/components/async-error/index.vue
 create mode 100644 src/components/async-loading/index.vue

diff --git a/components.d.ts b/components.d.ts
index 2f10b66..c5aef78 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AsyncError: typeof import('./src/components/async-error/index.vue')['default']
+    AsyncLoading: typeof import('./src/components/async-loading/index.vue')['default']
     AudioMessage: typeof import('./src/components/talk/message/AudioMessage.vue')['default']
     Avatar: typeof import('./src/components/base/Avatar.vue')['default']
     AvatarCropper: typeof import('./src/components/base/AvatarCropper.vue')['default']
diff --git a/src/components/async-error/index.vue b/src/components/async-error/index.vue
new file mode 100644
index 0000000..a23dd6d
--- /dev/null
+++ b/src/components/async-error/index.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from 'vue';
+location.reload(true);
+</script>
+
+<template>
+  <div class="loader">
+  <p class="heading">加载中</p>
+  <div class="loading">
+    <div class="load"></div>
+    <div class="load"></div>
+    <div class="load"></div>
+    <div class="load"></div>
+  </div>
+</div>
+</template>
+<!-- 重启页面 -->
+ 
+<style scoped lang="scss">
+.loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.heading {
+  color: black;
+  letter-spacing: 0.2em;
+  margin-bottom: 1em;
+}
+
+.loading {
+  display: flex;
+  width: 5em;
+  align-items: center;
+  justify-content: center;
+}
+
+.load {
+  width: 23px;
+  height: 3px;
+  background-color: limegreen;
+  animation: 1s move_5011 infinite;
+  border-radius: 5px;
+  margin: 0.1em;
+}
+
+.load:nth-child(1) {
+  animation-delay: 0.2s;
+}
+
+.load:nth-child(2) {
+  animation-delay: 0.4s;
+}
+
+.load:nth-child(3) {
+  animation-delay: 0.6s;
+}
+
+@keyframes move_5011 {
+  0% {
+    width: 0.2em;
+  }
+
+  25% {
+    width: 0.7em;
+  }
+
+  50% {
+    width: 1.5em;
+  }
+
+  100% {
+    width: 0.2em;
+  }
+}
+</style>
diff --git a/src/components/async-loading/index.vue b/src/components/async-loading/index.vue
new file mode 100644
index 0000000..5bb623b
--- /dev/null
+++ b/src/components/async-loading/index.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue';
+
+</script>
+
+<template>
+  <div class="loader">
+  <p class="heading">加载中</p>
+  <div class="loading">
+    <div class="load"></div>
+    <div class="load"></div>
+    <div class="load"></div>
+    <div class="load"></div>
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.heading {
+  color: black;
+  letter-spacing: 0.2em;
+  margin-bottom: 1em;
+}
+
+.loading {
+  display: flex;
+  width: 5em;
+  align-items: center;
+  justify-content: center;
+}
+
+.load {
+  width: 23px;
+  height: 3px;
+  background-color: limegreen;
+  animation: 1s move_5011 infinite;
+  border-radius: 5px;
+  margin: 0.1em;
+}
+
+.load:nth-child(1) {
+  animation-delay: 0.2s;
+}
+
+.load:nth-child(2) {
+  animation-delay: 0.4s;
+}
+
+.load:nth-child(3) {
+  animation-delay: 0.6s;
+}
+
+@keyframes move_5011 {
+  0% {
+    width: 0.2em;
+  }
+
+  25% {
+    width: 0.7em;
+  }
+
+  50% {
+    width: 1.5em;
+  }
+
+  100% {
+    width: 0.2em;
+  }
+}
+</style>
diff --git a/src/components/talk/message/FileMessage.vue b/src/components/talk/message/FileMessage.vue
index 6735c14..0d121c3 100644
--- a/src/components/talk/message/FileMessage.vue
+++ b/src/components/talk/message/FileMessage.vue
@@ -55,7 +55,7 @@ const getFileTypeIMG = computed(() => {
     default:
       objT.finishedImg = filePaperOther
       objT.blankImg = filePaperOtherBlank
-      objT.progressColor = '#747474'
+      objT.progressColor = '#46299d'
   }
   return objT
 })
@@ -132,7 +132,7 @@ const downloadAndOpenFile = () => {
           :height="95"
           :src="getFileTypeIMG.blankImg"
         ></tm-image>
-        <wd-circle
+        <wd-circle v-if="data.uploadStatus  === 1"
           customClass="circleProgress"
           :modelValue="data.uploadCurrent"
           layerColor="#E3E3E3"
@@ -140,6 +140,9 @@ const downloadAndOpenFile = () => {
           :strokeWidth="3"
           :size="20"
         ></wd-circle>
+        <div class="upload-failed" v-if="data.uploadStatus === 3">
+          <tm-icon :font-size="20" name="tmicon-times" color="#fff"></tm-icon>
+        </div>
       </div>
     </div>
     <div class="divider mt-[28rpx]"></div>
@@ -288,4 +291,20 @@ const downloadAndOpenFile = () => {
   width: 40rpx !important;
   height: 40rpx !important;
 }
+
+.upload-failed {
+  position: absolute;
+  top: 120rpx;
+  right: 52rpx;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ff4d4f;
+  background: #ff4d4f;
+  border-radius: 50%;
+}
 </style>
diff --git a/src/components/talk/message/ImageMessage.vue b/src/components/talk/message/ImageMessage.vue
index 8a84a27..9f6a226 100644
--- a/src/components/talk/message/ImageMessage.vue
+++ b/src/components/talk/message/ImageMessage.vue
@@ -12,40 +12,40 @@ const img = computed(() => {
   // console.log(props.extra);
   let info = {
     width: 0,
-    height: 0
+    height: 0,
   }
   if (props.extra.url.includes('blob:http://')) {
     info = {
       width: props.extra.width,
-      height: props.extra.height
+      height: props.extra.height,
     }
-  }else {
+  } else {
     info = getImageInfo(props.extra.url)
   }
 
   if (info.width == 0 || info.height == 0) {
     return {
       width: 450,
-      height: 298
+      height: 298,
     }
   }
-  if(info.width<300){
+  if (info.width < 300) {
     return {
       width: 300,
-      height: info.height / (info.width / 300)
+      height: info.height / (info.width / 300),
     }
   }
 
   if (info.width < 350) {
     return {
       width: info.width,
-      height: info.height
+      height: info.height,
     }
   }
 
   return {
     width: 350,
-    height: info.height / (info.width / 350)
+    height: info.height / (info.width / 350),
   }
 })
 </script>
@@ -54,13 +54,30 @@ const img = computed(() => {
     class="im-message-image"
     :class="{
       left: data.float === 'left',
-      right: data.float === 'right'
+      right: data.float === 'right',
     }"
   >
-  <div class="image-container">
-    <tm-image preview :width="img.width" :height="img.height" :src="extra.url" model="aspectFill"/>
-    <wd-circle custom-class="circleProgress" v-if="props.data.uploadCurrent && props.data.uploadCurrent<100"  v-model="props.data.uploadCurrent" color="#ffffff" layer-color="#E3E3E3"></wd-circle>
-  </div>
+    <div class="image-container">
+      <div class="relative">
+        <tm-image
+          preview
+          :width="img.width"
+          :height="img.height"
+          :src="extra.url"
+          model="aspectFill"
+        />
+        <wd-circle
+          custom-class="circleProgress"
+          v-if="data.uploadStatus  === 1"
+          v-model="props.data.uploadCurrent"
+          color="#46299d"
+          layer-color="#E3E3E3"
+        ></wd-circle>
+        <div class="upload-failed" v-if="data.uploadStatus === 3">
+          <tm-icon :font-size="20" name="tmicon-times" color="#fff"></tm-icon>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 <style lang="less" scoped>
@@ -79,12 +96,12 @@ const img = computed(() => {
   }
 
   &.right {
-    background-color: #46299D;
+    background-color: #46299d;
     border-radius: 16rpx 0 16rpx 16rpx;
   }
 }
 .image-container {
-    position: relative;
+  position: relative;
 
   .circleProgress {
     position: absolute;
@@ -94,4 +111,18 @@ const img = computed(() => {
     z-index: 1;
   }
 }
+.upload-failed {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ff4d4f;
+  border-radius: 50%;
+}
 </style>
diff --git a/src/components/talk/message/VideoMessage.vue b/src/components/talk/message/VideoMessage.vue
index a4dc217..a11ffcf 100644
--- a/src/components/talk/message/VideoMessage.vue
+++ b/src/components/talk/message/VideoMessage.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref, nextTick, getCurrentInstance, computed, onMounted } from 'vue'
 import { getImageInfo } from '@/utils/functions'
-import playCircle from "@/static/image/chatList/playCircle@2x.png";
-import { useStatus } from "@/store/status";
+import playCircle from '@/static/image/chatList/playCircle@2x.png'
+import { useStatus } from '@/store/status'
 
 const { statusBarHeight } = useStatus()
 const instance = getCurrentInstance()
@@ -20,12 +20,12 @@ const open = ref(false)
 const img = computed(() => {
   let info = {
     width: 0,
-    height: 0
+    height: 0,
   }
   if (props.extra.url.includes('blob:http://')) {
     info = {
       width: props.extra.width,
-      height: props.extra.height
+      height: props.extra.height,
     }
   } else {
     info = getImageInfo(props.extra.url)
@@ -34,26 +34,26 @@ const img = computed(() => {
   if (info.width == 0 || info.height == 0) {
     return {
       width: 450,
-      height: 298
+      height: 298,
     }
   }
   if (info.width < 300) {
     return {
       width: 300,
-      height: info.height / (info.width / 300)
+      height: info.height / (info.width / 300),
     }
   }
 
   if (info.width < 350) {
     return {
       width: info.width,
-      height: info.height
+      height: info.height,
     }
   }
 
   return {
     width: 350,
-    height: info.height / (info.width / 350)
+    height: info.height / (info.width / 350),
   }
 })
 
@@ -67,14 +67,14 @@ const fullscreenchange = (e) => {
 
 /* 视频播放 获取第一帧 */
 const canplay = (e) => {
-  console.log('Video can play:', e);
+  console.log('Video can play:', e)
 
   if (e.target) {
     setTimeout(() => {
-      e.target.pause();
-    }, 200);
+      e.target.pause()
+    }, 200)
   }
-};
+}
 
 async function onPlay() {
   open.value = true
@@ -92,41 +92,73 @@ async function onPlay() {
   }, 200)
 }
 onMounted(() => {
-  videoRef.value = uni.createVideoContext(props.data.msg_id);
+  videoRef.value = uni.createVideoContext(props.data.msg_id)
   videoRef.value.play()
   setTimeout(() => {
     videoRef.value.pause()
-  }, 200);
-
+  }, 200)
 })
 </script>
 <template>
-  <section class="im-message-video" :class="{ left: data.float === 'left' }" @click="onPlay">
-    <div class="coverVideo" :style="{
-      width: img.width + 'rpx',
-      height: img.height + 'rpx'
-    }" v-if="props.extra.url.includes('blob:http://')">
-      <video :id="data.msg_id" :autoplay="false" disablepictureinpicture muted :src="props.extra.url" width="100%"
-        height="100%" playsinline preload="auto" controls="false" x5-playsinline
-        webkit-playsinline style="object-fit: cover; pointer-events: none;">
-      </video>
+  <section
+    class="im-message-video"
+    :class="{ left: data.float === 'left' }"
+    @click="onPlay"
+  >
+    <div
+      class="coverVideo"
+      :style="{
+        width: img.width + 'rpx',
+        height: img.height + 'rpx',
+      }"
+      v-if="props.extra.url.includes('blob:http://')"
+    >
+      <video
+        :id="data.msg_id"
+        :autoplay="false"
+        disablepictureinpicture
+        muted
+        :src="props.extra.url"
+        width="100%"
+        height="100%"
+        playsinline
+        preload="auto"
+        controls="false"
+        x5-playsinline
+        webkit-playsinline
+        style="object-fit: cover; pointer-events: none;"
+      ></video>
     </div>
-    <wd-img v-else :width="`${img.width}rpx`" :height="`${img.height}rpx`" :src="data.extra.cover" />
-    <div v-if="data.uploadStatus === 2 || !data.uploadStatus" class="btn-video" :style="{
-      width: img.width + 'rpx',
-      height: img.height + 'rpx'
-    }">
+    <wd-img
+      v-else
+      :width="`${img.width}rpx`"
+      :height="`${img.height}rpx`"
+      :src="data.extra.cover"
+    />
+    <div
+      v-if="data.uploadStatus === 2 || !data.uploadStatus"
+      class="btn-video"
+      :style="{
+        width: img.width + 'rpx',
+        height: img.height + 'rpx',
+      }"
+    >
       <tm-image :src="playCircle" :width="80" :height="80" />
     </div>
-    <div v-else class="btn-video" :style="{
-      width: img.width + 'rpx',
-      height: img.height + 'rpx'
-    }" >
+    <div
+      v-else
+      class="btn-video"
+      :style="{
+        width: img.width + 'rpx',
+        height: img.height + 'rpx',
+      }"
+    >
       <wd-circle
+        v-if="data.uploadStatus === 1"
         v-model="props.data.uploadCurrent"
         customClass="circleProgress"
-        layerColor="#E3E3E3"
-        color="#FFFFFF"
+        color="#46299d"
+        layer-color="#E3E3E3"
         :strokeWidth="6"
         :size="40"
       ></wd-circle>
@@ -140,6 +172,9 @@ onMounted(() => {
         :width="70"
         :percent="props.data.uploadCurrent">
       </tm-progress> -->
+      <div class="upload-failed" v-if="data.uploadStatus === 3">
+        <tm-icon :font-size="20" name="tmicon-times" color="#fff"></tm-icon>
+      </div>
     </div>
   </section>
 
@@ -162,7 +197,7 @@ onMounted(() => {
 .im-message-video {
   overflow: hidden;
   padding: 20rpx 18rpx;
-  background: #46299D;
+  background: #46299d;
   min-width: 30rpx;
   min-height: 30rpx;
   display: inline-flex;
@@ -220,7 +255,6 @@ onMounted(() => {
   :deep(.uni-video-bar) {
     display: none;
   }
-
 }
 .circleProgress {
   width: 80rpx !important;
@@ -245,4 +279,19 @@ onMounted(() => {
   height: 100%;
   object-fit: contain;
 }
+
+.upload-failed {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ff4d4f;
+  border-radius: 50%;
+}
 </style>
diff --git a/src/main.js b/src/main.js
index a5d29b0..94ae8fe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,8 @@ import tmui from '@/uni_modules/tmui'
 import { config } from '@/config/tmui/index.js'
 import 'dayjs/locale/zh-cn'
 import xLoaderror from '@/components/x-loaderror/index.vue'
+import asyncLoading from '@/components/async-loading/index.vue'
+import asyncError from '@/components/async-error/index.vue'
 import { vLoading } from '@/components/x-loading/index.js'
 import messagePopup from '@/components/x-message/useMessagePopup'
 import pageAnimation from '@/components/page-animation/index.vue'
@@ -29,6 +31,8 @@ export function createApp() {
   app.mixin(pageAnimation)
   app.component('customNavbar', customNavbar)
   app.component('x-loaderror', xLoaderror)
+  app.component('AsyncLoading', asyncLoading)
+  app.component('AsyncError', asyncError)
   app.directive('no-space', {
     mounted(el) {
       el.addEventListener('input', (e) => {
diff --git a/src/pages/dialog/components/filePanel.vue b/src/pages/dialog/components/filePanel.vue
index 33df9ad..f2550c6 100644
--- a/src/pages/dialog/components/filePanel.vue
+++ b/src/pages/dialog/components/filePanel.vue
@@ -181,12 +181,13 @@ const photoActionsSelect = (index) => {
 }
 
 const onUploadImageVideo = async (file, type = 'image', fileUrl) => {
-  console.log(file, 'file')
+  console.log('开始上传文件:', file.name)
+  uploadsStore.updateUploadStatus(true)
   return new Promise(async (resolve) => {
     if (type === 'image') {
       let image = new Image()
       image.src = URL.createObjectURL(file)
-      image.onload = () => {
+      image.onload = async () => {
         const form = new FormData()
         form.append('file', file)
         form.append('source', 'fonchain-chat')
@@ -220,44 +221,62 @@ const onUploadImageVideo = async (file, type = 'image', fileUrl) => {
         }
 
         virtualList.value.unshift(newItem)
-        uploadImg(form, (e) => onProgressFn(e, randomId)).then(
-          ({ status, data, msg }) => {
-            if (status == 0) {
-              // 更新上传状态为成功
-              const index = virtualList.value.findIndex(
-                (item) => item.file_num === randomId,
-              )
-              if (index !== -1) {
-                virtualList.value[index].uploadStatus = 2
-                virtualList.value[index].uploadCurrent = 100
-              }
-              resolve({
-                type: 'image',
-                url: data.ori_url,
-                size: file.size,
-                width: image.width,
-                height: image.height,
-                file_num: randomId,
-              })
-            } else {
-              // 更新上传状态为失败
-              const index = virtualList.value.findIndex(
-                (item) => item.file_num === randomId,
-              )
-              if (index !== -1) {
-                virtualList.value[index].uploadStatus = 3
-              }
-              resolve('')
-              message.error(msg)
+
+        try {
+          const result = await uploadImg(form, (e) => onProgressFn(e, randomId))
+          console.log('上传完成，结果:', result)
+
+          if (result.status === 0) {
+            // 更新上传状态为成功
+            const index = virtualList.value.findIndex(
+              (item) => item.file_num === randomId,
+            )
+            if (index !== -1) {
+              virtualList.value[index].uploadStatus = 2
+              virtualList.value[index].uploadCurrent = 100
             }
-          },
-        )
+
+            // 确保返回数据
+            resolve({
+              type: 'image',
+              url: result.data.ori_url,
+              size: file.size,
+              width: image.width,
+              height: image.height,
+              file_num: randomId,
+            })
+          } else {
+            uploadsStore.updateUploadStatus(false)
+            // 更新上传状态为失败
+            const index = virtualList.value.findIndex(
+              (item) => item.file_num === randomId,
+            )
+            if (index !== -1) {
+              virtualList.value[index].uploadStatus = 3
+            }
+            message.error(result.msg)
+            resolve('')
+          }
+        } catch (error) {
+          console.error('上传出错:', error)
+          uploadsStore.updateUploadStatus(false)
+          // 更新上传状态为失败
+          const index = virtualList.value.findIndex(
+            (item) => item.file_num === randomId,
+          )
+          if (index !== -1) {
+            virtualList.value[index].uploadStatus = 3
+          }
+          message.error('上传失败')
+          resolve('')
+        }
       }
     } else {
       uni.getVideoInfo({
         src: fileUrl,
-        success: (resp) => {
-          console.log(resp)
+        success: async (resp) => {
+          console.log('视频信息:', resp)
+          const form = new FormData()
           form.append('file', file)
           form.append('source', 'fonchain-chat')
           form.append('type', 'video')
@@ -287,45 +306,65 @@ const onUploadImageVideo = async (file, type = 'image', fileUrl) => {
             talk_type: dialogueStore.talk.talk_type,
             user_id: userStore.uid,
             uploadCurrent: 0,
-            uploadStatus: 1, // 1 上传中 2 上传成功 3 上传失败
+            uploadStatus: 1,
           }
           virtualList.value.unshift(newItem)
-          uploadImg(form, (e) => onProgressFn(e, randomId)).then(
-            ({ status, data, msg }) => {
-              if (status == 0) {
-                // 更新上传状态为成功
-                const index = virtualList.value.findIndex(
-                  (item) => item.file_num === randomId,
-                )
-                if (index !== -1) {
-                  virtualList.value[index].uploadStatus = 2
-                  virtualList.value[index].uploadCurrent = 100
-                }
-                console.log(data)
-                resolve({
-                  type: 'video',
-                  url: data.ori_url,
-                  cover: data.cover_url,
-                  duration: parseInt(resp.duration),
-                  size: file.size,
-                  file_num: randomId,
-                })
-              } else {
-                // 更新上传状态为失败
-                const index = virtualList.value.findIndex(
-                  (item) => item.file_num === randomId,
-                )
-                if (index !== -1) {
-                  virtualList.value[index].uploadStatus = 3
-                }
-                resolve('')
-                message.error(msg)
+
+          try {
+            const result = await uploadImg(form, (e) => onProgressFn(e, randomId))
+            console.log('视频上传完成，结果:', result)
+
+            if (result.status === 0) {
+              // 更新上传状态为成功
+              const index = virtualList.value.findIndex(
+                (item) => item.file_num === randomId,
+              )
+              if (index !== -1) {
+                virtualList.value[index].uploadStatus = 2
+                virtualList.value[index].uploadCurrent = 100
               }
-            },
-          )
+
+              resolve({
+                type: 'video',
+                url: result.data.ori_url,
+                cover: result.data.cover_url,
+                duration: parseInt(resp.duration),
+                size: file.size,
+                file_num: randomId,
+              })
+            } else {
+              uploadsStore.updateUploadStatus(false)
+              // 更新上传状态为失败
+              const index = virtualList.value.findIndex(
+                (item) => item.file_num === randomId,
+              )
+              if (index !== -1) {
+                virtualList.value[index].uploadStatus = 3
+              }
+              message.error(result.msg)
+              resolve('')
+            }
+          } catch (error) {
+            console.error('视频上传出错:', error)
+            uploadsStore.updateUploadStatus(false)
+            // 更新上传状态为失败
+            const index = virtualList.value.findIndex(
+              (item) => item.file_num === randomId,
+            )
+            if (index !== -1) {
+              virtualList.value[index].uploadStatus = 3
+            }
+            message.error('上传失败')
+            resolve('')
+          }
         },
+        fail: (error) => {
+          console.error('获取视频信息失败:', error)
+          uploadsStore.updateUploadStatus(false)
+          message.error('获取视频信息失败')
+          resolve('')
+        }
       })
-      const form = new FormData()
     }
   })
 }
@@ -508,6 +547,7 @@ const chooseFile = () => {
         uploadStatus: 1, // 1 上传中 2 上传成功 3 上传失败
       }
       virtualList.value.unshift(newItem)
+      uploadsStore.updateUploadStatus(true)
       uploadsStore.initUploadFile(
         res.tempFiles[0],
         props.talkParams,
@@ -523,6 +563,7 @@ const chooseFile = () => {
               virtualList.value[index].uploadCurrent = 100
             }
           } else {
+            uploadsStore.updateUploadStatus(false)
             // 更新上传状态为失败
             const index = virtualList.value.findIndex(
               (item) => item.file_num === randomId,
diff --git a/src/pages/dialog/index.vue b/src/pages/dialog/index.vue
index 5a74812..f506d15 100644
--- a/src/pages/dialog/index.vue
+++ b/src/pages/dialog/index.vue
@@ -216,6 +216,17 @@
       </div>
       <template #bottom>
         <div class="footBox" id="footBoxArea">
+          <span
+            class="flex items-center justify-center text-[24rpx] text-[#999999]"
+            style="background-color: #e5e5e5; padding: 12rpx 24rpx;"
+            v-if="uploadsParams.isUploading"
+          >
+            {{
+              '正在发送中，剩余' +
+              uploadsParams.uploadingNum +
+              '个...请不要离开哦~'
+            }}
+          </span>
           <div v-if="!dialogueStore.isOpenMultiSelect">
             <div
               class="pt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-start justify-between"
@@ -540,6 +551,7 @@ const settingsStore = useSettingsStore()
 const userStore = useUserStore()
 const dialogueStore = useDialogueStore()
 const editorDraftStore = useEditorDraftStore()
+const uploadsStore = useUploadsStore()
 const editor = ref()
 const zpagingRef = ref()
 useZPaging(zpagingRef)
@@ -559,6 +571,11 @@ const talkParams = reactive({
   unReadNum: computed(() => dialogueStore.unreadNum),
 })
 
+const uploadsParams = reactive({
+  isUploading: computed(() => uploadsStore.isUploading),
+  uploadingNum: computed(() => uploadsStore.uploadingNum),
+})
+
 const state = ref({
   isOpenEmojiPanel: false,
   isOpenFilePanel: false,
@@ -662,14 +679,17 @@ const onSendMessage = (data = {}, callBack) => {
   ServePublishMessage(message)
     .then(({ code, message }) => {
       if (code == 200) {
+        uploadsStore.updateUploadStatus(false)
         if (callBack) {
           callBack(true)
         }
       } else {
+        uploadsStore.updateUploadStatus(false)
         message.warning(message)
       }
     })
     .catch(() => {
+      uploadsStore.updateUploadStatus(false)
       message.warning('网络繁忙,请稍后重试!')
     })
 }
@@ -696,8 +716,11 @@ const onSendMessageClick = () => {
 
   switch (data.msgType) {
     case 1: // 文字消息
+      if (data.items[0].content.trim() === '') {
+        return
+      }
       if (data.items[0].content.length > 1024) {
-        return message.info('发送内容超长，请分条发送')
+        return message.warning('发送内容超长，请分条发送')
       }
       onSendTextEvent({
         data,
@@ -1646,6 +1669,9 @@ onUnmounted(() => {
   if (state.value.showMentionSelectTimer) {
     clearTimeout(state.value.showMentionSelectTimer)
   }
+  if (uploadsStore.isUploading) {
+    uploadsStore.clearUpload()
+  }
 })
 
 // 修改防抖函数的实现
diff --git a/src/store/modules/uploads.ts b/src/store/modules/uploads.ts
index e9cf38d..ceedf30 100644
--- a/src/store/modules/uploads.ts
+++ b/src/store/modules/uploads.ts
@@ -33,7 +33,9 @@ export const useUploadsStore = defineStore('uploads', {
   state: () => {
     return {
       isShow: false,
-      items: []
+      items: [],
+      isUploading: false,//当前是否正在上传
+      uploadingNum: 0//当前正在上传数量
     }
   },
   getters: {
@@ -74,7 +76,11 @@ export const useUploadsStore = defineStore('uploads', {
 
           this.triggerUpload(upload_id,msgId)
           this.isShow = true
+        } else {
+          this.updateUploadStatus(false)
         }
+      }).catch(()=> {
+        this.updateUploadStatus(false)
       })
     },
 
@@ -128,6 +134,7 @@ export const useUploadsStore = defineStore('uploads', {
               this.triggerUpload(uploadId, msgId)
             }
           } else {
+            this.updateUploadStatus(false)
             item.status = 3
             // 更新虚拟列表中的状态为失败
             const { virtualList } = useDialogueListStore()
@@ -138,6 +145,7 @@ export const useUploadsStore = defineStore('uploads', {
           }
         })
         .catch(() => {
+          this.updateUploadStatus(false)
           item.status = 3
           // 更新虚拟列表中的状态为失败
           const { virtualList } = useDialogueListStore()
@@ -155,7 +163,38 @@ export const useUploadsStore = defineStore('uploads', {
         receiver_id: item.receiver_id,
         talk_type: item.talk_type,
         file_num: file_num
+      }).then((res) => {
+        console.log(res, 'res')
+        if(res.code == 200){
+          this.updateUploadStatus(false)
+        }else{
+          this.updateUploadStatus(false)
+        }
+      }).catch(() => {
+        this.updateUploadStatus(false)
       })
+    },
+
+    //更新资源上传状态
+    updateUploadStatus(isUploading: boolean){
+      if(isUploading){
+        this.uploadingNum++
+        this.isUploading = true
+      }else{
+        this.uploadingNum--
+        if(this.uploadingNum < 0){
+          this.uploadingNum = 0
+        }
+        if(this.uploadingNum === 0){
+          this.isUploading = false
+        }
+      }
+    },
+
+    // 清除上传
+    clearUpload(){
+      this.isUploading = false
+      this.uploadingNum = 0
     }
   }
 })