feat:聊天信息支持文件、图片、语音发送，增加一键启停脚本

2026-04-20 11:53:27 +08:00
parent 1a5aac9998
commit 0c1540bdee
116 changed files with 20277 additions and 144 deletions
--- a/frontend/src/components/msg/MsgFile.vue
+++ b/frontend/src/components/msg/MsgFile.vue
@@ -0,0 +1,141 @@
+<!--
+  文件消息组件
+  展示文件图标 + 文件名 + 大小 + 下载/预览操作
+  根据文件扩展名显示不同颜色的图标
+-->
+<template>
+  <view v-if="msg.status === 2" class="recalled-text">消息已撤回</view>
+  <view v-else class="msg-file-wrap" :class="{ 'file-self': isSelf }" @tap="onTap">
+    <view class="file-icon-wrap" :style="{ backgroundColor: fileInfo.color + '20' }">
+      <text class="file-icon-label" :style="{ color: fileInfo.color }">{{ fileInfo.label }}</text>
+    </view>
+    <view class="file-detail">
+      <text class="file-name" :class="{ 'file-name-self': isSelf }">{{ fileData.file_name || '未知文件' }}</text>
+      <text class="file-size" :class="{ 'file-size-self': isSelf }">{{ formattedSize }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { parseExtra, formatFileSize, getFileTypeInfo, isPreviewable } from '@/utils/file'
+
+export default {
+  name: 'MsgFile',
+  props: {
+    msg: { type: Object, required: true },
+    isSelf: { type: Boolean, default: false }
+  },
+  setup(props) {
+    const fileData = computed(() => {
+      const extra = parseExtra(props.msg.extra)
+      return extra?.file || {}
+    })
+
+    const fileInfo = computed(() => getFileTypeInfo(fileData.value.file_name))
+    const formattedSize = computed(() => formatFileSize(fileData.value.size))
+
+    const onTap = () => {
+      const url = fileData.value.url
+      if (!url) return
+
+      const fileName = fileData.value.file_name || ''
+
+      if (isPreviewable(fileName)) {
+        // #ifdef H5
+        window.open(url, '_blank')
+        return
+        // #endif
+        // #ifndef H5
+        uni.downloadFile({
+          url,
+          success: (res) => {
+            if (res.statusCode === 200) {
+              uni.openDocument({
+                filePath: res.tempFilePath,
+                showMenu: true,
+                fail: () => uni.showToast({ title: '无法预览此文件', icon: 'none' })
+              })
+            }
+          },
+          fail: () => uni.showToast({ title: '下载失败', icon: 'none' })
+        })
+        // #endif
+      } else {
+        // #ifdef H5
+        const a = document.createElement('a')
+        a.href = url
+        a.download = fileName
+        a.target = '_blank'
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        // #endif
+        // #ifndef H5
+        uni.downloadFile({
+          url,
+          success: (res) => {
+            uni.saveFile({
+              tempFilePath: res.tempFilePath,
+              success: () => uni.showToast({ title: '文件已保存', icon: 'success' }),
+              fail: () => uni.showToast({ title: '保存失败', icon: 'none' })
+            })
+          }
+        })
+        // #endif
+      }
+    }
+
+    return { fileData, fileInfo, formattedSize, onTap }
+  }
+}
+</script>
+
+<style scoped>
+.msg-file-wrap {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  min-width: 300rpx;
+  max-width: 450rpx;
+  cursor: pointer;
+}
+.file-icon-wrap {
+  flex-shrink: 0;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.file-icon-label {
+  font-size: 22rpx;
+  font-weight: 700;
+}
+.file-detail {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+  overflow: hidden;
+}
+.file-name {
+  font-size: 26rpx;
+  color: #1E293B;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-name-self { color: #FFFFFF; }
+.file-size {
+  font-size: 22rpx;
+  color: #94A3B8;
+}
+.file-size-self { color: rgba(255, 255, 255, 0.7); }
+.recalled-text {
+  font-size: 24rpx;
+  color: #94A3B8;
+  font-style: italic;
+}
+</style>
--- a/frontend/src/components/msg/MsgImage.vue
+++ b/frontend/src/components/msg/MsgImage.vue
@@ -0,0 +1,114 @@
+<!--
+  图片消息组件
+  支持单图/多图（最多 9 张）网格布局 + 点击大图预览
+  布局规则：1张=大图, 2/4张=2列, 3/5-9张=3列
+-->
+<template>
+  <view v-if="msg.status === 2" class="recalled-text">消息已撤回</view>
+  <view v-else class="msg-image-wrap" :class="gridClass">
+    <view
+      v-for="(img, idx) in images"
+      :key="idx"
+      class="img-item"
+      @tap="onPreview(idx)"
+    >
+      <image
+        class="img-thumb"
+        :src="img.thumbnail_url || img.url"
+        mode="aspectFill"
+        lazy-load
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { parseExtra } from '@/utils/file'
+
+export default {
+  name: 'MsgImage',
+  props: {
+    msg: { type: Object, required: true },
+    isSelf: { type: Boolean, default: false }
+  },
+  setup(props) {
+    const images = computed(() => {
+      const extra = parseExtra(props.msg.extra)
+      return extra?.images || []
+    })
+
+    const gridClass = computed(() => {
+      const count = images.value.length
+      if (count <= 1) return 'grid-single'
+      if (count === 2 || count === 4) return 'grid-2col'
+      return 'grid-3col'
+    })
+
+    const onPreview = (idx) => {
+      const urls = images.value.map(img => img.url)
+      uni.previewImage({
+        urls,
+        current: urls[idx] || urls[0]
+      })
+    }
+
+    return { images, gridClass, onPreview }
+  }
+}
+</script>
+
+<style scoped>
+.msg-image-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  max-width: 500rpx;
+}
+.grid-single {
+  width: 400rpx;
+}
+.grid-single .img-item {
+  width: 100%;
+  min-width: 200rpx;
+  max-width: 400rpx;
+}
+.grid-single .img-thumb {
+  width: 400rpx;
+  height: 300rpx;
+  border-radius: 12rpx;
+  display: block;
+}
+.grid-2col {
+  width: 320rpx;
+}
+.grid-2col .img-item {
+  width: calc(50% - 4rpx);
+}
+.grid-2col .img-thumb {
+  width: 156rpx;
+  height: 156rpx;
+  border-radius: 8rpx;
+  display: block;
+}
+.grid-3col {
+  width: 360rpx;
+}
+.grid-3col .img-item {
+  width: calc(33.33% - 6rpx);
+}
+.grid-3col .img-thumb {
+  width: 110rpx;
+  height: 110rpx;
+  border-radius: 8rpx;
+  display: block;
+}
+.img-item {
+  overflow: hidden;
+}
+.recalled-text {
+  font-size: 24rpx;
+  color: #94A3B8;
+  font-style: italic;
+}
+</style>
--- a/frontend/src/components/msg/MsgText.vue
+++ b/frontend/src/components/msg/MsgText.vue
@@ -0,0 +1,41 @@
+<!--
+  文本消息组件
+  接收 msg prop，展示文本内容
+  撤回消息时显示"消息已撤回"
+-->
+<template>
+  <view class="msg-text-wrap">
+    <text v-if="msg.status === 2" class="recalled-text">消息已撤回</text>
+    <text v-else class="msg-text" :class="{ 'msg-text-self': isSelf }">{{ msg.content }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MsgText',
+  props: {
+    msg: { type: Object, required: true },
+    isSelf: { type: Boolean, default: false }
+  }
+}
+</script>
+
+<style scoped>
+.msg-text-wrap {
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.msg-text {
+  font-size: 30rpx;
+  line-height: 42rpx;
+  color: #1E293B;
+}
+.msg-text-self {
+  color: #FFFFFF;
+}
+.recalled-text {
+  font-size: 24rpx;
+  color: #94A3B8;
+  font-style: italic;
+}
+</style>
--- a/frontend/src/components/msg/MsgVoice.vue
+++ b/frontend/src/components/msg/MsgVoice.vue
@@ -0,0 +1,163 @@
+<!--
+  语音消息组件
+  显示播放按钮 + 波形条 + 时长
+  宽度按时长线性缩放：最小 120rpx（1秒），最大 500rpx（60秒）
+  同一时间只允许一个语音播放（全局单例）
+-->
+<template>
+  <view v-if="msg.status === 2" class="recalled-text">消息已撤回</view>
+  <view
+    v-else
+    class="msg-voice-wrap"
+    :class="{ 'voice-self': isSelf, 'voice-playing': isPlaying }"
+    :style="{ width: voiceWidth + 'rpx' }"
+    @tap="onTogglePlay"
+  >
+    <view class="voice-icon" :class="{ 'voice-icon-self': isSelf }">
+      <uni-icons :type="isPlaying ? 'sound-filled' : 'sound'" :size="18" :color="isSelf ? '#FFFFFF' : '#2563EB'" />
+    </view>
+    <view class="voice-bars">
+      <view v-for="i in 5" :key="i" class="voice-bar" :class="{ 'bar-self': isSelf }" :style="{ height: barHeights[i-1] + 'rpx' }" />
+    </view>
+    <text class="voice-duration" :class="{ 'duration-self': isSelf }">{{ duration }}"</text>
+  </view>
+</template>
+
+<script>
+import { ref, computed, onBeforeUnmount } from 'vue'
+import { parseExtra } from '@/utils/file'
+
+let _globalAudio = null
+let _globalPlayingId = null
+
+export default {
+  name: 'MsgVoice',
+  props: {
+    msg: { type: Object, required: true },
+    isSelf: { type: Boolean, default: false }
+  },
+  setup(props) {
+    const isPlaying = ref(false)
+
+    const voiceData = computed(() => {
+      const extra = parseExtra(props.msg.extra)
+      return extra?.voice || {}
+    })
+
+    const duration = computed(() => voiceData.value.duration || 0)
+
+    const voiceWidth = computed(() => {
+      const d = duration.value
+      const minW = 120, maxW = 500
+      return Math.min(maxW, Math.max(minW, minW + (d / 60) * (maxW - minW)))
+    })
+
+    const barHeights = computed(() => {
+      const base = [20, 30, 24, 32, 18]
+      return base
+    })
+
+    const onTogglePlay = () => {
+      const url = voiceData.value.url
+      if (!url) return
+
+      const msgId = props.msg.id || props.msg.client_msg_id
+
+      if (_globalPlayingId === msgId && _globalAudio) {
+        _globalAudio.stop()
+        _globalAudio = null
+        _globalPlayingId = null
+        isPlaying.value = false
+        return
+      }
+
+      if (_globalAudio) {
+        _globalAudio.stop()
+        _globalAudio = null
+        _globalPlayingId = null
+      }
+
+      const audio = uni.createInnerAudioContext()
+      audio.src = url
+      audio.onPlay(() => {
+        isPlaying.value = true
+        _globalPlayingId = msgId
+      })
+      audio.onEnded(() => {
+        isPlaying.value = false
+        _globalAudio = null
+        _globalPlayingId = null
+      })
+      audio.onError(() => {
+        isPlaying.value = false
+        _globalAudio = null
+        _globalPlayingId = null
+        uni.showToast({ title: '播放失败', icon: 'none' })
+      })
+      audio.play()
+      _globalAudio = audio
+    }
+
+    onBeforeUnmount(() => {
+      const msgId = props.msg.id || props.msg.client_msg_id
+      if (_globalPlayingId === msgId && _globalAudio) {
+        _globalAudio.stop()
+        _globalAudio = null
+        _globalPlayingId = null
+      }
+    })
+
+    return { isPlaying, duration, voiceWidth, barHeights, onTogglePlay }
+  }
+}
+</script>
+
+<style scoped>
+.msg-voice-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 4rpx 0;
+  cursor: pointer;
+}
+.voice-icon {
+  flex-shrink: 0;
+}
+.voice-bars {
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+  flex: 1;
+}
+.voice-bar {
+  width: 6rpx;
+  min-height: 12rpx;
+  border-radius: 3rpx;
+  background-color: #2563EB;
+  transition: background-color 200ms;
+}
+.bar-self {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+.voice-playing .voice-bar {
+  animation: voicePulse 0.8s ease-in-out infinite alternate;
+}
+.voice-duration {
+  font-size: 24rpx;
+  color: #64748B;
+  flex-shrink: 0;
+}
+.duration-self {
+  color: rgba(255, 255, 255, 0.9);
+}
+.recalled-text {
+  font-size: 24rpx;
+  color: #94A3B8;
+  font-style: italic;
+}
+
+@keyframes voicePulse {
+  0% { opacity: 0.4; }
+  100% { opacity: 1; }
+}
+</style>