geekai/web/src/components/FileList.vue

<template>
  <el-container class="chat-file-list">
    <div v-for="file in fileList" :key="file.url">
      <div class="image" v-if="isImage(file.ext)">
        <el-image :src="file.url" fit="cover" />
        <div class="action">
          <el-icon @click="removeFile(file)"><CircleCloseFilled /></el-icon>
        </div>
      </div>
      <div class="item" v-else>
        <div class="icon">
          <el-image :src="GetFileIcon(file.ext)" fit="cover" />
        </div>
        <div class="body">
          <div class="title">
            <el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold">{{ substr(file.name, 30) }}</el-link>
          </div>
          <div class="info">
            <span>{{ GetFileType(file.ext) }}</span>
            <span>{{ FormatFileSize(file.size) }}</span>
          </div>
        </div>
        <div class="action">
          <el-icon @click="removeFile(file)"><CircleCloseFilled /></el-icon>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { isImage, removeArrayItem, substr } from "@/utils/libs";
import { FormatFileSize, GetFileIcon, GetFileType } from "@/store/system";

const props = defineProps({
  files: {
    type: Array,
    default: [],
  },
});
const emits = defineEmits(["removeFile"]);
const fileList = ref(props.files);

const removeFile = (file) => {
  fileList.value = removeArrayItem(fileList.value, file, (v1, v2) => v1.url === v2.url);
  emits("removeFile", file);
};
</script>

<style scoped lang="stylus">

.chat-file-list {
  display flex
  flex-flow row
  .image {
    display flex
    flex-flow row
    margin-right 10px
    max-width 600px
    position relative

    .el-image {
      height 56px
      width 56px
      border 1px solid #e3e3e3
      border-radius 10px
    }
  }
  .item {
    position relative
    display flex
    flex-flow row
    border-radius 10px
    background-color:var(--chat-content-bg);
    color:var(--theme-text-color-primary);
    border 1px solid #e3e3e3
    padding 6px
    margin-right 10px

    .icon {
      .el-image {
        width 40px
        height 40px
      }
    }
    .body {
      margin-left 5px
      font-size 14px
      .title {
        line-height 24px
        color #0D0D0D
      }
      .info {
        color #B4B4B4

        span {
          margin-right 10px
        }
      }
    }
  }

  .action {
    position absolute
    top -8px
    right -8px
    color #da0d54
    cursor pointer
    font-size 20px
    .el-icon {
      background-color #fff
      border-radius 50%
    }
  }
}
</style>