历史显示附件

wujingjing

2025-03-04 129e4b98811106fbf7964e8fec547350f2875e5c

 src/components/chat/components/playBar/hook/useUploadFile.ts

@@ -1,9 +1,11 @@
import { useEventListener, useFileDialog } from '@vueuse/core';
import { ref, type Ref } from 'vue';
import { type Ref } from 'vue';
import type { Attach } from './useAttach';
import { convertFileSize } from '/@/utils/file';

export type UseUploadFileOptions = {
   pastTarget: Ref<HTMLElement | null>;
   attachFileList: Ref<Attach<UploadFile>[]>;
};

export type FileType = 'doc' | 'docx' | 'pdf' | 'md' | 'xls' | 'xlsx' | 'png' | 'jpg' | 'jpeg' | 'gif' | 'json' | 'txt' | 'csv';
@@ -19,7 +21,7 @@
   previewUrl?: string;
};

const getGroupType = (type: FileType): FileGroupType => {
export const getFileGroupType = (type: FileType): FileGroupType => {
   switch (type) {
      case 'doc':
      case 'docx':
@@ -48,7 +50,7 @@
   }
};

const getIconByGroupType = (groupType: FileGroupType) => {
export const getIconByGroupType = (groupType: FileGroupType) => {
   switch (groupType) {
      case 'word':
         return 'word';
@@ -70,7 +72,7 @@
   }
};

const getIconClassByGroupType = (groupType: FileGroupType) => {
export const getIconClassByGroupType = (groupType: FileGroupType) => {
   switch (groupType) {
      case 'word':
         return 'text-blue-400';
@@ -93,16 +95,20 @@
};
// const supportFileType = ['doc', 'docx', 'md', 'xls', 'xlsx', 'png', 'jpg', 'jpeg', 'gif', 'json', 'pdf'];
const supportFileType = ['csv', 'txt'];
const acceptFiles = [].join(',')
export const useUploadFile = (options: UseUploadFileOptions) => {
   const attachFileList = ref<UploadFile[]>([]);

export const getFileSuffix = (name:string):FileType=>{
   if(!name) return 'txt';
   const suffix = name.split('.').pop() as FileType;
   return suffix
}
export const useUploadFile = (options: UseUploadFileOptions) => {
   const { attachFileList } = options;
   const parseFiles = (files: FileList) => {
      const filterFiles: UploadFile[] = [];
      for (const file of files) {
         const suffix = file.name.split('.').pop() as FileType;
         const suffix = getFileSuffix(file.name);
         if (supportFileType.includes(suffix)) {
            const groupType = getGroupType(suffix);
            const groupType = getFileGroupType(suffix);
            const uploadFile: UploadFile = {
               type: suffix,
               groupType: groupType,
@@ -126,7 +132,24 @@
            filterFiles.push(uploadFile);
         }
      }
      attachFileList.value.push(...filterFiles);
      attachFileList.value.push(
         ...filterFiles.map(
            (item) =>
               ({
                  get title() {
                     return item.name;
                  },
                  type: 'file',
                  model: item,
                  get icon() {
                     return item.icon;
                  },
                  get iconClass() {
                     return item.iconClass;
                  },
               } as Attach<UploadFile>)
         )
      );
   };

   /**
@@ -140,17 +163,14 @@
      parseFiles(files);
   };

   const clearFileList = () => {
      attachFileList.value = [];
   };

   const {
      files,
      open: openFileDialog,
      reset: resetOpenFileDialog,
      onChange: onPickFileChange,
   } = useFileDialog({
      accept:
         'text/csv,text/plain', // Only accept csv and txt files
      accept: 'text/csv,text/plain', // Only accept csv and txt files
      reset: true,
   });

@@ -161,21 +181,17 @@
      if (!files) return;
      parseFiles(files);
   });
   const deleteIndexFile = (index) => {
      const file = attachFileList.value[index];
      // Revoke object URL for image files
   const deleteUploadFile = (file: UploadFile) => {
      if (file.previewUrl) {
         URL.revokeObjectURL(file.previewUrl);
      }
      attachFileList.value.splice(index, 1);
   };

   useEventListener(options.pastTarget, 'paste', pasteUpload);

   return {
      attachFileList,
      clearFileList,
      deleteIndexFile,
      deleteUploadFile,
      openFileClick,
   };
};