处理文件上传中友好提示；处理文件上传失败场景图标展示；解决图片上传loading问题；替换所有进度条颜色更醒目；

2025-03-30 16:22:29 +08:00 · 2025-03-30 16:22:29 +08:00 · e7ec387735
commit e7ec387735
parent 6140c625e4
10 changed files with 493 additions and 125 deletions
--- 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']
--- a/src/components/async-error/index.vue
+++ 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>
--- a/src/components/async-loading/index.vue
+++ 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>
--- 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>
--- 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>
--- 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>
--- 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) => {
--- 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,
--- 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()
+  }
 })

 // 修改防抖函数的实现
--- 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
    }
  }
 })