uniIM/components/messages/MessageFile.vue

<template>
  <view class="file-box" v-if="message.messageType===MessageType.file && message.extend?.url && message.extend?.fileName">
    <view class="file-icon">
      <text class="cuIcon cuIcon-down" style="color: #666666;"></text>
    </view>
    <uni-link color="#666666" class="file-text" :href="message.extend.url" :text="message.extend.fileName"/>
  </view>
</template>

<script setup lang="ts">
import MessageType from "@/utils/MessageType";
import UniLink from "@/uni_modules/uni-link/components/uni-link/uni-link.vue";
import type Message from "@/mode/Message";

interface Props<T> {
  message: T
}
defineProps<Props<Message>>()
</script>

<style lang="scss" scoped>
.file-box {
  width: 60vw;
  display: flex;
  background-color: #efefef;
  color: #666666;

  .file-icon {
    background-color: #cccccc;
    padding: 10px;
    width: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .cuIcon {
      line-height: normal;
      font-size: 2rem;
    }
  }

  .file-text {
    width: 0;
    padding: 10px;
    flex: 5;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    text-decoration: none;
    .file-name {
      -webkit-line-clamp: 2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>