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

frontend/src/components/chat/MorePanel.vue

@@ -0,0 +1,70 @@
+<!--
+  输入栏"+"展开面板
+  包含图片和文件两个入口
+  网格布局，点击后触发对应的选择事件
+-->
+<template>
+  <view class="more-panel" v-if="visible">
+    <view class="panel-grid">
+      <view class="panel-item" @tap="onChooseImage">
+        <view class="item-icon" style="background-color: #DBEAFE;">
+          <uni-icons type="image" :size="28" color="#2563EB" />
+        </view>
+        <text class="item-label">图片</text>
+      </view>
+      <view class="panel-item" @tap="onChooseFile">
+        <view class="item-icon" style="background-color: #FEE2E2;">
+          <uni-icons type="paperclip" :size="28" color="#DC2626" />
+        </view>
+        <text class="item-label">文件</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MorePanel',
+  props: {
+    visible: { type: Boolean, default: false }
+  },
+  emits: ['choose-image', 'choose-file'],
+  setup(props, { emit }) {
+    const onChooseImage = () => emit('choose-image')
+    const onChooseFile = () => emit('choose-file')
+    return { onChooseImage, onChooseFile }
+  }
+}
+</script>
+
+<style scoped>
+.more-panel {
+  background-color: #F8FAFC;
+  border-top: 1rpx solid #E2E8F0;
+  padding: 24rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom, 0));
+}
+.panel-grid {
+  display: flex;
+  gap: 32rpx;
+}
+.panel-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+}
+.item-icon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.item-icon:active { opacity: 0.7; }
+.item-label {
+  font-size: 22rpx;
+  color: #64748B;
+}
+</style>

frontend/src/components/chat/VoiceRecorder.vue

@@ -0,0 +1,176 @@
+<!--
+  语音录制组件
+  微信风格：长按录音 / 松手发送 / 上滑取消
+  最长 60 秒，不足 1 秒提示太短
+-->
+<template>
+  <view class="voice-recorder">
+    <view
+      class="record-btn"
+      :class="{ 'recording': isRecording, 'cancel-zone': isCancelZone }"
+      @touchstart.prevent="onTouchStart"
+      @touchmove.prevent="onTouchMove"
+      @touchend.prevent="onTouchEnd"
+    >
+      <text class="record-text">
+        {{ isRecording ? (isCancelZone ? '松开取消' : '松开发送') : '按住 说话' }}
+      </text>
+    </view>
+    <view v-if="isRecording" class="recording-overlay">
+      <view class="recording-indicator">
+        <view class="recording-icon" :class="{ 'cancel-icon': isCancelZone }">
+          <uni-icons :type="isCancelZone ? 'close' : 'mic'" :size="40" color="#FFFFFF" />
+        </view>
+        <text class="recording-time">{{ recordingTime }}"</text>
+        <text class="recording-tip">{{ isCancelZone ? '松开手指，取消发送' : '上滑取消发送' }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { ref, onBeforeUnmount } from 'vue'
+
+export default {
+  name: 'VoiceRecorder',
+  emits: ['recorded'],
+  setup(props, { emit }) {
+    const isRecording = ref(false)
+    const isCancelZone = ref(false)
+    const recordingTime = ref(0)
+    let recorder = null
+    let timer = null
+    let startY = 0
+
+    const onTouchStart = (e) => {
+      startY = e.touches[0].clientY
+      isCancelZone.value = false
+      recordingTime.value = 0
+
+      recorder = uni.getRecorderManager()
+      recorder.onStart(() => {
+        isRecording.value = true
+        timer = setInterval(() => {
+          recordingTime.value++
+          if (recordingTime.value >= 60) {
+            onTouchEnd()
+          }
+        }, 1000)
+      })
+      recorder.onStop((res) => {
+        clearInterval(timer)
+        isRecording.value = false
+        if (isCancelZone.value) return
+        if (recordingTime.value < 1) {
+          uni.showToast({ title: '录音时间太短', icon: 'none' })
+          return
+        }
+        emit('recorded', {
+          tempFilePath: res.tempFilePath,
+          duration: recordingTime.value,
+          fileSize: res.fileSize || 0
+        })
+      })
+      recorder.onError(() => {
+        clearInterval(timer)
+        isRecording.value = false
+        uni.showToast({ title: '录音失败', icon: 'none' })
+      })
+
+      recorder.start({
+        format: 'mp3',
+        duration: 60000,
+        sampleRate: 44100,
+        numberOfChannels: 1
+      })
+    }
+
+    const onTouchMove = (e) => {
+      if (!isRecording.value) return
+      const deltaY = startY - e.touches[0].clientY
+      isCancelZone.value = deltaY > 80
+    }
+
+    const onTouchEnd = () => {
+      if (recorder && isRecording.value) {
+        recorder.stop()
+      }
+    }
+
+    onBeforeUnmount(() => {
+      clearInterval(timer)
+      if (recorder && isRecording.value) {
+        isCancelZone.value = true
+        recorder.stop()
+      }
+    })
+
+    return { isRecording, isCancelZone, recordingTime, onTouchStart, onTouchMove, onTouchEnd }
+  }
+}
+</script>
+
+<style scoped>
+.voice-recorder {
+  flex: 1;
+}
+.record-btn {
+  height: 72rpx;
+  border-radius: 36rpx;
+  background-color: #F1F5F9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 200ms;
+}
+.record-btn.recording {
+  background-color: #DBEAFE;
+}
+.record-btn.cancel-zone {
+  background-color: #FEE2E2;
+}
+.record-text {
+  font-size: 28rpx;
+  color: #64748B;
+  user-select: none;
+}
+.recording-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  pointer-events: none;
+}
+.recording-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16rpx;
+  padding: 40rpx 60rpx;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 24rpx;
+}
+.recording-icon {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 60rpx;
+  background-color: #2563EB;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cancel-icon {
+  background-color: #DC2626;
+}
+.recording-time {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #FFFFFF;
+}
+.recording-tip {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+</style>

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>

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>

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>

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>