chat-pc/src/components/talk/message/FileMessage.vue

<script setup>
import { fileFormatSize } from '@/utils/strings'
import { download, getFileNameSuffix } from '@/utils/functions'
import { ref, computed } from 'vue'

// 定义组件属性
const props = defineProps({
  // 文件的额外信息
  extra: {
    type: Object,
    required: true
  },
  // 聊天记录数据
  data: {
    type: Object,
    required: true
  },
  // 是否使用最大宽度
  maxWidth: {
    type: Boolean,
    default: false
  }
})

// 控制文件上传时的播放状态
const isPlaying = ref(false)

/**
 * 切换播放状态
 * 在上传过程中可以暂停/继续
 */
const togglePlay = () => {
  isPlaying.value = !isPlaying.value
  console.log('播放状态：', isPlaying.value ? '播放中' : '暂停')
}

/**
 * 从文件URL中提取并返回大写的文件扩展名
 * @param {string} url - 文件的URL或名称
 * @returns {string} 大写的文件扩展名
 */
function getFileExtensionUpperCase(url) {
  // 从URL提取文件名
  const fileName = url.split('/').pop()
  // 提取扩展名并转换为大写
  return fileName.split('.').pop().toUpperCase()
}

// 计算SVG圆环进度条的参数
const radius = 9 // 圆环半径
const circumference = computed(() => 2 * Math.PI * radius) // 计算圆周长
// 根据上传百分比计算描边偏移量
const strokeDashoffset = computed(() => 
  circumference.value * (1 - props.extra.percentage / 100)
)
</script>

<template>
  <div class="w-243px bg-#fff rounded-8px shadow-md px-14px pointer">
    <!-- 文件头部信息 -->
    <div class="flex py-14px pr-5px justify-between w-full" style="border-bottom: 1px solid #EEEEEE;">
      <!-- 文件名 -->
      <div class="text-#1A1A1A text-14px">{{ extra.name }}</div>
      <!-- 文件图标区域 -->
      <div class="relative">
        <img class="w-47.91px h-47.91px" src="@/assets/image/file-paper-line@2x.png" alt="文件图标">
          <!-- 文件扩展名显示 - 非上传状态 -->
          <div v-if="!extra.is_uploading" class="absolute top-11px left-16px text-#DE4E4E text-10px font-bold">
            {{ getFileExtensionUpperCase(extra.name) }}
          </div>
        <!-- 上传进度圆环 - 上传状态 -->
        <div v-else class="absolute top-9px left-16px w-20px h-20px">
          <div class="circle-progress-container" @click="togglePlay">
            <svg class="circle-progress" width="20" height="20" viewBox="0 0 20 20">
              <!-- 底色圆环 -->
              <circle 
                cx="10" 
                cy="10" 
                r="9"
                fill="transparent"
                stroke="#EEEEEE"
                stroke-width="2"
              />
              <!-- 进度圆环 -->
              <circle 
                cx="10" 
                cy="10" 
                r="9"
                fill="transparent"
                stroke="#D54C4B"
                stroke-width="2"
                :stroke-dasharray="circumference"
                :stroke-dashoffset="strokeDashoffset"
                transform="rotate(-90 10 10)"
                class="progress-circle"
              />
              
              <!-- 暂停图标 - 播放中显示 -->
              <g v-if="isPlaying" class="pause-icon transform-rotate-90">
                <rect x="7" y="5" width="2" height="10" fill="#D54C4B" />
                <rect x="11" y="5" width="2" height="10" fill="#D54C4B" />
              </g>
              
              <!-- 播放图标 - 暂停时显示 -->
              <g v-else class="play-icon">
                <rect x="6" y="6" width="8" height="8" fill="#D54C4B" />
              </g>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <!-- 文件大小信息 -->
    <div class="text-#747474 text-12px pt-5px pb-11px">{{ fileFormatSize(extra.size) }}</div>
  </div>
</template>

<style lang="less" scoped>
.circle-progress-container {
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
}

.circle-progress {
  transform: rotate(-90deg);
  transform-origin: center;
}

.progress-circle {
  transition: stroke-dashoffset 0.3s ease;
}

.pause-icon, .play-icon {
  transform-origin: center;
}

.transform-rotate-90 {
  transform: rotate(90deg);
}
</style>